/* ===========================================================
   JesterCare Delivery — Design System
   Palette pulls from the jester's own motley: deep plum stage-
   curtain, gold bell, orange accent — run through a disciplined,
   grown-up filter instead of a costume-shop one.
   =========================================================== */

/* ===========================================================
   Auth Page Styles (Register, Login)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,450;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Payment Status Styles */
.payment-status {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-top: 8px;
}

.payment-status.pending {
  background: #FFF3CD;
  border: 1px solid #FFC107;
  color: #856404;
}

.payment-status.completed {
  background: #D4EDDA;
  border: 1px solid #28A745;
  color: #155724;
}

.payment-status.failed {
  background: #F8D7DA;
  border: 1px solid #DC3545;
  color: #721C24;
}

.payment-status.processing {
  background: #D1ECF1;
  border: 1px solid #17A2B8;
  color: #0C5460;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.payment-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

:root{
  --plum-900:#241131;
  --plum-800:#2E1A3D;
  --plum-700:#3E2451;
  --plum-100:#EDE6F2;
  --gold-500:#E3A93E;
  --gold-300:#F0C876;
  --orange-500:#F97316;
  --orange-600:#EA580C;
  --orange-700:#C2410C;
  --orange-100:#FFEDD5;
  --teal-600:#1F6F63;
  --red:#C24B3F;
  --ink:#201526;
  --paper:#FAF7F3;
  --paper-dim:#F1EBE3;
  --line:rgba(32,21,38,0.12);
  --line-soft:rgba(32,21,38,0.07);

  --header-height:64px;
  --top-bar-height:36px;

  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-s:6px;
  --radius-m:14px;
  --radius-l:28px;

  --shadow-card: 0 1px 2px rgba(32,21,38,0.06), 0 8px 24px -12px rgba(32,21,38,0.18);
  --shadow-pop: 0 12px 32px -8px rgba(46,26,61,0.35);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-top:100px;
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:600;letter-spacing:-0.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange-600);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;
  background:var(--orange-500);
  transform:rotate(45deg);
  display:inline-block;
  border-radius:1px;
}

:focus-visible{
  outline:2.5px solid var(--orange-500);
  outline-offset:3px;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px;width:100%;box-sizing:border-box}

/* Skip link (accessibility) */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:16px;top:16px;width:auto;height:auto;z-index:9999;
  padding:12px 20px;background:var(--plum-900);color:#fff;
  font-weight:600;font-size:0.9rem;border-radius:var(--radius-s);
  text-decoration:none;box-shadow:var(--shadow-pop);
}

/* ---- Cleaning Services Card Layout ---- */
.cleaning-services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(310px, 1fr));
  gap:20px;
}

.cleaning-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:24px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cleaning-card:hover{
  border-color:var(--orange-600);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(249,115,22,0.08);
}
.cleaning-card.featured{
  border:1.5px solid var(--orange-700);
  padding-top:30px;
}
.cleaning-card .popular-tag{
  position:absolute;
  top:-11px;
  left:20px;
  background:var(--orange-700);
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.03em;
  padding:4px 10px;
  border-radius:20px;
}

.cleaning-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.cleaning-card .icon-badge{
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--orange-100);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:22px;
  color:var(--orange-700);
}

.cleaning-card .price-pill{
  font-size:12px;
  font-weight:600;
  padding:6px 10px;
  border-radius:20px;
  white-space:nowrap;
  line-height:1.3;
}
.cleaning-card .price-pill.fixed{
  background:#E9F2E4;
  color:#2E5321;
}
.cleaning-card .price-pill.quote{
  background:#F2E9DC;
  color:#6B4E23;
}

.cleaning-card h3{
  font-size:18px;
  margin:0 0 5px;
}
.cleaning-card .desc{
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.5;
  margin:0 0 16px;
  min-height:38px;
}

.cleaning-card .feature-list{
  list-style:none;
  padding:0;
  margin:0 0 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 12px;
  flex-grow:1;
}
.cleaning-card .feature-list li{
  font-size:13px;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:6px;
}
.cleaning-card .feature-list li::before{
  content:"✓";
  color:var(--orange-600);
  font-weight:600;
  flex-shrink:0;
}

.cleaning-card .card-actions{
  display:flex;
  gap:10px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.cleaning-card .btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13.5px;
  font-weight:600;
  padding:11px 14px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid var(--line);
  cursor:pointer;
  transition:background .15s ease;
}
.cleaning-card .btn-ghost{
  background:transparent;
  color:var(--ink);
}
.cleaning-card .btn-ghost:hover{
  background:#F0F2EF;
}
.cleaning-card .btn-wa{
  background:#25D366;
  color:#fff;
  border-color:#25D366;
}
.cleaning-card .btn-wa:hover{
  background:#1FBE5A;
}

@media (max-width:480px){
  .cleaning-card .feature-list{
    grid-template-columns:1fr;
  }
}

/* Sticky site chrome — top bar + nav stay fixed together */
.site-top{
  position:fixed;top:0;z-index:50;
  width:100%;
}

/* ---------- Top Bar ---------- */
.top-bar{
  background:var(--orange-600);
  color:#fff;
  padding:8px 24px;
  font-size:0.8rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.top-bar-left{
  display:flex;
  gap:24px;
}
.top-bar-item{
  display:flex;
  align-items:center;
  gap:6px;
}
.top-bar-right{
  display:flex;
  gap:20px;
}
.top-bar-contact{
  display:flex;
  align-items:center;
  gap:6px;
}
.top-bar-contact a{
  color:#fff;
  text-decoration:none;
}

/* ---------- Header / Nav ---------- */
.site-header{
  background:#ffffff;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  position:relative;
  z-index:210;
}
.nav{
  max-width:1180px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  min-height:var(--header-height);
}
.nav-links{
  display:flex;align-items:center;gap:28px;
  margin-left:auto;margin-right:12px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-weight:700;font-size:1.28rem;
  color:var(--plum-800);
  text-decoration:none;
}
.brand-logo{
  width:100px;height:100px;
  object-fit:contain;
  border-radius:8px;
  margin: -16px 0;
}
.brand-text{
  display:flex;flex-direction:column;
  line-height:1.2;
}
.brand .dot{
  width:12px;height:12px;background:var(--gold-500);
  transform:rotate(45deg);border-radius:2px;flex-shrink:0;
  box-shadow:0 0 0 3px var(--plum-100);
}
.user-profile{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;
  background:var(--plum-100);
  border-radius:100px;
}
.user-name{
  font-size:0.85rem;font-weight:600;
  color:var(--plum-800);
}
.nav-links a{
  text-decoration:none;font-size:0.94rem;font-weight:500;
  color:var(--ink);opacity:0.72;
  position:relative;padding:8px 0;
  white-space:nowrap;
}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1;color:var(--plum-800);font-weight:600}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--orange-500);
}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-cart-mobile{display:none}
.cart-icon{
  display:flex;align-items:center;justify-content:center;
  padding:10px;min-width:44px;min-height:44px;
  color:var(--ink);
  text-decoration:none;
  border-radius:50%;
  transition:background 0.2s;
  position:relative;
}
.cart-icon:hover{
  background:var(--plum-100);
  color:var(--orange-600);
}
.cart-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  background:var(--orange-600);
  color:#fff;
  font-size:0.7rem;
  font-weight:700;
  min-width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
}
.nav-toggle{
  display:none;background:none;border:none;
  padding:10px;cursor:pointer;
  position:relative;z-index:220;
  min-width:44px;min-height:44px;
  flex-shrink:0;margin-left:auto;
  align-items:center;justify-content:center;
}
.nav-toggle .close-icon{
  stroke:var(--ink);
  transition:opacity 0.3s ease, stroke 0.3s ease;
}
.nav-toggle:hover .close-icon{
  stroke:var(--orange-600);
}
.nav-backdrop{
  position:fixed;inset:0;
  background:rgba(32,21,38,0.45);
  z-index:190;
}
.nav-backdrop[hidden]{display:none}
.nav-backdrop.active{display:block}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:0.94rem;
  padding:12px 22px;border-radius:100px;
  border:1px solid transparent;
  text-decoration:none;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--orange-500);color:#fff;box-shadow:var(--shadow-pop)}
