/* ══════════════════════════════════════════════════════════════
   TravelHuge — shared effects layer

   Purely ADDITIVE polish. Nothing here is required for the site to
   work, and deleting this file returns every page to exactly how it
   looked before.

   Two rules kept this safe to drop onto 25 pages at once:

   1. It only ever touches transform, box-shadow, filter, opacity and
      transition — properties that do not affect layout. No display,
      position, width, margin or padding is set anywhere in this file,
      so nothing can reflow, collapse or overlap because of it.

   2. Everything sits behind `prefers-reduced-motion`, so a visitor who
      has asked their OS for less animation gets the static site.

   Verified before writing: no existing rule defines ::after on .btn,
   .card or .badge, so the sheen pseudo-elements below cannot displace
   an icon or a caret that was already there.
   ══════════════════════════════════════════════════════════════ */

/* ── Liquid glass ────────────────────────────────────────────────
   The one genuinely reusable piece from the reference specs. The
   ::before draws a 1.4px gradient hairline by masking a padded box —
   bright at top and bottom, invisible at the sides, which is what
   makes it read as a lit edge rather than a border. */
.liquid-glass{
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.12);
  position:relative;overflow:hidden;
}
.liquid-glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.45) 0%,rgba(255,255,255,.15) 20%,
    rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,
    rgba(255,255,255,.15) 80%,rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* ── Buttons ─────────────────────────────────────────────────────
   A light sweep crossing the face on hover, plus a 1px lift. The
   sweep is an ::after skewed off-screen and translated across; it is
   pointer-events:none so it can never intercept a click. */
.btn{transition:transform .22s cubic-bezier(.4,0,.2,1),
                box-shadow .22s cubic-bezier(.4,0,.2,1),
                filter .22s ease;
     position:relative;overflow:hidden;}
.btn::after{
  content:'';position:absolute;top:0;bottom:0;left:-140%;width:60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);pointer-events:none;
  transition:left .55s cubic-bezier(.4,0,.2,1);
}
.btn:hover::after{left:150%;}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s;}

/* Gold buttons get a warm halo instead of a grey one */
.btn-gold:hover,.btn-outline-gold:hover{
  box-shadow:0 6px 22px rgba(212,176,112,.28);
}
.btn-outline:hover,.btn-ghost:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
/* Icon-only buttons should rotate-lift, not sweep — a sheen across a
   28px circle reads as a glitch rather than a shine. */
.btn-icon::after{display:none;}
.btn-icon:hover{transform:translateY(-1px) scale(1.06);}

/* The site grew several button naming conventions, and .btn is only one
   of them — packages.html contains no .btn at all. Checked against the
   rendered pages rather than guessed: these are the classes actually in
   use on real buttons. Without them the polish would have landed on the
   admin screens and skipped the customer-facing catalogue entirely. */
.pm-btn,.pcard-view,.pcard-cmp,.cmp-book,.fpill,.dpill,.chat-hd-btn{
  transition:transform .22s cubic-bezier(.4,0,.2,1),
             box-shadow .22s cubic-bezier(.4,0,.2,1),
             filter .22s ease;
}
.pm-btn:hover,.cmp-book:hover,.fpill:hover,.dpill:hover,.chat-hd-btn:hover{
  transform:translateY(-1px);filter:brightness(1.06);
}
.pm-btn:active,.cmp-book:active,.fpill:active,.dpill:active{
  transform:translateY(0) scale(.985);transition-duration:.08s;
}
/* The card's own View/Compare buttons already animate on card hover, so
   these only get the press response — doubling the lift made them wobble. */
.pcard-view:active,.pcard-cmp:active{transform:scale(.97);transition-duration:.08s;}

/* ── Cards ───────────────────────────────────────────────────────
   Lift and warm the edge on hover. Deliberately gentle: these grids
   can show 20+ cards at once and a strong effect turns scrolling
   into a strobe. */
.card{transition:transform .28s cubic-bezier(.4,0,.2,1),
                 box-shadow .28s cubic-bezier(.4,0,.2,1),
                 border-color .28s ease;}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.42),0 0 0 1px rgba(212,176,112,.22);
}

/* ── Inputs & selects ────────────────────────────────────────────
   A focus ring that is visible without being a browser default. This
   is an accessibility win as much as a visual one — several of these
   fields previously showed no focus state at all. */
input:focus,select:focus,textarea:focus{
  box-shadow:0 0 0 3px rgba(212,176,112,.18);
  transition:box-shadow .2s ease;
}

