@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0F0E0C;--ink2:#2C2A26;--ink3:#4A4740;--muted:#7A766F;
  --cream:#F8F5EF;--warm:#EDE8DF;--surface:#FFFFFF;
  --border:rgba(15,14,12,.09);--bmd:rgba(15,14,12,.16);
  --gold:#C9A85C;--gl:#F3EACC;--gd:#8A6B28;
  --green:#1E6641;--gbg:#E8F5EE;
  --red:#B52B2B;--rbg:#FCEAEA;
  --amber:#7A5400;--abg:#FFF4DC;
  --blue:#1559A0;--bbg:#E5EFFF;
  --rsm:8px;--rmd:12px;--rlg:18px;--rpill:999px;
  --fd:'Syne',sans-serif;--fb:'DM Sans',sans-serif;
  --shadow-sm:0 1px 4px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
}
html,body{height:100%}
body{font-family:var(--fb);background:var(--cream);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* Layout */
.page-wrap{max-width:480px;margin:0 auto;min-height:100vh;background:var(--surface);display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.08)}
.main-content{flex:1;padding-bottom:76px}
/* Bottom Nav */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--surface);border-top:0.5px solid var(--border);display:flex;padding:10px 0 env(safe-area-inset-bottom,14px);z-index:100;box-shadow:0 -4px 20px rgba(0,0,0,.06)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;padding:2px 0;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.nav-item:active{transform:scale(.92)}
.nav-icon{font-size:20px;line-height:1}
.nav-label{font-size:9px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition:color .2s}
.nav-item.active .nav-label{color:var(--gd)}
/* Hero */
.hero{background:var(--ink);padding:36px 24px 32px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px;border:50px solid rgba(201,168,92,.09);border-radius:50%}
.hero::after{content:'';position:absolute;bottom:-20px;left:50px;width:100px;height:100px;border:25px solid rgba(201,168,92,.06);border-radius:50%}
.hero-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(201,168,92,.12);border:1px solid rgba(201,168,92,.2);color:var(--gold);font-family:var(--fd);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:var(--rpill);margin-bottom:16px}
.hero-dot{width:5px;height:5px;background:var(--gold);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero-title{font-family:var(--fd);font-size:32px;font-weight:800;color:#fff;line-height:1.05;letter-spacing:-.02em;margin-bottom:8px}
.hero-title span{color:var(--gold)}
.hero-sub{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:24px;font-weight:300;line-height:1.6}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fd);font-weight:700;font-size:13px;padding:13px 24px;border-radius:var(--rpill);border:none;cursor:pointer;text-decoration:none;letter-spacing:.02em;transition:all .15s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--bmd)}
.btn-block{width:100%;border-radius:var(--rmd);padding:15px;border-radius:var(--rmd)}
.btn-arrow{width:22px;height:22px;background:rgba(0,0,0,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
/* Form elements */
.form-group{margin-bottom:16px}
.form-label{font-family:var(--fd);font-size:10px;font-weight:700;color:var(--ink3);letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:6px}
.form-input{width:100%;padding:13px 15px;font-size:14px;font-family:var(--fb);border:1.5px solid var(--bmd);border-radius:var(--rsm);background:var(--cream);color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none}
.form-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,92,.15);background:var(--surface)}
.form-input::placeholder{color:var(--muted)}
/* Alerts */
.alert{padding:12px 16px;border-radius:var(--rsm);font-size:13px;margin-bottom:14px;line-height:1.5;transition:opacity .4s}
.alert-success{background:var(--gbg);color:var(--green)}
.alert-error{background:var(--rbg);color:var(--red)}
.alert-info{background:var(--bbg);color:var(--blue)}
/* Cards */
.card{background:var(--surface);border-radius:var(--rmd);border:0.5px solid var(--border);padding:16px;box-shadow:var(--shadow-sm)}
.section-label{font-family:var(--fd);font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.service-card{background:var(--surface);border-radius:var(--rmd);padding:14px 10px;border:1.5px solid var(--border);text-align:center;transition:all .2s;display:block;-webkit-tap-highlight-color:transparent}
.service-card:active{transform:scale(.97)}
.service-card.featured{background:var(--ink);border-color:var(--ink)}
.service-card:not(.featured):hover{border-color:var(--gold)}
.service-icon{font-size:24px;margin-bottom:8px;display:block}
.service-name{font-family:var(--fd);font-size:11px;font-weight:700;color:var(--ink);line-height:1.2}
.service-card.featured .service-name{color:var(--gold)}
.service-price{font-size:10px;color:var(--muted);margin-top:3px}
/* Booking header */
.booking-header{background:var(--ink);padding:22px 24px 20px;flex-shrink:0}
.booking-title{font-family:var(--fd);font-size:20px;font-weight:800;color:#fff;margin-bottom:16px}
.progress-bar{display:flex;gap:4px}
.prog-step{flex:1;height:3px;background:rgba(255,255,255,.15);border-radius:var(--rpill);transition:background .3s}
.prog-step.done{background:var(--gold)}
.prog-labels{display:flex;justify-content:space-between;margin-top:7px}
.prog-label{font-size:8px;color:rgba(255,255,255,.3);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
/* Option items */
.option-list{display:flex;flex-direction:column;gap:10px}
.option-item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--rmd);padding:14px 16px;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.option-item.selected{border-color:var(--gold);background:var(--gl)}
.option-item:active{transform:scale(.98)}
.option-icon{width:42px;height:42px;border-radius:10px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:background .15s}
.option-item.selected .option-icon{background:var(--gold)}
.option-name{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--ink)}
.option-desc{font-size:11px;color:var(--muted);margin-top:2px}
.option-price{font-family:var(--fd);font-size:15px;font-weight:800;color:var(--gd)}
.option-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--bmd);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s}
.option-radio.checked{border-color:var(--gd)}
.option-radio.checked::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--gd)}
/* Add-ons */
.addon-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.addon-chip{border:1.5px solid var(--border);border-radius:var(--rsm);padding:14px;cursor:pointer;background:var(--surface);transition:all .15s;-webkit-tap-highlight-color:transparent}
.addon-chip.selected{border-color:var(--gold);background:var(--gl)}
.addon-chip:active{transform:scale(.97)}
.addon-name{font-family:var(--fd);font-size:11px;font-weight:700;color:var(--ink);margin-bottom:3px}
.addon-price{font-size:10px;color:var(--muted)}
/* Upload */
.upload-zone{border:1.5px dashed var(--bmd);border-radius:var(--rmd);padding:36px 24px;text-align:center;background:var(--surface);cursor:pointer;transition:all .15s}
.upload-zone:hover{border-color:var(--gold);background:var(--gl)}
/* Method cards */
.method-row{display:flex;gap:10px}
.method-card{flex:1;border:1.5px solid var(--border);border-radius:var(--rmd);padding:16px 12px;text-align:center;cursor:pointer;background:var(--surface);transition:all .15s;-webkit-tap-highlight-color:transparent}
.method-card.selected{border-color:var(--gold);background:var(--gl)}
.method-card:active{transform:scale(.97)}
.method-icon{font-size:28px;margin-bottom:8px}
.method-name{font-family:var(--fd);font-size:11px;font-weight:700;color:var(--ink)}
.method-sub{font-size:10px;color:var(--muted);margin-top:2px}
/* Date/Time */
.date-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.date-cell{background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:10px 4px;text-align:center;cursor:pointer;transition:all .15s}
.date-cell.selected{border-color:var(--gold);background:var(--gl)}
.date-day{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.date-num{font-family:var(--fd);font-size:16px;font-weight:800;color:var(--ink);margin:3px 0}
.date-cell.selected .date-num{color:var(--gd)}
.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.time-chip{border:1.5px solid var(--border);border-radius:var(--rsm);padding:11px 4px;text-align:center;font-family:var(--fd);font-size:11px;font-weight:700;color:var(--ink2);cursor:pointer;background:var(--surface);transition:all .15s}
.time-chip.selected{border-color:var(--gold);background:var(--gl);color:var(--gd)}
.time-chip.unavail{opacity:.3;cursor:not-allowed;pointer-events:none}
/* Badges */
.badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;font-family:var(--fd);padding:3px 10px;border-radius:var(--rpill);letter-spacing:.05em;text-transform:capitalize;white-space:nowrap}
.badge-pending{background:var(--abg);color:var(--amber)}
.badge-picked_up,.badge-drying{background:var(--bbg);color:var(--blue)}
.badge-cleaning{background:var(--gl);color:var(--gd)}
.badge-ready{background:var(--gbg);color:var(--green)}
.badge-delivered{background:#EFEEED;color:#5A5750}
/* Tracking */
.track-step{display:flex;gap:16px;padding-bottom:22px;position:relative}
.track-step::before{content:'';position:absolute;left:13px;top:28px;bottom:0;width:1px;background:var(--bmd)}
.track-step:last-child::before{display:none}
.track-dot{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--bmd);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;z-index:1}
.track-dot.done{background:var(--gbg);border-color:var(--green)}
.track-dot.active{background:var(--gold);border-color:var(--gd)}
.track-name{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--ink)}
.track-name.muted{color:var(--muted);font-weight:400}
.track-time{font-size:11px;color:var(--muted);margin-top:2px}
.active-badge{display:inline-block;background:var(--gl);color:var(--gd);font-size:8px;font-weight:700;font-family:var(--fd);padding:2px 8px;border-radius:var(--rpill);letter-spacing:.06em;text-transform:uppercase;margin-left:8px}
/* Sticky bottom */
.sticky-bottom{position:sticky;bottom:76px;background:var(--surface);border-top:0.5px solid var(--border);padding:14px 24px 12px;z-index:50;box-shadow:0 -4px 20px rgba(0,0,0,.06)}
/* Utils */
.px-6{padding-left:24px;padding-right:24px}
.py-4{padding-top:16px;padding-bottom:16px}
.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mb-4{margin-bottom:16px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.text-center{text-align:center}.w-full{width:100%}
/* Spinner */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
.spinner-dark{border-color:rgba(0,0,0,.15);border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
/* Pts bar */
.pts-bar-track{height:5px;background:rgba(255,255,255,.1);border-radius:var(--rpill);margin-top:8px;overflow:hidden}
.pts-bar-fill{height:100%;background:var(--gold);border-radius:var(--rpill);transition:width .6s}