/* MYA Autolocksmith — styles (navy #0A1931 + gold) */
:root{
  --navy:#0A1931; --navy2:#12294d; --gold:#E3A81C; --gold2:#C9930A;
  --bg:#F7F4EC; --card:#FFFFFF; --ink:#1B2430; --muted:#5B6572;
  --green:#22B573; --red:#C0392B; --radius:16px;
  --contact-h:64px; --nav-h:62px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
}
.hidden{display:none !important}

/* Header */
.app-header{background:var(--navy); color:#fff; position:sticky; top:0; z-index:40;
  padding-top:env(safe-area-inset-top)}
.header-inner{display:flex; align-items:center; gap:12px; padding:12px 16px; max-width:720px; margin:0 auto}
.header-logo{width:52px; height:52px; border-radius:50%; flex:0 0 auto}
.header-text{flex:1; min-width:0}
.wordmark{font-weight:800; font-size:20px; letter-spacing:.5px}
.wordmark span{color:var(--gold)}
.header-sub{font-size:11px; opacity:.85; text-transform:uppercase; letter-spacing:.4px}
.header-hours{font-size:12px; margin-top:2px; opacity:.95}
.lang-toggle{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55);
  border-radius:999px; padding:7px 12px; font-size:13px; font-weight:700; cursor:pointer; flex:0 0 auto}

/* Layout — generous bottom padding so the fixed bars never cover content */
main{max-width:720px; margin:0 auto; padding:18px 16px calc(var(--contact-h) + var(--nav-h) + 48px + env(safe-area-inset-bottom))}
.view h1{font-size:26px; color:var(--navy); margin:6px 0 8px}
.view h2{font-size:19px; color:var(--navy); margin:18px 0 8px}
.lead{color:var(--muted); margin:0 0 16px; font-size:15px}

/* Home services */
.service-grid{display:grid; gap:12px}
.service-card{display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  background:var(--card); border:2px solid #E8E2D2; border-radius:var(--radius);
  padding:18px 16px; cursor:pointer; box-shadow:0 1px 3px rgba(10,25,49,.06)}
.service-card:active{border-color:var(--gold)}
.service-emoji{font-size:30px}
.service-name{flex:1; font-size:18px; font-weight:800; color:var(--navy)}
.service-price{font-weight:800; color:var(--gold2); font-size:16px; white-space:nowrap}
.secondary-service{margin-top:12px; width:100%; background:var(--navy); color:#fff; border:0;
  border-radius:var(--radius); padding:15px 16px; font-size:16px; font-weight:700; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center}