/* ── Focus, without the hard rectangle ───────────────────────────
   THE BUG THIS FIXES: a square gold box drawn around every rounded field.

   The previous rule put `outline:2px solid` + `border-radius:inherit` on
   focused inputs. `inherit` takes the PARENT's radius, which is almost
   always 0 — so the outline drew as a hard-cornered rectangle around a
   softly-rounded field. Two shapes, one control, and it looked like a
   browser default had escaped rather than anything designed.

   Form fields no longer get an outline at all. They do not need one: the
   rule above already puts a soft gold ring on :focus via box-shadow, and
   box-shadow follows the element's OWN border-radius automatically, so it
   traces the field exactly. Every page also turns the field's border gold
   on focus. That is a clear focus state and it is the right shape.

   Buttons and links keep a ring, because many have no border of their own
   and would otherwise show nothing at all to a keyboard user — but the
   `border-radius:inherit` is gone from those too, so the outline follows
   each element's real shape instead of its parent's. */
button:focus-visible:not([hidden]),
a:focus-visible:not([hidden]),
[role="button"]:focus-visible:not([hidden]){
  outline:2px solid rgba(236,207,134,.85);
  outline-offset:2px;
}

/* Fields show focus through their own border and the soft ring above.
   Stated explicitly so a stray page-level outline cannot reintroduce the
   rectangle. */
input:focus,input:focus-visible,
select:focus,select:focus-visible,
textarea:focus,textarea:focus-visible{
  outline:none;
}

/* ══════════════════════════════════════════════════════════════
   THE BRIGHT RECTANGLE — the real one, at last

   Reported several times and fixed twice against the wrong causes. The two
   earlier fixes were real bugs and are still fixed: a square outline drawn
   by `border-radius: inherit`, and the operating system's own frame around
   an open <select>. Neither was what the screenshot showed.

   THIS is what it was: BROWSER AUTOFILL. When Chrome fills a name or an
   email from its saved addresses it paints the field with its own
   near-white background and near-black text, and it does so with a
   specificity no ordinary rule can beat. On a black page that turns two
   fields into glowing white blocks. In the screenshot the Name and Email
   fields were lit up and the Phone field beside them was not — because the
   phone number was typed by hand and the other two were filled by Chrome.

   WHY I MISSED IT: a fresh automated browser has no saved addresses, so
   autofill never fires and the page always looked correct to me. The bug
   only exists for people who have used a form before — which is to say
   every real customer, and none of my tests.

   THE FIX: an inset box-shadow big enough to cover the field repaints the
   background, -webkit-text-fill-color overrides the text colour, and the
   absurd transition delay stops the yellow flash Chrome shows for an
   instant before its own styles settle.

   NOTE: deliberately NO `border-radius` here. An inset shadow already
   follows the element's own corners, and `border-radius: inherit` is the
   exact mistake that drew the square gold box in the first place.

   !important is deliberate here, and is the one place on this sheet that
   earns it: 44 pages have their own field styling, and this has to beat all
   of them the way the browser's own autofill paint currently beats us. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#ede9e2 !important;
  caret-color:#ede9e2 !important;
  -webkit-box-shadow:0 0 0 100px #0f0f17 inset !important;
          box-shadow:0 0 0 100px #0f0f17 inset !important;
  transition:background-color 600000s 0s, color 600000s 0s;
}
/* Chrome ships the unprefixed selector too; an unknown selector invalidates
   its whole rule, so these must stay in separate blocks rather than being
   merged into one comma-separated list with the -webkit- ones above. */
input:autofill,
textarea:autofill,
select:autofill{
  -webkit-text-fill-color:#ede9e2 !important;
  caret-color:#ede9e2 !important;
  box-shadow:0 0 0 100px #0f0f17 inset !important;
}
/* Firefox uses its own mechanism and honours plain colours. */
input:-moz-autofill,
input:-moz-autofill-preview{
  filter:none;
  background:#0f0f17;
  color:#ede9e2;
}

/* ══════════════════════════════════════════════════════════════
   CURSOR LIGHT ON PACKAGE CARDS — pairs with assets/th-glow.js

   The Flight and Hotel booking tiles already lit up and warmed their edge on
   hover; the package cards, which are the ones actually meant to sell
   something, sat flat. Same treatment, slightly richer: a soft light that
   follows the pointer, a gold rim, and a warm halo underneath.

   Everything here is transform-free, so it cannot disturb the scroll-reveal
   transform .pcard already carries — that reveal sets translateY and
   animating it from here would fight it.

   IMPORTANT — why the glow lives on an OVERLAY and not on the card itself:
   both pages already style their own hover. packages.html uses
   `.pcard.in:hover` (more specific than anything sane written here) and
   index.html has `.pkc:hover` with its own lift and shadow. Writing the rim
   as `border-color` on the card would either lose the specificity fight or
   mean overriding two carefully-tuned lifts with `!important`.

   So the card keeps its own lift and shadow untouched, and the light, the
   rim and the halo all live on a pseudo-element stacked above it. Nothing to
   override, nothing to fight, and it works the same wherever it is dropped. */