.btn-primary:hover{background:var(--orange-600)}
.btn-secondary{background:var(--plum-100);color:var(--plum-800);border-color:var(--plum-200)}
.btn-secondary:hover{background:var(--plum-200);border-color:var(--plum-300)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--plum-800);background:var(--plum-100)}
.btn-dark{background:var(--plum-800);color:#fff}
.btn-dark:hover{background:var(--plum-900)}
.btn-sm{padding:8px 16px;font-size:0.85rem}
.btn-block{width:100%}
.btn-wa{background:#25D366;color:#0b3d1e}
.btn-wa:hover{background:#1fbd59}

/* ---------- Hero ---------- */
.hero{
  background:var(--paper);
  color:var(--ink);
  padding:24px 0 40px;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  align-items:center;
  max-width:1180px;margin:0 auto;padding:0 24px;
  position:relative;z-index:2;
}
.hero-content{
  display:flex;flex-direction:column;gap:24px;
}
.delivering-to{
  display:flex;align-items:center;gap:12px;
  font-size:0.85rem;
  padding:10px 18px;
  background:var(--plum-100);
  border-radius:100px;
  width:fit-content;
}
.delivering-label{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--orange-600);
}
.delivering-location{
  font-weight:600;
  color:var(--plum-800);
}
.delivering-change{
  color:var(--orange-600);
  cursor:pointer;
  text-decoration:underline;
}
.hero-eyebrow{color:var(--gold-300)}
.hero-eyebrow::before{background:var(--gold-500)}
.hero h1{
  font-size:clamp(2rem, 3.5vw, 2.8rem);
  line-height:1.1;
  margin-top:8px;
  color:var(--plum-800);
}
.hero h1 em{
  font-style:italic;font-weight:500;color:var(--gold-300);
}
.hero-sub{
  font-size:1.05rem;
  line-height:1.6;
  color:var(--ink);
  opacity:0.9;
  max-width:480px;
  font-weight:500;
}
.hero-actions{
  display:flex;gap:16px;flex-wrap:wrap;
}
.hero-stats{
  display:flex;gap:24px;
  padding:16px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.hero-stats div{
  display:flex;flex-direction:column;gap:4px;
}
.hero-stats strong{
  font-size:1.2rem;
  color:var(--orange-600);
}
.hero-stats span{
  font-size:0.85rem;
  opacity:0.8;
}
.order-notification{
  display:flex;align-items:center;gap:8px;
  font-size:0.8rem;
  color:var(--orange-600);
  padding:8px 16px;
  background:var(--plum-100);
  border-radius:8px;
  width:fit-content;
}
.hero-image-wrapper{
  position:relative;
  display:flex;justify-content:center;align-items:center;
}
.hero-image{
  width:100%;
  max-width:450px;
  height:450px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 30%;
  border:8px solid var(--plum-100);
  animation:float 6s ease-in-out infinite;
}
.hero-secondary-img{
  position:absolute;
  bottom:-20px;
  left:-30px;
  width:120px;
  height:auto;
  border-radius:12px;
  z-index:3;
  animation:bounce 2s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-15px);}
}
.hero-content > *{
  animation:fadeInUp 0.8s ease forwards;
  opacity:0;
}
.hero-content > *:nth-child(1){animation-delay:0.1s;}
.hero-content > *:nth-child(2){animation-delay:0.2s;}
.hero-content > *:nth-child(3){animation-delay:0.3s;}
.hero-content > *:nth-child(4){animation-delay:0.4s;}
.hero-content > *:nth-child(5){animation-delay:0.5s;}
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.deliveries-card{
  position:absolute;
  top:20px;right:20px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  padding:20px;
  border-radius:16px;
  box-shadow:var(--shadow-pop);
  text-align:center;
  min-width:140px;
}
.deliveries-badge{
  font-family:var(--font-mono);
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--orange-600);
  margin-bottom:8px;
}
.deliveries-count{
  font-size:2.5rem;
  font-weight:700;
  color:var(--plum-800);
  line-height:1;
}
.deliveries-label{
  font-size:0.8rem;
  color:var(--ink);
  margin-top:4px;
}

/* Route / pulse signature element */
.route-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-l);
  padding:28px 26px 30px;
  backdrop-filter:blur(6px);
}
.route-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.route-card-head span{font-family:var(--font-mono);font-size:0.72rem;color:rgba(255,255,255,0.55);letter-spacing:0.06em}
.route-card-head strong{font-family:var(--font-mono);font-size:0.78rem;color:var(--gold-300);letter-spacing:0.06em}

.route{position:relative;padding-left:6px}
.route-line{
  position:absolute;left:15px;top:10px;bottom:10px;width:2px;
  background:rgba(255,255,255,0.18);
}
.route-line-fill{
  position:absolute;left:0;top:0;width:100%;
  background:linear-gradient(var(--gold-500), var(--orange-500));
  height:0%;
  animation:fillRoute 3.6s ease-in-out infinite;
}
@keyframes fillRoute{
  0%{height:4%}
  50%{height:96%}
  100%{height:4%}
}
.route-step{position:relative;display:flex;gap:18px;padding-bottom:26px}
.route-step:last-child{padding-bottom:0}
.route-node{
  width:32px;height:32px;border-radius:50%;
  background:var(--plum-800);border:2px solid rgba(255,255,255,0.25);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:0.85rem;z-index:1;
}
.route-step.is-active .route-node{
  background:var(--orange-500);border-color:var(--orange-500);
  box-shadow:0 0 0 5px rgba(249,115,22,0.22);
}
.route-step-body strong{display:block;font-size:0.95rem;font-weight:600;color:#fff}
.route-step-body span{font-size:0.8rem;color:rgba(255,255,255,0.55);font-family:var(--font-mono)}

.hero-wave{display:block;width:100%;height:auto;margin-top:40px}

/* ---------- Sections ---------- */
section{padding:48px 0}
.section-head{max-width:640px;margin-bottom:52px}
.section-head h2{font-size:clamp(1.9rem,3vw,2.5rem);margin-top:14px}
.section-head p{margin-top:14px;color:rgba(32,21,38,0.85);font-size:1.05rem;font-weight:500}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center p{max-width:600px;margin-left:auto;margin-right:auto}

.bg-dim{background:var(--paper-dim)}
.bg-plum{background:var(--plum-900);color:#fff}
.bg-plum .section-head p{color:rgba(255,255,255,0.68)}
.bg-plum .eyebrow{color:var(--gold-300)}
.bg-plum .eyebrow::before{background:var(--gold-500)}

/* ---------- Service cards ---------- */
.service-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.service-row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px 30px;
}
.service-card{
  background:transparent;border:1px solid transparent;
  border-radius:var(--radius-m);padding:16px;
  transition:transform .18s ease;
  position:relative;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.service-card:hover{transform:translateY(-4px)}
.service-img{
  width:85px;height:85px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:12px;
  background:var(--plum-100);
}
.service-card h4{
  font-size:1.2rem;
  margin-bottom:8px;
  color:var(--plum-800);
  font-weight:600;
}
.service-card p{
  font-size:1rem;
  color:rgba(32,21,38,0.75);
  margin-bottom:12px;
  line-height:1.4;
  font-weight:500;
}
.service-card .badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:5px 12px;
  background:var(--orange-500);
  color:#fff;
  border-radius:100px;
  margin-top:auto;
}
.service-card .icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;margin-bottom:16px;
  background:var(--plum-100);color:var(--plum-800);
}
.service-card h3{font-size:1.08rem;margin-bottom:8px}
.service-card .tag{
  position:absolute;top:18px;right:18px;
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.06em;
  background:var(--gold-500);color:var(--plum-900);
  padding:3px 8px;border-radius:100px;font-weight:600;text-transform:uppercase;
}
.service-card.new{border-color:var(--orange-500)}

/* ---------- Service detail list (services.html) ---------- */
.service-detail{
  display:flex;gap:24px;padding:30px 0;border-bottom:1px solid var(--line-soft);
  scroll-margin-top:120px;
}
.service-detail:first-child{padding-top:0}
.service-detail-num{
  font-family:var(--font-mono);font-size:0.8rem;color:var(--orange-600);
  flex-shrink:0;width:36px;padding-top:4px;
}
.service-detail-body{flex:1}
.service-detail-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.service-detail-head h3{font-size:1.28rem;display:flex;align-items:center;gap:10px}
.service-detail-head .tag{
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.06em;
  background:var(--gold-500);color:var(--plum-900);
  padding:3px 8px;border-radius:100px;font-weight:600;text-transform:uppercase;
}
.service-detail-head .icon{
  width:40px;height:40px;border-radius:10px;background:var(--plum-100);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;
}
.service-detail p{color:rgba(32,21,38,0.66);max-width:60ch;margin-top:10px;font-size:0.96rem}

/* ---------- Steps (real sequence, numbering justified) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step{position:relative;padding:0 22px 0 0}
.step:not(:last-child)::after{
  content:"";position:absolute;top:22px;right:0;left:56px;height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
}
.step-num{
  counter-increment:step;
  font-family:var(--font-mono);font-size:0.85rem;color:var(--orange-600);
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--orange-500);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  background:var(--paper);
}
.step-num::before{content:counter(step, decimal-leading-zero)}
.step h3{font-size:1.03rem;margin-bottom:8px}
.step p{font-size:0.87rem;color:rgba(32,21,38,0.62)}

/* ---------- WhatsApp banner ---------- */
.wa-banner{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;background:var(--plum-900);color:#fff;
  border-radius:var(--radius-l);padding:44px 48px;
  flex-wrap:wrap;
}
.wa-banner h3{font-size:1.7rem;max-width:420px}
.wa-banner p{color:rgba(255,255,255,0.68);margin-top:10px;max-width:420px}
.wa-icon{
  width:56px;height:56px;border-radius:16px;background:#25D366;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* ---------- Coverage ---------- */
.coverage-list{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px 24px;
  margin-top:8px;
}
.coverage-list li{
  display:flex;justify-content:space-between;
  font-size:0.92rem;padding:10px 0;
  border-bottom:1px solid var(--line-soft);
}
.coverage-list li span{font-family:var(--font-mono);font-size:0.76rem;color:var(--teal-600)}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi-card{
  background:#fff;border-radius:var(--radius-m);padding:26px;
  border:1px solid var(--line-soft);box-shadow:var(--shadow-card);
}
.testi-card p{font-size:0.95rem;color:var(--ink);font-style:italic}
.testi-who{display:flex;align-items:center;gap:10px;margin-top:18px}
.testi-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--gold-300);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:var(--plum-900);font-size:0.9rem;
}
.testi-who strong{display:block;font-size:0.88rem}
.testi-who span{font-size:0.76rem;color:rgba(32,21,38,0.55)}

