/* ═══════════════════════════════════════════════════════
   COLUMBIA PIKE LAUNDRY – Booking Form Plugin Styles
   Matches theme: Nunito body / Poppins headings
   Primary #1a56db · Accent #f59e0b · Radius 12px
   ═══════════════════════════════════════════════════════ */

/* ── Fonts (load only if theme hasn't already) ─────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Poppins:wght@700;800&display=swap');

/* ── Local tokens (fallback if theme vars absent) ──── */
.el-booking-wrap {
  --cpl-primary:      var(--dd-primary,      #1a56db);
  --cpl-primary-dark: var(--dd-primary-dark, #1340a8);
  --cpl-accent:       var(--dd-accent,       #f59e0b);
  --cpl-dark:         var(--dd-dark,         #111827);
  --cpl-text:         var(--dd-text,         #374151);
  --cpl-text-light:   var(--dd-text-light,   #6b7280);
  --cpl-white:        var(--dd-white,        #ffffff);
  --cpl-bg-light:     var(--dd-bg-light,     #f9fafb);
  --cpl-bg-gray:      var(--dd-bg-gray,      #f3f4f6);
  --cpl-border:       var(--dd-border,       #e5e7eb);
  --cpl-shadow:       var(--dd-shadow,       0 4px 24px rgba(26,86,219,.10));
  --cpl-shadow-lg:    var(--dd-shadow-lg,    0 16px 48px rgba(26,86,219,.18));
  --cpl-radius:       var(--dd-radius,       12px);
  --cpl-font-sans:    var(--dd-font-sans,    'Nunito', system-ui, sans-serif);
  --cpl-font-heading: var(--dd-font-heading, 'Poppins', system-ui, sans-serif);

  font-family: var(--cpl-font-sans);
  color: var(--cpl-text);
  width: 100%;
  padding: 0 0 60px;
}

/* ── Progress Bar ──────────────────────────────────── */
.el-progress {
  height: 4px;
  background: var(--cpl-border);
  border-radius: 4px;
  margin-bottom: 28px;
  overflow: hidden;
}
.el-progress__bar {
  height: 100%;
  background: var(--cpl-primary);
  border-radius: 4px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* ── Step pills ────────────────────────────────────── */
.el-steps {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.el-step-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--cpl-text-light);
  background: var(--cpl-bg-gray);
  border: 1.5px solid transparent;
  transition: all .2s;
  font-family: var(--cpl-font-heading);
}
.el-step-pill.is-active {
  color: var(--cpl-primary);
  background: rgba(26,86,219,.08);
  border-color: var(--cpl-primary);
}
.el-step-pill.is-done {
  color: #fff;
  background: var(--cpl-primary);
  border-color: var(--cpl-primary);
}
.el-step-pill__num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: currentColor;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  flex-shrink: 0;
}
.el-step-pill.is-active .el-step-pill__num { background: var(--cpl-primary); }
.el-step-pill.is-done  .el-step-pill__num { background: rgba(255,255,255,.35); }

/* ── Panel ─────────────────────────────────────────── */
.el-panel { animation: cplFadeUp .3s ease both; }
@keyframes cplFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.el-panel[hidden] { display: none; }

.el-panel__title {
  font-family: var(--cpl-font-heading);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  color: var(--cpl-primary);
  margin-bottom: 24px;
  line-height: 1.2;
}

/* ── Service cards ─────────────────────────────────── */
.el-service-card { display: block; margin-bottom: 12px; cursor: pointer; }
.el-service-card__cb { position: absolute; opacity: 0; width: 0; height: 0; }
.el-service-card__box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1.5px solid var(--cpl-border);
  border-radius: var(--cpl-radius);
  background: var(--cpl-white);
  transition: all .2s;
}
.el-service-card:hover .el-service-card__box {
  border-color: var(--cpl-primary);
  background: rgba(26,86,219,.03);
}
.el-service-card__cb:checked + .el-service-card__box {
  border-color: var(--cpl-primary);
  background: rgba(26,86,219,.05);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.el-service-card__check {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid var(--cpl-border);
  border-radius: 5px;
  margin-top: 1px;
  position: relative;
  transition: all .2s;
  background: var(--cpl-white);
}
.el-service-card__cb:checked + .el-service-card__box .el-service-card__check {
  background: var(--cpl-primary);
  border-color: var(--cpl-primary);
}
.el-service-card__cb:checked + .el-service-card__box .el-service-card__check::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 7px; height: 12px;
  border: 2.5px solid #fff;
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
.el-service-card__name {
  display: block;
  font-weight: 700;
  color: var(--cpl-primary);
  font-family: var(--cpl-font-heading);
  font-size: .95rem;
  margin-bottom: 3px;
}
.el-service-card__note {
  display: block;
  font-size: .82rem;
  color: var(--cpl-text-light);
}

/* ── Fields ────────────────────────────────────────── */
.el-field { margin-bottom: 18px; }
.el-label {
  display: block;
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 6px;
  color: var(--cpl-dark);
}
.el-req { color: var(--cpl-primary); }
.el-input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--cpl-border);
  border-radius: var(--cpl-radius);
  font-family: var(--cpl-font-sans);
  font-size: .9rem;
  color: var(--cpl-dark);
  background: var(--cpl-white);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  box-sizing: border-box;
}
.el-input:focus {
  border-color: var(--cpl-primary);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.el-input.is-error { border-color: #ef4444; }
.el-field__error {
  display: block;
  font-size: .78rem;
  color: #ef4444;
  margin-top: 5px;
  min-height: 18px;
}
.el-textarea { resize: vertical; min-height: 80px; }

/* ── Buttons ───────────────────────────────────────── */
.el-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  font-family: var(--cpl-font-heading);
  font-size: .92rem;
  font-weight: 700;
  border-radius: 50px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .22s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.el-btn--primary {
  background: var(--cpl-primary);
  color: #fff;
  border-color: var(--cpl-primary);
}
.el-btn--primary:hover {
  background: var(--cpl-primary-dark);
  border-color: var(--cpl-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--cpl-shadow);
}
.el-btn--ghost {
  background: transparent;
  color: var(--cpl-text-light);
  border-color: var(--cpl-border);
}
.el-btn--ghost:hover {
  border-color: var(--cpl-primary);
  color: var(--cpl-primary);
}
.el-btn--full { width: 100%; }
.el-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ── Panel footer ──────────────────────────────────── */
.el-panel__foot { margin-top: 28px; }
.el-panel__foot--split {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.el-panel__foot--split .el-next { flex: 1; }
.el-panel__foot--split .el-back { flex: 0 0 auto; }

/* ── Schedule ──────────────────────────────────────── */
.el-schedule-section { margin-bottom: 24px; }
.el-schedule__label {
  font-family: var(--cpl-font-heading);
  font-weight: 700;
  color: var(--cpl-primary);
  font-size: 1rem;
  margin-bottom: 10px;
}
.el-schedule-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1.5px solid var(--cpl-border);
  border-radius: var(--cpl-radius);
  background: var(--cpl-white);
}
.el-schedule-card__info strong { display: block; font-size: .95rem; color: var(--cpl-dark); margin-bottom: 2px; }
.el-schedule-card__info span   { font-size: .83rem; color: var(--cpl-text-light); }
.el-icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--cpl-primary); padding: 4px;
  border-radius: 6px; transition: background .18s;
}
.el-icon-btn:hover { background: rgba(26,86,219,.1); }

/* Slot picker */
.el-slot-picker { margin-top: 12px; }
.el-slot-picker__slots {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.el-slot-btn {
  padding: 8px 14px; border: 1.5px solid var(--cpl-border);
  border-radius: 8px; font-size: .82rem; font-weight: 600;
  cursor: pointer; background: var(--cpl-white); color: var(--cpl-text);
  font-family: var(--cpl-font-sans); transition: all .18s;
}
.el-slot-btn:hover { border-color: var(--cpl-primary); color: var(--cpl-primary); }
.el-slot-btn.active {
  background: var(--cpl-primary); border-color: var(--cpl-primary); color: #fff;
}

/* ── Calendar ────────────────────────────────────────────────── */
.el-slot-picker__dates { margin-bottom: 12px; }

.el-cal__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.el-cal__month-label {
  font-weight: 700; font-size: .92rem; color: var(--cpl-dark);
  font-family: var(--cpl-font-heading);
}
.el-cal__nav {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1.5px solid var(--cpl-border); background: var(--cpl-white);
  cursor: pointer; font-size: 1.25rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--cpl-text); transition: all .15s; font-family: var(--cpl-font-sans);
}
.el-cal__nav:hover:not(:disabled) {
  border-color: var(--cpl-primary); color: var(--cpl-primary);
  background: var(--cpl-bg-light);
}
.el-cal__nav:disabled { opacity: .35; cursor: default; }

.el-cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.el-cal__day-name {
  text-align: center; font-size: .72rem; font-weight: 700;
  color: var(--cpl-text-light); padding: 5px 0; text-transform: uppercase;
  letter-spacing: .03em;
}
.el-cal__day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1.5px solid transparent; background: none;
  font-size: .83rem; font-weight: 600; cursor: pointer;
  color: var(--cpl-text); font-family: var(--cpl-font-sans);
  transition: background .12s, color .12s, border-color .12s;
}
.el-cal__day:hover:not(:disabled):not(.el-cal__day--selected) {
  background: var(--cpl-bg-gray); border-color: var(--cpl-border);
}
.el-cal__day--empty { pointer-events: none; }
.el-cal__day--disabled { color: var(--cpl-text-light); opacity: .38; cursor: default; }
.el-cal__day--today { border-color: var(--cpl-primary); color: var(--cpl-primary); }
.el-cal__day--selected {
  background: var(--cpl-primary); border-color: var(--cpl-primary);
  color: #fff; box-shadow: 0 2px 8px rgba(26,86,219,.25);
}

.el-cal__slot-label {
  font-size: .8rem; font-weight: 700; color: var(--cpl-text-light);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 14px 0 8px;
}
.el-slot-wrap { display: flex; gap: 8px; flex-wrap: wrap; }


/* Info banner */
.el-info-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border: 1.5px solid var(--cpl-accent);
  border-radius: var(--cpl-radius);
  background: var(--cpl-accent-light, #fef3c7);
  color: #92400e;
  font-size: .83rem; font-weight: 600;
  margin-bottom: 24px;
}
.el-info-banner svg { flex-shrink: 0; color: var(--cpl-accent); }

/* Frequency */
.el-regular-section { margin-bottom: 8px; }
.el-info-tag {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--cpl-border);
  border-radius: 8px;
  font-size: .82rem; color: var(--cpl-text);
  margin-bottom: 12px;
}
.el-frequency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.el-freq-btn {
  padding: 12px; border: 1.5px solid var(--cpl-border);
  border-radius: var(--cpl-radius); background: var(--cpl-white);
  font-size: .87rem; font-weight: 600; cursor: pointer;
  font-family: var(--cpl-font-sans); color: var(--cpl-dark);
  transition: all .18s;
}
.el-freq-btn:hover { border-color: var(--cpl-primary); color: var(--cpl-primary); }
.el-freq-btn--active {
  background: var(--cpl-primary); border-color: var(--cpl-primary); color: #fff;
}

/* ── Preferences ───────────────────────────────────── */
.el-pref-heading {
  font-family: var(--cpl-font-heading);
  font-size: 1.05rem; font-weight: 800;
  color: var(--cpl-dark);
  margin: 28px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cpl-border);
}
.el-pref-group { margin-bottom: 20px; }
.el-pref-group__label {
  font-weight: 700; font-size: .87rem;
  color: var(--cpl-dark); margin-bottom: 8px;
}
.el-option-row { display: flex; gap: 8px; flex-wrap: wrap; }
.el-option-btn {
  padding: 9px 16px; border: 1.5px solid var(--cpl-border);
  border-radius: 50px; background: var(--cpl-white);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  font-family: var(--cpl-font-sans); color: var(--cpl-text);
  transition: all .18s; white-space: nowrap;
}
.el-option-btn:hover { border-color: var(--cpl-primary); color: var(--cpl-primary); }
.el-option-btn--active {
  background: var(--cpl-primary); border-color: var(--cpl-primary); color: #fff;
}

/* ── Toggle ────────────────────────────────────────── */
.el-toggle-row {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; font-size: .87rem; color: var(--cpl-text);
}
.el-toggle { position: relative; flex-shrink: 0; }
.el-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.el-toggle__track {
  display: block; width: 44px; height: 24px;
  background: var(--cpl-border); border-radius: 50px;
  cursor: pointer; transition: background .2s;
  position: relative;
}
.el-toggle input:checked + .el-toggle__track { background: var(--cpl-primary); }
.el-toggle__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s;
}
.el-toggle input:checked ~ .el-toggle__track .el-toggle__thumb { transform: translateX(20px); }

/* ── Links ─────────────────────────────────────────── */
.el-link { color: var(--cpl-primary); font-weight: 700; text-decoration: none; }
.el-link:hover { text-decoration: underline; }
.el-login-hint { text-align: center; font-size: .83rem; color: var(--cpl-text-light); margin-top: 16px; }
.el-policy-note { font-size: .78rem; color: var(--cpl-text-light); margin-top: 12px; }

/* ── Summary (confirm step) ────────────────────────── */
.el-summary {
  border: 1.5px solid var(--cpl-border);
  border-radius: var(--cpl-radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.el-summary__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 18px;
  font-size: .87rem;
  border-bottom: 1px solid var(--cpl-border);
}
.el-summary__row:last-child { border-bottom: none; }
.el-summary__row > span:first-child { color: var(--cpl-text-light); font-weight: 600; }
.el-summary__row > span:last-child  { color: var(--cpl-dark); font-weight: 700; text-align: right; }

.el-section-subhead {
  font-family: var(--cpl-font-heading);
  font-weight: 700; color: var(--cpl-primary);
  font-size: .95rem; margin: 20px 0 12px;
}

/* Tip */
.el-tip-row { margin-bottom: 12px; }
.el-tip-options { display: flex; gap: 8px; flex-wrap: wrap; }
.el-tip-btn {
  padding: 10px 16px; border: 1.5px solid var(--cpl-border);
  border-radius: 50px; background: var(--cpl-white);
  font-size: .87rem; font-weight: 700; cursor: pointer;
  font-family: var(--cpl-font-heading); color: var(--cpl-dark);
  transition: all .18s;
}
.el-tip-btn:hover { border-color: var(--cpl-primary); color: var(--cpl-primary); }
.el-tip-btn--active {
  background: var(--cpl-primary); border-color: var(--cpl-primary); color: #fff;
}
.el-tip-custom { margin-top: 10px; }

/* Payment options */
.el-payment-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 1.5px solid var(--cpl-border);
  border-radius: var(--cpl-radius);
  cursor: pointer; margin-bottom: 8px;
  color: var(--cpl-text-light);
  font-size: .9rem; font-weight: 600;
  transition: all .18s;
}
.el-payment-option:hover { border-color: var(--cpl-primary); color: var(--cpl-primary); }
.el-chevron { margin-left: auto; }

/* Totals */
.el-totals {
  margin: 20px 0;
  border-top: 1.5px solid var(--cpl-border);
  padding-top: 12px;
}
.el-totals__row {
  display: flex; justify-content: space-between;
  padding: 7px 0; font-size: .87rem; color: var(--cpl-text);
}
.el-totals__row--total {
  border-top: 1.5px solid var(--cpl-border);
  margin-top: 8px; padding-top: 12px;
  font-size: .95rem;
}

/* Preferences review */
.el-pref-summary {
  margin-top: 20px;
  border: 1.5px solid var(--cpl-border);
  border-radius: var(--cpl-radius);
  overflow: hidden;
}
.el-pref-summary__toggle {
  padding: 14px 18px;
  font-weight: 700; font-size: .9rem;
  cursor: pointer; color: var(--cpl-primary);
  font-family: var(--cpl-font-heading);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.el-pref-summary__toggle::after { content: '▾'; }
.el-pref-summary[open] .el-pref-summary__toggle::after { content: '▴'; }
.el-pref-summary__body { padding: 0 18px 14px; }
.el-pref-review-row {
  display: flex; justify-content: space-between;
  padding: 7px 0; font-size: .83rem;
  border-bottom: 1px solid var(--cpl-border);
  color: var(--cpl-text);
}
.el-pref-review-row:last-child { border-bottom: none; }
.el-pref-review-row span:first-child { color: var(--cpl-text-light); }
.el-pref-review-row span:last-child  { font-weight: 700; }

/* Stripe notice */
.el-stripe-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  margin: 20px 0;
  background: rgba(26,86,219,.05);
  border: 1.5px solid rgba(26,86,219,.15);
  border-radius: var(--cpl-radius);
  font-size: .82rem;
  color: var(--cpl-text-light);
  line-height: 1.5;
}
.el-stripe-notice svg { flex-shrink: 0; color: var(--cpl-primary); margin-top: 1px; }

/* Spinner */
.el-spin {
  animation: cplSpin .8s linear infinite;
  display: inline-block;
}
@keyframes cplSpin {
  to { transform: rotate(360deg); }
}

/* ── Success panel ─────────────────────────────────── */
.el-panel--success { text-align: center; padding: 40px 20px; }
.el-success-icon {
  width: 80px; height: 80px;
  background: rgba(26,86,219,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  color: var(--cpl-primary);
}
.el-success-msg {
  color: var(--cpl-text-light);
  font-size: .93rem;
  margin-bottom: 28px;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════
   DESKTOP LAYOUT  (≥ 900px)
   Left column: form steps  |  Right column: sticky summary
   ═══════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .el-booking-wrap {
    display: grid;
    grid-template-columns: 1fr 380px;
    grid-template-rows: auto auto 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 0 0 80px;
  }

  /* Progress spans full width */
  .el-progress {
    grid-column: 1 / -1;
    margin-bottom: 32px;
  }

  /* Steps pills span full width */
  .el-steps {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-bottom: 40px;
    gap: 8px;
  }

  /* Form panels in left column */
  #el-booking-form {
    grid-column: 1;
    grid-row: 3;
  }

  /* Sticky right sidebar summary */
  .el-desktop-sidebar {
    grid-column: 2;
    grid-row: 3;
    position: sticky;
    top: 120px;
    background: var(--cpl-bg-light);
    border: 1.5px solid var(--cpl-border);
    border-radius: 16px;
    padding: 28px 24px;
    align-self: start;
  }

  /* Larger title on desktop */
  .el-panel__title {
    font-size: 2.2rem;
    margin-bottom: 32px;
  }

  /* Service cards side by side */
  .el-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .el-services-grid .el-service-card { margin-bottom: 0; }
  .el-services-grid .el-service-card:last-child {
    grid-column: 1 / -1; /* Alterations full width since 3 items */
  }

  /* Address fields two-column */
  .el-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .el-address-grid .el-field:first-child { grid-column: 1 / -1; }

  /* Preferences grid: 2 columns */
  .el-pref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
  }

  /* Frequency grid 4 columns */
  .el-frequency-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Schedule side by side */
  .el-schedule-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Tip options spread out */
  .el-tip-options { flex-wrap: nowrap; }
  .el-tip-btn { flex: 1; text-align: center; }

  /* Footer buttons always side by side */
  .el-panel__foot--split { flex-direction: row; }

  /* Summary totals in sidebar */
  .el-totals { font-size: .95rem; }

  /* Option rows wrap nicely */
  .el-option-row { gap: 10px; }
  .el-option-btn { padding: 10px 18px; font-size: .85rem; }

  /* Confirm step: two-column grid for payment + prefs */
  .el-confirm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
  }
  .el-confirm-grid .el-totals,
  .el-confirm-grid .el-pref-summary { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════
   LARGE DESKTOP  (≥ 1280px)  – even more breathing room
   ═══════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .el-booking-wrap {
    grid-template-columns: 1fr 420px;
    column-gap: 64px;
  }
  .el-panel__title { font-size: 2.6rem; }
  .el-step-pill { padding: 8px 18px; font-size: .85rem; }
  .el-step-pill__num { width: 24px; height: 24px; font-size: .75rem; }
  .el-service-card__box { padding: 22px 24px; }
  .el-input { padding: 15px 18px; }
  .el-btn { padding: 16px 36px; font-size: 1rem; }
  .el-pref-heading { font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════
   TABLET  (600px – 899px)
   ═══════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 899px) {
  .el-booking-wrap { padding: 0 0 48px; }

  .el-panel__title { font-size: 1.75rem; }

  /* Services 2-up */
  .el-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .el-services-grid .el-service-card { margin-bottom: 0; }
  .el-services-grid .el-service-card:last-child { grid-column: 1 / -1; }

  /* Address row */
  .el-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .el-address-grid .el-field:first-child { grid-column: 1 / -1; }

  /* Frequency 4-up */
  .el-frequency-grid { grid-template-columns: repeat(4, 1fr); }

  /* Preferences 2-col */
  .el-pref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
  }

  /* Schedule side by side */
  .el-schedule-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .el-option-btn { padding: 9px 14px; }
}

/* ═══════════════════════════════════════════════════
   MOBILE  (≤ 599px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .el-booking-wrap { padding: 0 0 40px; }

  /* Collapse step labels to numbers only */
  .el-step-pill__label { display: none; }
  .el-step-pill { padding: 6px 10px; gap: 0; }
  .el-steps { gap: 4px; }

  .el-panel__title { font-size: 1.5rem; margin-bottom: 20px; }

  /* Frequency 2×2 */
  .el-frequency-grid { grid-template-columns: 1fr 1fr; }

  /* Options wrap tighter */
  .el-option-row { gap: 6px; }
  .el-option-btn { padding: 8px 11px; font-size: .76rem; }

  /* Tip row wraps */
  .el-tip-options { gap: 6px; flex-wrap: wrap; }
  .el-tip-btn { padding: 10px 12px; font-size: .82rem; flex: 1 1 calc(33% - 6px); min-width: 60px; }

  /* Back button below continue */
  .el-panel__foot--split { flex-direction: column-reverse; gap: 10px; }
  .el-panel__foot--split .el-back,
  .el-panel__foot--split .el-next { width: 100%; }

  /* Full-width buttons */
  .el-btn { padding: 14px 20px; font-size: .9rem; width: 100%; justify-content: center; }
  .el-btn--ghost { width: auto; } /* Back button slightly narrower feel on its own row */

  /* Schedule date chips scroll horizontally */
  .el-slot-picker__dates { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .el-date-btn { white-space: nowrap; flex-shrink: 0; }

  .el-input { padding: 13px 14px; font-size: .88rem; }

  .el-pref-heading { font-size: 1rem; margin: 22px 0 12px; }

  /* Confirm summary rows stack label above value on very small screens */
}

/* ═══════════════════════════════════════════════════
   EXTRA SMALL  (≤ 380px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .el-panel__title { font-size: 1.3rem; }
  .el-step-pill__num { width: 22px; height: 22px; font-size: .65rem; }
  .el-service-card__box { padding: 14px 14px; gap: 10px; }
  .el-service-card__name { font-size: .88rem; }
  .el-option-btn { padding: 7px 9px; font-size: .72rem; }
  .el-schedule-card { padding: 13px 14px; }
  .el-summary__row { flex-direction: column; gap: 2px; padding: 10px 14px; }
}

/* ── Hide sidebar on mobile/tablet (no JS sidebar needed) ── */
.el-desktop-sidebar { display: none; }
@media (min-width: 900px) {
  .el-desktop-sidebar { display: block; }
}