html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}
/* =====================================================
   Prebook Holidays – Shared Theme CSS
   Colors: Deep Forest Green + Saffron Orange
   Fonts:  Playfair Display (serif) + Inter (sans)
   ===================================================== */

/* --- Google Fonts are loaded in each HTML head --- */

/* Font utilities */
.font-serif { font-family: 'Playfair Display', serif; }
body { font-family: 'Inter', sans-serif; color: hsl(222,47%,11%); }

/* --- Color tokens --- */
:root {
  --primary:           hsl(168,60%,22%);
  --primary-fg:        hsl(0,0%,98%);
  --secondary:         hsl(38,96%,54%);
  --secondary-fg:      hsl(0,0%,9%);
  --background:        hsl(0,0%,100%);
  --foreground:        hsl(222,47%,11%);
  --card:              hsl(0,0%,100%);
  --muted:             hsl(210,40%,96%);
  --muted-fg:          hsl(215,16%,47%);
  --border:            hsl(214,32%,91%);
  --ring:              hsl(168,60%,22%);
}

/* --- Backgrounds --- */
.bg-primary         { background-color: var(--primary); }
.bg-secondary       { background-color: var(--secondary); }
.bg-background      { background-color: var(--background); }
.bg-card            { background-color: var(--card); }
.bg-muted           { background-color: var(--muted); }
.bg-gradient-hero   { background-image: linear-gradient(to bottom, rgba(10,44,37,0.55) 0%, rgba(10,44,37,0.35) 60%, rgba(10,44,37,0.70) 100%); }
.bg-gradient-saffron{ background: linear-gradient(135deg, hsl(38,96%,54%), hsl(25,96%,50%)); }
.bg-gradient-soft   { background: linear-gradient(135deg, hsl(168,30%,97%) 0%, hsl(38,30%,97%) 100%); }

/* --- Text colors --- */
.text-primary           { color: var(--primary); }
.text-primary-foreground{ color: var(--primary-fg); }
.text-secondary         { color: var(--secondary); }
.text-foreground        { color: var(--foreground); }
.text-muted-foreground  { color: var(--muted-fg); }

/* --- Borders --- */
.border-border   { border-color: var(--border); }
.border-input    { border-color: var(--border); }

/* --- Shadows --- */
.shadow-card-soft { box-shadow: 0 2px 20px -4px rgba(0,0,0,0.08), 0 1px 4px -1px rgba(0,0,0,0.04); }
.shadow-elegant   { box-shadow: 0 20px 60px -10px rgba(10,44,37,0.25), 0 4px 16px -4px rgba(0,0,0,0.1); }
.shadow-glow      { box-shadow: 0 4px 20px rgba(251,146,60,0.4); }

/* --- Transitions --- */
.transition-smooth { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }

/* --- Opacity helpers --- */
.bg-primary-foreground\/10 { background-color: rgba(255,255,255,0.10); }
.bg-primary-foreground\/5  { background-color: rgba(255,255,255,0.05); }
.border-primary-foreground\/20 { border-color: rgba(255,255,255,0.20); }
.border-primary-foreground\/10 { border-color: rgba(255,255,255,0.10); }
.border-primary-foreground\/15 { border-color: rgba(255,255,255,0.15); }
.border-primary-foreground\/80 { border-color: rgba(255,255,255,0.80); }
.text-primary\/90  { color: hsla(0,0%,98%,0.9); }
.text-secondary\/30{ color: rgba(251,146,60,0.3); }
.fill-secondary    { fill: hsl(38,96%,54%); }

