/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root{
    /* Summer palette (2026-08-12: "summer colors but ... look good with the logo") - the deep
       navy scale became a deep teal/turquoise scale instead (echoes the green swoosh in the
       logo mark and reads as "ocean" rather than "corporate"), gold/paper stayed close to the
       original since they already matched the logo's gold "R" and read warm/sunny on their own;
       ok/danger warmed from a plain green/brick-red into a fresher green and a coral-red. -900/
       -950 stay dark enough to still work as the default body/heading text color on --paper. */
    --navy-950:#052e28;
    --navy-900:#0b3d36;
    --navy-800:#0f5951;
    --navy-700:#147566;
    --navy-600:#1c9e88;
    --gold-500:#e0a72e;
    --gold-400:#f0c860;
    --gold-100:#fbf0d3;
    --paper:#fdf8ec;
    --ok:#2fa968;
    --danger:#e0533f;
    --line:rgba(255,255,255,0.08);
    /* Dark mode (2026-08-13) - the brand teal/gold scale above stays fixed across both themes
       (it's what the header gradient, buttons, and accent chips are built from - same reasoning
       as keeping a signature brand gradient unchanged in dark mode). These five tokens are the
       ones that actually redefine per-theme: page/card surfaces, borders, default body text, and
       the informal "soft input" tint reused across chips/fields/notes throughout this file. Solid
       pragmatic pass, not a full precision rewrite (2026-08-13) - a handful of one-off inline
       `style={{}}` colors in a few component files (AdminPharmacies.tsx, BuyerHome.tsx,
       Directory.tsx, SocialLinks.tsx, PharmacyProfileEdit.tsx, BuyerOrders.tsx) aren't wired
       through these variables yet and may not perfectly re-tint. The login/intro/signup screens
       (their own always-dark teal radial-gradient backgrounds) are untouched on purpose - they
       don't participate in the page theme at all, light or dark. */
    --ink:var(--navy-900);
    --card-bg:#fff;
    --input-bg:#fdfcf8;
    --border-soft:#e7e2d2;
    --muted-text:#a39d86;
    --danger-tint:#fdf1ef;
    /* Tells the browser which native-control defaults to assume (scrollbars, form-control chrome,
       etc) - the explicit color:var(--ink) rules on inputs below are the real dark-mode-legibility
       fix, this is the standards-based belt-and-suspenders companion to them. */
    color-scheme:light;
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --paper:#0a1a17;
    --ink:#eee7d6;
    --card-bg:#102520;
    --input-bg:#0d1f1a;
    --border-soft:#1e352f;
    --muted-text:#82988f;
    --danger-tint:#2c1714;
}
*{box-sizing:border-box;}
html, body{
    margin:0;
    background:var(--paper);
    font-family:'Tajawal',sans-serif;
    color:var(--ink);
    min-height:100vh;
    transition:background-color .2s ease, color .2s ease;
}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--paper);position:relative;}

header.top{
    background:linear-gradient(150deg,var(--navy-950) 0%,var(--navy-700) 70%,#21b39a 100%);
    color:var(--gold-100);
    padding:22px 20px 60px;
    position:relative;
    overflow:hidden;
}
header.top::after{
    content:"";
    position:absolute;inset:auto -20% -60% -20%;
    height:140px;
    background:radial-gradient(ellipse at center, rgba(224,167,46,0.22), transparent 70%);
    pointer-events:none;
}
.brand{font-family:'Cairo',sans-serif;font-weight:800;font-size:22px;letter-spacing:0.5px;display:flex;align-items:center;gap:8px;}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--gold-500);}
.brand-logo{width:52px;height:52px;border-radius:22%;object-fit:cover;transition:transform .25s ease;-webkit-margin-start:auto;margin-inline-start:auto;}
.brand-logo:hover{transform:scale(1.12) rotate(-4deg);}

.social-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;}
.social-icon{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    box-shadow:0 4px 12px rgba(15,27,61,0.12);
    transition:transform .2s ease, filter .2s ease;
}
.social-icon:hover{transform:translateY(-2px);filter:brightness(1.05);}
.social-icon:active{transform:scale(0.94);}
.tagline{font-size:12.5px;color:rgba(247,236,201,0.65);margin-top:4px;}

.availability-pill{
    display:inline-flex;align-items:center;gap:7px;
    margin-top:12px;
    padding:7px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.06);
    color:var(--gold-100);
    font-size:12px;font-weight:700;
    cursor:pointer;
    transition:transform .15s ease, background .15s ease;
}
.availability-pill:active{transform:scale(0.97);}
.availability-pill:disabled{opacity:0.6;cursor:not-allowed;}
.availability-dot{
    width:9px;height:9px;border-radius:50%;
    flex-shrink:0;
    box-shadow:0 0 0 3px rgba(255,255,255,0.08);
}
.availability-pill.on .availability-dot{background:#3ecf6e;box-shadow:0 0 0 3px rgba(62,207,110,0.22);}
.availability-pill.off .availability-dot{background:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,0.22);}
.availability-pill.on{border-color:rgba(62,207,110,0.35);}
.availability-pill.off{border-color:rgba(229,72,77,0.35);}

nav.tabs{
    display:flex;
    margin-top:22px;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--line);
    border-radius:14px;
    padding:4px;
    gap:4px;
}
nav.tabs button{
    flex:1 1;
    padding:10px 6px;
    border:none;
    background:transparent;
    color:rgba(247,236,201,0.55);
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:12.5px;
    border-radius:10px;
    cursor:pointer;
    transition:all .2s;
}
nav.tabs button.active{
    background:var(--gold-500);
    color:var(--navy-950);
}

/* 2026-08-12: "the body form the top should have a space to be safe of the header" - this used
   to pull main up by 20px to overlap the header's own rounded bottom edge for a purely visual
   effect, but the header can now end in real content (the pharmacy availability pill) instead of
   just empty decorative space, and the overlap was clipping it. A comfortable positive gap here
   instead keeps every header's own content fully visible regardless of how tall that header is. */
