/* ── Service Checkout Plugin – Frontend Styles (Unimax Auto theme) ── */
:root{
  --sc-primary:   #0d52d4;   /* Unimax royal blue */
  --sc-primary-d: #0a3fa8;   /* darker blue (hover) */
  --sc-accent:    #e8201a;   /* Unimax red */
  --sc-accent-d:  #c5160f;   /* darker red (hover) */
  --sc-success:   #1aa260;
  --sc-warning:   #f39c12;
  --sc-light:     #f4f7ff;   /* soft blue tint */
  --sc-border:    #d8e2f5;
  --sc-radius:    10px;
  --sc-shadow:    0 4px 20px rgba(13,82,212,.10);
}

.sc-checkout-wrapper{
  max-width:680px;
  margin:0 auto;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:#1a2640;
  background:#fff;
  border-radius:16px;
  box-shadow:var(--sc-shadow);
  padding:32px;
  border-top:5px solid var(--sc-accent);
}

.sc-step{ animation: scFadeIn .3s ease; }
@keyframes scFadeIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.sc-step-title{
  font-size:1.4rem;
  font-weight:800;
  margin:0 0 24px;
  color:var(--sc-primary);
  border-left:5px solid var(--sc-accent);
  padding-left:14px;
  letter-spacing:-.3px;
}

