:root {

	/* Temp Component Colors - Mapped to Global Theme Colors */
	--temp-color-primary: var(--e-global-color-primary, #8039D8);
	--temp-color-secondary: var(--e-global-color-secondary, #FFC34D);
	--temp-color-text: var(--e-global-color-text, #08030D);
	--temp-color-accent: var(--e-global-color-accent, #FF447E);
	--temp-color-white: var(--e-global-color-0f5eb8e, #FFF);
	--temp-color-white-alt: var(--e-global-color-85e9bbd, #FCFCFD);
	--temp-color-gray-50: var(--e-global-color-97ecdca, #F9FAFB);
	--temp-color-gray-100: var(--e-global-color-105e5f6, #F2F4F7);
	--temp-color-gray-200: var(--e-global-color-72a87fb, #D0D5DD);
	--temp-color-gray-300: var(--e-global-color-756c055, #E4E7EC);
	--temp-color-gray-400: var(--e-global-color-e81beb8, #98A2B3);
	--temp-color-gray-500: var(--e-global-color-5f93b34, #667085);
	--temp-color-gray-600: var(--e-global-color-c4a88a4, #475467);
	--temp-color-gray-700: var(--e-global-color-32ca8ff, #344054);
	--temp-color-text-primary: var(--e-global-color-text, #08030D);
	--temp-color-text-secondary: var(--e-global-color-1c6dded, #08030DE6);
	--temp-color-text-muted: var(--e-global-color-2814bde, #08030D80);
	--temp-color-red-500: var(--e-global-color-1309210, #F04438);
	--temp-color-red-600: var(--e-global-color-d9c3289, #FA1B16);
	--temp-color-green-500: var(--e-global-color-cb5f6f8, #32D583);
	--temp-color-cyan-500: var(--e-global-color-637492b, #16BAC5);
	--temp-color-pink: var(--e-global-color-e0dccfc, #E813AE);
	--temp-color-background: var(--e-global-color-7401cd2, #F0F0F0);
	--temp-color-spiciness-15: var(--e-global-color-secondary, #FFC34D);
	--temp-color-spiciness-16: var(--e-global-color-spiciness-16, #FF8C00);
	--temp-color-spiciness-17: var(--e-global-color-1309210, #F04438);
	--temp-color-spiciness-18: var(--e-global-color-d9c3289, #FA1B16);

	/* Legacy variable for backward compatibility */
	--color-primary: var(--temp-color-primary);

	/* tune these values as needed */
	--bg-color: #6aa9ff;
	--bg-left-bleed: 120px; /* how far the background goes outside on the left */
	--content-padding: 40px;
	--right-radius: 30px;

	--accent: #ff4b9e;      /* bright pink for text */
	--pill-bg: #fff6f8;     /* very light pink fill */
	--pill-border: #ffdce6; /* pale pink border */
	--pill-radius: 6px;
	--pill-padding: 4px 12px;
	--pill-font-size: 14px;
}

.text-primary{
	color: var( --color-primary );
}

.text-italic{
	font-style: italic
}

.button-outline{
	position: relative;
}

.hidden  {
	display: none;
}

.button-outline::after{
	/*content: "";*/
	position: absolute;
	left: 1px;
	top: 1px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	border: 3px solid var(--temp-color-white);
	border-radius: 12px;
}

.banner-list li.elementor-icon-list-item{
	background-color: color-mix(in srgb, var(--temp-color-primary) 4%, transparent);
	border: 1px solid color-mix(in srgb, var(--temp-color-primary) 24%, transparent);
	height: 52px;
	border-radius: 20px;
	padding: 0 21px;
}

.banner-list li.elementor-icon-list-item:nth-child(1),
.banner-list li.elementor-icon-list-item:nth-child(2) {
	margin-bottom: 14px;
}

.bubble-cta{
	display:block;
	text-decoration: underline !important;
	color: var(--color-primary) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	margin-top: 8px;
	line-height: 1.6;

}

.bubble-textarea{
	height: 180px;
}

.video-background {
	backdrop-filter: blur(25px)
}

.backdrop-blur-100::before{
	backdrop-filter: blur(100px)
}

.vertical-background::after{
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	width: 100%;
	height: calc(100% - 2px);
	border-top: 16px solid var(--temp-color-white);
	border-bottom: 16px solid var(--temp-color-white);
}

/* Global Classes */
.mb-0 {
  margin-bottom: 0 !important;
}

/* ============================================
	Discussion Single Page - State Management

	UPDATED: Now using [discussion_state] shortcode system
	Legacy classes maintained for backward compatibility
	See: discussion-state.css for full state-based rules
	============================================ */

/* Leave Discussion Button - Add Icon */
.leave-discussion-btn,
.join-the-circle-btn {
	display: inline-flex;
	align-items: center;
}

.join-the-circle-btn {
	margin-bottom: 1px;
}

.leave-discussion-btn::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2715%27 height=%2715%27 viewBox=%270 0 15 15%27 fill=%27none%27%3E%3Cpath d=%27M8.4375 2.34375C8.4375 2.21943 8.48689 2.1002 8.57479 2.01229C8.6627 1.92438 8.78193 1.875 8.90625 1.875L12.6563 1.875C12.7806 1.875 12.8998 1.92438 12.9877 2.01229C13.0756 2.1002 13.125 2.21943 13.125 2.34375L13.125 12.6562C13.125 12.7806 13.0756 12.8998 12.9877 12.9877C12.8998 13.0756 12.7806 13.125 12.6562 13.125L8.90625 13.125C8.78193 13.125 8.6627 13.0756 8.57479 12.9877C8.48688 12.8998 8.4375 12.7806 8.4375 12.6562C8.4375 12.5319 8.48688 12.4127 8.57479 12.3248C8.6627 12.2369 8.78193 12.1875 8.90625 12.1875L12.1875 12.1875L12.1875 2.8125L8.90625 2.8125C8.78193 2.8125 8.6627 2.76311 8.57479 2.67521C8.48689 2.5873 8.4375 2.46807 8.4375 2.34375ZM2.01211 7.83164L4.35586 10.1754C4.44381 10.2633 4.56311 10.3128 4.6875 10.3128C4.81189 10.3128 4.93118 10.2633 5.01914 10.1754C5.1071 10.0874 5.15651 9.96814 5.15651 9.84375C5.15651 9.71936 5.1071 9.60006 5.01914 9.51211L3.47519 7.96875L8.90625 7.96875C9.03057 7.96875 9.1498 7.91936 9.23771 7.83146C9.32561 7.74355 9.375 7.62432 9.375 7.5C9.375 7.37568 9.32561 7.25645 9.23771 7.16854C9.1498 7.08063 9.03057 7.03125 8.90625 7.03125L3.47519 7.03125L5.01914 5.48789C5.1071 5.39993 5.15651 5.28064 5.15651 5.15625C5.15651 5.03186 5.1071 4.91256 5.01914 4.82461C4.93118 4.73665 4.81189 4.68724 4.6875 4.68724C4.56311 4.68724 4.44381 4.73665 4.35586 4.82461L2.01211 7.16836C1.96852 7.21189 1.93395 7.26359 1.91036 7.3205C1.88677 7.3774 1.87463 7.4384 1.87463 7.5C1.87463 7.5616 1.88677 7.6226 1.91036 7.6795C1.93395 7.73641 1.96852 7.78811 2.01211 7.83164Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}

.join-the-circle-btn::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 6px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2712%27 viewBox=%270 0 14 12%27 fill=%27none%27%3E%3Cpath d=%27M14 3.875C14 8.25 7.51312 11.7913 7.23687 11.9375C7.16406 11.9767 7.08268 11.9972 7 11.9972C6.91732 11.9972 6.83594 11.9767 6.76312 11.9375C6.48688 11.7913 0 8.25 0 3.875C0.00115796 2.84764 0.409788 1.86269 1.13624 1.13624C1.86269 0.409788 2.84764 0.00115796 3.875 0C5.16563 0 6.29562 0.555 7 1.49312C7.70438 0.555 8.83438 0 10.125 0C11.1524 0.00115796 12.1373 0.409788 12.8638 1.13624C13.5902 1.86269 13.9988 2.84764 14 3.875Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}

.spiciness-color-15 {
	background-color: var(--temp-color-spiciness-15);
}

.spiciness-color-16 {
	background-color: var(--temp-color-spiciness-16) !important;
}

.spiciness-color-17 {
	background-color: var(--temp-color-spiciness-17) !important;
}

.spiciness-color-18 {
	background-color: var(--temp-color-spiciness-18) !important;
}

.field-type-checkbox-field .jet-form-builder__field-label.for-checkbox :checked + span::before {
	border-color: var(--temp-color-primary);
	background-color: var(--temp-color-primary);
}

.field-type-checkbox-field .jet-form-builder__field-label.for-checkbox :not(:disabled):not(:checked):hover + span::before {
	border-color: var(--temp-color-primary);
}

/* ============================================
	Reflections Section Styles
	============================================ */

/* Section Container */
.reflections-section__header {
	margin-bottom: 40px;
}

.reflections-section__title {
	font-size: 32px;
	font-weight: 700;
	color: var(--temp-color-text-primary);
	margin-bottom: 12px;
	line-height: 1.3;
}

.reflections-section__subtitle {
	font-size: 16px;
	color: var(--temp-color-gray-500);
	line-height: 1.6;
	margin: 0;
}

/* Empty State */
.reflections-empty {
	text-align: center;
	padding: 80px 20px;
	background-color: var(--temp-color-gray-50);
	border-radius: 16px;
	border: 2px dashed var(--temp-color-gray-200);
	column-span: all; /* Span across all columns in masonry layout */
	-webkit-column-span: all; /* Safari support */
}

.reflections-empty__text {
	font-size: 18px;
	color: var(--temp-color-gray-500);
	margin: 0;
	font-weight: 500;
}

/* Loading Overlay */
.reflections-loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: color-mix(in srgb, #000 30%, transparent);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	backdrop-filter: blur(2px);
}

.reflections-loading::after {
	content: "";
	width: 50px;
	height: 50px;
	border: 4px solid color-mix(in srgb, var(--temp-color-white) 30%, transparent);
	border-top-color: var(--temp-color-white);
	border-radius: 50%;
	animation: reflections-spinner 0.8s linear infinite;
}

@keyframes reflections-spinner {

	to {
		transform: rotate(360deg);
	}
}

/* Reflections List - Masonry Layout */
#reflections-list {
	column-count: 1;
	column-gap: 16px;
	margin-bottom: 40px;
	transition: opacity 0.3s ease;
	width: 100%;
	position: relative;
}

/* Remove margin when pagination is missing */
#reflections-list.reflections-list--no-pagination {
	margin-bottom: 0;
}

@media (max-width: 1200px) {
  .banner-list li.elementor-icon-list-item:nth-child(3) {
    margin-bottom: 14px;
  }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {

	#reflections-list {
		column-count: 2;
		column-gap: 20px;
	}
}

/* Desktop: 3 columns - with important to override any conflicts */
@media (min-width: 1024px) {

	#reflections-list {
		column-count: 3 !important;
		column-gap: 24px !important;
		max-width: 100% !important;
	}
}

/* ============================================
	Reflection Card Styles
	============================================ */

.reflection-card {
	background-color: var(--temp-color-white);
	border: 2px dashed var(--temp-color-primary);
	border-radius: 32px;
	padding: 16px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px color-mix(in srgb, #000 4%, transparent);
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 24px;
	display: block;
	width: 100%;
	overflow: hidden;
}

/* When content is changing, lock position absolutely to prevent column reflow */
.reflection-card.reflection-card--locked {
	position: absolute !important;
	z-index: 10;
	transition: all 0.3s ease;
}

/* Placeholder to maintain space in column layout */
.reflection-card-placeholder {
	visibility: hidden;
	pointer-events: none;
}

.reflection-card:hover {
	box-shadow: 0 4px 16px color-mix(in srgb, #000 8%, transparent);
	border-color: var(--temp-color-gray-200);
}

.reflection-card--editing {
	border-color: var(--temp-color-primary);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--temp-color-primary) 15%, transparent);
}

.reflection-card--deleting {
	pointer-events: none;
}

/* Card Header */
.reflection-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	gap: 8px;
}

.reflection-card__avatar {
	width: 30px;
	height: 30px !important;
	border-radius: 50% !important;
	object-fit: cover;
	flex-shrink: 0;

	/* border: 2px solid #f0f0f0; */
}

.reflection-card__meta {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.reflection-card__author {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	color: var(--temp-color-text-primary);
	line-height: 1.55;
}

/* Current user author name in primary color */
.reflection-card__author--current {
	color: var(--color-primary);
}

.reflection-card__timestamp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--temp-color-gray-500);

	/* margin-top: 8px; */
}

.reflection-card__timestamp svg {
	flex-shrink: 0;
	vertical-align: middle;
}

.reflection-card__edited {
	display: inline-block;
	font-size: 12px;
	color: var(--temp-color-gray-500);
	font-style: italic;
	margin-left: 6px;
}

/* Card Content */
.reflection-card__content {
	font-size: 15px;
	line-height: 1.7;
	color: var(--temp-color-text-primary);
	margin-bottom: 8px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.reflection-card__content p {
	margin: 0 0 12px 0;
}

.reflection-card__content p:last-child {
	margin-bottom: 0;
}

.reflection-card__content-text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--temp-color-text-primary);
}

/* Read more/less content spans - initial state controlled by inline styles and JavaScript */
.reflection-card__content-preview {
	display: inline; /* Default: visible */
}

.reflection-card__content-full {
	display: none; /* Default: hidden */
}

.reflection-card__ellipsis {
	color: var(--temp-color-gray-500);
}

/* Read More Link - Inline with text */
.reflection-card__read-more,
.reflection-card__read-less {
	display: inline;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-primary) !important;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
	background: none;
	padding: 0;
}

.reflection-card__read-more:hover,
.reflection-card__read-less:hover {
	text-decoration: underline;
	color: var(--color-primary);
}

.reflection-card__read-more:focus,
.reflection-card__read-less:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Card Actions */
.reflection-card__actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.custom-reflection-btn {
	padding: 0 !important;
	color: var(--temp-color-text-primary) !important;
	background: no-repeat !important;
}

.reflection-card__edit-btn,
.reflection-card__delete-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	/* padding: 8px 14px; */
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	border: none;

	/* border-radius: 8px;
	cursor: pointer; */
	transition: all 0.2s ease;

	/* background-color: transparent; */
}

.reflection-card__edit-btn {
	color: var(--e-global-color-5f93b34) !important;
}

.reflection-card__edit-btn:hover {
	background-color: color-mix(in srgb, var(--temp-color-primary) 8%, transparent);
}

.reflection-card__delete-btn {
	color: var(--temp-color-red-500) !important;
}

.reflection-card__delete-btn:hover {
	background-color: color-mix(in srgb, var(--temp-color-red-500) 8%, transparent);
}

.reflection-card__edit-btn svg,
.reflection-card__delete-btn svg {
	flex-shrink: 0;
}

/* ============================================
	Inline Edit Form Styles
	============================================ */

.reflection-edit-form {
	margin-top: 8px;
}

.reflection-edit-textarea {
	width: 100%;
	min-height: 120px;
	padding: 14px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--temp-color-gray-700);
	background-color: var(--temp-color-gray-50);
	border: 2px solid var(--temp-color-primary);
	border-radius: 12px;
	resize: vertical;
	font-family: inherit;
	transition: all 0.2s ease;
}

.reflection-edit-textarea:focus {
	outline: none;
	background-color: var(--temp-color-white);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--temp-color-primary) 10%, transparent);
}

.reflection-edit-actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	justify-content: end;
}

.reflection-edit-save,
.reflection-edit-cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.reflection-edit-save svg {
	flex-shrink: 0;
}

.reflection-edit-save {

	/* background-color: var(--temp-color-primary); */
	color: var(--temp-color-green-500) !important;
}

.reflection-edit-cancel {
	background-color: var(--temp-color-background);
	color: var(--temp-color-gray-500);
}

.reflection-edit-save:active {
	transform: translateY(0);
}

.reflection-edit-save:disabled {
	background-color: var(--temp-color-gray-200);
	cursor: not-allowed;
	transform: none;
}

.reflection-edit-cancel svg {
	flex-shrink: 0;
}

.reflection-edit-cancel:hover {
	background-color: var(--temp-color-gray-300);
}

/* ============================================
	Reflection Form Styles
	============================================ */

.reflection-form-wrapper {
	margin-bottom: 30px;
	padding: 24px;
	background-color: color-mix(in srgb, var(--temp-color-primary) 10%, transparent);
	border-radius: 26px;
}

.reflection-form {
	background-color: var(--temp-color-white);
	border: 1px solid var(--temp-color-primary);
	border-radius: 16px;
	padding: 16px;
	transition: all 0.3s ease;
}

/* User header in form (reuse reflection-card styles) */
.reflection-form .reflection-card__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.reflection-form .reflection-card__avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
}

.reflection-form .reflection-card__meta {
	display: inline-flex;
}

.reflection-form .reflection-card__author--current {
	color: var(--temp-color-text-primary);
}

.reflection-form--loading {
	opacity: 0.6;
	pointer-events: none;
}

.reflection-form__label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--temp-color-text-primary);
	margin-bottom: 12px;
	line-height: 1.4;
}

.reflection-form__textarea-wrapper {
	position: relative;
	margin-bottom: 12px;
}

.reflection-form__textarea {
	width: 100%;
	min-height: 64px;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--temp-color-gray-500) !important;
	border: none !important;
	resize: vertical;
	transition: all 0.2s ease;
	padding-left: 0 !important;
	padding-top: 0 !important;
	border-radius: 0 !important;
}

.reflection-form__textarea::placeholder {
	color: var(--temp-color-gray-400);
}

/* Meta Container - Hidden by default, shown on textarea focus */
.reflection-form__meta {
	display: none;
}

/* Character Counter */
.reflection-form__char-count {
	display: flex;
	justify-content: flex-end;
	font-size: 13px;
	color: var(--temp-color-gray-500);
	margin-bottom: 16px;
	transition: color 0.2s ease;
}

.reflection-form__char-count--warning {
	color: var(--temp-color-red-600);
	font-weight: 600;
}

.reflection-form__char-current {
	font-weight: 600;
	color: var(--temp-color-gray-700);
}

.reflection-form__char-count--warning .reflection-form__char-current {
	color: var(--temp-color-red-600);
}

/* Submit Button */
.reflection-form__actions {
	margin-top: 16px;
}

.reflection-form__submit:disabled {
	background-color: var(--temp-color-gray-200);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.reflection-form__submit svg {
	flex-shrink: 0;
}

/* ============================================
	Notification Styles
	============================================ */

.reflection-notification {
	display: none !important; /* Hidden by default */
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 18px;
	border-radius: 12px;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	animation: reflections-slideDown 0.3s ease;
}

/* When shown (via JavaScript fadeIn or show), use flex */
.reflection-notification[style*="display: block"],
.reflection-notification[style*="display: inline"] {
	display: flex !important;
}

@keyframes reflections-slideDown {

	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.reflection-notification svg {
	flex-shrink: 0;
}

.reflection-notification__message {
	flex: 1;
}

.reflection-notification--success {
	margin-top: 12px;
	background-color: color-mix(in srgb, var(--temp-color-green-500) 20%, #fff);
	border: 1px solid color-mix(in srgb, var(--temp-color-green-500) 50%, #fff);
	color: color-mix(in srgb, var(--temp-color-green-500) 80%, #000);
}

.reflection-notification--success svg {
	color: var(--temp-color-green-500);
}

.reflection-notification--error {
	margin-top: 12px;
	background-color: color-mix(in srgb, var(--temp-color-red-500) 10%, #fff);
	border: 1px solid color-mix(in srgb, var(--temp-color-red-500) 40%, #fff);
	color: color-mix(in srgb, var(--temp-color-red-500) 80%, #000);
}

.reflection-notification--error svg {
	color: var(--temp-color-red-500);
}

/* Floating Notification */
.reflection-notification--floating {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 10000;
	max-width: 400px;
	box-shadow: 0 8px 24px color-mix(in srgb, #000 15%, transparent);
	animation: reflections-slideInRight 0.3s ease;
}

@keyframes reflections-slideInRight {

	from {
		opacity: 0;
		transform: translateX(100px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ============================================
	Pagination Styles
	============================================ */

.reflections-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
}

.reflections-pagination__inner {
	display: flex;
	align-items: center;
	gap: 8px;
}

.reflections-pagination__pages {
	display: flex;
	align-items: center;
	gap: 8px;
}

.reflections-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.reflections-pagination__page {
	border: 1px solid var(--e-global-color-72a87fb);
	border-radius: 6px;
	width: 30px;
	height: 30px;
	font: 700 14px/24px Inter, sans-serif !important;
	color: var(--color-primary) !important;
	line-height: 30px;
}

.reflections-pagination__page:hover {
	color: var(--e-global-color-0f5eb8e) !important;
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

.reflections-pagination__link--current {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
	font-weight: 700;
	cursor: default;
}

.reflections-pagination__link--current:hover {
	background-color: var(--color-primary) !important;
	color: #fff !important;
}

/* Prev/Next buttons */
.reflections-pagination__link--prev,
.reflections-pagination__link--next {
	color: transparent;
	width: 30px;
	height: 30px;
	line-height: 30px;
	position: relative;
	border: 1px solid var(--e-global-color-72a87fb);
	border-radius: 6px;
}

.reflections-pagination__link--prev:after,
.reflections-pagination__link--next:after {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	content: "";
	height: 16px;
	width: 16px;
}

/* Disabled prev button */
span.reflections-pagination__link--prev:after,
.reflections-pagination__link--prev.reflections-pagination__link--disabled:after {
	background: url(/wp-content/themes/its4reel/assets/img/svg/arrow-right-disabled.svg) no-repeat center center / contain;
	transform: translate(-50%, -50%) rotate(180deg);
}

/* Active prev button */
a.reflections-pagination__link--prev:not(.reflections-pagination__link--disabled):after {
	background: url(/wp-content/themes/its4reel/assets/img/svg/arrow-right.svg) no-repeat center center / contain;
	transform: translate(-50%, -50%) rotate(180deg);
}

/* Disabled next button */
span.reflections-pagination__link--next:after,
.reflections-pagination__link--next.reflections-pagination__link--disabled:after {
	background: url(/wp-content/themes/its4reel/assets/img/svg/arrow-right-disabled.svg) no-repeat center center / contain;
}

/* Active next button */
a.reflections-pagination__link--next:not(.reflections-pagination__link--disabled):after {
	background: url(/wp-content/themes/its4reel/assets/img/svg/arrow-right.svg) no-repeat center center / contain;
}

.reflections-pagination__link--disabled {
	opacity: 1;
	cursor: not-allowed;
	pointer-events: none;
}

.reflections-pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	color: var(--temp-color-gray-500);
	font-size: 14px;
	user-select: none;
}

/* ============================================
	Notice Styles
	============================================ */

.reflection-notice--info {
	margin-bottom: 30px;
}

.reflections-notice {
	background-color: color-mix(in srgb, var(--temp-color-secondary) 30%, #fff);
	border: 1px solid var(--temp-color-secondary);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 30px;
}

.reflections-notice__text {
	font-size: 14px;
	color: color-mix(in srgb, var(--temp-color-secondary) 80%, #000);
	margin: 0;
	line-height: 1.6;
}

.reflections-notice__text strong {
	font-weight: 600;
}

/* Timestamp wrapper svg */
.timestamp-wrapper svg {
	margin-top: 1px;
}

/* ============================================
   PRICE PILLS - Subscription Form
   ============================================ */

/* Price row container */
.price-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
	margin-bottom: 24px;
}

/* Individual price pill */
.price-pill {
	position: relative;
	padding: 12px 24px;
	background-color: #f8f9fa;
	border: 2px solid #dee2e6;
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	color: #495057;
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* Hover state */
.price-pill:hover {
	background-color: #e9ecef;
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Focus state for keyboard navigation */
.price-pill:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--e-global-color-primary-rgb), 0.25);
}

/* Active/selected state */
.price-pill--active {
	background-color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
	color: #ffffff;
}

.price-pill--active:hover {
	background-color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
	color: #ffffff;
	transform: translateY(-2px);
}

/* Active state checkmark */
.price-pill--active::after {
	content: '\2713';
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	background-color: #28a745;
	color: #ffffff;
	border-radius: 50%;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-weight: bold;
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
	.price-pill {
		padding: 14px 26px;
		font-size: 18px;
	}
}

/* Responsive adjustments */
@media (max-width: 767px) {
	.price-row {
		gap: 10px;
	}

	.price-pill {
		flex: 1 1 calc(50% - 5px);
		min-width: 0;
		text-align: center;
	}
}

/* Screen reader only class */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Seats capacity svg */
.seats-capacity svg {
	width: 42px;
	height: 42px;
}

/* Elementor Custom Embed Play SVG */
body .elementor-custom-embed-play i,
body .elementor-custom-embed-play svg {
	opacity: 1;
}

/* ============================================
	Responsive Styles - Tablet
	============================================ */

@media (max-width: 1024px) {

	.reflections-section__title {
		font-size: 28px;
	}

	.reflection-card {
		padding: 20px;
		margin-bottom: 20px;
	}

	#mobile-search .e-search-submit {
		position: absolute;
		top: 3px;
		left: 10px;
		margin-left: 5px !important;
	}

	#mobile-search .e-search-input {
		padding-left: 45px;
	}
}

/* ============================================
	Responsive Styles - Mobile
	============================================ */

@media (max-width: 767px) {

	.reflections-section__header {
		margin-bottom: 30px;
	}

	.reflections-section__title {
		font-size: 24px;
		margin-bottom: 10px;
	}

	.reflections-section__subtitle {
		font-size: 14px;
	}

	/* Empty State */
	.reflections-empty {
		padding: 60px 15px;
	}

	.reflections-empty__text {
		font-size: 16px;
	}

	/* Reflection Cards */
	#reflections-list {
		margin-bottom: 0;
	}

	.reflection-card {
		padding: 16px;
		border-radius: 12px;
		margin-bottom: 16px;
	}

	.reflection-card__header {
		gap: 10px;
		margin-bottom: 12px;
		flex-wrap: wrap;
	}

	.reflection-card__avatar {
		width: 36px;
		height: 36px !important;
	}

	.reflection-card__meta {
		flex: 1;
		min-width: 0;
	}

	.reflection-card__author {
		font-size: 15px;
	}

	.reflection-card__edited {
		font-size: 11px;
	}

	.reflection-card__actions {
		gap: 6px;
		order: 3;

		/* width: 100%;
		justify-content: flex-start; */
	}

	.reflection-card__timestamp {
		font-size: 12px;
		margin-top: 6px;
	}

	.reflection-card__content {
		font-size: 14px;
		margin-bottom: 12px;
	}

	.reflection-card__edit-btn,
	.reflection-card__delete-btn {
		padding: 6px 12px;
		font-size: 12px;
		gap: 4px;
	}

	.reflection-card__edit-btn svg,
	.reflection-card__delete-btn svg {
		width: 12px;
		height: 12px;
	}

	/* Inline Edit Form */
	.reflection-edit-textarea {
		min-height: 100px;
		padding: 12px;
		font-size: 14px;
	}

	.reflection-edit-actions {
		gap: 8px;
		margin-top: 10px;
	}

	.reflection-edit-save,
	.reflection-edit-cancel {
		padding: 8px 16px;
		font-size: 13px;

		/* flex: 1; */
	}

	/* Reflection Form */

	/* User header in form - mobile adjustments */
	.reflection-form .reflection-card__header {
		gap: 10px;
		margin-bottom: 14px;
	}

	.reflection-form .reflection-card__author {
		font-size: 13px;
	}

	.reflection-form__label {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.reflection-form__textarea {
		padding: 12px;
		font-size: 14px;
		border-radius: 10px;
	}

	.reflection-form__char-count {
		font-size: 12px;
		margin-bottom: 12px;
	}

	.reflection-form__submit {
		width: 100%;
		padding: 12px 24px;
		font-size: 14px;
		border-radius: 10px;
	}

	/* Notifications */
	.reflection-notification {
		padding: 12px 14px;
		gap: 10px;
		font-size: 13px;
		margin-bottom: 16px;
		border-radius: 10px;
	}

	.reflection-notification svg {
		width: 18px;
		height: 18px;
	}

	.reflection-notification--floating {
		top: 10px;
		right: 10px;
		left: 10px;
		max-width: none;
	}

	/* Pagination */
	.reflections-pagination {
		gap: 6px;
		margin-top: 10px;
		flex-wrap: wrap;
	}

	.reflections-pagination__page {
		width: 30px;
		height: 30px;
		font-size: 13px;
		border-radius: 6px;
	}

	.reflections-pagination__link--prev,
	.reflections-pagination__link--next {
		width: 30px;
		height: 30px;
		border-radius: 6px;
	}

	.reflections-pagination__link--prev:after,
	.reflections-pagination__link--next:after {
		width: 14px;
		height: 14px;
	}

	.reflections-pagination__ellipsis {
		min-width: 30px;
		height: 30px;
		font-size: 13px;
	}

	/* Notice */
	.reflections-notice {
		padding: 12px 16px;
		margin-bottom: 24px;
		border-radius: 10px;
	}

	.reflections-notice__text {
		font-size: 13px;
	}
}

/* ============================================
	Accessibility & Focus Styles
	============================================ */

/* Focus visible for keyboard navigation */
.reflection-form__textarea:focus-visible {
	outline: none;
}

.reflection-edit-textarea:focus-visible {
	outline: 3px solid var(--temp-color-primary);
	outline-offset: 2px;
}

.reflection-card__edit-btn:focus-visible,
.reflection-card__delete-btn:focus-visible,
.reflection-edit-save:focus-visible,
.reflection-edit-cancel:focus-visible,
.reflection-form__submit:focus-visible,
.reflections-pagination__link:focus-visible {
	outline: 3px solid var(--temp-color-primary);
	outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.reflection-form__submit:hover,
	.reflection-edit-save:hover {
		transform: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {

	.reflection-card {
		border-width: 2px;
	}

	.reflection-form {
		border-width: 2px;
	}

	.reflection-form__textarea,
	.reflection-edit-textarea {
		border-width: 3px;
	}
}

/* Print styles */
@media print {

	.reflection-form,
	.reflection-card__actions,
	.reflections-pagination,
	.reflections-loading,
	.reflection-notification {
		display: none !important;
	}

	.reflection-card {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}

/*Mobiles*/
@media (max-width: 767px) {

	.banner-list li.elementor-icon-list-item {
		height: 40px;
		border-radius: 20px;
		padding: 0 10px;
	}

	.banner-list li.elementor-icon-list-item:nth-child(3) {
		margin-bottom: 14px;
	}

	.banner-list li.elementor-icon-list-item svg {
		width: 18px;
		height: 18px;
	}

	#homepage-main-hero-btn,
	#homepage-main-hero-btn > a {
		width: 100%;
	}
}

/* Timestamp wrapper with loading state */
.timestamp-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: color-mix(in srgb, var(--temp-color-white) 14%, transparent);
	padding: 10px 14px;
	border-radius: 30px;
	transition: opacity 0.3s ease, filter 0.3s ease;
}

.timestamp-wrapper .js-localtime {
	font-family: var(--e-global-typography-c2defc7-font-family), sans-serif;
	font-size: var(--e-global-typography-c2defc7-font-size);
	font-weight: var(--e-global-typography-c2defc7-font-weight);
	line-height: var(--e-global-typography-c2defc7-line-height);
	color: var(--e-global-color-0f5eb8e);
}

/* Loading state - subtle blur and opacity while JS converts time */
.timestamp-wrapper.timestamp-loading {
	opacity: 0.5;
	filter: blur(0.5px);
}

/* ============================================
	MEETING ENDED - SMOOTH TRANSITIONS
	Prevents visual flicker when hiding join form
	============================================ */

/* Join form - smooth fade out when meeting ends */
.join-discussion-form {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.join-discussion-form.meeting-ended-hide {
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
}

/* Past notice - smooth fade in when meeting ends */
.join-past-notice {
	transition: opacity 0.3s ease, transform 0.3s ease;
	opacity: 0;
	transform: translateY(10px);
}

/* Prevent initial flicker - hide by default if JavaScript will handle it */
.join-past-notice:not(.meeting-ended-show) {
	display: none !important;
}

.join-past-notice.meeting-ended-show {
	opacity: 1;
	transform: translateY(0);
}

/* Prevent initial glitch - start with opacity 0 for sections that JS will control */
.join-discussion-form,
.join-disabled-notice {
	opacity: 0;
	transition: opacity 0.4s ease;
}

/* Show sections with smooth fade-in once determined by JavaScript */
.join-discussion-form.js-ready,
.join-disabled-notice.js-ready {
	opacity: 1;
}

.join-past-notice.js-ready {
	opacity: 1;
}

/* ============================================
	DISCUSSION STATE MANAGEMENT
	Component visibility based on [discussion_state] shortcode

	State Classes Available:
	- User: is-guest, is-logged-in, is-participant, is-not-participant, is-author, is-not-author
	- Time: has-zoom-meeting, no-zoom-meeting, is-upcoming, is-active-meeting, is-past-meeting
	- Capacity: has-seats-available, is-full-capacity, is-near-capacity
	- Attendance: has-attended, has-not-attended
	============================================ */

/* Hide elements by default that need specific conditions */
.leave-form,
.confirmation-message,
.join-confirmation-section,
.join-disabled-notice,
.zoom-link-button,
.capacity-warning,
.login-prompt,
.seats-notice,
.seats-capacity,
.base-confirmation-text,
.notice-confirmation-text {
	display: none;
}

/* JOIN FORM VISIBILITY
	Show when: logged in + not participant + upcoming/active + seats available */

/* Hide for authors (they see confirmation section instead) */
.is-author .join-discussion-form {
	display: none !important;
}

/* Show join form for non-participants who are logged in and not authors */
.is-not-participant.is-logged-in.has-seats-available.is-not-author .join-discussion-form {
	display: block;
}

/* Base rule: Show for logged-in non-participants with available seats */
.is-logged-in.is-not-participant.has-zoom-meeting.has-seats-available .join-discussion-form {
	display: block;
}

/* Show for upcoming meetings */
.is-logged-in.is-not-participant.has-zoom-meeting.is-upcoming.has-seats-available .join-discussion-form {
	display: block;
}

/* Show for active meetings */
.is-logged-in.is-not-participant.has-zoom-meeting.is-active-meeting.has-seats-available .join-discussion-form {
	display: block;
}

/* Show disabled notice when capacity is full */
.is-not-participant.is-full-capacity .join-disabled-notice {
	display: block;
}

/* Show confirmation section for participants */
.is-participant .join-confirmation-section {
	display: block;
}

/* Hide notice confirmation text by default */
.notice-confirmation-text {
	display: none;
}

/* Show confirmation section for authors */
.is-logged-in.is-author .join-confirmation-section {
	display: block;
}

/* Show base confirmation text for participants */
.is-participant .join-confirmation-section .base-confirmation-text {
	display: block;
}

/* Show base confirmation text for authors */
.is-logged-in.is-author .join-confirmation-section .base-confirmation-text {
	display: block;
}

/* Hide leave form for authors in confirmation section */
.is-logged-in.is-author .join-confirmation-section #temporary-confirmation-form-leave {
	display: none;
}

/* Show seats notice for participants */
.is-participant.seats-notice {
	display: block;
}

/* Show seats capacity for guests and non-participants */
.is-guest.seats-capacity,
.is-not-participant.seats-capacity {
	display: block;
}

.seats-capacity .elementor-button-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.seats-capacity .elementor-button-text b {
	margin: 0 3px;
}

/* Hide Zoom button when meeting has ended (past) */
.is-past-meeting .zoom-link-button {
	display: none !important;
}

/* ============================================
	MOBILE SEARCH - EMPTY VALIDATION FEEDBACK
	Shake animation for empty search submission
	============================================ */
@keyframes search-empty-shake {

	0%, 100% {
		transform: translateX(0);
	}

	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-5px);
	}

	20%, 40%, 60%, 80% {
		transform: translateX(5px);
	}
}

.search-empty-shake {
	animation: search-empty-shake 0.5s ease-in-out;
	border-color: var(--temp-color-red-500) !important;
}

.reflections-block::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2070px;
	height: 100%;
	transform: translateX(-50%);
	background-image: url(/wp-content/uploads/2025/11/single_revisions_background.svg);
	background-size: 2070px auto;
	background-repeat: no-repeat;
	z-index: -1;
}

#discussion-archive-listing::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1930px;
	height: 100%;
	transform: translateX(-50%);
	background-image: url(/wp-content/uploads/2025/11/Discussion-Circles-listings.svg);
	background-size: 1930px auto;
	background-repeat: no-repeat;
	z-index: -1;
}

.discussion-container-hero {
	background-color: #FFF3;
	border-style: solid !important;
	border-width: 1px;
	border-color: #8039D829;
	border-radius: 32px;
	backdrop-filter: blur(60px);
}

.discussion-participants-avatars {
	background-color: #F1EAFB;
	border-radius: 32px;
	padding: 4px;
	gap: 4px;
}

.discussion-participants-avatars.has-overflow {
	padding: 4px 10px 4px 4px;
}

.dot-first-option {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border-radius: 100%;
	backdrop-filter: blur(30px);
}

.dot-second-option {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border-radius: 100%;
}

.dot-first-option.conversation-dot-1 {
	width: 244px;
	height: 244px;
}

.dot-first-option.conversation-dot-1  a {
	font-family: var(--e-global-typography-83a5d9a-font-family), sans-serif;
	font-size: var(--e-global-typography-83a5d9a-font-size);
	font-weight: var(--e-global-typography-83a5d9a-font-weight);
	line-height: var(--e-global-typography-83a5d9a-line-height);
}

.dot-second-option.conversation-dot-2 {
	width: 242px;
	height: 242px;
}

.dot-first-option.conversation-dot-3 {
	width: 252px;
	height: 252px;
}

.dot-second-option.conversation-dot-4 {
	width: 78px !important;
	height: 78px !important;
}

.dot-first-option.conversation-dot-5 {
	width: 193px;
	height: 193px;
}

.dot-second-option.conversation-dot-6 {
	width: 215px;
	height: 215px;
}

.dot-first-option.conversation-dot-7 {
	width: 130px !important;
	height: 130px !important;
}

.dot-second-option.conversation-dot-8 {
	width: 264px;
	height: 264px;
}

.dot-second-option.conversation-dot-8 a {
	font-family: var(--e-global-typography-83a5d9a-font-family), sans-serif;
	font-size: var(--e-global-typography-83a5d9a-font-size);
	font-weight: var(--e-global-typography-83a5d9a-font-weight);
	line-height: var(--e-global-typography-83a5d9a-line-height);
}

.discussion-join-btn .elementor-button-text {
	margin-top: 2px;
}

#discussion-second-section::after {
    content: "";
    position: absolute;
    top: -12%;
    left: 50%;
    width: 2400px;
    height: 100%;
    transform: translateX(-50%);
    background-image: url("/wp-content/uploads/2026/01/discussion-Start-a-Conversation-scaled.png");
    background-size: 2400px auto;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -5;
}

#discussion-archive-listing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1930px;
  height: 100%;
  transform: translateX(-50%);
  background-image: url("/wp-content/uploads/2025/11/Discussion-Circles-listings.svg");
  background-size: 1930px auto;
  background-repeat: no-repeat;
  z-index: -1;
}

@media (min-width: 1980px) {
    #discussion-second-section::after {
      content: "";
      position: absolute;
      top: -12%;
      left: 50%;
      width: 2400px;
      height: 100%;
      transform: translateX(-50%);
      background-size: 2400px auto;
      background-repeat: no-repeat;
      background-position: center;
      z-index: -5;
      background-image: linear-gradient(to right, rgba(252, 252, 253, 0.9) 10%, transparent 20%, transparent 20%, rgba(252, 252, 253, 0.9) 90%), url("/wp-content/uploads/2026/01/discussion-Start-a-Conversation-scaled.png") !important;
    }
  }

@media (max-width: 1200px) {

	.dot-first-option.conversation-dot-1 {
		width: 210px;
		height: 210px;
	}

	.dot-second-option.conversation-dot-2 {
		width: 222px;
		height: 222px;
	}

	.dot-first-option.conversation-dot-3 {
		width: 232px;
		height: 232px;
	}

	.dot-second-option.conversation-dot-4 {
		width: 65px !important;
		height: 65px !important;
	}

	.dot-first-option.conversation-dot-5 {
		width: 170px;
		height: 170px;
	}

	.dot-second-option.conversation-dot-6  {
		width: 190px !important;
		height: 190px !important;
	}

	.dot-first-option.conversation-dot-7 {
		width: 110px !important;
		height: 110px !important;
	}

	.dot-second-option.conversation-dot-8 {
		width: 235px;
		height: 235px;
	}
}

/* @media (max-width: 1024px) {

} */

/* Global pagination */
#search-loop-section .elementor-pagination,
.elementor-pagination{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 100px;
}

.elementor-pagination .page-numbers:not(.prev):not(.next){
	border: 1px solid var(--e-global-color-72a87fb);
	border-radius: 6px;
	width: 30px;
	height: 30px;
	font: 700 14px/24px Inter, sans-serif;
	color: var(--color-primary);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	line-height: 30px;
}


.elementor-pagination .page-numbers:not(.prev):not(.next):hover {
	color: var(--e-global-color-0f5eb8e);
	background-color: var(--color-primary);
	border-color: var(--color-primary) !important;
}

.elementor-pagination .page-numbers.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary) !important;
	color: #fff !important;
}


.elementor-pagination span.page-numbers.next,
.elementor-pagination span.page-numbers.prev,
.elementor-pagination a.page-numbers.next,
.elementor-pagination a.page-numbers.prev,
.jet-filters-pagination__item.next .jet-filters-pagination__link,
.jet-filters-pagination__item.prev .jet-filters-pagination__link {
	color: transparent;
	width: 30px;
	height: 30px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	line-height: 30px;
	position: relative;
	border: 1px solid var(--e-global-color-72a87fb);
	border-radius: 6px;
}

.elementor-pagination span.page-numbers.prev:after,
.elementor-pagination a.page-numbers.prev:after,
.elementor-pagination span.page-numbers.next:after,
.elementor-pagination a.page-numbers.next:after,
.jet-filters-pagination__item.next .jet-filters-pagination__link:after,
.jet-filters-pagination__item.prev .jet-filters-pagination__link:after {
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	content: "";
	height: 16px;
	width: 16px;
}

.elementor-pagination span.page-numbers.prev:after,
.jet-filters-pagination__item.prev[disabled] .jet-filters-pagination__link:after {
	background: url(/wp-content/themes/its4reel/assets/img/svg/arrow-right-disabled.svg) no-repeat center center / contain;
	transform: translate(-50%, -50%) rotate(180deg);
}
.elementor-pagination a.page-numbers.prev:after,
.jet-filters-pagination__item.prev:not([disabled]) .jet-filters-pagination__link:after {
	background: url(/wp-content/themes/its4reel/assets/img/svg/arrow-right.svg) no-repeat center center / contain;
transform: translate(-50%, -50%) rotate(180deg);
}
.elementor-pagination span.page-numbers.next:after,
.jet-filters-pagination__item.next[disabled] .jet-filters-pagination__link:after {
	background: url(/wp-content/themes/its4reel/assets/img/svg/arrow-right-disabled.svg) no-repeat center center / contain;
}
.elementor-pagination a.page-numbers.next:after,
.jet-filters-pagination__item.next:not([disabled]) .jet-filters-pagination__link:after {
	background: url(/wp-content/themes/its4reel/assets/img/svg/arrow-right.svg) no-repeat center center / contain;
}

/* Disabled state styling for JetSmartFilters pagination */
.jet-filters-pagination__item[disabled] {
	pointer-events: none;
	cursor: not-allowed;
	opacity: 0.5;
}

.jet-filters-pagination__item,
.jet-filters-pagination__link {
	width: 30px;
	height: 30px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.jet-filters-pagination__item.prev-next .jet-filters-pagination__link:hover {
	background-color: transparent !important;
}

#expeditions-grid .jet-listing-grid__item:nth-child(even) .e-con-inner {
	flex-direction: row-reverse;
	text-align: right;
}

#expeditions-grid .jet-listing-grid__item:nth-child(even) .e-con-inner p {
	text-align: right;
}

#expeditions-grid .jet-listing-grid__item:nth-child(even) .e-con-inner .begin-expedition-btn {
	align-self: end;
}

/* Make parent containers allow overflow */
#expeditions-grid .jet-listing-grid__item > div {
	overflow: visible;
	position: relative !important;
	/* Remove background from here */
	background-image: none !important;
}

/* ============================================
	OLD APPROACH: PNG Background Images
	Commented out - replaced with CSS mask + SVG
	============================================ */

#expeditions-grid .jet-listing-grid__item > div::before {
	content: '';
	position: absolute;
	top: 0;
	width: 112.5%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: -1;
	pointer-events: none;
}

#expeditions-grid .jet-listing-grid__item:nth-child(odd) > div::before {
	left: 0;
	background-image: url('/wp-content/uploads/2025/12/first_item_list_expedition.png');
}

#expeditions-grid .jet-listing-grid__item:nth-child(even) > div::before {
	right: 0;
	background-image: url('/wp-content/uploads/2025/12/second_item_list_expedition.png');
}

#expeditions-grid .jet-listing-grid__item:nth-child(3) > div::before {
	width: 120%;
	left: 0;
	background-image: url('/wp-content/uploads/2025/12/third_item_list_expedition.png');
}

#expeditions-grid .jet-listing-grid__item:nth-child(4) > div::before {
	width: 105%;
	right: 0;
	background-image: url('/wp-content/uploads/2025/12/fourth_item_list_expedition.png');
}

#expeditions-grid .jet-listing-grid__item:nth-child(5) > div::before {
	width: 105%;
	background-image: url('/wp-content/uploads/2025/12/fifth_item_list_expedition.png');
}

#expeditions-grid .jet-listing-grid__item:nth-child(6) > div::before {
	width: 120%;
	background-image: url('/wp-content/uploads/2025/12/sixth_item_list_expedition.png');
}