/* ---------- Footer ---------- */
footer{background:var(--plum-900);color:rgba(255,255,255,0.72);padding:64px 0 28px;text-align:left}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;text-align:left}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin-bottom:14px;justify-content:flex-start}
.footer-brand .dot{width:11px;height:11px;background:var(--gold-500);transform:rotate(45deg);border-radius:2px}
.footer-grid p{font-size:0.88rem;line-height:1.6;max-width:32ch}
.footer-col h4{color:#fff;font-family:var(--font-body);font-size:0.82rem;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.footer-col li{margin-bottom:10px;font-size:0.9rem}
.footer-col a{text-decoration:none;opacity:0.78}
.footer-col a:hover{opacity:1}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);margin-top:48px;padding-top:24px;
  display:flex;justify-content:space-between;font-size:0.8rem;color:rgba(255,255,255,0.5);
  flex-wrap:wrap;gap:10px;
}

/* Center footer on phones only */
@media (max-width: 768px) {
  footer{text-align:center !important}
  .footer-grid{text-align:center !important}
  .footer-brand{justify-content:center !important}
  .footer-grid p{max-width:none;margin:0 auto}
  .footer-bottom{justify-content:center;text-align:center}
}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed;bottom:24px;right:24px;z-index:60;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -6px rgba(0,0,0,0.35);
  text-decoration:none;
  animation:pulseWa 2.6s ease-in-out infinite;
}
@keyframes pulseWa{
  0%,100%{box-shadow:0 10px 24px -6px rgba(0,0,0,0.35), 0 0 0 0 rgba(37,211,102,0.5)}
  50%{box-shadow:0 10px 24px -6px rgba(0,0,0,0.35), 0 0 0 10px rgba(37,211,102,0)}
}

