/* ---------- Periodic service check: booking wizard modal ---------- */

.btn-outline-dark{border:2px solid var(--line-300); color:var(--ink); background:transparent;}
.btn-outline-dark:hover{border-color:var(--navy-600); background:var(--fog-100);}

/* ---------- Modal shell ---------- */
.svc-modal[hidden]{display:none;}
.svc-modal{position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center;}
.svc-modal-backdrop{position:absolute; inset:0; background:rgba(14,19,27,0.6); backdrop-filter:blur(2px);}
.svc-modal-dialog{
  position:relative; width:100%; height:100%; max-height:100dvh; overflow-y:auto;
  background:var(--white); border-radius:0;
  padding:var(--space-6) var(--space-5) var(--space-7);
  box-shadow:var(--shadow-elevated);
  animation:svc-slide-up var(--dur-base) var(--ease);
}
@keyframes svc-slide-up{from{transform:translateY(24px); opacity:0;} to{transform:translateY(0); opacity:1;}}
@media (min-width:640px){
  .svc-modal{align-items:center;}
  .svc-modal-dialog{max-width:520px; height:auto; max-height:92vh; border-radius:var(--radius-lg); padding:var(--space-7);}
}

.svc-modal-close{
  position:absolute; top:var(--space-4); left:var(--space-4);
  width:36px; height:36px; border-radius:var(--radius-pill);
  background:var(--fog-100); color:var(--steel); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
.svc-modal-close:hover{background:var(--line-200);}

.svc-modal-progress{display:flex; gap:var(--space-3); margin-bottom:var(--space-6); padding-left:var(--space-8);}
.svc-step-dot{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-label); font-weight:600; font-size:0.8rem; color:var(--slate);
}
.svc-step-dot::before{
  content:attr(data-step); display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:var(--radius-pill); background:var(--fog-200); color:var(--steel);
  font-size:0.75rem;
}
.svc-step-dot em{font-style:normal; display:none;}
@media (min-width:400px){ .svc-step-dot em{display:inline;} }
.svc-step-dot.is-active::before{background:var(--amber-500); color:var(--navy-900);}
.svc-step-dot.is-active{color:var(--ink);}

.svc-modal-dialog h2{font-size:var(--text-h3); color:var(--ink); margin-bottom:var(--space-5);}

.svc-panel{display:none; flex-direction:column; gap:var(--space-4);}
.svc-panel.is-active{display:flex;}

.svc-error{
  background:rgba(214,92,92,0.08); border:1px solid var(--danger-500); color:var(--danger-700);
  border-radius:var(--radius-md); padding:10px 14px; font-size:0.88rem;
}
.svc-error[hidden]{display:none;}

.svc-vehicle-card{
  background:var(--fog-100); border:1px solid var(--line-200); border-radius:var(--radius-md);
  padding:var(--space-4); margin-top:var(--space-2); display:flex; flex-direction:column; gap:var(--space-3);
}
.svc-vehicle-card[hidden]{display:none;}
.svc-vehicle-card-title{font-family:var(--font-label); font-weight:700; font-size:1.05rem; color:var(--ink);}
.svc-vehicle-card-sub{color:var(--steel); font-size:0.9rem;}
.svc-vehicle-card-actions{display:flex; flex-direction:column; gap:var(--space-2);}

.svc-file-status{
  font-size:0.85rem; margin-top:8px; padding:8px 12px; border-radius:var(--radius-md);
  background:var(--fog-100); color:var(--steel);
}
.svc-file-status[hidden]{display:none;}
.svc-file-status.is-ready{background:rgba(37,211,102,0.1); color:var(--success-700); font-weight:600;}
.svc-file-status.is-pending{background:rgba(232,163,61,0.1); color:var(--amber-700);}

.svc-checkbox{display:flex; align-items:flex-start; gap:10px; font-size:0.86rem; color:var(--steel); cursor:pointer; flex-direction:row;}
.svc-checkbox input{margin-top:3px; width:16px; height:16px; flex-shrink:0;}

.svc-step-actions{display:flex; gap:var(--space-3); margin-top:var(--space-2);}
.svc-step-actions .btn{flex:1;}

.svc-success-icon{
  width:56px; height:56px; border-radius:var(--radius-pill); background:rgba(37,211,102,0.12); color:var(--success-700);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto var(--space-4);
}
#svcSuccess{text-align:center;}
#svcSuccess .btn{margin-top:var(--space-5);}

.svc-loading{opacity:0.6; pointer-events:none;}

/* ---------- Step 2: request-type hierarchy ---------- */
.svc-type-primary{margin-bottom:var(--space-3);}
.svc-type-primary-option{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  border:2px solid var(--amber-500); border-radius:var(--radius-md);
  background:rgba(232,163,61,0.08); padding:var(--space-4);
  font-family:var(--font-label); font-weight:700; font-size:1.05rem; color:var(--ink);
}
.svc-type-primary-option input{width:18px; height:18px; flex-shrink:0;}
.svc-type-secondary{margin-bottom:var(--space-3);}
.svc-type-more-toggle{
  display:block; width:100%; text-align:center; background:none; border:none;
  color:var(--navy-700); font-weight:600; font-size:0.9rem; padding:8px 0; cursor:pointer;
}
.svc-type-more{margin-top:var(--space-2);}

/* ---------- Step 3: dual upload CTAs ---------- */
.svc-upload-actions{display:flex; flex-direction:column; gap:var(--space-2);}

/* ---------- Step 4: continuation choice cards ---------- */
.svc-choice-grid{display:flex; flex-direction:column; gap:var(--space-3);}
.svc-choice-card{
  display:flex; flex-direction:column; gap:6px; text-align:right;
  border:2px solid var(--line-300); border-radius:var(--radius-md);
  background:var(--white); padding:var(--space-4); cursor:pointer;
  transition:border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.svc-choice-card:hover{border-color:var(--amber-500);}
.svc-choice-card:active{background:var(--fog-100);}
.svc-choice-title{font-family:var(--font-label); font-weight:700; font-size:1rem; color:var(--ink);}
.svc-choice-desc{font-size:0.86rem; color:var(--steel); line-height:1.5;}
.svc-choice-card.is-loading, .svc-choice-card:disabled{opacity:0.6; pointer-events:none;}

/* ---------- Steps 5–6: preferred date/time + summary ---------- */
#svcBookingStep .pp-slots{margin-top:var(--space-2);}
.svc-link-btn{
  background:none; border:none; padding:0; color:var(--navy-700); font-weight:600;
  text-decoration:underline; cursor:pointer; font-size:inherit; font-family:inherit;
}
.svc-link-btn:hover{color:var(--amber-700);}