/* =====================================================================
   MedExpress Marketplace — shared design system
   Used by all four portals: Customers (storefront), Vendors, Admin, POS.
   body.storefront  -> mobile app style shell (bottom nav, vertical tiles)
   body.dashboard    -> back-office shell (sidebar nav, KPI cards, tables)
   ===================================================================== */

:root{
  --brand-red:#E5383B;
  --brand-red-dark:#C1121F;
  --brand-dark:#1B1B1F;
  --sidebar-bg:#2E1F55;
  --sidebar-bg-active:#6C4CD1;
  --bg:#F6F6F9;
  --card-bg:#FFFFFF;
  --text:#1E1E24;
  --text-muted:#787883;
  --border:#EAEAF0;
  --success:#2E7D32;
  --warning:#ED6C02;
  --danger:#D32F2F;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 2px 14px rgba(20,20,40,.07);
  --topbar-h:60px;
  --bottomnav-h:64px;
  --sidebar-w:250px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.45;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{margin:0 0 8px; font-weight:700;}
p{margin:0 0 10px;}
button{font-family:inherit;}

.container{max-width:1200px; margin:0 auto; padding:0 16px;}

/* ---------- buttons / form controls (shared) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 18px; border-radius:999px; border:none; cursor:pointer;
  font-weight:600; font-size:14px; transition:.15s ease; white-space:nowrap;
}
.btn-primary{background:var(--brand-red); color:#fff;}
.btn-primary:hover{background:var(--brand-red-dark);}
.btn-dark{background:var(--sidebar-bg); color:#fff;}
.btn-outline{background:#fff; color:var(--brand-red); border:1.5px solid var(--brand-red);}
.btn-ghost{background:transparent; color:var(--text-muted); border:1.5px solid var(--border);}
.btn-sm{padding:7px 12px; font-size:13px; border-radius:8px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

.input,.select,textarea.input{
  width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:14px; background:#fff; color:var(--text); font-family:inherit;
}
.input:focus,.select:focus,textarea.input:focus{outline:none; border-color:var(--brand-red);}
.form-group{margin-bottom:14px;}
.form-label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text-muted);}
.form-row{display:flex; gap:12px; flex-wrap:wrap;}
.form-row > *{flex:1; min-width:180px;}

.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700;}
.badge-green{background:#E7F6E9; color:var(--success);}
.badge-orange{background:#FFF1E0; color:var(--warning);}
.badge-red{background:#FDEAEA; color:var(--danger);}
.badge-gray{background:#EEEEF2; color:var(--text-muted);}

.status-pill{padding:4px 12px; border-radius:999px; font-size:12px; font-weight:700; text-transform:capitalize;}
.status-Placed,.status-Requested,.status-Pending,.status-Draft{background:#FFF1E0; color:var(--warning);}
.status-Accepted,.status-Confirmed,.status-Assigned,.status-Approved,.status-Active{background:#E4F0FF; color:#1565C0;}
.status-Preparing,.status-PickedUp,.status-InTransit{background:#F1E8FF; color:#7B2CBF;}
.status-OutForDelivery{background:#FFF7CC; color:#8A6D00;}
.status-Delivered,.status-Completed,.status-Responded{background:#E7F6E9; color:var(--success);}
.status-Cancelled,.status-Rejected,.status-Suspended,.status-Blocked{background:#FDEAEA; color:var(--danger);}

.alert{padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:14px; font-size:14px;}
.alert-error{background:#FDEAEA; color:var(--danger);}
.alert-success{background:#E7F6E9; color:var(--success);}
.alert-info{background:#E4F0FF; color:#1565C0;}

.card{background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;}
.table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden;}
.table th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); padding:12px 14px; background:#FAFAFD; border-bottom:1px solid var(--border);}
.table td{padding:12px 14px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:middle;}
.table tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto; border-radius:var(--radius); box-shadow:var(--shadow);}
.empty-state{text-align:center; padding:40px 20px; color:var(--text-muted);}

/* ---------- Cart (Customers/Cart.aspx) — mobile only ----------
   Desktop keeps the plain .table row layout as-is. Below 640px the shared
   .table's fixed columns were forcing a horizontally-scrolling row with the
   qty +/- buttons stacked and the Total/Remove cut off past the edge, so on
   a phone each line item becomes its own compact card instead, using new
   page-scoped classes rather than touching .table itself (it's shared by
   every admin/vendor/POS table in the app). */
.cart-td-qty{width:120px;}
.cart-qty{display:inline-flex; align-items:center; gap:8px;}
.cart-qty-n{min-width:14px; text-align:center; font-weight:700;}

@media (max-width:640px){
  .cart-table-wrap{overflow-x:visible; box-shadow:none; border-radius:0;}
  /* The <tbody> the browser inserts around the repeater's <tr>s keeps its
     table-row-group sizing (shrink-to-fit) even once the <table> itself is
     display:block, which left every row hugging the left edge with a big
     blank strip on the right — forcing it (and the row) to display:block
     and 100% width is what makes the grid below actually stretch full-width. */
  .cart-table{display:block; width:100%; background:transparent; border-radius:0;}
  .cart-table tbody{display:block; width:100%;}
  .cart-table tr{
    display:grid; width:100%; grid-template-columns:1fr auto; column-gap:12px; row-gap:8px;
    padding:14px 0; border-bottom:1px solid var(--border);
    grid-template-areas:"name name" "price total" "qty remove";
  }
  .cart-table tr:last-child{border-bottom:none;}
  .cart-table td{display:block; padding:0; border-bottom:none; font-size:14px;}
  .cart-td-name{grid-area:name; font-weight:700;}
  .cart-td-price{grid-area:price; align-self:center;}
  .cart-td-total{grid-area:total; text-align:right; font-weight:700; align-self:center;}
  .cart-td-qty{grid-area:qty; width:auto;}
  .cart-td-remove{grid-area:remove; text-align:right; align-self:center;}
  .cart-qty{border:1px solid var(--border); border-radius:999px; padding:2px 4px;}
  .cart-qty .btn{padding:3px 10px; border:none;}
}

/* =====================================================================
   STOREFRONT shell (Customers portal) — mobile app look
   ===================================================================== */
body.storefront{padding-bottom:calc(var(--bottomnav-h) + 10px);}
.sf-topbar{
  position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--border);
  padding:10px 16px;
}
.sf-topbar-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.sf-location{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); overflow:hidden;}
.sf-location b{color:var(--text); font-size:14px;}
.sf-search{margin-top:10px; position:relative;}
.sf-search input{padding-left:38px; border-radius:999px; background:#F6F6F9; border-color:transparent;}
.sf-search::before{content:"\1F50D"; position:absolute; left:14px; top:50%; transform:translateY(-50%); opacity:.5;}

.sf-content{padding:14px 16px 8px;}
.sf-section-head{display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px;}
.sf-section-head h3{margin:0; font-size:16px;}
.sf-section-head a{font-size:13px; color:var(--brand-red); font-weight:600;}

.vertical-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.vertical-tile{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 8px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
}
.vertical-tile .ic{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; background:#FDEAEA;}

.hscroll{display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; -ms-overflow-style:none; scrollbar-width:none;}
.hscroll::-webkit-scrollbar{display:none;}

.store-card,.product-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; flex:0 0 auto;}
.store-card{width:230px;}
.product-card{width:170px;}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px;}
.sc-img{width:100%; height:110px; object-fit:cover; background:#f0f0f3;}
/* .pc-img (Customers/Store.aspx product & listing photos) uses "contain" rather
   than "cover" so a vendor's image is always shown in full — "cover" was cropping
   the sides off images whose aspect ratio didn't match the fixed 110px-tall box. */
.pc-img{width:100%; height:110px; object-fit:contain; background:#f0f0f3;}
.pc-body,.sc-body{padding:10px 12px;}
.pc-name{font-weight:700; font-size:13.5px; margin-bottom:2px;}
.pc-price{color:var(--brand-red); font-weight:700; font-size:14px;}
.pc-add{margin-top:8px;}
.rating{font-size:12px; color:var(--text-muted);}
.rating b{color:var(--text);}

/* ---------- Vendor store page (Customers/Store.aspx) ----------
   Its own responsive grid instead of the shared .card-grid/.product-card
   (those stay fixed-width for POS/Terminal.aspx and Customers/Vertical.aspx,
   which is why a store with only a couple of items left a big empty gap
   next to the cards on a wide screen). Cards stretch to fill their column
   here, so a short list of products never looks stranded. */
.st-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (min-width:560px){ .st-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:820px){ .st-grid{grid-template-columns:repeat(4,1fr); gap:16px;} }
@media (min-width:1150px){ .st-grid{grid-template-columns:repeat(5,1fr);} }
@media (min-width:1450px){ .st-grid{grid-template-columns:repeat(6,1fr);} }

.st-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
}
.st-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,20,40,.14);}

