/* ==========================================================================
   Thai Airways Roblox — Booking widget, results & footer
   Modeled on thaiairways.com. Loads after tg-theme.css. No emoji; inline SVG.
   ========================================================================== */

/* ---- Booking widget shell ---- */
.tg-book { background:#fff; border-radius:16px; box-shadow:var(--tg-shadow); position:relative; color:var(--tg-ink); }
.tg-pop { color:var(--tg-ink); }
.tg-modal__box { color:var(--tg-ink); }
.tg-book__tabs { display:flex; }
.tg-book__tab {
  flex:1; text-align:center; padding:1rem 1.25rem; font-weight:600; font-size:.95rem;
  color:var(--tg-muted); background:#eceaf2; cursor:pointer; border:0;
}
.tg-book__tab:first-child { border-top-left-radius:16px; }
.tg-book__tab:last-child  { border-top-right-radius:16px; }
.tg-book__tab.is-active { color:var(--tg-ink); background:#fff; }
.tg-book__body { padding:1.5rem; }

.tg-trip { display:flex; gap:1.75rem; margin-bottom:1rem; }
.tg-trip__item { font-weight:600; color:var(--tg-muted); cursor:pointer; padding-bottom:.4rem; border-bottom:2px solid transparent; background:none; border-top:0;border-left:0;border-right:0; }
.tg-trip__item.is-active { color:var(--tg-purple); border-color:var(--tg-purple-2); }
.tg-trip__item.is-disabled { color:var(--tg-muted-2, #b7b3c2); cursor:not-allowed; opacity:.6; }
.tg-trip__soon { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:#efeaf7; color:#8a7ab5; border-radius:99px; padding:.05rem .4rem; margin-left:.25rem; vertical-align:middle; }

.tg-book__actions { display:flex; align-items:center; gap:1.5rem; }
.tg-linkbtn { display:inline-flex; align-items:center; gap:.4rem; color:var(--tg-purple); font-weight:600; font-size:.9rem; background:none; border:0; cursor:pointer; }
.tg-linkbtn svg { width:1.05em; height:1.05em; }
.tg-topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* Toggle switch */
.tg-switch { position:relative; display:inline-block; width:42px; height:24px; }
.tg-switch input { opacity:0; width:0; height:0; }
.tg-switch__slider { position:absolute; inset:0; background:#d7d3e2; border-radius:999px; transition:.2s; cursor:pointer; }
.tg-switch__slider::before { content:''; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.tg-switch input:checked + .tg-switch__slider { background:var(--tg-purple-2); }
.tg-switch input:checked + .tg-switch__slider::before { transform:translateX(18px); }

/* O/D + dates row */
.tg-book__row { display:grid; grid-template-columns:1.5fr .9fr; gap:1rem; align-items:start; margin-top:1rem; }
@media (max-width:900px){ .tg-book__row{ grid-template-columns:1fr; } }

.tg-od { display:grid; grid-template-columns:1fr auto 1fr; border:1px solid var(--tg-line); border-radius:12px; background:#fff; }
.tg-od__field { padding:.6rem 1rem; position:relative; }
.tg-od__label { font-size:.7rem; color:var(--tg-muted); }
.tg-od__value { display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:1.05rem; min-height:1.7rem; }
.tg-od__value input { border:0; outline:none; font:inherit; color:var(--tg-ink); width:100%; background:transparent; }
.tg-od__code { font-size:.66rem; font-weight:700; color:var(--tg-purple); background:#f0ebfa; padding:.16rem .45rem; border-radius:6px; letter-spacing:.03em; }
.tg-od__clear { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); color:var(--tg-muted-2); cursor:pointer; background:none; border:0; }
.tg-od__swap { align-self:center; width:2.2rem; height:2.2rem; border-radius:9px; border:1px solid var(--tg-line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.tg-od__swap svg { width:1.05rem; height:1.05rem; color:var(--tg-purple); }

.tg-dates { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--tg-line); border-radius:12px; cursor:pointer; }
.tg-dates__field { padding:.6rem 1rem; position:relative; }
.tg-dates__field + .tg-dates__field { border-left:1px solid var(--tg-line); }
.tg-dates__label { font-size:.7rem; color:var(--tg-muted); }
.tg-dates__value { font-weight:600; min-height:1.7rem; display:flex; align-items:center; color:var(--tg-ink); }
.tg-dates__value.is-empty { color:var(--tg-muted-2); }
.tg-dates__cal { position:absolute; right:.7rem; top:50%; transform:translateY(-50%); color:var(--tg-muted); }

.tg-paxbtn { text-align:left; border:1px solid var(--tg-line); border-radius:12px; padding:.6rem 1rem; background:#fff; width:100%; cursor:pointer; position:relative; margin-top:1rem; }
.tg-paxbtn__label { font-size:.7rem; color:var(--tg-muted); }
.tg-paxbtn__value { font-weight:600; }
.tg-paxbtn__chev { position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--tg-muted); }

.tg-book__foot { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-top:1rem; }

/* ---- Popovers ---- */
.tg-pop { position:absolute; z-index:40; background:#fff; border:1px solid var(--tg-line); border-radius:14px; box-shadow:var(--tg-shadow); padding:1rem; margin-top:.4rem; display:none; }
.tg-pop.is-open { display:block; }

.tg-ac { width:min(560px,90vw); max-height:340px; overflow:auto; }
.tg-ac__head { font-weight:700; color:var(--tg-ink); margin:.2rem .3rem .6rem; }
.tg-ac__item { display:flex; align-items:center; gap:.8rem; padding:.55rem .5rem; border-radius:10px; cursor:pointer; }
.tg-ac__item:hover { background:#f5f2fb; }
.tg-ac__code { font-size:.7rem; font-weight:700; color:var(--tg-purple); background:#f0ebfa; padding:.28rem .5rem; border-radius:7px; min-width:2.7rem; text-align:center; }
.tg-ac__city { font-weight:600; display:flex; align-items:center; gap:.45rem; }
.tg-ac__airport { font-size:.8rem; color:var(--tg-muted); }
.tg-ac__tail { height:1.15rem; width:auto; }

.tg-paxpop { width:min(620px,92vw); }
.tg-paxpop__grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:640px){ .tg-paxpop__grid{ grid-template-columns:1fr; } }
.tg-classopt { display:flex; align-items:center; gap:.7rem; border:1.5px solid var(--tg-line); border-radius:12px; padding:.9rem 1rem; cursor:pointer; margin-bottom:.75rem; font-weight:600; }
.tg-classopt.is-active { border-color:var(--tg-purple-2); box-shadow:0 0 0 3px rgba(104,75,155,.1); }
.tg-radio { width:1.15rem; height:1.15rem; border-radius:50%; border:2px solid #c9c2de; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.tg-classopt.is-active .tg-radio { border-color:var(--tg-purple-2); }
.tg-classopt.is-active .tg-radio::after { content:''; width:.6rem; height:.6rem; border-radius:50%; background:var(--tg-purple-2); }
.tg-stepper { display:flex; align-items:center; justify-content:space-between; padding:.55rem 0; }
.tg-stepper__meta small { color:var(--tg-muted); display:block; }
.tg-step { display:flex; align-items:center; gap:1rem; }
.tg-step__btn { width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--tg-purple-2); background:#faf8ff; color:var(--tg-purple); font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.tg-step__btn:disabled { opacity:.4; cursor:not-allowed; }
.tg-step__num { min-width:1.5rem; text-align:center; font-weight:700; }

/* Datepicker */
.tg-dp { width:min(760px,94vw); }
.tg-dp__months { display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; }
@media (max-width:720px){ .tg-dp__months{ grid-template-columns:1fr; } }
.tg-dp__head { display:flex; align-items:center; justify-content:space-between; font-weight:700; margin-bottom:.6rem; }
.tg-dp__nav { background:none; border:0; color:var(--tg-muted); cursor:pointer; padding:.2rem .4rem; font-size:1rem; }
.tg-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.tg-cal__dow { text-align:center; font-size:.7rem; color:var(--tg-muted); padding:.35rem 0; }
.tg-day { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border-radius:9px; cursor:pointer; font-weight:600; font-size:.9rem; min-height:2.7rem; }
.tg-day:hover:not(.is-disabled):not(.is-empty) { background:#f3effb; }
.tg-day.is-empty { cursor:default; }
.tg-day.is-disabled { color:var(--tg-muted-2); cursor:default; }
.tg-day.is-selected { background:#e7dcfa; color:var(--tg-purple); }
.tg-day.is-today { box-shadow:inset 0 0 0 2px var(--tg-purple-2); color:var(--tg-purple); }
.tg-day.is-today.is-selected { box-shadow:inset 0 0 0 2px var(--tg-purple-deep); }
.tg-day__fare { font-size:.58rem; font-weight:600; color:var(--tg-magenta); }
.tg-day.is-disabled .tg-day__fare { color:var(--tg-muted-2); }
.tg-dp__foot { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--tg-line); }
.tg-dp__legend { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--tg-muted); }
.tg-dp__legend::before { content:''; width:.6rem; height:.6rem; border-radius:50%; background:var(--tg-magenta); }

/* Modal */
.tg-modal { position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.4); }
.tg-modal.is-open { display:flex; }
.tg-modal__box { background:#fff; border-radius:16px; width:min(620px,92vw); padding:1.75rem; box-shadow:var(--tg-shadow); }
.tg-modal__close { float:right; background:none; border:0; color:var(--tg-muted); cursor:pointer; }

/* ==========================================================================
   Flight results — codeshare "operated by" itinerary + fare columns
   ========================================================================== */
.tg-result { display:grid; grid-template-columns:1fr auto; border-radius:14px; box-shadow:var(--tg-shadow-sm); overflow:hidden; margin-bottom:1rem; border:1px solid var(--tg-line); background:#fff; }
@media (max-width:820px){ .tg-result{ grid-template-columns:1fr; } }
.tg-result__main { display:grid; grid-template-columns:1.1fr 1.3fr; gap:1.5rem; padding:1.5rem; }
@media (max-width:640px){ .tg-result__main{ grid-template-columns:1fr; } }

.tg-itin { display:flex; align-items:flex-start; gap:1rem; }
.tg-itin__time { font-size:1.6rem; font-weight:700; line-height:1; }
.tg-itin__air { font-size:.8rem; color:var(--tg-muted); margin-top:.2rem; max-width:8rem; }
.tg-itin__mid { flex:1; text-align:center; padding-top:.4rem; }
.tg-itin__line { position:relative; border-top:1px dashed #c9c2de; margin:.6rem 0 .3rem; }
.tg-itin__stops { font-size:.75rem; color:var(--tg-muted); }
.tg-itin__plus { font-size:.7rem; color:var(--tg-magenta); font-weight:600; }

.tg-seg { font-size:.85rem; color:var(--tg-ink); }
.tg-seg__row { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.tg-seg__op { color:var(--tg-purple); font-weight:600; }
.tg-seg__tail { height:1.1rem; }
.tg-seg__dur { display:flex; align-items:center; gap:.4rem; color:var(--tg-muted); font-size:.82rem; margin-bottom:.5rem; }
.tg-seg__details { display:inline-flex; align-items:center; gap:.35rem; color:var(--tg-purple); font-weight:600; font-size:.85rem; cursor:pointer; }

/* Fare columns */
.tg-fares { display:flex; }
.tg-fare { position:relative; width:150px; padding:1.5rem 1rem 1.25rem; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; }
@media (max-width:640px){ .tg-fare{ width:50%; } .tg-fares{ width:100%; } }
.tg-fare--economy { background:linear-gradient(160deg,#d1008a,#a3006e); }
.tg-fare--business { background:linear-gradient(160deg,#5a3a86,#3a2360); }
.tg-fare--na { background:#d9d7de; color:var(--tg-muted); }
.tg-fare__cabin { font-weight:700; font-size:1rem; }
.tg-fare__from { font-size:.72rem; opacity:.85; }
.tg-fare__price { font-size:1.5rem; font-weight:700; }
.tg-fare__chev { margin-top:.3rem; opacity:.9; }
.tg-fare__na { display:inline-flex; align-items:center; gap:.35rem; background:#8b8794; color:#fff; padding:.3rem .6rem; border-radius:7px; font-size:.8rem; }
.tg-seatsleft { position:absolute; top:-.7rem; left:50%; transform:translateX(-50%); background:var(--tg-gold); color:#4a3a0b; font-size:.68rem; font-weight:700; padding:.2rem .5rem; border-radius:6px; white-space:nowrap; }

/* ==========================================================================
   Rich footer (thaiairways.com style, adapted, no emoji)
   ========================================================================== */
.tg-footer { background:var(--tg-purple); color:#fff; }
.tg-footer__inner { max-width:80rem; margin:0 auto; padding:3rem 1.5rem 1.5rem; }
.tg-footer__cols { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
@media (max-width:900px){ .tg-footer__cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tg-footer__cols{ grid-template-columns:1fr; } }
.tg-footer__h { font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tg-lilac); font-weight:700; margin-bottom:1rem; }
.tg-footer__link { display:flex; align-items:center; gap:.4rem; color:#efeaf7; font-size:.9rem; padding:.3rem 0; text-decoration:none; }
.tg-footer__link:hover { text-decoration:underline; }
.tg-footer__link svg { width:.85rem; height:.85rem; opacity:.7; }
.tg-social { display:flex; gap:1rem; margin-top:.5rem; }
.tg-social a { width:2.1rem; height:2.1rem; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; }
.tg-social svg { width:1.2rem; height:1.2rem; }
.tg-footer__news { display:grid; grid-template-columns:1.2fr 1fr; gap:0; border-radius:16px; overflow:hidden; margin-top:2.5rem; }
@media (max-width:820px){ .tg-footer__news{ grid-template-columns:1fr; } }
.tg-footer__news-l { background:linear-gradient(120deg,#c9a3d6,#e7c7dd); padding:2rem; }
.tg-footer__news-r { background:rgba(255,255,255,.12); padding:2rem; display:flex; flex-direction:column; gap:1rem; align-items:flex-start; justify-content:center; }
.tg-serif { font-family:'Bellefair','Kanit',Georgia,serif; letter-spacing:.01em; }
.tg-footer__bar { border-top:1px solid rgba(255,255,255,.15); margin-top:1.5rem; padding-top:1.25rem; font-size:.82rem; color:#d9cff0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ---- Recent searches (cookie history + destination photo) ---- */
.tg-recent { margin-top:1.5rem; position:relative; }
.tg-recent__head { font-weight:700; color:var(--tg-ink); margin-bottom:.75rem; }
.tg-recent__track { display:flex; gap:1rem; overflow-x:auto; scroll-behavior:smooth; padding-bottom:.25rem; }
.tg-recent__track::-webkit-scrollbar { height:6px; }
.tg-recent__track::-webkit-scrollbar-thumb { background:#d7d3e2; border-radius:6px; }
.tg-recent__card { position:relative; display:flex; align-items:stretch; gap:0; min-width:340px; background:#faf9fc; border:1px solid var(--tg-line); border-radius:12px; overflow:hidden; }
.tg-recent__photo { position:relative; width:120px; flex:none; display:flex; align-items:flex-end; }
.tg-recent__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tg-recent__city { position:relative; z-index:1; color:#fff; font-size:.72rem; font-weight:600; padding:.4rem .5rem; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.tg-recent__body { padding:.8rem 1rem; font-size:.85rem; }
.tg-recent__route { font-weight:700; display:flex; align-items:center; gap:.4rem; color:var(--tg-ink); }
.tg-recent__route svg { color:var(--tg-purple); }
.tg-recent__meta { color:var(--tg-muted); font-size:.78rem; margin-top:.15rem; }
.tg-recent__x { position:absolute; top:.5rem; right:.5rem; background:none; border:0; color:var(--tg-muted-2); cursor:pointer; }
.tg-recent__nav { position:absolute; right:0; top:0; display:flex; gap:.4rem; }
.tg-recent__nav button { width:2rem; height:2rem; border-radius:50%; border:1px solid var(--tg-line); background:#fff; color:var(--tg-purple); cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* ---- Product-tab forms (Manage / Check-in / Flight Status) ---- */
.tg-fform { display:grid; grid-template-columns:1fr 1fr auto; gap:1rem; align-items:end; }
@media (max-width:760px){ .tg-fform{ grid-template-columns:1fr; } }
.tg-hints { list-style:disc; margin:.75rem 0 0 1.1rem; color:var(--tg-muted); font-size:.82rem; line-height:1.7; }
.tg-svc { margin-top:1.75rem; }
.tg-svc__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:760px){ .tg-svc__grid{ grid-template-columns:1fr 1fr; } }
.tg-svc__card { display:flex; align-items:center; gap:.75rem; border:1px solid var(--tg-line); border-radius:12px; padding:1rem 1.1rem; font-weight:600; color:var(--tg-ink); cursor:pointer; }
.tg-svc__card:hover { border-color:var(--tg-purple-2); }
.tg-svc__card svg { width:1.6rem; height:1.6rem; color:var(--tg-purple); flex:none; }
.tg-note { margin-top:1.5rem; background:#faf9fc; border:1px solid var(--tg-line); border-radius:12px; padding:1rem 1.25rem; font-size:.85rem; }
.tg-note ul { list-style:disc; margin-left:1.1rem; color:var(--tg-muted); line-height:1.7; }
.tg-subtabs { display:flex; gap:1.75rem; margin-bottom:.75rem; }
.tg-subtab { font-weight:600; color:var(--tg-muted); background:none; border:0; border-bottom:2px solid transparent; padding-bottom:.35rem; cursor:pointer; }
.tg-subtab.is-active { color:var(--tg-purple); border-color:var(--tg-purple-2); }

/* ============ Mobile (<=640px) ============ */
@media (max-width:640px){
  .tg-book{ max-width:100%; }
  .tg-book__body{ padding:1.1rem 1rem; }

  /* Product tabs: horizontal-scroll instead of overflow */
  .tg-book__tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tg-book__tabs::-webkit-scrollbar{ display:none; }
  /* grow to fill when the labels fit; when they don't, grow does nothing and
     flex-shrink:0 lets them overflow so the row scrolls (no dead grey gap) */
  .tg-book__tab{ flex:1 0 auto; white-space:nowrap; padding:.85rem 1rem; font-size:.85rem; }

  /* Trip-type row: wrap, tighter */
  .tg-trip{ gap:1rem; flex-wrap:wrap; }

  /* Origin / destination: stack vertically, swap floats on divider */
  .tg-od{ position:relative; grid-template-columns:1fr; }
  .tg-od > .tg-od__field + .tg-od__swap + .tg-od__field{ border-top:1px solid var(--tg-line); }
  .tg-od__swap{ position:absolute; right:1rem; top:50%; transform:translateY(-50%) rotate(90deg); }

  /* Dates: stack, divider becomes horizontal */
  .tg-dates{ grid-template-columns:1fr; }
  .tg-dates__field + .tg-dates__field{ border-left:0; border-top:1px solid var(--tg-line); }

  /* Footer: pax + search button stack full-width */
  .tg-book__foot{ flex-direction:column; align-items:stretch; }
  .tg-book__foot .tg-btn, .tg-book__foot button[type="submit"]{ width:100%; }
}