/* ─────────────────────────────────────────
   MealApp FAQ — Design tokens
   ───────────────────────────────────────── */
:root {
	--faq-bg:           #050B18;
	--faq-card:         #0A1628;
	--faq-border:       rgba(255, 255, 255, 0.08);
	--faq-green:        #1fe689;
	--faq-green-dim:    rgba(31, 230, 137, 0.12);
	--faq-green-border: rgba(31, 230, 137, 0.30);
	--faq-white:        #FFFFFF;
	--faq-text:         #AAB7C7;
	--faq-font-head:    'The Bold Font', sans-serif;
	--faq-font-body:    'Inter', sans-serif;
	--faq-width:        1240px;
	--faq-px:           20px;   /* horizontal page padding */
}

/* ─────────────────────────────────────────
   Global reset for the component
   ───────────────────────────────────────── */
.faq-section *,
.faq-section *::before,
.faq-section *::after {
	box-sizing: border-box;
}

/* ─────────────────────────────────────────
   Badge pill
   ───────────────────────────────────────── */
.faq-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            7px;
	background:     var(--faq-green-dim);
	border:         1px solid var(--faq-green-border);
	border-radius:  100px;
	padding:        6px 14px;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--faq-green);
	margin-bottom:  20px;
}

/* ─────────────────────────────────────────
   FAQ section wrapper — mobile base
   ───────────────────────────────────────── */
.faq-section {
	max-width:   var(--faq-width);
	margin:      0 auto;
	padding:     0 24px 60px;
	color:       var(--faq-white);
	font-family: var(--faq-font-body);
	-webkit-font-smoothing: antialiased;
}

/* FAQ list — padding around the card list */
.faq-list {
	padding: 8px 0 0;
}

/* ─────────────────────────────────────────
   Section header — mobile base
   ───────────────────────────────────────── */
.faq-section-header {
	text-align:    center;
	margin-bottom: 28px;
}

.faq-section-header h2 {
	font-family:    var(--faq-font-head);
	font-size:      28px;
	line-height:    1.1;
	font-weight:    700;
	text-transform: uppercase;
	color:          var(--faq-white);
	margin:         0 0 14px;
}

.faq-section-header h2 span {
	color: var(--faq-green);
}

.faq-section-header > p {
	font-size:   14px;
	line-height: 1.6;
	color:       var(--faq-text);
	max-width:   480px;
	margin:      0 auto;
}

/* ─────────────────────────────────────────
   Tabs — mobile: stacked column
   ───────────────────────────────────────── */
.faq-tabs {
	display:       flex;
	flex-direction: column;
	gap:           10px;
	margin-bottom: 20px;
}

/* Base tab — inactive */
.faq-tab {
	position:      relative;
	display:       flex;
	align-items:   center;
	gap:           14px;
	padding:       16px 18px;
	background:    linear-gradient(180deg, rgba(14,27,51,1) 0%, rgba(12,22,40,1) 100%);
	border:        1px solid rgba(140,170,205,0.1);
	border-radius: 18px;
	cursor:        pointer;
	text-align:    left;
	outline:       none;
	transition:    border-color 0.25s, box-shadow 0.25s, background 0.25s;
	overflow:      hidden;
	width:         100%;
}

.faq-tab:hover {
	border-color: rgba(31,230,137,0.3);
}

/* Active tab */
.faq-tab.active {
	background:   linear-gradient(180deg, rgba(31,230,137,0.1) 0%, rgba(12,22,40,1) 100%);
	border-color: rgba(31,230,137,0.5);
	box-shadow:   0px 0px 38px -6px rgba(31,230,137,0.3),
	              0px 0px 0px 1px rgba(31,230,137,0.25);
}

/* Dot indicator */
.faq-tab::after {
	content:       '';
	position:      absolute;
	top:           17px;
	right:         17px;
	width:         9px;
	height:        9px;
	border-radius: 50%;
	background:    #5c6a7e;
	transition:    background 0.25s, box-shadow 0.25s;
}

.faq-tab.active::after {
	background: var(--faq-green);
	box-shadow: 0px 0px 12px var(--faq-green);
}

