/* ==========================================================================
   XPLOROO · Amazing Thailand with Xploroo Creators — page-only visual re-skin
   thailand-package.css — Colors/backgrounds only; layout, structure and
   interaction all come entirely from styles/package-details.css (the
   shared master template), which this file never touches or overrides.
   Scoped under `.pkg-page--thailand` (added only to this page's
   `.pkg-page` wrapper), so every other package page keeps its exact
   original look.

   Atmosphere — Pattaya beaches meet Bangkok nightlife: tropical teal/
   turquoise sea, warm temple gold, a touch of magenta neon for the
   Bangkok-after-dark mood, over a deep midnight backdrop. Sophisticated,
   not saturated — no cheap rainbow gradients.
   ========================================================================== */

.pkg-page--thailand {
  --txp-teal: #0d9488;
  --txp-teal-bright: #2dd4bf;
  --txp-gold: #f2b64b;
  --txp-magenta: #d6336c;
  --txp-navy: #071019;
  --txp-silver: #c7ccd9;
  --txp-silver-bright: #f5f7fb;
  --txp-gradient: linear-gradient(120deg, var(--txp-teal) 0%, var(--txp-teal-bright) 45%, var(--txp-gold) 100%);
  position: relative;
  isolation: isolate;
}

/* Ambient tropical wash — soft teal/gold/magenta glow behind the whole
   page, pure CSS, no JS/canvas cost. */
.pkg-page--thailand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(65% 40% at 10% 0%, rgba(13, 148, 136, 0.16), transparent 60%),
    radial-gradient(55% 35% at 92% 6%, rgba(242, 182, 75, 0.14), transparent 60%),
    radial-gradient(50% 30% at 50% 100%, rgba(214, 51, 108, 0.08), transparent 60%);
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.pkg-page--thailand .pkg-badge--category {
  color: var(--txp-silver-bright);
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(199, 204, 217, 0.4);
}
.pkg-page--thailand .pkg-badge--live {
  background-image: var(--txp-gradient);
  box-shadow: 0 0 24px rgba(13, 148, 136, 0.4);
}

.pkg-page--thailand .pkg-hero__title {
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 35%, var(--txp-teal-bright) 50%, #ffffff 70%, #ffffff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(13, 148, 136, 0.35);
}

.pkg-page--thailand .pkg-cta {
  background-image: var(--txp-gradient);
  box-shadow: 0 14px 40px -10px rgba(13, 148, 136, 0.5), 0 0 0 1px rgba(199, 204, 217, 0.25);
}
.pkg-page--thailand .pkg-cta:hover {
  box-shadow: 0 22px 56px -10px rgba(242, 182, 75, 0.5), 0 0 0 1px rgba(199, 204, 217, 0.4);
}

.pkg-page--thailand .pkg-gallery__hero {
  border-color: rgba(199, 204, 217, 0.35);
}
.pkg-page--thailand .pkg-gallery__thumb.is-active {
  border-color: var(--txp-teal-bright);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
}

/* -------------------------------------------------------------------------
   Info cards / glass surfaces
   ------------------------------------------------------------------------- */
.pkg-page--thailand .pkg-info-card,
.pkg-page--thailand .pkg-highlights,
.pkg-page--thailand .pkg-help {
  border-color: rgba(199, 204, 217, 0.22);
  background: rgba(7, 16, 25, 0.4);
}
.pkg-page--thailand .pkg-info-card:hover {
  border-color: rgba(199, 204, 217, 0.4);
  box-shadow: 0 0 32px rgba(13, 148, 136, 0.25);
}
.pkg-page--thailand .pkg-info-card__icon {
  color: var(--txp-silver-bright);
  background: rgba(13, 148, 136, 0.22);
}

.pkg-page--thailand .pkg-section__eyebrow {
  color: var(--txp-teal-bright);
}

/* -------------------------------------------------------------------------
   Flight & Hotel details — two-column grid, page-only component.
   ------------------------------------------------------------------------- */