/* #expeditions-grid .jet-listing-grid__item .begin-expedition-btn svg {
	width: 14px;
} */

#expeditions-grid .jet-listing-grid__item:nth-child(1) .begin-expedition-btn a,
#expeditions-grid .jet-listing-grid__item:nth-child(5) .begin-expedition-btn a {
	color: #129CA5;
}

#expeditions-grid .jet-listing-grid__item:nth-child(1) .begin-expedition-btn path,
#expeditions-grid .jet-listing-grid__item:nth-child(5) .begin-expedition-btn path {
	color: #129CA5;
	fill: #129CA5;
}

#expeditions-grid .jet-listing-grid__item:nth-child(2) .begin-expedition-btn a,
#expeditions-grid .jet-listing-grid__item:nth-child(6) .begin-expedition-btn a {
	color: #E813AE;
}

#expeditions-grid .jet-listing-grid__item:nth-child(2) .begin-expedition-btn path,
#expeditions-grid .jet-listing-grid__item:nth-child(6) .begin-expedition-btn path {
	color: #E813AE;
	fill: #E813AE;
}

#expeditions-grid .jet-listing-grid__item:nth-child(4) .begin-expedition-btn a {
	color: #FF8658;
}

#expeditions-grid .jet-listing-grid__item:nth-child(4) .begin-expedition-btn path {
	color: #FF8658;
	fill: #FF8658;
}

