/* ═══════════════════════════════════════
   DawaCare — Campus Pharmacy Ordering System
   Premium Design — Matching BabylonCore Website
   ═══════════════════════════════════════ */
:root {
  --bg-deep:#06080d; --bg:#0a0f1a; --bg-card:#0f1628; --bg-card-hover:#141d35;
  --border:#1a2540; --border-light:#243052;
  --gold:#c9a84c; --gold-light:#e8d48b; --gold-dim:rgba(201,168,76,0.15);
  --accent:#10b981; --accent-dark:#059669; --accent-rgb:16,185,129;
  --danger:#ef4444; --warning:#f59e0b; --info:#3b82f6; --purple:#8b5cf6;
  --text:#94a3b8; --text-light:#cbd5e1; --heading:#f1f5f9; --white:#ffffff;
}
body.light {
  --bg-deep:#f8f9fc; --bg:#ffffff; --bg-card:#f1f3f8; --bg-card-hover:#e8ebf2;
  --border:#d4d9e4; --border-light:#c0c7d6;
  --gold:#b8922e; --gold-light:#c9a84c;
  --text:#4a5568; --text-light:#2d3748; --heading:#1a202c; --white:#ffffff;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Cairo',system-ui,sans-serif;
  background:var(--bg-deep);color:var(--text);
  min-height:100vh;position:relative;
  -webkit-font-smoothing:antialiased;
  line-height:1.7;transition:background .4s,color .4s;
  overflow-x:hidden;
}

/* Noise texture overlay — matches website */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Ambient glows */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(var(--accent-rgb),0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.03) 0%, transparent 50%);
}
body.light::before{
  background:
    radial-gradient(ellipse at 20% 50%, rgba(var(--accent-rgb),0.03) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.02) 0%, transparent 50%);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ═══════════════════════════════════════
   NAV BAR — Glassmorphism like website
   ═══════════════════════════════════════ */
.top-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 1.5rem;height:60px;position:sticky;top:0;z-index:100;
  background:rgba(6,8,13,0.6);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:all .4s;
}
body.light .top-bar{background:rgba(248,249,252,0.8)}
.top-bar-brand{display:flex;align-items:center;gap:10px}
.top-bar-brand img{width:32px;height:32px;border-radius:8px}
.top-bar-brand span{
  font-size:1.05rem;font-weight:800;color:var(--heading);
  letter-spacing:-0.02em;
}
.top-bar-actions{display:flex;align-items:center;gap:8px}

.top-bar-link,.toggle-btn{
  font-family:'Cairo',sans-serif;font-size:0.78rem;font-weight:700;
  color:var(--text);cursor:pointer;border:1px solid var(--border);
  padding:0.3rem 0.85rem;border-radius:6px;background:transparent;
  transition:all .3s;display:inline-flex;align-items:center;gap:5px;
  letter-spacing:0.02em;
}
.top-bar-link:hover,.toggle-btn:hover{border-color:var(--gold);color:var(--gold)}

/* Back to website button — prominent gold */
.back-btn{
  font-family:'Cairo',sans-serif;font-size:0.82rem;font-weight:700;color:#fff!important;
  text-decoration:none;border:none;
  padding:8px 20px;border-radius:10px;
  background:linear-gradient(135deg,var(--gold),#b8922e);
  transition:all .3s;display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 4px 16px rgba(201,168,76,0.3);cursor:pointer;
}
.back-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,168,76,0.4)}

/* Cart badge on nav */
.cart-badge{
  position:relative;display:inline-flex;align-items:center;gap:5px;
}
.cart-badge-count{
  background:var(--accent);color:#fff;font-size:0.65rem;font-weight:800;
  width:18px;height:18px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;position:absolute;top:-6px;left:-6px;
  box-shadow:0 2px 8px rgba(var(--accent-rgb),0.4);
}

/* ═══════════════════════════════════════
   CONTAINERS
   ═══════════════════════════════════════ */
