/* ==========================================================================
   Thai Airways Roblox — Flight results page (step 1: Select Flight)
   Modeled on thaiairways.com. Loads after tg-theme.css + tg-book.css.
   ========================================================================== */

/* Booking step progress */
.tg-steps { display:flex; gap:2rem; padding:1rem 1.5rem 0; max-width:80rem; margin:0 auto; overflow-x:auto; }
.tg-step-i { padding-bottom:.9rem; font-weight:600; color:var(--tg-muted-2); border-bottom:3px solid transparent; white-space:nowrap; }
.tg-step-i.is-active { color:var(--tg-purple); border-color:var(--tg-purple-2); }

/* Hero band — lighter, taller, airier */
.tg-hero { background:linear-gradient(100deg,#4a2c86 0%,#6f51a8 42%,#cdbce8 100%); color:#fff; }
.tg-hero__inner { max-width:80rem; margin:0 auto; padding:2.25rem 1.5rem 4rem; position:relative; }
.tg-socialproof { position:fixed; top:1.25rem; right:1.25rem; z-index:70; display:flex; align-items:center; gap:.6rem; background:rgba(30,20,50,.62); backdrop-filter:blur(4px); color:#fff; padding:.55rem .9rem; border-radius:10px; font-size:.85rem; box-shadow:var(--tg-shadow); }
@media (max-width:900px){ .tg-socialproof{ display:none; } }
.tg-socialproof b { font-weight:700; }
.tg-socialproof__check { color:#55CD7D; flex:none; }
.tg-socialproof__x { background:none; border:0; color:#fff; opacity:.7; cursor:pointer; display:flex; }
.tg-socialproof__x:hover { opacity:1; }
.tg-hero__title { font-size:2.5rem; font-weight:700; display:flex; align-items:center; gap:1.1rem; letter-spacing:.01em; line-height:1.15; }
@media (max-width:640px){ .tg-hero__title{ font-size:1.8rem; } }
.tg-hero__sub { opacity:.92; margin-top:.55rem; font-size:.92rem; }
.tg-hero__inner > .mt-6 { margin-top:2rem; }

/* Search summary chip */
.tg-summary { background:#fff; border-radius:14px; box-shadow:var(--tg-shadow); display:flex; align-items:center; gap:1.25rem; padding:.9rem 1.25rem; color:var(--tg-ink); max-width:60rem; margin:0 auto; flex-wrap:wrap; }
.tg-summary__seg { display:flex; align-items:center; gap:.5rem; font-weight:600; }
.tg-summary__div { width:1px; height:1.4rem; background:var(--tg-line); }
.tg-summary__muted { color:var(--tg-muted); font-weight:500; }
.tg-summary__modify { margin-left:auto; }

/* Date strip — taller, cleaner, overlapping the hero; inset from the edges */
.tg-datestrip { display:flex; align-items:stretch; background:#efeaf6; border-radius:14px; overflow:hidden; width:calc(100% - 3rem); max-width:80rem; margin:-2.2rem auto 0; box-shadow:var(--tg-shadow); position:relative; z-index:2; }
#ds-cells { flex:1; overflow:hidden; position:relative; }
#ds-track { display:flex; will-change:transform; }
#ds-track .tg-datecell { flex:1 1 0; min-width:0; }   /* settled: 7 cells fill the frame */
.tg-datestrip__nav { width:2.8rem; flex:none; display:flex; align-items:center; justify-content:center; background:transparent; border:0; color:var(--tg-muted); cursor:pointer; }
.tg-datestrip__nav:hover { color:var(--tg-purple); }
.tg-datecell { flex:1; text-align:center; padding:1.2rem .5rem; cursor:pointer; border-right:1px solid #e2dcee; transition:background .15s; }
.tg-datecell:last-child { border-right:0; }
.tg-datecell:hover:not(.is-na):not(.is-active) { background:#e7e0f2; }
.tg-datecell__dow { font-size:.9rem; font-weight:600; color:var(--tg-ink); }
.tg-datecell__fare { font-size:.9rem; color:#157347; font-weight:600; margin-top:.35rem; }
.tg-datecell.is-active { background:#fff; box-shadow:0 -3px 0 var(--tg-purple-2) inset; }
.tg-datecell.is-na { cursor:default; }
.tg-datecell.is-na .tg-datecell__fare { color:var(--tg-muted-2); font-weight:500; }

/* Results toolbar */
.tg-rtoolbar { display:flex; align-items:center; gap:1.5rem; max-width:80rem; margin:0 auto; padding:1.5rem; flex-wrap:wrap; }
.tg-rtoolbar__found { font-weight:600; }
.tg-rtoolbar__link { display:inline-flex; align-items:center; gap:.4rem; color:var(--tg-purple); font-weight:600; cursor:pointer; }
.tg-rtoolbar__spacer { margin-left:auto; }
.tg-rselect { position:relative; }
.tg-rselect__btn { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--tg-line); background:#fff; border-radius:10px; padding:.55rem .9rem; font-weight:600; color:var(--tg-ink); cursor:pointer; }
.tg-menu { position:absolute; right:0; top:calc(100% + .4rem); background:#fff; border:1px solid var(--tg-line); border-radius:12px; box-shadow:var(--tg-shadow); padding:.4rem; min-width:220px; display:none; z-index:30; }
.tg-menu.is-open { display:block; }
.tg-menu__item { display:flex; align-items:center; justify-content:space-between; padding:.6rem .7rem; border-radius:8px; cursor:pointer; }
.tg-menu__item:hover { background:#f5f2fb; }
.tg-menu__item.is-active { color:var(--tg-purple); font-weight:600; }

/* Flight result card (TG.com style) */
.tg-fcard { max-width:80rem; margin:0 auto 1rem; background:#fff; border:1px solid var(--tg-line); border-radius:14px; box-shadow:var(--tg-shadow-sm); overflow:hidden; }
.tg-fcard__row { display:grid; grid-template-columns:1fr auto; gap:1rem; padding:1.25rem 1.5rem; align-items:center; }
.tg-fcard__opby { border-top:1px solid var(--tg-line); background:#faf9fc; padding:.55rem 1.5rem; font-size:.78rem; color:var(--tg-muted); display:flex; align-items:center; gap:.4rem; }
.tg-fcard__opby b { color:var(--tg-ink); font-weight:700; }
@media (max-width:860px){ .tg-fcard__row{ grid-template-columns:1fr; } }
.tg-fcard__no { display:flex; align-items:center; gap:.5rem; font-weight:600; margin-bottom:.75rem; }
.tg-fcard__no img { height:1.3rem; }
.tg-fcard__leg { display:grid; grid-template-columns:1fr 1.4fr 1fr; align-items:center; gap:1rem; }
@media (max-width:640px){ .tg-fcard__leg{ grid-template-columns:1fr; text-align:left; } }
.tg-fcard__time { font-size:1.5rem; font-weight:700; }
.tg-fcard__date { font-size:.8rem; color:var(--tg-muted); }
.tg-fcard__iata { font-weight:700; margin-top:.35rem; }
.tg-fcard__city { font-size:.8rem; color:var(--tg-muted); }
.tg-fcard__mid { text-align:center; }
.tg-fcard__dur { font-size:.8rem; color:var(--tg-muted); }
.tg-fcard__nonstop { display:inline-block; font-size:.75rem; background:#f0ebfa; color:var(--tg-purple); border-radius:999px; padding:.15rem .7rem; margin:.35rem 0; }
.tg-fcard__line { border-top:1px solid var(--tg-line); position:relative; }
.tg-fcard__details { color:var(--tg-purple); font-weight:600; font-size:.85rem; cursor:pointer; }

.tg-fcard__fares { display:flex; gap:.75rem; }
@media (max-width:640px){ .tg-fcard__fares{ flex-wrap:wrap; } }
.tg-farebox { position:relative; width:170px; border:1px solid var(--tg-line); border-radius:12px; padding:.9rem 1rem; cursor:pointer; transition:box-shadow .15s, border-color .15s; }
.tg-farebox:hover { border-color:var(--tg-purple-2); box-shadow:0 0 0 3px rgba(104,75,155,.1); }
.tg-farebox.is-selected.tg-farebox--eco  { background:linear-gradient(160deg,#d1008a,#a3006e); color:#fff; border-color:transparent; }
.tg-farebox.is-selected.tg-farebox--silk { background:linear-gradient(160deg,#5a3a86,#3a2360); color:#fff; border-color:transparent; }
.tg-farebox__cabin { font-size:.85rem; opacity:.95; }
.tg-farebox__price { font-size:1.15rem; font-weight:700; margin-top:.15rem; }
.tg-farebox__co2 { display:flex; align-items:center; gap:.35rem; font-size:.72rem; margin-top:.5rem; opacity:.9; }
.tg-farebox__na { color:var(--tg-muted); }
.tg-farebox__leaf { position:absolute; right:0; bottom:0; width:0; height:0; border-style:solid; border-width:0 0 20px 20px; border-color:transparent transparent #34a853 transparent; border-bottom-right-radius:12px; }
.tg-farebox__seats { position:absolute; top:-.7rem; right:.6rem; background:var(--tg-gold); color:#4a3a0b; font-size:.66rem; font-weight:700; padding:.15rem .45rem; border-radius:6px; }

/* Fare family expansion */
.tg-family { border-top:1px solid var(--tg-line); background:#faf9fc; padding:1.5rem; display:none; }
.tg-family.is-open { display:block; }
.tg-family__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:56rem; margin-left:auto; }
@media (max-width:820px){ .tg-family__grid{ grid-template-columns:1fr; } }
.tg-ff { background:#fff; border:1px solid var(--tg-line); border-radius:14px; overflow:hidden; position:relative; }
.tg-ff.is-popular { border-color:#c6007e; }
.tg-ff__tag { background:#c6007e; color:#fff; text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.05em; padding:.35rem; }
.tg-ff__body { padding:1.25rem; }
.tg-ff__name { font-weight:700; font-size:1.05rem; }
.tg-ff__cabin { font-size:.8rem; color:var(--tg-muted); }
.tg-ff__price { font-size:1.35rem; font-weight:700; margin:.6rem 0; }
.tg-ff__list { list-style:none; margin:1rem 0 0; padding:0; font-size:.82rem; color:var(--tg-ink); }
.tg-ff__list li { display:flex; align-items:center; gap:.5rem; padding:.35rem 0; }
.tg-ff__list svg { width:1rem; height:1rem; color:var(--tg-purple); flex:none; }
.tg-ff__more { color:var(--tg-purple); font-weight:600; font-size:.82rem; margin-top:.8rem; display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; }

/* Filters modal */
.tg-filter-grp { margin-bottom:1.5rem; }
.tg-filter-grp__h { font-weight:700; margin-bottom:.75rem; }
.tg-chipset { display:flex; gap:.75rem; flex-wrap:wrap; }
.tg-chip { border:1px solid var(--tg-line); border-radius:12px; padding:.7rem 1rem; cursor:pointer; font-weight:600; display:flex; align-items:center; gap:.5rem; }
.tg-chip small { color:var(--tg-muted); font-weight:500; display:block; }
.tg-chip.is-on { border-color:var(--tg-purple-2); box-shadow:0 0 0 3px rgba(104,75,155,.1); }

/* Details modal timeline */
.tg-tl { display:flex; gap:1rem; }
.tg-tl__spine { width:2px; background:var(--tg-purple-2); margin:.4rem .3rem; position:relative; }
.tg-tl__dot { width:.7rem; height:.7rem; border-radius:50%; background:var(--tg-purple-2); position:absolute; left:-.3rem; }
.tg-modal__box--lg { width:min(880px,94vw); max-height:88vh; overflow:auto; }
.tg-modal__tabs { display:flex; flex-direction:column; gap:.25rem; }
.tg-modal__tab { text-align:left; padding:.7rem 1rem; border-radius:10px; cursor:pointer; color:var(--tg-muted); font-weight:600; }
.tg-modal__tab.is-active { background:#f0ebfa; color:var(--tg-purple); }

/* Aircraft information */
.tg-spec { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem 1.5rem; margin-top:1rem; }
.tg-spec__row { display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--tg-line); font-size:.9rem; }
.tg-spec__row span:first-child { color:var(--tg-muted); }
.tg-spec__row span:last-child { font-weight:600; }
.tg-acbanner { height:120px; border-radius:12px; background:linear-gradient(120deg,#3a2360,#6a4aa0 70%,#b9a4dd); color:#fff; display:flex; align-items:flex-end; padding:1rem 1.25rem; font-weight:700; font-size:1.15rem; }

/* In-flight entertainment */
.tg-ife { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
@media (max-width:640px){ .tg-ife{ grid-template-columns:repeat(2,1fr); } }
.tg-ife__item { border-radius:12px; overflow:hidden; border:1px solid var(--tg-line); background:#fff; }
.tg-ife__poster { height:110px; display:flex; align-items:flex-end; padding:.5rem; color:#fff; font-weight:600; font-size:.8rem; text-shadow:0 1px 3px rgba(0,0,0,.4); position:relative; }
.tg-ife__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2.2rem; height:2.2rem; border-radius:50%; background:rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; }
.tg-ife__play svg { color:var(--tg-purple); margin-left:2px; }
.tg-ife__meta { padding:.6rem .75rem; }
.tg-ife__title { font-weight:600; font-size:.9rem; }
.tg-ife__sub { color:var(--tg-muted); font-size:.75rem; }
.tg-ife__cats { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.tg-ife__cat { border:1px solid var(--tg-line); border-radius:999px; padding:.35rem .9rem; font-size:.82rem; font-weight:600; color:var(--tg-purple); cursor:pointer; }
.tg-ife__cat.is-on { background:#f0ebfa; }

/* Royal First (gold) cabin */
.tg-farebox.is-selected.tg-farebox--first { background:linear-gradient(160deg,#caa53c,#9c7b1e); color:#fff; border-color:transparent; }
.tg-fare--first { background:linear-gradient(160deg,#caa53c,#9c7b1e); }

/* Fare-family cabin theming + perks */
.tg-ff--silk.is-popular, .tg-family--silk .tg-ff.is-popular { border-color:#5a3a86; }
.tg-family--silk .tg-ff__tag { background:#4b2e83; }
.tg-family--first .tg-ff.is-popular { border-color:#9c7b1e; }
.tg-family--first .tg-ff__tag { background:#9c7b1e; }
.tg-ff__seats { float:right; font-size:.75rem; font-weight:600; color:#8a6413; }
.tg-ff__perks { display:flex; gap:1rem; border-top:1px solid var(--tg-line); margin-top:1rem; padding-top:.9rem; }
.tg-ff__perk { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--tg-ink); }
.tg-ff__perk svg { width:1.5rem; height:1.5rem; color:var(--tg-purple); flex:none; }

/* Fare-modal header colour by cabin */
.tg-faremodal-head--eco   { background:linear-gradient(120deg,#c6007e,#a3006e); }
.tg-faremodal-head--silk  { background:linear-gradient(120deg,#5a3a86,#3a2360); }
.tg-faremodal-head--first { background:linear-gradient(120deg,#caa53c,#9c7b1e); }

/* Fare Calendar matrix modal */
.tg-fcmatrix { overflow:auto; max-height:70vh; }
.tg-fcgrid { border-collapse:collapse; width:100%; min-width:640px; }
.tg-fcgrid th, .tg-fcgrid td { border:1px solid var(--tg-line); text-align:center; padding:.7rem .5rem; font-size:.85rem; }
.tg-fcgrid thead th { background:#f4f2f8; position:sticky; top:0; z-index:1; }
.tg-fcgrid__corner { background:#fff !important; border:0 !important; }
.tg-fcgrid td.tg-fc-fare { color:#157347; font-weight:600; cursor:pointer; }
.tg-fcgrid td.tg-fc-empty { background:#fafafa; }
.tg-fcgrid th.tg-fc-rowhead { background:#f4f2f8; font-weight:600; white-space:nowrap; }
.tg-fcgrid .hl-col { background:#f5f0fb; }
.tg-fcgrid .hl-row { background:#f5f0fb; }
.tg-fcgrid th.hl-head { background:#4b2e83; color:#fff; }
.tg-fcgrid td.tg-fc-fare:hover { outline:2px solid var(--tg-purple-2); outline-offset:-2px; }
.tg-fc__axis-x { text-align:center; font-weight:700; padding:.5rem 0; }
.tg-fc__axis-y { writing-mode:vertical-rl; transform:rotate(180deg); font-weight:600; color:var(--tg-muted); }

/* Upsell popup */
.tg-upsell { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.tg-upsell:has(.tg-upsell__col:only-child){ grid-template-columns:1fr; max-width:22rem; margin:0 auto; }
@media (max-width:640px){ .tg-upsell{ grid-template-columns:1fr; } }
.tg-upsell__col { border:1px solid var(--tg-line); border-radius:14px; padding:1rem; }
.tg-upsell__seat { background:#efeaf6; border-radius:10px; margin-bottom:1rem; }
.tg-upsell__seat svg { width:100%; height:auto; display:block; border-radius:10px; }
.tg-upsell__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.25rem; }
.tg-upsell__name { font-weight:700; font-size:1.05rem; color:var(--tg-ink); }
.tg-upsell__price { font-weight:700; color:var(--tg-ink); white-space:nowrap; }
.tg-upsell .tg-ff__list { margin:.75rem 0 1rem; }
.tg-upsell__btn { margin-top:.25rem; }

/* Fare-basis code chip + gamepass lock badge */
.tg-ff__code { display:inline-block; font-size:.62rem; font-weight:700; color:var(--tg-purple); background:#f0ebfa; border-radius:5px; padding:.08rem .35rem; vertical-align:middle; margin-left:.15rem; }
.tg-ff__lock { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600; color:#8a6413; background:#fbf3dd; border:1px solid #ebd9a6; border-radius:7px; padding:.25rem .5rem; margin-bottom:.6rem; }