/*
 * VisaOnTrip public site theme: ONE gray palette, two modes (html[data-theme=dark|light]).
 *  - body.tn-light = pages written light-first (home, about, faq, contact, itinerary, track, country, legal, success pages)
 *  - body.tn-dark  = pages written dark-first (flights, visa guide, baggage)
 * Loaded after the compiled Tailwind sheets, so these rules only re-colour; they never change layout.
 */
html[data-theme=dark] { color-scheme: dark; }
html[data-theme=light] { color-scheme: light; }
html { transition: background-color .25s ease; }
body { transition: background-color .25s ease, color .25s ease; }

/* ===================================================================================
   1. Brand colours that used to be purple/indigo become gray (both modes)
   =================================================================================== */
.tn-light .text-purple-600, .tn-light .text-purple-700, .tn-light .text-violet-600, .tn-light .text-indigo-600, .tn-light .text-pink-600 { color: #374151; }
.tn-light .bg-purple-50, .tn-light .bg-purple-100, .tn-light .bg-indigo-50, .tn-light .bg-indigo-100 { background-color: #F3F4F6; }
.tn-light .bg-purple-600, .tn-light .bg-purple-700, .tn-light .bg-indigo-600, .tn-light .bg-indigo-700 { background-color: #374151; }
.tn-light .bg-purple-600:hover, .tn-light .hover\:bg-purple-700:hover { background-color: #1F2937; }
.tn-light [class*="to-purple-"], .tn-light [class*="from-purple-"], .tn-light [class*="via-pink-"], .tn-light [class*="to-pink-"], .tn-light [class*="from-indigo-"], .tn-light [class*="to-indigo-"], .tn-light [class*="to-violet-"] { --tw-gradient-to: #1F2937 var(--tw-gradient-to-position); }
.tn-light [class*="from-purple-"], .tn-light [class*="from-indigo-"] { --tw-gradient-from: #4B5563 var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tn-light [class*="via-pink-"] { --tw-gradient-stops: var(--tw-gradient-from), #374151 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.tn-light .shadow-purple-500\/30, .tn-light .shadow-primary-500\/30 { --tw-shadow-color: rgba(17, 24, 39, .3); --tw-shadow: var(--tw-shadow-colored); }

/* ===================================================================================
   2. Light-first pages in DARK mode
   =================================================================================== */
html[data-theme=dark] body.tn-light { background-color: #111827; color: #E5E7EB; }
html[data-theme=dark] .tn-light .bg-white { background-color: #1F2937; }
html[data-theme=dark] .tn-light .bg-gray-50, html[data-theme=dark] .tn-light .bg-cream { background-color: #111827; }
html[data-theme=dark] .tn-light .bg-gray-100 { background-color: #374151; }
html[data-theme=dark] .tn-light .bg-gray-200 { background-color: #4B5563; }
html[data-theme=dark] .tn-light .bg-gray-300 { background-color: #6B7280; }
html[data-theme=dark] .tn-light .bg-primary-50, html[data-theme=dark] .tn-light .bg-primary-100, html[data-theme=dark] .tn-light .bg-purple-50, html[data-theme=dark] .tn-light .bg-purple-100 { background-color: #374151; }
html[data-theme=dark] .tn-light .bg-primary-600, html[data-theme=dark] .tn-light .bg-primary-700, html[data-theme=dark] .tn-light .bg-primary-800, html[data-theme=dark] .tn-light .bg-dark-btn, html[data-theme=dark] .tn-light .bg-purple-600, html[data-theme=dark] .tn-light .bg-purple-700 { background-color: #4B5563; }
html[data-theme=dark] .tn-light .hover\:bg-primary-700:hover, html[data-theme=dark] .tn-light .hover\:bg-primary-600:hover, html[data-theme=dark] .tn-light .hover\:bg-purple-700:hover { background-color: #6B7280; }
html[data-theme=dark] .tn-light .hover\:bg-gray-50:hover, html[data-theme=dark] .tn-light .hover\:bg-gray-100:hover, html[data-theme=dark] .tn-light .hover\:bg-primary-50:hover, html[data-theme=dark] .tn-light .hover\:bg-primary-100:hover { background-color: #374151; }
html[data-theme=dark] .tn-light .hover\:bg-gray-200:hover { background-color: #4B5563; }

html[data-theme=dark] .tn-light .text-gray-900, html[data-theme=dark] .tn-light .text-purple-bold { color: #F3F4F6; }
html[data-theme=dark] .tn-light .text-gray-800 { color: #E5E7EB; }
html[data-theme=dark] .tn-light .text-gray-700 { color: #D1D5DB; }
html[data-theme=dark] .tn-light .text-gray-600, html[data-theme=dark] .tn-light .text-gray-500 { color: #9CA3AF; }
html[data-theme=dark] .tn-light .text-gray-400 { color: #6B7280; }
html[data-theme=dark] .tn-light .text-primary-500, html[data-theme=dark] .tn-light .text-primary-600, html[data-theme=dark] .tn-light .text-primary-700, html[data-theme=dark] .tn-light .text-primary-800, html[data-theme=dark] .tn-light .text-purple-600, html[data-theme=dark] .tn-light .text-purple-700 { color: #E5E7EB; }
html[data-theme=dark] .tn-light .hover\:text-primary-600:hover, html[data-theme=dark] .tn-light .hover\:text-primary-700:hover, html[data-theme=dark] .tn-light .hover\:text-gray-900:hover { color: #FFFFFF; }
html[data-theme=dark] .tn-light .hover\:text-gray-600:hover, html[data-theme=dark] .tn-light .hover\:text-gray-700:hover { color: #E5E7EB; }
/* primary-coloured chips keep readable text */
html[data-theme=dark] .tn-light .bg-primary-600.text-white, html[data-theme=dark] .tn-light .bg-primary-700.text-white { color: #FFFFFF; }

html[data-theme=dark] .tn-light .border-gray-100, html[data-theme=dark] .tn-light .border-gray-200, html[data-theme=dark] .tn-light .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html[data-theme=dark] .tn-light .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; }
html[data-theme=dark] .tn-light .border-gray-300 { border-color: #4B5563; }
html[data-theme=dark] .tn-light .border-primary-200, html[data-theme=dark] .tn-light .border-primary-500, html[data-theme=dark] .tn-light .border-primary-600 { border-color: #6B7280; }
html[data-theme=dark] .tn-light .ring-primary-500, html[data-theme=dark] .tn-light .ring-primary-100, html[data-theme=dark] .tn-light .focus\:ring-primary-500:focus { --tw-ring-color: #9CA3AF; }
html[data-theme=dark] .tn-light .focus\:border-primary-500:focus { border-color: #9CA3AF; }
html[data-theme=dark] .tn-light .placeholder-gray-400::placeholder { color: #6B7280; }

/* status colours (kept, softened for the dark surface) */
html[data-theme=dark] .tn-light .bg-green-50, html[data-theme=dark] .tn-light .bg-green-100 { background-color: rgba(34, 197, 94, .16); }
html[data-theme=dark] .tn-light .bg-red-50, html[data-theme=dark] .tn-light .bg-red-100 { background-color: rgba(239, 68, 68, .16); }
html[data-theme=dark] .tn-light .bg-amber-50, html[data-theme=dark] .tn-light .bg-amber-100, html[data-theme=dark] .tn-light .bg-yellow-50, html[data-theme=dark] .tn-light .bg-yellow-100 { background-color: rgba(245, 158, 11, .16); }
html[data-theme=dark] .tn-light .bg-blue-50, html[data-theme=dark] .tn-light .bg-blue-100 { background-color: rgba(59, 130, 246, .16); }
html[data-theme=dark] .tn-light .bg-orange-50, html[data-theme=dark] .tn-light .bg-orange-100 { background-color: rgba(249, 115, 22, .16); }
html[data-theme=dark] .tn-light .text-green-600, html[data-theme=dark] .tn-light .text-green-700, html[data-theme=dark] .tn-light .text-green-800 { color: #86EFAC; }
html[data-theme=dark] .tn-light .text-red-500, html[data-theme=dark] .tn-light .text-red-600, html[data-theme=dark] .tn-light .text-red-700, html[data-theme=dark] .tn-light .text-red-800 { color: #FCA5A5; }
html[data-theme=dark] .tn-light .text-amber-600, html[data-theme=dark] .tn-light .text-amber-700, html[data-theme=dark] .tn-light .text-amber-800, html[data-theme=dark] .tn-light .text-yellow-600, html[data-theme=dark] .tn-light .text-yellow-700, html[data-theme=dark] .tn-light .text-yellow-800 { color: #FCD34D; }
html[data-theme=dark] .tn-light .text-blue-600, html[data-theme=dark] .tn-light .text-blue-700, html[data-theme=dark] .tn-light .text-blue-800 { color: #93C5FD; }
html[data-theme=dark] .tn-light .text-orange-600, html[data-theme=dark] .tn-light .text-orange-700 { color: #FDBA74; }
html[data-theme=dark] .tn-light .border-green-200 { border-color: rgba(34, 197, 94, .4); }
html[data-theme=dark] .tn-light .border-red-200 { border-color: rgba(239, 68, 68, .4); }
html[data-theme=dark] .tn-light .border-amber-200, html[data-theme=dark] .tn-light .border-yellow-200 { border-color: rgba(245, 158, 11, .4); }
html[data-theme=dark] .tn-light .border-blue-200 { border-color: rgba(59, 130, 246, .4); }

/* form controls */
html[data-theme=dark] .tn-light input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]), html[data-theme=dark] .tn-light select, html[data-theme=dark] .tn-light textarea { background-color: #111827; color: #F3F4F6; border-color: #4B5563; }
html[data-theme=dark] .tn-light input::placeholder, html[data-theme=dark] .tn-light textarea::placeholder { color: #6B7280; }
html[data-theme=dark] .tn-light select option { background: #1F2937; color: #F3F4F6; }
html[data-theme=dark] .tn-light .swal2-popup { background: #1F2937; color: #F3F4F6; }
html[data-theme=dark] .tn-light table, html[data-theme=dark] .tn-light th, html[data-theme=dark] .tn-light td { border-color: #374151; }
html[data-theme=dark] .tn-light img.invert-dark { filter: invert(1) brightness(1.6); }

/* ===================================================================================
   3. Dark-first pages (flights, visa guide, baggage) in LIGHT mode
   =================================================================================== */
html[data-theme=light] body.tn-dark { background-color: #F3F4F6; color: #111827; }
html[data-theme=light] .tn-dark .bg-gray-900 { background-color: #F3F4F6; }
html[data-theme=light] .tn-dark .bg-gray-800 { background-color: #FFFFFF; }
html[data-theme=light] .tn-dark .bg-gray-700 { background-color: #E5E7EB; }
html[data-theme=light] .tn-dark .bg-gray-600 { background-color: #374151; }
html[data-theme=light] .tn-dark .bg-gray-500 { background-color: #4B5563; }
html[data-theme=light] .tn-dark .bg-gray-800\/60, html[data-theme=light] .tn-dark .bg-gray-800\/70, html[data-theme=light] .tn-dark .bg-gray-800\/80, html[data-theme=light] .tn-dark .bg-gray-800\/90, html[data-theme=light] .tn-dark .bg-gray-800\/95 { background-color: rgba(255, 255, 255, .88); }
html[data-theme=light] .tn-dark .bg-gray-900\/70 { background-color: rgba(243, 244, 246, .75); }
html[data-theme=light] .tn-dark .bg-gray-700\/70, html[data-theme=light] .tn-dark .bg-gray-700\/60 { background-color: rgba(229, 231, 235, .75); }
html[data-theme=light] .tn-dark .bg-gray-500\/10 { background-color: rgba(107, 114, 128, .08); }
html[data-theme=light] .tn-dark .hover\:bg-gray-700:hover, html[data-theme=light] .tn-dark .hover\:bg-gray-800:hover { background-color: #E5E7EB; }
html[data-theme=light] .tn-dark .hover\:bg-gray-500:hover, html[data-theme=light] .tn-dark .hover\:bg-gray-600:hover { background-color: #1F2937; }
html[data-theme=light] .tn-dark .bg-emerald-900\/30 { background-color: #ECFDF5; } html[data-theme=light] .tn-dark .bg-amber-900\/30, html[data-theme=light] .tn-dark .bg-amber-900\/20 { background-color: #FFFBEB; } html[data-theme=light] .tn-dark .bg-red-900\/30, html[data-theme=light] .tn-dark .bg-red-900\/40 { background-color: #FEF2F2; }

html[data-theme=light] .tn-dark .text-gray-100 { color: #111827; }
html[data-theme=light] .tn-dark .text-gray-200 { color: #1F2937; }
html[data-theme=light] .tn-dark .text-gray-300 { color: #374151; }
html[data-theme=light] .tn-dark .text-gray-400, html[data-theme=light] .tn-dark .text-gray-500 { color: #6B7280; }
html[data-theme=light] .tn-dark .text-emerald-300, html[data-theme=light] .tn-dark .text-emerald-400 { color: #059669; }
html[data-theme=light] .tn-dark .text-amber-300, html[data-theme=light] .tn-dark .text-amber-200 { color: #B45309; } html[data-theme=light] .tn-dark .text-red-300, html[data-theme=light] .tn-dark .text-red-200 { color: #B91C1C; }
html[data-theme=light] .tn-dark .border-gray-700, html[data-theme=light] .tn-dark .border-gray-800, html[data-theme=light] .tn-dark .divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: #E5E7EB; }
html[data-theme=light] .tn-dark .border-gray-600, html[data-theme=light] .tn-dark .border-gray-500, html[data-theme=light] .tn-dark .border-gray-400 { border-color: #D1D5DB; }
html[data-theme=light] .tn-dark .border-gray-700\/60 { border-color: rgba(209, 213, 219, .7); }
html[data-theme=light] .tn-dark .border-emerald-700 { border-color: #A7F3D0; } html[data-theme=light] .tn-dark .border-amber-700, html[data-theme=light] .tn-dark .border-amber-700\/50 { border-color: #FDE68A; } html[data-theme=light] .tn-dark .border-red-700 { border-color: #FECACA; }
html[data-theme=light] .tn-dark .shadow-black\/60, html[data-theme=light] .tn-dark .shadow-black\/50, html[data-theme=light] .tn-dark .shadow-black\/40 { --tw-shadow-color: rgba(17, 24, 39, .22); }
/* gradients that fade into the page background */
html[data-theme=light] .tn-dark .to-gray-900 { --tw-gradient-to: #F3F4F6 var(--tw-gradient-to-position); }
html[data-theme=light] .tn-dark .via-gray-900 { --tw-gradient-stops: var(--tw-gradient-from), rgba(243, 244, 246, .55) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme=light] .tn-dark .from-gray-800\/60 { --tw-gradient-from: rgba(229, 231, 235, .8) var(--tw-gradient-from-position); --tw-gradient-to: rgba(229, 231, 235, 0) var(--tw-gradient-to-position); }
html[data-theme=light] .tn-dark .from-gray-900 { --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); }
html[data-theme=light] .tn-dark .from-gray-800, html[data-theme=light] .tn-dark .via-gray-700 { --tw-gradient-from: #F9FAFB var(--tw-gradient-from-position); }
html[data-theme=light] .tn-dark .to-gray-800 { --tw-gradient-to: #E5E7EB var(--tw-gradient-to-position); }
html[data-theme=light] .tn-dark .from-gray-100\/70 { --tw-gradient-from: rgba(243, 244, 246, .8) var(--tw-gradient-from-position); }
html[data-theme=light] .tn-dark .from-gray-700 { --tw-gradient-from: #F3F4F6 var(--tw-gradient-from-position); }
/* the solid action buttons (light on dark) swap to dark on light */
.btn-inv { background-color: #F3F4F6; color: #111827; transition: background .2s, transform .2s; } .btn-inv:hover { background-color: #FFFFFF; }
html[data-theme=light] .btn-inv { background-color: #111827; color: #FFFFFF; } html[data-theme=light] .btn-inv:hover { background-color: #374151; }
/* page-specific inline styles of the dark-first pages */
html[data-theme=light] .tn-dark .field { background: #FFFFFF; border-color: #D1D5DB; }
html[data-theme=light] .tn-dark .field:focus-within, html[data-theme=light] .tn-dark .field.open { border-color: #6B7280; box-shadow: 0 0 0 3px rgba(107, 114, 128, .2); }
html[data-theme=light] .tn-dark .field input, html[data-theme=light] .tn-dark .field select, html[data-theme=light] .tn-dark select { color: #111827; }
html[data-theme=light] .tn-dark .field input::placeholder { color: #9CA3AF; }
html[data-theme=light] .tn-dark select option { background: #FFFFFF; color: #111827; }
html[data-theme=light] .tn-dark .tab.active { background: #111827; color: #FFFFFF; }
html[data-theme=light] .tn-dark .pill.active { background: #111827; border-color: #111827; }
html[data-theme=light] .tn-dark .chip.on, html[data-theme=light] .tn-dark .gtab.on { background: #111827; color: #FFFFFF; border-color: #111827; }
html[data-theme=light] .tn-dark .shimmer { background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%); background-size: 200% 100%; }
html[data-theme=light] .tn-dark .meter { background: #E5E7EB; } html[data-theme=light] .tn-dark .meter > i { background: linear-gradient(90deg, #6B7280, #111827); }
html[data-theme=light] .tn-dark .dest-media { box-shadow: 0 6px 18px rgba(17, 24, 39, .18); }
html[data-theme=light] .tn-dark .rail-l { background: linear-gradient(to right, rgba(243, 244, 246, 1) 0%, rgba(243, 244, 246, .85) 18%, rgba(243, 244, 246, .55) 40%, rgba(243, 244, 246, .22) 68%, rgba(243, 244, 246, .06) 88%, rgba(243, 244, 246, 0) 100%); }
html[data-theme=light] .tn-dark .rail-r { background: linear-gradient(to left, rgba(243, 244, 246, 1) 0%, rgba(243, 244, 246, .85) 18%, rgba(243, 244, 246, .55) 40%, rgba(243, 244, 246, .22) 68%, rgba(243, 244, 246, .06) 88%, rgba(243, 244, 246, 0) 100%); }
html[data-theme=light] .tn-dark .scroll-slim::-webkit-scrollbar-thumb, html[data-theme=light] .tn-dark #visaList::-webkit-scrollbar-thumb { background: #D1D5DB; }
html[data-theme=light] .tn-dark .acard:hover { box-shadow: 0 22px 40px -22px rgba(17, 24, 39, .35); }
html[data-theme=light] .tn-dark .lift:hover { box-shadow: 0 24px 40px -22px rgba(17, 24, 39, .3); }
/* over photos the text stays light: keep the hero card readable */
html[data-theme=light] .tn-dark section .text-white { color: #FFFFFF; }
/* white pills that sit on a photo/overlay in light mode keep light-on-dark */
html[data-theme=light] .tn-dark .vpanel, html[data-theme=light] .tn-dark .app-sec { color: #FFFFFF; }
html[data-theme=light] .tn-dark .vpanel .text-gray-100, html[data-theme=light] .tn-dark .vpanel .text-gray-200, html[data-theme=light] .tn-dark .app-sec .text-gray-100, html[data-theme=light] .tn-dark .app-sec .text-gray-200 { color: #F3F4F6; }
html[data-theme=light] .tn-dark .app-sec .text-gray-300, html[data-theme=light] .tn-dark .app-sec .text-gray-400 { color: #D1D5DB; }
html[data-theme=light] .tn-dark .app-sec .bg-gray-800, html[data-theme=light] .tn-dark .app-sec .bg-gray-900 { background-color: #111827; }

/* ===================================================================================
   4. Home-page custom classes (dark mode)
   =================================================================================== */
html[data-theme=dark] .text-shine { background: linear-gradient(90deg, #E5E7EB, #9CA3AF, #9CA3AF, #E5E7EB); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; }
html[data-theme=dark] .hero-chip { background: #1F2937; border-color: #374151; color: #E5E7EB; }
html[data-theme=dark] .tn-light .country-item:hover, html[data-theme=dark] .tn-light .hover\:bg-primary-50:hover { background-color: #374151; }
html[data-theme=dark] .tn-light [class*="bg-gradient-to"][class*="from-white"], html[data-theme=dark] .tn-light [class*="from-white"] { --tw-gradient-from: #1F2937 var(--tw-gradient-from-position); --tw-gradient-to: #111827 var(--tw-gradient-to-position); }
html[data-theme=dark] .tn-light [class*="to-gray-50"], html[data-theme=dark] .tn-light [class*="to-white"] { --tw-gradient-to: #111827 var(--tw-gradient-to-position); }
html[data-theme=dark] .tn-light [class*="from-primary-50"], html[data-theme=dark] .tn-light [class*="from-gray-50"] { --tw-gradient-from: #1F2937 var(--tw-gradient-from-position); }
html[data-theme=dark] .tn-light .shadow-sm, html[data-theme=dark] .tn-light .shadow-md, html[data-theme=dark] .tn-light .shadow-lg { --tw-shadow-color: rgba(0, 0, 0, .5); }
html[data-theme=dark] .tn-light .country-dropdown, html[data-theme=dark] .tn-light #countryList { background: #1F2937; border-color: #374151; }
html[data-theme=dark] .tn-light section[style*="background-color: #ffffff"], html[data-theme=dark] .tn-light [style*="background-color: #ffffff"] { background-color: #111827 !important; }
html[data-theme=dark] .tn-light [style*="background-color: #fff"] { background-color: #111827 !important; }

/* flights hero (home): the photo keeps a dark overlay + dark glass card in BOTH modes so the white text is always readable */
html[data-theme=light] .tn-dark .hero-ov, html[data-theme=dark] .hero-ov { background: linear-gradient(to bottom, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .24) 55%, rgba(0, 0, 0, .14) 100%); }
.hero-card { background: rgba(17, 24, 39, .6); border-color: rgba(255, 255, 255, .18); }
.hero-card .hero-sub { color: #E5E7EB; } .hero-card #boardCity { color: #F3F4F6; }

/* ===================================================================================
   5. Always-dark panels (gradient banners): keep light text in BOTH modes
   =================================================================================== */
.on-dark { color: #FFFFFF !important; }
.on-dark, .on-dark .text-gray-100, .on-dark .text-gray-200, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark .font-extrabold { color: #FFFFFF !important; }
.on-dark .text-gray-300, .on-dark .text-gray-400, .on-dark .text-gray-500, .on-dark .text-xs { color: #D1D5DB !important; }
.on-dark .bg-black\/30 { background: rgba(0, 0, 0, .35) !important; color: #FFFFFF !important; }
.on-dark a:not(.btn-inv), .on-dark button:not(.btn-inv) { color: #FFFFFF; } .on-dark .btn-inv { background: #FFFFFF !important; color: #111827 !important; }
.on-dark a.border { border-color: rgba(255, 255, 255, .55) !important; }
/* muted greys: readable on white (WCAG AA) */
.tn-light .text-gray-400 { color: #6B7280; }
html[data-theme=light] .tn-dark .text-gray-500, html[data-theme=light] .tn-dark .text-gray-400 { color: #6B7280; }
html[data-theme=dark] .tn-light .text-gray-400 { color: #8B95A5; }
.on-dark { background-image: linear-gradient(135deg, #4B5563 0%, #1F2937 55%, #030712 100%) !important; }

/* banners with a photo behind: the image is only a texture, so it must not lighten the panel */
.on-dark > img.absolute { mix-blend-mode: soft-light; opacity: .35 !important; }
.on-dark .btn-inv, .on-dark a.bg-white, .on-dark a.bg-gray-800 { background: #FFFFFF !important; color: #111827 !important; }
.on-dark a.border { background: transparent; }
.on-dark { position: relative; isolation: isolate; }
.on-dark > img.absolute { z-index: 0; opacity: .22 !important; }
.on-dark::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(3, 7, 18, .72), rgba(3, 7, 18, .35) 70%, rgba(3, 7, 18, .1)); }
.on-dark > *:not(img):not(.shine) { position: relative; z-index: 2; }

/* ===================================================================================
   6. Logo shine (header, drawer, footer): a light sweep that only touches the logo's own pixels
   =================================================================================== */
.logo-shine { position: relative; display: inline-block; line-height: 0; --logo: url(/assets/images/logo_BLACK.png?v=2); --shine: rgba(156, 163, 175, .95); }
html[data-theme=dark] .logo-shine { --logo: url(/assets/images/white_logo.png?v=2); --shine: rgba(253, 224, 71, .95); }
.logo-shine::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, var(--shine) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; animation: logoShine 3.4s ease-in-out infinite; }
@keyframes logoShine { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .logo-shine::after { animation: none; opacity: 0; } }

/* hero: no shadows around the search card, tabs and hero box */
.sform, .hero-card, .tab, .sform .field { box-shadow: none !important; }
html[data-theme=light] .tn-dark .sform { box-shadow: none !important; }

/* hero tab bar (Flight / Visa / Itinerary): soft shadow so it stands apart from the photo */
.tabbar { box-shadow: 0 8px 18px rgba(0, 0, 0, .28), 0 2px 5px rgba(0, 0, 0, .18) !important; }
html[data-theme=light] .tabbar { box-shadow: 0 8px 18px rgba(17, 24, 39, .18), 0 2px 5px rgba(17, 24, 39, .1) !important; }

/* desktop only: soft inner shadow along the edges of the whole search box */
@media (min-width: 640px) {
  .sform { box-shadow: inset 0 0 28px rgba(0, 0, 0, .38), inset 0 0 6px rgba(0, 0, 0, .25) !important; }
  html[data-theme=light] .sform, html[data-theme=light] .tn-dark .sform { box-shadow: inset 0 0 26px rgba(17, 24, 39, .14), inset 0 0 5px rgba(17, 24, 39, .1) !important; }
}

/* dark chips/pills keep their dark fill + white text in the light theme too */
.pill-dark { background-image: linear-gradient(90deg, #4B5563, #374151) !important; color: #FFFFFF !important; }
.pill-dark * { color: inherit; } .pill-dark span span { color: #E5E7EB !important; }

/* light theme: white-on-green buttons and green links need a darker green to be readable */
.bg-green-500, .bg-green-600 { background-color: #15803D; }
html[data-theme=light] .hover\:bg-green-600:hover, html[data-theme=light] .hover\:bg-green-700:hover { background-color: #166534; }
html[data-theme=light] .text-green-600 { color: #15803D; }
html[data-theme=dark] .tn-dark .text-gray-500 { color: #9CA3AF; }

/* ---- icons: clean, theme-aware colours + gentle motion ---- */
:root { --ic: #475569; --ic-ok: #059669; }
html[data-theme=dark] { --ic: #CBD5E1; --ic-ok: #34D399; }
.tn-dark main i.fa-solid.text-gray-300, .tn-dark main i.fa-solid.text-gray-400, .tn-dark main i.fa-regular.text-gray-400,
.tn-dark main i.fa-solid.text-gray-500:not(.fa-chevron-down):not(.fa-magnifying-glass) { color: var(--ic); }
.tn-dark main i.text-emerald-400 { color: var(--ic-ok); }
html[data-theme=light] .tn-dark main i.text-emerald-400 { color: #059669; }
@keyframes icPop { 0% { transform: scale(.4) rotate(-18deg); opacity: 0; } 60% { transform: scale(1.18) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes icFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.rise i.fa-solid, .rise i.fa-regular { animation: icPop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.rise li:nth-child(2) i { animation-delay: .06s; } .rise li:nth-child(3) i { animation-delay: .12s; } .rise li:nth-child(4) i { animation-delay: .18s; } .rise li:nth-child(5) i { animation-delay: .24s; }
.tn-dark main i.fa-solid, .tn-dark main i.fa-regular { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), color .25s ease; }
.tn-dark main a:hover > i.fa-solid, .tn-dark main button:hover > i.fa-solid, .tn-dark main .rise:hover > i.fa-solid, .tn-dark main li:hover > i.fa-solid { transform: scale(1.18) rotate(-6deg); }
.tn-dark main .fa-circle-check { animation: icFloat 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rise i, .tn-dark main i { animation: none !important; transition: none !important; } }
.on-dark > img:not(.absolute) { position: relative; z-index: 2; opacity: 1 !important; mix-blend-mode: normal !important; }

/* "Next?" in gold */
.hero-card h1 .hero-acc { background: linear-gradient(100deg, #B8860B 0%, #F5C842 35%, #FFE9A0 50%, #F5C842 65%, #B8860B 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #F5C842 !important; animation: goldShine 5s ease-in-out infinite; }
@keyframes goldShine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .hero-card h1 .hero-acc { animation: none; } }

/* hero tabs (Flight / Visa / Itinerary): icon badge above the label, same look on every device */
.tabbar { border-radius: 1.4rem !important; }
.tabbar .tab { flex-direction: column !important; gap: .25rem !important; padding: .5rem 1.6rem !important; border-radius: 1.1rem !important; font-size: .72rem !important; line-height: 1.1; }
.tabbar .tab > span { width: 2rem !important; height: 2rem !important; border-radius: 9999px; display: inline-flex !important; align-items: center; justify-content: center; flex: none; background: #1F2937 !important; border: 1px solid #374151; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .25s; }
.tabbar .tab:hover > span { transform: scale(1.1) rotate(-6deg); }
.tabbar .tab > span i { font-size: .85rem; }
html[data-theme=light] .tn-dark .tabbar .tab > span { background: #F3F4F6 !important; border-color: #D1D5DB; }
html[data-theme=light] .tn-dark .tabbar .tab > span i { color: #4B5563; }
html[data-theme=light] .tn-dark .tabbar .tab.active { background: linear-gradient(135deg, #4B5563, #111827); color: #FFFFFF; }
html[data-theme=light] .tn-dark .tabbar .tab.active > span { background: rgba(255, 255, 255, .2) !important; border-color: rgba(255, 255, 255, .3); }
html[data-theme=light] .tn-dark .tabbar .tab.active > span i { color: #FFFFFF; }
.tabbar .tab.active > span { background: rgba(17, 24, 39, .12) !important; border-color: rgba(17, 24, 39, .2); }
html[data-theme=dark] .tabbar .tab.active > span i, html:not([data-theme=light]) .tabbar .tab.active > span i { color: #111827; }