/* DAZRO — My Account app shell (Update 177). Manrope, navy + white, lime accent.
   Mobile: app bar + drawer + bottom tabs. Desktop (>=1024px): app bar + fixed sidebar. */
:root{--a-navy:#0E3A66;--a-deep:#071D35;--a-ink:#0B1524;--a-muted:#566374;--a-line:#E6EAF0;--a-bg:#F4F6F9;--a-soft:#EEF3F9;--a-lime:#C6D870;
  --a-ok:#1c7a4a;--a-ok-bg:#E7F6EE;--a-warn:#8a5a1a;--a-warn-bg:#FFF4E0;--a-bad:#b3261e;--a-bad-bg:#FDECEC;--a-info:#0E3A66;--a-info-bg:#EAF1F8;
  --a-bar:56px;--a-side:272px;--a-tabs:62px;--a-r:14px}
html:has(#dzApp){overflow-x:clip!important;scroll-padding-top:calc(var(--a-bar) + 12px)}
body:has(> #dzApp){margin:0;padding:0!important;background:var(--a-bg);overflow-x:clip!important;font-family:'Manrope','IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--a-ink)}
html.app-lock,html.app-lock body{overflow:hidden}
.app{min-height:100vh;min-height:100dvh;width:100%;overflow-x:clip;padding-top:calc(var(--a-bar) + env(safe-area-inset-top,0px))}
.app *,.app *::before,.app *::after{box-sizing:border-box}
.app img,.app svg,.app video,.app canvas{max-width:100%}
.app-skip{position:absolute;left:-999px;top:0;background:#fff;padding:10px 14px;z-index:100;border-radius:8px}
.app-skip:focus{left:10px;top:10px}
.app-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- app bar ---------- */
.app-bar{position:fixed;top:0;left:0;right:0;z-index:40;height:calc(var(--a-bar) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 6px 0;display:flex;align-items:center;gap:4px;background:#fff;border-bottom:1px solid var(--a-line)}
.app-ic{width:44px;height:44px;flex:none;display:inline-grid;place-items:center;border:0;background:none;border-radius:12px;color:var(--a-deep);cursor:pointer;text-decoration:none}
.app-ic:hover{background:var(--a-soft)}
.app-ic:focus-visible,.app-nav-a:focus-visible,.app-tab:focus-visible,.app a:focus-visible,.app button:focus-visible{outline:2px solid var(--a-navy);outline-offset:2px}
.app-logo{flex:none;display:flex;align-items:center;padding:0 6px;height:44px}
.app-logo img{height:22px;width:auto;display:block}
.app-title{flex:1;min-width:0;font-weight:800;font-size:.98rem;color:var(--a-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:10px;border-left:1px solid var(--a-line);line-height:24px}
.app--guest .app-bar{padding-left:10px}

/* ---------- drawer / sidebar ---------- */
.app-scrim{position:fixed;inset:0;background:rgba(7,29,53,.42);z-index:60}
.app-drawer{position:fixed;z-index:70;top:0;bottom:0;left:0;width:min(86vw,320px);background:#fff;display:flex;flex-direction:column;transform:translateX(-102%);transition:transform .24s ease;box-shadow:8px 0 30px rgba(7,29,53,.18);padding-top:env(safe-area-inset-top,0px)}
.app-drawer.open{transform:none}
.app-me{display:flex;align-items:center;gap:12px;padding:16px 10px 16px 16px;background:var(--a-navy);color:#fff}
.app-av{width:44px;height:44px;flex:none;border-radius:50%;background:var(--a-lime);color:var(--a-deep);display:grid;place-items:center;font-weight:800;font-size:1rem}
.app-me-t{flex:1;min-width:0}.app-me-t b{display:block;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-me-t small{display:block;font-size:.78rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-drawer-x{color:#fff}.app-drawer-x:hover{background:rgba(255,255,255,.12)}
.app-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 10px 24px;overscroll-behavior:contain}
.app-nav-h{margin:14px 8px 4px;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--a-muted)}
.app-nav-a{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 10px;border:0;background:none;border-radius:10px;color:var(--a-ink);font:inherit;font-weight:600;font-size:.93rem;text-decoration:none;text-align:left;cursor:pointer}
.app-nav-a svg{flex:none;color:var(--a-muted)}
.app-nav-a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-nav-a:hover{background:var(--a-soft)}
.app-nav-a.on{background:var(--a-soft);color:var(--a-navy);font-weight:800}
.app-nav-a.on svg{color:var(--a-navy)}
.app-badge{font-style:normal;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--a-bad);color:#fff;font-size:.72rem;font-weight:800;display:inline-grid;place-items:center}
.app-out{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--a-line)}
.app-nav-out,.app-nav-out svg{color:var(--a-bad)}
.app-legal{margin:14px 10px 0;font-size:.76rem;color:var(--a-muted)}
.app-legal a{color:var(--a-muted)}

/* ---------- content ---------- */
.app-main{display:block;width:auto;max-width:920px;margin:0 auto;padding:16px 14px calc(var(--a-tabs) + 28px + env(safe-area-inset-bottom,0px));min-width:0;overflow-wrap:anywhere;outline:none}
.app--guest .app-main{max-width:460px;padding-bottom:32px}
/* the old page wrappers become plain blocks inside the app */
.app-main .section,.app-main .acct-page{padding:0!important;margin:0!important;background:none}
.app-main .shell,.app-main .acct-shell{max-width:none!important;width:auto!important;padding:0!important;margin:0!important;display:block}
.app-main .acct{display:block}
.app-main .acct-side{display:none}
.app-main .acct-main{min-width:0;width:100%}
.app-main .acct-main-head{margin:0 0 12px}
.app-main .acct-title,.app-main .acct-main > h1.display,.app-main h1.display{font-size:1.25rem!important;line-height:1.25;margin:0 0 12px!important;letter-spacing:-.01em;color:var(--a-deep)}
.app-main h2{font-size:1.02rem;line-height:1.3}
.app-main .lead{font-size:.95rem}
.app-main .reveal{opacity:1!important;transform:none!important}
/* cards, lists, forms — one look everywhere */
.app-main .prof-card,.app-main .wal-card,.app-main .ref-card,.app-main .wp-card,.app-main .rf-card,.app-main .dash-empty,.app-main .ord-full,.app-main .addr-card,.app-main .card{background:#fff;border:1px solid var(--a-line);border-radius:var(--a-r);padding:16px;box-shadow:none}
.app-main input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.app-main select,.app-main textarea{width:100%;max-width:100%;min-height:46px;font-family:inherit;font-weight:500;font-size:16px;margin-top:6px;border:1px solid #D6DCE4;border-radius:10px;padding:10px 12px;background:#fff;color:var(--a-ink)}
.app-main textarea{min-height:110px}
.app-main input:focus,.app-main select:focus,.app-main textarea:focus{outline:none;border-color:var(--a-navy);box-shadow:0 0 0 3px rgba(14,58,102,.12)}
.app-main label{display:block;font-size:.86rem;font-weight:600;color:var(--a-deep)}
.app-main .btn,.app-main button[type=submit]{min-height:44px}
.app-main .addr-row{display:grid;grid-template-columns:1fr;gap:12px}
.app-main table{display:block;width:100%;overflow-x:auto}
.app-main pre,.app-main code{white-space:pre-wrap;word-break:break-word}
/* status pills + empty states */
.app-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;font-size:.74rem;font-weight:800;white-space:nowrap}
.app-pill.ok{background:var(--a-ok-bg);color:var(--a-ok)}.app-pill.info{background:var(--a-info-bg);color:var(--a-info)}
.app-pill.warn{background:var(--a-warn-bg);color:var(--a-warn)}.app-pill.bad{background:var(--a-bad-bg);color:var(--a-bad)}
.app-empty{text-align:center;padding:22px 12px}
.app-empty svg{width:40px;height:40px;color:var(--a-muted);margin-bottom:6px}
.app-empty b{display:block;font-size:1rem;color:var(--a-deep)}
.app-empty p{color:var(--a-muted);font-size:.9rem;margin:4px 0 14px}
.app-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;background:var(--a-navy);color:#fff;font-weight:700;text-decoration:none}
/* messages already used by the pages */
.app-main .acct-notice,.app-main .sec-msg.ok,.app-main .ord-flash--ok,.app-main .acc-note{border-radius:10px}

/* ---------- overview ---------- */
.ov-hello{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--a-navy);color:#fff;border-radius:var(--a-r);padding:16px}
.ov-hello small{display:block;font-size:.82rem;opacity:.8}.ov-hello b{display:block;font-size:1.25rem;font-weight:800;line-height:1.2}
.ov-shop{flex:none;background:var(--a-lime);color:var(--a-deep);font-weight:800;font-size:.86rem;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:10px}
.ov-alert{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;background:var(--a-warn-bg);color:var(--a-warn);font-weight:700;font-size:.86rem;padding:12px 12px 12px 14px;border-radius:12px;text-decoration:none}
.ov-alert svg{flex:none;width:18px}
.ov-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.ov-stats a{background:#fff;border:1px solid var(--a-line);border-radius:12px;padding:12px 10px;text-decoration:none;color:var(--a-ink);min-width:0}
.ov-stats b{display:block;font-size:1.05rem;font-weight:800;color:var(--a-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-stats small{display:block;font-size:.74rem;color:var(--a-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.ov-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:10px 4px;background:#fff;border:1px solid var(--a-line);border-radius:12px;text-decoration:none;color:var(--a-deep);text-align:center;min-width:0}
.ov-tile svg{color:var(--a-navy)}
.ov-tile b{font-size:.78rem;font-weight:700;line-height:1.2}
.ov-tile small{font-size:.68rem;color:var(--a-muted)}
.ov-card{background:#fff;border:1px solid var(--a-line);border-radius:var(--a-r);padding:6px 14px;margin-top:10px}
.ov-card-h{display:flex;align-items:center;justify-content:space-between;padding:10px 0 4px}
.ov-card-h h2{margin:0;font-size:1rem;font-weight:800;color:var(--a-deep)}
.ov-card-h a{font-size:.86rem;font-weight:700;color:var(--a-navy);text-decoration:none;padding:8px 0}
.ov-order{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--a-line);text-decoration:none;color:var(--a-ink)}
.ov-card-h + .ov-order{border-top:0}
.ov-order b{display:block;font-size:.92rem}.ov-order small{display:block;font-size:.78rem;color:var(--a-muted)}
.ov-order-r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ov-skin{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;background:#fff;border:1px solid var(--a-line);border-radius:var(--a-r);padding:14px;text-decoration:none;color:var(--a-deep)}
.ov-skin small{display:block;font-size:.72rem;color:var(--a-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.ov-skin b{display:block;font-size:.92rem}
.ov-flash{background:var(--a-ok-bg);color:var(--a-ok);font-weight:700;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.ov-flash.err{background:var(--a-bad-bg);color:var(--a-bad)}

/* ---------- bottom tabs (phones) ---------- */
.app-tabs{position:fixed;z-index:50;left:0;right:0;bottom:0;height:calc(var(--a-tabs) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#fff;border-top:1px solid var(--a-line)}
.app-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;font:inherit;font-size:.68rem;font-weight:700;color:var(--a-muted);text-decoration:none;cursor:pointer;min-width:0}
.app-tab svg{width:22px;height:22px}
.app-tab.on{color:var(--a-navy)}
.app-tab.on::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--a-navy)}
.app-tab{position:relative}

/* ---------- small phones ---------- */
@media (max-width:370px){
  .app-logo img{height:19px}.app-title{font-size:.9rem;padding-left:8px}
  .ov-tile b{font-size:.72rem}.ov-stats b{font-size:.95rem}
}
/* ---------- tablet+ ---------- */
@media (min-width:640px){
  .app-main{padding-left:20px;padding-right:20px}
  .app-main .addr-row{grid-template-columns:1fr 1fr}
  .ov-tiles{gap:10px}.ov-stats{gap:10px}
}
/* ---------- desktop: fixed sidebar, no tabs ----------
   Update 178: sidebar + content are one centred block (max 1360px), so there is
   no empty band on wide screens and nothing is cut off on 1024-1366px laptops. */
@media (min-width:1024px){
  :root{--a-wrap:1360px;--a-edge:max(0px,calc((100% - var(--a-wrap)) / 2))}
  .app-bar{padding-left:max(14px,calc((100% - var(--a-wrap)) / 2 + 14px));padding-right:max(14px,calc((100% - var(--a-wrap)) / 2 + 14px))}
  .app-menu-btn{display:none}
  .app-drawer{top:calc(var(--a-bar) + env(safe-area-inset-top,0px));left:var(--a-edge);transform:none;width:var(--a-side);box-shadow:none;border-right:1px solid var(--a-line);border-left:1px solid var(--a-line);z-index:30;transition:none;padding-top:0}
  .app-me{background:#fff;color:var(--a-deep);border-bottom:1px solid var(--a-line)}
  .app-me-t small{color:var(--a-muted);opacity:1}
  .app-drawer-x{display:none}
  .app-scrim{display:none!important}
  html.app-lock,html.app-lock body{overflow:auto}
  .app:not(.app--guest) .app-main{margin-left:calc(var(--a-edge) + var(--a-side));margin-right:var(--a-edge);width:auto;max-width:none;padding:28px clamp(24px,3vw,44px) 48px}
  .app:not(.app--guest) .app-main > *{max-width:1000px;margin-left:auto!important;margin-right:auto!important}
  .app-tabs{display:none}
  .app-title{font-size:1.02rem}
  /* overview uses the width instead of stretching */
  .ov-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ov-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ov-tile{min-height:96px}
}
@media (min-width:1024px) and (max-width:1199px){
  :root{--a-side:240px}
  .app:not(.app--guest) .app-main{padding-left:22px;padding-right:22px}
}
.app-social{margin:12px 8px 0!important}
.app-social a{width:36px;height:36px}
@media (prefers-reduced-motion:reduce){.app-drawer{transition:none}}

/* page-specific polish inside the app */
.app-main .rf-hero{padding:20px 16px;border-radius:var(--a-r)}
.app-main .rf-hero h1{font-size:1.35rem!important;line-height:1.25;margin:0 0 8px!important;color:#fff}
.app-main .rf-hero p{font-size:.9rem}
.app-main .wp-cta{background:#fff;border:1px solid var(--a-line)}
.app-main .wp-big{font-size:1.6rem}
.app-main .rf-code output{font-size:1.25rem}
.app-empty svg{display:block;margin:0 auto 6px}