/* ── Form Groups ── */
.sc-form-group{ margin-bottom:20px; }
.sc-form-group label{ display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:#4a5568; }
.sc-required{ color:var(--sc-accent); }
.sc-input{
  width:100%;
  padding:10px 14px;
  border:2px solid var(--sc-border);
  border-radius:var(--sc-radius);
  font-size:.95rem;
  transition:border-color .2s,box-shadow .2s;
  box-sizing:border-box;
  background:#fff;
}
.sc-input:focus{
  outline:none;
  border-color:var(--sc-accent);
  box-shadow:0 0 0 3px rgba(233,69,96,.12);
}
.sc-textarea{ resize:vertical;min-height:80px; }
.sc-input-prefix{ display:flex;align-items:center; }
.sc-input-prefix span{ background:var(--sc-light);border:2px solid var(--sc-border);border-right:none;padding:10px 12px;border-radius:var(--sc-radius) 0 0 var(--sc-radius);font-weight:700;color:#666; }
.sc-input-prefix input{ border-radius:0 var(--sc-radius) var(--sc-radius) 0; }
.sc-form-row{ display:grid;grid-template-columns:1fr 1fr;gap:16px; }
@media(max-width:500px){ .sc-form-row{ grid-template-columns:1fr; } }

/* ── Service Cards ── */
.sc-service-grid{ display:grid;grid-template-columns:1fr 1fr;gap:10px; }
@media(max-width:480px){ .sc-service-grid{ grid-template-columns:1fr; } }
.sc-service-card{
  border:2px solid var(--sc-border);
  border-radius:var(--sc-radius);
  padding:14px;
  cursor:pointer;
  transition:border-color .2s, background .2s, transform .1s;
  display:flex;flex-direction:column;align-items:flex-start;
  background:#fff;
  user-select:none;
}
.sc-service-card input[type=radio]{ display:none; }
.sc-service-card:hover{ border-color:var(--sc-accent);background:rgba(233,69,96,.03); }
.sc-service-card.selected{ border-color:var(--sc-accent);background:rgba(233,69,96,.07);transform:scale(1.01); }
.sc-service-icon{ font-size:1.6rem;margin-bottom:6px; }
.sc-service-name{ font-weight:600;font-size:.9rem; }
.sc-service-desc{ font-size:.8rem;color:#888;margin-top:2px; }

/* ── Location Cards ── */
.sc-location-grid{ display:grid;grid-template-columns:1fr 1fr;gap:10px; }
@media(max-width:480px){ .sc-location-grid{ grid-template-columns:1fr; } }
.sc-location-card{
  border:2px solid var(--sc-border);
  border-radius:var(--sc-radius);
  padding:16px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;
  user-select:none;
}
.sc-location-card input[type=radio]{ display:none; }
.sc-location-card:hover{ border-color:var(--sc-primary); }
.sc-location-card.selected{ border-color:var(--sc-primary);background:rgba(26,26,46,.05); }
.sc-loc-icon{ font-size:2rem;margin-bottom:8px; }
.sc-loc-name{ font-weight:700;font-size:.95rem; }
.sc-loc-sub{ font-size:.8rem;color:#888; }
.sc-loc-fee{ margin-top:8px;font-weight:700;font-size:.9rem;color:var(--sc-accent); }
.sc-loc-fee.sc-free{ color:var(--sc-success); }

/* ── Address boxes ── */
.sc-address-box{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:12px;
  background:var(--sc-light);
  border:1px solid var(--sc-border);
  border-left:4px solid var(--sc-primary);
  border-radius:8px;
  padding:12px 14px;
  font-size:.9rem;color:#2a3a5c;
}
.sc-address-icon{ font-size:1.4rem;line-height:1; }
.sc-address-customer{ margin-top:14px; }

/* ── Custom Calendar Widget ── */
.sc-calendar{
  background:#fff;
  border:2px solid var(--sc-border);
  border-radius:var(--sc-radius);
  padding:14px;
  margin-top:6px;
  user-select:none;
}
.sc-cal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.sc-cal-title{ font-weight:800;color:var(--sc-primary);font-size:1.05rem; }
.sc-cal-nav{
  background:var(--sc-primary) !important;
  color:#fff !important;border:none !important;
  width:34px !important;height:34px !important;min-height:0 !important;
  border-radius:8px !important;
  font-size:1.3rem !important;line-height:1 !important;cursor:pointer;
  padding:0 !important;margin:0 !important;
  display:flex !important;align-items:center;justify-content:center;
  -webkit-appearance:none;appearance:none;
  box-shadow:none !important;text-shadow:none !important;
  transition:background .15s, transform .1s;
}
.sc-cal-nav:hover:not(:disabled){ background:var(--sc-primary-d) !important;transform:scale(1.05); }
.sc-cal-nav:disabled{ background:#cdd8ee !important;cursor:not-allowed; }
.sc-cal-weekdays{
  display:grid;grid-template-columns:repeat(7,1fr);
  text-align:center;font-size:.72rem;font-weight:700;color:#9aa7c2;
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;
}
.sc-cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;
}
.sc-cal-day{
  -webkit-appearance:none !important;appearance:none !important;
  width:100% !important;min-width:0 !important;
  height:40px !important;min-height:0 !important;max-height:40px !important;
  padding:0 !important;margin:0 !important;
  background:#fff !important;
  border:1px solid var(--sc-border) !important;
  border-radius:8px !important;
  font-size:.9rem !important;font-weight:600 !important;
  color:#2a3a5c !important;
  cursor:pointer;
  display:flex !important;align-items:center;justify-content:center;
  box-shadow:none !important;text-shadow:none !important;
  line-height:1 !important;
  transition:background .12s, color .12s, border-color .12s, transform .08s;
}
.sc-cal-day:hover:not(.sc-cal-disabled):not(.sc-cal-empty){
  background:#eaf2ff !important;border-color:var(--sc-primary) !important;
}
.sc-cal-empty{
  background:transparent !important;border:none !important;cursor:default;
  pointer-events:none;
}
.sc-cal-disabled{
  background:#f4f6fa !important;color:#c2cadb !important;
  border-color:#eef1f7 !important;cursor:not-allowed;
}
.sc-cal-today{ border:2px solid var(--sc-accent) !important;color:var(--sc-accent) !important; }
.sc-cal-selected-day{
  background:var(--sc-primary) !important;color:#fff !important;
  border-color:var(--sc-primary) !important;
  transform:scale(1.04);
  box-shadow:0 3px 10px rgba(13,82,212,.35) !important;
}
.sc-cal-selected{
  margin-top:12px;background:#eaf2ff;border:1px solid var(--sc-border);
  border-left:4px solid var(--sc-success);
  border-radius:8px;padding:9px 12px;font-size:.88rem;color:var(--sc-primary);
}

/* ── Booking Section ── */
.sc-booking-section{
  background:var(--sc-light);
  border:1px solid var(--sc-border);
  border-radius:var(--sc-radius);
  padding:16px;
}
.sc-slots-grid{ display:flex;flex-wrap:wrap;gap:8px;margin-top:10px; }
.sc-slot{
  border:2px solid var(--sc-border);
  border-radius:6px;
  padding:8px 14px;
  cursor:pointer;
  font-size:.875rem;
  background:#fff;
  transition:all .15s;
  user-select:none;
}
.sc-slot input{ display:none; }
.sc-slot:hover{ border-color:var(--sc-accent); }
.sc-slot:has(input:checked){ background:var(--sc-accent);border-color:var(--sc-accent);color:#fff;font-weight:600; }

/* ── Summary Bar ── */
.sc-summary-bar{
  background:var(--sc-primary);
  color:#fff;
  border-radius:var(--sc-radius);
  padding:14px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:20px 0;
  flex-wrap:wrap;
  gap:8px;
}
.sc-summary-items{ display:flex;gap:16px;flex-wrap:wrap;font-size:.875rem;color:#bcd0ff; }
.sc-summary-items strong{ color:#fff; }
.sc-summary-total{ font-size:1.1rem;font-weight:800; }
.sc-summary-total strong{ color:#fff;background:var(--sc-accent);padding:2px 10px;border-radius:6px; }

/* ── Buttons ── */
.sc-btn{
  -webkit-appearance:none !important;appearance:none !important;
  background:var(--sc-accent) !important;
  color:#fff !important;
  border:none !important;
  border-radius:var(--sc-radius) !important;
  padding:14px 28px !important;
  font-size:1.05rem !important;
  font-weight:700 !important;
  cursor:pointer;
  box-shadow:none !important;text-shadow:none !important;
  transition:background .2s, transform .1s;
  width:100% !important;
}
.sc-btn:hover{ background:var(--sc-accent-d) !important;transform:translateY(-1px); }
.sc-btn:disabled{ background:#ccc !important;cursor:not-allowed;transform:none; }
.sc-btn-back{
  -webkit-appearance:none !important;appearance:none !important;
  background:#fff !important;
  border:1.5px solid var(--sc-border) !important;
  color:var(--sc-primary) !important;
  font-size:.88rem !important;
  font-weight:600 !important;
  cursor:pointer;
  padding:7px 16px !important;
  margin:0 0 18px 0 !important;
  border-radius:8px !important;
  box-shadow:none !important;text-shadow:none !important;
  display:inline-flex !important;align-items:center;gap:6px;
  transition:background .15s, border-color .15s, color .15s;
  width:auto !important;
}
.sc-btn-back:hover{
  background:var(--sc-light) !important;
  border-color:var(--sc-primary) !important;
  color:var(--sc-primary-d) !important;
  text-decoration:none !important;
}

/* ── Final Summary ── */
.sc-final-summary{
  background:var(--sc-light);
  border:1px solid var(--sc-border);
  border-radius:var(--sc-radius);
  padding:16px;
  margin-bottom:20px;
}
.sc-final-summary h3{ margin:0 0 12px;font-size:1rem;color:var(--sc-primary); }
.sc-summary-table{ width:100%;border-collapse:collapse;font-size:.875rem; }
.sc-summary-table td{ padding:7px 4px;border-bottom:1px solid var(--sc-border); }
.sc-summary-table td:last-child{ text-align:right; }
.sc-total-row td{ font-size:1rem;border-top:2px solid var(--sc-primary);border-bottom:none;padding-top:10px; }

/* ── Checkbox ── */
.sc-checkbox-wrap label{ display:flex;align-items:center;gap:8px;font-weight:400; }
.sc-checkbox-wrap input[type=checkbox]{
  -webkit-appearance:auto !important;appearance:auto !important;
  width:16px !important;height:16px !important;min-width:16px !important;
  flex:0 0 16px !important;
  margin:0 !important;padding:0 !important;
  accent-color:var(--sc-accent);
  box-shadow:none !important;
}

/* ── Messages ── */
.sc-error{
  background:#fff5f5;
  border:1px solid #f7c5c0;
  border-left:4px solid var(--sc-accent);
  color:#c5160f;
  border-radius:6px;
  padding:11px 14px;
  margin-bottom:14px;
  font-size:.9rem;
  font-weight:600;
  animation: scShake .35s ease;
}
@keyframes scShake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-6px) }
  40%{ transform:translateX(6px) }
  60%{ transform:translateX(-4px) }
  80%{ transform:translateX(4px) }
}
.sc-success{ background:#f0fff4;border:1px solid #c6f6d5;color:#276749;border-radius:6px;padding:10px 14px;margin-bottom:12px; }

/* Invalid field / group highlight */
.sc-invalid{ border-color:var(--sc-accent) !important; box-shadow:0 0 0 3px rgba(232,32,26,.12) !important; }
.sc-service-grid.sc-invalid,
#sc-booking-section.sc-invalid,
#sc-time-slots.sc-invalid{
  outline:2px solid var(--sc-accent);
  outline-offset:4px;
  border-radius:var(--sc-radius);
}
.sc-checkbox-wrap.sc-invalid label{ color:var(--sc-accent); }

/* ── Thank You ── */
.sc-thankyou{ text-align:center;padding:40px 20px; }
.sc-thankyou-icon{ font-size:4rem;margin-bottom:16px; }
.sc-thankyou h2{ font-size:1.8rem;color:var(--sc-primary);margin:0 0 12px; }
.sc-thankyou p{ color:#555;font-size:1rem; }
.sc-order-ref{ font-size:1.1rem;margin-top:16px; }