/* ==========================================================================
   Thai Airways Roblox — Design System (tg-theme)
   Loads alongside Tailwind CDN. Brand colours are taken from the existing
   site (header, login/consent buttons, announcement bar). No emoji anywhere;
   all iconography is inline SVG at the markup level.
   ========================================================================== */

:root {
  /* Core brand */
  --tg-ink:        rgb(44, 48, 89);   /* primary text / navy-purple      */
  --tg-purple:     #3d1a6f;           /* header / footer solid purple    */
  --tg-purple-2:   #684b9b;           /* gradient start (buttons)        */
  --tg-purple-deep:#381b6b;           /* gradient end (buttons)          */
  --tg-rule:       #704ea9;           /* thin purple rule                */
  --tg-lilac:      #cfb3ff;           /* announcement bar highlight      */
  --tg-gold:       #bfa252;           /* accent / active underline       */
  --tg-magenta:    #c6007e;           /* logo accent (sparingly)         */

  /* Neutrals */
  --tg-bg:         #f7f6fa;
  --tg-surface:    #ffffff;
  --tg-line:       #e7e3ef;
  --tg-muted:      #6b7280;
  --tg-muted-2:    #9aa1ac;

  /* Cabin classes */
  --tg-first:      #6d28d9;
  --tg-business:   #b4832b;
  --tg-economy:    #3d1a6f;

  /* Radii / shadows */
  --tg-radius:     14px;
  --tg-radius-sm:  10px;
  --tg-shadow:     0 12px 20px rgba(16, 24, 40, .10);
  --tg-shadow-sm:  0 2px 8px rgba(16, 24, 40, .06);

  --tg-font:       'Inter', 'Kanit', system-ui, sans-serif;   /* Inter for latin, Kanit for Thai */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
.tg { font-family: var(--tg-font); color: var(--tg-ink); }
.tg-bg { background: var(--tg-bg); }

.tg-h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
.tg-h2 { font-size: 1.25rem; font-weight: 600; }
.tg-eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tg-rule);
}
.tg-muted { color: var(--tg-muted); }

/* --------------------------------------------------------------------------
   Buttons  (primary = the purple gradient pill used on the consent/login CTA)
   -------------------------------------------------------------------------- */
.tg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--tg-font); font-weight: 600; font-size: .95rem; line-height: 1;
  padding: .8rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: opacity .2s, transform .06s, box-shadow .2s, background .2s;
  text-decoration: none; white-space: nowrap;
}
.tg-btn:active { transform: translateY(1px); }
.tg-btn svg { width: 1.1em; height: 1.1em; }

.tg-btn--primary {
  color: #fff;
  background: linear-gradient(90deg, var(--tg-purple-2), var(--tg-purple-deep));
  box-shadow: var(--tg-shadow-sm);
}
.tg-btn--primary:hover { opacity: .92; }

.tg-btn--gold { color: var(--tg-ink); background: var(--tg-gold); }
.tg-btn--gold:hover { opacity: .92; }

.tg-btn--lilac { color: rgb(104,75,155); background: rgb(245,239,255); }
.tg-btn--lilac:hover { background: rgb(236,226,251); }

