/* ==========================================================================
   TripNexHolidays — Premium Enhancement Layer
   Additive stylesheet. Loaded AFTER the compiled app CSS.
   Does not alter markup, routes, or app logic — purely visual polish so the
   whole site consistently matches the dark teal / turquoise / gold luxury
   theme already used on the homepage.
   Scope note: intentionally avoids touching the light-themed admin
   dashboard (bg-[#f1f5f9] shell) so internal tooling stays untouched.
   ========================================================================== */

:root{
  --tn-navy:#050b14;
  --tn-navy-2:#0a1120;
  --tn-navy-3:#0a1624;
  --tn-navy-light:#16223f;
  --tn-teal:#00d8c0;
  --tn-teal-2:#00ebd0;
  --tn-gold:#e2a856;
  --tn-gold-2:#f5c47a;
  --tn-ease:cubic-bezier(.22,.9,.28,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

html{ scroll-behavior:smooth; }

/* ---- Scrollbar ---- */
html:not(.tn-admin) ::-webkit-scrollbar{ width:10px; height:10px; }
html:not(.tn-admin) ::-webkit-scrollbar-track{ background:var(--tn-navy); }
html:not(.tn-admin) ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--tn-teal), var(--tn-gold));
  border-radius:99px; border:2px solid var(--tn-navy);
}
html:not(.tn-admin){ scrollbar-color: var(--tn-teal) var(--tn-navy); }

/* ---- Selection ---- */
body:not(.tn-admin) ::selection{ background:rgba(0,216,192,.35); color:#fff; }

/* ---- Focus ---- */
body:not(.tn-admin) a:focus-visible,
body:not(.tn-admin) button:focus-visible{
  outline:2px solid var(--tn-teal-2);
  outline-offset:3px; border-radius:6px;
}

/* ---- Global page-load fade ---- */
#root{ animation: tn-app-in .6s var(--tn-ease) both; }
@keyframes tn-app-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* ==========================================================================
   Scroll-reveal (paired with theme-premium.js adding .tn-in on intersect)
   ========================================================================== */
body:not(.tn-admin) .tn-reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--tn-ease), transform .8s var(--tn-ease);
  will-change:transform,opacity;
}
body:not(.tn-admin) .tn-reveal.tn-in{ opacity:1; transform:none; }

/* ==========================================================================
   Card polish — glassy lift + glow on hover for rounded card blocks
   ========================================================================== */
body:not(.tn-admin) [class*="rounded-2xl"],
body:not(.tn-admin) [class*="rounded-3xl"]{
  transition: transform .45s var(--tn-ease), box-shadow .45s var(--tn-ease), border-color .45s var(--tn-ease);
}

body:not(.tn-admin) .tn-card-hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -12px rgba(0,216,192,.28), 0 8px 24px -8px rgba(226,168,86,.18);
  border-color: rgba(0,216,192,.35) !important;
}

/* Image zoom inside cards on hover */
body:not(.tn-admin) .tn-card-hover img{
  transform: scale(1.06);
}
body:not(.tn-admin) [class*="rounded-2xl"] img,
body:not(.tn-admin) [class*="rounded-3xl"] img,
body:not(.tn-admin) [class*="rounded-xl"] img{
  transition: transform .6s var(--tn-ease);
}

/* ==========================================================================
   Buttons — extra glow sweep on primary CTAs (gold + turquoise)
   ========================================================================== */
body:not(.tn-admin) a[class*="bg-brand-gold"]:not([class*="hover:bg-brand-gold-light"]) ,
body:not(.tn-admin) button[class*="bg-brand-gold"],
body:not(.tn-admin) a[class*="bg-brand-gold"],
body:not(.tn-admin) a[class*="bg-[#00d8c0]"],
body:not(.tn-admin) button[class*="bg-[#00d8c0]"]{
  position:relative; overflow:hidden; isolation:isolate;
}
body:not(.tn-admin) a[class*="bg-brand-gold"]::after,
body:not(.tn-admin) button[class*="bg-brand-gold"]::after,
body:not(.tn-admin) a[class*="bg-[#00d8c0]"]::after,
body:not(.tn-admin) button[class*="bg-[#00d8c0]"]::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--tn-ease);
}
body:not(.tn-admin) a[class*="bg-brand-gold"]:hover::after,
body:not(.tn-admin) button[class*="bg-brand-gold"]:hover::after,
body:not(.tn-admin) a[class*="bg-[#00d8c0]"]:hover::after,
body:not(.tn-admin) button[class*="bg-[#00d8c0]"]:hover::after{
  transform:translateX(120%);
}
body:not(.tn-admin) a[class*="bg-brand-gold"]:hover,
body:not(.tn-admin) button[class*="bg-brand-gold"]:hover,
body:not(.tn-admin) a[class*="bg-[#00d8c0]"]:hover,
body:not(.tn-admin) button[class*="bg-[#00d8c0]"]:hover{
  transform:translateY(-2px);
}

/* Outline / ghost buttons on dark bg */
body:not(.tn-admin) a[class*="border-white/"]:hover,
body:not(.tn-admin) button[class*="border-white/"]:hover{
  border-color: rgba(0,216,192,.55) !important;
}

/* ==========================================================================
   Nav bar polish
   ========================================================================== */
