.mod-instance[data-inst="index-html--faq"] /* /home/norus/Documents/Vscode-Projects/site-tonoassets/modules/faq-tab/simple2-4/faq-tab.css */
.faq-section{
	width: 100%;
	padding: 1.5rem;
	background-color: #12141e;
	color: #d1d5e0;
	text-align: center;
	font-size: 1rem;
	padding-bottom: 2rem; /* Add a big space below the FAQ module */
}.mod-instance[data-inst="index-html--faq"] /* Tablet spacing is handled by each module; avoid extra external gaps */

/* Simplified inner container - remove all box styling */
.faq-inner{
	max-width: 1000px;
	margin: 0 auto;
	/* Removed all background, border, padding, backdrop-filter */
}.mod-instance[data-inst="index-html--faq"] .faq-description-wrapper{
	display: flex;
	flex-direction: row;
	/* keep subtitle on one row with side lines */
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2rem);
	max-width: 900px;
	margin: clamp(0.5rem, 2vw, 1rem) auto 0;
}.mod-instance[data-inst="index-html--faq"] .faq-divider{
	/* fixed line blocks */
	flex: 0 0 auto;
	flex-shrink: 0;
	width: clamp(30px, 10vw, 60px);
	height: 2px;
	background-color: #47286E;
	margin-top: clamp(-0.5rem, -1vw, -1rem);
}.mod-instance[data-inst="index-html--faq"] .faq-description{
	text-align: center;
	font-size: clamp(0.8rem, 2vw, 1.25rem);
	color: #7A44C0;
	margin: clamp(-0.5rem, -1vw, -1rem) 0 0;
	line-height: 1.6;
	/* center text wraps between non-wrapping side lines */
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
}.mod-instance[data-inst="index-html--faq"] .faq-title{
	text-align: center;
	width: 100%; /* Responsive width */
	max-width: 1200px; /* Limit to carousel width */
	margin: 0 auto clamp(0.5rem, 2vw, 1rem) auto; /* Less space below, closer to carousel */
	font-size: clamp(1.5rem, 5vw, 3rem); /* Responsive font size */
	font-weight: bold;
	color: #eceff4;
	overflow: visible;
	white-space: normal; /* Allow wrapping on small screens */
	background-color: #12141e;
}.mod-instance[data-inst="index-html--faq"] .faq-dynamic-content{
	text-align: left;
}.mod-instance[data-inst="index-html--faq"] .faq-item{
	width: 100%;
	margin-bottom: 0;
	padding: 0;
	text-align: left;
	border-bottom: 1px solid #5a6178;
	background: #12141e;
	/* Enhanced transition for smooth line movement */
	transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 350ms ease,
		height 350ms cubic-bezier(0.4, 0, 0.2, 1);
	overflow: visible;
	font-size: 1.25rem;
	padding: 0.5rem 0;
}.mod-instance[data-inst="index-html--faq"] /* When answer is open, .mod-instance[data-inst="index-html--faq"] make question text primary color */
.faq-item .faq-answer.faq-open ~ .faq-question, .mod-instance[data-inst="index-html--faq"] .faq-item .faq-answer.faq-open ~ .faq-question .faq-question-text{
	color: #7A44C0;
}.mod-instance[data-inst="index-html--faq"] /* Alternative approach - using adjacent sibling selector */
.faq-answer.faq-open + .faq-question, .mod-instance[data-inst="index-html--faq"] .faq-answer.faq-open + .faq-question .faq-question-text{
	color: #7A44C0;
}.mod-instance[data-inst="index-html--faq"] /* Direct targeting when answer is open */
.faq-item:has(.faq-answer.faq-open) .faq-question, .mod-instance[data-inst="index-html--faq"] .faq-item:has(.faq-answer.faq-open) .faq-question-text{
    color: #7A44C0;
}.mod-instance[data-inst="index-html--faq"] /* When open AND hovered, .mod-instance[data-inst="index-html--faq"] prefer hover color over open color */
.faq-item .faq-answer.faq-open ~ .faq-question:hover, .mod-instance[data-inst="index-html--faq"] .faq-item .faq-answer.faq-open ~ .faq-question:hover .faq-question-text, .mod-instance[data-inst="index-html--faq"] .faq-answer.faq-open + .faq-question:hover, .mod-instance[data-inst="index-html--faq"] .faq-answer.faq-open + .faq-question:hover .faq-question-text, .mod-instance[data-inst="index-html--faq"] .faq-item:has(.faq-answer.faq-open) .faq-question:hover, .mod-instance[data-inst="index-html--faq"] .faq-item:has(.faq-answer.faq-open) .faq-question:hover .faq-question-text{
    color: #9F6EDD;
}.mod-instance[data-inst="index-html--faq"] .faq-item:hover{
	border-color: #9F6EDD;
}.mod-instance[data-inst="index-html--faq"] .faq-question{
	width: 100%;
	background: none;
	border: none;
	padding: 1rem 1rem;
	font-size: 1.5rem;
	font-weight: 500;
	color: #eceff4;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	/* Smooth color transition for hover/open state */
	transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 1.5rem;
	padding: 0.5rem 0.5rem;
}.mod-instance[data-inst="index-html--faq"] .faq-question-text{
	flex: 1;
	margin-right: 0.75rem;
	margin-right: 0.5rem;
    /* Also transition the nested text color smoothly */
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}.mod-instance[data-inst="index-html--faq"] .faq-question:hover{
	color: #9F6EDD;
}.mod-instance[data-inst="index-html--faq"] .faq-answer{
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0 0;
	visibility: hidden;
	/* Smooth transition for answer expansion */
	transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 250ms ease,
		padding 250ms cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s 250ms; /* Delay visibility change */
	color: #d1d5e0;
	font-size: 1rem;
	line-height: 1.75;
}.mod-instance[data-inst="index-html--faq"] .faq-answer.faq-open{
	max-height: 500px;
	opacity: 1;
	padding: 0.25rem 0.25rem 0.25rem 1rem;
	visibility: visible;
	/* Immediate visibility when opening */
	transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 350ms ease,
		padding 350ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}.mod-instance[data-inst="index-html--faq"] .faq-chevron{
	color: #7A44C0;
	font-size: 1.25rem;
	/* Smooth color fade to match question text */
	transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
		color 250ms cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
	width: 1.5rem;
	text-align: center;
}.mod-instance[data-inst="index-html--faq"] .faq-chevron.faq-rotate{
	transform: rotate(180deg);
}.mod-instance[data-inst="index-html--faq"] /* Hover: chevron color follows question hover color */
.faq-question:hover .faq-chevron{
    color: #9F6EDD;
}.mod-instance[data-inst="index-html--faq"] /* Open + hover: prefer hover color for chevron */
.faq-item .faq-answer.faq-open ~ .faq-question:hover .faq-chevron, .mod-instance[data-inst="index-html--faq"] .faq-answer.faq-open + .faq-question:hover .faq-chevron, .mod-instance[data-inst="index-html--faq"] .faq-item:has(.faq-answer.faq-open) .faq-question:hover .faq-chevron{
    color: #9F6EDD;
}.mod-instance[data-inst="index-html--faq"] /* Responsive design */
@media (max-width: 1024px){
	.faq-section {
		padding: 3rem 1.5rem;
	}

	.faq-inner {
		max-width: 700px;
	}

	.faq-title {
		font-size: 2rem;
		margin-bottom: 1.5rem;
	}

	.faq-question {
		font-size: 1.25rem;
		padding: 0.75rem 1rem;
	}
}@media (max-width: 768px) {.mod-instance[data-inst="index-html--faq"] .faq-section{
		padding: 2rem 1rem;
	}.mod-instance[data-inst="index-html--faq"] .faq-inner{
		max-width: 100%;
	}.mod-instance[data-inst="index-html--faq"] .faq-title{
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
	}.mod-instance[data-inst="index-html--faq"] .faq-item{
		margin-bottom: 0;
		border-bottom: 1px solid #5a6178;
		overflow: visible;
		/* Enhanced mobile transitions */
		transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1),
			border-color 150ms ease,
			height 150ms cubic-bezier(0.4, 0, 0.2, 1);
	}.mod-instance[data-inst="index-html--faq"] .faq-item:last-child{
		border-bottom: none;
	}.mod-instance[data-inst="index-html--faq"] .faq-question{
		padding: 0.75rem 1rem;
		min-height: 48px;
	}.mod-instance[data-inst="index-html--faq"] .faq-question-text{
		margin-right: 0.5rem;
	}.mod-instance[data-inst="index-html--faq"] .faq-answer{
		padding: 0 1rem;
		font-size: 1rem;
		/* Faster mobile transitions */
		transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
			opacity 250ms ease,
			padding 250ms cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s 250ms; /* Delay visibility change */
	}.mod-instance[data-inst="index-html--faq"] .faq-answer.faq-open{
		max-height: 300px;
		padding: 0.25rem 1rem 0.75rem 1rem;
		transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1),
			opacity 350ms ease,
			padding 350ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
	}.mod-instance[data-inst="index-html--faq"] .faq-chevron{
		font-size: 1.25rem;
		width: 1.5rem;
		height: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
			color 150ms ease;
	}.mod-instance[data-inst="index-html--faq"] /* keep decorative dividers visible on mobile */
	.faq-divider{
		display: block !important;
		width: clamp(25px, 12vw, 60px) !important;
		height: 2px !important;
		margin-top: clamp(-0.5rem, -1vw, -1rem) !important;
	}.mod-instance[data-inst="index-html--faq"] }