main{padding:20px 16px 100px;}
.card{
    background:var(--card-bg);
    border-radius:16px;
    padding:16px;
    box-shadow:0 10px 26px rgba(15,27,61,0.07);
    margin-bottom:14px;
    border:1px solid var(--border-soft);
}
.section-label{
    font-family:'Cairo',sans-serif;
    font-weight:800;
    font-size:15px;
    color:var(--ink);
    margin:22px 2px 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.section-label span.count{
    font-family:'Tajawal',sans-serif;
    font-weight:500;
    font-size:11.5px;
    color:#999;
}
.empty{
    text-align:center;
    padding:34px 10px;
    color:var(--muted-text);
    font-size:13px;
}
.empty .glyph{font-size:26px;display:block;margin-bottom:6px;}

/* buyer: new request form */
label.field-label{display:block;font-size:12px;font-weight:700;color:var(--muted-text);margin-bottom:6px;}
label.checkbox-row{
    display:flex;align-items:flex-start;gap:8px;
    font-size:12.5px;color:var(--muted-text);line-height:1.5;
    cursor:pointer;
}
label.checkbox-row input{margin-top:3px;flex-shrink:0;}
/* Dark-mode input-legibility fix (2026-08-13: "some inputs the field is black and the text is
   black") - form controls (input/textarea/select) do NOT inherit `color`/`font` from the page in
   browsers' own UA stylesheets the way normal elements do, so a dark background with no explicit
   `color` here fell back to the browser's own default text color (effectively always dark) -
   invisible on a dark field. The `color-scheme` declared up in :root/:root[data-theme="dark"]
   is the standards-based belt-and-suspenders companion to the explicit `color:var(--ink)` rules
   below (also fixes scrollbar/native-widget chrome). */
input[type=text]{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1.5px solid var(--border-soft);
    font-family:'Tajawal',sans-serif;
    font-size:14px;
    background:var(--input-bg);
    color:var(--ink);
}
input[type=text]:focus{outline:none;border-color:var(--gold-500);}
/* The reference design only styles input[type=password] when it's inside .login-card - any
   password field outside that container (e.g. the pharmacist signup form's own .card) falls
   back to the unstyled browser default, standing out against the styled text fields around it.
   This is the same base look, available everywhere, not just inside .login-card. */
input[type=password]{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1.5px solid var(--border-soft);
    font-family:'Tajawal',sans-serif;
    font-size:14px;
    background:var(--input-bg);
    color:var(--ink);
    letter-spacing:2px;
}
input[type=password]:focus{outline:none;border-color:var(--gold-500);}
textarea{
    font-family:'Tajawal',sans-serif;
    color:var(--ink);
}
input[type=time]{color:var(--ink);}
select{color:var(--ink);background:var(--input-bg);}
.photo-drop{
    margin-top:10px;
    border:1.5px dashed #d8d2bd;
    border-radius:10px;
    padding:16px;
    text-align:center;
    color:var(--muted-text);
    font-size:12.5px;
    cursor:pointer;
}
.photo-drop.attached{border-color:var(--ok);color:var(--ok);background:#f2f9f5;}
.btn{
    display:block;
    width:100%;
    text-align:center;
    padding:12px;
    border-radius:11px;
    border:none;
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    margin-top:12px;
    transition:transform .1s;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--navy-900);color:var(--gold-100);}
.btn-gold{background:var(--gold-500);color:var(--navy-950);}
.btn-ghost{background:var(--card-bg);color:var(--ink);}
.btn-danger-outline{background:var(--danger-tint);color:var(--danger);}
.btn-wa{background:#25D366;color:#fff;}
.btn-sm{padding:8px 10px;font-size:12.5px;margin-top:0;}
.btn:disabled{opacity:0.6;cursor:not-allowed;}

/* order card */
.order-head{display:flex;justify-content:space-between;align-items:flex-start;}
.order-drug{font-family:'Cairo',sans-serif;font-weight:700;font-size:14.5px;}
.order-meta{font-size:11.5px;color:var(--muted-text);margin-top:2px;}
.badge{
    font-size:10.5px;
    font-weight:700;
    padding:4px 9px;
    border-radius:20px;
    white-space:nowrap;
}
.badge-waiting{background:#fdf1e0;color:#b3701a;}
.badge-offers{background:#fdf3e2;color:#a8781c;}
.badge-sold{background:#e9f7ef;color:var(--ok);}
.badge-delivered{background:#e3f5f1;color:var(--navy-800);}
.badge-rejected{background:#fdecea;color:var(--danger);}

/* Order sent-time + expiry countdown (2026-08-19: "should be bigger a bit clearer") - bumped up
   from the shared .order-meta/.badge sizes (11.5px/10.5px, both quite small and .order-meta's
   muted color is fairly low-contrast) since this pair is safety-relevant info the buyer/pharmacy
   actually need to read at a glance, not routine metadata. Scoped to its own classes rather than
   changing .order-meta/.badge globally - those are reused all over the app for things that are
   meant to stay small/secondary. */
.countdown-sent-at{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:2px;}
.countdown-badge{font-size:12.5px;font-weight:800;padding:5px 11px;}

.offer-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0;
    border-top:1px solid var(--border-soft);
}
.offer-pharmacy{font-size:13px;font-weight:700;}
.offer-pharmacy.locked{display:inline-flex;align-items:center;gap:4px;color:var(--muted-text);}
.offer-pharmacy.locked .blurred-name{filter:blur(4px);-webkit-user-select:none;-moz-user-select:none;user-select:none;}
.offer-pharmacy.locked .lock-icon{font-size:11px;}
.offer-distance{font-size:11px;color:var(--muted-text);margin-top:2px;}
.offer-delivery{
    display:inline-flex;align-items:center;gap:5px;
    margin-top:6px;
    padding:4px 10px;
    border-radius:999px;
    font-family:'Tajawal',sans-serif;font-weight:700;font-size:12px;
}
.offer-delivery.available{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok);}
.offer-delivery.pickup-only{background:var(--input-bg);color:var(--muted-text);}
.offer-delivery-icon{font-size:16px;line-height:1;}
.offer-price{font-family:'Cairo',sans-serif;font-weight:800;color:var(--ink);font-size:14px;}
.offer-pick{background:var(--navy-900);color:var(--gold-100);border:none;border-radius:8px;padding:7px 12px;font-size:12px;font-family:'Cairo',sans-serif;font-weight:700;cursor:pointer;}
.offer-reject{background:var(--card-bg);color:var(--danger);border:1px solid #f3d4cf;border-radius:8px;padding:7px 10px;font-size:12px;font-family:'Cairo',sans-serif;font-weight:700;cursor:pointer;}

.price-input-row{display:flex;gap:8px;margin-top:10px;}
.price-input-row input{flex:1 1;}
.price-input-row button{white-space:nowrap;padding:0 16px;}

/* redesigned price field (pharmacist) */
.price-field-block{margin-top:14px;}
.price-field-block .field-label{margin-bottom:6px;}
.price-field-wrap{
    display:flex;
    align-items:center;
    border:1.5px solid var(--border-soft);
    border-radius:12px;
    background:var(--input-bg);
    overflow:hidden;
}
.price-field-wrap input{
    flex:1 1;
    border:none;
    background:transparent;
    padding:13px 14px;
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:16px;
    color:var(--ink);
    width:0;
}
.price-field-wrap input:focus{outline:none;}
.price-field-wrap .unit{
    padding:0 14px;
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:12.5px;
    color:#a8781c;
    background:#fdf3e2;
    height:46px;
    display:flex;
    align-items:center;
    border-right:1.5px solid var(--border-soft);
}
.btn-send-offer{margin-top:10px;}

/* photo picker (buyer) */
.photo-actions{display:flex;gap:10px;margin-top:8px;}
.photo-btn{
    flex:1 1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:13px 8px;
    border:1.5px dashed #d8d2bd;
    border-radius:12px;
    background:var(--input-bg);
    color:var(--muted-text);
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:12.5px;
    cursor:pointer;
    transition:all .15s;
}
.photo-btn:active{transform:scale(0.97);}
.photo-btn svg{color:var(--muted-text);}
.photo-preview{
    position:relative;
    margin-top:8px;
    border-radius:12px;
    overflow:hidden;
    border:1.5px solid var(--border-soft);
}
.photo-preview img{width:100%;display:block;max-height:220px;object-fit:cover;}
.photo-preview img.broken{display:none;}
.photo-preview .broken-fallback{
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    padding:26px 10px;
    color:var(--muted-text);
    font-size:12px;
    background:var(--input-bg);
}
.photo-preview.is-broken .broken-fallback{display:flex;}
.photo-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    padding:8px 14px;
    border-radius:20px;
    border:1px solid var(--border-soft);
    background:var(--input-bg);
    color:var(--muted-text);
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:12px;
    cursor:pointer;
}
.photo-chip:active{transform:scale(0.97);}
.doc-missing-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    padding:8px 14px;
    border-radius:20px;
    border:1px dashed var(--border-soft);
    color:var(--danger);
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:12px;
}

/* buyer capture card */
.capture-card{text-align:center;}
.capture-title{font-family:'Cairo',sans-serif;font-weight:800;font-size:16px;color:var(--ink);margin-bottom:16px;}
.capture-circle-wrap{display:flex;flex-direction:column;align-items:center;}
.capture-circle{
    width:150px;height:150px;
    border-radius:50%;
    background:var(--input-bg);
    border:1.5px solid var(--border-soft);
    box-shadow:0 4px 14px rgba(20,25,60,0.06);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto;
    cursor:pointer;
    color:var(--navy-700, #147566);
    overflow:hidden;
    transition:border-color .15s, box-shadow .15s;
}
.capture-circle:active{border-color:var(--gold-500);box-shadow:0 2px 8px rgba(20,25,60,0.1);}
.capture-circle img{width:100%;height:100%;object-fit:cover;}
.capture-circle.has-photo{border-style:solid;border-color:var(--gold-500);border-width:2px;}
.capture-circle.is-broken img{display:none;}
.capture-photo-error{display:none;margin-top:8px;}
.capture-icon-row{display:flex;justify-content:center;gap:8px;margin-top:14px;}
.capture-icon-btn{
    width:38px;height:38px;
    border-radius:50%;
    border:1px solid var(--border-soft);
    background:var(--input-bg);
    color:var(--muted-text);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
}
.capture-icon-btn.danger{color:var(--danger);border-color:#f3d4cf;}
.capture-icon-btn:active{transform:scale(0.94);}

/* Camera/gallery ("استوديو") picker, shown before a photo is attached - identical circles side
   by side so neither reads as the "real" option and the other an afterthought. */
.capture-buttons-row{display:flex;justify-content:center;gap:16px;}
.capture-media-btn{
    width:96px;height:96px;
    border-radius:50%;
    background:var(--input-bg);
    border:1.5px solid var(--border-soft);
    box-shadow:0 4px 14px rgba(20,25,60,0.06);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;
    cursor:pointer;
    color:var(--navy-700, #147566);
    transition:border-color .15s, box-shadow .15s;
}
.capture-media-btn span{font-size:11px;font-weight:700;color:var(--muted-text);}
.capture-media-btn:active{border-color:var(--gold-500);box-shadow:0 2px 8px rgba(20,25,60,0.1);transform:scale(0.98);}
.search-field{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    padding:12px 14px;
    border-radius:24px;
    border:1.5px solid var(--border-soft);
    background:var(--input-bg);
    color:var(--muted-text);
}
.search-field input{
    flex:1 1;
    border:none;
    background:transparent;
    font-family:'Tajawal',sans-serif;
    font-size:13.5px;
    color:var(--ink);
}
.search-field input:focus{outline:none;}

/* Pharmacy storefront photo shown once an offer is accepted (2026-08-14: "in the last slide he
   should able to see the pharmacy pic") - sits right above the name/icons reveal below it. */
.contact-photo{width:100%;height:120px;border-radius:14px;overflow:hidden;margin-top:10px;background:var(--input-bg);}
.contact-photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* contact reveal (name + wa/call/send icons) */
.contact-reveal{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:var(--input-bg);
    border-radius:14px;
    padding:16px;
    margin-top:10px;
}
.contact-reveal .contact-info{text-align:right;}
.contact-reveal .contact-name{font-family:'Cairo',sans-serif;font-weight:800;font-size:19px;color:var(--ink);}
.contact-reveal .contact-phone{font-size:12.5px;color:var(--muted-text);margin-top:2px;direction:ltr;display:inline-block;}
.contact-icons{display:flex;gap:6px;flex-shrink:0;}
.contact-icon-circle{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    text-decoration:none;
    position:relative;
}
.contact-icon-circle svg{width:16px;height:16px;}
.contact-icon-circle.wa{background:#e3f6ea;color:#25d366;}
.contact-icon-circle.call{background:#fdece4;color:#d9622f;}
.contact-icon-circle.send{background:#fdece4;color:#d9622f;}
.contact-icon-circle.chat{background:#fdf3e2;color:#a8781c;border:none;cursor:pointer;font-size:16px;}
.contact-icon-circle:active{transform:scale(0.94);}
.chat-unread-badge{
    position:absolute;top:-4px;left:-4px;
    min-width:17px;height:17px;padding:0 4px;
    border-radius:999px;
    background:var(--danger);
    color:#fff;
    font-family:'Cairo',sans-serif;font-weight:800;font-size:10px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 2px var(--paper);
}

/* buyer/pharmacist messaging - unlocks once an offer is accepted, see lib/api.ts comment */
.chat-panel{
    margin-top:10px;
    border:1px solid var(--border-soft);
    border-radius:14px;
    background:var(--input-bg);
    padding:12px;
}
.chat-panel-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:8px;
}
.chat-panel-title{font-family:'Cairo',sans-serif;font-weight:800;font-size:13px;color:var(--ink);}
.chat-messages{
    max-height:220px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:8px;
}
.chat-bubble{
    max-width:80%;
    padding:8px 11px;
    border-radius:12px;
    font-size:13px;
    line-height:1.5;
    word-break:break-word;
}
.chat-bubble.own{align-self:flex-end;background:var(--navy-900);color:var(--gold-100);border-bottom-left-radius:4px;}
.chat-bubble.other{align-self:flex-start;background:var(--card-bg);color:var(--ink);border:1px solid #eee6cf;border-bottom-right-radius:4px;}
.chat-bubble time{display:block;margin-top:3px;font-size:10px;opacity:0.65;direction:ltr;text-align:left;}
.chat-empty{text-align:center;color:var(--muted-text);font-size:12px;padding:14px 0;}
.chat-input-row{display:flex;align-items:center;gap:8px;}
.chat-input-row input{flex:1 1;min-width:0;}
.chat-input-row button{width:auto;display:inline-block;flex-shrink:0;margin-top:0;white-space:nowrap;padding:11px 16px;}
.chat-closed-note{font-size:12px;color:var(--muted-text);text-align:center;padding:6px 0;}

/* order stepper */
.order-stepper{margin:14px 0 4px;}
.step-track{display:flex;align-items:center;justify-content:center;direction:ltr;}
.step-dot{
    width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:'Cairo',sans-serif;font-weight:700;font-size:11px;
    background:#f0ece0;color:var(--muted-text);border:1.5px solid var(--border-soft);
    flex-shrink:0;
}
.step-dot.done{background:var(--navy-900);color:#fff;border-color:var(--navy-900);}
.step-dot.active{background:var(--gold-500);color:var(--navy-900);border-color:var(--gold-500);}
.step-line{flex:1 1;height:2px;background:var(--border-soft);margin:0 4px;}
.step-line.done{background:var(--navy-900);}
.step-label{text-align:center;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--ink);}

/* custom confirm/alert dialog (replaces window.confirm/alert) */
.confirm-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,18,48,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:120;
    padding:24px;
}
.confirm-box{
    width:100%;
    max-width:340px;
    background:var(--paper);
    border-radius:16px;
    padding:22px 20px;
    box-shadow:0 24px 60px rgba(10,18,48,0.35);
    animation:markPop .25s cubic-bezier(.34,1.56,.64,1) both;
}
.confirm-title{margin:0 0 8px;font-family:'Cairo',sans-serif;font-weight:800;font-size:16px;color:var(--ink);}
.confirm-message{margin:0 0 18px;font-size:13px;line-height:1.7;color:var(--ink);}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px;}

/* Location entry modal (2026-08-19) - same overlay idiom as .confirm-overlay/.confirm-box above,
   just wider and scrollable to fit a full address form instead of a one-line confirmation. */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,18,48,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:130;
    padding:20px;
}
.modal-box{
    width:100%;
    max-width:420px;
    max-height:88vh;
    overflow-y:auto;
    background:var(--paper);
    border-radius:16px;
    padding:22px 20px;
    box-shadow:0 24px 60px rgba(10,18,48,0.35);
    animation:markPop .25s cubic-bezier(.34,1.56,.64,1) both;
}
.modal-title{margin:0 0 14px;font-family:'Cairo',sans-serif;font-weight:800;font-size:17px;color:var(--ink);}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
.modal-actions .btn{width:auto;flex:0 0 auto;margin-top:0;padding:9px 18px;}
.confirm-actions .btn{width:auto;flex:0 0 auto;margin-top:0;padding:9px 18px;}

/* lightbox */
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(10,18,48,0.88);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:24px;
}
.lightbox.show{display:flex;}
.lightbox img{max-width:100%;max-height:80vh;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,0.5);}
.lightbox-close{
    position:absolute;
    top:20px;left:20px;
    width:38px;height:38px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.15);
    color:#fff;
    font-size:18px;
    cursor:pointer;
}
.photo-remove{
    position:absolute;
    top:8px;left:8px;
    width:28px;height:28px;
    border-radius:50%;
    border:none;
    background:rgba(10,18,48,0.65);
    color:#fff;
    font-size:14px;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
}

/* payment / bank transfer */
.payment-box{
    background:#faf8f0;
    border:1px dashed #e5dfc8;
    border-radius:12px;
    padding:12px;
    margin-top:10px;
}
.payment-title{font-family:'Cairo',sans-serif;font-weight:700;font-size:13px;margin-bottom:8px;}
.payment-options{display:flex;gap:8px;}
.payment-options button{flex:1 1;}
.bank-details{background:var(--card-bg);border-radius:10px;padding:10px 12px;margin-bottom:8px;}
.bank-row{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;}
.bank-row b{font-family:'Cairo',sans-serif;}
.bank-choice{
    background:var(--card-bg);
    border:1.5px solid var(--border-soft);
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:8px;
    cursor:pointer;
}
.bank-choice.selected{border-color:var(--gold-500);background:#fdf8ec;}
.checkbox-row{
    display:flex;align-items:flex-start;gap:10px;
    background:var(--input-bg);
    border:1.5px solid var(--border-soft);
    border-radius:12px;
    padding:12px 14px;
    cursor:pointer;
}
.checkbox-row input[type="checkbox"]{
    width:19px;height:19px;
    margin-top:1px;
    accent-color:var(--gold-500);
    flex-shrink:0;
    cursor:pointer;
}
.checkbox-row span{font-size:13.5px;font-weight:700;color:var(--ink);}
.checkbox-row-hint{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--muted-text);}
.bank-row-block{
    background:var(--input-bg);
    border:1.5px solid var(--border-soft);
    border-radius:12px;
    padding:12px;
    margin-bottom:10px;
    position:relative;
}
.bank-row-block input{margin-top:6px;}
.bank-row-remove{
    position:absolute;
    top:8px;left:8px;
    width:24px;height:24px;
    border-radius:50%;
    border:none;
    background:#fdecea;
    color:var(--danger);
    font-size:12px;
    cursor:pointer;
}

.buyer-reveal{
    background:var(--navy-950);
    color:var(--gold-100);
    border-radius:12px;
    padding:12px 14px;
    margin-top:10px;
}
.buyer-reveal .name{font-family:'Cairo',sans-serif;font-weight:700;font-size:13.5px;}
.buyer-reveal .sub{font-size:11px;color:rgba(247,236,201,0.6);margin-top:2px;}
.reveal-actions{display:flex;gap:8px;margin-top:10px;}
.reveal-actions button{flex:1 1;}

/* directory */
.pharmacy-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 4px;
    border-top:1px solid var(--border-soft);
}
.pharmacy-row:first-child{border-top:none;}
.pharm-avatar{
    width:42px;height:42px;border-radius:12px;
    background:linear-gradient(160deg,var(--navy-800),var(--navy-600));
    color:var(--gold-400);
    display:flex;align-items:center;justify-content:center;
    font-family:'Cairo',sans-serif;font-weight:800;font-size:15px;
    flex-shrink:0;
}
.pharm-info{flex:1 1;}
.pharm-name{font-family:'Cairo',sans-serif;font-weight:700;font-size:13.5px;}
.pharm-city{font-size:11.5px;color:var(--muted-text);margin-top:1px;}
.pharm-wa{
    width:38px;height:38px;border-radius:50%;
    background:#25D366;color:#fff;
    display:flex;align-items:center;justify-content:center;
    text-decoration:none;
    flex-shrink:0;
}

/* bottom nav */
.bottom-nav{
    position:fixed;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:480px;
    display:flex;
    background:var(--card-bg);
    border-top:1px solid #eee6d0;
    box-shadow:0 -6px 20px rgba(15,27,61,0.06);
    z-index:20;
}
.bottom-nav-btn{
    flex:1 1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    padding:10px 4px 12px;
    border:none;
    background:none;
    color:var(--muted-text);
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:10.5px;
    cursor:pointer;
}
.bottom-nav-btn.active{color:var(--ink);}
.bottom-nav-btn.active svg{color:var(--gold-500);}

/* account screen (2026-08-14 redesign: compact Meta-style settings header replacing the tall
   centered hero card - the whole screen fades/slides in briefly on open, section panels do the
   same when expanded, all short/linear per this app's low-motion brief - no bounce/elastic). */
.account-screen{animation:accountScreenIn .28s ease both;}
@keyframes accountScreenIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

.profile-header{
    display:flex;align-items:center;gap:12px;
    background:var(--card-bg);border:1px solid var(--border-soft);border-radius:16px;
    padding:14px 16px;
    cursor:pointer;
    transition:background-color .15s ease, transform .15s ease;
}
.profile-header:active{transform:scale(0.985);background:var(--input-bg);}
.profile-header-avatar{
    width:50px;height:50px;flex-shrink:0;
    border-radius:50%;
    background:linear-gradient(155deg,var(--gold-400),var(--gold-500) 65%);
    display:flex;align-items:center;justify-content:center;
    font-family:'Cairo',sans-serif;font-weight:800;font-size:19px;
    color:var(--navy-950);
}
.profile-header-info{flex:1 1;min-width:0;}
.profile-header-info .account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-header-info .account-phone{margin-top:1px;}
.profile-header-info .role-badge{margin-top:6px;}
.profile-header-chevron{color:var(--muted-text);flex-shrink:0;font-size:19px;}
.profile-header-logout{
    width:34px;height:34px;flex-shrink:0;
    border-radius:10px;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:var(--danger-tint);color:var(--danger);
    transition:transform .15s ease, background-color .15s ease;
}
.profile-header-logout:active{transform:scale(0.9);}

/* Storefront-photo cover behind the pharmacy avatar (2026-08-14: "did it like playstation ... the
   profile icon and behind it the pic of the pharmacy") - the cover and the header below it share
   one continuous bordered panel (cover's bottom border/header's top border both suppressed), with
   just the avatar rising up out of the header to overlap the cover, ring-bordered so it stands out
   against whatever photo is behind it. */
.profile-cover{
    position:relative;
    height:110px;
    border-radius:16px 16px 0 0;
    overflow:hidden;
    border:1px solid var(--border-soft);
    border-bottom:none;
    background:linear-gradient(135deg,var(--navy-800),var(--navy-900));
}
.profile-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-cover-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34px;opacity:0.55;}
.profile-cover-edit{
    position:absolute;top:10px;inset-inline-start:10px;
    width:32px;height:32px;border-radius:50%;
    background:rgba(0,0,0,0.5);color:#fff;border:none;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:transform .15s ease;
}
.profile-cover-edit:active{transform:scale(0.9);}
.profile-cover-edit:disabled{opacity:0.6;cursor:default;}
.profile-header-wrap .profile-header{border-radius:0 0 16px 16px;border-top:none;}
.profile-header-wrap .profile-header-avatar{
    margin-top:-38px;
    border:3px solid var(--card-bg);
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
}

.account-name{font-family:'Cairo',sans-serif;font-weight:700;font-size:15px;}
.account-phone{font-size:12.5px;color:var(--muted-text);margin-top:2px;direction:ltr;}
.role-badge{
    display:inline-block;
    padding:3px 13px;
    border-radius:999px;
    background:var(--gold-100);
    color:var(--navy-900);
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:11px;
}

.profile-stats-strip{display:flex;gap:10px;margin:12px 0 16px;}
.stat-chip{
    flex:1 1;
    display:flex;align-items:baseline;justify-content:center;gap:5px;
    background:var(--card-bg);border:1px solid var(--border-soft);border-radius:12px;
    padding:10px 6px;
}
.stat-chip b{font-family:'Cairo',sans-serif;font-weight:800;font-size:15px;color:var(--ink);}
.stat-chip span{font-size:11px;color:var(--muted-text);}

.section-reveal{animation:sectionReveal .22s ease both;}
@keyframes sectionReveal{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}

.toast{
    position:fixed;
    bottom:22px;left:50%;transform:translateX(-50%);
    background:var(--navy-950);
    color:var(--gold-100);
    padding:11px 20px;
    border-radius:30px;
    font-size:12.5px;
    font-weight:600;
    box-shadow:0 10px 26px rgba(0,0,0,0.25);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s, transform .25s;
    z-index:50;
    max-width:88%;
    text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

.flow-note{
    font-size:11px;
    color:var(--muted-text);
    line-height:1.7;
    background:var(--input-bg);
    border:1px dashed #e5dfc8;
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:16px;
}
.flow-note b{color:var(--ink);}

::selection{background:var(--gold-400);}

/* ---------- login screen ---------- */
#loginScreen, #pharmacistLoginScreen, #adminLoginScreen, #buyerSignupScreen{
    min-height:100vh;
    background:radial-gradient(120% 90% at 50% -10%, var(--navy-700) 0%, var(--navy-900) 45%, var(--navy-950) 100%);
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:40px 26px;
}
.login-glow{
    position:absolute;
    top:-120px; left:50%; transform:translateX(-50%);
    width:340px; height:340px;
    background:radial-gradient(circle, rgba(224,167,46,0.35) 0%, transparent 68%);
    pointer-events:none;
}
.login-wrap{
    position:relative;
    z-index:1;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    animation:loginRise .55s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes loginRise{
    from{opacity:0; transform:translateY(18px);}
    to{opacity:1; transform:translateY(0);}
}
.login-mark{
    width:64px;height:64px;
    /* Percentage, not a fixed px value (2026-08-12: "some borders are croped") - the source
       artwork already has its own gently-rounded square frame baked in (~9% of its width); a
       fixed 20px radius here was over 30% on this box, cutting a visibly different curve across
       that frame instead of following it. A percentage scales correctly at every size this mark
       is reused at (header/login/splash) without re-tuning per spot. */
    border-radius:22%;
    background:linear-gradient(155deg,var(--gold-400),var(--gold-500) 65%);
    display:flex;align-items:center;justify-content:center;
    position:relative;
    box-shadow:0 14px 30px rgba(224,167,46,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
    animation:markPop .5s .1s cubic-bezier(.34,1.56,.64,1) both;
}
.login-mark span{
    font-family:'Cairo',sans-serif;
    font-weight:800;
    font-size:26px;
    color:var(--navy-950);
}
.login-mark img, .intro-mark img{
    width:100%;height:100%;
    object-fit:cover;
    border-radius:inherit;
}
@keyframes markPop{
    from{opacity:0; transform:scale(0.8);}
    to{opacity:1; transform:scale(1);}
}
.login-mark-ring{
    position:absolute;
    inset:-8px;
    border-radius:28%;
    border:1px solid rgba(224,167,46,0.35);
}
.login-mark-lg{width:104px;height:104px;}
.login-mark-lg .login-mark-ring{inset:-10px;}
.login-title{
    font-family:'Cairo',sans-serif;
    font-weight:800;
    font-size:26px;
    color:var(--gold-100);
    margin-top:18px;
    letter-spacing:0.3px;
}
.login-sub{
    font-size:12.5px;
    color:rgba(247,236,201,0.55);
    margin-top:6px;
    text-align:center;
}

.login-role{
    display:flex;
    gap:8px;
    margin-top:28px;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--line);
    border-radius:14px;
    padding:4px;
    width:100%;
    max-width:340px;
}
.role-btn{
    flex:1 1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 6px;
    border:none;
    background:transparent;
    color:rgba(247,236,201,0.55);
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:13px;
    border-radius:10px;
    cursor:pointer;
    transition:all .2s;
}
.role-btn.active{
    background:var(--gold-500);
    color:var(--navy-950);
}

/* .role-btn/.login-role were designed for the dark navy login screens - the reference design
   reuses them as-is inside white .card sections (payment preference, banking toggle), which
   makes the translucent cream text nearly unreadable there. This modifier keeps the same layout
   but swaps in dark text/background so it's legible on a light card. */
.role-btn-on-light{
    color:var(--ink);
}
.login-role:has(.role-btn-on-light){
    background:var(--input-bg);
    border-color:var(--border-soft);
}

.login-card{
    width:100%;
    max-width:340px;
    background:rgba(255,255,255,0.97);
    border-radius:20px;
    padding:22px 20px;
    margin-top:18px;
    box-shadow:0 24px 50px rgba(0,0,0,0.35);
}
.login-card .field-label{color:var(--muted-text);}
.login-card input[type=password]{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1.5px solid var(--border-soft);
    font-family:'Tajawal',sans-serif;
    font-size:14px;
    background:var(--input-bg);
    letter-spacing:2px;
}
.login-card input:focus{outline:none;border-color:var(--gold-500);}
.phone-field{
    display:flex;
    align-items:center;
    border:1.5px solid var(--border-soft);
    border-radius:10px;
    background:var(--input-bg);
    overflow:hidden;
}
.phone-cc{
    padding:0 12px;
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:13px;
    color:var(--muted-text);
    border-left:1.5px solid var(--border-soft);
    height:44px;
    display:flex;
    align-items:center;
}
.phone-field input{
    border:none;
    background:transparent;
    padding:12px 14px;
    font-family:'Tajawal',sans-serif;
    font-size:14px;
    flex:1 1;
    width:0;
}
.phone-field input:focus{outline:none;}

.login-foot{
    margin-top:20px;
    font-size:12.5px;
    color:rgba(247,236,201,0.6);
}
.login-foot a{color:var(--gold-400);font-weight:700;text-decoration:none;}
.login-links{
    margin-top:14px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11.5px;
}
.login-links a{color:rgba(247,236,201,0.55);text-decoration:none;font-weight:600;}
.login-links .dot-sep{color:rgba(247,236,201,0.3);}

/* ---------- intro splash ---------- */
#introScreen{
    min-height:100vh;
    background:radial-gradient(140% 100% at 50% 30%, var(--navy-700) 0%, var(--navy-900) 50%, var(--navy-950) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
}
.intro-glow{
    position:absolute;
    top:50%; left:50%;
    width:420px;height:420px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(224,167,46,0.30) 0%, transparent 65%);
    animation:introPulse 2.6s ease-in-out infinite;
}
@keyframes introPulse{
    0%,100%{opacity:0.6; transform:translate(-50%,-50%) scale(0.9);}
    50%{opacity:1; transform:translate(-50%,-50%) scale(1.08);}
}
.intro-orbit{
    position:absolute;
    top:50%; left:50%;
    width:230px;height:230px;
    margin:-115px 0 0 -115px;
    border:1px solid rgba(224,167,46,0.18);
    border-radius:50%;
    animation:introSpin 7s linear infinite;
}
.intro-orbit::before{
    content:"";
    position:absolute;
    top:-3px; left:50%;
    width:7px;height:7px;
    margin-left:-3.5px;
    border-radius:50%;
    background:var(--gold-400);
    box-shadow:0 0 12px 2px rgba(230,200,102,0.7);
}
@keyframes introSpin{ to{ transform:rotate(360deg); } }
.intro-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;animation:introRise .7s cubic-bezier(.2,.8,.25,1) both;}
@keyframes introRise{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
.intro-mark{
    width:78px;height:78px;
    border-radius:22%; /* percentage, see .login-mark's comment above */
    background:linear-gradient(155deg,var(--gold-400),var(--gold-500) 65%);
    display:flex;align-items:center;justify-content:center;
    position:relative;
    box-shadow:0 18px 40px rgba(224,167,46,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
    animation:markBreathe 3.2s ease-in-out infinite;
}
.intro-mark span{font-family:'Cairo',sans-serif;font-weight:800;font-size:32px;color:var(--navy-950);}
.intro-mark-ring{position:absolute;inset:-10px;border-radius:28%;border:1px solid rgba(224,167,46,0.4);}
.intro-mark-ring.r2{inset:-20px;border-radius:32%;border-color:rgba(224,167,46,0.18);}
@keyframes markBreathe{
    0%,100%{transform:scale(1); box-shadow:0 18px 40px rgba(224,167,46,0.3), inset 0 1px 0 rgba(255,255,255,0.4);}
    50%{transform:scale(1.04); box-shadow:0 22px 48px rgba(224,167,46,0.42), inset 0 1px 0 rgba(255,255,255,0.4);}
}
.intro-title{font-family:'Cairo',sans-serif;font-weight:800;font-size:30px;color:var(--gold-100);margin-top:22px;letter-spacing:0.5px;}
.intro-sub{font-size:12.5px;color:rgba(247,236,201,0.55);margin-top:6px;}
.intro-loader{width:120px;height:3px;border-radius:3px;background:rgba(255,255,255,0.1);margin-top:26px;overflow:hidden;}
.intro-loader-bar{width:40%;height:100%;background:var(--gold-500);border-radius:3px;animation:introLoad 1.9s ease-in-out infinite;}
@keyframes introLoad{
    0%{transform:translateX(-100%);}
    50%{transform:translateX(80%);}
    100%{transform:translateX(260%);}
}

/* signup / admin / pending screens */
.back-btn{
    width:34px;height:34px;
    border-radius:10px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.06);
    color:var(--gold-100);
    font-size:16px;
    cursor:pointer;
    flex-shrink:0;
    transition:transform .15s ease, background .15s ease;
}
.back-btn:hover{background:rgba(255,255,255,0.12);}
.back-btn:active{transform:scale(0.9);background:rgba(255,255,255,0.16);}

/* Dark-mode toggle (2026-08-13) - sits in the opposite top corner from .back-btn in every header
   variant, same circular translucent treatment so it reads as part of the same header-control
   family rather than a bolted-on extra. */
.theme-toggle-btn{
    position:absolute;
    top:22px;
    inset-inline-end:20px;
    z-index:2;
    width:34px;height:34px;
    border-radius:10px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.06);
    color:var(--gold-100);
    font-size:15px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:transform .15s ease, background .15s ease;
}
.theme-toggle-btn:hover{background:rgba(255,255,255,0.12);}
.theme-toggle-btn:active{transform:scale(0.9);background:rgba(255,255,255,0.16);}

/* Opts an element out of the font-size slider (2026-08-19: "if some item in the app are big
   enough they should not be affected in the font size slider") - logos, app icons, and real
   photo previews are already visually clear at their normal size; growing them along with body
   text wastes space and can look broken rather than helping readability. Works by cancelling out
   the zoom applied on the app wrapper (see the inline --font-zoom custom property set alongside
   `zoom` in app/page.tsx) - `zoom` cascades multiplicatively to descendants, so re-dividing by the
   same factor here brings this element back to its true, unscaled size regardless of the current
   slider position. Deliberately NOT applied to whole `.card`/`.btn-*` containers - those hold real
   body text that should keep scaling with everything else; freezing the container would silently
   freeze its text too and defeat the point of the feature for most of the app's actual content. */
.no-font-scale{zoom:calc(1 / var(--font-zoom, 1));}

/* Font-size accessibility control (2026-08-19: "the user maybe can not see very good so he can
   change make the words bigger") - same circular treatment as .theme-toggle-btn, sits just before
   it (toward the header's start) so both read as one control cluster. Wrapped in a positioned
   container so the popover below can anchor to it regardless of which header variant places the
   button in absolute vs. static flow. */
.fontsize-toggle-btn{
    position:absolute;
    top:22px;
    inset-inline-end:62px;
    z-index:2;
    width:34px;height:34px;
    border-radius:10px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.06);
    color:var(--gold-100);
    font-family:'Cairo',sans-serif;font-weight:800;font-size:13px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:transform .15s ease, background .15s ease;
}
.fontsize-toggle-btn:hover{background:rgba(255,255,255,0.12);}
.fontsize-toggle-btn:active{transform:scale(0.9);background:rgba(255,255,255,0.16);}
.fontsize-popover{
    /* Fixed, not absolute (2026-08-19 fix: "the font slider is under the header") - header.top
       has overflow:hidden (to clip its own decorative glow, see header.top::after), which was
       silently clipping this popover too whenever the header's own rendered height was shorter
       than the popover's. `position:fixed` escapes that entirely (positioned against the
       viewport instead of the header), and z-index 200 puts it above literally everything else
       in the app (bottom nav/chat panels top out at z-index 130) so it can never render behind
       anything again regardless of which screen it's opened on. */
    position:fixed;
    top:64px;
    inset-inline-end:20px;
    z-index:200;
    width:210px;
    padding:14px;
    border-radius:14px;
    border:1px solid var(--border-soft);
    background:var(--card-bg);
    box-shadow:0 12px 32px rgba(0,0,0,0.25);
}
.fontsize-popover-head{
    display:flex;align-items:center;justify-content:space-between;
    font-family:'Cairo',sans-serif;font-weight:700;font-size:12px;
    color:var(--ink);
    margin-bottom:10px;
}
.fontsize-popover-value{color:var(--navy-900);font-weight:800;direction:ltr;}
.fontsize-popover input[type="range"]{width:100%;accent-color:var(--navy-700,#154c43);}
.fontsize-popover-labels{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:4px;color:var(--ink);opacity:0.6;
}
.fontsize-popover-labels span:first-child{font-size:11px;}
.fontsize-popover-labels span:last-child{font-size:16px;}

.pending-wrap{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 26px;
    text-align:center;
    background:radial-gradient(120% 90% at 50% -10%, var(--navy-700) 0%, var(--navy-900) 45%, var(--navy-950) 100%);
}
.pending-icon{font-size:44px;margin-bottom:14px;}
.pending-title{font-family:'Cairo',sans-serif;font-weight:800;font-size:19px;color:var(--gold-100);}
.pending-text{font-size:13px;color:rgba(247,236,201,0.65);line-height:1.9;margin:14px 0 22px;max-width:320px;}
.pending-text b{color:var(--gold-100);}
.gold-amt{color:var(--gold-400) !important;}
.pending-wrap .btn{max-width:320px;}

.admin-card{
    background:var(--card-bg);
    border-radius:14px;
    padding:14px;
    margin-bottom:12px;
    border:1px solid #eee6d0;
}
.admin-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;color:var(--muted-text);}
.admin-row b{color:var(--ink);font-family:'Cairo',sans-serif;}
.admin-thumbs{display:flex;gap:8px;margin:10px 0;}
.admin-thumbs img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid #eee6d0;}

/* ---------- from rosheta-order-flow (8).html: account quick tiles, menu list, addresses ---------- */
.quick-tiles{display:flex;gap:10px;margin:14px 0;}
.quick-tile{
  flex:1 1;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--card-bg);border:1px solid var(--border-soft);border-radius:14px;
  padding:14px 6px;
  text-decoration:none;
  cursor:pointer;
  font-family:'Cairo',sans-serif;font-weight:700;font-size:11.5px;color:var(--ink);
  transition:transform .15s ease, background-color .15s ease;
}
.quick-tile:active{transform:scale(0.97);background:var(--input-bg);}
.quick-tile-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s ease;}
.quick-tile:active .quick-tile-icon{transform:scale(1.08);}
.quick-tile-icon.tint-gold{background:var(--gold-100);color:var(--gold-500);}
.quick-tile-icon.tint-navy{background:color-mix(in srgb, var(--navy-800) 14%, transparent);color:var(--navy-800);}
.quick-tile-icon.tint-ok{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok);}