/* ---------- Order builder ---------- */
.order-layout{
  display:grid;grid-template-columns:1.35fr 1fr;gap:36px;align-items:start;
}
.order-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-l);
  padding:36px 34px;box-shadow:var(--shadow-card);
}
.order-card h2{font-size:1.3rem}
.field{margin-top:20px}
.field label{
  display:block;font-size:0.82rem;font-weight:600;margin-bottom:8px;color:var(--plum-800);
}
.field .hint{font-size:0.78rem;color:rgba(32,21,38,0.5);margin-top:6px;display:block}
.location-field-row{display:flex;gap:8px;align-items:stretch}
.location-field-row input{flex:1}
.location-field-row .btn{white-space:nowrap;align-self:stretch}
#location-status.location-ok{color:#166534}
#location-status.location-error{color:#dc2626}
.field input[type="text"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="time"],
.field input[type="number"],
.field select,
.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-s);
  border:1.5px solid var(--line);background:var(--paper);
  font-size:0.94rem;color:var(--ink);
}
.field textarea{resize:vertical;min-height:80px}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--orange-500);outline:none;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.radio-group{display:flex;gap:10px;flex-wrap:wrap}
.radio-chip{
  border:1.5px solid var(--line);border-radius:100px;padding:9px 16px;
  font-size:0.86rem;cursor:pointer;user-select:none;transition:all .15s ease;
}
.radio-chip input{display:none}
.radio-chip:has(input:checked){
  background:var(--plum-800);color:#fff;border-color:var(--plum-800);
}
.conditional-section{
  border-top:1px dashed var(--line);margin-top:24px;padding-top:6px;
}
.item-list{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.item-row{display:grid;grid-template-columns:1fr 90px 36px;gap:10px;align-items:center}
.item-row input{margin:0}
.item-remove{
  width:36px;height:36px;border-radius:var(--radius-s);border:1.5px solid var(--line);
  background:#fff;color:var(--orange-600);font-size:1.1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.item-remove:hover{background:var(--orange-500);color:#fff;border-color:var(--orange-500)}
.add-item-btn{
  margin-top:12px;background:none;border:1.5px dashed var(--line);
  border-radius:var(--radius-s);padding:10px 16px;font-size:0.86rem;font-weight:600;
  color:var(--plum-800);width:100%;
}
.add-item-btn:hover{border-color:var(--plum-800);background:var(--plum-100)}

.order-summary{
  position:sticky;top:calc(var(--header-height) + 16px);
  background:var(--plum-900);color:#fff;border-radius:var(--radius-l);
  padding:30px 28px;
}
.order-summary h3{font-size:1.1rem;color:#fff}
.order-summary .summary-service{
  font-family:var(--font-mono);font-size:0.76rem;color:var(--gold-300);
  margin-top:6px;letter-spacing:0.04em;
}
.summary-list{margin-top:20px;display:flex;flex-direction:column;gap:10px;min-height:24px}
.summary-list .empty{color:rgba(255,255,255,0.45);font-size:0.86rem;font-style:italic}
.summary-row{
  display:flex;justify-content:space-between;font-size:0.9rem;
  border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:8px;
}
.summary-row span:last-child{color:rgba(255,255,255,0.6);font-family:var(--font-mono);font-size:0.82rem}
.summary-meta{margin-top:18px;display:flex;flex-direction:column;gap:6px;font-size:0.84rem;color:rgba(255,255,255,0.68)}
.summary-meta strong{color:#fff;font-weight:600}
.order-summary .btn{margin-top:24px}
.order-note{
  margin-top:14px;font-size:0.78rem;color:rgba(255,255,255,0.5);line-height:1.5;
}

@media (max-width:980px){
  .order-layout{grid-template-columns:1fr}
  .order-summary{position:static}
  .field-row{grid-template-columns:1fr}
}

/* ---------- Marketplace ---------- */
.mp-tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:44px;
  border-bottom:1px solid var(--line);padding-bottom:0;
  justify-content:center;
}
.mp-tab{
  background:none;border:none;padding:12px 4px;margin-right:24px;
  font-size:0.94rem;font-weight:600;color:rgba(32,21,38,0.5);
  position:relative;cursor:pointer;min-height:44px;
}
.mp-tab:focus-visible{outline:2.5px solid var(--orange-500);outline-offset:2px;border-radius:var(--radius-s)}
.mp-tab.active{color:var(--plum-800)}
.mp-tab.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange-500);
}
.mp-panel{display:none}
.mp-panel.active{display:block}

.deal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.deal-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;
  position:relative;overflow:hidden;padding:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.deal-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.deal-media{
  position:relative;height:160px;overflow:hidden;
}
.deal-img{
  width:100%;height:140px;object-fit:contain;display:block;
  padding:10px 12px 28px;
}
.deal-cat-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--font-mono);font-size:0.58rem;letter-spacing:0.06em;
  text-transform:uppercase;background:#2563eb;color:#fff;
  padding:4px 10px;border-radius:100px;font-weight:700;
}
.deal-media-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:28px 12px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,0.72));
}
.deal-media-overlay h4{
  font-size:0.95rem;font-weight:700;color:#fff;margin:0;line-height:1.25;
}
.deal-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.deal-price-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.deal-price{display:flex;flex-direction:column;line-height:1.1}
.deal-currency{font-family:var(--font-mono);font-size:0.72rem;font-weight:700;color:#111}
.deal-price strong{font-family:var(--font-mono);font-size:1.45rem;font-weight:800;color:#111;letter-spacing:-0.02em}
.deal-rating{display:flex;align-items:center;gap:4px;flex-shrink:0;padding-top:2px}
.deal-stars{color:#f5b301;font-size:0.72rem;letter-spacing:-1px}
.deal-reviews{font-size:0.72rem;color:#888;font-weight:500}
.deal-desc{font-size:0.8rem;color:#666;line-height:1.45;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.deal-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:2px}
.deal-meta-item{font-size:0.72rem;color:#555;display:inline-flex;align-items:center;gap:3px}
.deal-tag{
  font-size:0.65rem;font-weight:700;text-transform:capitalize;
  background:#dcfce7;color:#166534;padding:3px 9px;border-radius:100px;margin-left:auto;
}
.btn-deal-order{
  background:var(--orange-500);color:#fff;border:none;border-radius:10px;
  padding:11px 16px;font-size:0.88rem;font-weight:700;margin-top:6px;
  box-shadow:0 4px 12px rgba(249,115,22,0.25);
}
.btn-deal-order:hover{background:var(--orange-600);color:#fff}
.deal-card-simple{padding:20px;gap:10px}
.deal-card-simple h4{font-size:1.02rem;font-weight:600;color:#1a1a1a;margin-bottom:4px}
.deal-card-simple p{font-size:0.85rem;color:#333;flex:1;line-height:1.4}
.deal-card-simple .deal-price{display:flex;align-items:baseline;gap:8px;margin-top:auto;flex-direction:row}
.deal-card-simple .deal-price strong{font-size:1.15rem}
.deal-eta{font-family:var(--font-mono);font-size:0.74rem;color:#0066cc;margin-top:8px;display:block}

.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.partner-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-m);
  padding:22px;box-shadow:var(--shadow-card);
  min-height:180px;
  display:flex;flex-direction:column;
}
.partner-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.partner-card h4{font-size:1.05rem;font-weight:600;color:var(--plum-800);margin-bottom:4px}
.partner-card .type{font-family:var(--font-mono);font-size:0.72rem;color:var(--orange-600);display:block;margin:4px 0 10px}
.partner-card p{font-size:0.86rem;color:rgba(32,21,38,0.62);flex:1;line-height:1.4}
.partner-card ul{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.partner-card li{font-size:0.82rem;color:rgba(32,21,38,0.55);padding-left:16px;position:relative}
.partner-card li::before{content:"◇";position:absolute;left:0;color:var(--gold-500);font-size:0.7rem;top:2px}
.partner-price{
  font-family:var(--font-mono);font-size:0.82rem;color:var(--plum-800);
  background:var(--paper-dim);padding:8px 12px;border-radius:var(--radius-s);margin-top:14px;display:block;
}

.mp-bulk{
  margin-top:28px;display:flex;justify-content:space-between;align-items:center;
  background:var(--plum-100);border-radius:var(--radius-m);padding:22px 26px;flex-wrap:wrap;gap:14px;
}
.mp-bulk p{font-size:0.88rem;color:rgba(32,21,38,0.7)}

@media (max-width:980px){
  .deal-grid{grid-template-columns:repeat(2,1fr)}
  .partner-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .partner-grid{grid-template-columns:1fr}
  .deal-card-simple{padding:16px}
  .deal-media{height:150px}
  .deal-img{height:130px}
  .deal-price strong{font-size:1.2rem}
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{background:var(--plum-900);color:#fff;padding:56px 0 48px}
.page-hero.page-hero-bg{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.page-hero.page-hero-bg::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(36, 17, 49, 0.85);
  z-index: 1;
}
.page-hero.page-hero-bg > .wrap{
  position: relative;
  z-index: 2;
}
.page-hero h1{font-size:clamp(2rem,3.6vw,2.8rem);margin-top:14px}
.page-hero p{color:rgba(255,255,255,0.7);margin-top:14px;max-width:56ch}
.breadcrumb{font-family:var(--font-mono);font-size:0.76rem;color:rgba(255,255,255,0.5)}
.breadcrumb a{color:rgba(255,255,255,0.75);text-decoration:none}

/* ---------- Utility ---------- */
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.center{text-align:center}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .service-row{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr;gap:28px}
  .step:not(:last-child)::after{display:none}
  .testi-grid{grid-template-columns:1fr}
  .coverage-list{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .wa-banner{padding:32px;flex-direction:column;align-items:flex-start}
  .section-head h2{font-size:clamp(1.5rem,4vw,2rem)}
  section{padding:72px 0}
}
@media (max-width:600px){
  .service-grid{grid-template-columns:1fr}
  .service-row{grid-template-columns:repeat(2,1fr);gap:12px;padding:0 16px 24px}
  .footer-grid{grid-template-columns:1fr}
  .coverage-list{grid-template-columns:1fr}
  .hero{padding:32px 0 48px}
  section{padding:56px 0}
  .wrap{padding:0 16px}
  .page-hero{padding:40px 0 36px}
  .wa-banner{padding:24px}
  .wa-banner h3{font-size:1.35rem}
  .service-card h4{font-size:1rem}
  .service-card p{font-size:0.88rem}
  .service-img{width:68px;height:68px}
  .service-detail{flex-direction:column;gap:12px;padding:24px 0}
  .service-detail-head{flex-direction:column;align-items:flex-start}
  .item-row{grid-template-columns:1fr 72px 44px}
  .order-card{padding:24px 20px}
  .field input[type="text"],
  .field input[type="tel"],
  .field input[type="date"],
  .field input[type="time"],
  .field input[type="number"],
  .field select,
  .field textarea{font-size:16px}
}

@media (max-width:1100px){
  .nav-links{gap:18px}
  .nav-links a{font-size:0.88rem}
}
@media (min-width:901px){
  .nav-actions .cart-icon:not(.nav-cart-mobile){display:flex}
  .nav-cart-mobile{display:none}
}
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
  .nav-actions .btn-nav-signin{padding:8px 14px;font-size:0.8rem}
  .nav-actions .cart-icon:not(.nav-cart-mobile){display:none}
  .nav-cart-mobile{display:flex;align-items:center;justify-content:center;padding:8px;min-width:44px;min-height:44px;color:var(--ink);text-decoration:none;position:relative;border-radius:50%;transition:background 0.2s;}
  .nav-cart-mobile svg{width:24px;height:24px;}
  .nav-cart-mobile .cart-badge{top:-2px;right:-2px;}
  .nav-cart-mobile:hover{background:var(--plum-100);color:var(--orange-600);}
  .brand{font-size:1.05rem;min-width:0;flex:1;display:flex;align-items:center;gap:8px;}
  .nav-toggle{padding:8px;min-width:44px;min-height:44px}
  .nav-toggle .hamburger-icon{width:24px;height:24px;max-width:24px;max-height:24px;object-fit:contain}
  .nav-toggle .close-icon{width:24px;height:24px}
  .brand-text{
    display:none;
  }

  /* Review Popup Modal Styles */
  .review-popup {
    max-width: 450px;
    width: 90%;
    background: #fff;
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: slideUp 0.3s ease;
  }

  .review-popup .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
  }

  .review-popup .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--plum-900);
  }

  .review-question {
    font-size: 1rem;
    color: var(--plum-900);
    margin-bottom: 16px;
    text-align: center;
  }

  .star-rating {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
  }

  .star-btn {
    background: none;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    color: #ccc;
    transition: color 0.2s ease, transform 0.1s ease;
    padding: 0;
    line-height: 1;
  }

  .star-btn:hover {
    transform: scale(1.1);
  }

  .star-btn.active {
    color: #FFD700;
  }

  #review-comment {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    margin-bottom: 12px;
  }

  #review-comment:focus {
    outline: none;
    border-color: var(--plum-700);
    box-shadow: 0 0 0 3px rgba(62, 36, 81, 0.1);
  }

  .review-timer {
    text-align: center;
    font-size: 0.85rem;
    color: var(--plum-800);
    margin-bottom: 16px;
  }

  .review-timer span {
    font-weight: 600;
    color: var(--plum-700);
  }

  .review-popup .modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }

  .review-popup .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .review-popup .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .review-popup .btn-secondary {
    background: var(--line-soft);
    color: var(--plum-900);
    border: none;
  }

  .review-popup .btn-secondary:hover:not(:disabled) {
    background: var(--line);
  }

  .review-popup .btn-primary {
    background: var(--plum-700);
    color: white;
    border: none;
  }

  .review-popup .btn-primary:hover:not(:disabled) {
    background: var(--plum-800);
  }

  /* Password Warning Modal Styles */
  .password-warning {
    max-width: 450px;
    width: 90%;
    background: #fff;
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: slideUp 0.3s ease;
  }

  .password-warning .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
  }

  .password-warning .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #C24B3F;
  }

  .password-warning .modal-body p {
    margin-bottom: 12px;
    color: var(--plum-900);
  }

  .password-warning .modal-body ul {
    margin: 16px 0;
    padding-left: 20px;
    color: var(--plum-800);
  }

  .password-warning .modal-body li {
    margin-bottom: 8px;
  }

  .password-warning .modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
  }

  /* Password Strength Indicator */
  .password-strength-indicator {
    margin-top: 8px;
  }

  .strength-bar {
    height: 4px;
    background: var(--line-soft);
    border-radius: 2px;
    margin-bottom: 8px;
    transition: width 0.3s ease, background-color 0.3s ease;
  }

  .strength-bar.strength-very-weak {
    background: #C24B3F;
  }

  .strength-bar.strength-weak {
    background: #F97316;
  }

  .strength-bar.strength-fair {
    background: #E3A93E;
  }

  .strength-bar.strength-good {
    background: #1F6F63;
  }

  .strength-bar.strength-strong {
    background: #1F6F63;
  }

  .strength-bar.strength-very-strong {
    background: #1F6F63;
  }

  .strength-text {
    font-size: 0.85rem;
    color: var(--plum-800);
  }
  .brand-logo{width:45px;height:45px;flex-shrink:0;margin: 0}
  .nav{padding:10px 16px;gap:8px;position:relative}
  .nav-links{
    position:fixed;top:0;right:0;
    width:250px;max-width:75vw;
    height:100dvh;height:100vh;
    margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--header-height) + 16px) 20px 24px;
    background:var(--paper);
    box-shadow:-6px 0 28px rgba(32,21,38,0.14);
    z-index:200;
    transform:translateX(100%);
    transition:transform 0.25s ease;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    pointer-events:none;
    display:flex;
    justify-content:flex-start;
  }
  .nav-links.active{
    transform:translateX(0);
    pointer-events:auto;
  }
  .nav-links:not(.active) a{pointer-events:none}
  .nav-links a{
    font-size:1.05rem;padding:14px 4px;
    border-bottom:1px solid var(--line-soft);
    white-space:normal;
    min-height:48px;display:flex;align-items:center;
  }
  .nav-links a.active::after{bottom:10px}
  .top-bar{
    flex-wrap:wrap;justify-content:center;gap:6px 16px;
    padding:8px 16px;font-size:0.75rem;
  }
  .top-bar-left,.top-bar-right{
    flex-wrap:wrap;justify-content:center;gap:6px 14px;
  }
  .hero-grid{padding:0 16px;gap:20px}
  .hero-content{text-align:center;align-items:center}
  .hero-sub{max-width:100%}
  .hero-actions{justify-content:center;width:100%}
  .hero-actions .btn{width:100%;max-width:320px}
  .hero-stats{justify-content:center;flex-wrap:wrap;gap:16px 24px}
  .hero-image-wrapper{margin-top:8px}
  .hero-image{max-width:320px;height:320px;margin:0 auto}
  .hero-secondary-img{width:72px;left:8%}
  .deliveries-card{top:8px;right:8px;min-width:120px;padding:14px}
  .deliveries-count{font-size:2rem}
  .mp-tabs{
    flex-wrap:wrap;justify-content:flex-start;gap:4px;
    overflow:visible;margin-bottom:28px;
  }
  .mp-tab{
    flex:1 1 calc(50% - 4px);margin:0;text-align:center;
    padding:10px 6px;font-size:0.82rem;min-height:44px;
  }
  .deal-grid{grid-template-columns:1fr}
  .partner-grid{grid-template-columns:1fr}
  .btn{white-space:normal;text-align:center}
  .wa-float{bottom:16px;right:16px;width:52px;height:52px}
}