/* ---------- Shops near you (Customers/Nearby.aspx) ---------- */
.nearby-back{display:inline-block; margin-bottom:10px; color:var(--text-muted); font-size:13px; text-decoration:none;}
.nearby-back:hover{color:var(--brand-red);}

.nearby-address-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:9px 16px; font-size:12.5px; margin:10px 0 14px; box-shadow:var(--shadow);
}
.nearby-address-ic{flex-shrink:0;}
.nearby-address-bar .chg{margin-left:auto; color:var(--brand-red); font-weight:700; text-decoration:none; white-space:nowrap;}
.nearby-address-bar .chg:hover{text-decoration:underline;}

.nearby-search-row{display:flex; gap:10px; margin-bottom:18px; align-items:stretch;}
.nearby-search-row .sf-search{flex:1;}
.nearby-search-row .btn{white-space:nowrap;}

.nearby-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (min-width:560px){ .nearby-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:820px){ .nearby-grid{grid-template-columns:repeat(4,1fr); gap:16px;} }
@media (min-width:1150px){ .nearby-grid{grid-template-columns:repeat(5,1fr);} }
@media (min-width:1450px){ .nearby-grid{grid-template-columns:repeat(6,1fr);} }

.nearby-card{
  display:block; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.nearby-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,20,40,.14);}