.expedition_title_single_listing {
	font-size: var(--e-global-typography-6c9f62d-font-size);
	line-height: var(--e-global-typography-6c9f62d-line-height);
	font-family: var(--e-global-typography-6c9f62d-font-family), Sans-serif;
	font-weight: var(--e-global-typography-6c9f62d-font-weight);
}

#expeditions-grid .jet-listing-grid__item .expedition-listing-icon {
	margin-right: 6px;
}

#expeditions-grid .jet-listing-grid__item:nth-child(even) .expedition-archive-content {
	padding-left: 45px !important;
}

/* ============================================
	PRICE PILL STYLES
	Reusable pill component for price display
	============================================ */
/* Row layout */
.price-row{
	display:flex;
	gap: 6px;
	align-items:center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 10px 0;
}

/* The pill style */
.price-pill{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:var(--pill-padding);
	font-weight:700;
	font-size:var(--pill-font-size);
	color:var(--accent);
	background:var(--pill-bg);
	border:1px solid var(--pill-border);
	border-radius:var(--pill-radius);
	min-width:48px;
	text-align:center;
	box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
	cursor:default;
	user-select:none;
	transition:transform .12s ease, box-shadow .12s ease;
}

/* Courses */
body.page-id-38 {
	background-color: #FFF !important;
}