.txp-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 900px) {
  .txp-details-grid { grid-template-columns: 1fr; }
}
.txp-details-grid .pkg-highlights {
  height: 100%;
}
.txp-details-grid .pkg-highlights__item span {
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Tabs / itinerary / included grid / pricing
   ------------------------------------------------------------------------- */
.pkg-page--thailand .pkg-tabs__nav {
  border-color: rgba(199, 204, 217, 0.22);
  background: rgba(7, 16, 25, 0.45);
}
.pkg-page--thailand .pkg-tabs__tab[aria-selected="true"] {
  background: var(--txp-gradient);
  box-shadow: 0 0 24px rgba(13, 148, 136, 0.4);
}

.pkg-page--thailand .pkg-itinerary__day {
  border-color: rgba(199, 204, 217, 0.2);
  background: rgba(7, 16, 25, 0.4);
}
.pkg-page--thailand .pkg-itinerary__day:hover {
  border-color: rgba(199, 204, 217, 0.4);
}
.pkg-page--thailand .pkg-itinerary__badge {
  background: var(--txp-gradient);
}

.pkg-page--thailand .pkg-included__item {
  border-color: rgba(199, 204, 217, 0.2);
  background: rgba(7, 16, 25, 0.4);
}
.pkg-page--thailand .pkg-included__item:hover {
  border-color: rgba(199, 204, 217, 0.4);
}
.pkg-page--thailand .pkg-included__icon {
  background: rgba(13, 148, 136, 0.22);
  color: var(--txp-silver-bright);
}

.pkg-page--thailand .pkg-pricing {
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    var(--txp-gradient) border-box;
}

.pkg-page--thailand .pkg-help__btn--call:hover {
  border-color: var(--txp-teal-bright);
  background: rgba(13, 148, 136, 0.14);
}

/* -------------------------------------------------------------------------
   "Why Book With Xploroo" — statement + limited-seats banner
   ------------------------------------------------------------------------- */
.txp-why-statement {
  margin: 0 0 var(--space-6);
  max-width: 62ch;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.85);
}
.txp-why-statement strong {
  color: #ffffff;
}
.txp-limited-banner {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(242, 182, 75, 0.4);
  background: rgba(242, 182, 75, 0.08);
  text-align: center;
}
.txp-limited-banner__headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--txp-gold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.txp-limited-banner__sub {
  margin: 0.3rem 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Fixed Departure Pricing — city-wise price grid, page-only component.
   ------------------------------------------------------------------------- */
.txp-fixed-dates {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-6);
  padding: 0.45em 1.1em;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(45, 212, 191, 0.4);
  background: rgba(45, 212, 191, 0.1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--txp-teal-bright);
}
.txp-price-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) {
  .txp-price-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .txp-price-grid { grid-template-columns: repeat(2, 1fr); }
}
.txp-price-card {
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard);
}
.txp-price-card:hover {
  transform: translateY(-3px);
  border-color: rgba(45, 212, 191, 0.45);
}
.txp-price-card__city {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.txp-price-card__amount {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  color: var(--color-text-strong);
}
.txp-price-note {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ============================================================================
   LIGHT THEME — this page's palette is entirely hardcoded (not the shared
   variables.css tokens), so it needs its own explicit overrides when
   [data-theme="light"] is set on <html>. Authored for a dark canvas; on the
   light canvas (--color-bg flips to white) the hero title and several
   plain-text elements would otherwise render white-on-white.
   ============================================================================ */
:root[data-theme="light"] .pkg-page--thailand {
  --txp-silver: #3a4550;
  --txp-silver-bright: #0f1a20;
}

:root[data-theme="light"] .pkg-page--thailand .pkg-hero__title {
  background: linear-gradient(100deg, #071019 0%, #071019 35%, #0d9488 50%, #071019 70%, #071019 100%);
  background-size: 220% auto;
  text-shadow: none;
}

:root[data-theme="light"] .pkg-page--thailand .pkg-badge--category {
  color: #0d9488;
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(13, 148, 136, 0.3);
}
:root[data-theme="light"] .pkg-page--thailand .pkg-section__eyebrow {
  color: #0d9488;
}

/* Glass cards — increase opacity so they stay a readable dark surface for
   their existing white/near-white text and icons. */
:root[data-theme="light"] .pkg-page--thailand .pkg-info-card,
:root[data-theme="light"] .pkg-page--thailand .pkg-highlights,
:root[data-theme="light"] .pkg-page--thailand .pkg-help,
:root[data-theme="light"] .pkg-page--thailand .pkg-tabs__nav,
:root[data-theme="light"] .pkg-page--thailand .pkg-itinerary__day,
:root[data-theme="light"] .pkg-page--thailand .pkg-included__item {
  background: rgba(7, 16, 25, 0.92);
  --color-text-strong: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-subtle: rgba(255, 255, 255, 0.6);
  --color-text: rgba(255, 255, 255, 0.85);
}
:root[data-theme="light"] .pkg-page--thailand .pkg-info-card__icon,
:root[data-theme="light"] .pkg-page--thailand .pkg-included__icon {
  color: #ffffff;
  background: rgba(13, 148, 136, 0.7);
}

:root[data-theme="light"] .txp-why-statement { color: rgba(7, 16, 25, 0.85); }
:root[data-theme="light"] .txp-why-statement strong { color: #071019; }
:root[data-theme="light"] .txp-fixed-dates {
  color: #065f56;
  border-color: rgba(6, 95, 86, 0.4);
  background: rgba(45, 212, 191, 0.14);
}