.price-inline{color:var(--gold); font-weight:800}
.warn-note{color:var(--red); font-weight:700; font-size:13px; margin:8px 2px 0}
.trust-box{margin-top:20px; background:#fff; border:1px solid #E8E2D2; border-radius:var(--radius); padding:14px 16px; font-size:14px}
.trust-box p{margin:6px 0}
.review-link{color:var(--navy); font-weight:700}

/* Forms */
.field{display:block; margin:0 0 14px}
.field > span{display:block; font-weight:700; font-size:14px; margin-bottom:6px; color:var(--navy)}
.field input,.field select,.field textarea{
  width:100%; padding:13px 12px; font-size:16px; border:1.5px solid #C9CFD8; border-radius:12px;
  background:#fff; color:var(--ink); appearance:none}
.field textarea{resize:vertical}
.btn-primary{width:100%; background:var(--gold); color:var(--navy); border:0; border-radius:14px;
  padding:16px; font-size:17px; font-weight:800; cursor:pointer; margin-top:6px}
.btn-primary:disabled{opacity:.55}
.btn-secondary{width:100%; background:#fff; color:var(--navy); border:2px solid var(--navy);
  border-radius:14px; padding:13px; font-size:15px; font-weight:700; cursor:pointer; margin-top:10px}
.btn-danger{background:#fff; color:var(--red); border:2px solid var(--red); border-radius:12px;
  padding:10px 14px; font-weight:700; cursor:pointer}

/* Quote flow */
.progress-wrap{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.back-btn{background:none; border:0; font-size:15px; font-weight:700; color:var(--navy); cursor:pointer; padding:6px 0}
.progress-bar{flex:1; height:10px; background:#E4DFCE; border-radius:99px; overflow:hidden}
#quote-progress{height:100%; background:var(--gold); width:20%; transition:width .25s}
.step-label{font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap}
.step-title{font-size:22px; color:var(--navy); margin:4px 0 14px}
.choice-list{display:grid; gap:10px}
.choice-btn{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff;
  border:2px solid #E8E2D2; border-radius:14px; padding:15px 14px; font-size:16px; font-weight:700;
  color:var(--navy); cursor:pointer}
.choice-btn.selected{border-color:var(--gold); background:#FFF7E0}
.choice-btn .big-emoji{font-size:26px}
.choice-btn small{display:block; font-weight:500; color:var(--muted); font-size:13px}
.notice-box{background:#FFF3CD; border:1.5px solid var(--gold); border-radius:14px; padding:13px 14px;
  font-size:14px; margin:0 0 14px}
.summary-box{background:#fff; border:1.5px solid #E8E2D2; border-radius:14px; padding:14px 16px; font-size:15px; margin:12px 0}
.summary-box p{margin:5px 0}
.summary-box .price-big{font-size:24px; font-weight:800; color:var(--navy)}
.deals-box{background:#EAF7EF; border:1.5px solid #BFE6CE; border-radius:14px; padding:12px 14px; font-size:14px; margin:0 0 14px}
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff;
  border:1.5px solid #E8E2D2; border-radius:14px; padding:13px 14px; margin:0 0 14px; font-weight:700; color:var(--navy); font-size:15px}
.toggle-row input{width:24px; height:24px; accent-color:var(--gold2)}
details.more-box{background:#fff; border:1.5px solid #E8E2D2; border-radius:14px; padding:12px 14px; margin:0 0 14px}
details.more-box summary{font-weight:700; color:var(--navy); cursor:pointer}

/* Error / info banners */
.error-banner{background:#FDECEA; border:2px solid var(--red); color:#7B241C; border-radius:14px;
  padding:14px; font-size:15px; font-weight:600; margin:12px 0}
.error-banner .btn-retry{margin-top:10px; background:var(--red); color:#fff; border:0; border-radius:10px;
  padding:11px 16px; font-size:15px; font-weight:800; cursor:pointer; width:100%}
.info-banner{background:#EAF0FA; border:1.5px solid #9DB8DD; color:var(--navy); border-radius:14px;
  padding:13px 14px; font-size:14px; margin:12px 0}
#global-banner{position:fixed; left:12px; right:12px; bottom:calc(var(--contact-h) + var(--nav-h) + 14px + env(safe-area-inset-bottom)); z-index:60}
#install-bar{position:fixed; left:12px; right:12px; bottom:calc(var(--contact-h) + var(--nav-h) + 14px + env(safe-area-inset-bottom)); z-index:61;
  background:var(--navy); color:#fff; border:2px solid var(--gold); border-radius:14px; padding:14px 16px; box-shadow:0 8px 24px rgba(0,0,0,.25)}
#install-bar h4{margin:0 0 4px; font-size:16px}
#install-bar p{margin:0 0 10px; font-size:14px; opacity:.92}
#install-bar .ib-actions{display:flex; gap:10px; align-items:center}
#install-bar .ib-install{flex:1; background:var(--gold); color:var(--navy); border:0; border-radius:10px; padding:11px; font-weight:800; font-size:15px; cursor:pointer}
#install-bar .ib-close{background:none; border:0; color:#fff; font-size:18px; cursor:pointer; padding:6px}

/* Timeline */
.timeline{list-style:none; margin:10px 0; padding:0}
.timeline li{display:flex; align-items:center; gap:12px; padding:7px 0; color:var(--muted); font-weight:600}
.timeline .dot{width:30px; height:30px; border-radius:50%; background:#D8DCE3; color:#fff; display:flex;
  align-items:center; justify-content:center; font-weight:800; flex:0 0 auto}
.timeline li.done{color:var(--navy)}
.timeline li.done .dot{background:var(--gold); color:var(--navy)}
.timeline li.cancelled{color:var(--red)}

/* Request cards */
.req-card{background:#fff; border:1.5px solid #E8E2D2; border-radius:14px; padding:14px 16px; margin:0 0 12px}
.req-card h3{margin:0 0 4px; color:var(--navy); font-size:17px}
.req-meta{font-size:13px; color:var(--muted); margin:2px 0}
.status-chip{display:inline-block; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:800;
  background:#EAF0FA; color:var(--navy)}
.status-chip.s-Requested{background:#FFF3CD} .status-chip.s-Confirmed{background:#D9EAD3}
.status-chip.s-On-the-way{background:#CFE2F3} .status-chip.s-Arrived{background:#D9D2E9}
.status-chip.s-Done{background:#B6D7A8} .status-chip.s-Cancelled{background:#F4CCCC}
.card-actions{display:flex; gap:8px; margin-top:10px}
.card-actions a{flex:1; text-align:center; text-decoration:none; font-weight:800; border-radius:10px; padding:11px 8px; font-size:14px}
.filters{display:flex; gap:10px; margin:0 0 14px}
.filters .field{flex:1; margin:0}
.mini{font-size:13px; color:var(--muted)}

/* Fixed bars */
.contact-bar{position:fixed; left:0; right:0; bottom:var(--nav-h); height:var(--contact-h); z-index:50;
  display:flex; gap:10px; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:rgba(247,244,236,.97); border-top:1px solid #E8E2D2}
.contact-bar a{flex:1; display:flex; align-items:center; justify-content:center; text-decoration:none;
  font-weight:800; font-size:16px; border-radius:12px}
.btn-call{background:var(--gold); color:var(--navy)}
.btn-wa{background:var(--green); color:#fff}
.bottom-nav{position:fixed; left:0; right:0; bottom:0; height:calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index:50;
  display:flex; background:var(--navy); padding-bottom:env(safe-area-inset-bottom)}
.nav-btn{flex:1; background:none; border:0; color:#B9C4D6; font-size:19px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:6px 2px}
.nav-btn span{font-size:11px; font-weight:700}
.nav-btn.active{color:var(--gold)}

@media (max-width:420px){
  .header-logo{width:44px; height:44px}
  .wordmark{font-size:17px}
  .header-hours{display:none}
}