.unlearning-archive-icon.second .elementor-icon-box-wrapper > .elementor-icon-box-icon{
	background-color: #FEE7F6;
	padding: 10px;
	border-radius: 10px;
}

.course-share-icon .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

.course-share-icon .elementor-button-icon svg {
	width: 17px;
	height: 17px;
}

.course-share-icon .elementor-button-text {
	margin-top: 2px;
}

.unlearning-treks-section {
	background-size: 1950px 100% !important
}

.glass-block {
	background: rgba(72, 43, 108, 0.72) !important;
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 40px rgba(0, 0, 0, 0.25);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.05) 100%);
}

.archive-courses-loop .e-loop-item:nth-child(2) {
	margin-top: 80px;
}

.archive-courses-loop .e-loop-item:nth-child(4),
.archive-courses-loop .e-loop-item:nth-child(6) {
	margin-top: -80px;
}

.archive-courses-loop .e-loop-item:nth-child(7) {
	margin-top: -160px;
}

/* Course page */
.single-course-main-section {
	/* background-size: 2771px 2508px; */
	background-size: 2900px 2600px;
	background-position-x: 30% !important;
	background-position-y: 70% !important;
}

.single-course-main-section h2 p {
	margin-bottom: 0;
}

.jet-listing-grid__slider-icon.slick-arrow {
	top: 97%;
	width: 86px;
	height: 30px;
	background-color: var(--e-global-color-primary);
	margin-top: 5px;
	border-radius: 6px;
}

