/*
 * Plesky Store — Eyinimofe World brand layer
 * Mobile-first app shell. Loaded after legacy/page styles so the entire
 * application shares one visual language without changing business logic.
 */
:root{
  --brand-navy:#052744;
  --brand-navy-2:#0b3f63;
  --brand-navy-3:#0f557f;
  --brand-orange:#f6761b;
  --brand-orange-dark:#da5a00;
  --brand-orange-soft:#fff0e5;
  --brand-green:#5cb84b;
  --brand-green-dark:#3f9638;
  --brand-green-soft:#edf8ea;
  --brand-ink:#172633;
  --brand-muted:#687785;
  --brand-bg:#f4f7f9;
  --brand-surface:#ffffff;
  --brand-surface-2:#eef4f7;
  --brand-line:#dce6ec;
  --brand-danger:#b42318;
  --brand-shadow:0 16px 40px rgba(5,39,68,.12);
  --brand-shadow-soft:0 9px 24px rgba(5,39,68,.09);
  --app-max:760px;

  /* Legacy variables remapped to the Eyinimofe World palette */
  --gold:var(--brand-orange);
  --gold-soft:#ffb26f;
  --dark:var(--brand-navy);
  --brown:var(--brand-navy);
  --brown-2:var(--brand-navy-2);
  --cream:var(--brand-bg);
  --cream-2:var(--brand-surface-2);
  --white:#fff;
  --text:var(--brand-ink);
  --muted:var(--brand-muted);
  --line:var(--brand-line);
  --success:var(--brand-green-dark);
  --danger:var(--brand-danger);
  --shadow:var(--brand-shadow);
}