.container{max-width:540px;margin:0 auto;padding:0 1rem 100px}
.container-wide{max-width:1200px;margin:0 auto;padding:0 1.5rem 40px}

/* ═══════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════ */
.section-header{
  display:flex;justify-content:space-between;align-items:center;
  margin:20px 0 12px;
}
.section-title{font-size:1.15rem;font-weight:800;color:var(--heading)}
.section-subtitle{font-size:0.78rem;color:var(--text)}
.page-hero{text-align:center;padding:24px 0 12px}
.page-hero h1{font-size:1.3rem;font-weight:800;color:var(--heading);margin-bottom:4px}
.page-hero p{font-size:0.82rem;color:var(--text)}

/* ═══════════════════════════════════════
   CATEGORY TABS
   ═══════════════════════════════════════ */
.cat-tabs{
  display:flex;gap:8px;overflow-x:auto;padding:8px 0 16px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{
  white-space:nowrap;padding:7px 18px;border-radius:50px;
  font-size:0.8rem;font-weight:700;cursor:pointer;
  border:1px solid var(--border);background:transparent;
  color:var(--text);transition:all .3s;flex-shrink:0;
  font-family:'Cairo',sans-serif;
}
.cat-tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;border-color:transparent;
  box-shadow:0 4px 16px rgba(var(--accent-rgb),0.25);
}
.cat-tab:not(.active):hover{border-color:var(--gold);color:var(--gold)}

/* ═══════════════════════════════════════
   PRODUCT CARDS — New design with add-to-cart
   ═══════════════════════════════════════ */
.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:420px){.products-grid{grid-template-columns:1fr}}
@media(min-width:768px){.products-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.products-grid{grid-template-columns:repeat(4,1fr)}}

.product-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:16px;padding:16px;display:flex;flex-direction:column;
  transition:all .3s;position:relative;overflow:hidden;
}
.product-card:hover{
  border-color:rgba(var(--accent-rgb),0.3);
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.3);
}
body.light .product-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.08)}
.product-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--gold));opacity:0;
  transition:opacity .3s;
}
.product-card:hover::before{opacity:1}

.product-card-icon{
  width:50px;height:50px;border-radius:14px;margin-bottom:12px;
  background:rgba(var(--accent-rgb),0.08);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.product-card-name{font-size:0.88rem;font-weight:700;color:var(--heading);line-height:1.3;margin-bottom:4px}
.product-card-desc{
  font-size:0.72rem;color:var(--text);line-height:1.4;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  flex:1;
}
.product-card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.product-card-price{font-size:0.9rem;font-weight:800;color:var(--accent)}

.add-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--border);
  background:transparent;color:var(--accent);font-size:1.2rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s;font-family:'Cairo',sans-serif;
}
.add-btn:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 4px 12px rgba(var(--accent-rgb),0.3);
  transform:scale(1.1);
}
.add-btn.in-cart{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 4px 12px rgba(var(--accent-rgb),0.3);
}

/* ═══════════════════════════════════════
   CART DRAWER (slide-in from right)
   ═══════════════════════════════════════ */
.cart-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:300;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.cart-overlay.open{opacity:1;pointer-events:auto}

.cart-drawer{
  position:fixed;top:0;right:-380px;width:360px;max-width:90vw;height:100vh;
  background:var(--bg-card);border-left:1px solid var(--border);
  z-index:301;display:flex;flex-direction:column;
  transition:right .35s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 40px rgba(0,0,0,.3);
}
body.light .cart-drawer{box-shadow:-8px 0 40px rgba(0,0,0,.08)}
.cart-drawer.open{right:0}

.cart-drawer-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.cart-drawer-header h2{font-size:1rem;font-weight:800;color:var(--heading)}
.cart-close{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--text);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
  font-family:'Cairo',sans-serif;
}
.cart-close:hover{border-color:var(--danger);color:var(--danger)}

.cart-drawer-body{flex:1;overflow-y:auto;padding:16px 20px}