.jet-listing-grid__slider-icon.slick-arrow.next-arrow {
	right: 15px;
}

.jet-listing-grid__slider-icon.slick-arrow.prev-arrow {
	right: 109px;
	left: unset;
}

.jet-listing-grid__item .glass-block {
	box-shadow: none;
}

.course-expeditions-slider .slick-list {
	padding-bottom: 15px;
}

/* Hide the existing SVG inside the prev-arrow */
.course-expeditions-slider .jet-listing-grid__slider-icon.prev-arrow svg,
.course-expeditions-slider .jet-listing-grid__slider-icon.next-arrow svg {
	display: none;
}

/* Add the new SVG as pseudo-element */
.course-expeditions-slider .jet-listing-grid__slider-icon.prev-arrow,
.course-expeditions-slider .jet-listing-grid__slider-icon.next-arrow {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M2.14625 7.64597L6.64625 3.14597C6.74007 3.05215 6.86732 2.99944 7 2.99944C7.13268 2.99944 7.25993 3.05215 7.35375 3.14597C7.44757 3.23979 7.50028 3.36704 7.50028 3.49972C7.50028 3.6324 7.44757 3.75965 7.35375 3.85347L3.70688 7.49972L13.5 7.49972C13.6326 7.49972 13.7598 7.5524 13.8536 7.64617C13.9473 7.73994 14 7.86711 14 7.99972C14 8.13233 13.9473 8.25951 13.8536 8.35328C13.7598 8.44704 13.6326 8.49972 13.5 8.49972L3.70688 8.49972L7.35375 12.146C7.44757 12.2398 7.50028 12.367 7.50028 12.4997C7.50028 12.6324 7.44757 12.7597 7.35375 12.8535C7.25993 12.9473 7.13268 13 7 13C6.86732 13 6.74007 12.9473 6.64625 12.8535L2.14625 8.35347C2.09976 8.30704 2.06288 8.25189 2.03772 8.19119C2.01256 8.13049 1.99961 8.06543 1.99961 7.99972C1.99961 7.93401 2.01256 7.86895 2.03772 7.80825C2.06288 7.74755 2.09976 7.69241 2.14625 7.64597Z' fill='white'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

.course-expeditions-section a.page-numbers,
.course-expeditions-section span.page-numbers,
.course-expeditions-section a.page-numbers:nth-child(2),
.course-expeditions-section span.page-numbers:nth-child(2) {
	background-color: var(--color-primary);
	border-radius: 6px;
	padding: 7px 35px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.course_questions_section {
	clip-path: unset;
}

/* The main block */
.extended_background {
	position: relative;              /* create positioning context for the pseudo-element */
	padding-left: 0;
	background: transparent;
	z-index: 1;
}

/* The "background" that extends left and has a rounded right side */
.extended_background::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;

	/* make it start left of the block (extend outside) and end at the block's right edge */
	left: calc(-20 * var(--bg-left-bleed));
	right: 0;
	/* put it behind the content */
	z-index: -1;
	width: auto;
}

.course_questions_section p {
	margin-bottom: 0 !important;
}

.course-questions-block,
.course-question-icon {
	display: flex;
	align-items: baseline !important;
}

.course-question-icon {
    margin-right: 16px;
    min-width: 20px;
    transform: translateY(4px);
}

.course-question-icon img {
    width: 100%;
}

.benefits-section .jet-listing-dynamic-repeater__items {
	justify-content: center !important;
	flex-wrap: wrap;
	gap: 24px;
}

.benefits-section .jet-listing-dynamic-repeater__item {
	position: relative;
	width: calc(33.33% - 16px) !important;
	background:
	radial-gradient(circle at 100% 50%, #AC88FF 0%, rgba(130, 77, 255, 0) 60%),
	#8039D8;
	background-blend-mode: normal;
	border-radius: 26px;
	padding: 24px 130px 24px 24px;
	overflow: hidden;
	min-height: 132px;
}

.course-impact-block {
	height: 100%;
	padding-bottom: 0 !important;
}

.course-impact-block p {
	margin-bottom: 0;
  z-index: 2;
}

.course-impact-image {
	position: absolute;
	right: 0;
	bottom: 0;
}

.course-impact-image img {
  display: block;
  z-index: 0;
}

.rippling-bar h4 {
	margin-top: 0;
}

.rippling-bar .cta-notice-course .elementor-icon-box-icon {
	border: 1px solid var(--e-global-color-primary);
	border-radius: 100%;
}

.rippling-bar .cta-notice-course .elementor-icon {
	border: 1px solid #fff;
}

/* Expedition */
.expedition-intro-title .elementor-image-box-title {
	margin: 0 !important;
	text-align: left !important;
}

.expedition-intro-title .elementor-image-box-img {
	margin-right: 24px !important;
}

.expedition-content-block,
.expedition-content-items,
.expedition-exercise-block {
	display: block !important;
}

.expedition-content-block.without_background .expedition-content-items {
	margin-bottom: 60px !important;
}

.expedition-content-block.with_background {
	margin-bottom: 50px !important;
}

.expedition-content-title,
.expedition-exercise-title {
	margin: 0 0 24px 0;
}

.expedition-content-block p,
.expedition-exercise-block p {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	margin-bottom: 16px;
}

.expedition-content-block p:last-of-type,
.expedition-exercise-block p:last-of-type {
	margin-bottom: 0;
}

/* The main block */
.with_background{
	position: relative;              /* create positioning context for the pseudo-element */
	padding: var(--content-padding); /* content padding requested */
	/* keep the block itself transparent; the background will be the pseudo-element */
	padding-left: 0;
	background: transparent;
	z-index: 1;                       /* keep content above the pseudo-element which will sit behind */
	/* Optionally give the block the same right-side radius so its outline matches */
	border-radius: 0 var(--right-radius) var(--right-radius) 0;
	/* If you want visible shadow/outline from the block, keep overflow visible here too */
	overflow: visible;
}

/* The "background" that extends left and has a rounded right side */
.with_background::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;

	/* make it start left of the block (extend outside) and end at the block's right edge */
	left: calc(-20 * var(--bg-left-bleed));
	right: -50px;

	background: var(--temp-color-primary);
	/* rounded only on the right side (matching the block) */
	border-radius: 0 var(--right-radius) var(--right-radius) 0;

	/* put it behind the content */
	z-index: -1;
	width: auto;
}

/* place content above the pseudo-element */
.expedition-content-block.with_background .expedition-content{
	position: relative;
	z-index: 2;
}

.expedition-content-block.with_background * {
	color: var(--temp-color-white) !important;
}

.exercises-section .jet-listing-dynamic-repeater__item:not(:last-child) {
	margin-bottom: 40px;
}

.expedition-content-items ul,
.expedition-content-items ol,
.expedition-exercise-items ul,
.expedition-exercise-items ol {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	margin-bottom: 16px;
}

/* Playstation Single Page */
.playstation-hero-icon {
  padding: 10px;
  background-color: #FFE5ED;
  border-radius: 10px !important;
  width: 38px;
  margin-right: 8px;
}

.playstation-content-block {
  gap: 24px;
}

.playstation-content-block.with_background::before {
  right: 25%;
}

.playstation-content {
  width: 50%;
}

.playstation-content-title {
  font-size: 20px !important;
  line-height: 140% !important;
  color: #fff !important;
}

.playstation-content-block.without_background p {
  color: #08030D;
}

.playstation-content-block.without_background .playstation-content {
    width: 70%;
}

.playstation-content-block.without_background .playstation-image {
  display: none;
}

.playstation-image {
  border: none;
}

.playstation-image img {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFF3;
  border-style: solid !important;
  border-width: 1px;
  border-color: rgba(128, 57, 216, 0.16);
  border-radius: 32px;
  backdrop-filter: blur(60px);
  padding: 10px;
}

.playstation-content-block.with_background {
  padding: 32px 0 32px;
}

.single-playstation .jet-listing-not-found {
  padding: 200px 0;
}

@media (max-width: 1300px) {
	.with_background::before{
	right: 0;
	}
}

@media (max-width: 1023.99px) {
	.archive-courses-loop .e-loop-item:nth-child(2),
	.archive-courses-loop .e-loop-item:nth-child(4),
	.archive-courses-loop .e-loop-item:nth-child(6),
	.archive-courses-loop .e-loop-item:nth-child(7) {
	margin-top: 0;
	}

	.archive-courses-loop .e-loop-item:nth-child(3),
	.archive-courses-loop .e-loop-item:nth-child(5),
	.archive-courses-loop .e-loop-item:nth-child(7) {
	margin-top: -60px;
	}

	.benefits-section .jet-listing-dynamic-repeater__items {
	gap: 20px;
	}

	.benefits-section .jet-listing-dynamic-repeater__item {
	width: calc(50% - 15px) !important;
	}

	#expeditions-grid .jet-listing-grid__item > div::after {
	content: '';
	position: absolute;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	background-repeat: no-repeat;
	z-index: -1;
	pointer-events: none;
	background-color: rgb(255, 255, 255, 0.6);
	backdrop-filter: blur(60px);
	border-radius: 18px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	#expeditions-grid .jet-listing-grid__item:nth-child(odd) > div::before {
	left: 0;
	background-image: none;
	border: 2px solid rgb(22, 186, 197, 0.3);
	width: 100%;
	border-radius: 24px;
	background: rgb(22, 186, 197, 0.3);
	z-index: -2;
	}

	#expeditions-grid .jet-listing-grid__item:nth-child(even) > div::before {
	left: 0;
	background-image: none;
	border: 2px solid rgb(232, 19, 174, 0.4);
	width: 100%;
	border-radius: 24px;
	background: rgb(232, 19, 174, 0.3);
	z-index: -2;
	}

	#expeditions-grid .jet-listing-grid__item:nth-child(3) > div::before {
	border: 2px solid rgb(128, 57, 216, 0.4);
	background: rgb(128, 57, 216, 0.3);
	}

	#expeditions-grid .jet-listing-grid__item:nth-child(4) > div::before {
	border: 2px solid rgb(255, 134, 88, 0.4);
	background: rgb(255, 134, 88, 0.3);
	}

	#expeditions-grid .jet-listing-grid__item:nth-child(even) .expedition-archive-content {
	padding-left: 10px !important;
	}
}

