/* ==========================================================
   BMGA Holidays Landing (Figma-first) - SINGLE FILE
   Path: public/assets/css/pages/holiday.css

   Goals:
   - Hero image fills full width (no left/right gaps)
   - Hero top is visible (no header overlap / no “missing top”)
   - Filter card size/width stays as-is (centered + neat overlap)
   - Consistent typography, spacing, cards, CTA
   - Scoped to .holidays-page to avoid theme/plugin conflicts
   ========================================================== */


/* -----------------------------
   0) Tokens + Page Base
------------------------------ */
.holidays-page{
  --h-accent:#d84b3d;
  --h-text:#0f172a;
  --h-muted:#64748b;
  --h-border: rgba(15,23,42,.10);
  --h-border2: rgba(15,23,42,.06);
  --h-shadow: 0 18px 40px rgba(15,23,42,.10);
  --h-shadow2: 0 26px 60px rgba(15,23,42,.14);
  --h-radius: 22px;

  background:#f6f7fb;
  color: var(--h-text);

  /* IMPORTANT:
     Do NOT use page padding-top for header offset.
     We handle hero spacing with .holiday-landing-hero { margin-top } */
  padding-top: 0;
  padding-bottom: 130px; /* space for floating chat/whatsapp widgets */
}

.holidays-page *{ box-sizing: border-box; }
.holidays-page h1, .holidays-page h2, .holidays-page h3, .holidays-page p{ margin:0; }
.holidays-page a{ text-decoration:none; }

/* Container – don’t allow theme to break widths */
.holidays-page .container,
.holidays-page .container-fluid{
  width: 100%;
}

/* -----------------------------
   1) HERO (Full-bleed card)
   Blade structure:
   section.holiday-landing-hero
     .container
       .holiday-landing-hero__card
         .holiday-landing-hero__bg (inline bg image)
         .holiday-landing-hero__overlay
         .holiday-landing-hero__content (text/actions/stats)
------------------------------ */

/* Header overlap fix:
   Push hero below fixed header/topbar. Adjust if needed. */
.holidays-page .holiday-landing-hero{
  position: relative;
  /* margin-top: 120px;      keep below fixed header */
  padding: 0;
  min-height: 560px;      /* full hero canvas height */
  border-radius: 0;       /* hero itself is full-bleed */
  overflow: hidden;
}
@media (max-width: 768px){
  .holidays-page .holiday-landing-hero{ margin-top: 96px; min-height: 520px; }
}


/* Full-width background layer */
.holidays-page .holiday-landing-hero__bg{
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  transform: scale(1.02);
  z-index: 0;
}

/* Full hero overlay */
.holidays-page .holiday-landing-hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(2,6,23,.70) 0%,
    rgba(2,6,23,.34) 55%,
    rgba(2,6,23,.12) 100%
  );
  z-index: 1;
}

