/* ══════════════════════════════════════════════════════════════
   BADAL UMRAH — base.css
   Design tokens · reset · shared primitives · header · footer ·
   currency switcher · animations
   ══════════════════════════════════════════════════════════════ */

:root{
    --white:#fff; --off:#faf8f5; --light:#f2ede6; --light2:#e8e0d4;
    --gold:#b8922a; --gold2:#d4ad5a; --gold-pale:#f5ecd6;
    --rust:#7B3C12; --rust2:#a0623a; --rust-pale:#f5ede6;
    --ink:#6c5f4f; --ink2:#3d2f1e; --muted:#7a6f65;
    --border:rgba(123,60,18,0.10);
    --border-g:rgba(184,146,42,0.18);
    --yes:#b8922a; --no:#a0623a;
    /* Default accent = rust; override per package via body.acc-* */
    --accent:#7B3C12; --accent2:#a0623a;
    --accent-pale:rgba(123,60,18,0.09); --accent-border:rgba(123,60,18,0.25);
    --header-h:74px;
}

/* Unified brand accent — every package uses the same rust + gold scheme */
.acc-dua, .acc-noor, .acc-barakah, .acc-ongoing{
    --accent:#7B3C12;--accent2:#b8922a;
    --accent-pale:rgba(123,60,18,0.09);--accent-border:rgba(123,60,18,0.25);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--off);color:var(--ink);overflow-x:hidden}
img{max-width:100%}
a{color:inherit}