body:not(.tn-admin) nav.fixed{
  transition: background-color .5s ease, backdrop-filter .5s ease, box-shadow .5s ease, border-color .5s ease;
}
body:not(.tn-admin) nav.fixed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,216,192,.5), rgba(226,168,86,.5), transparent);
  opacity:.9;
}

/* ==========================================================================
   Footer polish
   ========================================================================== */
body:not(.tn-admin) footer{
  position:relative;
  background-image:
    radial-gradient(600px 200px at 15% 0%, rgba(0,216,192,.06), transparent 60%),
    radial-gradient(600px 200px at 85% 0%, rgba(226,168,86,.06), transparent 60%);
}
body:not(.tn-admin) footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--tn-teal), var(--tn-gold), transparent);
}
body:not(.tn-admin) footer a:hover{ color: var(--tn-teal-2) !important; }
body:not(.tn-admin) footer svg{ transition: transform .35s var(--tn-ease), color .35s ease; }
body:not(.tn-admin) footer a:hover svg{ transform:translateY(-3px) scale(1.08); color:var(--tn-gold-2); }

/* ==========================================================================
   Badges / pills (discount tags, category chips)
   ========================================================================== */
body:not(.tn-admin) [class*="rounded-full"][class*="bg-brand-gold"],
body:not(.tn-admin) [class*="rounded-full"][class*="bg-[#00d8c0]"]{
  box-shadow: 0 6px 18px -6px rgba(226,168,86,.45);
}

/* ==========================================================================
   Decorative hero atoms injected by theme-premium.js
   ========================================================================== */
.tn-deco{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.tn-cloud{
  position:absolute; opacity:.10; filter:blur(1px);
  animation: tn-drift linear infinite;
}
@keyframes tn-drift{
  from{ transform:translateX(-10%); }
  to{ transform:translateX(10%); }
}
.tn-plane{
  position:absolute; opacity:.14; color:var(--tn-teal);
  animation: tn-fly 26s linear infinite;
}
@keyframes tn-fly{
  0%{ transform:translate(-10%,10%) rotate(8deg) scale(.9); opacity:0; }
  8%{ opacity:.16; }
  92%{ opacity:.16; }
  100%{ transform:translate(115%,-25%) rotate(8deg) scale(1.1); opacity:0; }
}
.tn-glow-orb{
  position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none;
  animation: tn-pulse 8s ease-in-out infinite;
}
@keyframes tn-pulse{
  0%,100%{ transform:scale(1); opacity:.35; }
  50%{ transform:scale(1.15); opacity:.55; }
}

/* ==========================================================================
   Page transition overlay (driven by theme-premium.js)
   ========================================================================== */
#tn-transition{
  position:fixed; inset:0; z-index:99999; pointer-events:none;
  background: radial-gradient(1200px 600px at 50% 50%, #0a1120 0%, #050b14 70%);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity .35s ease;
}
#tn-transition.tn-active{ opacity:1; visibility:visible; pointer-events:all; }
#tn-transition .tn-plane-fly{
  width:64px; height:64px; color:var(--tn-teal-2);
  filter: drop-shadow(0 0 18px rgba(0,216,192,.65));
  animation: tn-transition-plane .9s var(--tn-ease) infinite alternate;
}
@keyframes tn-transition-plane{
  from{ transform: translate(-40px,10px) rotate(-6deg); }
  to{ transform: translate(40px,-10px) rotate(6deg); }
}
#tn-transition .tn-transition-line{
  position:absolute; left:50%; top:50%; width:70vw; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,216,192,.5), rgba(226,168,86,.5), transparent);
  transform:translate(-50%,-50%);
}

/* ==========================================================================
   Card tilt (applied via inline transform by JS) — just ensure perspective
   ========================================================================== */
body:not(.tn-admin) .tn-tilt-parent{ perspective:1000px; }
body:not(.tn-admin) .tn-tilt{ transition: transform .15s ease-out; transform-style:preserve-3d; }

/* ==========================================================================
   Trust badge row (injected on homepage, under the search widget)
   ========================================================================== */
.tn-trust-row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:28px 40px; max-width:920px; margin:0 auto 64px; padding:0 24px;
}
.tn-trust-item{
  display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.75);
  opacity:0; transform:translateY(10px);
  animation: tn-trust-in .6s var(--tn-ease) forwards;
}
@keyframes tn-trust-in{ to{ opacity:1; transform:none; } }
.tn-trust-icon{
  width:42px; height:42px; flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,216,192,.35);
  background: radial-gradient(circle at 30% 30%, rgba(0,216,192,.12), transparent 70%);
  color: var(--tn-teal);
  transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.tn-trust-item:hover .tn-trust-icon{
  box-shadow: 0 0 18px rgba(0,216,192,.45);
  border-color: var(--tn-gold);
  color: var(--tn-gold-2);
  transform: translateY(-2px);
}
.tn-trust-icon svg{ width:20px; height:20px; }
.tn-trust-label{ font-size:13px; line-height:1.3; font-weight:600; white-space:nowrap; }

@media (max-width:640px){
  .tn-trust-row{ gap:20px 24px; }
  .tn-trust-label{ font-size:12px; }
}


body:not(.tn-admin) .tn-heading-accent{
  display:inline-block; height:3px; width:46px; border-radius:99px; margin-top:10px;
  background:linear-gradient(90deg, var(--tn-teal), var(--tn-gold));
}