.menu-card{background:var(--card-bg);border:1px solid var(--border-soft);border-radius:16px;overflow:hidden;margin-bottom:14px;}
.menu-row{
  display:flex;align-items:center;gap:12px;
  padding:15px 16px;
  border-top:1px solid var(--border-soft);
  cursor:pointer;background:none;border-left:none;border-right:none;border-bottom:none;
  width:100%;text-align:right;font-family:'Tajawal',sans-serif;
  text-decoration:none;color:var(--ink);
  transition:background-color .15s ease;
}
.menu-card .menu-row:first-child{border-top:none;}
.menu-row-icon{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:var(--input-bg);color:var(--navy-700);
  transition:transform .15s ease;
}
.menu-row-label{flex:1 1;font-size:13.5px;font-weight:700;}
.menu-row-chevron{color:var(--muted-text);flex-shrink:0;transition:transform .15s ease;}
.menu-row:active{background:var(--input-bg);}
.menu-row:active .menu-row-chevron{transform:translateX(-2px);}
@media (hover:hover){
  .menu-row:hover{background:var(--input-bg);}
}

.address-row{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card-bg);border:1px solid var(--border-soft);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;
}
.address-row .address-actions{display:flex;align-items:center;gap:10px;}
.address-row .address-icon-btn{background:none;border:none;cursor:pointer;color:var(--muted-text);display:flex;}
.address-row .address-icon-btn.danger{color:var(--danger);}
.address-row .address-label{font-family:'Cairo',sans-serif;font-weight:700;font-size:14px;color:var(--ink);}
.address-radio{
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.address-radio.selected{background:var(--gold-500);border-color:var(--gold-500);color:#fff;}

.rating-row{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft);text-align:center;}
.star-pick{font-size:22px;color:var(--border-soft);cursor:pointer;margin:0 2px;}
.star-pick:active{transform:scale(0.9);display:inline-block;}
.rating-done{font-size:14px;color:var(--gold-500);letter-spacing:2px;}

.pharm-fav{
  width:32px;height:32px;border-radius:50%;
  border:none;background:transparent;
  color:#d8d2bd;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;
}
.pharm-fav.is-fav{color:#e0507a;}
.pharm-fav:active{transform:scale(0.9);}

/* Android APK download card (2026-08-19 redesign) - only ever shown on an actual Android
   *browser* visit, never from inside the native app itself (see lib/platform.ts). */
.apk-download-card{
  display:flex;align-items:center;gap:12px;
  width:100%;margin-top:14px;padding:12px 14px;
  background:var(--navy-950,#12182b);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.apk-download-card:active{transform:scale(0.98);background:#1a2140;}
.apk-download-card-icon{
  flex-shrink:0;
  width:38px;height:38px;border-radius:50%;
  background:rgba(61,220,132,0.15);
  color:#3ddc84;
  display:flex;align-items:center;justify-content:center;
}
.apk-download-card-text{flex:1 1;min-width:0;text-align:right;}
.apk-download-card-title{font-size:13.5px;font-weight:800;color:var(--gold-100);}
.apk-download-card-sub{font-size:11.5px;color:#a7b0c9;margin-top:1px;}
.apk-download-card-arrow{flex-shrink:0;color:var(--gold-400);}