/* ==========================================================================
   New Me — Public website shared styles.
   Backs the reusable Blade components (nav, footer, mobile menu, announce).
   Page-specific styles live in each page's @push('styles') block.
   ========================================================================== */
:root{
  --w-navy:#122B4A; --w-navy-2:#1B3A61; --w-navy-3:#24487A;
  --w-bg:#F7F5F1; --w-tile:#F0EDE6; --w-gray-2:#E8E4DC; --w-gray-3:#D5D0C6;
  --w-ink:#12233B; --w-body:#43536A; --w-muted:#7C8799;
  --w-orange:#F07F2D; --w-orange-deep:#DD6516; --w-orange-hi:#FFA05C; --w-orange-soft:#FFF0E1;
  --w-green:#39B478;
  --w-grad:linear-gradient(105deg,var(--w-orange-hi),var(--w-orange) 55%,var(--w-orange-deep));
  --w-font:'Cairo',-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
  --w-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sar-icon:url('../images/icons/saudi-riyal.svg');
}

/* Official Saudi Riyal symbol (SVG mask — always renders correctly). */
.icon-saudi-riyal{
  display:inline-block;
  width:1.05em;
  height:1.15em;
  vertical-align:-0.18em;
  background-color:currentColor;
  -webkit-mask:var(--sar-icon) center / contain no-repeat;
  mask:var(--sar-icon) center / contain no-repeat;
  flex-shrink:0;
}

/* ---- fade-in for AI/remote images & reveal-on-scroll ---- */
.aiimg{transition:opacity .9s ease}
.js .aiimg{opacity:0}
.js .aiimg.loaded{opacity:1}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.i{width:1.05em;height:1.05em;fill:currentColor;vertical-align:-0.14em;display:inline-block}

/* ---- shared buttons ---- */
.w-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--w-font);font-weight:800;font-size:15px;border-radius:999px;padding:16px 32px;min-height:54px;border:2px solid var(--w-orange);background:var(--w-grad);color:#fff;transition:.2s;box-shadow:0 12px 28px rgba(240,127,45,.35)}
.w-btn:hover{filter:brightness(1.06)}
.w-btn:active{transform:scale(.97)}
.w-btn.sm{padding:12px 22px;min-height:46px;font-size:13.5px}