/* Content container stays centered */
.holidays-page .holiday-landing-hero > .container{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  padding-left: 22px;
  padding-right: 22px;
}
@media (max-width: 768px){
  .holidays-page .holiday-landing-hero > .container{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Card now sits on top of hero background */
.holidays-page .holiday-landing-hero__card{
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;

  /* optional "glass" effect so background feels continuous */
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  /* backdrop-filter: blur(8px); */
  margin-top: 160px;

  /* keep space for the floating filter card below */
  min-height: 420px;
  box-shadow: 0 26px 60px rgba(15,23,42,.22);
}

/* Content inside the card */
.holidays-page .holiday-landing-hero__content{
  padding: 78px 16px 170px; /* bottom reserves filter overlap */
  text-align: center;
  color: #fff;
  max-width: 980px;
  margin: 0 auto;
}

.holidays-page .holiday-landing-hero__content h1{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 46px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.holidays-page .holiday-landing-hero__content p{
  margin: 0 auto 18px;
  max-width: 780px;
  font-size: 15px;
  color: rgba(255,255,255,.88);
}

/* FULL-BLEED: remove side padding only for hero container
   This fixes left/right “not filled” gaps. */
.holidays-page .holiday-landing-hero > .container{
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}





/* Background fills the hero card */
.holidays-page .holiday-landing-hero__bg{
  position:absolute;
  inset:0;
  background-size: cover !important;
  background-repeat: no-repeat !important;

  /* Show top portion better (you mentioned “upper portion not filled”) */
  background-position: center top !important;

  transform: scale(1.02);
}

/* Overlay for readability */
.holidays-page .holiday-landing-hero__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(2,6,23,.70) 0%,
    rgba(2,6,23,.36) 55%,
    rgba(2,6,23,.12) 100%
  );
}



/* Hero actions */
.holidays-page .holiday-landing-hero__actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.holidays-page .holiday-landing-hero__actions .btn{
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.holidays-page .holiday-landing-hero__actions .btn-primary{
  background: var(--h-accent) !important;
  border-color: var(--h-accent) !important;
}

.holidays-page .holiday-landing-hero__actions .btn-outline-light{
  border-width: 2px !important;
}

/* Stats row */
.holidays-page .holiday-landing-stats{
  margin: 20px auto 0;
  display:flex;
  justify-content:center;
  gap: 28px;
  flex-wrap: wrap;
}

.holidays-page .holiday-landing-stat{
  text-align:center;
  padding: 0;
}

.holidays-page .holiday-landing-stat__val{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
  color: #fff;
}

.holidays-page .holiday-landing-stat__label{
  margin-top: 3px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.80);
}

/* Hero responsive */
@media (max-width: 992px){
  .holidays-page .holiday-landing-hero__card{ min-height: 460px; }
  .holidays-page .holiday-landing-hero__content{ padding: 64px 14px 190px; }
  .holidays-page .holiday-landing-hero__content h1{ font-size: 34px; }
}

@media (max-width: 576px){
  .holidays-page .holiday-landing-hero__card{ min-height: 430px; border-radius: 18px; }
  .holidays-page .holiday-landing-hero__content{ padding: 56px 12px 210px; }
}


/* -----------------------------
   2) FILTER CARD (overlaps hero)
   Requirement: do NOT change filter card width/size.
------------------------------ */

.holidays-page .holiday-landing-filterbar{
  position: relative;
  z-index: 5;
  margin-top: -120px; /* overlap into hero */
  padding: 0 0 26px;
}

@media (max-width: 992px){
  .holidays-page .holiday-landing-filterbar{ margin-top: -92px; }
}
@media (max-width: 576px){
  .holidays-page .holiday-landing-filterbar{ margin-top: -84px; }
}

/* Keep filter card centered like your existing design:
   We DO NOT make this full-bleed. */
.holidays-page .holiday-landing-filterbar > .container{
  max-width: 1200px !important;
  padding-left: 22px;
  padding-right: 22px;
}
@media (max-width: 768px){
  .holidays-page .holiday-landing-filterbar > .container{
    padding-left: 14px;
    padding-right: 14px;
  }
}

.holidays-page .holiday-filter-card{
  background:#fff;
  border-radius: var(--h-radius);
  border: 1px solid var(--h-border2);
  box-shadow: var(--h-shadow2);
  padding: 18px;
}

/* Labels */
.holidays-page .holiday-filter-form .form-label{
  font-size: 12px;
  font-weight: 900;
  color: var(--h-muted);
  margin-bottom: 6px;
}

/* Controls */
.holidays-page .holiday-filter-form .form-select,
.holidays-page .holiday-filter-form .form-control{
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: none;
  font-size: 14px;
}

.holidays-page .holiday-filter-form .form-select:focus,
.holidays-page .holiday-filter-form .form-control:focus{
  border-color: rgba(216,75,61,.35);
  box-shadow: 0 0 0 4px rgba(216,75,61,.12);
}

/* Full width red search bar */
.holidays-page .holiday-filter-submit{
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-weight: 900;
  background: var(--h-accent) !important;
  border-color: var(--h-accent) !important;
}

.holidays-page .holiday-filter-submit:hover{ filter: brightness(.96); }


/* -----------------------------
   3) Sections / Headings
------------------------------ */
.holidays-page .holiday-landing-section{
  padding: 42px 0;
}

.holidays-page .holiday-landing-head{
  margin-bottom: 18px;
}

.holidays-page .holiday-landing-head h2{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--h-text);
  margin-bottom: 6px;
  font-size: 32px;
}

.holidays-page .holiday-landing-head p{
  color: var(--h-muted);
  max-width: 820px;
  margin: 0 auto;
  font-size: 14px;
}


/* -----------------------------
   4) Featured shell + dots
------------------------------ */
.holidays-page .holiday-featured-shell{
  background:#fff;
  border-radius: var(--h-radius);
  border: 1px solid var(--h-border2);
  box-shadow: var(--h-shadow);
  overflow: hidden;
}

/* Dot styling */
.holidays-page .featured-dots{
  padding: 12px 0 16px;
  display:flex;
  justify-content:center;
  gap: 8px;
  background:#fff;
}

.holidays-page .featured-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.20);
  cursor: pointer;
}

.holidays-page .featured-dot.is-active{
  background: var(--h-accent);
}


/* -----------------------------
   5) Package cards (safe defaults)
------------------------------ */
.holidays-page .holiday-packages-grid .col{
  display:flex;
}

.holidays-page .holiday-package-card{
  width: 100%;
  background:#fff;
  border-radius: 14px;
  border: 1px solid var(--h-border2);
  box-shadow: var(--h-shadow);
  overflow:hidden;
  display:flex;
  flex-direction: column;
}

.holidays-page .holiday-package-card .btn{
  border-radius: 12px;
  font-weight: 900;
}


/* -----------------------------
   6) CTA block
------------------------------ */
.holidays-page .holiday-cta{
  background: var(--h-accent);
  color:#fff;
  padding: 54px 0;
  margin-top: 18px;
}

.holidays-page .holiday-cta h2{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  font-size: 34px;
}

.holidays-page .holiday-cta p{
  color: rgba(255,255,255,.90);
  max-width: 860px;
  margin: 0 auto 16px;
  font-size: 14px;
}

.holidays-page .holiday-cta .btn{
  border-radius: 12px;
  font-weight: 900;
  padding: 10px 14px;
}