/* ══════════════════════════════════════════════════════════════
   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;
}

/* Keyboard focus ring — an accessibility fix, not decoration.

   Measured on the live page: the search input computes to `outline:none`
   with no box-shadow when focused, so a keyboard user has NO indication
   of where they are. Several page-level rules set outline:none at higher
   specificity than a bare `input:focus`, which is why the rule above
   silently loses.

   `:not([hidden])` is here purely to raise specificity enough to win,
   without resorting to !important. `:focus-visible` rather than `:focus`
   means this appears for keyboard and assistive-tech users and never on
   an ordinary mouse click, so no existing visual design changes. */
input:focus-visible:not([hidden]),
select:focus-visible:not([hidden]),
textarea:focus-visible:not([hidden]),
button:focus-visible:not([hidden]),
a:focus-visible:not([hidden]){
  outline:2px solid rgba(236,207,134,.85);
  outline-offset:2px;
  border-radius:inherit;
}

/* ── 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;
  }
}