/* ---- announcement bar ---- */
.announce{background:var(--w-navy);color:#fff;text-align:center;padding:calc(9px + var(--sat)) 14px 9px;font-size:12.5px;font-weight:700;position:relative;overflow:hidden}
.announce b{color:var(--w-orange-hi)}
.announce.rotate{min-height:calc(38px + var(--sat))}
.announce.rotate span{position:absolute;inset-inline:14px;top:calc(9px + var(--sat));opacity:0;transition:opacity .4s}
.announce.rotate span.on{opacity:1}

/* ---- top navigation ---- */
nav.main{position:sticky;top:0;padding-top:var(--sat);z-index:90;background:rgba(247,245,241,.9);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--w-gray-2)}
nav.main .bar{max-width:1260px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:66px;padding:0 20px;gap:12px}
.logo{display:inline-flex;align-items:center;gap:10px;line-height:0}
.logo__img{display:block;height:40px;width:auto;max-width:160px;object-fit:contain}
.logo b{font-size:19px;color:var(--w-navy);font-weight:900;line-height:1.2}
.nav-links{display:none;gap:20px;font-weight:800;font-size:13.5px;color:var(--w-ink)}
.nav-links a{padding:6px 0;border-bottom:2.5px solid transparent;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{border-color:var(--w-orange)}
@media(min-width:1060px){.nav-links{display:flex}}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-cta{font-size:12px;font-weight:900;color:var(--w-ink);border:1.5px solid var(--w-ink);border-radius:999px;padding:6px 16px;height:36px;display:inline-flex;align-items:center;transition:.2s;line-height:1}
.nav-cta:hover{background:var(--w-ink);color:#fff}
.nav-right .w-btn,.nav-right .w-btn.sm{min-height:36px;height:36px;padding:0 16px;font-size:12.5px;border-width:1.5px;box-shadow:0 6px 16px rgba(240,127,45,.28);line-height:1}
.lang-toggle{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border-radius:999px;border:1.5px solid var(--w-gray-3);background:#fff;color:var(--w-navy);font-family:var(--w-mono);font-weight:800;font-size:12px;letter-spacing:.04em;transition:.2s;flex-shrink:0}
.lang-toggle:hover{border-color:var(--w-orange);color:var(--w-orange-deep)}
.mmenu .lang-toggle{align-self:flex-start;margin-top:20px;background:transparent;border-color:rgba(255,255,255,.25);color:#EAF1FA}
.mmenu .lang-toggle:hover{border-color:#FFA05C;color:#FFA05C}
.lang-toggle.on-dark{height:34px;min-width:34px;background:transparent;border-color:rgba(255,255,255,.16);color:#EAF1FA}
.lang-toggle.on-dark:hover{border-color:#F07F2D;color:#FFA05C}
.cart{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--w-gray-3);background:#fff;display:grid;place-items:center;position:relative;flex-shrink:0}
.cart .i{width:16px;height:16px;color:var(--w-navy)}
.cart i{position:absolute;top:-3px;inset-inline-start:-3px;background:var(--w-orange);color:#fff;font-style:normal;font-size:9px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-weight:800}
.cart i.is-empty{display:none}
.acct{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--w-gray-3);background:#fff;display:grid;place-items:center;flex-shrink:0;color:var(--w-navy)}
.acct:hover{border-color:var(--w-orange);color:var(--w-orange-deep)}
.acct .i{width:16px;height:16px}

/* ---- burger + mobile menu (shared, theme-independent) ---- */
.burger{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--w-gray-2);background:transparent;color:var(--w-navy);flex-shrink:0}
.burger svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
@media(min-width:1060px){.burger{display:none}}
.mmenu{position:fixed;inset:0;z-index:300;background:linear-gradient(160deg,#122B4A,#0A1B31 70%);display:flex;flex-direction:column;justify-content:center;padding:80px 34px 50px;transform:translateY(-102%);transition:transform .5s cubic-bezier(.77,0,.18,1);overflow-y:auto}
.mmenu.open{transform:translateY(0)}
.mmenu::before{content:"";position:absolute;top:-120px;inset-inline-end:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(240,127,45,.25),transparent 65%);pointer-events:none}
.mmenu .mkick{font-family:var(--w-mono);font-size:10px;letter-spacing:.34em;color:#FFA05C;text-transform:uppercase;margin-bottom:20px}
.mmenu a.mlink{display:block;color:#EAF1FA;font-size:27px;font-weight:900;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);letter-spacing:-.01em}
.mmenu a.mlink:active{color:#FFA05C}
.mmenu a.mcta{display:inline-flex;align-items:center;justify-content:center;margin-top:26px;background:linear-gradient(105deg,#FFA05C,#F07F2D 55%,#DD6516);color:#fff;font-weight:900;font-size:15px;border-radius:999px;padding:16px 34px;box-shadow:0 14px 34px rgba(240,127,45,.4)}
.mmenu .mfoot{margin-top:auto;padding-top:28px;font-size:11px;font-weight:700;color:#8FA6C6}
.mclose{position:absolute;top:calc(20px + var(--sat));inset-inline-end:22px;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:none;color:#fff;font-size:20px;font-weight:900;display:grid;place-items:center}
body.menu-open{overflow:hidden}

/* ---- footers ---- */
footer.w-foot-simple{background:var(--w-navy);color:#9FB4D2;padding:44px 24px calc(48px + var(--sab));text-align:center;margin-top:56px}
footer.w-foot-simple .flinks{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font-size:12.5px;font-weight:800;margin-bottom:16px}
footer.w-foot-simple .flinks a:hover{color:var(--w-orange-hi)}
footer.w-foot-simple .legal{font-size:10.5px;font-weight:600;color:#6E84A5;line-height:2}

footer.w-foot-full{background:var(--w-navy);color:#9FB4D2;padding:56px 24px calc(30px + var(--sab));margin-top:0}
footer.w-foot-full .f-grid{max-width:1160px;margin:0 auto;display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:820px){footer.w-foot-full .f-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
footer.w-foot-full .f-news h3{color:#fff;font-size:18px;margin:6px 0 8px}
footer.w-foot-full .f-news p{font-size:13px;font-weight:600;max-width:320px;margin-bottom:14px}
footer.w-foot-full .f-form{display:flex;gap:8px;max-width:340px}
footer.w-foot-full .f-form input{flex:1;min-width:0;font-family:var(--w-font);font-size:13px;font-weight:700;padding:12px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff}
footer.w-foot-full .f-form button{font-family:var(--w-font);font-weight:900;font-size:13px;color:#fff;background:var(--w-grad);border:none;border-radius:999px;padding:12px 22px}
footer.w-foot-full .f-col h4{color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--w-mono);margin-bottom:12px}
footer.w-foot-full .f-col a{display:block;font-size:13px;font-weight:700;padding:4px 0}
footer.w-foot-full .f-col a:hover{color:var(--w-orange-hi)}
footer.w-foot-full .f-bottom{max-width:1160px;margin:34px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;font-weight:600;color:#6E84A5}