@media (max-width:480px){
  .top-bar-item:nth-child(2){display:none}
  .hero-image{max-width:260px;height:260px}
  .hero h1{font-size:1.65rem}
  .service-row{grid-template-columns:1fr 1fr}
  .mp-tab{flex:1 1 100%;font-size:0.8rem}
  .deal-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
  .nav-toggle .hamburger-icon{width:24px;height:24px}
  .nav-toggle .close-icon{width:24px;height:24px}
}

/* Store Filters */
.store-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:24px;
  justify-content:center;
}
.filter-btn{
  padding:8px 16px;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:20px;
  font-size:0.85rem;
  font-weight:500;
  color:var(--ink);
  transition:all 0.2s ease;
}
.filter-btn:hover{
  border-color:var(--orange-500);
  color:var(--orange-600);
}
.filter-btn.active{
  background:var(--orange-500);
  color:#fff;
  border-color:var(--orange-500);
}

/* Store Grid */
.store-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}
.store-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:20px;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.store-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
}
.store-card.featured{
  border-color:var(--orange-500);
  background:linear-gradient(135deg,var(--paper) 0%,var(--orange-100) 100%);
}
.store-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.store-category{
  font-size:0.75rem;
  font-weight:600;
  color:var(--plum-700);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.store-badge{
  font-size:0.72rem;
  padding:4px 10px;
  background:var(--plum-100);
  color:var(--plum-700);
  border-radius:12px;
  font-weight:500;
}
.store-card h3{
  font-size:1.1rem;
  margin-bottom:8px;
}
.store-img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:var(--radius-s);
  margin-bottom:12px;
}
.store-rating{
  font-size:0.88rem;
  font-weight:600;
  color:var(--gold-500);
  margin-bottom:8px;
}
.store-meta{
  display:flex;
  gap:8px;
  font-size:0.82rem;
  color:var(--plum-700);
  margin-bottom:8px;
}
.store-desc{
  font-size:0.85rem;
  color:var(--plum-700);
  margin-bottom:16px;
  line-height:1.4;
}
.store-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
}
.store-footer span{
  font-size:0.8rem;
  color:var(--plum-700);
}
.store-footer strong{
  color:var(--ink);
}
.store-card .btn-sm{
  background:var(--orange-500);
  color:#fff;
  border:none;
  padding:8px 16px;
  border-radius:20px;
  font-weight:600;
  font-size:0.85rem;
  transition:background 0.2s ease;
}
.store-card .btn-sm:hover{
  background:var(--orange-600);
}

.partner-img{
  width:100%;
  height:100px;
  object-fit:contain;
  border-radius:var(--radius-s);
  margin-bottom:12px;
  background:var(--line-soft);
  padding:8px;
}

/* Process Steps */
.process-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:32px;
}
.process-step{
  text-align:center;
  padding:24px;
}
.process-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--orange-500);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  font-weight:700;
  margin:0 auto 16px;
}
.process-step h3{
  font-size:1.15rem;
  margin-bottom:8px;
}
.process-step p{
  font-size:0.9rem;
  color:var(--plum-700);
  line-height:1.5;
}

/* Tracking Section */
.tracking-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-top:32px;
}
.tracking-features{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
.tracking-feature{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  background:var(--bg-white);
  border-radius:var(--radius-m);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.feature-icon{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--orange-100);
  border-radius:50%;
  color:var(--orange-500);
}
.feature-icon svg{
  width:24px;
  height:24px;
}
.tracking-feature h3{
  font-size:1rem;
  margin-bottom:4px;
}
.tracking-feature p{
  font-size:0.85rem;
  color:var(--plum-700);
}
.tracking-card{
  background:var(--bg-white);
  border-radius:var(--radius-l);
  padding:24px;
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
}
.tracking-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.tracking-badge{
  background:var(--orange-500);
  color:#fff;
  padding:6px 12px;
  border-radius:20px;
  font-size:0.75rem;
  font-weight:600;
}
.tracking-status{
  font-size:0.85rem;
  color:var(--plum-700);
}
.tracking-progress{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}
.progress-bar{
  flex:1;
  height:8px;
  background:var(--line-soft);
  border-radius:4px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--orange-500),var(--orange-400));
  border-radius:4px;
}
.progress-percent{
  font-weight:700;
  font-size:1rem;
  color:var(--orange-500);
}
.tracking-steps{
  display:flex;
  justify-content:space-between;
  margin-bottom:24px;
  padding:0 8px;
}
.tracking-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:0.75rem;
  color:var(--plum-700);
}
.step-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--line-soft);
  border:2px solid var(--line-soft);
}
.tracking-step.completed .step-dot{
  background:var(--orange-500);
  border-color:var(--orange-500);
}
.tracking-step.active .step-dot{
  background:var(--orange-500);
  border-color:var(--orange-500);
  animation:pulse 1.5s infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0.4);}
  50%{box-shadow:0 0 0 8px rgba(249,115,22,0);}
}
.rider-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
}
.rider-vehicle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.9rem;
}
.rider-vehicle svg{
  width:20px;
  height:20px;
  color:var(--plum-700);
}
.btn-call{
  background:var(--green-500);
  color:#fff;
  border:none;
  padding:10px 24px;
  border-radius:20px;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s;
}
.btn-call:hover{
  background:var(--green-600);
}
.eta-info{
  text-align:right;
}
.eta-info span{
  display:block;
  font-size:0.75rem;
  color:var(--plum-700);
}
.eta-info strong{
  font-size:1rem;
  color:var(--plum-900);
}

@media (max-width:768px){
  .store-grid{
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:16px;
  }
  .store-card{
    padding:16px;
  }
  .process-steps{
    grid-template-columns:1fr;
  }
  .tracking-container{
    grid-template-columns:1fr;
  }
  .tracking-features{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important}
}