.cart-item{
  display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--border);
}
.cart-item:last-child{border-bottom:none}
.cart-item-icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(var(--accent-rgb),0.08);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  flex-shrink:0;
}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:0.82rem;font-weight:700;color:var(--heading)}
.cart-item-price{font-size:0.75rem;color:var(--accent);font-weight:700}
.cart-item-qty{display:flex;align-items:center;gap:0}
.cart-item-qty button{
  width:28px;height:28px;border:1px solid var(--border);
  background:transparent;color:var(--heading);font-size:0.9rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:'Cairo',sans-serif;transition:all .2s;
}
.cart-item-qty button:first-child{border-radius:6px 0 0 6px}
.cart-item-qty button:last-child{border-radius:0 6px 6px 0}
.cart-item-qty button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.cart-item-qty span{
  width:32px;height:28px;display:flex;align-items:center;justify-content:center;
  font-size:0.82rem;font-weight:700;color:var(--heading);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--bg);
}

.cart-empty{text-align:center;padding:40px 0;color:var(--text)}
.cart-empty .icon{font-size:2.5rem;margin-bottom:8px;opacity:0.4}
.cart-empty p{font-size:0.85rem}

.cart-drawer-footer{
  padding:16px 20px;border-top:1px solid var(--border);
  background:var(--bg);
}
.cart-total-row{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
}
.cart-total-label{font-size:0.88rem;font-weight:700;color:var(--text-light)}
.cart-total-value{font-size:1.2rem;font-weight:800;color:var(--accent)}
.checkout-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;font-weight:800;font-size:0.92rem;cursor:pointer;
  font-family:'Cairo',sans-serif;transition:all .3s;
  box-shadow:0 4px 20px rgba(var(--accent-rgb),0.3);
}
.checkout-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(var(--accent-rgb),0.4)}
.checkout-btn:disabled{opacity:0.5;pointer-events:none}

/* ═══════════════════════════════════════
   FORM CARDS — Premium glass effect
   ═══════════════════════════════════════ */
.form-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:16px;padding:24px;position:relative;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.2);
  transition:all .3s;
}
body.light .form-card{box-shadow:0 8px 24px rgba(0,0,0,.05)}
.form-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent));
}
.form-card h2{
  font-size:1.05rem;font-weight:800;color:var(--heading);
  margin-bottom:18px;text-align:center;
}

.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:0.8rem;font-weight:700;color:var(--text-light);margin-bottom:6px}
.form-group input,.form-group textarea,.form-group select{
  width:100%;padding:11px 16px;
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  color:var(--heading);font-family:'Cairo',sans-serif;font-size:0.88rem;
  outline:none;transition:all .3s;
}
.form-group textarea{resize:vertical;min-height:80px}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
body.light .form-group input,body.light .form-group textarea,body.light .form-group select{
  background:#f8fafc;color:#0f172a;border-color:#e2e8f0;
}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:360px){.form-row{grid-template-columns:1fr}}

/* Toggle Switch */
.toggle-group{
  display:flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;
  margin-bottom:16px;
}
.toggle-option{
  flex:1;padding:11px;text-align:center;font-size:0.85rem;font-weight:700;
  cursor:pointer;transition:all .3s;color:var(--text);
  background:transparent;border:none;font-family:'Cairo',sans-serif;
}
.toggle-option.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;
}

/* Upload Area */
.upload-area{
  border:2px dashed var(--border);border-radius:14px;padding:28px;
  text-align:center;cursor:pointer;transition:all .3s;
}
.upload-area:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),0.03)}
.upload-area p{font-size:0.82rem;color:var(--text);margin-top:6px}
.upload-area .icon{font-size:2rem;margin-bottom:4px}