/* A visible resting edge, so the card reads as a defined object before you
   even touch it — and so the lit state has something to bloom out of rather
   than appearing from nowhere. 2px, because a 1px hairline reads as a
   rendering artefact on a dark page rather than as a deliberate frame. */
.pcard,.pkc,.th-glow{position:relative;border-width:2px !important;
  border-style:solid !important;border-color:rgba(212,176,112,.20);
  transition:border-color .3s ease;}
.pcard.lit,.pkc.lit,.th-glow.lit{border-color:rgba(255,206,102,.85);}
/* ── THE LIGHT TOUCHES ONLY THE FRAME, NEVER THE PICTURE ─────
   The first version put the cursor light and two big inset glows on a
   full-card overlay — a warm wash crawling OVER the photo and the text, on
   a card that exists to sell the photo. Kunal's correction: the glow
   belongs "in border and backlight area only".

   So the overlay is now a RING. It spans the card, but a mask knocks out
   everything except the outer few pixels: two identical fills, one clipped
   to the content box, composited with exclude — what survives is the
   padding band, i.e. the frame. The cursor light still follows the
   pointer, but it can only ever appear ON the frame, running around the
   edge like light on metal. The photo underneath is never painted on. */
.pcard::after,.pkc::after,.th-glow::after{
  content:'';position:absolute;inset:-2px;z-index:2;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
  padding:4px;                       /* ring width: the 2px border + 2px bloom */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
             rgba(255,228,158,.95), rgba(255,206,102,.45) 40%, rgba(255,214,120,.15) 75%);
}
.pcard.lit::after,.pkc.lit::after,.th-glow.lit::after{opacity:1;}
/* The BACKLIGHT — outer halo plus the top hairline. Non-inset box-shadow
   paints strictly OUTSIDE the border box, so this cannot touch the image or
   the content either; it reads as light behind the card. */
.pcard::before,.pkc::before,.th-glow::before{
  content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:linear-gradient(90deg,transparent,rgba(255,214,120,1),rgba(255,235,190,1),
                             rgba(255,214,120,1),transparent) top center / 84% 2px no-repeat;
  box-shadow:0 0 26px rgba(255,206,102,.60),
             0 0 62px rgba(255,190,80,.42),
             0 0 120px rgba(212,160,60,.34);}
.pcard.lit::before,.pkc.lit::before,.th-glow.lit::before{opacity:1;}

@media (prefers-reduced-motion:reduce){
  .pcard::after,.pkc::after,.th-glow::after,
  .pcard::before,.pkc::before,.th-glow::before{display:none;}
}

/* ══════════════════════════════════════════════════════════════
   THEMED DROPDOWNS — the styling for assets/th-select.js

   Lives here rather than in each page because all 44 pages already load this
   file. Dark list, cream text, gold on hover, gold border — and no operating
   system rectangle, because the OS control is no longer the thing on screen.

   Deliberately generic: it inherits the field metrics from whatever page it
   lands on rather than imposing one look on eighteen different designs. */
.ths{position:relative;display:block;}
/* !important because this has to beat whatever the host page says about its
   own selects, across eighteen pages written at different times. If a page
   rule wins, the native control stays on screen NEXT TO the themed one and
   the field appears twice — which is exactly what a broken build looked
   like. Cheap insurance against it ever coming back. */
.ths > select{position:absolute !important;width:1px !important;height:1px !important;
  opacity:0 !important;pointer-events:none !important;clip:rect(0 0 0 0) !important;
  margin:0 !important;padding:0 !important;border:0 !important;}
.ths-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:10px;
  padding:11px 13px;color:#ede9e2;font-family:inherit;font-size:14px;line-height:1.35;
  cursor:pointer;text-align:left;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;}
.ths-btn:hover:not(:disabled){border-color:rgba(212,176,112,0.65);background:rgba(212,176,112,0.08);}
.ths-btn:focus,.ths-btn:focus-visible{outline:none;border-color:#c9a96e;
  box-shadow:0 0 0 3px rgba(212,176,112,0.15);}