/* ===== Customer Auth & Profile ===== */
.btn-nav-signin{
  padding:8px 18px;border-radius:100px;font-size:0.85rem;font-weight:600;
  background:var(--plum-800);color:#fff;text-decoration:none;white-space:nowrap;
}
.btn-nav-signin:hover{background:var(--plum-900);color:#fff}
.btn-sm{padding:8px 16px;font-size:0.85rem}
.btn-block{width:100%;display:block;text-align:center}
.btn-danger{background:#dc2626;color:#fff;border:none}
.btn-danger:hover{background:#b91c1c}

.danger-zone{
  border:2px solid #fee2e2;
  background:#fef2f2;
}

.danger-zone h3{
  color:#991b1b;
}

.auth-page{background:linear-gradient(135deg,var(--plum-50),#fff);min-height:100vh}
.auth-container{padding:60px 20px 40px;max-width:500px;margin:0 auto}
.auth-card{background:#fff;border-radius:20px;padding:32px;box-shadow:0 20px 60px rgba(45,27,61,0.12)}
.auth-card h1{margin:0 0 8px;font-size:1.5rem;color:var(--plum-900)}
.auth-sub{color:var(--plum-700);margin:0 0 20px;font-size:0.9rem}
.auth-tabs{display:flex;gap:8px;margin-bottom:20px;background:var(--plum-50);padding:4px;border-radius:12px}
.auth-tab{flex:1;border:none;background:transparent;padding:10px;border-radius:10px;font-weight:600;cursor:pointer;color:var(--plum-700)}
.auth-tab.active{background:#fff;color:var(--plum-900);box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.auth-form label{display:block;margin-bottom:12px;font-size:0.85rem;font-weight:600;color:var(--plum-800)}
.auth-form input,.auth-form select,.auth-form textarea{width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--plum-200);border-radius:8px;font-size:0.95rem}
.auth-form-row{display:flex;justify-content:space-between;margin-bottom:16px}
.auth-link{font-size:0.85rem;color:var(--plum-700)}
.auth-message{padding:12px 14px;border-radius:10px;margin-bottom:16px;font-size:0.9rem}
.auth-message.error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.auth-message.success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.auth-hint{font-size:0.8rem;color:var(--plum-600);margin:-8px 0 16px}
.auth-footer{text-align:center;margin-top:16px;font-size:0.9rem}
.hidden{display:none !important}

/* Notification Bell Styles */
.notification-bell{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 50%;
  transition: background 0.2s;
  margin-right: 12px;
}
.notification-bell:hover{
  background: var(--plum-100);
}
.notification-bell svg{
  width: 24px;
  height: 24px;
}

/* Location Details Styles */
.location-details{
  background: var(--plum-50);
  padding: 12px;
  border-radius: 8px;
  margin-top: 4px;
}
.location-main{
  font-weight: 600;
  color: var(--plum-900);
  margin-bottom: 8px;
  line-height: 1.4;
}
.location-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--plum-700);
  margin-bottom: 8px;
}
.location-meta span{
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
}
.location-time{
  font-size: 0.8rem;
  color: var(--plum-600);
  font-style: italic;
}
.location-empty{
  color: var(--plum-600);
  font-style: italic;
  padding: 8px 0;
}

/* CAPTCHA Styles */
.captcha-container{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.captcha-display{
  flex:1;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color:#fff;
  padding:12px 16px;
  border-radius:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:3px;
  text-shadow:1px 1px 2px rgba(0,0,0,0.3);
  user-select:none;
  text-align:center;
}
.captcha-display img{
  display:block;
  width:180px;
  max-width:100%;
  height:54px;
  margin:-12px -16px;
  border-radius:8px;
}
.captcha-refresh{
  background:var(--plum-100);
  border:2px solid var(--plum-200);
  border-radius:10px;
  padding:12px;
  cursor:pointer;
  color:var(--plum-700);
  transition:all 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.captcha-refresh:hover{
  background:var(--plum-200);
  color:var(--orange-600);
  border-color:var(--orange-600);
}

/* ===== Customer Auth & Profile ===== */
.btn-nav-signin{
  padding:8px 18px;border-radius:100px;font-size:0.85rem;font-weight:600;
  background:var(--plum-800);color:#fff;text-decoration:none;white-space:nowrap;
}
.btn-nav-signin:hover{background:var(--plum-900)}

.auth-footer{text-align:center;margin-top:16px;font-size:0.9rem}
.hidden{display:none !important}

.profile-page{
  background:linear-gradient(135deg, var(--plum-50) 0%, var(--plum-100) 100%);
  min-height:100vh;
}

.profile-layout{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:32px;
  max-width:1200px;
  margin:0 auto;
  padding:40px 24px 80px;
  min-height:calc(100vh - 100px);
  box-sizing:border-box;
}

.profile-sidebar{
  display:flex;
  flex-direction:column;
  gap:24px;
  position:sticky;
  top:100px;
  height:fit-content;
  box-sizing:border-box;
}

.profile-user-card{
  background:linear-gradient(135deg, var(--plum-800) 0%, var(--plum-900) 100%);
  border-radius:24px;
  padding:32px 24px;
  text-align:center;
  box-shadow:0 8px 32px rgba(45,27,61,0.15);
  color:#fff;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
}

.profile-user-card::before{
  content:"";
  position:absolute;
  top:-50%;
  right:-50%;
  width:100%;
  height:100%;
  background:radial-gradient(circle, rgba(227,169,62,0.15) 0%, transparent 70%);
  border-radius:50%;
}

.profile-avatar-wrapper{
  position:relative;
  width:100px;
  height:100px;
  margin:0 auto 16px;
}

.profile-avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold-500) 0%, var(--orange-500) 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.25rem;
  font-weight:700;
  overflow:hidden;
  border:4px solid rgba(255,255,255,0.2);
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  transition:transform 0.2s ease;
}

.profile-avatar:hover{
  transform:scale(1.05);
}

.profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.avatar-badge{
  position:absolute;
  bottom:4px;
  right:4px;
  width:24px;
  height:24px;
  background:#22c55e;
  border:3px solid var(--plum-900);
  border-radius:50%;
}

.profile-user-card h2{
  margin:0 0 8px;
  font-size:1.5rem;
  color:#fff;
}

.profile-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.85rem;
  color:rgba(255,255,255,0.7);
  margin-top:12px;
}

.profile-stats{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1);
}

.stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.stat-value{
  font-size:1.75rem;
  font-weight:700;
  color:var(--gold-300);
}

.stat-label{
  font-size:0.75rem;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.profile-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
  background:#fff;
  border-radius:20px;
  padding:12px;
  box-shadow:0 4px 24px rgba(45,27,61,0.08);
  border:1px solid var(--line-soft);
}

.top-notification-btn{
  margin:12px 0;
}

.notification-bell{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:linear-gradient(135deg, var(--orange-500) 0%, var(--orange-600) 100%);
  color:#fff;
  border:none;
  border-radius:14px;
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s ease;
  box-shadow:0 4px 12px rgba(249,115,22,0.3);
}

.notification-bell:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(249,115,22,0.4);
}

.bell-icon{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
}

.bell-badge{
  display:none;
  min-width:18px;
  height:18px;
  padding:0 5px;
  background:#fff;
  color:var(--orange-600);
  border-radius:9px;
  font-size:0.7rem;
  font-weight:700;
  align-items:center;
  justify-content:center;
}

.bell-badge:not(:empty){
  display:inline-flex;
}

.bottom-support-btn{
  margin-top:12px;
}

.support-icon{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px;
  background:var(--plum-800);
  color:#fff;
  border:none;
  border-radius:14px;
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s ease;
  box-shadow:0 4px 12px rgba(45,27,61,0.2);
}

.support-icon:hover{
  background:var(--plum-900);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(45,27,61,0.3);
}

.support-icon-text{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
}

.bottom-logout-btn{
  margin-top:8px;
}

.logout-icon{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px;
  background:transparent;
  color:var(--red);
  border:1.5px solid var(--red);
  border-radius:14px;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s ease;
}

.logout-icon:hover{
  background:var(--red);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(194,75,63,0.3);
}

.logout-icon-text{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
}

.welcome-modal{
  max-width:480px;
  text-align:center;
  padding:40px 32px;
}

.welcome-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.welcome-icon{
  width:80px;
  height:80px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--orange-500) 0%, var(--orange-600) 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.9rem;
  font-weight:700;
  box-shadow:0 8px 24px rgba(249,115,22,0.3);
}

.welcome-modal h2{
  margin:0;
  font-size:1.5rem;
  color:var(--plum-900);
}

.welcome-modal p{
  margin:0;
  color:var(--plum-600);
  line-height:1.6;
  font-size:0.95rem;
}

.welcome-actions{
  display:flex;
  gap:12px;
  margin-top:8px;
}

.welcome-actions .btn{
  flex:1;
}

.nav-section-label{
  font-size:0.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--plum-600);
  padding:8px 12px 4px;
}

.profile-tab{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:none;
  background:transparent;
  border-radius:12px;
  text-align:left;
  font-size:0.95rem;
  font-weight:500;
  color:var(--plum-800);
  cursor:pointer;
  width:100%;
  transition:all 0.2s ease;
  position:relative;
  margin-bottom:4px;
  justify-content:flex-start;
}

.tab-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex-shrink:0;
  color:var(--plum-600);
  transition:color 0.2s ease;
}

.profile-tab.active .tab-icon{
  color:var(--gold-300);
}

.tab-text{
  flex:1;
}

.tab-badge{
  display:none;
  min-width:20px;
  height:20px;
  padding:0 6px;
  background:var(--orange-500);
  color:#fff;
  border-radius:10px;
  font-size:0.7rem;
  font-weight:700;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 4px rgba(249,115,22,0.3);
  flex-shrink:0;
}

.tab-badge:not(:empty){
  display:inline-flex;
}

.profile-tab.active .tab-badge{
  background:var(--gold-500);
  box-shadow:0 2px 4px rgba(227,169,62,0.4);
}

.profile-tab:hover{
  background:var(--plum-50);
  transform:translateX(4px);
}

.profile-tab.active{
  background:linear-gradient(135deg, var(--orange-500) 0%, var(--orange-600) 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(249,115,22,0.3);
}

.profile-tab.active .tab-icon{
  color:#fff;
}

.profile-tab.active::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:20px;
  background:var(--gold-300);
  border-radius:2px;
}

.profile-content{
  background:#fff;
  border-radius:24px;
  padding:36px;
  box-shadow:0 4px 24px rgba(45,27,61,0.08);
  min-height:600px;
  border:1px solid var(--line-soft);
  box-sizing:border-box;
  width:100%;
}

.profile-content-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:32px;
  flex-wrap:wrap;
  gap:20px;
  padding-bottom:24px;
  border-bottom:2px solid var(--orange-100);
}

.head-title h1{
  margin:0;
  font-size:2rem;
  color:var(--plum-900);
  line-height:1.2;
}

.head-subtitle{
  margin:8px 0 0;
  font-size:0.95rem;
  color:var(--plum-600);
}

.profile-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
}

.filter-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  font-weight:600;
  color:var(--plum-700);
}

.filter-select{
  padding:10px 16px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  font-size:0.9rem;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  transition:border-color 0.2s, box-shadow 0.2s;
}

.filter-select:hover{
  border-color:var(--plum-300);
  box-shadow:0 2px 8px rgba(45,27,61,0.06);
}

.filter-select:focus{
  outline:none;
  border-color:var(--orange-500);
  box-shadow:0 0 0 3px rgba(249,115,22,0.1);
}

.profile-panel{
  display:none;
  animation:fadeIn 0.3s ease;
}