/* Islamic geometric backdrop */
.geo{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23b8922a' stroke-width='0.5' opacity='0.09'%3E%3Crect x='10' y='10' width='60' height='60' transform='rotate(45 40 40)'/%3E%3Crect x='20' y='20' width='40' height='40'/%3E%3Ccircle cx='40' cy='40' r='28'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Cline x1='40' y1='0' x2='40' y2='80'/%3E%3Cline x1='0' y1='40' x2='80' y2='40'/%3E%3C/g%3E%3C/svg%3E");background-size:80px 80px;}

.wrap{width:90%;max-width:1440px;margin:0 auto;padding:0 20px}

/* tag eyebrow */
.tag{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.tag .ln{width:30px;height:1px;background:var(--gold)}
.tag span{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:500}
.tag-rust .ln{background:var(--rust)} .tag-rust span{color:var(--rust)}
.tag-white .ln{background:var(--gold2)} .tag-white span{color:var(--gold2)}

/* animations */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* wave divider */
.wave{line-height:0;display:block}.wave svg{display:block;width:100%}

/* generic buttons */
.btn-main{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;background:var(--rust);color:#fff;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;border:none;border-radius:50px;cursor:pointer;text-decoration:none;transition:all .35s ease}
.btn-main:hover{background:var(--rust2);transform:translateY(-3px);box-shadow:0 14px 36px rgba(123,60,18,.28)}
.btn-outline{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;background:transparent;color:var(--ink);font-family:'Outfit',sans-serif;font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;border:1.5px solid var(--border);border-radius:50px;cursor:pointer;text-decoration:none;transition:all .35s ease}
.btn-outline:hover{border-color:var(--rust);color:var(--rust)}
.btn-wa{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;background:#25d366;color:#fff;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;border:none;border-radius:50px;cursor:pointer;text-decoration:none;transition:all .35s ease}
.btn-wa:hover{background:#1da851;transform:translateY(-3px);box-shadow:0 14px 36px rgba(37,211,102,.3)}

/* ════════════════ HEADER ════════════════ */
.site-header{position:sticky;top:0;z-index:9000;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);transition:box-shadow .3s ease}
.site-header.scrolled{box-shadow:0 6px 28px rgba(26,18,8,.08)}
.header-inner{display:flex;align-items:center;gap:24px;height:82px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand img{height:46px;width:auto;display:block}
.brand .brand-name{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:.5px}
.brand .brand-name span{display:block;font-family:'Outfit',sans-serif;font-size:8.5px;font-weight:500;letter-spacing:1.6px;line-height:1.25;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;align-items:center;gap:22px;margin-left:10px}
.nav a{font-size:16px;font-weight:500;color:var(--ink2);text-decoration:none;position:relative;transition:color .25s ease;padding:5px 0;white-space:nowrap}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2.5px;background:var(--rust);transform:scaleX(0);transition:transform .3s ease}
.nav a:hover{color:var(--rust)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:var(--rust);font-weight:700}
.header-actions{display:flex;align-items:center;gap:14px;margin-left:auto}

/* currency switcher */
.cur-switch{position:relative}
.cur-btn{display:inline-flex;align-items:center;gap:8px;background:var(--off);border:1.5px solid var(--border);border-radius:30px;padding:9px 16px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;transition:all .25s ease}
.cur-btn:hover{border-color:var(--accent-border);color:var(--rust)}
.cur-btn i{font-size:10px;transition:transform .25s ease}
.cur-switch.open .cur-btn i{transform:rotate(180deg)}
.cur-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 40px rgba(26,18,8,.14);padding:6px;min-width:140px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .25s ease;z-index:50}
.cur-switch.open .cur-menu{opacity:1;visibility:visible;transform:translateY(0)}
.cur-menu button{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:none;border-radius:8px;padding:9px 11px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:400;color:var(--ink2);cursor:pointer;text-align:left;transition:background .2s ease}
.cur-menu button:hover{background:var(--off)}
.cur-menu button.active{background:var(--rust-pale);color:var(--rust);font-weight:600}
.cur-menu button .cur-code{font-weight:600;width:36px}

.lang-switch{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.lang-switch a{color:var(--muted);text-decoration:none;font-weight:500;transition:color .2s ease}
.lang-switch a.active{color:var(--rust);font-weight:700}
.lang-switch a:hover{color:var(--rust)}

.header-wa{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(37,211,102,.14);color:#1da851;font-size:18px;text-decoration:none;transition:all .25s ease;flex-shrink:0}
.header-wa:hover{background:#25d366;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,.3)}
.btn-book{display:inline-flex;align-items:center;gap:9px;padding:12px 24px;background:var(--rust);color:#fff;font-size:12px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;border-radius:50px;text-decoration:none;transition:all .3s ease;white-space:nowrap}
.btn-book:hover{background:var(--rust2);transform:translateY(-2px);box-shadow:0 12px 28px rgba(123,60,18,.38)}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;border:none;background:transparent;cursor:pointer;flex-shrink:0}
.burger span{display:block;height:2px;width:22px;background:var(--ink);border-radius:2px;transition:all .3s ease}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{display:none;position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:#fff;z-index:8999;padding:24px 32px;overflow-y:auto;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu nav{display:flex;flex-direction:column;gap:4px}
.mobile-menu nav a{font-family:'Playfair Display',serif;font-size:22px;font-weight:400;color:var(--ink);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--border)}
.mobile-menu nav a:hover{color:var(--rust)}
.mm-cta{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.mm-cta .btn-main,.mm-cta .btn-wa{justify-content:center;width:100%}

/* ════════════════ FOOTER ════════════════ */
.footer{background:#6c5f4f;color:rgba(255,255,255,.72);padding:70px 0 0;position:relative;overflow:hidden}
.footer .geo{opacity:.5}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr;gap:40px;position:relative;z-index:1}
.footer-brand img{height:46px;width:auto;margin-bottom:16px;filter:brightness(0) invert(1)}
.footer-brand p{font-size:13px;font-weight:300;line-height:1.8;color:rgba(255,255,255,.45);max-width:300px;margin-bottom:18px}
.footer-soc{display:flex;gap:10px}
.footer-soc a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);transition:all .3s ease}
.footer-soc a svg{width:17px;height:17px}
.footer-soc a:hover{background:var(--gold);color:var(--ink);transform:translateY(-3px)}
.footer-col h5{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold2);font-weight:600;margin-bottom:18px}
.footer-col a{display:block;font-size:13px;font-weight:300;color:rgba(255,255,255,.5);text-decoration:none;padding:6px 0;transition:color .25s ease}
.footer-col a:hover{color:var(--gold)}
.footer-newsletter p{font-size:13px;font-weight:300;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:14px}
.newsletter-form{display:flex;gap:8px;flex-wrap:wrap}
.newsletter-form input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px 14px;color:#fff;font-family:'Outfit',sans-serif;font-size:13px;outline:none}
.newsletter-form input::placeholder{color:rgba(255,255,255,.3)}
.newsletter-form input:focus{border-color:var(--gold)}
.newsletter-form .btn-sub{background:var(--gold);color:var(--ink);border:none;border-radius:10px;padding:12px 18px;font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .3s ease}
.newsletter-form .btn-sub:hover{background:var(--gold2)}
.newsletter-ok{color:#d4ad5a;font-size:13px;font-weight:400}

.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0;border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:1}
.footer-bottom p{font-size:12px;font-weight:300;color:rgba(255,255,255,.4)}
.pay-icons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pay-icons span:first-child{font-size:11px;color:rgba(255,255,255,.35);margin-right:4px}
.pay-pill{font-size:10px;font-weight:600;letter-spacing:.5px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:5px 9px}

/* ════════════════ HOME VIDEO HERO (clean, no overlay) ════════════════ */
.home-hero{position:relative;width:100%;background:var(--ink);line-height:0;overflow:hidden}
.home-hero video{width:100%;height:auto;display:block;max-height:90vh;object-fit:cover}
.home-hero .scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff;font-size:13px;backdrop-filter:blur(6px);animation:cueBob 2s ease-in-out infinite;z-index:2;text-decoration:none;line-height:1}
@keyframes cueBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@media(max-width:640px){.home-hero video{max-height:70vh;min-height:240px;object-fit:cover}}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ════════════════ RESPONSIVE (chrome) ════════════════ */
@media(max-width:1100px){
    .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:32px}
    .footer-brand{grid-column:1/-1}
    .footer-newsletter{grid-column:1/-1}
}
@media(max-width:1024px){
    .nav,.lang-switch{display:none}
    .burger{display:flex}
    .mobile-menu{display:block}
}
@media(max-width:640px){
    .wrap{padding:0 20px}
    .brand .brand-name span{display:none}
    .btn-book{display:none}
    .footer-grid{grid-template-columns:1fr 1fr}
    .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ════════════════ BRAND NORMALIZATION ════════════════
   One unified warm palette for all packages (rust + gold).
   Overrides per-package blue/green/gold/rust variants. */
.bar-dua,.bar-noor,.bar-barakah,.bar-ongoing{background:linear-gradient(90deg,var(--rust),var(--gold))!important}
.pill-dua,.pill-noor,.pill-barakah,.pill-ongoing{background:rgba(255,255,255,.88)!important;color:var(--rust)!important}
.del-dua,.del-noor,.del-barakah,.del-ongoing{background:var(--rust-pale)!important;color:var(--rust)!important}
.book-blue,.book-gold,.book-rust,.book-green{background:var(--rust)!important;color:#fff!important;border:none!important}
.book-blue:hover,.book-gold:hover,.book-rust:hover,.book-green:hover{background:var(--rust2)!important;box-shadow:0 10px 26px rgba(123,60,18,.3)!important}
.dbadge-dua,.dbadge-noor,.dbadge-barakah,.dbadge-ongoing{background:rgba(184,146,42,.25)!important;color:var(--gold2)!important}
.btbl-blue,.btbl-gold,.btbl-rust,.btbl-green{background:var(--rust)!important;color:#fff!important;border:none!important}
.btbl-blue:hover,.btbl-gold:hover,.btbl-rust:hover,.btbl-green:hover{background:var(--rust2)!important}
/* gallery video package pills + platform decorative chips -> brand */
.vp-dua,.vp-noor,.vp-barakah,.vp-ongoing{background:rgba(123,60,18,.14)!important;color:var(--rust2)!important}
/* footer contrast on lighter taupe */
.footer-brand p,.footer-col a,.footer-newsletter p{color:rgba(255,255,255,.8)}
.footer-bottom p,.pay-icons span:first-child{color:rgba(255,255,255,.65)}

/* footer logo — logo.png has a white background; show it as a clean white tile
   (no invert filter, which turned it into a solid white box) */
.footer-brand img{filter:none!important;background:#fff;padding:7px 9px;border-radius:10px;height:50px;width:auto}
/* footer payment icons as white chips */
.pay-ic{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:4px 7px;background:#fff;border-radius:6px}
.pay-ic img{height:15px;width:auto;display:block}

/* ════════════════ Brand primary taupe (#6C5F4F) sections ════════════════
   Hero / performers / intro / offices sections use the brand Primary taupe
   as a dark background with the original light text. Heroes stay flat
   (photo overlays hidden) for a clean, on-brand look. */
.faq-hero::before,.gallery-hero::before,.gallery-hero::after,
.blog-hero::before,.post-hero::before,.pk-hero::before{display:none!important}

/* compare table header on taupe — keep header text light */
.ctable thead tr{background:#6c5f4f!important}
.ctable thead{color:#fff}
.th-feat{color:rgba(255,255,255,.75)!important}

/* Responsive media queries */
@media (max-width: 1200px) {
    .nav { gap: 14px; }
    .nav a { font-size: 13px; }
}

@media (max-width: 992px) {
    .header-inner { gap: 12px; }
    .nav { display: none; }
    .burger { display: flex; }
    .hajj-top-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
    .hajj-cards-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
    .wrap { width: 92%; padding: 0 14px; }
    .header-actions { gap: 8px; }
    .btn-book { padding: 9px 16px; font-size: 10.5px; }
}