/* Icon box */
.faq-tab-icon {
	position:        relative;
	width:           44px;
	height:          44px;
	min-width:       44px;
	background:      rgba(255,255,255,0.03);
	border:          1px solid rgba(140,170,205,0.1);
	border-radius:   13px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           #f3f7fc;
	transition:      background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.faq-tab.active .faq-tab-icon {
	background:   rgba(31,230,137,0.12);
	border-color: rgba(31,230,137,0.4);
	box-shadow:   0px 0px 20px -4px rgba(31,230,137,0.5);
}

/* Tab text */
.faq-tab-text {
	display:        flex;
	flex-direction: column;
	gap:            3px;
}

.faq-tab-label {
	font-family: 'Archivo', 'Inter', sans-serif;
	font-size:   15px;
	font-weight: 700;
	color:       #f3f7fc;
	line-height: 1.2;
}

/* Subtitle hidden on very small screens */
.faq-tab-sub {
	display:     none;
	font-family: 'Arial', sans-serif;
	font-size:   12px;
	font-weight: 400;
	color:       #8a97ab;
	line-height: 1.2;
}

/* ─────────────────────────────────────────
   Search — Figma exact values
   ───────────────────────────────────────── */
.faq-search-wrap {
	position:      relative;
	margin-bottom: 28px;
}

.faq-search-icon {
	position:       absolute;
	left:           16px;
	top:            50%;
	transform:      translateY(-50%);
	width:          20px;
	height:         20px;
	color:          #aab7c7;
	pointer-events: none;
	display:        block;
}

.faq-search {
	width:              100%                      !important;
	height:             48px                      !important;
	padding:            0 16px 0 52px             !important;
	background:         #071426                   !important;
	border:             1px solid rgba(29,45,68,1) !important;
	border-radius:      12px                      !important;
	color:              #f3f7fc                   !important;
	font-family:        'Inter', Helvetica, sans-serif !important;
	font-size:          16px                      !important;
	font-weight:        400                       !important;
	line-height:        24px                      !important;
	outline:            none                      !important;
	box-shadow:         none                      !important;
	transition:         border-color 0.2s;
	-webkit-appearance: none;
}

.faq-search::placeholder {
	color:    #aab7c7 !important;
	opacity:  1;
}

.faq-search:focus,
.faq-search:focus-visible {
	border-color: rgba(31, 230, 137, 0.35) !important;
	outline:      none                     !important;
	box-shadow:   none                     !important;
}

/* ─────────────────────────────────────────
   Category label
   ───────────────────────────────────────── */
.faq-category-label {
	display:        flex;
	align-items:    center;
	gap:            8px;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          rgba(31, 230, 137, 0.65);
	margin:         36px 0 14px;
}

/* First category group — no top margin */
.faq-category-group:first-child .faq-category-label {
	margin-top: 0;
}

.faq-category-label::before {
	content:       '';
	width:         6px;
	height:        6px;
	min-width:     6px;
	background:    var(--faq-green);
	border-radius: 50%;
}

/* ─────────────────────────────────────────
   FAQ accordion — card style (Figma)
   ───────────────────────────────────────── */

/* Each FAQ = its own card */
.faq-item {
	background:    var(--faq-card);
	border:        1px solid rgba(29, 45, 68, 1);
	border-radius: 12px;
	margin-bottom: 12px;
	overflow:      hidden;
}

.faq-item.faq-hidden { display: none; }

/* Question row inside card */
.faq-question {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	min-height:      70px;
	padding:         20px 24px;
	cursor:          pointer;
	user-select:     none;
}

.faq-question:focus-visible {
	outline:        2px solid var(--faq-green);
	outline-offset: 2px;
}

/* Inter Semi Bold 600 */
.faq-question-text {
	font-family:    'Inter', Helvetica, sans-serif;
	font-size:      16px;
	font-weight:    600;
	font-style:     normal;
	color:          #f3f7fc;
	line-height:    23.2px;
	letter-spacing: 0px;
	flex:           1;
}

/* Toggle — green tint when closed */
.faq-toggle {
	width:           30px;
	height:          30px;
	min-width:       30px;
	background:      rgba(31, 230, 137, 0.08);
	border:          1px solid rgba(31, 230, 137, 0.25);
	border-radius:   9px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       20px;
	line-height:     1;
	color:           var(--faq-green);
	transition:      background 0.2s, border-color 0.2s, color 0.2s;
	font-family:     var(--faq-font-body);
	font-weight:     300;
	flex-shrink:     0;
}

/* Toggle — solid green when open */
.faq-item.faq-open .faq-toggle {
	background:   var(--faq-green);
	border-color: var(--faq-green);
	color:        #050B18;
	font-weight:  600;
}

/* Answer slide */
.faq-answer {
	display:            grid;
	grid-template-rows: 0fr;
	transition:         grid-template-rows 0.32s ease;
}

.faq-item.faq-open .faq-answer { grid-template-rows: 1fr; }

.faq-answer > div { overflow: hidden; }

/* Answer content — flows inside the FAQ card */
.faq-answer-inner {
	padding:     0 24px 24px;
	font-size:   14px;
	color:       var(--faq-text);
	line-height: 1.75;
}

.faq-answer-inner p            { margin: 0 0 10px; }
.faq-answer-inner p:last-child { margin-bottom: 0; }
.faq-answer-inner strong       { color: var(--faq-white); }
.faq-answer-inner a            { color: var(--faq-green); text-decoration: underline; }

/* ─────────────────────────────────────────
   Commission cards — mobile: stacked
   Usage: <div class="faq-cards">
     <div class="faq-card">
       <div class="faq-card-pct">13%</div>
       <div class="faq-card-desc">…</div>
     </div>
   </div>
   ───────────────────────────────────────── */
.faq-cards {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   10px;
	margin-top:            14px;
}

.faq-card {
	background:    rgba(255,255,255,0.04);
	border:        1px solid var(--faq-border);
	border-radius: 8px;
	padding:       14px;
}

.faq-card-pct {
	font-family:   var(--faq-font-head);
	font-size:     28px;
	color:         var(--faq-white);
	margin-bottom: 6px;
}

.faq-card-desc {
	font-size:   12px;
	color:       var(--faq-text);
	line-height: 1.5;
}

/* ─────────────────────────────────────────
   No results / empty states
   ───────────────────────────────────────── */
.faq-no-results {
	display:    none;
	text-align: center;
	padding:    40px 20px;
	color:      var(--faq-text);
	font-size:  15px;
}

.faq-no-results.faq-visible { display: block; }

.faq-category-group.faq-group-hidden > .faq-category-label { display: none; }

.faq-empty {
	text-align: center;
	color:      var(--faq-text);
	padding:    40px 0;
}

.faq-empty a { color: var(--faq-green); text-decoration: underline; }


/* ═════════════════════════════════════════
   BREAKPOINT: 480px — show tab subtitles
   ═════════════════════════════════════════ */
@media (min-width: 480px) {
	.faq-tab-sub { display: block; }
}


/* ═════════════════════════════════════════
   BREAKPOINT: 768px — tablet
   ═════════════════════════════════════════ */
@media (min-width: 768px) {

	.faq-section {
		padding-left:   48px;
		padding-right:  48px;
		padding-bottom: 80px;
	}

	.faq-section-header { margin-bottom: 36px; }
	.faq-section-header h2 { font-size: 36px; }
	.faq-section-header > p { font-size: 15px; }

	/* Tabs: 3 columns */
	.faq-tabs {
		display:               grid;
		grid-template-columns: repeat(3, 1fr);
		gap:                   16px;
		margin-bottom:         24px;
	}

	.faq-tab { padding: 20px 22px; width: auto; }

	.faq-tab-icon { width: 50px; height: 50px; min-width: 50px; }

	.faq-tab-label { font-size: 16px; }
	.faq-tab-sub   { font-size: 12.5px; display: block; }

	/* Commission cards: 3 columns */
	.faq-cards { grid-template-columns: repeat(3, 1fr); }
}


/* ═════════════════════════════════════════
   BREAKPOINT: 1024px — desktop
   ═════════════════════════════════════════ */
@media (min-width: 1024px) {

	.faq-section {
		padding-left:   80px;
		padding-right:  80px;
		padding-bottom: 100px;
	}

	.faq-section-header { margin-bottom: 40px; }
	.faq-section-header h2 { font-size: 46px; }

	.faq-tabs { margin-bottom: 28px; }

	.faq-card-pct { font-size: 30px; }
}


/* ═════════════════════════════════════════
   BREAKPOINT: 1280px — large desktop
   ═════════════════════════════════════════ */
@media (min-width: 1280px) {

	.faq-section {
		padding-left:   120px;
		padding-right:  120px;
		padding-bottom: 120px;
	}
}