.profile-panel.active{
  display:block;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.profile-card{
  background:var(--plum-50);
  border-radius:16px;
  padding:24px;
  margin-bottom:20px;
  border:1px solid var(--line-soft);
  transition:box-shadow 0.2s;
}

.profile-card:hover{
  box-shadow:0 4px 16px rgba(45,27,61,0.08);
}

.profile-card h3,
.profile-card h4{
  margin:0 0 16px;
  color:var(--plum-900);
  font-size:1.25rem;
}

.verified-badge{
  display:inline-block;
  background:var(--teal-600);
  color:#fff;
  font-size:0.75rem;
  font-weight:600;
  padding:2px 8px;
  border-radius:12px;
  margin-left:8px;
}

.unverified-badge{
  display:inline-block;
  background:var(--orange-100);
  color:var(--orange-700);
  font-size:0.75rem;
  font-weight:500;
  padding:2px 8px;
  border-radius:12px;
  margin-left:8px;
}

.star-rating{
  color:var(--gold-500);
  font-size:1.2rem;
  letter-spacing:2px;
  font-weight:700;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:20px;
}

.info-grid label{
  display:block;
  font-size:0.8rem;
  font-weight:600;
  color:var(--plum-600);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.info-grid strong{
  display:block;
  font-size:1rem;
  color:var(--plum-900);
  font-weight:600;
  word-break:break-word;
}

.info-grid > div{
  background:var(--plum-50);
  padding:16px;
  border-radius:12px;
  border:1px solid var(--line-soft);
}

.order-card{
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:24px;
  margin-bottom:16px;
  background:#fff;
  transition:all 0.2s ease;
  position:relative;
  overflow:hidden;
}

.order-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--plum-100);
  transition:background 0.2s ease;
}

.order-card:hover{
  border-color:var(--plum-300);
  box-shadow:0 4px 16px rgba(45,27,61,0.08);
  transform:translateY(-2px);
}

.order-card:hover::before{
  background:var(--orange-500);
}

.order-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line-soft);
}

.order-card-head strong{
  font-size:1.1rem;
  color:var(--plum-900);
}

.order-status{
  display:inline-block;
  padding:6px 14px;
  border-radius:100px;
  font-size:0.8rem;
  font-weight:600;
  background:var(--plum-100);
  color:var(--plum-800);
  margin-left:8px;
}

.order-status.status-pending,
.order-status.status-processing{
  background:#fef3c7;
  color:#92400e;
}

.order-status.status-delivered{
  background:#dcfce7;
  color:#166534;
}

.order-status.status-cancelled{
  background:#fee2e2;
  color:#991b1b;
}

.order-card-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}

.muted{
  color:var(--plum-600);
  font-size:0.9rem;
}

.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--plum-600);
  background:var(--plum-50);
  border-radius:16px;
  border:2px dashed var(--line);
}

.empty-state{
  text-align:center;
  padding:48px 24px;
}

.empty-state .empty-icon{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  background:var(--orange-100);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  color:var(--orange-600);
}

.empty-state h3{
  font-size:1.25rem;
  color:var(--plum-800);
  margin-bottom:8px;
}

.empty-state p{
  font-size:1rem;
  color:var(--plum-600);
  margin-bottom:16px;
}

.error-state{
  text-align:center;
  padding:48px 24px;
}

.error-state .error-icon{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  background:#fef2f2;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  color:#dc2626;
}

.error-state h3{
  font-size:1.25rem;
  color:var(--plum-800);
  margin-bottom:8px;
}

.error-state p{
  font-size:1rem;
  color:var(--plum-600);
  margin-bottom:20px;
}

.loading-text,
.error-text{
  padding:30px;
  text-align:center;
  color:var(--plum-600);
  font-size:0.95rem;
}

.error-text{
  color:#dc2626;
}

.badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:100px;
  font-size:0.75rem;
  background:var(--orange-100);
  color:var(--orange-700);
  margin-left:8px;
  font-weight:600;
}

.payment-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--line-soft);
  transition:background 0.2s;
}

.payment-row:hover{
  background:var(--plum-50);
  padding-left:12px;
  padding-right:12px;
  margin:0 -12px;
  border-radius:8px;
}

.panel-toolbar{
  margin-bottom:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.profile-form label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  font-size:0.9rem;
  color:var(--plum-800);
}

.profile-form input,
.profile-form select,
.profile-form textarea{
  width:100%;
  margin-top:6px;
  padding:12px 16px;
  border:1.5px solid var(--line);
  border-radius:12px;
  font-size:0.95rem;
  transition:border-color 0.2s, box-shadow 0.2s;
}

.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus{
  outline:none;
  border-color:var(--orange-500);
  box-shadow:0 0 0 3px rgba(249,115,22,0.1);
}

.checkbox-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:500 !important;
  cursor:pointer;
  padding:8px 0;
}

.checkbox-label input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--orange-500);
}

.danger-zone{
  margin-top:32px;
  padding:24px;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}

.danger-zone h3{
  color:#991b1b;
  margin:0 0 8px;
}

.tracking-timeline{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:24px 0;
}

.live-rider-location{
  margin:18px 0 24px;
  padding:16px;
  background:#fff;
  border:1px solid var(--orange-200);
  border-left:4px solid var(--orange-500);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(124,45,18,.07);
}

.live-location-heading{display:flex;align-items:center;gap:10px;color:var(--plum-900)}
.live-location-heading strong{display:block;font-size:1rem}
.live-location-heading small{display:block;margin-top:2px;color:var(--plum-600);font-size:.8rem}
.live-location-dot{width:10px;height:10px;border-radius:50%;background:var(--orange-500);box-shadow:0 0 0 0 rgba(249,115,22,.45);animation:liveLocationPulse 1.8s ease-out infinite}
.live-rider-location p{margin:14px 0 12px;color:var(--plum-700);font-size:.88rem}
.live-location-coordinates{display:block;margin-top:10px;color:var(--plum-500);font-size:.75rem}
@keyframes liveLocationPulse{70%{box-shadow:0 0 0 8px rgba(249,115,22,0)}100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}}

.track-step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:12px;
  background:var(--plum-50);
  font-size:0.85rem;
  font-weight:500;
  color:var(--plum-600);
  transition:all 0.2s;
}

.track-step span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--plum-300);
  flex-shrink:0;
}

.track-step.done span,
.track-step.active span{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,0.2);
}

.track-step.active{
  background:#dcfce7;
  color:#166534;
  font-weight:600;
  transform:scale(1.05);
}

.order-items-list{
  padding-left:24px;
  margin:16px 0;
  list-style:disc;
}

.order-items-list li{
  padding:4px 0;
  color:var(--plum-800);
}

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:24px;
  animation:fadeIn 0.2s ease;
}

.modal-overlay[hidden]{display:none}

.modal-card{
  background:#fff;
  border-radius:24px;
  padding:36px;
  max-width:600px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  animation:slideUp 0.3s ease;
}

@keyframes slideUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.modal-close{
  position:absolute;
  top:16px;
  right:20px;
  border:none;
  background:none;
  font-size:1.75rem;
  cursor:pointer;
  color:var(--plum-600);
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s;
}

.modal-close:hover{
  background:var(--plum-100);
}

/* Cart Modal Styles */
.cart-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.cart-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(4px);
}

.cart-modal-content{
  position:relative;
  background:#fff;
  border-radius:24px;
  padding:36px;
  max-width:600px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  animation:slideUp 0.3s ease;
}

.cart-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line-soft);
}

.cart-modal-header h2{
  font-size:1.5rem;
  color:var(--plum-800);
}

.cart-modal-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.cart-profile-link{
  color:var(--plum-800);
  text-decoration:none;
  font-weight:600;
  padding:8px 16px;
  background:var(--plum-100);
  border-radius:100px;
  transition:background 0.2s;
}

.cart-profile-link:hover{
  background:var(--plum-200);
}

.cart-close-btn{
  border:none;
  background:none;
  font-size:2rem;
  cursor:pointer;
  color:var(--plum-600);
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s;
  line-height:1;
  padding:0;
}

.cart-close-btn:hover{
  background:var(--plum-100);
  color:var(--plum-900);
}

.cart-items{
  max-height:400px;
  overflow-y:auto;
  margin-bottom:24px;
}

.cart-empty{
  text-align:center;
  color:var(--plum-600);
  padding:40px 20px;
  font-size:1.1rem;
}

.cart-item{
  display:flex;
  gap:16px;
  padding:16px;
  border-bottom:1px solid var(--line-soft);
  align-items:center;
}

.cart-item img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:12px;
}

.cart-item-details{
  flex:1;
}

.cart-item-name{
  font-weight:600;
  color:var(--plum-800);
  margin-bottom:4px;
}

.cart-item-price{
  color:var(--orange-600);
  font-weight:600;
}