.tg-btn--outline {
  color: var(--tg-purple); background: #fff; border-color: var(--tg-rule);
}
.tg-btn--outline:hover { background: #faf8ff; }

.tg-btn--ghost { color: var(--tg-purple); background: transparent; }
.tg-btn--ghost:hover { background: #f3effb; }

.tg-btn--sm { padding: .5rem 1rem; font-size: .85rem; }
.tg-btn--block { width: 100%; }
.tg-btn:disabled, .tg-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.tg-card {
  background: var(--tg-surface); border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius); box-shadow: var(--tg-shadow-sm);
}
.tg-card--pad { padding: 1.25rem 1.5rem; }
.tg-card--hover { transition: box-shadow .2s, transform .12s; }
.tg-card--hover:hover { box-shadow: var(--tg-shadow); transform: translateY(-2px); }

.tg-divider { height: 1px; background: var(--tg-line); border: 0; }

/* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */
.tg-field { display: flex; flex-direction: column; gap: .35rem; }
.tg-label { font-size: .8rem; font-weight: 600; color: var(--tg-ink); }
.tg-input, .tg-select {
  font-family: var(--tg-font); font-size: .95rem; color: var(--tg-ink);
  background: #fff; border: 1px solid var(--tg-line); border-radius: var(--tg-radius-sm);
  padding: .7rem .9rem; width: 100%; transition: border-color .15s, box-shadow .15s;
}
.tg-input:focus, .tg-select:focus {
  outline: none; border-color: var(--tg-purple-2);
  box-shadow: 0 0 0 3px rgba(104, 75, 155, .15);
}

/* Custom select (built by Src/tg-select.js from any select.tg-select) */
.tg-cselect { position: relative; }
.tg-cselect__btn {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%;
  font-family: var(--tg-font); font-size: .95rem; color: var(--tg-ink); background: #fff;
  border: 1px solid var(--tg-line); border-radius: var(--tg-radius-sm); padding: .7rem .9rem;
  cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s;
}
.tg-cselect.is-open .tg-cselect__btn { border-color: var(--tg-purple-2); box-shadow: 0 0 0 3px rgba(104,75,155,.15); }
.tg-cselect__chev { color: var(--tg-muted); transition: transform .15s; flex: none; }
.tg-cselect.is-open .tg-cselect__chev { transform: rotate(180deg); }
.tg-cselect__val.is-placeholder { color: var(--tg-muted-2); }
.tg-cselect__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + .35rem); background: #fff;
  border: 1px solid var(--tg-line); border-radius: var(--tg-radius-sm); box-shadow: var(--tg-shadow);
  padding: .35rem; z-index: 45; display: none; max-height: 16rem; overflow: auto;
}
.tg-cselect__menu.is-open { display: block; }
.tg-cselect__opt { padding: .6rem .7rem; border-radius: 8px; cursor: pointer; font-size: .92rem; }
.tg-cselect__opt:hover { background: #f5f2fb; }
.tg-cselect__opt.is-active { background: #f0ebfa; color: var(--tg-purple); font-weight: 600; }

/* --------------------------------------------------------------------------
   Badges & chips
   -------------------------------------------------------------------------- */
.tg-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .28rem .6rem; border-radius: 999px;
  background: #f0ebfa; color: var(--tg-purple);
}
.tg-badge--codeshare { background: #fff5df; color: #8a6413; border: 1px solid #eBD9a6; }
.tg-badge--gold      { background: #fbf3dd; color: #8a6413; }
.tg-badge--live      { background: #e7f7ee; color: #157347; }
.tg-badge svg { width: .9em; height: .9em; }

/* Loyalty tiers */
.tg-tier { display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; }
.tg-tier--member   { background: #eef0f6; color: #444b6e; }
.tg-tier--silver   { background: #e9edf2; color: #5b6b7b; }
.tg-tier--gold     { background: #fbf1d6; color: #8a6413; }
.tg-tier--platinum { background: #ece9f6; color: #4b3b8a; }

/* --------------------------------------------------------------------------
   Miles figure
   -------------------------------------------------------------------------- */
.tg-miles { font-weight: 700; color: var(--tg-purple); }
.tg-miles__unit { font-size: .72em; font-weight: 600; color: var(--tg-muted); margin-left: .15em; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.tg-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tg-table th {
  text-align: left; font-weight: 600; color: var(--tg-muted);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .6rem .75rem; border-bottom: 1px solid var(--tg-line);
}
.tg-table td { padding: .7rem .75rem; border-bottom: 1px solid var(--tg-line); }
.tg-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Seat map
   -------------------------------------------------------------------------- */
.tg-seatmap { display: inline-flex; flex-direction: column; gap: .35rem; }
.tg-seatrow { display: flex; align-items: center; gap: .35rem; }
.tg-seatrow__no { width: 1.6rem; font-size: .7rem; color: var(--tg-muted-2); text-align: right; }
.tg-aisle { width: 1.1rem; }

.tg-seat {
  width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 1.5px solid var(--tg-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 600; color: var(--tg-muted);
  background: #fff; cursor: pointer; transition: transform .08s, border-color .15s, background .15s;
  user-select: none;
}
.tg-seat:hover:not(.is-booked):not(.is-blocked) { transform: translateY(-1px); border-color: var(--tg-purple-2); }
.tg-seat.is-open      { border-color: #cfc6e6; color: var(--tg-purple); }
.tg-seat.is-held      { background: #fff7e6; border-color: #e6c565; color: #8a6413; cursor: default; }
.tg-seat.is-booked    { background: #ece9f1; border-color: #d7d2e3; color: var(--tg-muted-2); cursor: not-allowed; }
.tg-seat.is-blocked   { background: repeating-linear-gradient(45deg,#f1f0f5,#f1f0f5 4px,#e7e5ee 4px,#e7e5ee 8px);
                        border-color: #ddd9e8; color: transparent; cursor: not-allowed; }
.tg-seat.is-selected  { background: linear-gradient(90deg,var(--tg-purple-2),var(--tg-purple-deep));
                        border-color: var(--tg-purple-deep); color: #fff; transform: translateY(-1px); }
.tg-seat--first    { box-shadow: inset 0 0 0 2px rgba(109,40,217,.12); }
.tg-seat--business { box-shadow: inset 0 0 0 2px rgba(180,131,43,.14); }

/* Seat-map legend */
.tg-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: var(--tg-muted); }
.tg-legend__item { display: inline-flex; align-items: center; gap: .4rem; }
.tg-legend__swatch { width: 1rem; height: 1rem; border-radius: 5px; border: 1.5px solid var(--tg-line); }

/* --------------------------------------------------------------------------
   Cabin pill
   -------------------------------------------------------------------------- */
.tg-cabin { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.8rem; }
.tg-cabin__dot { width:.6rem; height:.6rem; border-radius:50%; }
.tg-cabin--first .tg-cabin__dot    { background: var(--tg-first); }
.tg-cabin--business .tg-cabin__dot { background: var(--tg-business); }
.tg-cabin--economy .tg-cabin__dot  { background: var(--tg-economy); }

/* --- TG-style alert / notice (matches thaiairways.com error boxes) --- */
.tg-alert{display:flex;gap:.7rem;align-items:flex-start;border:1px solid #e59db9;background:#fdf0f5;border-radius:10px;padding:.9rem 1.1rem;color:#3a2b3f;font-size:.88rem;line-height:1.55;}
.tg-alert__ic{flex:none;width:20px;height:20px;color:#c6007e;margin-top:1px;}
.tg-alert b{color:#1c1c22;}
.tg-alert--info{border-color:#cdbce6;background:#f5f1fb;}
.tg-alert--info .tg-alert__ic{color:#6a4aa0;}
.tg-alert--warn{border-color:#e6c565;background:#fff7e6;}
.tg-alert--warn .tg-alert__ic{color:#c98a00;}
.tg-alert--ok{border-color:#9bd4b0;background:#f0faf4;}
.tg-alert--ok .tg-alert__ic{color:#157347;}