/* ===== Design tokens ===== */
:root{
  
  /* … your existing tokens … */
  --sidebar-w: 248px;   /* desktop sidebar width */


  --blue:#1565c0;        /* primary */
  --blue-dark:#0d47a1;   /* dark blue */
  --gold:#ffb300;        /* accent */
  --bg:#000000;
  --ink:#1f2933;
  --muted:#637187;
  --card:#ffffff;
  --radius:16px;
  --shadow:0 12px 28px rgba(15,23,42,.12);
  --border:1px solid rgba(148,163,184,.28);
}
 
/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0}
html, body { overflow-x:hidden; } /* avoid sideways scroll from full-bleed */
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background: var(--bg);  /* solid black */
    
    
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* Sidebar column layout */
.nav{
  height: 100%;
  padding: 1.25rem 1rem 1rem 1.25rem;  /* ↑ more top/left padding */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

/* extra gentle offset for the brand row */
.brand{
  margin: .25rem 0 0 .25rem;  /* ↓ and → a little */
}

/* slightly smaller brand text so it breathes */
.brand-name{
  color:#fff;
  font-weight:800;
  font-size:.95rem;           /* was ~1.06rem */
}


/* ===== Layout ===== */
.container{max-width:1120px;margin:auto;padding:1.25rem 1.25rem 3rem}

/* Header / Nav */

  /* === Vertical left sidebar (desktop) === */
header{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;                 /* full viewport height */
  width: var(--sidebar-w);
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);     /* translucent dark over your black page */
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 0;                    /* remove old bottom border */
}