@media (max-width: 991.99px) {
	#expeditions-grid .jet-listing-grid__item:nth-child(odd) .e-con-inner,
	#expeditions-grid .jet-listing-grid__item:nth-child(even) .e-con-inner {
	flex-direction: column;
	text-align: center;
	padding-bottom: 8px;
	}

	#expeditions-grid .jet-listing-grid__item:nth-child(odd) .e-con-inner > div,
	#expeditions-grid .jet-listing-grid__item:nth-child(even) .e-con-inner > div {
	width: 100% !important;
	margin-bottom: 12px;
	}

	#expeditions-grid .jet-listing-grid__item:nth-child(odd) .e-con-inner .begin-expedition-btn,
	#expeditions-grid .jet-listing-grid__item:nth-child(even) .e-con-inner .begin-expedition-btn {
	align-self: center;
	}

	#expeditions-grid .jet-listing-grid__item:nth-child(even) .expedition-archive-content {
	padding-left: 0 !important;
	}
}

@media (max-width: 767.99px) {
	.archive-courses-loop .e-loop-item {
	margin-top: 0 !important;
	}

	.expedition-intro-title .elementor-image-box-wrapper {
		display: flex;
		align-items: center;
	}

	.expedition-content-block.without_background .expedition-content-items {
		margin-bottom: 20px !important;
	}

	.benefits-section .jet-listing-dynamic-repeater__item {
		width: 100% !important;
	}

	.rippling-bar .cta-notice-course .elementor-icon-box-icon {
	width: fit-content;
	margin: 0 auto;
	}

	.rippling-explore {
	width: 100%;
	}

	/* Global pagination */
	#search-loop-section .elementor-pagination {
		margin-top: 60px;
	}

	/* Expedition */
	.expedition_title_single_listing {
	text-align: left;
	}

	#expeditions-grid .jet-listing-grid__item .e-con-inner {
	text-align: left !important;
	padding-bottom: 4px !important;
	}

  .single-playstation .jet-listing-not-found {
    padding: 100px 0;
  }
}

