:root{--nd96-green:#0b7a45;--nd96-green-2:#15945b;--nd96-green-3:#20a965;--nd96-mint:#edf8f1;--nd96-ink:#10231a;--nd96-gold:#c9a75a}
.national-day-96 .nd96-topbar{position:sticky;top:0;z-index:60;background:linear-gradient(90deg,#075e38,#0b7a45 48%,#0a6b3e);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.nd96-topbar__inner{max-width:1360px;margin:auto;min-height:38px;padding:7px 20px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;font-size:12px}
.nd96-topbar__mark{display:inline-grid;place-items:center;width:30px;height:24px;border-radius:8px;background:#fff;color:var(--nd96-green);font:900 13px/1 Inter,sans-serif;box-shadow:0 5px 14px rgba(0,0,0,.12)}
.nd96-topbar__text{font-weight:700;letter-spacing:.01em}
.nd96-topbar a{color:#fff;border:1px solid rgba(255,255,255,.42);padding:4px 11px;border-radius:999px;font-weight:800;text-decoration:none;background:rgba(255,255,255,.1);transition:.2s ease}
.nd96-topbar a:hover{background:#fff;color:var(--nd96-green)}
.national-day-96 .nd96-header{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(18px);border-bottom-color:rgba(13,122,69,.1)!important}

/* Hero — keeps JOWPX light premium look and adds National Day as a refined layer */
.national-day-96 .nd96-hero{position:relative;background:
 radial-gradient(circle at 8% 18%,rgba(26,153,91,.12),transparent 29%),
 radial-gradient(circle at 82% 84%,rgba(12,47,184,.08),transparent 34%),
 linear-gradient(180deg,#fbfefc 0%,#f4f9f6 56%,#f5f7fc 100%);color:var(--text);min-height:760px;border-bottom:1px solid #e5eee8}
.national-day-96 .nd96-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 0 64%,rgba(15,130,73,.035) 64% 68%,transparent 68% 100%)}
.national-day-96 .nd96-hero .grid-backdrop{opacity:.42;background-image:linear-gradient(rgba(14,89,52,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(14,89,52,.045) 1px,transparent 1px)!important;background-size:34px 34px!important;mask-image:linear-gradient(to bottom,black,transparent 85%)}
.national-day-96 .nd96-hero .glow-backdrop{background:radial-gradient(circle,rgba(21,148,91,.14),transparent 70%)!important;filter:none!important}
.national-day-96 .nd96-hero .text-text{color:var(--text)!important}.national-day-96 .nd96-hero .text-text-2{color:var(--text-2)!important}.national-day-96 .nd96-hero .text-text-3{color:var(--text-3)!important}
.national-day-96 .nd96-hero .hero-area-top>p,.national-day-96 .nd96-hero .hero-slide{color:var(--text-2)!important}
.nd96-badge{border-color:#cfe5d6!important;background:rgba(255,255,255,.86)!important;color:#0a6d40!important;box-shadow:0 8px 24px -18px rgba(11,122,69,.55),inset 0 0 0 1px rgba(11,122,69,.035)}
.nd96-highlight{color:var(--nd96-green)!important;-webkit-text-fill-color:var(--nd96-green)!important;position:relative}
.nd96-highlight:after{content:"";position:absolute;right:0;left:0;bottom:-5px;height:5px;border-radius:10px;background:linear-gradient(90deg,transparent,rgba(18,145,84,.28),transparent)}
.nd96-decor{position:absolute;z-index:1;pointer-events:none;user-select:none}
.nd96-decor--96{left:2.2%;bottom:1%;font:900 clamp(120px,16vw,230px)/1 Inter,sans-serif;color:transparent;-webkit-text-stroke:1px rgba(11,122,69,.09);transform:rotate(-7deg);letter-spacing:-.07em}
.nd96-decor--palm{display:none}
.nd96-campaign-signature{position:absolute;left:4.2%;top:12%;z-index:1;display:flex;align-items:center;gap:10px;opacity:.42;pointer-events:none;transform:rotate(-6deg)}
.nd96-campaign-signature strong{font:900 46px/1 Inter,sans-serif;color:transparent;-webkit-text-stroke:1.4px rgba(11,122,69,.42)}
.nd96-campaign-signature span{font-size:11px;font-weight:800;color:#0b7a45;max-width:64px;line-height:1.35}
.nd96-primary-cta{background:linear-gradient(135deg,var(--nd96-green-2),#087343)!important;box-shadow:0 14px 32px -14px rgba(11,122,69,.55)!important;border:1px solid rgba(255,255,255,.2)}
.national-day-96 .nd96-hero .hero-area-screen>div:first-child,.national-day-96 .nd96-hero .hero-screens{filter:drop-shadow(0 28px 45px rgba(31,73,53,.1))}

/* Premium countdown */
.nd96-countdown{margin-top:18px;width:min(100%,500px);padding:15px;border:1px solid #cfe4d6;background:rgba(255,255,255,.9);border-radius:20px;box-shadow:0 18px 50px -34px rgba(7,95,54,.45);backdrop-filter:blur(14px);overflow:hidden;position:relative}
.nd96-countdown:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(#18a060,#0a713f)}
.nd96-countdown__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.nd96-countdown__title{display:flex;flex-direction:column;gap:2px}.nd96-countdown__title span{font-size:11px;font-weight:700;color:#6e7f75}.nd96-countdown__title strong{font-size:13px;color:#173b28}
.nd96-countdown__live{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#edf8f1;color:#087343;font-size:10px;font-weight:800;border:1px solid #d4eadb}.nd96-countdown__live:before{content:"";width:6px;height:6px;border-radius:50%;background:#12a05b;box-shadow:0 0 0 4px rgba(18,160,91,.1)}
.nd96-countdown__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;direction:ltr}
.nd96-countdown__unit{direction:rtl;text-align:center;border:1px solid #e0ebe4;background:linear-gradient(180deg,#fff,#f8fbf9);border-radius:13px;padding:10px 6px;min-width:0;box-shadow:0 5px 16px -14px rgba(12,77,45,.4)}
.nd96-countdown strong[data-days],.nd96-countdown strong[data-hours],.nd96-countdown strong[data-minutes],.nd96-countdown strong[data-seconds]{display:block;font:900 clamp(22px,2.2vw,30px)/1 Inter,sans-serif;color:#0a7944;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.nd96-countdown__unit span{display:block;margin-top:6px;font-size:10px;font-weight:700;color:#75847c}
.nd96-countdown__foot{margin-top:11px;display:grid;gap:7px}.nd96-countdown__rail{height:4px;border-radius:999px;background:#e6eee9;overflow:hidden;direction:ltr}.nd96-countdown__rail i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0b7a45,#2bb46e);transition:width .7s ease}.nd96-countdown__foot small{font-size:9px;color:#7a877f;text-align:start}

/* Campaign strip */
.nd96-offer-strip{background:#fff;padding:22px 20px;border-bottom:1px solid #e3ece6}
.nd96-offer-strip__inner{max-width:1040px;margin:auto;border:1px solid #d6e8dc;border-radius:22px;background:linear-gradient(100deg,#f0faf4 0%,#fff 52%,#f6fbf8 100%);padding:20px 24px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;box-shadow:0 18px 50px -38px rgba(11,122,69,.5);position:relative;overflow:hidden}
.nd96-offer-strip__inner:after{content:"96";position:absolute;left:30%;top:-22px;font:900 100px/1 Inter,sans-serif;color:rgba(11,122,69,.035);pointer-events:none}
.nd96-offer-seal{width:88px;height:88px;border-radius:24px;transform:rotate(-4deg);display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#15995b,#087541);color:#fff;box-shadow:inset 0 0 0 5px rgba(255,255,255,.12),0 12px 26px rgba(10,115,65,.16)}
.nd96-offer-seal span{font-size:11px}.nd96-offer-seal strong{font:900 28px/1 Inter,sans-serif}.nd96-offer-copy{display:flex;flex-direction:column;gap:5px}.nd96-offer-copy strong{font-size:18px;color:#0c5435}.nd96-offer-copy span{color:#53695c;font-size:13px}.nd96-offer-mark{text-align:center;color:#0b7a45;display:flex;flex-direction:column;padding:8px 14px;border-inline-start:1px solid #dce9e0}.nd96-offer-mark strong{font-size:17px}.nd96-offer-mark span{font-size:11px}

/* Packages */
.nd96-packages{position:relative;overflow:hidden;background:linear-gradient(180deg,#f8fbf9,#f4f7fd)!important}
.nd96-packages:before{content:"96";position:absolute;left:-2%;top:3%;font:900 250px/1 Inter,sans-serif;color:rgba(11,122,69,.035);pointer-events:none}
.nd96-package-card{position:relative;border-color:#d5e4da!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:visible}
.nd96-package-card:hover{transform:translateY(-4px);box-shadow:0 22px 55px -34px rgba(11,122,69,.35)!important;border-color:#92c4a5!important}
.nd96-package-card:nth-child(2){border-color:var(--nd96-green)!important;box-shadow:0 20px 55px -34px rgba(11,122,69,.5)!important;background:linear-gradient(180deg,#fff,#fbfffc)}
.nd96-deal-chip{position:absolute;top:14px;left:14px;padding:4px 8px;border-radius:999px;background:#edf8f1;color:#0a7442;font-size:9px;font-weight:800;border:1px solid #d8eadf}
.nd96-old-price{font-size:14px;color:#9a716b;text-decoration:line-through;text-decoration-thickness:1.5px;margin-bottom:5px}.nd96-old-price .num{font-size:15px}.nd96-new-price{display:flex;align-items:baseline;gap:7px;color:#087541}.nd96-new-price strong{font-size:46px;line-height:1;letter-spacing:-.04em}.nd96-new-price span{font-weight:800}.nd96-price-period{margin-top:6px;font-size:12px;font-weight:700;color:#3c5f4c}
.nd96-package-note{max-width:760px;margin:34px auto 0;border:1px solid #d4e7d8;border-radius:16px;padding:15px 18px;background:#f5fcf7;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center}.nd96-package-note strong{color:#087541}.nd96-package-note span{color:#5f7566;font-size:12px}.national-day-96 .nd96-packages .bg-accent,.national-day-96 .nd96-packages a.bg-accent{background:var(--nd96-green)!important}.national-day-96 .nd96-packages .border-accent{border-color:var(--nd96-green)!important}.national-day-96 .nd96-packages .text-accent{color:var(--nd96-green)!important}
.nd96-closing{background:radial-gradient(circle at 18% 0,rgba(34,174,105,.28),transparent 35%),linear-gradient(120deg,#0b2f64,#0a5541)!important}.nd96-footer{border-top:1px solid rgba(31,184,102,.22)}

/* Motion polish */
.nd96-reveal-ready{opacity:0;transform:translateY(18px)}.nd96-reveal-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.nd96-motion-ready .nd96-hero .hero-area-screen,.nd96-motion-ready .nd96-package-card,.nd96-motion-ready .nd96-offer-strip__inner{will-change:transform,opacity}.nd96-motion-ready .nd96-primary-cta{position:relative;overflow:hidden;isolation:isolate}.nd96-motion-ready .nd96-primary-cta:after{content:"";position:absolute;inset:-40% auto -40% -32%;width:28%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);pointer-events:none;animation:nd96-shine 5.8s 2.2s ease-in-out infinite}.nd96-motion-ready .nd96-countdown strong{transform-origin:50% 50%}.nd96-motion-ready .nd96-offer-seal{animation:nd96-seal-breathe 5.4s ease-in-out infinite}
@keyframes nd96-shine{0%,72%,100%{left:-32%;opacity:0}78%{opacity:1}91%{left:116%;opacity:.9}92%{opacity:0}}@keyframes nd96-seal-breathe{0%,100%{box-shadow:inset 0 0 0 5px rgba(255,255,255,.12),0 12px 26px rgba(10,115,65,.16)}50%{box-shadow:inset 0 0 0 5px rgba(255,255,255,.17),0 16px 36px rgba(10,115,65,.23)}}

@media(max-width:991px){.nd96-campaign-signature{display:none}.nd96-motion-ready .nd96-primary-cta:after{display:none}.nd96-motion-ready .nd96-offer-seal{animation:none}}
@media(max-width:767px){.nd96-topbar__inner{font-size:10px;gap:7px;padding-inline:10px;min-height:36px}.nd96-topbar__mark{width:27px;height:22px;font-size:11px}.nd96-topbar__text{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nd96-topbar a{padding:3px 7px}.national-day-96 .nd96-hero{min-height:auto;padding-top:48px!important}.nd96-countdown{width:100%;padding:12px;border-radius:17px}.nd96-countdown__title strong{font-size:12px}.nd96-countdown__live{font-size:9px;padding:4px 7px}.nd96-countdown__grid{gap:5px}.nd96-countdown__unit{padding:9px 3px;border-radius:11px}.nd96-countdown strong[data-days],.nd96-countdown strong[data-hours],.nd96-countdown strong[data-minutes],.nd96-countdown strong[data-seconds]{font-size:22px}.nd96-countdown__unit span{font-size:9px}.nd96-offer-strip{padding:14px 12px}.nd96-offer-strip__inner{grid-template-columns:70px 1fr;padding:14px;gap:14px}.nd96-offer-seal{width:66px;height:66px;border-radius:18px}.nd96-offer-mark{grid-column:1/-1;border-inline-start:0;border-top:1px solid #dceade;padding-top:10px}.nd96-offer-copy strong{font-size:15px}.nd96-offer-copy span{font-size:11px}.nd96-decor--96{font-size:110px}.nd96-new-price strong{font-size:40px}.nd96-deal-chip{top:12px;left:12px}}
@media(prefers-reduced-motion:reduce){.nd96-package-card{transition:none!important}.nd96-motion-ready *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* FINAL REFERENCE MATCH PASS — visual source of truth: approved National Day mockup */
:root{--nd96-navy:#061f4d;--nd96-navy-2:#082b63;--nd96-green:#0b7a45;--nd96-green-2:#169b57;--nd96-cream:#fbfcfa}
.national-day-96 .nd96-header{background:#fff!important;border-bottom:1px solid #e8edf5!important}
.national-day-96 .nd96-hero{background:radial-gradient(circle at 12% 12%,rgba(18,153,87,.14),transparent 26%),radial-gradient(circle at 86% 20%,rgba(25,80,155,.34),transparent 35%),linear-gradient(135deg,#041b43 0%,#072a61 55%,#041b43 100%)!important;color:#fff!important;border:0;min-height:700px}
.national-day-96 .nd96-hero:after{content:"";position:absolute;inset:auto 0 0;height:48px;background:linear-gradient(135deg,transparent 0 12%,rgba(20,153,85,.28) 12% 13%,transparent 13% 25%,rgba(20,153,85,.18) 25% 26%,transparent 26%);opacity:.55;pointer-events:none}
.national-day-96 .nd96-hero .grid-backdrop{opacity:.16;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px)!important}
.national-day-96 .nd96-hero .text-text,.national-day-96 .nd96-hero h1{color:#fff!important}.national-day-96 .nd96-hero .text-text-2,.national-day-96 .nd96-hero .hero-slide{color:#dbe6f7!important}.national-day-96 .nd96-hero .text-text-3,.national-day-96 .nd96-hero .hero-area-trust li{color:#c2d0e5!important}
.nd96-badge{background:rgba(11,122,69,.22)!important;border-color:rgba(66,213,136,.38)!important;color:#d9ffea!important;box-shadow:none}
.nd96-highlight{color:#41c978!important;-webkit-text-fill-color:#41c978!important}.nd96-highlight:after{background:linear-gradient(90deg,transparent,#2ac36b,transparent)}
.nd96-decor--96{color:rgba(255,255,255,.018);-webkit-text-stroke:1px rgba(255,255,255,.09)}
.nd96-campaign-signature strong{color:rgba(255,255,255,.03);-webkit-text-stroke:1.2px rgba(77,209,139,.45)}.nd96-campaign-signature span{color:#78d9a5}
.nd96-countdown{background:rgba(3,24,57,.66);border:1px solid rgba(65,201,120,.68);box-shadow:0 22px 60px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.03);backdrop-filter:blur(18px);border-radius:14px;padding:16px 18px}
.nd96-countdown:before{display:none}.nd96-countdown__title span{color:#b8c8dd}.nd96-countdown__title strong{color:#fff}.nd96-countdown__live{background:rgba(30,181,100,.14);color:#74e1a5;border-color:rgba(74,210,135,.26)}
.nd96-countdown__unit{background:transparent;border:0;border-inline-start:1px solid rgba(255,255,255,.13);border-radius:0;box-shadow:none}.nd96-countdown__unit:last-child{border-inline-start:0}.nd96-countdown strong[data-days],.nd96-countdown strong[data-hours],.nd96-countdown strong[data-minutes],.nd96-countdown strong[data-seconds]{color:#fff;font-size:32px}.nd96-countdown__unit span{color:#b8c8dd}.nd96-countdown__rail{background:rgba(255,255,255,.12)}.nd96-countdown__foot small{color:#aebed4}
.national-day-96 .nd96-hero .hero-area-zatca>div{background:rgba(255,255,255,.96)!important;border-color:rgba(255,255,255,.25)!important}
.nd96-visual-art{display:block;width:100%;height:auto;max-height:min(62vh,560px);object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.28))}
.nd96-reference-visual{min-height:500px;display:flex!important;align-items:center;justify-content:center;position:relative!important;isolation:isolate}.nd96-laptop{width:min(100%,660px);position:relative;filter:drop-shadow(0 35px 42px rgba(0,0,0,.35));transform:perspective(1200px) rotateY(-2deg)}.nd96-laptop-screen{background:#101927;border:10px solid #151d28;border-radius:16px 16px 8px 8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.nd96-laptop-screen img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center}.nd96-laptop-base{height:16px;margin:-1px -5% 0;background:linear-gradient(#cbd1d8,#8d959f);border-radius:2px 2px 16px 16px;box-shadow:0 7px 14px rgba(0,0,0,.28)}
.nd96-phone{position:absolute;left:0;bottom:24px;width:150px;padding:7px;background:#111923;border-radius:25px;box-shadow:0 24px 45px rgba(0,0,0,.45);transform:rotate(-2deg);z-index:3}.nd96-phone img{display:block;width:100%;height:285px;object-fit:cover;object-position:18% center;border-radius:19px}.nd96-phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:48px;height:7px;border-radius:99px;background:#111923;z-index:2}.nd96-saudi-flag{position:absolute;right:2%;top:-18px;font-size:78px;filter:drop-shadow(0 14px 16px rgba(0,0,0,.22));transform:rotate(8deg);z-index:4}
/* reference banner: a real campaign banner, not a thin strip */
.nd96-offer-strip{background:#fff;padding:32px 20px}.nd96-offer-strip__inner{max-width:1180px;min-height:160px;border-radius:16px;padding:22px 30px;grid-template-columns:310px 1fr 180px;gap:30px;background:radial-gradient(circle at 12% 40%,rgba(23,153,86,.11),transparent 30%),linear-gradient(105deg,#f1f8f1,#fff 58%,#f6faf3);border:1px solid #dce8db;box-shadow:0 14px 38px -30px rgba(15,70,42,.35)}.nd96-offer-strip__inner:after{display:none}.nd96-banner-visual{position:relative;min-height:115px;display:flex;align-items:center}.nd96-banner-device{width:245px;background:#111827;border:5px solid #182231;border-radius:8px;overflow:hidden;box-shadow:0 15px 28px rgba(0,0,0,.16);transform:perspective(800px) rotateY(5deg)}.nd96-banner-device img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.nd96-banner-visual .nd96-offer-seal{position:absolute;left:0;top:4px;width:90px;height:90px;border-radius:50% 46% 50% 45%;z-index:2}.nd96-offer-copy strong{font-size:24px;color:#075b38}.nd96-offer-copy span{font-size:15px;line-height:1.9;color:#314c3d}.nd96-offer-mark strong{font-size:21px}.nd96-offer-mark span{font-size:12px}
/* remove old pale-blue section washes; reference is predominantly white/off-white */
.national-day-96 main>section:not(.nd96-hero):not(.nd96-offer-strip){background:#fff!important}.national-day-96 main>section:nth-of-type(even):not(.nd96-hero):not(.nd96-offer-strip){background:#fbfcff!important}
.national-day-96 .nd96-packages{background:#fff!important}.nd96-packages:before{font-size:210px;color:rgba(11,122,69,.055);top:1%}.nd96-package-card{background:#fff!important;border-color:#dfe7e1!important;box-shadow:0 12px 34px -28px rgba(13,52,34,.32)!important}.nd96-package-card:nth-child(2){border-color:#0b7a45!important;box-shadow:0 20px 48px -28px rgba(11,122,69,.4)!important}.nd96-new-price{color:#087541}.nd96-new-price strong{font-size:48px}
/* reference closing/footer: deep navy with green campaign accents */
.nd96-closing{background:radial-gradient(circle at 82% 15%,rgba(29,174,96,.18),transparent 28%),linear-gradient(135deg,#061d48,#082a60)!important;border-bottom:1px solid rgba(52,194,117,.22)}.national-day-96>footer.band-dark,.national-day-96 footer.band-dark--deep{background:linear-gradient(135deg,#041936,#062653)!important}.national-day-96 footer .text-accent-2{color:#43c77d!important}
@media(max-width:991px){.nd96-reference-visual{min-height:400px}.nd96-laptop{width:min(90%,600px)}.nd96-phone{width:120px;left:2%;bottom:8px}.nd96-phone img{height:225px}.nd96-saudi-flag{font-size:58px}.nd96-offer-strip__inner{grid-template-columns:220px 1fr}.nd96-offer-mark{grid-column:1/-1;border-inline-start:0;border-top:1px solid #dce9e0}.nd96-banner-device{width:190px}}
@media(max-width:767px){.national-day-96 .nd96-hero{padding-top:44px!important}.nd96-reference-visual{min-height:300px;margin-top:20px}.nd96-laptop{width:92%}.nd96-laptop-screen{border-width:6px;border-radius:10px}.nd96-phone{width:82px;left:0;bottom:12px;padding:4px;border-radius:16px}.nd96-phone img{height:155px;border-radius:12px}.nd96-saudi-flag{font-size:40px;right:0;top:-6px}.nd96-countdown{padding:12px 10px}.nd96-countdown__unit{padding:8px 2px}.nd96-countdown strong[data-days],.nd96-countdown strong[data-hours],.nd96-countdown strong[data-minutes],.nd96-countdown strong[data-seconds]{font-size:24px}.nd96-offer-strip{padding:18px 12px}.nd96-offer-strip__inner{grid-template-columns:1fr;min-height:0;padding:18px;gap:14px}.nd96-banner-visual{min-height:110px;justify-content:center}.nd96-banner-device{width:210px}.nd96-banner-visual .nd96-offer-seal{left:4%;top:0;width:72px;height:72px}.nd96-offer-copy{text-align:center}.nd96-offer-copy strong{font-size:19px}.nd96-offer-copy span{font-size:12px}.nd96-offer-mark{grid-column:auto}.nd96-packages:before{font-size:120px}}

/* ═══════════════════════════════════════════════════════════════════════
   Laravel integration layer.

   Everything above is the approved reference build, unchanged. Below are the
   rules the standalone mockup did not need because it had no live data: an
   expired campaign, a package chip drawn on the real tier card, and the
   dark-theme case — the visitor's light/dark choice is independent of the
   campaign skin, and the mockup only ever rendered light.
   ═══════════════════════════════════════════════════════════════════════ */

/* The countdown after the campaign ends.

   Four zeros with a note saying "book before it ends" reads as a bug. The
   theme script sets data-nd96-expired when the clock reaches zero; the two
   notes swap, and the dead digits dim rather than disappearing — the widget
   staying put is what tells a returning visitor the offer was real. */
.nd96-countdown__over { display: none }
.nd96-countdown[data-nd96-expired] .nd96-countdown__note { display: none }
.nd96-countdown[data-nd96-expired] .nd96-countdown__over { display: block }
.nd96-countdown[data-nd96-expired] .nd96-countdown__grid { opacity: .45 }
.nd96-countdown[data-nd96-expired] .nd96-countdown__live { display: none }

/* The deal chip on a real tier card.

   The mockup's cards were hand-written divs; the live ones are
   `.tier-card`, which clips its children (`overflow-hidden`) and paints a
   ribbon across the top when a tier is popular. So the chip is placed
   INSIDE the card rather than hanging off it, and it sits below the ribbon
   line so the two never overlap. */
.national-day-96 .tier-card { position: relative }
.national-day-96 .tier-card .nd96-deal-chip { top: 10px; left: 10px; z-index: 2 }
.national-day-96 .tier-card:has(> p:first-child) .nd96-deal-chip { top: 44px }

/* Dark theme.

   The visitor's light/dark switch is a separate control from the campaign
   skin and both have to work together. The reference was drawn light-only,
   so every surface it hard-codes to white is re-stated here against the
   dark ground — otherwise choosing dark during the campaign gives white
   cards with white text on them. */
[data-theme="dark"] .national-day-96 .nd96-header { background: rgba(7, 13, 34, .92) !important; border-bottom-color: rgba(43, 180, 110, .18) !important }
/* The offer band in dark mode.
   The banner CARD has to stay a light, readable surface — it is the campaign's
   loudest element and the reference draws it as a bright green-on-white card.
   An earlier version of this file painted the whole band `var(--bg)` and the
   card's own colours were left light-only, which rendered the entire offer as
   a black void with near-invisible text. The band takes the page surface; the
   card keeps its light ground and its own dark ink. */
[data-theme="dark"] .national-day-96 .nd96-offer-strip { background: var(--surface); border-bottom-color: var(--line) }
/* A SOLID base colour under the gradients, not gradients alone.
   A `transparent` stop composites against whatever is behind it, and
   behind this card in dark mode is a near-black band — so every part of
   the card the gradient does not fully paint came out dark instead of
   the intended off-white. `background-color` fills all of those gaps. */
[data-theme="dark"] .national-day-96 .nd96-offer-strip__inner { background-color: #f4faf5; background-image: radial-gradient(circle at 12% 40%, rgba(23, 153, 86, .12), transparent 30%), linear-gradient(105deg, #f1f8f1, rgba(255, 255, 255, .96) 58%, #f6faf3); border-color: rgba(65, 201, 120, .3) }
/* Stated explicitly rather than inherited: the band is dark, the card is not,
   so the card's text must not follow the page's dark ink tokens. */
[data-theme="dark"] .nd96-offer-copy strong { color: #075b38 }
[data-theme="dark"] .nd96-offer-copy span { color: #314c3d }
[data-theme="dark"] .nd96-offer-mark { color: #0b7a45; border-inline-start-color: #dce9e0 }
[data-theme="dark"] .national-day-96 main > section:not(.nd96-hero):not(.nd96-offer-strip) { background: var(--bg) !important }
/* The hero is excluded from the alternating-band rules.

   It was not, and the campaign hero rendered as a flat page-surface colour
   instead of its navy gradient. The reference never hit this because the hero
   was the FIRST section there - always odd, so the even rule could not match
   it. The logo wall now sits above the hero, which made the hero even, and a
   rule about zebra-striping the content bands silently repainted the one
   section that has its own art direction. Positional selectors that assume an
   order are a trap the moment the order changes; the guard is explicit here so
   it cannot happen again. */
[data-theme="dark"] .national-day-96 main > section:nth-of-type(even):not(.nd96-hero):not(.nd96-offer-strip) { background: var(--surface) !important }
[data-theme="dark"] .national-day-96 .nd96-packages { background: var(--bg) !important }
[data-theme="dark"] .nd96-package-card { background: var(--card) !important; border-color: var(--line) !important }
[data-theme="dark"] .nd96-package-card:nth-child(2) { border-color: #2bb46e !important }
[data-theme="dark"] .nd96-new-price { color: #4fd28d }
[data-theme="dark"] .nd96-old-price { color: var(--text-3) }
[data-theme="dark"] .nd96-deal-chip { background: rgba(11, 122, 69, .2); color: #6fdc9f; border-color: rgba(65, 201, 120, .28) }
[data-theme="dark"] .nd96-package-note { background: rgba(11, 122, 69, .1); border-color: rgba(65, 201, 120, .22) }
[data-theme="dark"] .nd96-package-note strong { color: #6fdc9f }
[data-theme="dark"] .nd96-package-note span { color: var(--text-2) }
[data-theme="dark"] .nd96-banner-device { border-color: #0d1526 }

/* The hero picture column.

   `.hero-area-screen` is a named grid area in the live layout — the mockup
   had no grid. Without this the device shot escapes its column on desktop,
   because the reference sets `position: relative !important` on it and
   nothing else. */
.national-day-96 .nd96-reference-visual { grid-area: screen; width: 100%; min-width: 0 }

/* The top bar sits above a STICKY header.

   In the mockup the header scrolled away with the page. Here it sticks, so
   the bar has to scroll out from under it rather than through it — hence a
   z-index below the header's own (z-50) instead of the reference's 70. */
.national-day-96 .nd96-topbar { z-index: 40 }

/* The theme never overrides the skip link or the focus ring. Stated as a
   rule rather than trusted: a campaign that makes the keyboard focus
   invisible is a campaign that makes the site unusable for part of its
   audience, and the reference's `outline: none` habits are exactly where
   that creeps in. */
.national-day-96 .skip-link:focus,
.national-day-96 :focus-visible { outline-color: #0b7a45 }

/* The ZATCA accreditation card on the campaign hero.

   The card keeps a near-white ground (the reference sets that, so the official
   mark is never shown on a tinted field), but the hero around it is dark navy
   and the campaign's own rules recolour `.text-text*` to near-white for that
   ground. Those two meet inside this card: white ink on a white card.

   The reference never hit this because its hero card was hand-written with
   literal colours. Here the text comes from the same tokens the rest of the
   hero uses, so the card has to state its own ink explicitly — and it has to
   win against the `!important` the campaign hero sets on those classes. */
.national-day-96 .nd96-hero .hero-area-zatca .text-text,
.national-day-96 .nd96-hero .hero-area-zatca b { color: #101a35 !important }
.national-day-96 .nd96-hero .hero-area-zatca .text-text-3,
.national-day-96 .nd96-hero .hero-area-zatca span > span { color: #46557a !important }
.national-day-96 .nd96-hero .hero-area-zatca .border-s { border-color: rgba(16, 26, 53, .14) !important }

/* The scroll reveal must never be able to hide content permanently.

   `.nd96-reveal-ready` sets `opacity: 0` and the class is added by JS, with the
   IntersectionObserver expected to take it off again. Every step of that is a
   way for the campaign's loudest elements — the offer banner and the package
   cards — to end up invisible: the script failing to parse, the observer never
   firing for an element that is already past the viewport on load, or a
   browser without IntersectionObserver at all.

   Two guards, both cheap. The reveal only applies once the script has proved it
   is running (it sets `nd96-js` on <html>), so no-JS and broken-JS both render
   the content plainly. And an animation restores full opacity a second later
   regardless, so an observer that never fires costs a delay rather than the
   content. */
.nd96-reveal-ready { opacity: 1; transform: none }
.nd96-js .nd96-reveal-ready { opacity: 0; transform: translateY(18px); animation: nd96-reveal-failsafe 0s 1.2s forwards }
@keyframes nd96-reveal-failsafe { to { opacity: 1; transform: none } }
/* The real reveal still wins — it is later and equally specific. */
.nd96-js .nd96-reveal-in { opacity: 1; transform: none; animation: none }

@media (prefers-reduced-motion: reduce) {
  .nd96-js .nd96-reveal-ready { opacity: 1; transform: none; animation: none }
}

/* ═══════════════════════════════════════════════════════════════════════
   Greeting popup + falling decorations.

   Two features, two switches in the panel, and deliberately no CSS shared
   between them beyond the tokens — turning one off must never affect the
   other. See App\Support\Theme::showsPopup() / showsConfetti().
   ═══════════════════════════════════════════════════════════════════════ */

/* A real <dialog>, so the focus trap, Escape, the inert background and the
   dialog role all come from the platform instead of being reimplemented. */
.nd96-popup {
  width: min(100% - 2rem, 1180px);   /* the site container, as asked */
  max-height: min(88vh, 760px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(150deg, #04203f 0%, #0a4f34 52%, #04203f 100%);
  color: #fff;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
  /* Centring, stated in full rather than left to the UA.

     `margin: auto` alone centres a dialog only while the UA's own `inset: 0`
     survives — and a page that has touched `dialog { … }` at all can leave the
     box pinned to one side, which on a narrow screen pushes half the panel off
     the edge. Pinning all four insets and letting auto margins do the work is
     the version that cannot be undone by a stylesheet loaded earlier. */
  position: fixed;
  inset: 0;
  margin: auto;
}
.nd96-popup::backdrop { background: rgba(3, 14, 30, .72); backdrop-filter: blur(4px) }

/* The whole panel scrolls if the viewport is short, rather than the dialog
   growing past the screen and putting the close button out of reach. */
.nd96-popup__body { padding: clamp(28px, 5vw, 56px); text-align: center; overflow-y: auto }

.nd96-popup__close-form { position: absolute; inset-inline-end: 14px; inset-block-start: 14px; z-index: 3 }
.nd96-popup__close {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
  transition: background .2s ease;
}
.nd96-popup__close:hover { background: rgba(255, 255, 255, .22) }

/* An uploaded design replaces the panel entirely.

   A column, not two stacked blocks, and that is what keeps the button on
   screen. The art used to be capped at 78vh while the dialog itself stops at
   88vh — so on a phone the picture plus the button plus their padding came to
   more than the panel could show, and `overflow: hidden` took the difference
   off the bottom. The button was not below the fold; it was cut off entirely.

   `min-height: 0` on the image is what lets it shrink at all: a flex item
   refuses to go below its content's intrinsic size without it, so the picture
   would keep its height and push the button out again. The button's row is
   `flex-shrink: 0`, so whatever has to give, it is never the thing the visitor
   is meant to press.

   ── [open] is not decoration ──

   A closed <dialog> is hidden by the UA's own `display: none`, and ANY display
   value set on the element beats it — so an unqualified `display: flex` here
   left the popup on the page permanently, unstyled by ::backdrop and with
   nothing to close it. Scoping to [open] is what keeps the layout for the
   opened dialog and the hiding for the closed one.

   ── Matched two ways, on purpose ──

   `--art` is a class this stylesheet's own template adds. The stylesheet and
   the template are separate files on a host deployed by hand, file by file, so
   they can be out of step in either direction for as long as it takes somebody
   to upload the second one — and a template without the class would leave the
   art branch with no layout at all.

   `:has(.nd96-popup__art)` matches the same dialog by what is INSIDE it, which
   both versions of the template put there. Whichever file arrives first, the
   layout is correct. */
.nd96-popup--art[open],
.nd96-popup[open]:has(.nd96-popup__art) { display: flex; flex-direction: column }

.nd96-popup__art {
  display: block; width: 100%; height: auto;
  min-height: 0; flex: 1 1 auto;
  object-fit: contain;
}

.nd96-popup__actions--under-art { flex: 0 0 auto; padding: 18px 24px 24px }

/* The crest: the flag sits ABOVE the 96, not on top of it.

   They were centred in the same grid cell, which stacked the flag over the
   numerals — and on a platform without a flag emoji (or in a headless render)
   the fallback "SA" letters land squarely across the digits. Stacked in two
   rows, neither can obscure the other whatever the font does. */
.nd96-popup__crest { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 6px }
.nd96-popup__crest-num {
  font: 900 clamp(56px, 9vw, 96px)/1 Inter, sans-serif; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px rgba(80, 214, 143, .5);
}
.nd96-popup__crest-palm { font-size: clamp(24px, 4vw, 36px); line-height: 1 }

.nd96-popup__badge {
  display: inline-block; margin-bottom: 14px; padding: 6px 16px; border-radius: 999px;
  background: rgba(43, 180, 110, .18); border: 1px solid rgba(80, 214, 143, .38);
  color: #8ff0bb; font-size: 12px; font-weight: 800;
}
.nd96-popup__title { margin: 0 0 12px; font-size: clamp(24px, 4vw, 42px); font-weight: 800; line-height: 1.3 }
.nd96-popup__text {
  margin: 0 auto; max-width: 60ch; color: #cfe3d8;
  font-size: clamp(14px, 1.6vw, 17px); line-height: 1.9;
}

.nd96-popup__actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px;
}
.nd96-popup__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 34px; border-radius: 999px; font-weight: 800; text-decoration: none;
  background: linear-gradient(135deg, #22b06a, #0a7a45); color: #fff;
  box-shadow: 0 16px 34px -16px rgba(11, 122, 69, .8);
  transition: transform .2s ease;
}
.nd96-popup__cta:hover { transform: translateY(-2px) }
.nd96-popup__later {
  padding: 14px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: #b6cabe; font-weight: 700; font-size: 14px;
}
.nd96-popup__later:hover { color: #fff }

@media (max-width: 640px) {
  .nd96-popup { width: calc(100vw - 1.5rem); max-width: calc(100vw - 1.5rem); border-radius: 18px }
  .nd96-popup__actions { flex-direction: column }
  .nd96-popup__cta, .nd96-popup__later { width: 100% }

  /* The button under an uploaded design, sized for a thumb.

     Full width like its sibling above, but the padding is trimmed and the type
     is capped rather than inherited: this label is a sentence ("شاهد عروض
     اليوم الوطني"), not the two words the drawn panel uses, and at the desktop
     size it wraps to two lines on a narrow phone. 15px keeps it on one line at
     360px while staying above the 44px tap target the button needs anyway. */
  .nd96-popup__actions--under-art { padding: 14px 16px 18px }
  .nd96-popup__actions--under-art .nd96-popup__cta {
    padding: 13px 20px; font-size: 15px; min-height: 46px;
  }
}

/* ── Falling decorations ──────────────────────────────────────────────
   Purely ornamental, so the layer is inert to the pointer and hidden from
   assistive tech, and it never affects layout: `position: fixed` with no
   size of its own means turning it off changes nothing on the page. */
.nd96-fall {
  position: fixed; inset: 0; z-index: 45;
  pointer-events: none; overflow: hidden;
}
.nd96-fall i {
  position: absolute; top: -8vh; display: block;
  font: 900 26px/1 Inter, sans-serif; color: rgba(43, 180, 110, .85);
  will-change: transform;
  animation: nd96-fall-drop linear infinite;
}
.nd96-fall i[data-kind="gift"] { font-size: 26px; color: inherit }
.nd96-fall i[data-kind="num"] { -webkit-text-stroke: 1.5px rgba(43, 180, 110, .75); color: transparent }

@keyframes nd96-fall-drop {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0 }
  8%   { opacity: 1 }
  90%  { opacity: 1 }
  100% { transform: translate3d(var(--drift, 0px), 108vh, 0) rotate(var(--spin, 220deg)); opacity: 0 }
}

/* Ornament is the first thing to go when motion is unwelcome — and the layer
   is removed outright rather than frozen, so it cannot sit as a static row of
   symbols over the page. */
@media (prefers-reduced-motion: reduce) { .nd96-fall { display: none } }

/* The flag sits clear of the laptop, not on it.

   The reference placed it at `right: 2%; top: -18px`, which overlapped the
   screen bezel — and where the flag emoji is unavailable the "SA" fallback
   letters land squarely on the dashboard. Pulled outside the device on both
   axes so neither the glyph nor its fallback can cover the screenshot. */
/* Above the device, always. Percentages tracked the laptop as it grew and
   put the glyph back on the screen; a fixed offset from the stack's own top
   edge cannot. */
.nd96-saudi-flag { right: auto; left: 2%; top: -8px; z-index: 1 }

@media (max-width: 991px) { .nd96-saudi-flag { left: 1%; top: -4px } }
@media (max-width: 767px) { .nd96-saudi-flag { left: 0; top: 0 } }

/* The logo wall in dark mode.

   It is the first band under the menu, and the page tokens paint it #000108 -
   near-pure black. A row of white logo plates on that reads as a hole punched
   in the page rather than as a section, and the hard edge against the navy
   hero below makes it worse.

   Hooked on a class the SECTION carries only while this theme is on, rather
   than on a descendant selector. Four earlier attempts - :has(), a section
   context, !important, a custom property - all lost the cascade to the band
   rules and the utility layer; a class on the element itself does not have
   that problem, and it also documents in the markup that a theme owns this. */
.clients-band--nd96 { --clients-ground: #f4f7fd }

[data-theme="dark"] .clients-band--nd96 {
  --clients-ground: #061a2e;
  border-color: rgba(65, 201, 120, .18) !important;
}

/* The property resolves correctly on its own - the problem was never the
   variable. `background` is also set with !important by the generic band
   rules earlier in this file, and an !important shorthand beats a normal
   longhand no matter how the colour got there. So the ground is restated here
   as an !important longhand, which is the only declaration that outranks it. */
/* Specificity, not order, is what decided this.

   The generic band rule at the top of this layer is
   `[data-theme="dark"] .national-day-96 main > section:not(...):not(...)` with
   !important - two attribute/class selectors and two :not() pseudo-classes.
   A lone `.clients-band--nd96 !important` is a single class and loses to it
   however late it appears. Matching the same shape wins on the tiebreak. */
[data-theme="dark"] .national-day-96 main > section.clients-band--nd96:not(.nd96-hero):not(.nd96-offer-strip),
.national-day-96 main > section.clients-band--nd96 {
  background-color: var(--clients-ground) !important;
  background-image: none !important;
}


/* The edge fades either side of the marquee are painted with `--bg` and would
   otherwise fade the moving strip out to black over the new ground. */
[data-theme="dark"] .national-day-96 main > section.clients-band [class*="to-bg"] {
  --tw-gradient-to: #061a2e var(--tw-gradient-to-position) !important;
}

/* The campaign device shot fills its column, like the default hero's screens.

   The reference capped the laptop at 660px because that mockup was a fixed
   1440 canvas. Here the hero's picture column is `xl:max-w-[1320px]` wide and
   the shot was floating in the middle of it at half size — the same "the
   images look small" problem the default hero's own comment describes, where a
   1280px screenshot was being drawn at 519px.

   Removing the cap lets it scale with the column, and the stack keeps its own
   height so nothing below it moves. */
.nd96-reference-visual { min-height: 0 }
.nd96-visual-stack { width: 100% }
.nd96-laptop { width: 100%; max-width: none }

/* The phone scales with the laptop rather than staying a fixed 150px, or it
   shrinks into a chip beside a full-width device. */
.nd96-phone { width: clamp(120px, 22%, 230px); bottom: 6% }
.nd96-phone img { height: auto; aspect-ratio: 9 / 17 }

@media (max-width: 991px) {
  .nd96-phone { width: clamp(96px, 24%, 160px) }
}

/* The logo wall in dark mode.

   It is the first band under the menu, and the page tokens paint it #000108 -
   near-pure black. A row of white logo plates on that reads as a hole punched
   in the page rather than as a section, and the hard edge against the navy
   hero below makes it worse.

   Set through the custom property the section declares, which is the only
   route that survives the cascade here: the band previously carried a `bg-bg`
   utility from \@layer utilities, and no unlayered rule - !important included -
   could beat it. See sections/clients.blade.php. */
[data-theme="dark"] .national-day-96 .clients-band {
  --clients-ground: #061a2e;
  border-color: rgba(65, 201, 120, .16) !important;
}

/* The banner's third column, now a button.

   It keeps the column it always had so the three-part grid is unchanged; only
   the affordance is new. `text-decoration: none` and a real hover state,
   because a link that looks like a caption is a link nobody presses. */
.nd96-offer-mark--cta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  border-radius: 14px;
  padding: 14px 18px;
  background: linear-gradient(145deg, #15995b, #087541);
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(10, 115, 65, .7);
  transition: transform .2s ease, box-shadow .2s ease;
  border-inline-start: 0;
}
.nd96-offer-mark--cta:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -16px rgba(10, 115, 65, .85) }
.nd96-offer-mark--cta strong { color: #fff; font-size: 17px }
.nd96-offer-mark--cta span { color: rgba(255, 255, 255, .82); font-size: 12px }

/* The offer banner in dark mode.

   The card stays a light surface — it is the campaign's loudest element and
   the reference draws it bright green on white — but the BAND behind it was
   taking the page's near-black `--bg`, which framed a bright card in a black
   box. Same treatment as the logo wall above it, and for the same reason.

   Specificity is matched to the generic band rules deliberately: those carry
   !important and two :not() pseudo-classes, and a plainer selector loses the
   tiebreak however late it appears. */
[data-theme="dark"] .national-day-96 main > section.nd96-offer-strip,
[data-theme="dark"] .national-day-96 .nd96-offer-strip {
  background-color: #061a2e !important;
  background-image: none !important;
  border-color: rgba(65, 201, 120, .18) !important;
}

/* The campaign's extra-seat price, on every package card.

   Deliberately quieter than the tier price above it: a second large number on
   a pricing card competes with the one the reader came for. The figure is
   emphasised and the row is not — a tinted strip with a green rule, sitting
   directly under the included-seat boxes it answers. */
.nd96-seat-offer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(11, 122, 69, .22);
  background: linear-gradient(100deg, rgba(18, 153, 87, .10), rgba(18, 153, 87, .03));
  border-inline-start: 3px solid #12995b;
}
.nd96-seat-offer__label { font-size: 12px; font-weight: 700; color: #0b7a45 }
.nd96-seat-offer__price { display: flex; align-items: baseline; gap: 4px; color: #087541 }
.nd96-seat-offer__price strong { font-size: 20px; font-weight: 900; letter-spacing: -.02em }
.nd96-seat-offer__price span { font-size: 11px; font-weight: 700 }
.nd96-seat-offer__note {
  grid-column: 1 / -1;
  font-size: 10.5px;
  line-height: 1.6;
  color: #5f7566;
}

/* Dark mode: the card behind this is `--card`, so the strip lifts with a
   green tint rather than dropping to a darker box. */
[data-theme="dark"] .nd96-seat-offer {
  border-color: rgba(65, 201, 120, .28);
  background: linear-gradient(100deg, rgba(43, 180, 110, .16), rgba(43, 180, 110, .05));
  border-inline-start-color: #2bb46e;
}
[data-theme="dark"] .nd96-seat-offer__label { color: #6fdc9f }
[data-theme="dark"] .nd96-seat-offer__price { color: #4fd28d }
[data-theme="dark"] .nd96-seat-offer__note { color: var(--text-3) }

/* The campaign strip and the header travel together.

   The strip was `relative`, so it scrolled away while the sticky header
   stayed — and the header then sat where the strip had been, which read
   as the strip having been swallowed. Making it sticky as well pins the
   two as one band.

   The header's offset is the strip's own height, and it is a variable
   because that height changes with the breakpoint: 41px on a phone,
   46px above it. `top-0` on the header is a Tailwind utility, so this
   needs the extra specificity to win. */
.national-day-96 { --nd96-topbar-h: 46px }
.national-day-96 header[data-header] { top: var(--nd96-topbar-h) }
@media (max-width: 767px) { .national-day-96 { --nd96-topbar-h: 41px } }


/* ── Countdown, compact ───────────────────────────────────────────────

   It leads the headline column now instead of closing it, so it has to sit
   in the space a badge used to take rather than the space a card did. Roughly
   half its old height: the digits come down from 32px, the padding and the
   gaps with them, and the head and foot rows lose the margins that were
   holding it open.

   Written last and scoped to the campaign so it wins over the four earlier
   rules that size these same parts at three breakpoints — the alternative was
   editing all of them and hoping none was missed. */
.national-day-96 .nd96-countdown {
  width: min(100%, 420px);
  margin-top: 0;
  padding: 10px 12px;
  border-radius: 14px;
}

.national-day-96 .nd96-countdown__head { margin-bottom: 7px }
.national-day-96 .nd96-countdown__title span { font-size: 10px }
.national-day-96 .nd96-countdown__title strong { font-size: 12px }
.national-day-96 .nd96-countdown__live { padding: 3px 7px; font-size: 9px }

.national-day-96 .nd96-countdown__grid { gap: 4px }
.national-day-96 .nd96-countdown__unit { padding: 4px 2px }

.national-day-96 .nd96-countdown strong[data-days],
.national-day-96 .nd96-countdown strong[data-hours],
.national-day-96 .nd96-countdown strong[data-minutes],
.national-day-96 .nd96-countdown strong[data-seconds] {
  font-size: 19px;
}

.national-day-96 .nd96-countdown__unit span { margin-top: 2px; font-size: 9px }
.national-day-96 .nd96-countdown__foot { margin-top: 7px; gap: 5px }
.national-day-96 .nd96-countdown__foot small { font-size: 8px }

@media (max-width: 767px) {
  .national-day-96 .nd96-countdown { padding: 9px 10px }

  .national-day-96 .nd96-countdown strong[data-days],
  .national-day-96 .nd96-countdown strong[data-hours],
  .national-day-96 .nd96-countdown strong[data-minutes],
  .national-day-96 .nd96-countdown strong[data-seconds] {
    font-size: 17px;
  }
}


/* ── Countdown, compact — second pass ─────────────────────────────────

   Down from 144px to roughly half. The first pass shrank the type; this one
   changes the shape, because the type was no longer what was costing the
   height.

   The head was 43px of it: a label stacked over a date, in a row that also
   held the "عرض محدود" chip (now gone from the markup entirely). On one line
   the same two strings cost a single line box.

   The foot loses the progress rail. It restated what four counting numbers
   already say, and it was a whole row to say it in. */
.national-day-96 .nd96-countdown__head {
  margin-bottom: 5px;
}

.national-day-96 .nd96-countdown__title {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}

.national-day-96 .nd96-countdown__foot { margin-top: 5px }
.national-day-96 .nd96-countdown__rail { display: none }

/* The unit labels — يوم, ساعة — sit tight under their numbers rather than
   a line away from them. */
.national-day-96 .nd96-countdown__unit { padding: 2px 2px }
.national-day-96 .nd96-countdown__unit span { margin-top: 0 }

.national-day-96 .nd96-countdown { padding: 8px 12px }

@media (max-width: 767px) {
  .national-day-96 .nd96-countdown { padding: 7px 10px }
}

/* The digits, once more. At 19px they were the tallest row left; the numbers
   are still the loudest thing in the widget because everything around them is
   9px or smaller. */
.national-day-96 .nd96-countdown strong[data-days],
.national-day-96 .nd96-countdown strong[data-hours],
.national-day-96 .nd96-countdown strong[data-minutes],
.national-day-96 .nd96-countdown strong[data-seconds] {
  font-size: 16px;
}

@media (max-width: 767px) {
  .national-day-96 .nd96-countdown strong[data-days],
  .national-day-96 .nd96-countdown strong[data-hours],
  .national-day-96 .nd96-countdown strong[data-minutes],
  .national-day-96 .nd96-countdown strong[data-seconds] {
    font-size: 15px;
  }
}

.national-day-96 .nd96-countdown__title span { font-size: 9px }
.national-day-96 .nd96-countdown__title strong { font-size: 11px }
.national-day-96 .nd96-countdown__unit span { font-size: 8px }

/* ── Countdown, third pass ────────────────────────────────────────────

   Down to about 72px — half the 144 it started at.

   What is left to take is the foot: the note under the digits repeats the
   headline's own urgency in 8px type nobody reads, and the date above them
   already says when this ends. Removing it, and the separators between the
   units, leaves the four numbers and their labels — which is the whole
   message.

   The expired line stays. It replaces the digits when the campaign ends and
   is the one thing in the foot that says something the numbers cannot. */
.national-day-96 .nd96-countdown__note { display: none }

.national-day-96 .nd96-countdown__foot {
  margin-top: 0;
  gap: 0;
}

.national-day-96 .nd96-countdown__unit {
  border-inline-start: 0;
  padding: 0 2px;
}

.national-day-96 .nd96-countdown__head { margin-bottom: 3px }
.national-day-96 .nd96-countdown { padding: 7px 12px }

@media (max-width: 767px) {
  .national-day-96 .nd96-countdown { padding: 6px 10px }
}

/* ── Countdown: the progress rail comes back ──────────────────────────

   It was removed with the rest of the foot when the widget had to halve, on
   the reasoning that it restated what four counting numbers already say. The
   owner wants it: a bar filling toward a deadline reads at a glance in a way
   four numbers do not, and it is the only part of this widget that shows how
   much of the campaign is GONE rather than how much is left.

   It costs 3px instead of the 24px the whole foot did. The note under it stays
   hidden — that was the row's real weight, and the date above the digits
   already says when this ends. */
.national-day-96 .nd96-countdown__rail {
  display: block;
  height: 3px;
}

.national-day-96 .nd96-countdown__foot { margin-top: 6px }

/* ── Countdown: bigger on a desktop ───────────────────────────────────

   The compaction above was driven by a phone, where the widget sits between a
   sticky header and a headline and every pixel it takes is one the headline
   does not get. On a 1280px screen that constraint does not exist, and the
   result read as a caption rather than a deadline.

   So the shrinking stays where it was needed and reverses where it was not:
   wider, larger digits, larger labels — from `md` up, which is the width at
   which the hero stops being one column. */
@media (min-width: 768px) {
  .national-day-96 .nd96-countdown {
    width: min(100%, 560px);
    padding: 14px 18px;
  }

  .national-day-96 .nd96-countdown strong[data-days],
  .national-day-96 .nd96-countdown strong[data-hours],
  .national-day-96 .nd96-countdown strong[data-minutes],
  .national-day-96 .nd96-countdown strong[data-seconds] {
    font-size: 30px;
  }

  .national-day-96 .nd96-countdown__unit { padding: 4px 6px }
  .national-day-96 .nd96-countdown__unit span { font-size: 11px; margin-top: 3px }

  .national-day-96 .nd96-countdown__title span { font-size: 12px }
  .national-day-96 .nd96-countdown__title strong { font-size: 15px }
  .national-day-96 .nd96-countdown__head { margin-bottom: 8px }

  .national-day-96 .nd96-countdown__foot { margin-top: 10px }
  .national-day-96 .nd96-countdown__rail { height: 4px }
}

/* The crest flag is an SVG, not an emoji — see popup.blade. The old rule sized
   it with font-size, which does nothing to a drawing. */
.nd96-popup__crest-flag { display: block; line-height: 0 }
.nd96-popup__crest-flag svg { width: 34px; height: 34px }

/* ── Offer strip: the device shot stands unframed ─────────────────────

   Same correction the hero needed, for the same reason. This box drew a dark
   bezel with a border, a radius and a perspective tilt around the picture —
   right when the uploads were flat screenshots, wrong now: the artwork already
   contains a tablet and a phone with their own bezels, so the frame made a
   device inside a device, and `object-fit: cover` cropped the artwork's edges
   to a 16:10 window it was never drawn for.

   The tilt and the shadow go with it. They belonged to the frame; a drop-shadow
   on the artwork itself is what gives it depth now, and it follows the shape of
   the devices rather than a rectangle around them. */
.nd96-banner-device {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  transform: none;
}

.nd96-banner-device img {
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .18));
}

/* ── Countdown title, legible ─────────────────────────────────────────

   "باقي على نهاية العرض" and its date were 9px and 11px on a phone, which is
   below the size at which Arabic is comfortable to read at all — the compaction
   passes took the type down with the box and went one step too far on this row.
   The digits below carry the urgency; this line has to say what they are
   counting, and it cannot do that unread. */
.national-day-96 .nd96-countdown__title span { font-size: 12px }
.national-day-96 .nd96-countdown__title strong { font-size: 14px }

@media (min-width: 768px) {
  .national-day-96 .nd96-countdown__title span { font-size: 14px }
  .national-day-96 .nd96-countdown__title strong { font-size: 17px }
}

/* ── Campaign slide lead ──────────────────────────────────────────────

   The owner moved the tail of a long headline onto its own line — "على ويب
   سايت + تطبيق جوال" — which fixed the empty space a four-line headline was
   leaving in the shorter slides. But `text-lead` is sized to be read UNDER a
   headline, not to be part of one, and at 17px it read as a footnote to the
   offer rather than the second half of it.

   Larger, and white rather than the muted body colour, so the two lines belong
   to each other. Scoped to the campaign: the ordinary hero's lead is a
   paragraph and still wants paragraph sizing. */
.national-day-96 .nd96-hero [data-hero-lead] p {
  font-size: 20px;
  line-height: 1.6;
  color: #dbe7f5 !important;
  font-weight: 700;
}

@media (min-width: 768px) {
  .national-day-96 .nd96-hero [data-hero-lead] p { font-size: 26px }
}