.nearby-card-img-wrap{position:relative; width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,#F1F1F7,#E3E3EE); overflow:hidden;}
.nearby-card-img-wrap img{width:100%; height:100%; object-fit:cover; display:block;}
.nearby-card-img-wrap .ph-name{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:12px; font-weight:700; color:#9494AC; font-size:13px; line-height:1.3;
}
.nearby-card-vertical-badge{
  position:absolute; top:8px; left:8px; background:rgba(20,20,30,.62); color:#fff;
  font-size:10px; padding:3px 9px; border-radius:999px; font-weight:600; letter-spacing:.2px;
}

.nearby-card-body{padding:10px 12px 12px;}
.nearby-card-name{
  font-weight:700; font-size:13.5px; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.nearby-card-meta{font-size:11.5px; color:var(--text-muted); margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nearby-card-foot{display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11.5px;}
.nearby-card-rating{display:inline-flex; align-items:center; gap:3px; font-weight:700; color:#E8A13B; flex-shrink:0;}
.nearby-card-rating .n{color:var(--text);}
.nearby-card-fee{color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nearby-card-fee.free{color:var(--success); font-weight:700;}

@media (max-width:480px){
  .nearby-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .nearby-card-body{padding:8px 10px 10px;}
  .nearby-card-name{font-size:12.5px;}
  .nearby-address-bar{font-size:11.5px; padding:8px 12px;}
  .nearby-search-row{gap:6px;}
  .nearby-search-row .btn{padding:0 14px;}
}

/* ---------- Customer storefront home (Customers/Default.aspx) ---------- */

/* "What are you looking for?" — same tiles, just more columns as the
   viewport grows so they don't stay cramped at 3-across on a wide desktop. */
.sf-vertical-grid{grid-template-columns:repeat(3,1fr);}
@media (min-width:700px){ .sf-vertical-grid{grid-template-columns:repeat(4,1fr);} }
@media (min-width:1100px){ .sf-vertical-grid{grid-template-columns:repeat(6,1fr);} }

/* "Recommended Vendors" — always a full wrapping grid, same mechanism as
   "Popular Items" below: every card shows in full at every width, no
   side-scrolling and no partial "peeking" card cut off at the edge. */
.sf-vendor-scroll-wrap{position:relative;}
.sf-vendor-scroll{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (min-width:560px){ .sf-vendor-scroll{grid-template-columns:repeat(3,1fr);} }
@media (min-width:820px){ .sf-vendor-scroll{grid-template-columns:repeat(4,1fr); gap:16px;} }
@media (min-width:1150px){ .sf-vendor-scroll{grid-template-columns:repeat(5,1fr);} }
@media (min-width:1450px){ .sf-vendor-scroll{grid-template-columns:repeat(6,1fr);} }

.sf-vendor-card{
  display:block; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.sf-vendor-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,20,40,.14);}
.sf-vendor-img-wrap{position:relative; width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,#F1F1F7,#E3E3EE); overflow:hidden;}
.sf-vendor-img-wrap img{width:100%; height:100%; object-fit:cover; display:block;}
.sf-vendor-img-wrap .ph-name{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:10px; font-weight:700; color:#9494AC; font-size:12.5px; line-height:1.3;
}
.sf-vendor-badge{
  position:absolute; top:8px; left:8px; background:rgba(20,20,30,.62); color:#fff;
  font-size:10px; padding:3px 9px; border-radius:999px; font-weight:600;
}
.sf-vendor-body{padding:9px 11px 11px;}
.sf-vendor-name{font-weight:700; font-size:13px; margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sf-vendor-rating{font-size:11.5px; font-weight:700; color:#E8A13B;}
.sf-vendor-rating .n{color:var(--text);}

/* "Popular Items" — a proper responsive grid (2 cols on a phone up to 6 on
   a wide desktop) instead of a single row that ran off the edge. */
.sf-product-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (min-width:560px){ .sf-product-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:820px){ .sf-product-grid{grid-template-columns:repeat(4,1fr); gap:16px;} }
@media (min-width:1150px){ .sf-product-grid{grid-template-columns:repeat(5,1fr);} }
@media (min-width:1450px){ .sf-product-grid{grid-template-columns:repeat(6,1fr);} }

.sf-product-card{
  display:block; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.sf-product-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,20,40,.14);}
.sf-product-img-wrap{position:relative; width:100%; aspect-ratio:1/1; background:linear-gradient(135deg,#F1F1F7,#E3E3EE); overflow:hidden;}
.sf-product-img-wrap img{width:100%; height:100%; object-fit:cover; display:block;}
.sf-product-img-wrap .ph-name{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:10px; font-weight:700; color:#9494AC; font-size:12px; line-height:1.3;
}
.sf-product-discount-badge{
  position:absolute; top:8px; left:8px; background:var(--brand-red); color:#fff;
  font-size:10px; padding:3px 9px; border-radius:999px; font-weight:700;
}
.sf-product-body{padding:9px 11px 11px;}
.sf-product-name{font-weight:700; font-size:13px; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sf-product-store{font-size:11px; margin-bottom:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sf-product-price{font-size:13.5px;}
.sf-product-price .was{text-decoration:line-through; color:var(--text-muted); font-size:11.5px; margin-right:6px; font-weight:400;}
.sf-product-price .now{color:var(--text);}
.sf-product-price .was ~ .now{color:var(--success);}

@media (max-width:480px){
  .sf-product-grid{gap:10px;}
  .sf-product-body,.sf-vendor-body{padding:8px 9px 9px;}
}

.sf-bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:30; background:#fff; border-top:1px solid var(--border);
  display:flex; height:var(--bottomnav-h);
}
.sf-bottomnav a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; color:var(--text-muted); font-weight:600; position:relative;}
.sf-bottomnav a.active{color:var(--brand-red);}
.sf-bottomnav .ico{font-size:19px;}
.cart-count{position:absolute; top:2px; right:26%; background:var(--brand-red); color:#fff; font-size:10px; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px;}

/* =====================================================================
   DASHBOARD shell (Admin / Vendors / POS)
   ===================================================================== */
/* ASP.NET Web Forms always wraps the page body in <form id="form1"
   runat="server">, so .db-sidebar/.db-main are children of that <form>,
   not of <body> directly. The flex container has to be the <form> (body's
   one and only child on every dashboard-shell page), or .db-sidebar and
   .db-main just stack vertically as plain blocks instead of sitting
   side-by-side. */
body.dashboard{min-height:100vh;}
body.dashboard > form{display:flex; min-height:100vh;}
.db-sidebar{
  width:var(--sidebar-w); background:var(--sidebar-bg); color:#fff; flex-shrink:0;
  padding:18px 12px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.db-brand{display:flex; align-items:center; gap:10px; padding:6px 10px 20px; font-weight:800; font-size:18px;}
.db-brand span.dot{color:var(--brand-red);}
.db-nav a{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; color:#D9D3F0;
  font-size:13.5px; font-weight:600; margin-bottom:2px;
}
.db-nav a:hover{background:rgba(255,255,255,.06);}
.db-nav a.active{background:var(--sidebar-bg-active); color:#fff;}
.db-nav .section-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#9C8FC7; margin:16px 10px 6px;}

.db-main{flex:1; min-width:0;}
.db-topbar{
  position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--border);
  padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.db-topbar h1{font-size:19px; margin:0;}
.db-user-chip{display:flex; align-items:center; gap:10px; font-size:13.5px;}
.db-avatar{width:34px; height:34px; border-radius:50%; background:var(--brand-red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;}
.db-content{padding:22px;}

.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:22px;}
.kpi-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;}
.kpi-card .kpi-label{font-size:12.5px; color:var(--text-muted); font-weight:600;}
.kpi-card .kpi-value{font-size:24px; font-weight:800; margin-top:4px;}

.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.filters{display:flex; gap:10px; flex-wrap:wrap;}
.filters .input,.filters .select{width:auto; min-width:150px;}

.mobile-menu-btn{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:#fff;}

@media (max-width:900px){
  .vertical-grid{grid-template-columns:repeat(3,1fr);}
  .db-sidebar{position:fixed; left:-260px; top:0; height:100vh; z-index:50; transition:left .2s ease; box-shadow:0 0 0 100vmax rgba(0,0,0,0);}
  .db-sidebar.open{left:0; box-shadow:0 0 0 100vmax rgba(0,0,0,.4);}
  body.dashboard > form{display:block;}
  .db-topbar .mobile-menu-btn{display:inline-block; color:var(--text);}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- chat widget (shared) ---------- */
.chat-fab{
  position:fixed; right:18px; bottom:calc(var(--bottomnav-h) + 18px); z-index:40; width:52px; height:52px;
  border-radius:50%; background:var(--brand-red); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:var(--shadow); border:none; cursor:pointer;
}
body.dashboard .chat-fab{bottom:18px;}
.chat-panel{
  position:fixed; right:18px; bottom:calc(var(--bottomnav-h) + 80px); z-index:41; width:320px; max-width:88vw;
  background:#fff; border-radius:var(--radius); box-shadow:0 8px 30px rgba(0,0,0,.18); display:none; flex-direction:column;
  overflow:hidden; height:420px;
}
body.dashboard .chat-panel{bottom:86px;}
.chat-panel.open{display:flex;}
.chat-head{background:var(--brand-red); color:#fff; padding:12px 14px; font-weight:700; display:flex; justify-content:space-between; align-items:center;}
.chat-head button{background:none; border:none; color:#fff; font-size:16px; cursor:pointer;}
.chat-messages{flex:1; overflow-y:auto; padding:12px; background:#F9F9FC; display:flex; flex-direction:column; gap:8px;}
.chat-bubble{max-width:78%; padding:8px 12px; border-radius:14px; font-size:13px; line-height:1.35;}
.chat-bubble.me{align-self:flex-end; background:var(--brand-red); color:#fff; border-bottom-right-radius:4px;}
.chat-bubble.them{align-self:flex-start; background:#fff; border:1px solid var(--border); border-bottom-left-radius:4px;}
.chat-bubble .meta{display:block; font-size:10px; opacity:.7; margin-top:3px;}
.chat-input{display:flex; border-top:1px solid var(--border);}
.chat-input input{flex:1; border:none; padding:12px; font-size:13px;}
.chat-input input:focus{outline:none;}
.chat-input button{background:var(--brand-red); color:#fff; border:none; padding:0 16px; cursor:pointer; font-weight:700;}

/* ---------- full chat page (Customers/Chat.aspx, Vendors/Chat.aspx) ---------- */
.chat-page{display:flex; gap:16px; height:calc(100vh - 220px); min-height:420px;}
.chat-threads{width:260px; flex-shrink:0; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow-y:auto;}
.chat-thread-item{display:block; padding:12px 14px; border-bottom:1px solid var(--border); font-size:13.5px;}
.chat-thread-item:hover,.chat-thread-item.active{background:#FDEAEA;}
.chat-thread-item .tt-name{font-weight:700; margin-bottom:2px;}
.chat-thread-item .tt-last{color:var(--text-muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chat-main-page{flex:1; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden;}
@media (max-width:800px){ .chat-page{flex-direction:column; height:auto;} .chat-threads{width:100%; max-height:180px;} .chat-main-page{height:460px;} }

/* ---------- chat upgrade: attachments, reply/forward, presence, calls ---------- */

.chat-head-actions{display:flex; gap:8px;}
.chat-call-btn{background:rgba(255,255,255,.18); border:none; color:#fff; width:30px; height:30px; border-radius:50%; font-size:14px; cursor:pointer;}
.chat-call-btn:hover{background:rgba(255,255,255,.32);}

.presence-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#ccc; margin-right:4px;}
.presence-dot.online{background:#2ecc71;}
.presence-dot.offline{background:rgba(255,255,255,.4);}
.presence-label{opacity:.85; font-weight:400; font-size:11px;}

.chat-sender-name{display:block; font-size:11px; opacity:.6; margin-bottom:2px;}
.chat-bubble{position:relative;}
.chat-bubble-text{white-space:pre-wrap; word-break:break-word;}
.chat-bubble .ticks{opacity:.8;}
.chat-bubble .ticks.read{color:#4fc3f7; opacity:1;}

.chat-forwarded-tag{font-size:10.5px; opacity:.7; font-style:italic; margin-bottom:3px;}
.chat-reply-quote{background:rgba(0,0,0,.06); border-left:3px solid var(--brand-red); border-radius:6px; padding:4px 8px; margin-bottom:5px; font-size:11.5px; line-height:1.3;}
.chat-bubble.me .chat-reply-quote{background:rgba(255,255,255,.18); border-left-color:#fff;}
.chat-reply-quote strong{display:block; font-size:10.5px;}

.chat-bubble-actions{position:absolute; top:-11px; right:6px; display:none; gap:4px;}
.chat-bubble:hover .chat-bubble-actions{display:flex;}
.chat-bubble-actions span{background:#fff; border:1px solid var(--border); border-radius:50%; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; color:#333; box-shadow:0 1px 3px rgba(0,0,0,.15);}
.chat-bubble-actions span:hover{background:#f2f2f2;}

.chat-att-img{max-width:220px; max-height:220px; border-radius:8px; display:block; margin-bottom:4px; object-fit:cover;}
.chat-att-video{max-width:240px; max-height:220px; border-radius:8px; display:block; margin-bottom:4px;}
.chat-att-audio,.chat-att-video{background:#000;}
.chat-bubble .chat-att-audio{width:220px; margin-bottom:4px;}
.chat-att-doc{display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,.06); border-radius:8px; padding:6px 10px; margin-bottom:4px; font-size:12.5px; text-decoration:none; color:inherit;}
.chat-bubble.me .chat-att-doc{background:rgba(255,255,255,.2); color:#fff;}
.chat-att-size{opacity:.7; font-size:10.5px;}

.chat-typing{padding:2px 14px; font-size:11.5px; font-style:italic; color:var(--text-muted);}

.chat-reply-bar{display:flex; justify-content:space-between; align-items:center; background:#F3F3F8; border-top:1px solid var(--border); padding:6px 14px; font-size:12px;}
.chat-reply-close{cursor:pointer; font-size:16px; line-height:1; opacity:.6; padding:0 4px;}
.chat-reply-close:hover{opacity:1;}

.chat-input .chat-icon-btn{background:none; color:var(--text-muted); padding:0 10px; font-size:16px;}
.chat-input .chat-icon-btn:hover{color:var(--brand-red);}
.chat-input .chat-icon-btn.recording{color:#fff; background:#e53935; border-radius:50%;}
.chat-input .chat-icon-btn.uploading{opacity:.5; cursor:wait;}

.chat-call-modal,.chat-forward-modal{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200; display:flex; align-items:center; justify-content:center;}
.chat-call-modal-inner{background:#1c1c22; color:#fff; border-radius:16px; padding:26px; width:340px; max-width:90vw; text-align:center;}
.chat-call-modal-inner h3{margin:0 0 6px;}
.chat-call-status{color:#bbb; font-size:13px; margin-bottom:14px;}
.chat-call-videos{position:relative; background:#000; border-radius:10px; overflow:hidden; min-height:160px; margin-bottom:16px;}
.chat-call-videos #chatRemoteVideo{width:100%; max-height:260px; background:#000; display:block;}
.chat-call-videos #chatLocalVideo{position:absolute; right:8px; bottom:8px; width:76px; border-radius:8px; border:2px solid #fff; background:#000;}
.chat-call-controls{display:flex; gap:10px; justify-content:center;}
.chat-call-controls .btn{border-radius:50%; width:52px; height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:18px;}
.btn-danger{background:#e53935; color:#fff; border:none;}
.btn-danger:hover{background:#c62828;}
#chatCallMuteBtn.muted{background:#555; color:#fff;}

.chat-forward-modal-inner{background:#fff; border-radius:12px; width:320px; max-width:90vw; max-height:70vh; overflow:hidden; display:flex; flex-direction:column;}
.chat-forward-head{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); font-weight:700;}
.chat-forward-list{overflow-y:auto; padding:6px;}
.chat-forward-item{display:block; width:100%; text-align:left; background:none; border:none; padding:10px 12px; border-radius:8px; cursor:pointer; font-size:13.5px;}
.chat-forward-item:hover{background:#FDEAEA;}

.text-muted{color:var(--text-muted);}
.text-right{text-align:right;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;}

/* ---------- POS terminal (POS/Terminal.aspx) ---------- */
.pos-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start;}
.pos-product-tile{
  display:block; text-align:left; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:12px; cursor:pointer; transition:.12s ease;
}
.pos-product-tile:hover{border-color:var(--brand-red); box-shadow:var(--shadow);}
.pos-product-name{font-weight:700; font-size:13.5px; margin-bottom:4px;}
.pos-product-price{color:var(--brand-red); font-weight:700; font-size:14px;}
.pos-product-stock{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
.pos-total-row{display:flex; align-items:center; justify-content:space-between; padding:14px 2px; font-size:16px; border-top:1.5px dashed var(--border); margin:8px 0 14px;}
@media (max-width:900px){ .pos-grid{grid-template-columns:1fr;} }

/* ---------- Landing / main index (Default.aspx) ---------- */
body.landing{background:#fff;}
.lp-logo{font-size:20px; font-weight:800; color:var(--brand-dark); letter-spacing:-.3px;}
.lp-logo span{color:var(--brand-red);}

.lp-topbar{border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:20;}
.lp-topbar-row{display:flex; align-items:center; justify-content:space-between; height:64px;}
.lp-toplinks{display:flex; align-items:center; gap:16px; font-size:14px; font-weight:600;}
.lp-toplinks a:not(.btn){color:var(--text-muted);}
.lp-toplinks a:not(.btn):hover{color:var(--text);}

.lp-hero{
  background:linear-gradient(160deg, var(--sidebar-bg) 0%, var(--sidebar-bg-active) 100%);
  color:#fff; padding:72px 0 88px; text-align:center;
}
.lp-hero-inner{max-width:720px; margin:0 auto;}
.lp-hero h1{font-size:38px; line-height:1.15; margin-bottom:14px;}
.lp-hero-sub{font-size:16px; color:rgba(255,255,255,.85); margin-bottom:28px;}
.lp-hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.btn-lg{padding:14px 26px; font-size:15px;}
.lp-hero .btn-ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.4);}
.lp-hero .btn-ghost:hover{background:rgba(255,255,255,.2);}

.lp-section{padding:44px 0;}
.lp-vertical-grid{margin-top:14px;}

.lp-biz-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px;}
.lp-biz-card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);}
.lp-biz-card .ic{font-size:28px; margin-bottom:10px;}
.lp-biz-card h4{font-size:16px; margin-bottom:6px;}
.lp-biz-card p{color:var(--text-muted); font-size:13.5px; margin-bottom:14px;}
.lp-biz-card a:not(.btn){display:block; margin-top:10px; font-size:13px; font-weight:600; color:var(--brand-red);}

.lp-footer{background:var(--brand-dark); color:rgba(255,255,255,.7); margin-top:20px; padding:28px 0;}
.lp-footer-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;}
.lp-footer .lp-logo{color:#fff;}
.lp-footer-links{display:flex; gap:18px; font-size:13.5px;}
.lp-footer-links a{color:rgba(255,255,255,.7);}
.lp-footer-links a:hover{color:#fff;}
.lp-footer-copy{font-size:12.5px; color:rgba(255,255,255,.45);}

@media (max-width:800px){
  .lp-toplinks{gap:10px;}
  .lp-toplinks a:not(.btn){display:none;}
  .lp-hero{padding:52px 0 64px;}
  .lp-hero h1{font-size:28px;}
  .lp-biz-grid{grid-template-columns:1fr;}
  .lp-footer-row{flex-direction:column; align-items:flex-start;}
}

/* ---------- Landing hero — dark "Hungry? We've got you covered." variant,
   with a delivery-address search box (Google Places Autocomplete, once a
   real key is added — see Default.aspx) and a CARTO coverage map below it
   (Default.aspx's #deliveryMap).
   Accent colour is EduCore's indigo/purple (--hero-accent below), scoped to
   just this hero — the rest of MedExpress (buttons, prices, badges in every
   other portal) still uses the site-wide --brand-red and is untouched. ---------- */
.lp-hero-dark{
  --hero-accent:#5B4FE0;
  --hero-accent-dark:#4739C7;
  position:relative; overflow:hidden; text-align:center;
  background:#0B0B0D;
  background-image:
    radial-gradient(circle at 85% 0%, rgba(91,79,224,.38), transparent 55%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:auto, 42px 42px, 42px 42px;
}
.lp-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff;
  padding:6px 16px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.14em;
  margin-bottom:22px;
}
.lp-hero-dark h1{color:#fff; font-size:44px; line-height:1.18; margin-bottom:16px;}
.lp-accent{font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:700; color:var(--hero-accent);}
.lp-hero-dark .lp-hero-sub{color:rgba(255,255,255,.72); max-width:560px; margin:0 auto 30px;}

.lp-search-wrap{max-width:600px; margin:0 auto 28px;}
.lp-search-box{
  display:flex; align-items:center; gap:10px;
  background:rgba(18,16,32,.85); border:1.5px solid rgba(91,79,224,.55); border-radius:999px;
  padding:14px 20px; box-shadow:0 0 0 4px rgba(91,79,224,.1), 0 8px 24px rgba(0,0,0,.35);
}
.lp-search-ic,.lp-search-go{opacity:.75; font-size:15px;}
.lp-search-input{flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:15px;}
.lp-search-input::placeholder{color:rgba(255,255,255,.45);}

/* Hero-only button recolor — .btn-primary/.btn-ghost elsewhere in the app
   (POS, checkout, admin, etc.) keep the site-wide red untouched. */
.lp-hero-dark .btn-primary{background:var(--hero-accent);}
.lp-hero-dark .btn-primary:hover{background:var(--hero-accent-dark);}
.lp-hero-dark .btn-ghost{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.35);}
.lp-hero-dark .btn-ghost:hover{background:rgba(255,255,255,.18);}

.lp-map{width:100%; height:340px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-top:14px;}

/* Google Places Autocomplete injects this dropdown itself (unstyled by us,
   it always renders as Google's own white "powered by Google" panel) — just
   make sure it sits above everything else on the dark hero. */
.pac-container{z-index:9999;}

@media (max-width:800px){
  .lp-hero-dark h1{font-size:30px;}
  .lp-search-box{padding:12px 16px;}
  .lp-map{height:260px;}
}

/* POS receipt printing (Terminal.aspx). The print-only block is injected
   by the server only when a receipt needs printing (auto-print or the
   "Print Receipt" button) and is otherwise absent from the page, so this
   just keeps it out of the way on screen if it's ever present but unused.
   Terminal.aspx.cs tags the block with format-thermal or format-a4 to
   match Selling Settings > Receipt Format — the two width rules below are
   what actually makes that setting change anything (it used to always
   print the narrow thermal width regardless of what was selected). */
.receipt-print-only{display:none;}

@media print{
  .db-sidebar, .db-topbar, .mobile-menu-btn, .btn,
  .card:not(.receipt-print-only){display:none !important;}
  .receipt-print-only{display:block !important; margin:0 auto;}
  .receipt-print-only.format-thermal{max-width:340px;}
  .receipt-print-only.format-a4{max-width:760px; padding:24px;}
}