/* ============================================
	JetFormBuilder Multi-Form Message Handler
	Prevents message flashing when multiple forms
	are on the same page after payment redirect
	============================================ */

/* Alternative: Hide messages that JS has explicitly hidden */
.jet-form-builder-message.jfb-message-hidden {
	display: none !important;
}

/* Ensure shown messages display properly */
.jet-form-builder-message.jfb-message-shown {
	display: block !important;
}

.workbook-btn-status-0 {
	border-color: #C4AFDF !important;
}

.workbook-btn-status-0 a {
	background-color: #C4AFDF !important;
	pointer-events: none !important;
	cursor: none !important;
}

/* ============================================
   Account Menu - User Display Section
   Shows logged-in user info at top of menu
   ============================================ */

.account-menu-user-section {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	border-bottom: 1px solid var(--temp-color-gray-200, #E4E7EC);
	background: var(--temp-color-white-alt, #FCFCFD);
}

.account-menu-user-section .user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
}

.account-menu-user-section .user-avatar img {
	width: 30px;
  height: 30px;
	object-fit: cover;
	display: block;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: var(--e-global-color-0f5eb8e);
  border-radius: 100% 100% 100% 100%;
  box-shadow: 0px 0px 0px 3px rgba(128.00000000000003, 56.999999999999986, 216, 0.25);
}

.account-menu-user-section .user-info {
	flex: 1;
	min-width: 0; /* Allows text truncation */
}

.account-menu-user-section .user-display-name {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: var(--temp-color-text-primary, #08030D);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Optional: Add subtle hover effect */
.account-menu-user-section:hover {
	background: var(--temp-color-gray-50, #F9FAFB);
}

/* Adjust for mobile if needed */
@media (max-width: 767px) {
	.account-menu-user-section {
		padding: 12px 16px;
		gap: 10px;
	}

	.account-menu-user-section .user-avatar {
		width: 36px;
		height: 36px;
	}

	.account-menu-user-section .user-display-name {
		font-size: 14px;
	}
}

/* Ripples page */
.custom-upload-box {
  position: relative;
}

.custom-upload-box .jet-form-builder-file-upload {
  width: 100%;
  min-height: 180px;
  border-radius: 12px;
  border: 2px dashed #d5d9e0;
  cursor: pointer;

  @media(max-width: 576px){
    min-height: 240px;
  }

  @media(max-width: 400px){
    min-height: 280px;
  }
}

.custom-upload-box .upload-info-wrapper {
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  cursor: pointer;
  margin: 0;
  top: 30%;

  @media(max-width: 992px){
    padding-left: 16px;
    padding-right: 16px;
  }
}

.custom-upload-box .jet-form-builder-file-upload__input {
  position: relative;
  z-index: 2;
}

.upload-info-wrapper .upload-image {
  width: 36px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8px;
}

.upload-info-wrapper .upload-title {
  font: 500 16px/150% "Inter";
  margin-bottom: 4px;

  @media(max-width: 992px){
    font: 500 14px/150% "Inter";
  }
}

.upload-info-wrapper .upload-subtext {
  font: 400 14px/155% "Inter";
  margin-bottom: 14px;
  color: #667085;

  @media(max-width: 992px){
    font: 500 12px/150% "Inter";
  }
}

.upload-info-wrapper .upload-btn {
  min-width: 120px;
  height: 35px;
  background: transparent;
  border: 1px solid #d0d5dd;
  border-radius: 30px;
  font: 400 14px/155% "Inter";
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
}

.custom-upload-box .jet-form-builder-file-upload__fields {
  width: 100%;
  background: transparent;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.custom-upload-box input[type="file"] {
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  cursor: pointer;
}

.custom-upload-box .jet-form-builder-file-upload__message {
  display: none;
}

.custom-upload-box .jet-form-builder-file-upload__content {
  min-height: 32px;
  min-width: 32px;
}

.custom-upload-box .jet-form-builder-file-upload__file {
  width: 50px;
  height: 50px;
}

.custom-upload-box .jet-form-builder-file-upload__content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 20;

}

.custom-upload-box .jet-form-builder-file-upload__files:has(> *) {
  min-width: 200px;
  background-color: #fff;
}

.custom-upload-box .jet-form-builder-file-upload__file-remove {
  opacity: 1;
}

/** Questions */
.question-section {
    background-color: #fff;
    border-radius: 30px;
    padding: 32px 24px 24px 24px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 588px;
    margin-left: auto;
    width: 100%;
    position: relative;

    @media (min-width: 1200px) {
        min-width: 588px;
    }
}

#quizQuestions {
    display: none;
}

.question-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -16px;
    width: 94%;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
    background-color: #fff;
    z-index: -1;
    height: 100%;
    transform: translateX(-50%);
    border-radius: 30px;
}

.question-section__top {
    display: flex;
    align-items: center;
    column-gap: 4px;
    margin-bottom: 16px;
}

.question-section__numbers {
    color: #8039d8;
    font: 600 20px/20px Epilogue, sans-serif;
    min-width: 60px;
}

.question-section__slider {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    column-gap: 4px;
    row-gap: 6px;
    flex-wrap: wrap;
}

.question-section__slide {
    min-height: 4px;
    min-width: 17px;
    height: 4px;
    width: 17px;
    background-color: #F4F5F7;
    border-radius: 40px;
    transition: background-color 0.3s ease;
}

.question-section__slide.active {
    background-color: #8039d8;
}

.question-section__slide.answered {
    background-color: #a66ee5;
}

.question-section__title {
    font: 600 20px/140% Epilogue, sans-serif;
    color: #667085;
    margin-bottom: 8px;
    min-height: 56px;
}

.question-section__answers {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.question-section__answer {
    padding: 8px;
    display: flex;
    align-items: center;
    border-radius: 40px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.question-section__answer:hover {
    background-color: #f9f9fb;
}

.question-section__answer.active {
    background-color: #F4F5F7;
}

.question-section__option {
    display: flex;
    align-items: center;
    cursor: pointer;
    column-gap: 12px;
    width: 100%;
}

.question-section__input {
    min-width: 24px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: #8039d8;
}

.question-section__text {
    color: #667085;
    cursor: pointer;
    font: 400 18px/18px Inter, sans-serif;
}

.question-section__image {
    min-width: 20px;
    width: 20px;
    height: 20px;
    transform: translateY(-2px);
}

.question-section__footer {
    display: flex;
    align-items: center;
    column-gap: 24px;
    margin-top: 16px;
}

.question-section__btn {
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    border-radius: 12px;
    font: 600 14px Inter, sans-serif;
    color: #ffffff;
    background-color: #8039d8;
    border: none;
    transition: all 0.3s ease;
}

.question-section__btn.outline-btn {
    background-color: transparent;
    border: 1px solid #8039d8;
    color: #8039d8;
}

.question-section__btn.outline-btn:hover,
.question-section__btn.outline-btn:focus {
    color: #fff !important;
}

.question-section__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.question-section__btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.question-section__info-text p {
    color: #667085;
    font: 400 18px/140% Inter, sans-serif;
    margin-bottom: 12px;
}

@media (max-width: 1024px) {
    .question-section__footer {
        column-gap: 12px;
    }
    .question-section__title {
        font: 600 18px/140% Epilogue, sans-serif;
    }
    .question-section__info-text p {
        font: 400 16px/140% Inter, sans-serif;
    }
}

@media (max-width: 768px) {
    .question-section {
        max-width: 100%;
    }
}
/* ============================================
   THREAD FELT COUNT STYLES
   ============================================ */

.thread-content-submit .custom-select-styles {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background: url(/wp-content/uploads/2025/12/arrow-down.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position-x: calc(100% - 12px);
    background-position-y: center;
}

.thread-content-submit .custom-upload-box .upload-info-wrapper {
    top: 22%;
}

.thread-content-submit .thread-action-btn {
  filter: blur(3px);
}

/* Container */
.thread-felt-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--e-global-typography-text-font-family, inherit);
}

/* Button (for unfelt state) */
.thread-felt-btn,
#thread-felt-button {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

.thread-felt-btn:active,
#thread-felt-button:active {
	transform: translateY(0);
}

.thread-felt-btn:disabled,
#thread-felt-button:disabled,
.thread-felt-btn--loading,
#thread-felt-button.thread-felt-btn--loading {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* Loading animation */
.thread-felt-btn--loading::after,
#thread-felt-button.thread-felt-btn--loading::after {
	content: '';
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: thread-felt-spin 0.6s linear infinite;
}

@keyframes thread-felt-spin {
	to {
		transform: translateY(-50%) rotate(360deg);
	}
}

/* Display (for felt state) */
.thread-felt-display {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--temp-color-gray-500);
	font-size: 16px;
}

