/* Custom styles and enhancements for UK Travels and Tours */

:root {
  --primary-navy: #0b2545;
  --secondary-navy: #133e68;
  --dark-navy: #06182e;
  --brand-cyan: #00a8b5;
  --brand-cyan-light: #38bdf8;
  --brand-cyan-pale: #e0f7fa;
  --brand-gold: #f59e0b;
  --brand-gold-light: #fef3c7;
  --brand-amber: #d97706;
  --brand-saffron: #ff7722;
  --bg-slate-50: #f8fafc;
  --bg-slate-100: #f1f5f9;
  --bg-slate-900: #0f172a;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #f8fafc !important;
  color: #1e293b;
  font-family: 'Fira Sans', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: #00a8b5 !important;
  color: #ffffff !important;
}

p {
  font-family: 'Fira Sans', sans-serif;
  color: #1e293b;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Ubuntu Sans', sans-serif;
  letter-spacing: -0.015em;
}

.font-serif-brand {
  font-family: 'Cinzel', serif;
}

/* ==================== CORE BRAND BACKGROUND COLORS ==================== */
.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-800 { background-color: #1e293b; }
.bg-slate-900 { background-color: #0f172a; }
.bg-white { background-color: #ffffff; }

.bg-brandNavy { background-color: #0b2545; }
.bg-brandDark { background-color: #06182e; }
.bg-brandSecondary { background-color: #133e68; }
.bg-brandCyan { background-color: #00a8b5; }
.bg-brandCyanLight { background-color: #38bdf8; }
.bg-brandCyanPale { background-color: #e0f7fa; }
.bg-brandGold { background-color: #f59e0b; }
.bg-brandGoldLight { background-color: #fef3c7; }
.bg-brandAmber { background-color: #d97706; }
.bg-brandSaffron { background-color: #ff7722; }

/* Alpha / Translucent Background Colors */
.bg-brandNavy\/95 { background-color: rgba(11, 37, 69, 0.95); }
.bg-brandNavy\/90 { background-color: rgba(11, 37, 69, 0.90); }
.bg-brandNavy\/80 { background-color: rgba(11, 37, 69, 0.80); }
.bg-brandNavy\/50 { background-color: rgba(11, 37, 69, 0.50); }

.bg-brandDark\/95 { background-color: rgba(6, 24, 46, 0.95); }
.bg-brandDark\/90 { background-color: rgba(6, 24, 46, 0.90); }
.bg-brandDark\/80 { background-color: rgba(6, 24, 46, 0.80); }
.bg-brandDark\/50 { background-color: rgba(6, 24, 46, 0.50); }

.bg-brandCyan\/10 { background-color: rgba(0, 168, 181, 0.10); }
.bg-brandCyan\/20 { background-color: rgba(0, 168, 181, 0.20); }
.bg-brandCyanLight\/10 { background-color: rgba(56, 189, 248, 0.10); }
.bg-brandCyanLight\/20 { background-color: rgba(56, 189, 248, 0.20); }

.bg-brandGold\/10 { background-color: rgba(245, 158, 11, 0.10); }
.bg-brandGold\/15 { background-color: rgba(245, 158, 11, 0.15); }
.bg-brandGold\/20 { background-color: rgba(245, 158, 11, 0.20); }

.bg-white\/10 { background-color: rgba(255, 255, 255, 0.10); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.20); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.90); }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }

/* ==================== CORE BRAND TEXT & BORDER COLORS ==================== */
.text-brandNavy { color: #0b2545; }
.text-brandDark { color: #06182e; }
.text-brandSecondary { color: #133e68; }
.text-brandCyan { color: #00a8b5; }
.text-brandCyanLight { color: #38bdf8; }
.text-brandCyanPale { color: #e0f7fa; }
.text-brandGold { color: #f59e0b; }
.text-brandGoldLight { color: #fef3c7; }
.text-brandAmber { color: #d97706; }
.text-brandSaffron { color: #ff7722; }

.border-brandNavy { border-color: #0b2545; }
.border-brandSecondary { border-color: #133e68; }
.border-brandSecondary\/60 { border-color: rgba(19, 62, 104, 0.6); }
.border-brandCyan { border-color: #00a8b5; }
.border-brandCyan\/20 { border-color: rgba(0, 168, 181, 0.20); }
.border-brandCyan\/25 { border-color: rgba(0, 168, 181, 0.25); }
.border-brandCyanLight { border-color: #38bdf8; }
.border-brandGold { border-color: #f59e0b; }
.border-brandGold\/30 { border-color: rgba(245, 158, 11, 0.30); }
.border-brandGold\/40 { border-color: rgba(245, 158, 11, 0.40); }

/* ==================== GRADIENT COLOR DEFINITIONS ==================== */
.from-brandNavy { --tw-gradient-from: #0b2545 var(--tw-gradient-from-position); --tw-gradient-to: rgba(11, 37, 69, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-brandNavy { --tw-gradient-to: #0b2545 var(--tw-gradient-to-position); }
.via-brandNavy { --tw-gradient-to: rgba(11, 37, 69, 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0b2545 var(--tw-gradient-via-position), var(--tw-gradient-to); }

.from-brandDark { --tw-gradient-from: #06182e var(--tw-gradient-from-position); --tw-gradient-to: rgba(6, 24, 46, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-brandDark { --tw-gradient-to: #06182e var(--tw-gradient-to-position); }
.via-brandDark { --tw-gradient-to: rgba(6, 24, 46, 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #06182e var(--tw-gradient-via-position), var(--tw-gradient-to); }

.from-brandSecondary { --tw-gradient-from: #133e68 var(--tw-gradient-from-position); --tw-gradient-to: rgba(19, 62, 104, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-brandSecondary { --tw-gradient-to: #133e68 var(--tw-gradient-to-position); }
.via-brandSecondary { --tw-gradient-to: rgba(19, 62, 104, 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #133e68 var(--tw-gradient-via-position), var(--tw-gradient-to); }

.from-brandCyan { --tw-gradient-from: #00a8b5 var(--tw-gradient-from-position); --tw-gradient-to: rgba(0, 168, 181, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-brandCyan { --tw-gradient-to: #00a8b5 var(--tw-gradient-to-position); }
.via-brandCyan { --tw-gradient-to: rgba(0, 168, 181, 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #00a8b5 var(--tw-gradient-via-position), var(--tw-gradient-to); }

.from-brandCyanLight { --tw-gradient-from: #38bdf8 var(--tw-gradient-from-position); --tw-gradient-to: rgba(56, 189, 248, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-brandCyanLight { --tw-gradient-to: #38bdf8 var(--tw-gradient-to-position); }

.from-brandGold { --tw-gradient-from: #f59e0b var(--tw-gradient-from-position); --tw-gradient-to: rgba(245, 158, 11, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-brandGold { --tw-gradient-to: #f59e0b var(--tw-gradient-to-position); }
.via-brandGold { --tw-gradient-to: rgba(245, 158, 11, 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f59e0b var(--tw-gradient-via-position), var(--tw-gradient-to); }

/* Marquee Animation */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-ticker {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker 40s linear infinite;
}

.animate-ticker:hover {
  animation-play-state: paused;
}

/* Shimmer Effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-badge {
  background: linear-gradient(90deg, #f59e0b 0%, #fef3c7 50%, #f59e0b 100%);
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #00a8b5;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0b2545;
}

/* Card Hover Lift */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgba(11, 37, 69, 0.12), 0 10px 10px -5px rgba(11, 37, 69, 0.04);
}

/* Timeline Indicator */
.timeline-dot::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00a8b5;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px #00a8b5;
}

/* Modal Backdrop */
.modal-backdrop {
  background-color: rgba(6, 24, 46, 0.78);
  backdrop-filter: blur(5px);
}

/* Floating Animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(8px); }
}

.animate-float-slow {
  animation: floatSlow 6s ease-in-out infinite;
}

.animate-float-reverse {
  animation: floatReverse 5s ease-in-out infinite;
}

/* Video Play Button Pulse */
@keyframes playPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 168, 181, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 16px rgba(0, 168, 181, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 168, 181, 0); }
}

.play-btn-pulse {
  animation: playPulse 2s infinite;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Modal Scale Animation */
@keyframes modalScaleUp {
  0% { opacity: 0; transform: scale(0.95) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.animate-scaleUp {
  animation: modalScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Interactive Mouse Spotlight / Light Effect Circle */
.mouse-light-container {
  position: relative;
  overflow: hidden;
}

.mouse-light-circle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    650px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(56, 189, 248, 0.22) 0%,
    rgba(0, 168, 181, 0.10) 35%,
    rgba(245, 158, 11, 0.04) 55%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: background;
}

.mouse-light-container:hover .mouse-light-circle {
  opacity: 1;
}

/* Mobile Safe Bottom Padding & Responsive UI Fixes */
@media (max-width: 768px) {
  body {
    padding-bottom: 64px; /* Account for sticky mobile bottom bar */
  }
  #toastContainer {
    bottom: 72px !important;
    left: 1rem !important;
    right: 1rem !important;
    max-width: none !important;
  }
}

/* Hero Slider 5s Progress Bar Animation */
@keyframes heroProgress {
  0% { width: 0%; }
  100% { width: 100%; }
}

.hero-tab-progress {
  height: 2.5px;
  background: linear-gradient(90deg, #38bdf8, #00a8b5, #f59e0b);
  border-radius: 9999px;
  animation: heroProgress 5s linear forwards;
}

/* ==================== PREMIUM FOOTER STYLES ==================== */
.footer-glow-bg {
  background: #06152b;
  background: radial-gradient(circle at 50% 0%, #0d284a 0%, #06152b 60%, #030a16 100%);
  color: #e2e8f0;
  position: relative;
}

.footer-glow-bg p,
.footer-glow-bg span,
.footer-glow-bg li {
  color: #cbd5e1;
}

.footer-glow-bg h3,
.footer-glow-bg h4,
.footer-glow-bg h5,
.footer-glow-bg .text-white {
  color: #ffffff;
}

.footer-glow-bg .text-slate-300,
.footer-glow-bg .text-slate-400,
.footer-glow-bg .text-slate-500 {
  color: #cbd5e1 !important;
}

.footer-glow-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.6), rgba(245, 158, 11, 0.6), transparent);
}

.footer-card {
  background: rgba(13, 34, 61, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 1.25rem;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

.footer-link-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #cbd5e1;
  transition: all 0.25s ease;
}

.footer-link-item:hover {
  color: #38bdf8;
  transform: translateX(4px);
}

.footer-link-item:hover i {
  color: #f59e0b;
  transform: translateX(2px);
}

.footer-social-btn {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-social-btn:hover {
  background: #00a8b5;
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 20px -4px rgba(0, 168, 181, 0.6);
}

.footer-badge-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
  transition: all 0.3s ease;
}

.footer-badge-pill:hover {
  background: rgba(0, 168, 181, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  color: #ffffff;
  transform: translateY(-2px);
}

/* =============================================================
   PERFORMANCE & RENDERING OPTIMIZATIONS (Core Web Vitals)
   ============================================================= */

/* Off-screen heavy sections deferred rendering */
#whyUsSection,
#testimonialsSection,
#faqSection,
#specialistSection,
footer.footer-glow-bg {
  content-visibility: auto;
  contain-intrinsic-size: 1px 650px;
}

/* Smooth GPU acceleration on hover and animated cards */
.hover-lift,
.footer-social-btn,
.mouse-light-circle {
  will-change: transform;
  transform: translateZ(0);
}

/* Dynamic Announcement Ticker Marquee Keyframes */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

@keyframes marquee2 {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}

.animate-marquee {
  display: flex;
  min-width: 100%;
  animation: marquee 30s linear infinite;
  will-change: transform;
}

.animate-marquee2 {
  display: flex;
  min-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: marquee2 30s linear infinite;
  will-change: transform;
}

.overflow-x-hidden:hover .animate-marquee,
.overflow-x-hidden:hover .animate-marquee2 {
  animation-play-state: paused;
}

/* Prevent layout shifts on images and embeds */
img {
  aspect-ratio: attr(width) / attr(height);
}

/* Mobile Footer: Only show copyright on mobile devices (< 768px) */
@media (max-width: 767px) {
  #footerNewsletterBox,
  footer .grid.mb-14,
  #footerTrustBar,
  footer .footer-bottom-widgets-area,
  footer .footer-legal-navbar,
  footer .space-x-3\.5 {
    display: none !important;
  }
}

/* ==================== MOBILE HORIZONTAL SLIDERS (< 768px) ==================== */
@media (max-width: 767px) {
  #tourCardsContainer,
  #videoTestimonialsGrid,
  #latestBlogSlider,
  #pillarsCardsContainer,
  #servicesCardsContainer {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    padding-top: 6px !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #tourCardsContainer > article,
  #videoTestimonialsGrid > div,
  #latestBlogSlider > article,
  #pillarsCardsContainer > div,
  #servicesCardsContainer > div {
    width: 82vw !important;
    max-width: 320px !important;
    min-width: 275px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: center !important;
    box-sizing: border-box !important;
  }
}

/* ==================== ENHANCED MOBILE UI / UX OPTIMIZATIONS (< 768px) ==================== */
@media (max-width: 767px) {
  /* 1. Prevent accidental 300ms double-tap delay on interactive elements */
  a, button, input, select, textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 168, 181, 0.15);
  }

  /* 2. Enhanced readability & hierarchy on mobile headings */
  h1 {
    font-size: clamp(1.65rem, 6.5vw, 2.4rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
  }

  h2 {
    font-size: clamp(1.4rem, 5.2vw, 1.85rem) !important;
    line-height: 1.25 !important;
  }

  /* 3. Smooth overscroll & momentum for drawer menu & modal */
  #mobileMenu,
  #enquiryModal > div {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 4. Improve card tapability & active feedback on mobile */
  #tourCardsContainer > article:active,
  #pillarsCardsContainer > div:active,
  #servicesCardsContainer > div:active {
    transform: scale(0.985);
    transition: transform 0.15s ease;
  }

  /* 5. Mobile spacing buffer for floating bottom bar across full page */
  body {
    padding-bottom: 72px !important;
  }

  /* 6. Form inputs comfortable mobile tap targets (minimum 44px) */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select {
    min-height: 42px !important;
    font-size: 14px !important; /* Prevents auto-zoom on iOS Safari */
  }
}

/* Quote Strip High-Contrast White */
#quoteSection p {
  color: #ffffff !important;
}

/* 5 Signature Pillars Description High-Contrast White */
#pillarsSection .text-center p {
  color: #ffffff !important;
}

/* Kailash Aerial Spotlight Descriptions High-Contrast White */
#aerialSpotlightSection .text-sm,
#aerialSpotlightSection p {
  color: #ffffff !important;
}

/* Senior Yatra & Tour Specialists Description High-Contrast White */
#contactSection .space-y-4 > div,
#consultDescText,
#consultDescText * {
  color: #ffffff !important;
}

/* Pilgrim Video Testimonials Description High-Contrast White */
#ytDescText,
#ytDescText * {
  color: #ffffff !important;
}