: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);
}

/* ============================================
	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;
}

/* 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;
}

/* 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;
	}

	.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-second-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;
}

@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('https://its4reel.kinsta.cloud/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('https://its4reel.kinsta.cloud/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('https://its4reel.kinsta.cloud/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('https://its4reel.kinsta.cloud/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('https://its4reel.kinsta.cloud/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('https://its4reel.kinsta.cloud/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;
}

/* small interactive affordance */
/* .price-pill:hover{ transform:translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.04); } */
/* .price-pill:active{ transform:translateY(0); } */
/* .price-pill:focus{ outline:3px solid rgba(255,75,158,0.14); outline-offset:3px; } */

/* ============================================
	NEW APPROACH: CSS Mask with Dynamic Colors
	Benefits:
	- Dynamic colors via CSS variables
	- Hover/state transitions
	- No extra HTTP requests
	- Crisp at any resolution
	============================================ */

/* CSS Variables for expedition background colors */
/* #expeditions-grid {
	--expedition-bg-color: #F8F4FF;
	--expedition-bg-color-hover: #EDE5F9;
}

#expeditions-grid .jet-listing-grid__item > div::before {
	content: '';
	position: absolute;
	top: 0;
	width: 113%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	background-color: var(--expedition-bg-color);
	transition: background-color 0.3s ease;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='24' ry='24' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='24' ry='24' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

#expeditions-grid .jet-listing-grid__item:nth-child(odd) > div::before {
	left: 0;
}

#expeditions-grid .jet-listing-grid__item:nth-child(even) > div::before {
	right: 0;
} */








/* 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-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='M13.8538 8.35403L9.35375 12.854C9.25993 12.9478 9.13268 13.0006 9 13.0006C8.86732 13.0006 8.74007 12.9478 8.64625 12.854C8.55243 12.7602 8.49972 12.633 8.49972 12.5003C8.49972 12.3676 8.55243 12.2403 8.64625 12.1465L12.2931 8.50028H2.5C2.36739 8.50028 2.24021 8.4476 2.14645 8.35383C2.05268 8.26006 2 8.13289 2 8.00028C2 7.86767 2.05268 7.74049 2.14645 7.64672C2.24021 7.55296 2.36739 7.50028 2.5 7.50028H12.2931L8.64625 3.85403C8.55243 3.76021 8.49972 3.63296 8.49972 3.50028C8.49972 3.3676 8.55243 3.24035 8.64625 3.14653C8.74007 3.05271 8.86732 3 9 3C9.13268 3 9.25993 3.05271 9.35375 3.14653L13.8538 7.64653C13.9002 7.69296 13.9371 7.74811 13.9623 7.80881C13.9874 7.86951 14.0004 7.93457 14.0004 8.00028C14.0004 8.06599 13.9874 8.13105 13.9623 8.19175C13.9371 8.25245 13.9002 8.30759 13.8538 8.35403Z' 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: var(--content-padding); */
	/* keep the block itself transparent; the background will be the pseudo-element */
	padding-left: 0;
	background: transparent;
	z-index: 1;
	/* 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 */
.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;

	/* 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;
}

.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;
}

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

.course-impact-image img {
	margin-bottom: -8px;
}

.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;
}

@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;
	}
}

/* ============================================
	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
   ============================================ */

/* 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;
	/* gap: 8px; */
	/* padding: 10px 20px; */
	/* background: transparent; */
	/* border: 2px solid var(--temp-color-primary);
	border-radius: 30px;
	color: var(--temp-color-primary);
	font-size: 16px;
	font-weight: 500; */
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

/* .thread-felt-btn:hover,
#thread-felt-button:hover {
	background: var(--temp-color-primary);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(128, 57, 216, 0.3);
} */

.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;
}

/* Text - Plain text output from shortcode */
.thread-felt-text {
	/* line-height: 1;
	color: white;
	font-size: 16px;
	font-weight: 500; */
}

/* Count number highlight */
.thread-felt-count-number {
	/* font-weight: 600;
	color: white; */
}

/* Responsive adjustments */
@media (max-width: 767px) {
	/* .thread-felt-btn,
	#thread-felt-button,
	.thread-felt-display {
		font-size: 14px;
		padding: 8px 16px;
	}

	.thread-felt-icon {
		width: 18px;
		height: 18px;
	} */
}