.thread-felt-display--active {
	color: var(--temp-color-primary);
}

/* Icon */
.thread-felt-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: currentColor;
	transition: all 0.3s ease;
}

.thread-felt-btn:hover .thread-felt-icon,
#thread-felt-button:hover .thread-felt-icon {
	transform: scale(1.1);
}

.thread-felt-icon--filled {
	animation: thread-felt-pulse 0.6s ease-out;
}

@keyframes thread-felt-pulse {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

#thread-felt-button svg {
  width: 15px;
  height: 15px;
}

/* ============================================
   Thread Features Section Styles
   ============================================ */

.thread-features-block {
    display: flex;
    flex-direction: column;
    text-align: center;
    max-width: 80%;
}

.thread-features-section .jet-listing-dynamic-repeater__item:nth-child(2n + 1) .thread-features-block {
    position: relative;
    border: 2px dashed var(--temp-color-primary);
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 1);
    margin-bottom: 50px;
    padding: 30px;
}

.thread-features-section .jet-listing-dynamic-repeater__item:nth-child(2n + 1) .thread-features-block::after {
    position: absolute;
    right: -240px;
    bottom: -70px;
    display: block;
    content: "";
    background-image: url(/wp-content/uploads/2026/01/bg-thread-feature-after-bg.png);
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
}

.thread-features-section .jet-listing-dynamic-repeater__item:nth-child(2n + 2) {
    display: flex;
    justify-content: end;
}

.thread-features-section .jet-listing-dynamic-repeater__item:nth-child(2n + 2) .thread-features-block {
  position: relative;
  background-image: none;
  border: 2px dashed var(--temp-color-primary);
  border-radius: 30px;
  background-color: rgba(250, 246, 253, 1);
  margin-bottom: 50px;
  padding: 30px;
}

.thread-features-section .jet-listing-dynamic-repeater__item:nth-child(2n + 2) .thread-features-block::after {
    position: absolute;
    left: -150px;
    top: -100px;
    display: block;
    content: "";
    background-image: url(/wp-content/uploads/2026/01/bg-thread-feature-before-bg.svg);
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    z-index: -1;
}

.thread-feature-title {
    margin-bottom: 8px;
    font-family: 'Epilogue', sans-serif;
    font-size: 24px;
    line-height: 130%;
    font-weight: 600;
    color: #8039D8;
}

.thread-feature-desc {
    font-size: 14px;
    line-height: 170%;
    font-weight: 400;
}

/* ============================================
   Thread Reflections Section Styles
   ============================================ */
.thread-reflections-section .jet-listing-dynamic-repeater__items {
    flex-wrap: wrap;
 }

.thread-reflections-section .jet-listing-dynamic-repeater__item {
    width: 33.33%;
    z-index: 2;
}

.thread-reflections-section .thread-reflection {
    display: inline-block !important;
    padding: 20px 30px 30px 30px;
}

.thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(6n + 1) {
    transform: rotate(-7deg);
}

.thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(6n + 2) {
    transform: rotate(4deg);
}

.thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(6n + 3) {
    transform: rotate(-6deg);
}

.thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(6n + 4) {
    transform: rotate(4deg);
}

.thread-reflections-section .jet-listing-dynamic-repeater__item .thread-reflection {
  min-height: 200px;
  border: 2px dashed var(--temp-color-primary);
  border-radius: 30px;
  padding: 20px;
  background: white;
}

.thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(6n + 5) {
    transform: rotate(-8deg);
}

.thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(6n + 6) {
    transform: rotate(6deg);
}

.thread-reflections-section .thread-reflection img {
    float: left;
}

.thread-reflections-section .thread-reflection-text {
    padding-top: 20px;
}

.thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(1)  .thread-reflection:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -80px;
    left: -140px;
    background-image: url(/wp-content/uploads/2025/12/Heart-threads.png);
    width: 217px;
    height: 205px;
    z-index: 0;
}

.thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(3)  .thread-reflection:after {
    content: "";
    display: block;
    position: absolute;
    top: -65px;
    right: -180px;
    background-image: url(/wp-content/uploads/2026/01/cloud-thread.png);
    width: 239px;
    height: 178px;
    z-index: 0;
}

/* ============================================
   Thread Questions Section Styles
   ============================================ */
.thread-questions-section .jet-listing-dynamic-repeater__item {
    width: 33.33%;
    margin-bottom: 30px;
}

.thread-questions-section .jet-listing-dynamic-repeater__item .question-text {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px 40px 30px 40px;
    background-image: url(/wp-content/uploads/2026/01/Questions-Subtract-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
}

.thread-questions-section .jet-listing-dynamic-repeater__item .question-text img {
    margin-bottom: 10px;
}

.thread-questions-section .jet-listing-dynamic-repeater__item:nth-child(6n + 1) {
    transform: rotate(2deg);
}

.thread-questions-section .jet-listing-dynamic-repeater__item:nth-child(6n + 2) {
    transform: rotate(-3deg);
}

.thread-questions-section .jet-listing-dynamic-repeater__item:nth-child(6n + 3) {
    transform: rotate(3deg);
}

.thread-questions-section .jet-listing-dynamic-repeater__item:nth-child(6n + 4) {
    transform: rotate(-2deg);
}

.thread-questions-section .jet-listing-dynamic-repeater__item:nth-child(6n + 5) {
    transform: rotate(2deg);
}

.thread-questions-section .jet-listing-dynamic-repeater__item:nth-child(6n + 6) {
    transform: rotate(-2deg);
}

.thread-questions-section .jet-listing-dynamic-repeater__items {
    flex-wrap: wrap;
}

/* Responsive adjustments */
@media (min-width: 1980px) {
  .thread-reflections-container:after {
    background-image: linear-gradient(to right, rgba(252, 252, 253, 0.9) 10%, transparent 50%, transparent 50%, rgba(252, 252, 253, 0.9) 90%), url(/wp-content/uploads/2026/01/bg-line-thread-its4reel.svg) !important;
  }
}

@media (max-width: 1024px) {
	.thread-content-submit .custom-select-styles {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    background-position-x: calc(100% - 12px) !important;
    background-position-y: center !important;
    background-image: url(/wp-content/uploads/2025/12/arrow-down.svg) !important;
  }

  .thread-features-section .jet-listing-dynamic-repeater__item:nth-child(2n + 2) .thread-features-block::after {
    transform: rotate(20deg);
  }

  .thread-reflections-section .jet-listing-dynamic-repeater__item {
    width: 50%;
  }

  .thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(1) .thread-reflection:after {
    left: -150px;
  }

  .thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(2) .thread-reflection:after {
    content: "";
    display: block;
    position: absolute;
    top: -130px;
    right: -65px;
    background-image: url(/wp-content/uploads/2026/01/cloud-thread.png);
    width: 239px;
    height: 178px;
    z-index: 0;
  }

  .thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(3) .thread-reflection:after {
    background-image: none;
  }

  .thread-questions-section .jet-listing-dynamic-repeater__item {
    width: 50%;
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {

  .thread-features-block {
    max-width: 100%;
  }

  .thread-features-section .jet-listing-dynamic-repeater__item:nth-child(2n + 1) .thread-features-block {
    margin-bottom: 120px;
  }

  .thread-features-section .jet-listing-dynamic-repeater__item:nth-child(2n + 1) .thread-features-block::after {
    right: -100px;
    bottom: -150px;
  }

  .thread-features-section .jet-listing-dynamic-repeater__item:nth-child(2n + 2) .thread-features-block::after {
    left: 0px;
    top: -150px;
  }

  .thread-reflections-section .jet-listing-dynamic-repeater__item {
    width: 100%;
  }

  .thread-reflections-section .jet-listing-dynamic-repeater__item:nth-child(2) .thread-reflection:after {
    top: unset;
    right: -155px;
    bottom: -45px;
  }

  .thread-questions-section .jet-listing-dynamic-repeater__item {
    width: 100%;
    margin-bottom: 30px;
  }

  .thread-questions-section .jet-listing-dynamic-repeater__item .question-text {
    padding: 40px 30px 30px 30px;
  }
}