/* ═══════════════════════════════════════
   BUTTONS — Gold accent style like website
   ═══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border:none;border-radius:10px;cursor:pointer;
  font-family:'Cairo',sans-serif;font-weight:700;font-size:0.88rem;
  transition:all .3s;text-decoration:none;position:relative;overflow:hidden;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;box-shadow:0 4px 20px rgba(var(--accent-rgb),.25);
  width:100%;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(var(--accent-rgb),.35)}
.btn-secondary{
  background:rgba(var(--accent-rgb),0.08);color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),0.2);
}
.btn-secondary:hover{background:rgba(var(--accent-rgb),0.15);border-color:rgba(var(--accent-rgb),0.4)}
.btn-gold{
  background:var(--gold-dim);color:var(--gold);
  border:1px solid rgba(201,168,76,0.3);
}
.btn-gold:hover{background:rgba(201,168,76,0.25)}
.btn-danger{background:rgba(239,68,68,.08);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
.btn-danger:hover{background:rgba(239,68,68,.15)}
.btn-sm{padding:6px 14px;font-size:0.78rem}
.btn-block{width:100%}

/* ═══════════════════════════════════════
   FLASH MESSAGES
   ═══════════════════════════════════════ */
.flash{
  padding:12px 16px;border-radius:12px;font-size:0.82rem;
  margin-bottom:14px;text-align:center;font-weight:600;
}
.flash-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#fca5a5}
.flash-success{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);color:#6ee7b7}
body.light .flash-error{color:#dc2626}
body.light .flash-success{color:#059669}

/* ═══════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════ */
.status-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 14px;border-radius:50px;font-size:0.75rem;font-weight:700;
}
.status-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}

/* ═══════════════════════════════════════
   ORDER CARDS
   ═══════════════════════════════════════ */
.order-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:16px;padding:18px;margin-bottom:12px;
  transition:all .3s;cursor:pointer;position:relative;overflow:hidden;
}
.order-card:hover{
  border-color:rgba(var(--accent-rgb),0.3);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.order-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--gold));opacity:0;
  transition:opacity .3s;
}
.order-card:hover::before{opacity:1}
.order-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.order-code{font-size:1.05rem;font-weight:800;color:var(--heading);direction:ltr;text-align:left}
.order-time{font-size:0.72rem;color:var(--text)}
.order-customer{font-size:0.82rem;color:var(--text-light);margin-bottom:8px}
.order-items-preview{font-size:0.75rem;color:var(--text);margin-bottom:8px}
.order-footer{display:flex;justify-content:space-between;align-items:center}
.order-total{font-size:0.95rem;font-weight:800;color:var(--accent)}
.order-fulfillment{font-size:0.72rem;color:var(--text);
  padding:3px 12px;border-radius:50px;background:rgba(var(--accent-rgb),0.08)}

/* ═══════════════════════════════════════
   CONFIRMATION / TRACK
   ═══════════════════════════════════════ */
.confirm-wrapper{max-width:500px;margin:0 auto;padding:24px 16px}
.confirm-icon{
  width:80px;height:80px;border-radius:50%;margin:0 auto 16px;
  background:rgba(var(--accent-rgb),0.1);
  display:flex;align-items:center;justify-content:center;font-size:2.5rem;
}
.confirm-code{font-size:1.6rem;font-weight:800;color:var(--heading);text-align:center;direction:ltr;margin-bottom:4px}
.confirm-msg{font-size:0.85rem;color:var(--text);text-align:center;margin-bottom:24px}

.detail-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--border);font-size:0.85rem;
}
.detail-row:last-child{border-bottom:none}
.detail-label{color:var(--text)}
.detail-value{font-weight:700;color:var(--heading)}

/* Status Timeline */
.status-timeline{display:flex;flex-direction:column;gap:0;margin:20px 0}
.timeline-step{display:flex;align-items:flex-start;gap:14px;position:relative}
.timeline-dot{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:0.7rem;font-weight:700;color:#fff;
  background:var(--border);position:relative;z-index:1;transition:all .3s;
}
.timeline-dot.active{background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),0.4)}
.timeline-dot.done{background:var(--accent)}
.timeline-content{padding-bottom:22px}
.timeline-title{font-size:0.85rem;font-weight:700;color:var(--heading)}
.timeline-time{font-size:0.72rem;color:var(--text)}
.timeline-step:not(:last-child)::before{
  content:'';position:absolute;right:28px;top:26px;width:2px;
  height:calc(100% - 26px);background:var(--border);
}
.timeline-step:not(:last-child).done::before{background:var(--accent)}

