:root{
  --bg1:#eff6ff;
  --bg2:#e0e7ff;
  --primary:#2563eb;
  --primary-700:#1d4ed8;
  --ink:#0f172a;
  --muted:#64748b;
  --surface:#ffffff;
  --ring:#93c5fd;
  --shadow:0 24px 40px rgba(15,23,42,.12), 0 8px 16px rgba(15,23,42,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%; font-family:ArialLocal,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
body{margin:0; color:var(--ink); display:flex; align-items:center; justify-content:center; padding:28px; overflow:auto; font-family:ArialLocal,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
@media (max-width: 640px){ body{padding:5px} }
.card{ width:100%; max-width:1100px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; overflow:hidden; display:flex; flex-direction:column; gap:16px; max-height:92vh; }
@media (max-width: 640px){ .card{ max-height:none } }
.page-header{ position:sticky; top:0; background:#fff; z-index:5; padding-bottom:8px }
.form-body{overflow:auto; padding-right:4px; font-family:ArialLocal,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif }
header{display:grid; gap:8px; justify-items:center; text-align:center}
header .brand{display:flex; gap:10px; align-items:center}
.brand .logo{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--primary), var(--primary-700))}
h1{margin:0; font-size:clamp(22px, 2.6vw, 34px); color:var(--primary-700)}
.sub{margin:0 0 14px; color:var(--muted); font-size:15px}

/* Mobile header compaction */
@media (max-width: 640px){
  .card{ padding:16px }
  .page-header{ padding-bottom:4px }
  header{ gap:6px }
  .brand .logo{ width:32px; height:32px }
  h1{ font-size:18px }
  .sub{ font-size:12px; margin:0 0 8px }
  .stepper{ gap:8px; margin-bottom:2px }
  .dot{ width:22px; height:22px; font-size:12px }
}

/* Progress */
.progress{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:10px 0 12px }
.bar{ position:relative; height:10px; background:#e5e7eb; border-radius:999px; overflow:hidden }
.bar::after{content:""; position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--primary),var(--primary-700)); transition:width .35s ease}
.bar[data-step="1"]::after{ width:33.33% }
.bar[data-step="2"]::after{ width:66.66% }
.bar[data-step="3"]::after{ width:100% }

.stepper{display:flex; gap:12px; justify-content:center; margin-bottom:4px}
.dot{width:28px; height:28px; border-radius:999px; background:#eef2ff; color:#4f46e5; display:grid; place-items:center; font-weight:700; border:1px solid #e5e7eb; opacity:.6; transition:opacity .2s}
.dot.active{opacity:1; background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe}

/* Layout */
.grid{ display:grid; gap:16px }
@media (min-width:900px){ .grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* Form controls */
label{ display:block; font-size:14px; color:#334155; margin:2px 0 8px; font-weight:600 }
.input, .textarea, .file, .select2-container .select2-selection--single{
  width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; font-size:16px; background:#fff; outline:none; transition:border-color .2s, box-shadow .2s
}
.input{ min-height:48px }
.textarea{ min-height:120px; resize:vertical }
.input:focus, .textarea:focus, .file:focus, .select2-container--default .select2-selection--single:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--ring) }
.hint{font-size:12px; color:#6b7280; margin-top:6px}

/* Checkbox/Radio row */
.check{ display:flex; align-items:center; gap:10px; font-size:15px }
.check input{ width:18px; height:18px }

/* Buttons */
.row{ display:flex; gap:12px; justify-content:space-between; margin-top:10px; flex-wrap:wrap }
.btn{ appearance:none; border:none; border-radius:12px; padding:12px 18px; font-weight:700; cursor:pointer; transition:transform .06s ease, background .2s, box-shadow .2s }
.btn:active{ transform:translateY(1px) }
.btn.primary{ background:linear-gradient(135deg,var(--primary),var(--primary-700)); color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.28) }
.btn.primary:hover{ filter:brightness(1.05) }
.btn.outline{ background:#fff; color:#111827; border:1px solid #e5e7eb }
.btn.ghost{ background:transparent; color:var(--primary-700) }
.btn[disabled]{ opacity:.5; cursor:not-allowed }

/* Steps */
.step{ display:none }
.step.active{ display:block; animation:rise .32s ease-out }
@keyframes rise{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:translateY(0) } }

footer{margin-top:6px; text-align:center; color:#64748b; font-size:13px}
.border{border:1px solid #e5e7eb; border-radius:14px; padding:16px; background:#fff}
.slot-item{border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin-top:12px}

/* Success Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:100 }
.modal.open{ display:flex }
.modal .modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45) }
.modal .modal-dialog{ position:relative; background:#fff; border-radius:16px; padding:18px; width:min(420px,92vw); box-shadow:var(--shadow); z-index:1 }
.modal .modal-title{ margin:0 0 8px; font-weight:800; color:var(--primary-700); font-size:18px }
.modal .modal-text{ margin:0 0 14px; color:#334155; font-size:14px }
.modal .modal-actions{ display:flex; justify-content:flex-end; gap:10px }

/* Give more room to #schedule on mobile */
@media (max-width: 640px){
  #schedule{ gap:10px !important }
  .slot-item{ padding:10px; margin-top:8px }
}

/* Sticky actions fixed at bottom for mobile */
.sticky-actions{ position:sticky; bottom:0; background:#fff; padding-top:8px }
@media (max-width: 640px){
  .sticky-actions{ position:fixed; left:0; right:0; bottom:0; z-index:10; padding:10px 16px; box-shadow:0 -6px 16px rgba(0,0,0,.06); display:flex; flex-direction:column; align-items:stretch; gap:8px }
  .card{ padding-bottom:72px }
  .agree-compact{ width:100%; max-width:none; font-size:11px }
  .agree-compact input{ width:14px; height:14px }
  .sticky-actions .actions{ justify-content:flex-end; gap:8px; flex-wrap:wrap }
  .sticky-actions .actions .btn{ padding:10px 12px; font-size:13px; border-radius:10px }
}

/* Hide local sticky actions when globalSticky is present */
.has-global-actions .row.sticky-actions:not(#globalSticky){ display:none }

/* Compact agree checkbox in sticky actions */
.agree-compact{ display:flex; align-items:center; gap:8px; font-size:12px; color:#475569; line-height:1.3 }
.agree-compact input{ width:16px; height:16px }
.sticky-actions .actions{ display:flex; gap:10px; margin-left:auto }

/* Select2 adjustments: ensure proper vertical alignment and option sizing */
.select2-container{ width:100% !important }
.select2-container--default .select2-selection--single{ height:48px; display:flex; align-items:center; padding:0 40px 0 14px; font-size:16px; box-sizing:border-box }
.select2-container--default .select2-selection--single .select2-selection__rendered{ padding-left:0; line-height:1.3; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%; right:10px }
.select2-dropdown{ border-radius:12px; border-color:#e5e7eb }
.select2-results__option{ padding:10px 12px; font-size:16px; line-height:1.4 }