@media (max-width: 480px){
	.faq-section {
		padding: 1.5rem 0.5rem;
	}

	.faq-item {
		border-bottom: 1px solid #5a6178;
		overflow: visible;
		/* Very fast transitions for small screens */
	}

	.faq-item:last-child {
		border-bottom: none;
	}

	.faq-question {
		padding: 0.5rem 0.75rem;
		font-size: 1rem;
	}

	.faq-answer {
		transition: max-height 150ms cubic-bezier(0.4, 0, 0.2, 1),
			opacity 150ms ease,
			padding 150ms cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s 150ms;
	}

	.faq-answer.faq-open {
		padding: 0.25rem 0.75rem 0.5rem 0.75rem;
		max-height: 100%;
		transition: max-height 150ms cubic-bezier(0.4, 0, 0.2, 1),
			opacity 150ms ease,
			padding 150ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
	}

	.faq-chevron {
		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
	}
}.mod-instance[data-inst="index-html--faq"] /* Fix the CSS syntax error in mobile styles */
@media (max-width: 768px){
	.faq-answer {
		padding: 0 1rem; /* Fixed missing closing parenthesis */
		font-size: 1rem;
	}
}@media (max-width: 1200px) {.mod-instance[data-inst="index-html--faq"] .faq-item:hover, .mod-instance[data-inst="index-html--faq"] .faq-question:hover{
		border-color: #5a6178 !important;
		background: none !important;
		color: inherit !important;
		box-shadow: none !important;
		cursor: default !important;
	}.mod-instance[data-inst="index-html--faq"] }{}}