/* ═══════════════════════════════════════
   STAFF DASHBOARD
   ═══════════════════════════════════════ */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0}
.stat-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:14px;padding:18px;text-align:center;
  transition:all .3s;position:relative;overflow:hidden;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--gold));opacity:0;
  transition:opacity .3s;
}
.stat-card:hover::before{opacity:1}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.stat-value{font-size:1.6rem;font-weight:800;color:var(--heading)}
.stat-label{font-size:0.78rem;color:var(--text);margin-top:4px}

.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.filter-tab{
  padding:7px 18px;border-radius:50px;font-size:0.78rem;font-weight:700;
  cursor:pointer;border:1px solid var(--border);background:transparent;
  color:var(--text);transition:all .3s;font-family:'Cairo',sans-serif;
  text-decoration:none;
}
.filter-tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;border-color:transparent;
  box-shadow:0 4px 16px rgba(var(--accent-rgb),0.25);
}
.filter-tab:not(.active):hover{border-color:var(--gold);color:var(--gold)}

/* Orders Table (Desktop) */
.orders-table{width:100%;border-collapse:collapse;margin-top:12px}
.orders-table th{
  text-align:right;font-size:0.75rem;font-weight:700;color:var(--text);
  padding:12px;border-bottom:1px solid var(--border);
}
.orders-table td{
  padding:12px;font-size:0.82rem;color:var(--text-light);
  border-bottom:1px solid var(--border);vertical-align:middle;
}
.orders-table tr:hover td{background:rgba(var(--accent-rgb),0.03)}
.orders-table .code-cell{font-weight:800;color:var(--heading);direction:ltr;text-align:left}

/* Add Product Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:500;
  display:none;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(4px);
}
.modal-overlay.show{display:flex}
.modal{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:18px;padding:28px;width:100%;max-width:440px;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.modal h3{font-size:1.05rem;font-weight:800;color:var(--heading);margin-bottom:18px}

/* ═══════════════════════════════════════
   PRESCRIPTION IMAGES
   ═══════════════════════════════════════ */
.rx-thumb{
  width:64px;height:64px;border-radius:10px;object-fit:cover;
  border:1px solid var(--border);cursor:pointer;transition:all .2s;
}
.rx-thumb:hover{transform:scale(1.1);box-shadow:0 4px 16px rgba(0,0,0,.3)}

/* ═══════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════ */
.login-area{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - 60px);padding:20px;
}
.login-wrapper{width:100%;max-width:400px}
.brand{text-align:center;margin-bottom:1.5rem}
.brand-logo{
  width:64px;height:64px;border-radius:16px;
  margin:0 auto 12px;display:block;
  filter:drop-shadow(0 6px 24px rgba(var(--accent-rgb),0.3));
}
.brand h1{font-size:1.5rem;font-weight:800;color:var(--heading);letter-spacing:-0.02em}
.brand p{font-size:0.82rem;color:var(--text)}
.login-footer{text-align:center;margin-top:1.5rem;font-size:0.75rem;color:var(--text)}
.login-footer span{color:var(--gold);font-weight:700}

/* ═══════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.animate-pulse{animation:pulse 2s infinite}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .4s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

.new-order-flash{animation:flashBorder 1s ease 3}
@keyframes flashBorder{0%,100%{border-color:var(--border)}50%{border-color:var(--accent);box-shadow:0 0 20px rgba(var(--accent-rgb),0.3)}}

/* ═══════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════ */
.empty-state{text-align:center;padding:48px 20px;color:var(--text)}
.empty-state .icon{font-size:3rem;margin-bottom:14px;opacity:0.4}
.empty-state p{font-size:0.9rem}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:767px){
  .desktop-only{display:none!important}
  .mobile-only{display:block}
}
@media(min-width:768px){
  .desktop-only{display:block!important}
  .mobile-only{display:none}
  .container{max-width:640px}
}