.ths-btn:disabled{opacity:.5;cursor:not-allowed;}
.ths-btn.ths-empty .ths-txt{color:#9a9aae;}
.ths-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ths-caret{color:#d4b070;font-size:11px;flex:0 0 auto;transition:transform .22s ease;}
.ths.open .ths-btn{border-color:#c9a96e;background:rgba(212,176,112,0.08);}
.ths.open .ths-caret{transform:rotate(180deg);}

.ths-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:9999;display:none;
  background:#12121a;border:1px solid rgba(212,176,112,0.32);border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.72);overflow:hidden;}
.ths.open .ths-pop{display:block;}
.ths.up .ths-pop{top:auto;bottom:calc(100% + 6px);}
.ths-list{max-height:280px;overflow-y:auto;padding:5px;overscroll-behavior:contain;}
.ths-opt{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:13.5px;color:#ede9e2;
  transition:background .14s ease,color .14s ease;}
.ths-opt:hover,.ths-opt.active{background:rgba(212,176,112,0.14);color:#fff;}
.ths-opt.on{background:rgba(212,176,112,0.20);color:#f0d595;font-weight:600;}
.ths-opt.off{opacity:.4;cursor:not-allowed;}
.ths-group{padding:9px 12px 5px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#d4b070;font-weight:700;}
.ths-none{padding:14px;font-size:13px;color:#9a9aae;text-align:center;}
/* Anything under 16px makes iOS Safari zoom the page when tapped. */
@media(max-width:640px){.ths-btn{font-size:16px;}.ths-opt{font-size:15px;}}

/* ── Dropdowns, site-wide ────────────────────────────────────────
   A native <select> renders its popup as operating-system chrome: white
   list, blue highlight, system font. On a black-and-gold page it is the one
   element that looks borrowed from somewhere else.

   <option> inherits nothing useful from the page, so both colours must be
   stated outright, and color-scheme tells the browser to draw the popup's
   own furniture — scrollbar, border, arrow — dark rather than light.

   Chrome on Windows still owns the highlight colour in some builds, so this
   is as far as a native select can be pushed. Where the dropdown really
   matters (the trip builder) it is a custom listbox instead. */
select{color-scheme:dark;}
select option{background:#12121a;color:#ede9e2;}
select option:checked,
select option:hover{background:#2a2418;color:#f0d595;}

/* Gold on hover, everywhere a field can be hovered. */
input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled){
  border-color:rgba(212,176,112,0.45);
}

/* ── One control, one focus ring ─────────────────────────────────
   THE BUG THIS FIXES: "why two bars in the search bar?"

   Some controls are a WRAPPER plus a borderless input — the rounded box
   the user sees is the container, and the <input> inside deliberately
   carries border:none. All four of these already show focus themselves
   via :focus-within (gold border plus a soft glow), so the two rules
   above added a SECOND ring, drawn around the inner input. The result
   was two concentric gold outlines inside a single field.

   Browsers also treat a text input as focus-visible on an ordinary mouse
   click — not just keyboard — so this was showing every single time
   somebody clicked the search box, not in a rare edge case.

   Suppressing the inner ring loses nothing: the container's :focus-within
   state is still there, still gold, and is the shape the user actually
   perceives as the field. Exactly one clear focus indicator remains, so
   keyboard accessibility is unaffected. */
.ph-search input:focus,      .ph-search input:focus-visible,
.fh-field input:focus,       .fh-field input:focus-visible,
.tag-wrap input:focus,       .tag-wrap input:focus-visible,
.cf-phone-group input:focus, .cf-phone-group input:focus-visible{
  box-shadow:none;
  outline:none;
}

/* ── Tabs & badges ───────────────────────────────────────────────*/
.tab{transition:color .25s ease,border-color .25s ease,transform .2s ease;}
.tab:hover{transform:translateY(-1px);}
.badge{transition:transform .2s ease,box-shadow .2s ease;}
.badge:hover{transform:translateY(-1px) scale(1.03);}

/* ── Links that open elsewhere ───────────────────────────────────*/
a{transition:color .2s ease,opacity .2s ease;}

/* ── Honour the user's motion preference ─────────────────────────
   Not decoration: for some vestibular conditions this is the
   difference between a usable page and a nauseating one. */
@media (prefers-reduced-motion:reduce){
  .btn,.card,.tab,.badge,a,input,select,textarea,
  .pm-btn,.pcard-view,.pcard-cmp,.cmp-book,.fpill,.dpill,.chat-hd-btn{
    transition:none !important;
  }
  .btn::after{display:none;}
  .btn:hover,.btn:active,.card:hover,.tab:hover,.badge:hover,.btn-icon:hover,
  .pm-btn:hover,.cmp-book:hover,.fpill:hover,.dpill:hover,.chat-hd-btn:hover,
  .pm-btn:active,.cmp-book:active,.pcard-view:active,.pcard-cmp:active{
    transform:none;
  }
}