*{box-sizing:border-box}
html{
  min-height:100%;
  background:#e8eef2;
  color-scheme:light;
}
body{
  width:100%;
  max-width:var(--app-max);
  min-height:100vh;
  margin:0 auto !important;
  color:var(--brand-ink) !important;
  background:
    radial-gradient(circle at 92% -5%,rgba(246,118,27,.10),transparent 30%),
    linear-gradient(180deg,#f8fafb 0%,var(--brand-bg) 100%) !important;
  box-shadow:0 0 60px rgba(5,39,68,.16);
  overflow-x:hidden;
  padding-bottom:max(92px,calc(82px + env(safe-area-inset-bottom))) !important;
}
body::selection{background:rgba(246,118,27,.22)}
a{color:inherit}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
img{max-width:100%}

/* Accessible, consistent controls */
.input,
.checkout-input,
.form input,
.form select,
.form textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea{
  width:100%;
  min-height:50px;
  border:1px solid var(--brand-line) !important;
  border-radius:16px !important;
  background:#fff !important;
  color:var(--brand-ink) !important;
  padding:13px 14px;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
textarea{min-height:105px;resize:vertical}
.input:focus,
.checkout-input:focus,
.form input:focus,
.form select:focus,
.form textarea:focus,
input:focus,select:focus,textarea:focus{
  border-color:var(--brand-orange) !important;
  box-shadow:0 0 0 4px rgba(246,118,27,.12) !important;
}

.btn,
.btn-primary,
.btn-login,
.btn-register,
.btn-create,
.place-order-btn,
.add-btn,
.product-bottom button,
button.primary{
  min-height:48px;
  border:0 !important;
  border-radius:16px !important;
  background:var(--brand-orange) !important;
  color:var(--brand-navy) !important;
  font-weight:900 !important;
  box-shadow:none !important;
  cursor:pointer;
}
.btn:hover,.btn-primary:hover,.add-btn:hover,.product-bottom button:hover{filter:brightness(.98)}
.btn:active,button:active{transform:scale(.985)}
.btn-light{
  background:#fff !important;
  color:var(--brand-navy) !important;
  border:1px solid var(--brand-line) !important;
}
.btn-dark{
  background:var(--brand-navy) !important;
  color:#fff !important;
}
.btn-success{background:var(--brand-green) !important;color:var(--brand-navy) !important}
.btn-danger{background:#fff0ef !important;color:var(--brand-danger) !important;border:1px solid #f3c5c0 !important}
.btn-outline{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.32) !important;
}
.btn-gold{background:var(--brand-orange) !important;color:var(--brand-navy) !important}

/* App shell on desktop keeps the mobile-app feeling */
.app-shell,.mobile-app,.dash-wrap,.checkout-page,.wrap,.app,.container,.admin{
  width:100% !important;
  max-width:var(--app-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Shared top app bar */
.universal-app-header{
  position:sticky;
  top:0;
  z-index:900;
  padding:12px 14px 14px;
  background:linear-gradient(135deg,var(--brand-navy) 0%,#083b5d 100%);
  color:#fff;
  border-bottom:3px solid var(--brand-orange);
  box-shadow:0 12px 32px rgba(5,39,68,.22);
}
.universal-header-row{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand-lockup{display:flex;align-items:center;gap:10px;min-width:0;color:#fff;text-decoration:none}
.brand-lockup-mark{
  width:44px;height:44px;flex:0 0 44px;border-radius:15px;display:grid;place-items:center;
  background:var(--brand-orange);color:var(--brand-navy);font-size:21px;font-weight:1000;
  box-shadow:inset 0 -2px 0 rgba(5,39,68,.12);
}
.brand-lockup-copy{min-width:0}
.brand-lockup-copy strong{display:block;font-size:17px;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-lockup-copy small{display:block;margin-top:3px;color:#cde7d0;font-size:11px;font-weight:800;letter-spacing:.02em}
.header-actions{display:flex;align-items:center;gap:8px}
.header-cart,.role-chip,.header-icon-btn{
  min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:15px;padding:8px 10px;background:#fff;color:var(--brand-navy);font-size:12px;font-weight:900;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.header-cart b{min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--brand-orange);color:var(--brand-navy)}
.header-icon-btn{width:44px;padding:0;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.16)}
.role-chip{background:var(--brand-green);color:var(--brand-navy)}
.ui-icon{width:20px;height:20px;display:block;flex:0 0 auto}
.subpage-heading{padding:12px 0 3px}
.eyinimofe-kicker{display:inline-flex;color:#ffb77e;font-weight:950;font-size:10px;letter-spacing:.13em}
.subpage-heading h1{margin:4px 0 3px;color:#fff;font-size:24px;line-height:1.08;letter-spacing:-.02em}
.subpage-heading p{margin:0;color:#d6e3eb;font-size:13px;line-height:1.45}
.universal-search{
  margin-top:10px;min-height:52px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;
  padding:6px 6px 6px 12px;border-radius:18px;background:#fff;box-shadow:0 9px 24px rgba(0,0,0,.14);
}
.universal-search .ui-icon{color:var(--brand-muted)}
.universal-search input{min-height:38px !important;border:0 !important;padding:5px !important;box-shadow:none !important;background:transparent !important}
.universal-search button{min-height:40px;border:0;border-radius:13px;padding:0 13px;background:var(--brand-orange);color:var(--brand-navy);font-weight:950}

/* Existing homepage header mapped to brand */
.mobile-app-header{
  position:sticky !important;top:0;z-index:900 !important;padding:12px 14px 14px !important;
  background:linear-gradient(135deg,var(--brand-navy),#083b5d) !important;
  border-radius:0 0 24px 24px !important;border-bottom:3px solid var(--brand-orange) !important;
  box-shadow:0 12px 32px rgba(5,39,68,.22) !important;
}
.header-top{width:100% !important;margin:0 auto 10px !important}
.app-brand{color:#fff !important}
.app-logo{
  width:44px !important;height:44px !important;border-radius:15px !important;
  background:var(--brand-orange) !important;color:var(--brand-navy) !important;box-shadow:none !important;
}
.app-brand small{color:#cde7d0 !important}
.cart-pill{
  background:#fff !important;color:var(--brand-navy) !important;border-radius:15px !important;padding:9px 11px !important;
}
.cart-pill span{background:var(--brand-orange) !important;color:var(--brand-navy) !important}
.search-box{
  width:100% !important;padding:6px !important;border-radius:18px !important;background:#fff !important;
  border:0 !important;box-shadow:0 9px 24px rgba(0,0,0,.13) !important;
}
.search-box input{background:transparent !important;border:0 !important;box-shadow:none !important}
.search-box button{background:var(--brand-orange) !important;color:var(--brand-navy) !important;border-radius:13px !important}

.mobile-app{padding:14px 12px 28px !important}
.promo-card{
  min-height:0 !important;grid-template-columns:1fr !important;gap:14px !important;padding:22px 18px !important;border-radius:26px !important;
  background:
    radial-gradient(circle at 93% 8%,rgba(92,184,75,.35),transparent 28%),
    linear-gradient(145deg,var(--brand-navy) 0%,#073452 68%,#0d5275 100%) !important;
  box-shadow:var(--brand-shadow) !important;
}
.promo-card::after{background:rgba(246,118,27,.16) !important}
.mini-label{margin-bottom:10px !important;background:rgba(246,118,27,.12) !important;border-color:rgba(246,118,27,.55) !important;color:#ffb77e !important}
.promo-card h1{font-size:clamp(31px,8vw,44px) !important;line-height:1.02 !important;letter-spacing:-1.2px !important}
.promo-card p{color:#dbe9f1 !important;font-size:15px !important;line-height:1.55}
.promo-actions{display:grid !important;grid-template-columns:1fr 1fr !important;gap:9px !important}
.promo-actions .btn{width:100% !important;min-height:50px !important}
.promo-badge{
  width:100% !important;height:auto !important;min-height:70px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;
  padding:14px 18px !important;border-radius:20px !important;background:linear-gradient(135deg,#fff,var(--brand-green-soft)) !important;
  color:var(--brand-navy) !important;box-shadow:none !important;border:1px solid rgba(92,184,75,.35) !important;
}
.promo-badge strong{font-size:26px !important}.promo-badge span{color:var(--brand-green-dark)}

.quick-actions{gap:8px !important;margin:14px 0 20px !important}
.quick-actions a{min-height:78px !important;padding:10px 5px !important;border-radius:20px !important;background:#fff !important;border-color:var(--brand-line) !important;box-shadow:var(--brand-shadow-soft) !important}
.quick-actions span{width:36px !important;height:36px !important;border-radius:13px !important;background:var(--brand-navy) !important;color:#fff !important}
.quick-actions a:nth-child(1) span,.quick-actions a:nth-child(2) span{background:var(--brand-orange) !important;color:var(--brand-navy) !important}
.quick-actions strong{color:var(--brand-navy);font-size:11px !important}
.section-block{margin:22px 0 !important}
.section-head{align-items:flex-start !important;margin-bottom:12px !important}
.section-head h2{font-size:23px !important;color:var(--brand-navy);letter-spacing:-.5px !important}
.section-head p{color:var(--brand-muted) !important;font-size:13px;line-height:1.4}
.section-head a{color:var(--brand-orange-dark) !important}

.horizontal-products{gap:11px !important;padding-bottom:10px !important}
.deal-card{
  flex-basis:72% !important;min-width:230px !important;padding:11px !important;border-radius:23px !important;
  border-color:var(--brand-line) !important;box-shadow:var(--brand-shadow-soft) !important;background:#fff !important;
}
.deal-image,.app-product-img,.prod-img{
  background:
    radial-gradient(circle at top right,rgba(246,118,27,.22),transparent 38%),
    linear-gradient(145deg,var(--brand-navy),var(--brand-navy-2)) !important;
  color:#fff !important;border-radius:19px !important;
}
.product-tag,.app-product-info>span,.badge{
  background:var(--brand-orange-soft) !important;color:var(--brand-orange-dark) !important;border:1px solid #ffd8bd !important;
}
.deal-price,.price,.product-bottom strong{color:var(--brand-navy) !important}
.add-btn,.product-bottom button{background:var(--brand-orange) !important;color:var(--brand-navy) !important}
.category-grid{grid-template-columns:1fr !important;gap:11px !important}
.category-card{
  min-height:150px !important;padding:18px !important;border-radius:24px !important;
  background:linear-gradient(145deg,var(--brand-navy),var(--brand-navy-2)) !important;
  box-shadow:var(--brand-shadow) !important;
}
.category-card.kulikuli{background:linear-gradient(145deg,#093954,#116041) !important}
.category-card span{color:#ffb77e !important;border-color:rgba(246,118,27,.45) !important;background:rgba(246,118,27,.10) !important}
.category-card h3{margin:30px 0 7px !important;font-size:22px !important}.category-card p{color:#dbe9f1 !important}
.app-product-grid{grid-template-columns:1fr !important;gap:10px !important}
.app-product-card{grid-template-columns:104px minmax(0,1fr) !important;gap:11px !important;padding:10px !important;border-radius:22px !important;background:#fff !important;border-color:var(--brand-line) !important;box-shadow:var(--brand-shadow-soft) !important}
.app-product-img{height:112px !important}
.app-product-info p{color:var(--brand-muted) !important}

/* Shared page surface */
.card,.panel,.checkout-card,.order-card,.rider-card,.modal-box,.section,.box,.meta-box,.product-item{
  background:#fff !important;
  border-color:var(--brand-line) !important;
  box-shadow:var(--brand-shadow-soft) !important;
}
.card,.panel,.checkout-card,.order-card,.rider-card{border-radius:22px !important}
.wallet-card,.welcome-card,.hero,.checkout-header,.header,.top{
  background:linear-gradient(135deg,var(--brand-navy),var(--brand-navy-2)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:var(--brand-shadow) !important;
}
.wallet-card h1,.wallet-card h2,.welcome-card h1,.hero h1,.checkout-header h1,.header h1,.top h1{color:#fff !important}
.wallet-card p,.welcome-card p,.hero p,.checkout-header p,.header p,.top p{color:#dbe9f1 !important}

/* Legacy topbar and bottom nav are made visible and branded where still used */
.topbar{
  display:block !important;position:sticky;top:0;z-index:850;background:var(--brand-navy) !important;color:#fff !important;
  border-bottom:3px solid var(--brand-orange);box-shadow:0 10px 28px rgba(5,39,68,.18);
}
.topbar .nav{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:9px;color:#fff !important;font-weight:900}
.brand-mark{width:36px;height:36px;border-radius:12px;background:var(--brand-orange) !important;display:grid;place-items:center}
.brand-mark::before{content:'P';color:var(--brand-navy);font-weight:1000}
.nav-links{display:flex;gap:8px}
.section{padding:16px 12px 28px !important}
.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.section-title h1,.section-title h2{margin:0;color:var(--brand-navy)}
.grid{grid-template-columns:1fr !important;gap:10px !important}
.product-card{padding:12px !important}
.prod-img{min-height:150px;display:grid;place-items:center;font-weight:950;margin-bottom:10px}

/* Shop-specific additions */
.shop-intro{padding:18px 14px 12px;background:linear-gradient(135deg,var(--brand-navy),var(--brand-navy-2));color:#fff;border-radius:0 0 24px 24px;margin:-1px 0 14px}
.shop-intro h1{margin:0 0 5px;font-size:27px;line-height:1.1}.shop-intro p{margin:0;color:#dbe9f1;font-size:13px}
.category-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 11px;scrollbar-width:none}.category-chips::-webkit-scrollbar{display:none}
.category-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border-radius:999px;background:#fff;border:1px solid var(--brand-line);color:var(--brand-navy);font-size:12px;font-weight:900}
.category-chip.active{background:var(--brand-orange);border-color:var(--brand-orange);color:var(--brand-navy)}
.shop-product-card{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;padding:11px;border-radius:22px;background:#fff;border:1px solid var(--brand-line);box-shadow:var(--brand-shadow-soft)}
.shop-product-media{height:124px;border-radius:18px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,var(--brand-navy),var(--brand-navy-2));color:#fff;font-weight:950}
.shop-product-media img{width:100%;height:100%;object-fit:cover}
.shop-product-copy{min-width:0}.shop-product-copy h3{margin:6px 0 4px;color:var(--brand-navy);font-size:16px;line-height:1.25}.shop-product-copy p{margin:0;color:var(--brand-muted);font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-product-meta{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:10px}.shop-product-meta strong{color:var(--brand-navy);font-size:17px}.shop-product-meta button{min-height:38px;padding:0 13px;border:0;border-radius:13px;background:var(--brand-orange);color:var(--brand-navy);font-weight:950}

/* Cart */
.cart-list{display:grid;gap:10px}.cart-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:14px;border:1px solid var(--brand-line);border-radius:20px;background:#fff;box-shadow:var(--brand-shadow-soft)}
.cart-item h3{margin:0 0 4px;color:var(--brand-navy);font-size:15px}.cart-item small{color:var(--brand-muted)}.cart-item-actions{display:flex;align-items:center;gap:5px}.qty-btn{width:34px;height:34px;border:1px solid var(--brand-line);border-radius:11px;background:#fff;color:var(--brand-navy);font-weight:950}.qty-value{min-width:28px;text-align:center;font-weight:900}.remove-link{margin-top:7px;display:inline-flex;border:0;background:transparent;color:var(--brand-danger);padding:0;font-size:12px;font-weight:850}.cart-summary{position:sticky;bottom:86px;margin-top:14px;padding:14px;border-radius:22px;background:var(--brand-navy);color:#fff;box-shadow:0 14px 34px rgba(5,39,68,.24)}.cart-summary-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.cart-summary strong{font-size:22px}.cart-summary .btn{width:100%;background:var(--brand-orange) !important;color:var(--brand-navy) !important}

/* Dashboard / role navigation */
.dashboard,.dash-layout{grid-template-columns:1fr !important;gap:12px !important;padding:14px 12px 30px !important}
.sidebar,.dash-sidebar{
  position:relative !important;top:auto !important;display:flex !important;gap:7px !important;overflow-x:auto !important;
  padding:7px !important;border-radius:18px !important;background:#fff !important;border:1px solid var(--brand-line) !important;
  box-shadow:var(--brand-shadow-soft) !important;scrollbar-width:none;
}
.sidebar::-webkit-scrollbar,.dash-sidebar::-webkit-scrollbar{display:none}
.sidebar a,.dash-sidebar a{flex:0 0 auto;white-space:nowrap;margin:0 !important;padding:10px 12px !important;border-radius:12px !important;color:var(--brand-muted) !important;font-size:12px !important}
.sidebar a.active,.sidebar a:hover,.dash-sidebar a.active,.dash-sidebar a:hover{background:var(--brand-orange-soft) !important;color:var(--brand-orange-dark) !important}

/* Tables remain usable on phones and turn into clean stacked records when marked .mobile-cards */
.table-wrap{overflow:auto !important;border:1px solid var(--brand-line) !important;border-radius:20px !important;background:#fff !important;box-shadow:var(--brand-shadow-soft) !important}
table{width:100%;border-collapse:collapse;color:var(--brand-ink)}
th,td{padding:12px !important;border-bottom:1px solid var(--brand-line) !important;text-align:left;vertical-align:top}
th{background:#eef4f7 !important;color:var(--brand-navy) !important;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
td{font-size:13px}

.pagination{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.pagination a{min-width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff;border:1px solid var(--brand-line);color:var(--brand-navy);font-weight:900}.pagination a.active{background:var(--brand-orange);border-color:var(--brand-orange)}

.alert,.alert-error,.alert-success,.ok,.bad{border-radius:15px !important;padding:12px 13px !important}
.ok,.alert-success{background:var(--brand-green-soft) !important;color:#286f29 !important;border:1px solid #bfe1b8 !important}
.bad,.alert-error{background:#fff1f0 !important;color:var(--brand-danger) !important;border:1px solid #f0c8c4 !important}
.status,.badge{border-radius:999px !important;font-size:11px !important;font-weight:900 !important}
.track-link,.back-link{color:var(--brand-orange-dark) !important;font-weight:900}

/* Login/register */
.login-page,.register-page{width:100% !important;max-width:520px !important;padding:18px 14px 28px !important}
.login-card,.register-card{background:#fff !important;border:1px solid var(--brand-line) !important;border-radius:24px !important;padding:20px !important;box-shadow:var(--brand-shadow) !important}
.login-logo,.register-logo{background:var(--brand-orange) !important;color:var(--brand-navy) !important;border-radius:15px !important;box-shadow:none !important}
.login-card h1,.register-card h1{color:var(--brand-navy) !important}.login-card p,.register-card p{color:var(--brand-muted) !important}
.home-link,.login-link{color:var(--brand-orange-dark) !important}

/* Checkout */
.checkout-page{padding:14px 12px 28px !important}
.checkout-header{border-radius:22px !important;padding:19px !important;margin-bottom:12px !important}
.checkout-grid{grid-template-columns:1fr !important;gap:11px !important}.checkout-card{padding:15px !important}.order-total{background:var(--brand-orange-soft) !important;color:var(--brand-navy) !important}.pay-options label{background:#fff !important;border-color:var(--brand-line) !important;border-radius:15px !important}.place-order-btn{background:var(--brand-orange) !important;color:var(--brand-navy) !important}

/* Track/admin map pages */
#map,.map-wrap{border-radius:20px !important;overflow:hidden}.toplinks,.nav{gap:7px}.toplinks a,.nav a{border-radius:12px !important}.metric{background:#fff !important;border-color:var(--brand-line) !important}.metric b,.metric strong{color:var(--brand-navy) !important}

/* Audio guide */
.plesky-audio-guide{background:linear-gradient(135deg,var(--brand-navy),var(--brand-navy-2)) !important;border-color:rgba(246,118,27,.42) !important;box-shadow:0 16px 35px rgba(5,39,68,.28) !important}
.audio-guide-icon,.audio-guide-controls button.primary{background:var(--brand-orange) !important;color:var(--brand-navy) !important}.audio-guide-title,.audio-guide-body p,.audio-guide-note{color:#e8f1f6 !important}

/* PWA install CTA */
.install-app-btn{display:none;align-items:center;justify-content:center;gap:8px;min-height:50px;border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:0 15px;background:rgba(255,255,255,.09);color:#fff;font-weight:900;cursor:pointer}
.install-app-btn.available{display:inline-flex}.install-app-btn .ui-icon{width:18px;height:18px}
.pwa-hint{display:none;margin-top:8px;color:#dbe9f1;font-size:11px}.pwa-hint.show{display:block}

/* Global mobile bottom navigation */
.global-bottom-nav,.app-bottom-nav,.bottom-nav,.bottom{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:max(10px,env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  z-index:1000 !important;
  width:min(calc(100vw - 20px),calc(var(--app-max) - 20px)) !important;
  min-height:66px !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  align-items:stretch !important;
  gap:3px !important;
  padding:5px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:22px !important;
  background:rgba(5,39,68,.97) !important;
  box-shadow:0 18px 42px rgba(5,39,68,.34) !important;
  backdrop-filter:blur(18px);
  overflow:hidden;
}
.global-bottom-nav a,.app-bottom-nav a,.bottom-nav a,.bottom a{
  position:relative;height:auto !important;min-height:55px !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:3px !important;
  padding:5px 2px !important;border-radius:16px !important;color:#cbdce7 !important;font-size:10px !important;font-weight:850 !important;background:transparent !important;text-decoration:none !important;
}
.global-bottom-nav a .ui-icon{width:20px;height:20px}
.global-bottom-nav a.active,.app-bottom-nav a.active,.bottom-nav a.active,.bottom a.active{background:rgba(246,118,27,.14) !important;color:#ffb77e !important}
.global-bottom-nav a b{position:absolute;top:5px;right:19%;min-width:18px;height:18px;padding:0 4px;border-radius:99px;display:grid;place-items:center;background:var(--brand-orange);color:var(--brand-navy);font-size:9px}

.toast{position:fixed !important;left:50% !important;bottom:88px !important;transform:translateX(-50%) !important;z-index:1200 !important;max-width:min(calc(100vw - 30px),620px) !important;padding:12px 14px !important;border-radius:15px !important;background:var(--brand-navy) !important;color:#fff !important;box-shadow:var(--brand-shadow) !important}

/* Hide old sidebar-only nav on the narrow app shell when a global footer exists */
.has-global-nav .sidebar,.has-global-nav .dash-sidebar{margin-bottom:4px}

/* Useful app utility blocks */
.page-content{padding:14px 12px 28px}.page-title{margin:0 0 3px;color:var(--brand-navy);font-size:25px;line-height:1.1}.page-subtitle{margin:0 0 14px;color:var(--brand-muted);font-size:13px;line-height:1.45}.info-strip{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:15px;background:var(--brand-green-soft);border:1px solid #cbe7c5;color:#2c7130;font-size:12px;font-weight:800}.empty-state{padding:24px 16px !important;border-radius:22px !important;background:#fff !important;border:1px dashed #c9d6df !important;text-align:center;color:var(--brand-muted)}

/* Desktop intentionally preserves a centered mobile-app presentation */
@media(min-width:761px){
  body{border-left:1px solid rgba(5,39,68,.08);border-right:1px solid rgba(5,39,68,.08)}
  .promo-card{padding:25px 22px !important}
  .deal-card{flex-basis:260px !important}
}

@media(max-width:520px){
  .brand-lockup-copy small{display:none}
  .header-cart span{display:none}
  .promo-card h1{font-size:32px !important}
  .quick-actions{grid-template-columns:repeat(4,1fr) !important}
  .quick-actions a{min-width:0 !important}
  .shop-product-card{grid-template-columns:102px minmax(0,1fr)}
  .shop-product-media{height:112px}
  .app-product-card{grid-template-columns:96px minmax(0,1fr) !important}
  .app-product-img{height:104px !important}
}

@media(max-width:360px){
  .promo-actions{grid-template-columns:1fr !important}
  .quick-actions strong{font-size:10px !important}
  .global-bottom-nav a span{font-size:9px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* Final compatibility overrides for older dashboard markup */
.logo-mark{background:var(--brand-orange) !important;color:var(--brand-navy) !important;box-shadow:none !important}
.nav a,.toplinks a{color:var(--brand-navy) !important;background:#fff !important;border-color:var(--brand-line) !important}
.nav a.active,.toplinks a.active{background:var(--brand-orange-soft) !important;color:var(--brand-orange-dark) !important}
.pager a{background:#fff !important;color:var(--brand-navy) !important;border-color:var(--brand-line) !important}.pager a.active{background:var(--brand-orange) !important;color:var(--brand-navy) !important}
button{border-radius:15px}
button:not(.qty-btn):not(.remove-link):not(.audio-guide-icon){background:var(--brand-orange);color:var(--brand-navy)}
button.danger{background:#fff0ef !important;color:var(--brand-danger) !important;border:1px solid #f0c8c4 !important}
button.approve{background:var(--brand-green) !important;color:var(--brand-navy) !important}
.item{background:#fff !important;border-color:var(--brand-line) !important}.item p,.muted{color:var(--brand-muted) !important}


/* ================================================================
   Responsive application + Admin UI hardening — v5
   Keeps the mobile-first interaction model but uses available desktop
   space instead of rendering the whole app as a narrow phone column.
   ================================================================ */
:root{
  --app-max:1360px;
  --admin-sidebar:220px;
}
html{background:var(--brand-bg) !important}
body{
  max-width:none !important;
  margin:0 !important;
  box-shadow:none !important;
  border:0 !important;
}
.universal-header-row,
.universal-app-header .subpage-heading,
.universal-app-header .universal-search{
  width:min(100%,var(--app-max));
  margin-left:auto;
  margin-right:auto;
}
.app-shell,.mobile-app,.dash-wrap,.checkout-page,.wrap,.app,.container,.admin{
  max-width:var(--app-max) !important;
}

/* Never allow legacy quick-link colour rules to make labels disappear. */
.quick-actions a{
  color:var(--brand-navy) !important;
}
.quick-actions a:visited{color:var(--brand-navy) !important}

/* Admin header / navigation */
.admin-area .universal-app-header{border-radius:0 !important}
.admin-area .admin-section-nav{
  scrollbar-width:none;
}
.admin-area .admin-section-nav::-webkit-scrollbar{display:none}
.admin-area .admin-section-nav a{
  display:flex !important;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.admin-area .admin-section-nav .ui-icon{width:18px;height:18px;flex:0 0 18px}

/* Admin dashboard summary cards */
.admin-area .admin,
.admin-area .app{
  padding:14px 12px 34px !important;
}
.admin-area .grid,
.admin-area .stats{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}
.admin-area .card,
.admin-area .panel,
.admin-area .order-card,
.admin-area .rider-card{
  border:1px solid var(--brand-line) !important;
  background:#fff !important;
  box-shadow:var(--brand-shadow-soft) !important;
}
.admin-area .card h1,
.admin-area .card h2,
.admin-area .panel h1,
.admin-area .panel h2,
.admin-area .order-code{
  color:var(--brand-navy) !important;
}
.admin-area .card small,
.admin-area .card p,
.admin-area .panel p{
  color:var(--brand-muted) !important;
}

/* Dashboard quick management cards: fixes the blank white cards. */
.admin-quick-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.admin-quick-link{
  min-width:0;
  min-height:112px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:7px;
  padding:14px;
  border:1px solid var(--brand-line);
  border-radius:20px;
  background:linear-gradient(145deg,#fff,#f8fbfc);
  color:var(--brand-navy) !important;
  text-decoration:none;
  box-shadow:var(--brand-shadow-soft);
}
.admin-quick-link:hover{border-color:#ffc89f;transform:translateY(-1px)}
.admin-quick-link .admin-quick-icon{
  width:40px;height:40px;display:grid;place-items:center;border-radius:14px;
  background:var(--brand-orange-soft);color:var(--brand-orange-dark);
}
.admin-quick-link:nth-child(3n+2) .admin-quick-icon{background:var(--brand-green-soft);color:var(--brand-green-dark)}
.admin-quick-link:nth-child(3n) .admin-quick-icon{background:#eaf2f8;color:var(--brand-navy)}
.admin-quick-link .ui-icon{width:21px;height:21px}
.admin-quick-link strong{display:block;color:var(--brand-navy) !important;font-size:14px;line-height:1.2}
.admin-quick-link small{display:block;color:var(--brand-muted) !important;font-size:11px;line-height:1.35}

/* Admin content forms and cards */
.admin-area .forms,
.admin-area .forms.two,
.admin-area .forms.edit,
.admin-area .update-form,
.admin-area .wallet-form,
.admin-area .form{
  width:100%;
}
.admin-area .form-two-col{display:grid;grid-template-columns:1fr;gap:9px}
.admin-area .order-card{border-radius:22px !important;padding:14px !important;margin-bottom:12px !important}
.admin-area .order-top{border-color:var(--brand-line) !important}
.admin-area .meta-box,
.admin-area .product-item,
.admin-area .order-box{
  background:var(--brand-surface-2) !important;
  border-color:var(--brand-line) !important;
}
.admin-area .meta-box strong,
.admin-area .product-price{color:var(--brand-navy) !important;overflow-wrap:anywhere}
.admin-area .order-meta{grid-template-columns:1fr !important}
.admin-area .product-item{grid-template-columns:1fr !important}
.admin-area .product-price{text-align:left !important}
.admin-area .actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-area .actions a,
.admin-area .actions button{min-height:42px}

/* Responsive tables become real stacked records on phones: no horizontal page overflow. */
.admin-area .table-wrap{overflow:visible !important;border:0 !important;background:transparent !important;box-shadow:none !important}
.admin-area table.responsive-table{min-width:0 !important;width:100% !important;border-collapse:separate !important;border-spacing:0 10px !important}
@media(max-width:760px){
  .admin-area table.responsive-table thead{display:none !important}
  .admin-area table.responsive-table,
  .admin-area table.responsive-table tbody,
  .admin-area table.responsive-table tr,
  .admin-area table.responsive-table td{display:block !important;width:100% !important}
  .admin-area table.responsive-table tr{
    margin:0 0 10px;
    padding:8px 12px;
    border:1px solid var(--brand-line);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--brand-shadow-soft);
  }
  .admin-area table.responsive-table td{
    min-height:42px;
    display:grid !important;
    grid-template-columns:minmax(86px,34%) minmax(0,1fr) !important;
    gap:10px;
    align-items:center;
    padding:10px 0 !important;
    border-bottom:1px solid #edf2f5 !important;
    overflow-wrap:anywhere;
  }
  .admin-area table.responsive-table td:last-child{border-bottom:0 !important}
  .admin-area table.responsive-table td::before{
    content:attr(data-label);
    color:var(--brand-muted);
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .admin-area table.responsive-table td[colspan]::before{display:none}
}

/* The fixed admin footer is one compact, predictable four-column bar. */
.admin-area .global-bottom-nav{
  width:min(calc(100vw - 16px),640px) !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:4px !important;
  padding:5px !important;
}
.admin-area .global-bottom-nav a{min-width:0 !important;padding:5px 2px !important}
.admin-area .global-bottom-nav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* Tracker must stay usable on a phone. */
.admin-area #map{height:clamp(320px,56vh,620px) !important}
.admin-area .map-wrap{width:100% !important}
.admin-area .rider-card{border-radius:20px !important;padding:14px !important}
.admin-area .meta{display:grid !important;grid-template-columns:1fr !important;gap:7px !important}
.admin-area .wallet-form{display:grid !important;grid-template-columns:1fr !important;gap:8px !important}

/* Small phones */
@media(max-width:390px){
  .admin-area .grid,.admin-area .stats{grid-template-columns:1fr !important}
  .admin-quick-grid{grid-template-columns:1fr !important}
  .admin-quick-link{min-height:88px}
  .admin-area .global-bottom-nav a span{font-size:9px !important}
}

/* Real desktop layout: full responsive workspace, not a tiny phone column. */
@media(min-width:900px){
  .admin-area .admin,
  .admin-area .app{padding:22px 24px 48px !important}
  .admin-area .app-shell.dashboard{
    display:grid !important;
    grid-template-columns:var(--admin-sidebar) minmax(0,1fr) !important;
    align-items:start !important;
    gap:20px !important;
    padding:22px 24px 48px !important;
  }
  .admin-area .admin-section-nav{
    position:sticky !important;
    top:92px !important;
    display:grid !important;
    gap:5px !important;
    overflow:visible !important;
    padding:10px !important;
    border-radius:22px !important;
  }
  .admin-area .admin-section-nav a{
    width:100%;
    min-height:44px;
    white-space:normal !important;
    padding:11px 12px !important;
  }
  .admin-area .grid{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
  .admin-area .stats{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .admin-quick-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .admin-area .order-meta{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .admin-area .product-item{grid-template-columns:1fr auto !important}
  .admin-area .product-price{text-align:right !important}
  .admin-area .update-form{grid-template-columns:1fr 1fr minmax(200px,1.35fr) auto !important}
  .admin-area .wallet-form{grid-template-columns:140px 160px minmax(220px,1fr) auto !important}
  .admin-area .meta{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .admin-area .form-two-col{grid-template-columns:1fr 1fr}
  .admin-area .table-wrap{overflow:auto !important;border:1px solid var(--brand-line) !important;background:#fff !important;box-shadow:var(--brand-shadow-soft) !important}
  .admin-area table.responsive-table{border-collapse:collapse !important;border-spacing:0 !important;min-width:780px !important}
  .admin-area table.responsive-table tr{box-shadow:none}
  .admin-area .global-bottom-nav{width:620px !important}
}

/* General desktop presentation across the storefront/customer/rider areas. */
@media(min-width:900px){
  .mobile-app,.page-content,.checkout-page{padding-left:24px !important;padding-right:24px !important}
  .shop-product-grid,.app-product-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .checkout-grid{grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr) !important;align-items:start}
}

/* =========================================================
   v6 admin CRUD / product media controls
   ========================================================= */
.admin-editor-card{overflow:visible !important}
.admin-edit-form .input{width:100%}
.field-label{display:block;font-size:12px;font-weight:900;color:var(--brand-navy);margin-bottom:6px}
.field-help{display:block;color:var(--brand-muted);font-size:11px;line-height:1.5;margin-top:5px}
.check-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:10px 12px;border:1px solid var(--brand-line);border-radius:16px;background:var(--brand-surface-2);font-weight:800;color:var(--brand-muted)}
.check-row input{width:20px;height:20px;min-height:auto;flex:0 0 20px;accent-color:var(--brand-orange)}
.readonly-info{padding:12px 14px;border:1px solid #cfe4ee;border-radius:16px;background:#f3f9fc;color:var(--brand-muted);font-size:12px;line-height:1.5}
.readonly-info strong{color:var(--brand-navy)}
.product-image-editor{display:grid;grid-template-columns:104px minmax(0,1fr);gap:13px;align-items:start;padding:12px;border:1px solid var(--brand-line);border-radius:20px;background:var(--brand-surface-2)}
.product-image-preview-wrap{width:104px;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--brand-line);display:grid;place-items:center}
.product-image-preview{display:block;width:100%;height:100%;object-fit:cover}
.product-image-controls{min-width:0}
.file-input{padding:10px !important;min-height:48px !important;background:#fff !important}
.file-input::file-selector-button{border:0;border-radius:12px;padding:9px 12px;margin-right:9px;background:var(--brand-orange);color:var(--brand-navy);font-weight:900;cursor:pointer}
.admin-product-thumb{width:56px;height:56px;display:block;object-fit:cover;border-radius:14px;border:1px solid var(--brand-line);background:#fff}
.admin-row-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.admin-row-actions form{margin:0}
.admin-row-actions .btn,.admin-mini-btn{min-height:38px !important;padding:8px 11px !important;font-size:12px !important;width:auto !important}

@media(max-width:520px){
  .product-image-editor{grid-template-columns:82px minmax(0,1fr);padding:10px;gap:10px}
  .product-image-preview-wrap{width:82px;border-radius:16px}
  .admin-area table.responsive-table td[data-label="Image"]{grid-template-columns:86px minmax(0,1fr) !important}
}

@media(min-width:900px){
  .admin-editor-card{max-width:none}
  .product-image-editor{grid-template-columns:130px minmax(0,1fr)}
  .product-image-preview-wrap{width:130px}
  .admin-edit-form{max-width:980px}
}