/* Brand */
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.logo-wrap{
  width: 40px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  display:inline-grid;place-items:center;background:#fff;
  border:2px solid rgba(21,101,192,.14);box-shadow:0 2px 10px rgba(15,23,42,.08);
  -webkit-mask-image:radial-gradient(circle,#000 99%,transparent 100%);
          mask-image:radial-gradient(circle,#000 99%,transparent 100%);
}
.brand-logo{width:100%;height:100%;object-fit:contain;display:block}
.brand-name{font-weight:800;color:#dbe0e8;font-size:1.06rem}
@media (max-width:560px){
  .logo-wrap{width:34px}
  .brand-name{font-size:1rem}
  .nav{
  /* remove max-width centering, this is a column now */
  height: 100%;
  padding: 1rem;
  margin: 0;

  display: flex;
  flex-direction: column;   /* vertical */
  align-items: stretch;     /* take full width */
  gap: 1rem;
}
.brand{
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
}
.brand-name{
  color: #fff;                  /* reads over dark glass */
  font-weight: 800;
}

.nav-cta{
  margin-left: 0;
  margin-top: auto;             /* push to bottom of sidebar */
  display: grid;
  gap: .6rem;
}
.nav-cta .btn{
  justify-content: center;
  width: 100%;                  /* wide buttons in the rail */
}


}
/* main content needs space to the right of the sidebar */
main.container{
  margin-left: calc(var(--sidebar-w) + 24px);
}


/* Buttons */
.btn{
  border:none;border-radius:999px;padding:.65rem 1.15rem;cursor:pointer;
  font-weight:700;font-size:.95rem;display:inline-flex;gap:.4rem;align-items:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease
}
.btn-primary{
  color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  box-shadow:0 8px 20px rgba(21,101,192,.35)
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(21,101,192,.45)}
.btn-ghost{background:transparent;border:var(--border);color:var(--ink)}
.btn-ghost:hover{background:rgba(21,101,192,.06);border-color:rgba(21,101,192,.4)}

/* ===== Hero (top in main) ===== */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:1.6rem;align-items:center;padding:1.25rem 0 2rem}
.eyebrow{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1{font-size:clamp(1.8rem,2.6vw + 1rem,3rem);margin:.5rem 0}
.gradient{background:linear-gradient(90deg,var(--blue-dark),var(--gold));-webkit-background-clip:text;color:transparent}
.sub{color:var(--muted);max-width:40ch;margin:.75rem 0 1.25rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.card-hero{
  border-radius:28px;background:radial-gradient(1000px 500px at 10% 10%, #0b1c3b 0, #020617 60%);
  color:#e5e7eb;box-shadow:0 24px 60px rgba(2,6,23,.6);padding:1.15rem 1.25rem;position:relative;overflow:hidden
}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;
  padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(148,163,184,.45);
  background:rgba(2,6,23,.35)
}
.card-hero small{opacity:.85}

/* ===== Sections ===== */
section{margin:2.25rem 0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.section-head h2{margin:0;font-size:1.35rem}
.muted{color:var(--muted);font-size:.95rem}

/* ===== Facts ===== */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.fact{
  background:var(--card);border:var(--border);border-radius:var(--radius);
  padding:.9rem;box-shadow:var(--shadow);display:grid;gap:.25rem
}
.fact b{font-size:1.05rem}
.note{font-size:.85rem;color:var(--muted);margin-top:.5rem}

/* ===== Itinerary (premium cards) ===== */
.itinerary{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;position:relative;
}
.itinerary::before{
  content:"";position:absolute;top:26px;left:12px;right:12px;height:2px;
  background:linear-gradient(90deg, rgba(21,101,192,.18), rgba(255,179,0,.18));border-radius:2px;
}
.step-card{
  position:relative;background:var(--card);border:var(--border);border-radius:20px;
  padding:1rem 1rem 1.1rem;box-shadow:var(--shadow);overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;isolation:isolate;
}
.step-card:hover{transform:translateY(-2px);box-shadow:0 22px 44px rgba(13,71,161,.18);
  background:linear-gradient(180deg,#fff,rgba(245,247,251,.65));
}
.step-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.step-badge{
  font-weight:800;font-size:.8rem;letter-spacing:.02em;padding:.32rem .6rem;border-radius:999px;
  color:#0d47a1;background:linear-gradient(135deg, rgba(21,101,192,.12), rgba(255,179,0,.12));
  border:1px solid rgba(148,163,184,.40);
}
.step-dot{width:18px;height:18px;border-radius:999px;background:
  radial-gradient(circle at 35% 35%, #ffb300 0 35%, #1565c0 36% 100%);box-shadow:0 4px 16px rgba(21,101,192,.25)}
.step-title{margin:.25rem 0 .35rem;font-size:1.12rem;line-height:1.25;font-weight:900;color:var(--ink);
  display:flex;align-items:baseline;gap:.5rem}
.step-icon{font-size:1.25rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}
.step-text{color:var(--muted);margin:.2rem 0 .7rem}
.step-tags{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;list-style:none}
.step-tags li{
  font-size:.78rem;font-weight:700;padding:.28rem .55rem;border-radius:999px;
  background:#fff;border:1px solid rgba(148,163,184,.45);color:#0f172a;
}
@media (max-width:980px){ .itinerary{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .itinerary{ grid-template-columns:1fr } .itinerary::before{display:none} }
@media (prefers-reduced-motion:reduce){ .step-card{ transition:none } }

/* ===== Gallery (scoped) ===== */
.ny-gallery { --blue:#1565c0; --blueD:#0d47a1; --gold:#ffb300; --bg:#f5f7fb; --ink:#122033; --muted:#637187; --card:#fff; --rad:16px; --shadow:0 14px 34px rgba(15,23,42,.14); }
.ny-gallery * { box-sizing:border-box }

.nyg-head{display:grid;gap:.4rem;margin-bottom:1rem}
.nyg-head h2{margin:0;font-size:1.35rem;color:var(--ink)}
.nyg-sub{margin:0;color:var(--muted)}

/* Gallery hero */
.nyg-hero{position:relative;display:block;width:100%;border:0;padding:0;cursor:pointer;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:#000;isolation:isolate}
.nyg-hero-img{width:100%;aspect-ratio:16/9;background:url('../tiniri-1.png') center/cover no-repeat;filter:saturate(105%) contrast(102%)}
.nyg-hero-ribbon{
  position:absolute;top:16px;left:16px;padding:.35rem .6rem;font-size:.82rem;font-weight:700;color:#fff;border-radius:999px;
  background:linear-gradient(135deg,var(--blueD),var(--gold));box-shadow:0 10px 24px rgba(13,71,161,.35)
}
.nyg-hero-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;
  padding:1rem;background:linear-gradient(12deg, rgba(13,71,161,.55), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.35), transparent 40%);color:#fff
}
.nyg-hero-title{font-size:1.15rem;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.nyg-hero-cta{margin-left:auto;font-weight:800;padding:.6rem .9rem;border-radius:999px;background:linear-gradient(135deg,var(--blue),var(--blueD));box-shadow:0 10px 24px rgba(21,101,192,.35)}

/* Widget under hero */
.ny-gallery .nyg-widget{margin-top:.9rem}
.nygw-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.nygw-card{background:#fff;border:1px solid rgba(148,163,184,.35);border-radius:16px;box-shadow:0 14px 34px rgba(15,23,42,.12);padding:.9rem;display:grid;gap:.55rem}
.nygw-title{font-weight:900;color:#122033}
.nygw-note{color:#637187;font-size:.85rem}
.n-urgency .nygw-count{display:flex;gap:.55rem;align-items:flex-end;flex-wrap:wrap}
.n-urgency .nygw-count span{
  display:grid;place-items:center;padding:.35rem .55rem;border-radius:12px;background:linear-gradient(135deg, rgba(21,101,192,.10), rgba(255,179,0,.10));
  border:1px solid rgba(148,163,184,.35);min-width:66px
}
.n-urgency .nygw-count b{font-size:1.25rem}
.n-urgency .nygw-count em{font-style:normal;font-size:.75rem;color:#475569}
.n-availability .nygw-bar{height:12px;border-radius:999px;background:#eef2f7;overflow:hidden;border:1px solid rgba(148,163,184,.35)}
.n-availability .nygw-fill{height:100%;background:linear-gradient(90deg,#1565c0,#ffb300);width:0%;transition:width .6s cubic-bezier(.22,1,.36,1)}
.n-availability .nygw-meta{font-weight:800}
.n-price .nygw-form{display:grid;gap:.6rem}
.n-price label{display:grid;gap:.3rem;font-weight:700}
.n-price input{border:1px solid rgba(148,163,184,.7);border-radius:10px;padding:.55rem .6rem;font:inherit}
.n-price input:focus{outline:none;border-color:#1565c0;box-shadow:0 0 0 1px rgba(21,101,192,.25)}
.n-price .nygw-total{font-weight:900;color:#0d47a1}
.n-price .nygw-cta{display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width:980px){ .nygw-row{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .nygw-row{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .n-availability .nygw-fill{transition:none} }

/* Lightbox */
.nyg-lightbox[aria-hidden="true"]{display:none}
.nyg-lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center}
.nyg-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.6);backdrop-filter:blur(6px)}
.nyg-modal{position:relative;width:min(100%,980px);margin:1rem;background:rgba(255,255,255,.98);border-radius:16px;box-shadow:0 24px 64px rgba(2,6,23,.45);overflow:hidden;display:grid;grid-template-rows:1fr auto}
.nyg-stage{background:#000;display:grid;place-items:center;position:relative;z-index:1}
.nyg-stage img,.nyg-stage iframe{max-width:100%;max-height:74vh;width:auto;height:auto}
.nyg-meta{display:flex;justify-content:space-between;gap:.75rem;align-items:center;padding:.6rem .75rem;color:#0f172a;background:#f8fafc}
.nyg-captions{display:grid;line-height:1.25}
.nyg-cap-en{font-weight:700}
.nyg-cap-fr{opacity:.9;font-size:.95em}
.nyg-close,.nyg-nav{position:absolute;z-index:5;pointer-events:auto}
.nyg-close{top:.5rem;right:.5rem;border:none;background:#fff;border-radius:999px;width:40px;height:40px;font-size:1rem;font-weight:800;box-shadow:0 8px 18px rgba(15,23,42,.25);cursor:pointer}
.nyg-nav{top:50%;transform:translateY(-50%);border:none;background:rgba(255,255,255,.9);width:44px;height:64px;font-size:1.6rem;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(15,23,42,.3)}
.nyg-prev{left:.5rem;border-radius:12px 6px 6px 12px}
.nyg-next{right:.5rem;border-radius:6px 12px 12px 6px}
@media (max-width:560px){ .nyg-modal{margin:.5rem} .nyg-nav{width:38px;height:56px} }
body.nyg-locked{overflow:hidden}

/* Hover behavior — keep things still (prevents slide) */
.nyg-card:hover{transform:none}
.nyg-card:hover::before{animation:none}
.nyg-hero.hero-bleed:hover{transform:translateX(-50%)} /* keep centering on hover */
.nyg-hero:not(.hero-bleed):hover{transform:none}



/* ===== Booking ===== */
.booking{
  background:rgba(248,250,252,.9);border:1px solid rgba(148,163,184,.4);
  border-radius:20px;box-shadow:0 16px 36px rgba(15,23,42,.12);
  display:grid;grid-template-columns:1.05fr 1fr;gap:1.2rem;padding:1.25rem
}
.sel{border-right:1px dashed rgba(148,163,184,.45);padding-right:1rem}
.sel h3{margin:.25rem 0 .35rem}
.sel p{margin:.15rem 0;color:var(--muted)}
form{display:grid;gap:.55rem}
label{font-weight:600;font-size:.9rem}
input,textarea,select{
  width:100%;border-radius:10px;border:1px solid rgba(148,163,184,.7);padding:.55rem .7rem;
  font:inherit;background:#fff;transition:border-color .15s ease, box-shadow .15s ease
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 1px rgba(21,101,192,.25)}
textarea{min-height:84px;resize:vertical}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.total{margin:.25rem 0 .4rem;font-weight:800;color:var(--blue-dark)}
.success{
  display:none;margin-top:.5rem;font-size:.9rem;border-radius:10px;padding:.6rem .75rem;
  background:rgba(46,125,50,.06);border:1px solid rgba(46,125,50,.35);color:#2e7d32
}
.hint{font-size:.82rem;color:var(--muted)}
footer{
  margin-top:2rem;padding-top:1rem;border-top:var(--border);
  display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;color:var(--muted);font-size:.9rem
}

/* ===== Responsive fallbacks ===== */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .card-hero{margin-top:.5rem}
  .facts,.itinerary,.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .booking{grid-template-columns:1fr}
  .sel{border-right:0;border-bottom:1px dashed rgba(148,163,184,.45);padding-right:0;padding-bottom:1rem}
}
@media (max-width:560px){
  .facts,.itinerary,.gallery{grid-template-columns:1fr}
}

/* ===== Motion-safe ===== */
@media (prefers-reduced-motion:reduce){
  .nyg-card,.nyg-hero,.step-card,.btn{transition:none}
}
/* === Hero VIDEO: force clean 16:9 inside the container === */
.nyg-hero { height: auto; }                   /* never force height on the wrapper */

.nyg-hero .nyg-hero-video {
  display: block;
  width: 100%;
  height: auto;                               /* let aspect-ratio define the height */
  aspect-ratio: 16 / 9;                       /* keep the banner area consistent */
  object-fit: cover;
  object-position: 50% 20%;                          /* crop nicely within 16:9 */
}

/* If you ever switch to a YouTube embed for the hero: */
.nyg-hero .nyg-hero-ytwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.nyg-hero .nyg-hero-ytwrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
/* WhatsApp link: force white text in the header */
header .nav a[href*="wa.me"]{
  color: #ffffff !important;
}
header .nav a[href*="wa.me"]:visited{
  color: #ffffff !important;
}


/* === Hero framing nudges (video / YouTube / background) === */

/* 1) Native <video> in the hero */
.nyg-hero video{
  /* keep your ratio/cover – already set elsewhere – and nudge framing up */
  object-position: 50% 35% !important; /* ↑ move up (lower is 50%, higher is 0%) */
}

/* 2) YouTube iframe variant wrapped in a 16:9 box */
.nyg-hero .nyg-hero-ytwrap{ overflow: hidden; }
.nyg-hero .nyg-hero-ytwrap iframe{
  transform: translateY(-4%);
}
@media (max-width: 560px){
  .nyg-hero .nyg-hero-ytwrap iframe{ transform: translateY(-2%); }
}

/* 3) Background-image variant */
.nyg-hero .nyg-hero-img{
  background-position: 50% 35% !important;
}
/* Umrah CTA sits under the brand in the left sidebar */
.nav .btn-umrah{
  align-self: stretch;               /* take the sidebar width */
  margin: .25rem .75rem 0 .25rem;    /* a little space from logo & rail edges */
  justify-content: center;
  white-space: nowrap;
}

/* Keep nice spacing if logo gets smaller/larger */
.brand + .btn-umrah{
  margin-top: .5rem;
}

/* Mobile (header becomes a top bar): place Umrah on the right, inline */
@media (max-width: 960px){
  .nav{
    flex-direction: row;
    align-items: center;
  }
  .brand + .btn-umrah{
    margin-top: 0;
    margin-left: auto;               /* push it to the right on the top bar */
    margin-right: .75rem;
  }
  .nav .btn-umrah{
    align-self: center;
    width: auto;                     /* compact pill on mobile */
  }
}
/* ——— Sidebar: space + label + links under WhatsApp ——— */
.nav-sep{
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: .35rem .5rem .25rem;
}

.nav-sections{
  color: #e5e7eb;
  padding: .1rem .25rem .6rem;
  display: grid;
  gap: .35rem;
}

.nav-label{
  margin: .15rem .55rem .1rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

.nav-link{
  display: block;
  padding: .55rem .75rem;
  margin: 0 .3rem;
  border-radius: 12px;
  color: #e5e7eb;
  background: transparent;
  border: 1px solid rgba(255,255,255,.06);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.nav-link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

.nav-link.is-disabled{
  opacity: .75;
  cursor: default;
}

.nav-hint{
  margin: .2rem .55rem 0;
  color: rgba(255,255,255,.45);
  font-size: .78rem;
}

/* Mobile: keep the top bar clean */
@media (max-width: 960px){
  .nav-sep,
  .nav-sections{
    display: none;
  }
}
/* =========================
   RESPONSIVE REFINEMENTS
   ========================= */

/* sensible layout tokens for spacing + topbar height */
:root{
  --gutter: clamp(12px, 3vw, 20px);
  --topbar-h: 64px;                    /* height of mobile top bar */
}

/* make the container breathe on all screens */
.container{
  max-width: 1120px;
  padding: var(--gutter) var(--gutter) 3rem;
}

/* ---------- TABLET & DOWN (switch sidebar → top bar) ---------- */
@media (max-width: 960px){

  /* header becomes a fixed, full-width top bar */
  header{
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: var(--topbar-h);
    background: rgba(0,0,0,0.45);
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    z-index: 200;
  }

  /* nav row inside the top bar */
  .nav{
    height: var(--topbar-h);
    padding: .5rem .75rem;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
  }

  /* brand & logo sizing in the bar */
  .logo-wrap{ width: 34px; }
  .brand-name{ font-size: .98rem; color: #fff; }

  /* place Umrah CTA to the right in the bar */
  .brand + .btn-umrah{
    margin: 0 0 0 auto;               /* push to right */
  }
  .nav .btn-umrah{
    width: auto;                       /* compact pill */
    align-self: center;
    padding: .55rem .9rem;
  }

  /* hide the extra section links in the top bar */
  .nav-sep, .nav-sections{ display: none; }

  /* main content no longer needs left sidebar space,
     add top padding to clear the fixed bar */
  main.container{
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + var(--gutter));
  }

  /* cards & grids tighten up */
  .section-head h2{ font-size: 1.25rem; }
  .nygw-row{ grid-template-columns: 1fr 1fr; }
}

/* ---------- SMALL PHONES ---------- */
@media (max-width: 560px){

  /* hero/video: keep crisp aspect & readable overlay */
  .nyg-hero{ border-radius: 18px; }
  .nyg-hero-title{ font-size: 1.05rem; }
  .nyg-hero-cta{ padding: .5rem .8rem; }

  /* single-column grids where needed */
  .facts, .itinerary, .gallery, .nygw-row{ grid-template-columns: 1fr; }

  /* booking block stacks */
  .booking{
    grid-template-columns: 1fr;
    gap: .9rem;
    padding: .95rem;
  }
  .sel{
    border-right: 0;
    border-bottom: 1px dashed rgba(148,163,184,.45);
    padding: 0 0 1rem 0;
  }

  /* friendlier touch targets */
  .btn{ font-size: .92rem; padding: .6rem .95rem; }

  /* smaller brand text on very tight screens */
  .brand-name{ font-size: .92rem; }
}

/* ---------- EXTRA SMALL (older 360-375px phones) ---------- */
@media (max-width: 380px){
  .brand-name{ display: none; }           /* keep only the logo */
  .nav{ gap: .5rem; }
  .nyg-hero-title{ font-size: .98rem; }
}

/* ---------- Safe-area support (iOS notch) ---------- */
@supports (padding: max(0px)) {
  @media (max-width: 960px){
    header{ padding-left: max(.75rem, env(safe-area-inset-left));
            padding-right:max(.75rem, env(safe-area-inset-right)); }
    main.container{
      padding-top: calc(var(--topbar-h) + var(--gutter) + env(safe-area-inset-top));
    }
  }
}

/* ---------- Minor polish & guards ---------- */
img, video{ max-width:100%; height:auto; }
.nyg-hero .nyg-hero-video{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
html, body{ overflow-x: hidden; }  /* belt & suspenders */
/* ===== Design tokens ===== */
:root{
  /* … your existing tokens … */
  --sidebar-w: 248px;   /* desktop sidebar width */

  --blue:#1565c0;        /* primary */
  --blue-dark:#0d47a1;   /* dark blue */
  --gold:#ffb300;        /* accent */
  --bg:#000000;
  --ink:#1f2933;
  --muted:#637187;
  --card:#ffffff;
  --radius:16px;
  --shadow:0 12px 28px rgba(15,23,42,.12);
  --border:1px solid rgba(148,163,184,.28);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0}
html, body { overflow-x:hidden; } /* avoid sideways scroll from full-bleed */
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background: var(--bg);  /* solid black */
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Sidebar column layout */
.nav{
  height: 100%;
  padding: 1.25rem 1rem 1rem 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

/* extra gentle offset for the brand row */
.brand{
  margin: .25rem 0 0 .25rem;
}

/* slightly smaller brand text so it breathes */
.brand-name{
  color:#fff;
  font-weight:800;
  font-size:.95rem;
}

/* ===== Layout ===== */
.container{max-width:1120px;margin:auto;padding:1.25rem 1.25rem 3rem}

/* Header / Nav */
/* === Vertical left sidebar (desktop) === */
header{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-w);
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 0;
}

/* Brand */
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.logo-wrap{
  width: 40px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  display:inline-grid;place-items:center;background:#fff;
  border:2px solid rgba(21,101,192,.14);box-shadow:0 2px 10px rgba(15,23,42,.08);
  -webkit-mask-image:radial-gradient(circle,#000 99%,transparent 100%);
          mask-image:radial-gradient(circle,#000 99%,transparent 100%);
}
.brand-logo{width:100%;height:100%;object-fit:contain;display:block}
.brand-name{font-weight:800;color:#c3cfe1;font-size:1.06rem}

@media (max-width:560px){
  .logo-wrap{width:34px}
  .brand-name{font-size:1rem}
  .nav{
    height: 100%;
    padding: 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .brand{
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
  }
  .brand-name{
    color: #fff;
    font-weight: 800;
  }

  .nav-cta{
    margin-left: 0;
    margin-top: auto;
    display: grid;
    gap: .6rem;
  }
  .nav-cta .btn{
    justify-content: center;
    width: 100%;
  }
}

/* main content needs space to the right of the sidebar */
main.container{
  margin-left: calc(var(--sidebar-w) + 24px);
}

/* Buttons */
.btn{
  border:none;border-radius:999px;padding:.65rem 1.15rem;cursor:pointer;
  font-weight:700;font-size:.95rem;display:inline-flex;gap:.4rem;align-items:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease
}
.btn-primary{
  color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  box-shadow:0 8px 20px rgba(21,101,192,.35)
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(21,101,192,.45)}
.btn-ghost{background:transparent;border:var(--border);color:var(--ink)}
.btn-ghost:hover{background:rgba(21,101,192,.06);border-color:rgba(21,101,192,.4)}

/* ===== Hero (top in main) ===== */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:1.6rem;align-items:center;padding:1.25rem 0 2rem}
.eyebrow{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1{font-size:clamp(1.8rem,2.6vw + 1rem,3rem);margin:.5rem 0}
.gradient{background:linear-gradient(90deg,var(--blue-dark),var(--gold));-webkit-background-clip:text;color:transparent}
.sub{color:var(--muted);max-width:40ch;margin:.75rem 0 1.25rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.card-hero{
  border-radius:28px;background:radial-gradient(1000px 500px at 10% 10%, #0b1c3b 0, #020617 60%);
  color:#e5e7eb;box-shadow:0 24px 60px rgba(2,6,23,.6);padding:1.15rem 1.25rem;position:relative;overflow:hidden
}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;
  padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(11, 11, 11, 0.45);
  background:rgba(2,6,23,.35)
}
.card-hero small{opacity:.85}

/* ===== Sections ===== */
section{margin:2.25rem 0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.section-head h2{margin:0;font-size:1.35rem}
.muted{color:var(--muted);font-size:.95rem}

/* ===== Facts ===== */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.fact{
  background:var(--card);border:var(--border);border-radius:var(--radius);
  padding:.9rem;box-shadow:var(--shadow);display:grid;gap:.25rem
}
.fact b{font-size:1.05rem}
.note{font-size:.85rem;color:var(--muted);margin-top:.5rem}

/* ===== Itinerary (premium cards) ===== */
.itinerary{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;position:relative;
}
.itinerary::before{
  content:"";position:absolute;top:26px;left:12px;right:12px;height:2px;
  background:linear-gradient(90deg, rgba(21,101,192,.18), rgba(255,179,0,.18));border-radius:2px;
}
.step-card{
  position:relative;background:var(--card);border:var(--border);border-radius:20px;
  padding:1rem 1rem 1.1rem;box-shadow:var(--shadow);overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;isolation:isolate;
}
.step-card:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 44px rgba(13,71,161,.18);
  background:linear-gradient(180deg,#fff,rgba(245,247,251,.65));
}
.step-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.step-badge{
  font-weight:800;font-size:.8rem;letter-spacing:.02em;padding:.32rem .6rem;border-radius:999px;
  color:#0d47a1;background:linear-gradient(135deg, rgba(21,101,192,.12), rgba(255,179,0,.12));
  border:1px solid rgba(148,163,184,.40);
}
.step-dot{
  width:18px;height:18px;border-radius:999px;
  background:radial-gradient(circle at 35% 35%, #ffb300 0 35%, #1565c0 36% 100%);
  box-shadow:0 4px 16px rgba(21,101,192,.25)
}
.step-title{
  margin:.25rem 0 .35rem;font-size:1.12rem;line-height:1.25;font-weight:900;color:var(--ink);
  display:flex;align-items:baseline;gap:.5rem
}
.step-icon{font-size:1.25rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}
.step-text{color:var(--muted);margin:.2rem 0 .7rem}
.step-tags{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;list-style:none}
.step-tags li{
  font-size:.78rem;font-weight:700;padding:.28rem .55rem;border-radius:999px;
  background:#fff;border:1px solid rgba(148,163,184,.45);color:#0f172a;
}
@media (max-width:980px){ .itinerary{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .itinerary{ grid-template-columns:1fr } .itinerary::before{display:none} }
@media (prefers-reduced-motion:reduce){ .step-card{ transition:none } }

/* ===== Gallery (scoped) ===== */
.ny-gallery { --blue:#1565c0; --blueD:#0d47a1; --gold:#ffb300; --bg:#f5f7fb; --ink:#122033; --muted:#637187; --card:#fff; --rad:16px; --shadow:0 14px 34px rgba(15,23,42,.14); }
.ny-gallery * { box-sizing:border-box }

.nyg-head{display:grid;gap:.4rem;margin-bottom:1rem}
.nyg-head h2{margin:0;font-size:1.35rem;color:var(--ink)}
.nyg-sub{margin:0;color:var(--muted)}

/* Gallery hero */
.nyg-hero{
  position:relative;display:block;width:100%;border:0;padding:0;
  cursor:pointer;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  background:#000;isolation:isolate
}
.nyg-hero-img{
  width:100%;aspect-ratio:16/9;
  background:url('../tiniri-1.png') center/cover no-repeat;
  filter:saturate(105%) contrast(102%)
}
.nyg-hero-ribbon{
  position:absolute;top:16px;left:16px;padding:.35rem .6rem;font-size:.82rem;font-weight:700;color:#fff;border-radius:999px;
  background:linear-gradient(135deg,var(--blue-dark),var(--gold));box-shadow:0 10px 24px rgba(13,71,161,.35)
}
.nyg-hero-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;
  padding:1rem;
  background:linear-gradient(12deg, rgba(13,71,161,.55), transparent 45%),
             linear-gradient(180deg, rgba(0,0,0,.35), transparent 40%);
  color:#fff
}
.nyg-hero-title{
  font-size:1.15rem;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.45)
}
.nyg-hero-cta{
  margin-left:auto;font-weight:800;padding:.6rem .9rem;border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  box-shadow:0 10px 24px rgba(21,101,192,.35)
}

/* New: hero CTA group for gallery CTA + Umra button */
.nyg-hero-cta-group{
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

/* Widget under hero */
.ny-gallery .nyg-widget{margin-top:.9rem}
.nygw-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.nygw-card{
  background:#fff;border:1px solid rgba(148,163,184,.35);border-radius:16px;
  box-shadow:0 14px 34px rgba(15,23,42,.12);padding:.9rem;display:grid;gap:.55rem
}
.nygw-title{font-weight:900;color:#122033}
.nygw-note{color:#637187;font-size:.85rem}
.n-urgency .nygw-count{display:flex;gap:.55rem;align-items:flex-end;flex-wrap:wrap}
.n-urgency .nygw-count span{
  display:grid;place-items:center;padding:.35rem .55rem;border-radius:12px;
  background:linear-gradient(135deg, rgba(21,101,192,.10), rgba(255,179,0,.10));
  border:1px solid rgba(148,163,184,.35);min-width:66px
}
.n-urgency .nygw-count b{font-size:1.25rem}
.n-urgency .nygw-count em{font-style:normal;font-size:.75rem;color:#475569}
.n-availability .nygw-bar{
  height:12px;border-radius:999px;background:#eef2f7;overflow:hidden;
  border:1px solid rgba(148,163,184,.35)
}
.n-availability .nygw-fill{
  height:100%;background:linear-gradient(90deg,#1565c0,#ffb300);
  width:0%;transition:width .6s cubic-bezier(.22,1,.36,1)
}
.n-availability .nygw-meta{font-weight:800}
.n-price .nygw-form{display:grid;gap:.6rem}
.n-price label{display:grid;gap:.3rem;font-weight:700}
.n-price input{
  border:1px solid rgba(148,163,184,.7);border-radius:10px;padding:.55rem .6rem;font:inherit
}
.n-price input:focus{
  outline:none;border-color:#1565c0;box-shadow:0 0 0 1px rgba(21,101,192,.25)
}
.n-price .nygw-total{font-weight:900;color:#0d47a1}
.n-price .nygw-cta{display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width:980px){ .nygw-row{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .nygw-row{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .n-availability .nygw-fill{transition:none} }

/* Lightbox */
.nyg-lightbox[aria-hidden="true"]{display:none}
.nyg-lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center}
.nyg-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.6);backdrop-filter:blur(6px)}
.nyg-modal{
  position:relative;width:min(100%,980px);margin:1rem;
  background:rgba(255,255,255,.98);border-radius:16px;
  box-shadow:0 24px 64px rgba(2,6,23,.45);overflow:hidden;
  display:grid;grid-template-rows:1fr auto
}
.nyg-stage{background:#000;display:grid;place-items:center;position:relative;z-index:1}
.nyg-stage img,.nyg-stage iframe{max-width:100%;max-height:74vh;width:auto;height:auto}
.nyg-meta{
  display:flex;justify-content:space-between;gap:.75rem;align-items:center;
  padding:.6rem .75rem;color:#0f172a;background:#f8fafc
}
.nyg-captions{display:grid;line-height:1.25}
.nyg-cap-en{font-weight:700}
.nyg-cap-fr{opacity:.9;font-size:.95em}
.nyg-close,.nyg-nav{position:absolute;z-index:5;pointer-events:auto}
.nyg-close{
  top:.5rem;right:.5rem;border:none;background:#fff;border-radius:999px;
  width:40px;height:40px;font-size:1rem;font-weight:800;
  box-shadow:0 8px 18px rgba(15,23,42,.25);cursor:pointer
}
.nyg-nav{
  top:50%;transform:translateY(-50%);border:none;
  background:rgba(255,255,255,.9);width:44px;height:64px;
  font-size:1.6rem;font-weight:900;cursor:pointer;
  box-shadow:0 10px 24px rgba(15,23,42,.3)
}
.nyg-prev{left:.5rem;border-radius:12px 6px 6px 12px}
.nyg-next{right:.5rem;border-radius:6px 12px 12px 6px}
@media (max-width:560px){
  .nyg-modal{margin:.5rem}
  .nyg-nav{width:38px;height:56px}
}
body.nyg-locked{overflow:hidden}

/* Hover behavior — keep things still (prevents slide) */
.nyg-card:hover{transform:none}
.nyg-card:hover::before{animation:none}
.nyg-hero.hero-bleed:hover{transform:translateX(-50%)}
.nyg-hero:not(.hero-bleed):hover{transform:none}

/* ===== Booking ===== */
.booking{
  background:rgba(248,250,252,.9);border:1px solid rgba(148,163,184,.4);
  border-radius:20px;box-shadow:0 16px 36px rgba(15,23,42,.12);
  display:grid;grid-template-columns:1.05fr 1fr;gap:1.2rem;padding:1.25rem
}
.sel{border-right:1px dashed rgba(148,163,184,.45);padding-right:1rem}
.sel h3{margin:.25rem 0 .35rem}
.sel p{margin:.15rem 0;color:var(--muted)}
form{display:grid;gap:.55rem}
label{font-weight:600;font-size:.9rem}
input,textarea,select{
  width:100%;border-radius:10px;border:1px solid rgba(148,163,184,.7);padding:.55rem .7rem;
  font:inherit;background:#fff;transition:border-color .15s ease, box-shadow .15s ease
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 1px rgba(21,101,192,.25)
}
textarea{min-height:84px;resize:vertical}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.total{margin:.25rem 0 .4rem;font-weight:800;color:var(--blue-dark)}
.success{
  display:none;margin-top:.5rem;font-size:.9rem;border-radius:10px;padding:.6rem .75rem;
  background:rgba(46,125,50,.06);border:1px solid rgba(46,125,50,.35);color:#2e7d32
}
.hint{font-size:.82rem;color:var(--muted)}
footer{
  margin-top:2rem;padding-top:1rem;border-top:var(--border);
  display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;color:var(--muted);font-size:.9rem
}

/* ===== Responsive fallbacks ===== */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .card-hero{margin-top:.5rem}
  .facts,.itinerary,.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .booking{grid-template-columns:1fr}
  .sel{border-right:0;border-bottom:1px dashed rgba(148,163,184,.45);padding-right:0;padding-bottom:1rem}
}
@media (max-width:560px){
  .facts,.itinerary,.gallery{grid-template-columns:1fr}
}

/* ===== Motion-safe ===== */
@media (prefers-reduced-motion:reduce){
  .nyg-card,.nyg-hero,.step-card,.btn{transition:none}
}

/* === Hero VIDEO: force clean 16:9 inside the container === */
.nyg-hero { height: auto; }
.nyg-hero .nyg-hero-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 20%;
}

/* If you ever switch to a YouTube embed for the hero: */
.nyg-hero .nyg-hero-ytwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.nyg-hero .nyg-hero-ytwrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* WhatsApp link: force white text in the header */
header .nav a[href*="wa.me"]{
  color: #ffffff !important;
}
header .nav a[href*="wa.me"]:visited{
  color: #ffffff !important;
}

/* 1) Native <video> in the hero (framing tweak) */
.nyg-hero video{
  object-position: 50% 35% !important;
}

/* 2) YouTube iframe variant wrapped in a 16:9 box */
.nyg-hero .nyg-hero-ytwrap{ overflow: hidden; }
.nyg-hero .nyg-hero-ytwrap iframe{
  transform: translateY(-4%);
}
@media (max-width: 560px){
  .nyg-hero .nyg-hero-ytwrap iframe{ transform: translateY(-2%); }
}

/* 3) Background-image variant */
.nyg-hero .nyg-hero-img{
  background-position: 50% 35% !important;
}

/* Umrah CTA sits under the brand in the left sidebar */
.nav .btn-umrah{
  align-self: stretch;
  margin: .25rem .75rem 0 .25rem;
  justify-content: center;
  white-space: nowrap;
}

/* Keep nice spacing if logo gets smaller/larger */
.brand + .btn-umrah{
  margin-top: .5rem;
}

/* Mobile (header becomes a top bar): place Umrah on the right, inline */
@media (max-width: 960px){
  .nav{
    flex-direction: row;
    align-items: center;
  }
  .brand + .btn-umrah{
    margin-top: 0;
    margin-left: auto;
    margin-right: .75rem;
  }
  .nav .btn-umrah{
    align-self: center;
    width: auto;
  }
}

/* ——— Sidebar: space + label + links under WhatsApp ——— */
.nav-sep{
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: .35rem .5rem .25rem;
}
.nav-sections{
  color: #e5e7eb;
  padding: .1rem .25rem .6rem;
  display: grid;
  gap: .35rem;
}
.nav-label{
  margin: .15rem .55rem .1rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.nav-link{
  display: block;
  padding: .55rem .75rem;
  margin: 0 .3rem;
  border-radius: 12px;
  color: #e5e7eb;
  background: transparent;
  border: 1px solid rgba(255,255,255,.06);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.nav-link.is-disabled{
  opacity: .75;
  cursor: default;
}
.nav-hint{
  margin: .2rem .55rem 0;
  color: rgba(255,255,255,.45);
  font-size: .78rem;
}

/* Mobile: keep the top bar clean */
@media (max-width: 960px){
  .nav-sep,
  .nav-sections{
    display: none;
  }
}

/* =========================
   RESPONSIVE REFINEMENTS
   ========================= */
:root{
  --gutter: clamp(12px, 3vw, 20px);
  --topbar-h: 10px;
}

/* make the container breathe on all screens */
.container{
  max-width: 1120px;
  padding: var(--gutter) var(--gutter) 3rem;
}

/* ---------- TABLET & DOWN (switch sidebar → top bar) ---------- */
@media (max-width: 960px){
  header{
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: var(--topbar-h);
    background: rgba(0,0,0,0.45);
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    z-index: 200;
  }
  .nav{
    height: var(--topbar-h);
    padding: .5rem .75rem;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
  }
  .logo-wrap{ width: 34px; }
  .brand-name{ font-size: .98rem; color: #fff; }
  .brand + .btn-umrah{
    margin: 0 0 0 auto;
  }
  .nav .btn-umrah{
    width: auto;
    align-self: center;
    padding: .55rem .9rem;
  }
  .nav-sep, .nav-sections{ display: none; }
  main.container{
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + var(--gutter));
  }
  .section-head h2{ font-size: 1.25rem; }
  .nygw-row{ grid-template-columns: 1fr 1fr; }
}

/* ---------- SMALL PHONES ---------- */
@media (max-width: 560px){
  .nyg-hero{ border-radius: 18px; }
  .nyg-hero-title{ font-size: 1.05rem; }
  .nyg-hero-cta{ padding: .5rem .8rem; }
  .facts, .itinerary, .gallery, .nygw-row{ grid-template-columns: 1fr; }
  .booking{
    grid-template-columns: 1fr;
    gap: .9rem;
    padding: .95rem;
  }
  .sel{
    border-right: 0;
    border-bottom: 1px dashed rgba(148,163,184,.45);
    padding: 0 0 1rem 0;
  }
  .btn{ font-size: .92rem; padding: .6rem .95rem; }
  .brand-name{ font-size: .92rem; }
}

/* ---------- EXTRA SMALL (older 360-375px phones) ---------- */
@media (max-width: 380px){
  .brand-name{ display: none; }
  .nav{ gap: .5rem; }
  .nyg-hero-title{ font-size: .98rem; }
}

/* ---------- Safe-area support (iOS notch) ---------- */
@supports (padding: max(0px)) {
  @media (max-width: 960px){
    header{
      padding-left: max(.75rem, env(safe-area-inset-left));
      padding-right:max(.75rem, env(safe-area-inset-right));
    }
    main.container{
      padding-top: calc(var(--topbar-h) + var(--gutter) + env(safe-area-inset-top));
    }
  }
}

/* ---------- Minor polish & guards ---------- */
img, video{ max-width:100%; height:auto; }
.nyg-hero .nyg-hero-video{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
html, body{ overflow-x: hidden; }

/* New: hero Umrah button overlay styling */
.hero-umrah-btn{
  font-size:.9rem;
  padding:.55rem 1.05rem;
  box-shadow:0 10px 24px rgba(21,101,192,.5);
  white-space:nowrap;
}

/* ========== UMRAH SECTION & MODAL ========== */
.umrah-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem;
}
.umrah-card{
  background:var(--card);
  border:var(--border);
  border-radius:20px;
  padding:1rem 1.1rem 1.2rem;
  box-shadow:var(--shadow);
  display:grid;
  gap:.55rem;
}
.umrah-card h3{
  margin:.2rem 0 .1rem;
}
.umrah-text{
  color:var(--muted);
  margin:0 0 .4rem;
}
.umrah-features{
  list-style:none;
  padding:0;
  margin:0 0 .6rem;
  display:grid;
  gap:.25rem;
  font-size:.9rem;
}
.umrah-features li::before{
  content:"• ";
  color:var(--blue);
}
.umrah-card .btn{
  justify-content:flex-start;
  margin-top:.1rem;
}

@media (max-width:980px){
  .umrah-grid{
    grid-template-columns:1fr;
  }
}

/* Shared modal styles for Umrah */
.umrah-modal[aria-hidden="true"]{ display:none; }
.umrah-modal{
  position:fixed;
  inset:0;
  z-index:1100;
  display:grid;
  place-items:center;
}
.umrah-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.8);
  backdrop-filter:blur(8px);
}
.umrah-modal-dialog{
  position:relative;
  background:#fff;
  border-radius:20px;
  box-shadow:0 24px 60px rgba(15,23,42,.5);
  max-width:640px;
  width:min(100% - 2rem, 640px);
  max-height:min(90vh, 720px);
  overflow:auto;
  padding:1.25rem 1.4rem 1.4rem;
}
.umrah-modal-title{
  margin:0 0 .75rem;
  font-size:1.25rem;
}
.umrah-modal-close{
  position:absolute;
  top:.5rem;
  right:.5rem;
  border:none;
  background:#fff;
  border-radius:999px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  font-size:1.05rem;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(15,23,42,.35);
}
.umrah-modal-body{
  display:grid;
  gap:.75rem;
}
.umrah-block h4{
  margin:.2rem 0 .25rem;
}
.umrah-placeholder{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}
.umrah-checkin-btn{
  justify-content:center;
  margin-top:.4rem;
}
.umrah-booking-form{
  margin-top:.8rem;
  display:grid;
  gap:.65rem;
}
.error-msg{
  font-size:.8rem;
  color:#b91c1c;
  min-height:1em;
  margin-top:.15rem;
}
.umrah-success{
  margin-top:.75rem;
  padding:.6rem .8rem;
  border-radius:10px;
  background:rgba(22,163,74,.06);
  border:1px solid rgba(22,163,74,.4);
  color:#166534;
  font-size:.9rem;
}

/* Prevent body scroll when any Umrah modal is open */
body.umrah-locked{
  overflow:hidden;
}
/* ===============================
   ADVANCED UX SMALL BUTTON
   =============================== */

/* Tokens for micro-interactions */
:root{
  --btn-sm-font: .9rem;
  --btn-sm-py: .44rem;       /* ~10–12px vertical -> ~38–40px total height with borders */
  --btn-sm-px: .8rem;
  --btn-radius-ux: 8px;

  --btn-shadow-ux: 0 6px 18px rgba(2, 6, 23, .18);
  --btn-shadow-ux-hover: 0 10px 28px rgba(2, 6, 23, .22);
  --btn-focus-ring: 0 0 0 3px rgba(21,101,192,.16), 0 0 0 6px rgba(21,101,192,.10);
}

/* Base */
.btn-ux{
  --bgA: var(--blue);
  --bgB: var(--blue-dark);
  --inkBtn: #fff;
  --bd: transparent;

  display:inline-flex; align-items:center; gap:.5rem;
  font-weight: 800; letter-spacing:.01em;
  font-size: var(--btn-sm-font);
  line-height: 1;                      /* keep tidy baseline */
  padding: var(--btn-sm-py) var(--btn-sm-px);
  border-radius: var(--btn-radius-ux);
  border:1px solid var(--bd);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)) border-box,
    linear-gradient(135deg, var(--bgA), var(--bgB)) padding-box;
  color: var(--inkBtn);
  box-shadow: var(--btn-shadow-ux);
  transform: translateZ(0);            /* enable GPU for smoother hover */
  transition:
    transform .18s cubic-bezier(.22,1,.36,1),
    box-shadow .18s ease,
    background .18s ease,
    opacity .18s ease;
}

/* Icon slot */
.btn-ux .btn__icon{
  display:inline-grid; place-items:center;
  width:1.05em; height:1.05em;
  line-height:1;
}

/* Hover / active */
.btn-ux:hover{ box-shadow: var(--btn-shadow-ux-hover); transform: translateY(-1px); }
.btn-ux:active{ transform: translateY(0); box-shadow: var(--btn-shadow-ux); }

/* Focus visibility */
.btn-ux:focus{ outline: none; }
.btn-ux:focus-visible{ box-shadow: var(--btn-shadow-ux-hover), var(--btn-focus-ring); }

/* Disabled */
.btn-ux[disabled],
.btn-ux[aria-disabled="true"]{
  opacity:.6; cursor:not-allowed; transform:none; box-shadow:none;
}

/* Variants */
.btn-ux--ghost{
  --bgA: rgba(255,255,255,.04);
  --bgB: rgba(255,255,255,.04);
  --inkBtn: #e5e7eb;
  --bd: rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)) border-box,
    linear-gradient(0deg, var(--bgA), var(--bgB)) padding-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.04);
}

.btn-ux--outline{
  --inkBtn: var(--blue);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)) border-box,
    linear-gradient(0deg, #fff, #fff) padding-box;
  border-color: rgba(21,101,192,.35);
  color: var(--blue);
  box-shadow: 0 6px 16px rgba(21,101,192,.15);
}

/* Subtle pulse for primary on hover (reduced-motion safe) */
.btn-ux:hover::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(120px 40px at 50% 110%, rgba(255,255,255,.16), transparent 70%);
  filter: blur(6px);
  opacity:.7;
}
@media (prefers-reduced-motion: reduce){
  .btn-ux, .btn-ux:hover{ transition:none; }
  .btn-ux:hover::after{ display:none; }
}

/* Icon-only compact (still accessible) */
.btn-ux--icon{
  padding: .5rem; width: 40px; height: 40px;
  justify-content:center;
}

/* Loading state (no JS lib needed) */
.btn-ux[data-loading="true"]{
  pointer-events:none; opacity:.92;
}
.btn-ux[data-loading="true"] .btn__label{ opacity:0; }
.btn-ux[data-loading="true"]::before{
  content:"";
  position:absolute;
  inset:auto auto auto auto;
  width:1.1em; height:1.1em; margin:auto;
  border-radius:50%;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }

/* High-contrast users */
@media (prefers-contrast: more){
  .btn-ux{ box-shadow:none; }
  .btn-ux:focus-visible{ box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--blue); }
}

/* Make sure min touch height is decent on tiny screens */
@media (max-width:560px){
  .btn-ux{ font-size:.92rem; padding:.5rem .9rem; }
}

/* Utility group layout */
.btn-ux-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.btn-ux--danger{
  --bgA:#d94141; --bgB:#a51f1f;
}


/* === Click-to-next gallery inside cards === */
.umrah-card-media{
  margin: .35rem 0 .75rem;      /* keeps current card rhythm */
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;         /* fixed visual height, no layout shift */
}

.umrah-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .18s ease;
}

.umrah-card-media:hover img{    /* subtle hover only; image does not change */
  transform: scale(1.02);
}

.js-card-gallery{ cursor: pointer; } /* communicates clickability */