/* Servis AirCond — stylesheet utama (tema biru/putih) */

:root{
  --primary:#1d63d1;
  --primary-dark:#164ea3;
  --primary-light:#eaf1fd;
  --teal:#12968c;
  --teal-light:#e3f6f4;
  --amber:#e2a63f;
  --amber-light:#fdf3e0;
  --amber-dark:#8a5b12;
  --red:#d6473f;
  --red-light:#fbeaea;
  --ink:#16233a;
  --ink-muted:#5c6b81;
  --ink-faint:#93a1b3;
  --bg:#f5f8fb;
  --surface:#ffffff;
  --border:#e3e8ee;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--primary-dark);}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;font-size:14.5px;color:var(--ink);}
::placeholder{color:var(--ink-faint);}
img{max-width:100%;}
[hidden]{display:none!important;}

.phone-shell{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  position:relative;
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* ---------- Layout helpers ---------- */
.stack-10>*+*{margin-top:10px;}
.stack-12>*+*{margin-top:12px;}
.stack-14>*+*{margin-top:14px;}
.stack-16>*+*{margin-top:16px;}
.stack-18>*+*{margin-top:18px;}
.stack-22>*+*{margin-top:22px;}
.two-col{display:flex;gap:9px;}
.two-col>*{flex:1;min-width:0;}

.section-label{
  font-family:'Sora',sans-serif;font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:10px;
}
.tiny-muted{font-size:11.5px;color:var(--ink-faint);}
.hint-text{font-size:11px;color:var(--ink-faint);margin-top:7px;}

/* ---------- Home ---------- */
.home-hero{padding:36px 24px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.brand-icon{width:64px;height:64px;border-radius:18px;background:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(29,99,209,.45);}
.brand-title{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;letter-spacing:-0.02em;}
.brand-title-white{color:#fff;}
.brand-tagline{font-size:13.5px;color:var(--ink-muted);}

.cta-card{display:flex;align-items:center;gap:16px;padding:20px;border-radius:18px;cursor:pointer;}
.cta-primary{background:var(--primary);}
.cta-secondary{background:var(--surface);border:1.5px solid var(--border);}
.cta-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cta-icon-light{background:rgba(255,255,255,.16);}
.cta-icon-tint{background:var(--primary-light);}
.cta-text{flex:1;}
.cta-title{font-family:'Sora',sans-serif;font-weight:700;font-size:16.5px;color:var(--ink);}
.cta-title-light{color:#fff;}
.cta-sub{font-size:12.5px;color:var(--ink-muted);margin-top:2px;}
.cta-sub-light{color:rgba(255,255,255,.82);}
.chev{flex-shrink:0;}

.service-icon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.service-icon-item{display:flex;flex-direction:column;align-items:center;gap:6px;}
.service-icon-circle{width:52px;height:52px;border-radius:14px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.service-icon-label{font-size:10.5px;color:var(--ink-muted);text-align:center;line-height:1.25;}

.footnote-row{margin-top:auto;padding:18px 24px 4px;display:flex;align-items:center;justify-content:center;gap:8px;}
.footnote-text{font-size:12px;color:var(--ink-muted);}
.provider-link-row{padding:10px 24px 28px;text-align:center;}
.provider-link-row a{font-size:12px;color:var(--ink-faint);}

/* ---------- Page header / progress ---------- */
.page-header{background:var(--surface);border-bottom:1px solid var(--border);}
.header-row{display:flex;align-items:center;gap:14px;padding:22px 20px 14px;}
.back-btn{width:34px;height:34px;border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.back-btn-teal{background:var(--teal-light);}
.header-title{font-family:'Sora',sans-serif;font-weight:700;font-size:17px;}
.progress-row{display:flex;gap:6px;padding:0 20px 16px;}
.progress-bar{height:5px;border-radius:3px;flex:1;background:var(--border);}
.progress-active{background:var(--primary);}
.progress-done{background:var(--teal);}

.page-body{padding:20px 20px 40px;}

/* Halaman yang ada butang tetap (.bottom-bar) di bawah perlukan ruang
   tambahan supaya kandungan terakhir (cth: pilihan waktu temujanji) tidak
   tersorok/tertutup oleh butang tersebut — penting terutama di iPhone
   yang ada "home indicator" (safe-area-inset-bottom). */
.page-body-has-bottom-bar{padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px));}

/* ---------- Flash / alerts ---------- */
.flash{border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:14px;}
.flash-error{background:var(--red-light);color:var(--red);}
.flash-ok{background:var(--teal-light);color:var(--teal);}

/* ---------- Form inputs ---------- */
.input-row{background:var(--surface);border:1.5px solid var(--border);border-radius:13px;padding:12px 14px;display:flex;align-items:center;gap:10px;}
.input-row input,.input-row textarea,.input-row select{border:none;outline:none;background:transparent;width:100%;}
.input-row-area{align-items:flex-start;}
.input-row-area textarea{resize:vertical;line-height:1.4;min-height:44px;}
.input-row-soft{background:var(--bg);}
.plain-input{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:11px;padding:11px 13px;font-size:14px;font-weight:600;color:var(--ink);outline:none;}

.field-card{background:var(--surface);border:1.5px solid var(--border);border-radius:13px;padding:12px 14px;}
.field-card select{width:100%;border:none;outline:none;background:transparent;font-size:14px;font-weight:600;}
.field-label{font-size:11px;color:var(--ink-faint);margin-bottom:6px;}

.stepper{display:flex;align-items:center;justify-content:space-between;}
.stepper input{width:36px;text-align:center;border:none;background:transparent;font-size:14px;font-weight:600;outline:none;}
.stepper-btn{width:22px;height:22px;border-radius:7px;border:none;background:var(--primary-light);color:var(--primary);font-weight:700;font-size:15px;line-height:1;cursor:pointer;}
.stepper-btn-fill{background:var(--primary);color:#fff;}

/* Selection cards (radio, hidden input + styled label) */
.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.option-card{position:relative;display:block;border-radius:13px;padding:12px;border:1.5px solid var(--border);background:var(--surface);cursor:pointer;}
.option-card input{position:absolute;opacity:0;pointer-events:none;}
.option-label{display:block;font-size:13px;font-weight:600;color:var(--ink-muted);}
.option-hint{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:3px;}
.option-check{position:absolute;top:10px;right:10px;color:var(--primary);display:none;}
.option-card input:checked ~ .option-check{display:block;}
.option-card:has(input:checked),.option-card.is-checked{border-color:var(--primary);background:var(--primary-light);}
.option-card:has(input:checked) .option-label,.option-card.is-checked .option-label{color:var(--primary-dark);font-weight:700;}
.option-card.is-checked .option-check{display:block;}

.slot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.slot-card{position:relative;display:block;border-radius:11px;padding:10px 6px;border:1.5px solid var(--border);background:var(--surface);text-align:center;font-size:11.5px;font-weight:600;color:var(--ink-muted);cursor:pointer;}
.slot-card input{position:absolute;opacity:0;pointer-events:none;}
.slot-range{font-weight:500;}
.slot-card:has(input:checked),.slot-card.is-checked{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark);font-weight:700;}

/* ---------- Buttons ---------- */
.btn-block{width:100%;}
.btn-primary{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--primary);color:#fff;border:none;border-radius:14px;padding:15px;
  font-weight:700;font-size:15px;cursor:pointer;text-align:center;
}
.btn-primary:hover{background:var(--primary-dark);color:#fff;}
.btn-teal{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--teal);color:#fff;border:none;border-radius:14px;padding:15px;
  font-weight:700;font-size:15px;cursor:pointer;text-align:center;
}
.btn-teal:hover{color:#fff;opacity:.92;}
.btn-outline{
  display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);
  border-radius:14px;padding:14px;font-weight:700;font-size:14.5px;color:var(--ink);background:var(--surface);
}
.btn-outline-red{
  flex:1;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--red);
  border-radius:14px;padding:14px;font-weight:700;font-size:14px;color:var(--red);background:var(--surface);cursor:pointer;
}
.btn-tint{
  display:flex;align-items:center;justify-content:center;gap:8px;background:var(--primary-light);
  border:none;border-radius:11px;padding:11px;font-size:12.5px;font-weight:700;color:var(--primary-dark);cursor:pointer;
}
.split-btn-row{display:flex;gap:10px;}

.bottom-bar{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;
  background:var(--surface);border-top:1px solid var(--border);
  padding:14px 20px calc(26px + env(safe-area-inset-bottom,0px));
  z-index:20;
}

/* ---------- Map ---------- */
.map-wrap{position:relative;}
.map-box{width:100%;height:340px;background:#e7edf3;}
.map-box-small{height:150px;}
.map-gps-btn{
  position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:7px;
  background:var(--surface);border:none;border-radius:24px;padding:10px 16px;
  box-shadow:0 6px 16px -4px rgba(20,30,50,.25);cursor:pointer;font-size:12.5px;font-weight:700;color:var(--primary-dark);z-index:410;
}
.map-hint{
  position:absolute;left:16px;top:16px;background:var(--surface);border-radius:10px;padding:6px 10px;
  font-size:11px;color:var(--ink-muted);box-shadow:0 4px 10px -4px rgba(20,30,50,.2);z-index:410;
}
.map-gps-status{
  position:absolute;left:16px;bottom:16px;background:var(--teal-light);color:var(--teal);border-radius:10px;
  padding:6px 10px;font-size:11px;font-weight:600;z-index:410;
}

/* ---------- Case number / confirmation ---------- */
.case-no-card{background:var(--primary);border-radius:18px;padding:22px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.case-no-label{font-size:12px;color:rgba(255,255,255,.8);font-weight:600;letter-spacing:.03em;text-transform:uppercase;}
.case-no-value{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;color:#fff;letter-spacing:.02em;}
.case-no-actions{display:flex;gap:10px;margin-top:4px;}
.chip-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:none;border-radius:10px;padding:8px 14px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;}

.status-pill-row{display:flex;align-items:center;gap:8px;}
.dot{width:8px;height:8px;border-radius:50%;}
.dot-amber{background:var(--amber);}

.badge{font-size:13px;font-weight:700;padding:5px 12px;border-radius:20px;}
.badge-pill{font-size:10.5px;font-weight:800;padding:5px 11px;border-radius:20px;white-space:nowrap;}
.badge-amber{color:var(--amber-dark);background:var(--amber-light);}
.badge-blue{color:var(--primary-dark);background:var(--primary-light);}
.badge-red{color:var(--red);background:var(--red-light);}
.badge-teal{color:var(--teal);background:var(--teal-light);}

.info-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:18px;}
.info-card-title{font-family:'Sora',sans-serif;font-weight:700;font-size:13.5px;color:var(--ink);}
.row-card{display:flex;align-items:center;gap:12px;padding:16px;}
.kv-row{display:flex;justify-content:space-between;font-size:13px;}
.kv-key{color:var(--ink-muted);}
.kv-val{font-weight:600;text-align:right;}
.divider{height:1px;background:var(--border);}

.address-row{display:flex;gap:10px;align-items:flex-start;}
.address-text{font-size:12.5px;color:var(--ink-muted);line-height:1.45;}
.address-note{color:var(--ink-faint);}

.tip-card{display:flex;gap:10px;align-items:center;background:var(--primary-light);border-radius:13px;padding:13px 14px;}
.tip-card-teal{background:var(--teal-light);}
.tip-text{font-size:12px;color:var(--primary-dark);line-height:1.4;}

.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:36px 24px;text-align:center;}
.empty-icon{width:56px;height:56px;border-radius:16px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;}
.empty-text{font-size:13px;color:var(--ink-faint);line-height:1.5;}

/* ---------- Status check / timeline ---------- */
.case-result-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:10px;}
.case-result-no{font-size:11.5px;color:var(--ink-faint);margin-top:2px;}

.timeline{display:flex;flex-direction:column;}
.timeline-row{display:flex;gap:12px;}
.timeline-marker-col{display:flex;flex-direction:column;align-items:center;}
.timeline-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.timeline-dot-done{background:var(--teal);}
.timeline-dot-current{background:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
.timeline-dot-upcoming{background:var(--surface);border:2px solid var(--border);}
.timeline-dot-inner{width:8px;height:8px;border-radius:50%;background:#fff;}
.timeline-line{width:2px;flex:1;min-height:26px;}
.timeline-line-done{background:var(--teal);}
.timeline-line-upcoming{background:var(--border);}
.timeline-label{font-size:13px;font-weight:700;padding-bottom:18px;}
.timeline-label-done{color:var(--ink);}
.timeline-label-current{color:var(--primary-dark);}
.timeline-label-upcoming{color:var(--ink-faint);font-weight:500;}

/* ---------- Provider: login ---------- */
.provider-login-shell{background:var(--primary);min-height:100vh;display:flex;flex-direction:column;}
.login-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px;text-align:center;}
.login-subtitle{font-size:13px;color:rgba(255,255,255,.8);}
.login-panel{background:var(--surface);border-radius:26px 26px 0 0;padding:30px 24px calc(34px + env(safe-area-inset-bottom,0px));}
.login-footnote{text-align:center;font-size:11.5px;color:var(--ink-faint);margin-top:4px;}
.pw-toggle-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;}

/* ---------- Provider: dashboard ---------- */
.provider-topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:22px 20px 16px;display:flex;align-items:center;justify-content:space-between;}
.provider-topbar-left{display:flex;align-items:center;gap:10px;}
.avatar-badge{width:40px;height:40px;border-radius:12px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;color:var(--primary);font-size:15px;flex-shrink:0;}
.avatar-badge-light{width:42px;height:42px;border-radius:50%;}
.provider-name{font-family:'Sora',sans-serif;font-weight:700;font-size:14.5px;}
.logout-btn{width:38px;height:38px;border-radius:11px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

.stat-row{display:flex;gap:10px;padding:16px 20px 4px;}
.stat-tile{flex:1;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:12px;text-align:center;display:block;}
.stat-tile-active{border-color:var(--primary);background:var(--primary-light);}
.stat-num{font-family:'Sora',sans-serif;font-weight:800;font-size:19px;}
.stat-label{font-size:10.5px;color:var(--ink-muted);margin-top:2px;}

.chip-row{display:flex;gap:8px;padding:16px 20px 4px;overflow-x:auto;}
.filter-chip{background:var(--surface);border:1.5px solid var(--border);color:var(--ink-muted);font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:20px;white-space:nowrap;}
.filter-chip-active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700;}

.case-list-card{position:relative;display:block;background:var(--surface);border:1.5px solid var(--border);border-radius:15px;padding:14px;}
.case-list-card-highlight{border-color:var(--primary);}
.case-list-badge{position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:8px;letter-spacing:.03em;}
.case-list-no{font-size:11px;color:var(--ink-faint);margin-bottom:3px;}
.case-list-title{font-family:'Sora',sans-serif;font-weight:700;font-size:14.5px;margin-bottom:6px;padding-right:70px;}
.case-list-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-muted);margin-bottom:3px;}

.bottom-nav{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;
  background:var(--surface);border-top:1px solid var(--border);
  padding:10px 24px calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:space-around;z-index:20;
}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--ink-faint);}
.bottom-nav-active{color:var(--primary);font-weight:700;}

.icon-btn{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon-btn-teal{background:var(--teal);}

.done-banner{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--teal-light);color:var(--teal);border-radius:14px;padding:14px;font-weight:700;font-size:14px;}
.done-banner-red{background:var(--red-light);color:var(--red);}

/* ---------- Print (halaman pengesahan) ---------- */
@media print{
  .page-header,.bottom-bar,.bottom-nav,.provider-link-row,.map-gps-btn,.map-hint{display:none!important;}
  body{background:#fff;}
  .phone-shell{max-width:100%;}
}

/* ---------- Responsif skrin kecil ---------- */
@media (max-width:400px){
  .option-grid{gap:7px;}
  .service-icon-label{font-size:9.5px;}
}