/* SpeedMart.lk — Mobile-First App Design */
:root {
  --yellow:#F5A800;--yellow-bg:#FFF8E1;--yellow-light:#FFF3CC;
  --black:#111111;--white:#ffffff;
  --green:#1D9E75;--green-light:#E1F5EE;--green-dark:#0F6E56;
  --bg1:#ffffff;--bg2:#F7F6F2;--border:#E8E6DF;
  --text1:#1A1915;--text2:#5F5E5A;--muted:#9B9A96;
  --radius:12px;--radius-sm:8px;--radius-xs:6px;
  --shadow:0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.12);
}
@media(prefers-color-scheme:dark){
  :root{--bg1:#1C1C1E;--bg2:#2C2C2E;--border:#3A3A3C;--text1:#F2F2F7;--text2:#AEAEB2;--muted:#636366;}
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg2);color:var(--text1);font-size:15px;line-height:1.5;min-height:100vh}

/* ── LOGO — always on black nav, so mart = white always ── */
.logo{display:flex;align-items:baseline;gap:0;text-decoration:none}
.logo-speed{font-size:19px;font-weight:900;color:var(--yellow);font-style:italic;letter-spacing:-0.5px}
.logo-mart{font-size:19px;font-weight:700;color:#ffffff !important;font-style:italic;letter-spacing:-0.5px}
.logo-lk{font-size:10px;font-weight:700;color:var(--yellow);vertical-align:super;margin-left:1px}

/* ── TOP NAV ── */
.topnav{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--black);position:sticky;top:0;z-index:100}
.nav-right{display:flex;align-items:center;gap:8px}
/* Fix: nav text white on black bg */
.nav-user{font-size:12px;color:#aaa}
.topnav .btn-outline{border-color:rgba(255,255,255,0.25);color:#ffffff}
.topnav .btn-sm:not(.btn-primary){color:#ffffff;border-color:rgba(255,255,255,0.25)}
/* My Orders link — white text */
.topnav a{color:#ffffff}
.topnav .btn-primary{color:var(--black)}

/* ── CONTAINER ── */
.container{max-width:680px;margin:0 auto;padding:16px}
@media(max-width:480px){.container{padding:12px 10px}}

/* ── BUTTONS ── */
.btn{padding:8px 16px;border-radius:var(--radius-sm);font-size:14px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text1);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .15s;font-weight:500;-webkit-user-select:none;user-select:none}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--yellow);color:var(--black) !important;border-color:var(--yellow);font-weight:700}
.btn-primary:active{background:#E09800}
.btn-outline{border-color:rgba(255,255,255,0.2);color:#ccc}
.btn-danger{background:#FCEBEB;color:#A32D2D;border-color:#F09595}
.btn-dark{background:var(--black);color:var(--yellow);border-color:var(--black);font-weight:700}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:var(--radius-xs)}
.btn-full{width:100%;justify-content:center}
.mt-8{margin-top:8px}

/* ── FORMS ── */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:12px;color:var(--text2);margin-bottom:5px;font-weight:500}
.form-hint{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.form-input{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:15px;background:var(--bg1);color:var(--text1);transition:border-color .15s;-webkit-appearance:none}
.form-input:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(245,168,0,0.1)}
select.form-input{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239B9A96' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}
.form-row-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.form-row-two{grid-template-columns:1fr}}

/* ── CARDS ── */
.card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
@media(max-width:480px){.card{padding:14px;margin-bottom:10px}}
.card-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card-sub{font-size:12px;color:var(--text2);margin-top:3px}
.divider{height:1px;background:var(--border);margin:12px 0}
.section-title{font-size:15px;font-weight:600;color:var(--text1);margin-bottom:12px}
.order-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.order-row:last-child{border-bottom:none}
.muted{color:var(--muted);font-size:12px}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-green{background:#E1F5EE;color:#0A6B52}
.badge-amber{background:#FEF3E2;color:#8A4D0D}
.badge-red{background:#FEECEC;color:#A02020}
.badge-blue{background:#E8F4FF;color:#1060A0}
.badge-gray{background:#F0EFE9;color:#5A5955}
.badge-yellow{background:var(--yellow-bg);color:#7A5000}

/* ── ALERTS ── */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:14px;display:flex;align-items:flex-start;gap:8px}
.alert-success{background:var(--green-light);color:var(--green-dark);border:1px solid #9FE1CB}
.alert-error{background:#FEECEC;color:#A02020;border:1px solid #F5ADAD}

/* ── METRICS ── */
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:600px){.metric-grid{grid-template-columns:repeat(4,1fr)}}
.metric{background:var(--bg2);border-radius:var(--radius-sm);padding:14px;border:1px solid var(--border)}
.metric-label{font-size:11px;color:var(--text2);margin-bottom:4px;font-weight:500}
.metric-val{font-size:22px;font-weight:700;color:var(--text1)}
.metric-sub{font-size:11px;color:var(--muted);margin-top:2px}
.metric-highlight{background:var(--black);border-color:var(--black)}
.metric-highlight .metric-label{color:#999}
.metric-highlight .metric-val{color:var(--yellow)}
.metric-highlight .metric-sub{color:#666}

/* ── LOGIN ── */
.login-page{background:var(--black);min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-wrapper{width:100%;max-width:420px;padding:20px 16px}
.login-hero{text-align:center;padding:32px 20px 24px}
.logo-large .logo-speed{font-size:40px}
.logo-large .logo-mart{font-size:40px;color:#ffffff !important}
.logo-large .logo-lk{font-size:18px}
.hero-sub{font-size:14px;color:#888;margin-top:8px}
.login-card{background:var(--bg1);border-radius:20px 20px 0 0;padding:24px 20px 40px;min-height:50vh}
@media(min-width:480px){.login-card{border-radius:16px;min-height:auto;padding:24px}}
.otp-input{letter-spacing:10px;text-align:center;font-size:24px;font-weight:700;padding:14px}

/* ── VENDOR/ADMIN LAYOUT ── */
.vendor-layout{display:grid;grid-template-columns:200px 1fr;min-height:calc(100vh - 52px)}
@media(max-width:700px){
  .vendor-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .sidebar{display:flex;flex-direction:row;overflow-x:auto;padding:8px;gap:4px;border-right:none;border-bottom:1px solid var(--border);position:sticky;top:52px;z-index:90;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sidebar::-webkit-scrollbar{display:none}
  .sidebar nav{display:flex;flex-direction:row;gap:4px;flex:1}
  .sidebar-vendor-info{display:none}
}
.sidebar{background:var(--bg1);border-right:1px solid var(--border);padding:16px 8px;display:flex;flex-direction:column}
.sidebar nav{flex:1}
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;color:var(--text2);text-decoration:none;cursor:pointer;margin-bottom:3px;transition:all .15s;font-weight:500;white-space:nowrap}
.sidebar-item.active{background:var(--black);color:var(--yellow)}
@media(max-width:700px){
  .sidebar-item{padding:8px 14px;font-size:12px;border-radius:20px;margin-bottom:0}
  .sidebar-item.active{background:var(--yellow);color:var(--black)}
}
.sidebar-vendor-info{padding:12px;background:var(--black);border-radius:var(--radius-sm);margin-top:12px}
.vendor-name{font-size:12px;color:var(--yellow);font-weight:700;margin-bottom:2px}
.vendor-cat{font-size:11px;color:#aaa;margin-bottom:4px}
.vendor-main{padding:20px;background:var(--bg2);overflow-y:auto}
@media(max-width:480px){.vendor-main{padding:12px 10px}}

/* ── WELCOME BANNER ── */
.welcome-banner{background:var(--yellow-bg);border:1px solid var(--yellow);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:14px;font-size:13px;color:#7A5000;display:flex;align-items:center;gap:8px}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:48px 20px;color:var(--muted)}

/* ── ORDER CARDS ── */
.order-card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)}
.order-card-header{padding:14px 16px;display:flex;align-items:start;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border)}
.product-item{padding:14px 16px;border-bottom:1px solid var(--border)}
.product-item:last-child{border-bottom:none}
.product-thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
.product-thumb-placeholder{width:48px;height:48px;border-radius:8px;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.quote-item{background:var(--bg2);border-radius:var(--radius-sm);padding:12px;margin-bottom:8px;border:1px solid var(--border)}
.quote-media{max-width:100px;max-height:80px;border-radius:6px;object-fit:cover}
.price-tag{font-size:18px;font-weight:700;color:var(--green-dark)}
.price-sub{font-size:10px;color:var(--muted)}
.pending-notice{background:var(--yellow-bg);border-radius:var(--radius-xs);padding:8px 12px;font-size:12px;color:#7A5000;margin-top:10px}
.confirmed-notice{background:var(--green-light);border-radius:var(--radius-xs);padding:8px 12px;font-size:12px;color:var(--green-dark);margin-top:10px}

/* ── STEP WIZARD ── */
.steps-header{display:flex;align-items:center;justify-content:center;margin-bottom:20px;padding:4px 0}
.step-circle{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:2px solid var(--border);background:var(--bg1);color:var(--muted);transition:all .3s}
.step-circle.active{background:var(--yellow);border-color:var(--yellow);color:var(--black);box-shadow:0 2px 8px rgba(245,168,0,0.4)}
.step-circle.done{background:var(--green);border-color:var(--green);color:#fff}
.step-label{font-size:10px;color:var(--muted);margin-top:3px;text-align:center;white-space:nowrap;font-weight:500}
.step-label.active-label{color:var(--yellow);font-weight:600}
.step-connector{width:32px;height:2px;background:var(--border);margin:0 2px;margin-bottom:16px;transition:background .3s;flex-shrink:0}
.step-connector.done{background:var(--green)}
.step-panel{display:none;animation:fadeUp .25s ease}
.step-panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── CAT CARDS ── */
.cat-grid-modern{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px}
@media(min-width:400px){.cat-grid-modern{grid-template-columns:repeat(4,1fr)}}
.cat-card-modern{border:2px solid var(--border);border-radius:14px;padding:18px 10px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg1)}
.cat-card-modern:active,.cat-card-modern.selected{border-color:var(--yellow);background:var(--yellow-bg);transform:scale(0.97)}
.cat-card-modern .icon{font-size:34px;margin-bottom:8px}
.cat-card-modern .name{font-size:13px;font-weight:600;color:var(--text1)}

/* ── PRODUCT ROW ── */
.product-row{background:var(--bg1);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px}
.product-num{width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--black);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.form-row-three{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;align-items:start}
@media(max-width:560px){.form-row-three{grid-template-columns:1fr}}
.img-preview{width:56px;height:56px;object-fit:cover;border-radius:8px;display:none;margin-top:6px;border:1px solid var(--border)}

/* ── MAP ── */
#map{height:220px;border-radius:var(--radius-sm);border:1.5px solid var(--border);margin-top:8px}
.map-pin-info{background:var(--green-light);border:1px solid #9FE1CB;border-radius:var(--radius-xs);padding:8px 12px;font-size:12px;color:var(--green-dark);margin-top:8px;display:none}

/* ── SUMMARY ── */
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.summary-row:last-child{border-bottom:none}
.summary-product{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.summary-product:last-child{border-bottom:none}

/* ── STEP NAV ── */
.step-nav{display:flex;gap:10px;margin-top:20px}
.btn-next{flex:1;padding:15px;font-size:15px;font-weight:700;border-radius:var(--radius)}

/* ── LOCATION POPUP ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:999;align-items:flex-end;justify-content:center}
@media(min-width:480px){.modal-overlay{align-items:center}}
.modal-box{background:var(--bg1);border-radius:20px 20px 0 0;padding:28px 24px 40px;width:100%;max-width:420px}
@media(min-width:480px){.modal-box{border-radius:16px;padding:28px 24px}}

/* ── BOTTOM SAFE ── */
.bottom-safe{padding-bottom:max(16px,env(safe-area-inset-bottom))}