.cart-item-quantity{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

.cart-item-quantity button{
  width:32px;
  height:32px;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s;
}

.cart-item-quantity button:hover{
  background:var(--plum-100);
  border-color:var(--plum-300);
}

.cart-i.btn-link {
  background: transparent;
  border: none;
  color: #F97316;
  font-weight: 600;
  cursor: pointer;
  padding: 12px;
  text-decoration: none;
  width: 100%;
}

.btn-link:hover {
  text-decoration: underline;
}

.cart-item-remove{
  background:none;
  border:none;
  color:#dc2626;
  cursor:pointer;
  padding:8px;
  font-size:0.9rem;
  transition:opacity 0.2s;
}

.cart-item-remove:hover{
  opacity:0.7;
}

.cart-footer{
  padding-top:20px;
  border-top:1px solid var(--line-soft);
}

.cart-summary{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
  font-size:0.95rem;
}

.cart-summary.total{
  font-weight:700;
  font-size:1.1rem;
  color:var(--plum-900);
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
}

.cart-checkout-btn{
  width:100%;
  margin-top:20px;
  padding:16px;
  background:var(--orange-600);
  color:#fff;
  border:none;
  border-radius:100px;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  transition:background 0.2s;
}

.cart-checkout-btn:hover{
  background:var(--orange-700);
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

.modal-actions{
  display:flex;
  gap:12px;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
}

.profile-toast{
  position:fixed;
  bottom:32px;
  right:32px;
  background:var(--plum-900);
  color:#fff;
  padding:16px 24px;
  border-radius:14px;
  font-size:0.95rem;
  font-weight:500;
  opacity:0;
  transform:translateY(20px);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  z-index:1100;
  pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
}

.profile-toast.show{
  opacity:1;
  transform:translateY(0);
}

.profile-toast.error{
  background:#dc2626;
}

.address-card{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:20px;
  margin-bottom:16px;
  transition:all 0.2s;
}

.address-card:hover{
  border-color:var(--plum-300);
  box-shadow:0 4px 16px rgba(45,27,61,0.08);
}

.address-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.review-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.profile-card.unread{
  background:linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color:#fbbf24;
}

@media (max-width:1024px){
  .profile-layout{
    grid-template-columns:260px 1fr;
    gap:24px;
    padding:32px 20px 60px;
  }
  
  .profile-content{
    padding:28px;
  }
}

@media (max-width:768px){
  .profile-layout{
    grid-template-columns:1fr;
    padding:24px 16px 40px;
  }
  
  .profile-sidebar{
    position:static;
  }
  
  .profile-nav{
    flex-direction:row;
    flex-wrap:wrap;
    overflow-x:auto;
    padding:8px;
  }
  
  .nav-section-label{
    display:none;
  }
  
  .profile-tab{
    flex:0 0 auto;
    white-space:nowrap;
    padding:10px 14px;
  }
  
  .profile-tab.active::before{
    display:none;
  }
  
  .profile-content{
    padding:20px;
    border-radius:16px;
  }
  
  .profile-content-head{
    flex-direction:column;
    align-items:flex-start;
  }
  
  .head-title h1{
    font-size:1.5rem;
  }
  
  .profile-stats{
    gap:16px;
  }
  
  .stat-value{
    font-size:1.5rem;
  }
}

/* Auth Page Styles */
.auth-page .brand-logo { width: 45px !important; height: 45px !important; }

.auth-page .site-header {
  background: #fff !important;
}

.auth-page .nav {
  background: #fff !important;
}

.auth-page .brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
}

.auth-page .brand-logo {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.auth-page .brand-text {
  display: none !important;
}

.auth-page .nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.auth-page .cart-icon.nav-cart-mobile {
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  color: #333 !important;
  text-decoration: none !important;
  position: relative !important;
  border-radius: 50% !important;
}

.auth-page .btn-nav-signin {
  padding: 8px 14px !important;
  font-size: 0.8rem !important;
}

.auth-page .nav-toggle .close-icon {
  display: none !important;
}

@media (min-width: 901px) {
  .auth-page .brand-logo { width: 85px !important; height: 85px !important; }
  .auth-page .nav { max-height: 70px !important; }
  .auth-page .nav-cart-mobile { display: none !important; }
  .auth-page .cart-icon:not(.nav-cart-mobile) { display: flex !important; }
}

@media (max-width: 900px) {
  .auth-page .brand-logo { width: 45px !important; height: 45px !important; }
  .auth-page .cart-icon:not(.nav-cart-mobile) { display: none !important; }
}

.auth-card {
  max-width: 480px;
  margin: 40px auto;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.auth-card h1 {
  font-size: 28px;
  margin-bottom: 8px;
  color: #1a1a1a;
}

.auth-sub {
  color: #666;
  margin-bottom: 32px;
  line-height: 1.5;
}

.auth-form label {
  margin-bottom: 20px;
}

.auth-form input {
  padding: 14px 16px;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-form input:focus {
  border-color: #ff6b35;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.1);
  outline: none;
}

.auth-hint {
  font-size: 13px;
  color: #666;
  margin: -12px 0 24px 0;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #ff6b35;
}

.btn-primary {
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,107,53,0.3);
}

.auth-footer {
  text-align: center;
  margin-top: 24px;
  color: #666;
}

.auth-footer a {
  color: #ff6b35;
  text-decoration: none;
  font-weight: 600;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.input-icon {
  position: relative;
}

.input-icon svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  width: 20px;
  height: 20px;
}

.input-icon input {
  padding-left: 44px;
}

.password-strength {
  margin-top: 8px;
  height: 4px;
  background: #e5e5e5;
  border-radius: 2px;
  overflow: hidden;
}

.password-strength-bar {
  height: 100%;
  width: 0;
  transition: width 0.3s, background-color 0.3s;
}

.password-strength.weak .password-strength-bar {
  width: 33%;
  background: #dc3545;
}

.password-strength.medium .password-strength-bar {
  width: 66%;
  background: #ffc107;
}

.password-strength.strong .password-strength-bar {
  width: 100%;
  background: #28a745;
}

.password-strength-text {
  font-size: 12px;
  margin-top: 4px;
  color: #666;
}

/* Auth page footer responsive - NOT centered on large screens */
@media (min-width: 901px) {
  .auth-page .site-footer {
    text-align: left !important;
  }
  .auth-page .footer-grid {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 900px) {
  .auth-page .site-footer {
    text-align: center !important;
  }
  .auth-page .footer-grid {
    flex-direction: column !important;
    align-items: center !important;
  }
}

.auth-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}

.auth-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 12px 16px;
}

/* ===========================================================
   Order Modal Styles - Redesigned
   =========================================================== */

.order-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.order-header-left h3 {
  margin: 0 0 4px 0;
  font-size: 1.25rem;
  color: var(--ink);
}

.order-date {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}

.order-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.order-status-badge.status-pending {
  background: var(--orange-100);
  color: var(--orange-700);
}

.order-status-badge.status-accepted,
.order-status-badge.status-assigned {
  background: #E0F2FE;
  color: #0369A1;
}

.order-status-badge.status-picked_up,
.order-status-badge.status-on_the_way {
  background: #FEF3C7;
  color: #92400E;
}

.order-status-badge.status-delivered {
  background: #D1FAE5;
  color: #065F46;
}

.order-status-badge.status-cancelled {
  background: #FEE2E2;
  color: #991B1B;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.modal-close-btn:hover {
  background: var(--line-soft);
  color: var(--ink);
}

.order-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.order-section:last-child {
  border-bottom: none;
}

.order-section h4 {
  margin: 0 0 12px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tracking Timeline */
.tracking-timeline-new {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
}

.track-step-new {
  display: flex;
  align-items: center;
  gap: 4px;
}

.track-step-new .step-icon {
  font-size: 14px;
  min-width: 20px;
}

.track-step-new .step-label {
  font-size: 0.875rem;
  color: #666;
}

.track-step-new.done .step-label {
  color: var(--teal-600);
}

.track-step-new.active .step-label {
  color: var(--ink);
  font-weight: 600;
}

.track-step-new .step-connector {
  color: var(--line);
  font-size: 14px;
}

/* Delivery Info */
.delivery-info {
  padding: 12px;
  background: var(--paper-dim);
  border-radius: var(--radius-s);
  margin-bottom: 12px;
}

.delivery-info p {
  margin: 4px 0;
}

.delivery-info .muted {
  color: #666;
  font-size: 0.875rem;
}

/* Store Info */
.store-info {
  padding: 12px;
  background: var(--paper-dim);
  border-radius: var(--radius-s);
}

.store-info p {
  margin: 4px 0;
}

/* Items Section */
.order-items-new {
  padding: 12px;
  background: var(--paper-dim);
  border-radius: var(--radius-s);
}

.items-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
}

.order-item-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.875rem;
}

.items-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

.items-subtotal {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  padding-top: 8px;
}

/* Payment Breakdown */
.payment-breakdown {
  padding: 12px;
  background: var(--paper-dim);
  border-radius: var(--radius-s);
  margin-bottom: 12px;
}

.payment-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.875rem;
}

.payment-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

.total-row {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.payment-status {
  padding: 12px;
  background: var(--paper-dim);
  border-radius: var(--radius-s);
}

.payment-status p {
  margin: 4px 0;
}

.payment-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.payment-badge.paid {
  background: #D1FAE5;
  color: #065F46;
}

.payment-badge.unpaid {
  background: #FEE2E2;
  color: #991B1B;
}

/* Rider Info */
.rider-info {
  display: flex;
  gap: 16px;
  padding: 12px;
  background: var(--paper-dim);
  border-radius: var(--radius-s);
}

.rider-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line-soft);
}

.rider-details {
  flex: 1;
}

.rider-details p {
  margin: 4px 0;
}

.rider-rating {
  color: var(--gold-500);
  font-size: 0.875rem;
}

/* Order Actions */
.order-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Order History */
.order-history {
  padding: 12px;
  background: var(--paper-dim);
  border-radius: var(--radius-s);
}

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.history-item:last-child {
  border-bottom: none;
}

.history-icon {
  color: var(--teal-600);
  font-size: 14px;
}

.history-label {
  flex: 1;
  font-size: 0.875rem;
}

.history-time {
  font-size: 0.75rem;
  color: #666;
}

/* Responsive */
@media (max-width: 600px) {
  .order-modal-header {
    flex-direction: column;
    gap: 12px;
  }

  .order-header-right {
    width: 100%;
    justify-content: space-between;
  }

  .tracking-timeline-new {
    flex-direction: column;
    align-items: flex-start;
  }

  .track-step-new .step-connector {
    display: none;
  }

  .items-header,
  .order-item-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .rider-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .order-actions {
    flex-direction: column;
  }

  .order-actions button,
  .order-actions a {
    width: 100%;
  }
}