/* --- Hover helpers --- */
.hover\:bg-primary-foreground:hover { background-color: hsl(0,0%,98%); }
.hover\:text-primary:hover          { color: hsl(168,60%,22%); }
.hover\:text-secondary:hover        { color: hsl(38,96%,54%); }
.hover\:border-secondary\/40:hover  { border-color: rgba(251,146,60,0.40); }
.hover\:shadow-elegant:hover        { box-shadow: 0 20px 60px -10px rgba(10,44,37,0.25), 0 4px 16px -4px rgba(0,0,0,0.1); }
.hover\:scale-105:hover             { transform: scale(1.05); }
.hover\:-translate-y-2:hover        { transform: translateY(-8px); }
.hover\:-translate-y-1:hover        { transform: translateY(-4px); }
.hover\:scale-110:hover             { transform: scale(1.1); }
.group:hover .group-hover\:scale-110 { transform: scale(1.10); }
.group:hover .group-hover\:scale-125 { transform: scale(1.25); }
.group:hover .group-hover\:opacity-40{ opacity: 0.40; }

/* --- Animations --- */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.7s ease both; }

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-down { animation: slide-down 0.35s ease both; }

/* --- WhatsApp button green --- */
.bg-whatsapp      { background-color: hsl(142,70%,40%); }
.hover\:bg-whatsapp-dark:hover { background-color: hsl(142,70%,36%); }

/* --- Misc --- */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* --- Page layout container --- */
.pk-container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .pk-container { padding-left: 3rem; padding-right: 3rem; }
}
@media (min-width: 1024px) {
  .pk-container { padding-left: 5rem; padding-right: 5rem; }
}

/* --- Section badge label --- */
.section-badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
}

/* --- Card hover lift --- */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px -10px rgba(10,44,37,0.25), 0 4px 16px -4px rgba(0,0,0,0.1);
}

/* --- Mobile nav toggle --- */
#mobile-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0; right: 0; bottom: 0;
    background: var(--primary);
    padding: 0;
    z-index: 9999;
  }
#mobile-nav.open { display: flex; }
#mobile-nav a {
    color: var(--primary-fg);
    font-size: 1.125rem;
    font-weight: 600;
    padding: 1.25rem 0;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    display: block;
    width: 100%;
  }

/* --- Popup overlay --- */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
.popup-overlay.open {
  display: flex;
}
.popup-box {
  background: white;
  border-radius: 1.25rem;
  max-width: 420px;
  width: 92%;
  padding: 2rem;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  animation: slide-down 0.3s ease both;
}
.popup-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted-fg);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.25rem;
}
.popup-close:hover { color: var(--foreground); }

/* --- Exit intent popup --- */
#exit-popup .popup-box {
  background: linear-gradient(135deg, hsl(168,60%,22%), hsl(168,50%,15%));
  color: white;
}
#exit-popup .popup-close { color: rgba(255,255,255,0.7); }
#exit-popup .popup-close:hover { color: white; }

/* --- Form inputs --- */
.pk-input {
  display: flex;
  width: 100%;
  height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--background);
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.pk-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10,44,37,0.12);
}
.pk-input::placeholder { color: var(--muted-fg); }
textarea.pk-input { height: auto; min-height: 100px; resize: vertical; }

.pk-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.375rem;
}

/* --- Buttons --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 2rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, hsl(38,96%,54%), hsl(25,96%,50%));
  color: hsl(0,0%,9%);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 20px rgba(251,146,60,0.4);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary:hover { transform: scale(1.05); box-shadow: 0 20px 60px -10px rgba(10,44,37,0.25); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 2rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.10);
  color: hsl(0,0%,98%);
  border: 2px solid rgba(255,255,255,0.80);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  text-decoration: none;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.btn-outline:hover { background: white; color: var(--primary); }

.btn-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.75rem;
  border-radius: 0.5rem;
  background: hsl(142,70%,40%);
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-green:hover { background: hsl(142,70%,36%); }

/* --- Star rating display --- */
.stars { display: inline-flex; gap: 2px; }
.star  { width: 1rem; height: 1rem; fill: hsl(38,96%,54%); color: hsl(38,96%,54%); }

/* --- Responsive helpers --- */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* --- Custom Scrollbar --- */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--muted-fg);
}

/* Theme aware logo */
.logo-light { display: none !important; }
.logo-dark { display: block !important; }
@media (prefers-color-scheme: light) {
  .logo-light { display: block !important; }
  .logo-dark { display: none !important; }
}