/* ═══════════════════════════════════════════════════════════════
   services-modern.css — modern overlay for /calculator-dry-cleaning
   and /calculator-window-cleaning. Activated by body.cl-modern,
   loaded AFTER calculator-service-shared.css and the per-page
   inline <style> blocks so it wins via specificity + !important.
   ═══════════════════════════════════════════════════════════════ */

body.cl-modern {
  --sv-primary: #0b47d4;
  --sv-primary-2: #2563eb;
  --sv-purple: #7c3aed;
  --sv-text: #0f172a;
  --sv-muted: #64748b;
  --sv-bg: #f8fafc;
  --sv-card: #ffffff;
  --sv-border: #e2e8f0;
  --sv-success: #10b981;
  --sv-radius: 14px;
  --sv-radius-lg: 22px;
  --sv-shadow-sm: 0 1px 3px rgba(15,23,42,.06);
  --sv-shadow-md: 0 12px 32px rgba(15,23,42,.10);
  --sv-shadow-lg: 0 24px 60px rgba(15,23,42,.16);

  background: var(--sv-bg) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--sv-text) !important;
  margin: 0 !important;
}
body.cl-modern * { box-sizing: border-box; }

/* Remove the legacy blue body bg */
body.cl-modern[style],
body.cl-modern { background-image: none !important; }

/* ───────────────────────────────────────────────────────────────
   PAGE LAYOUT
   ─────────────────────────────────────────────────────────────── */
body.cl-modern section.container,
body.cl-modern section.container.my-5 {
  max-width: 1280px !important;
  margin: 28px auto 32px !important;
  padding: 0 24px !important;
  position: relative;
  z-index: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
@media (max-width: 700px) {
  body.cl-modern section.container.my-5 { padding: 0 14px !important; margin: 18px auto 24px !important; }
}

/* Soft gradient blobs in page bg */
body.cl-modern::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 12% 8%,  rgba(11,71,212,.10) 0%, transparent 60%),
    radial-gradient(800px 500px at 90% 20%, rgba(124,58,237,.08) 0%, transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(16,185,129,.06) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────
   HERO TITLE
   ─────────────────────────────────────────────────────────────── */
body.cl-modern .section-title,
body.cl-modern h2.section-title {
  font-size: clamp(28px, 4.5vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  margin: 12px 0 8px !important;
  text-align: center !important;
  background: linear-gradient(135deg, var(--sv-primary) 0%, var(--sv-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--sv-primary) !important;
  font-family: inherit !important;
}

/* ───────────────────────────────────────────────────────────────
   ORDER TYPE SWITCH (segmented pill)
   ─────────────────────────────────────────────────────────────── */
body.cl-modern .order-type-switch,
body.cl-modern .type-switch {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin: 12px auto 24px !important;
  padding: 5px !important;
  background: #f1f5f9 !important;
  border: 1px solid var(--sv-border) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.04) !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
}
body.cl-modern .order-type-switch { display: flex !important; margin-left: auto !important; margin-right: auto !important; }

body.cl-modern .order-type-btn {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--sv-muted) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .18s !important;
  box-shadow: none !important;
  margin: 0 !important;
}
body.cl-modern .order-type-btn i { font-size: 13px !important; color: inherit !important; }
body.cl-modern .order-type-btn:hover:not(.active) {
  color: var(--sv-primary) !important;
  background: rgba(11,71,212,.06) !important;
}
body.cl-modern .order-type-btn.active {
  background: #fff !important;
  color: var(--sv-primary) !important;
  box-shadow: 0 6px 14px rgba(15,23,42,.10) !important;
  font-weight: 700 !important;
}
@media (max-width: 600px) {
  body.cl-modern .order-type-switch,
  body.cl-modern .type-switch { width: 100% !important; }
  body.cl-modern .order-type-btn { flex: 1 !important; padding: 9px 12px !important; font-size: 13px !important; }
  body.cl-modern .order-type-btn span { font-size: 12px !important; }
}

/* ───────────────────────────────────────────────────────────────
   DIRT LEVEL CARDS (dry only)
   ─────────────────────────────────────────────────────────────── */
body.cl-modern .dirt-level-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 18px 0 !important;
}
body.cl-modern .dirt-level-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--sv-text) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin: 0 0 14px !important;
  text-align: left !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.cl-modern .dirt-level-title::before {
  content: '';
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sv-primary), var(--sv-purple));
}
body.cl-modern .dirt-level-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}
@media (max-width: 700px) {
  body.cl-modern .dirt-level-cards { grid-template-columns: 1fr !important; }
}
body.cl-modern .dirt-card {
  background: var(--sv-card) !important;
  border: 2px solid var(--sv-border) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
  overflow: hidden !important;
  box-shadow: var(--sv-shadow-sm) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
}
body.cl-modern .dirt-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sv-primary), var(--sv-purple));
  opacity: 0;
  transition: opacity .25s;
  z-index: 4;
}
body.cl-modern .dirt-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sv-shadow-md) !important;
  border-color: rgba(11,71,212,.30) !important;
}
body.cl-modern .dirt-card.active {
  border-color: var(--sv-primary) !important;
  box-shadow: 0 14px 32px rgba(11,71,212,.20) !important;
}
body.cl-modern .dirt-card.active::before { opacity: 1; }
body.cl-modern .dirt-card-image-wrap {
  width: 100% !important;
  aspect-ratio: 16/10 !important;
  height: auto !important;
  overflow: hidden;
  background: #f1f5f9 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.cl-modern .dirt-card-image,
body.cl-modern .dirt-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .35s !important;
}
body.cl-modern .dirt-card-content {
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body.cl-modern .dirt-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--sv-text) !important;
  letter-spacing: -.01em !important;
}
body.cl-modern .dirt-card-desc {
  font-size: 12.5px !important;
  color: var(--sv-muted) !important;
  line-height: 1.4 !important;
}
body.cl-modern .dirt-card-badge {
  display: inline-block;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(11,71,212,.08) !important;
  color: var(--sv-primary) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
body.cl-modern .dirt-card.active .dirt-card-badge {
  background: linear-gradient(135deg, var(--sv-primary), var(--sv-primary-2)) !important;
  color: #fff !important;
}

/* ───────────────────────────────────────────────────────────────
   SHELL / SERVICES GRID
   ─────────────────────────────────────────────────────────────── */
body.cl-modern .services-shell {
  background: var(--sv-card) !important;
  border: 1px solid var(--sv-border) !important;
  border-radius: var(--sv-radius-lg) !important;
  box-shadow: var(--sv-shadow-sm) !important;
  padding: 24px !important;
  overflow: hidden !important;
}
@media (max-width: 700px) {
  body.cl-modern .services-shell { padding: 18px !important; border-radius: 18px !important; }
}
body.cl-modern .shell-header { padding: 0 0 12px !important; margin: 0 !important; border: none !important; }
body.cl-modern .shell-body { padding: 0 !important; }

body.cl-modern .hypo-alert,
body.cl-modern p.hypo-alert {
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(11,71,212,.06)) !important;
  border: 1px solid rgba(16,185,129,.20) !important;
  color: #065f46 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin: 0 0 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.cl-modern .hypo-alert i { color: var(--sv-success) !important; font-size: 14px !important; }

body.cl-modern .dry-warning {
  background: linear-gradient(135deg, rgba(11,71,212,.06), rgba(124,58,237,.04)) !important;
  border: 1px dashed rgba(11,71,212,.25) !important;
  border-radius: 12px !important;
  color: var(--sv-primary) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
}

/* Services grid */
body.cl-modern .services-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 600px) {
  body.cl-modern .services-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 10px !important; }
}

body.cl-modern .service-card {
  position: relative !important;
  background: var(--sv-card) !important;
  border: 2px solid var(--sv-border) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: var(--sv-shadow-sm) !important;
  margin: 0 !important;
}
body.cl-modern .service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sv-primary), var(--sv-purple));
  opacity: 0;
  transition: opacity .25s;
  z-index: 4;
}
body.cl-modern .service-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(11,71,212,.30) !important;
  box-shadow: var(--sv-shadow-md) !important;
}
body.cl-modern .service-card.is-selected,
body.cl-modern .service-card.selected,
body.cl-modern .service-card[data-selected="true"] {
  border-color: var(--sv-primary) !important;
  box-shadow: 0 14px 32px rgba(11,71,212,.20) !important;
}
body.cl-modern .service-card.is-selected::before,
body.cl-modern .service-card.selected::before,
body.cl-modern .service-card[data-selected="true"]::before { opacity: 1; }

body.cl-modern .service-media {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe) !important;
  border-bottom: 1px solid rgba(11,71,212,.08);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: clamp(160px, 20vw, 220px) !important;
  position: relative !important;
}
body.cl-modern .service-card .service-img {
  width: 60% !important;
  height: 60% !important;
  max-width: 60% !important;
  max-height: 60% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(11,71,212,.18)) !important;
  transition: transform .25s !important;
}
body.cl-modern .service-card:hover .service-img { transform: translateY(-3px) scale(1.04) !important; }

body.cl-modern .service-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}
body.cl-modern .service-title {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: var(--sv-text) !important;
  margin: 0 !important;
  letter-spacing: -.01em !important;
  line-height: 1.25 !important;
}
body.cl-modern .service-desc {
  font-size: 12.5px !important;
  color: var(--sv-muted) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  flex: 1 !important;
}
body.cl-modern .service-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
body.cl-modern .price-badge {
  background: rgba(16,185,129,.10) !important;
  border: 1px solid rgba(16,185,129,.30) !important;
  color: #047857 !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* Quantity stepper */
body.cl-modern .qty-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f8fafc !important;
  border: 1px solid var(--sv-border) !important;
  border-radius: 999px !important;
  padding: 3px !important;
}
body.cl-modern .qty-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid var(--sv-border) !important;
  color: var(--sv-primary) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s !important;
  font-family: inherit !important;
}
body.cl-modern .qty-btn:hover {
  background: var(--sv-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body.cl-modern .qty-input {
  width: 32px !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  color: var(--sv-text) !important;
  outline: none !important;
  -moz-appearance: textfield;
  appearance: textfield;
  -webkit-appearance: none;
}
body.cl-modern .qty-input::-webkit-outer-spin-button,
body.cl-modern .qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Actions bar */
body.cl-modern .actions-bar {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 18px 0 0 !important;
}
body.cl-modern #clearSelectionBtn,
body.cl-modern #clearSelectionBtn.btn,
body.cl-modern .btn.btn-outline-secondary {
  background: #fff !important;
  border: 1.5px solid var(--sv-border) !important;
  color: var(--sv-text) !important;
  padding: 9px 18px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: all .15s !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
body.cl-modern #clearSelectionBtn:hover {
  border-color: var(--sv-primary) !important;
  color: var(--sv-primary) !important;
  background: rgba(11,71,212,.04) !important;
}

/* ───────────────────────────────────────────────────────────────
   ORDER SUMMARY
   ─────────────────────────────────────────────────────────────── */
body.cl-modern .order-summary {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%) !important;
  border: 1px solid rgba(11,71,212,.18) !important;
  border-radius: var(--sv-radius-lg) !important;
  padding: 22px 22px 24px !important;
  box-shadow: 0 14px 36px rgba(11,71,212,.10) !important;
  margin: 22px 0 0 !important;
  position: relative;
  overflow: hidden;
}
body.cl-modern .order-summary::before {
  content: '';
  position: absolute;
  inset: -50% -50% auto auto;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(124,58,237,.10), transparent 70%);
  pointer-events: none;
}
body.cl-modern .order-summary > * { position: relative; z-index: 1; }
body.cl-modern .order-summary h4 {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--sv-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin: 0 0 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(11,71,212,.12) !important;
}
body.cl-modern .summary-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
body.cl-modern .summary-list li {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--sv-text) !important;
  padding: 6px 0 !important;
  border-bottom: 1px dashed rgba(11,71,212,.12) !important;
}
body.cl-modern .summary-list li:last-child { border-bottom: none !important; }
body.cl-modern .summary-list li strong { font-weight: 700; color: var(--sv-text); }

body.cl-modern .summary-total {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  background: #fff !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(11,71,212,.10) !important;
  margin: 0 !important;
}
body.cl-modern .summary-total > span:first-child {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--sv-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
body.cl-modern .summary-total .amount,
body.cl-modern #summaryTotal {
  font-size: 26px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--sv-primary) 0%, var(--sv-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--sv-primary) !important;
}

body.cl-modern .min-order-note {
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(217,119,6,.06)) !important;
  border: 1px solid rgba(245,158,11,.30) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-top: 12px !important;
  display: none;
  align-items: flex-start !important;
  gap: 10px !important;
}
body.cl-modern .min-order-note.is-active { display: flex !important; }
body.cl-modern .min-order-note i {
  color: #d97706 !important;
  margin-top: 2px;
  font-size: 14px;
}
body.cl-modern .min-order-note strong {
  color: #78350f !important;
  font-size: 13px !important;
}
body.cl-modern .min-order-note span {
  color: #78350f !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* ───────────────────────────────────────────────────────────────
   PANEL (calendar + address + contact + payment)
   ─────────────────────────────────────────────────────────────── */
body.cl-modern .panel {
  background: var(--sv-card) !important;
  border: 1px solid var(--sv-border) !important;
  border-radius: var(--sv-radius-lg) !important;
  box-shadow: var(--sv-shadow-sm) !important;
  padding: 24px !important;
  margin: 18px 0 0 !important;
}
@media (max-width: 700px) {
  body.cl-modern .panel { padding: 18px !important; border-radius: 18px !important; }
}
body.cl-modern .panel-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--sv-text) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin: 0 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: inherit !important;
}
body.cl-modern .panel-title::before {
  content: '';
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sv-primary), var(--sv-purple));
}
body.cl-modern .panel-title i { display: none !important; }

/* Form-grid (panels stacked with gap on PC) */
body.cl-modern .form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}
@media (max-width: 900px) {
  body.cl-modern .form-grid { grid-template-columns: 1fr !important; }
}
body.cl-modern .form-grid .panel { margin: 0 !important; }

/* Form rows + fields */
body.cl-modern .form-row {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
}
body.cl-modern .form-row > .form-group { margin: 0 !important; padding: 0 !important; }
body.cl-modern .form-row .col-md-6  { grid-column: span 6; }
body.cl-modern .form-row .col-md-7  { grid-column: span 7; }
body.cl-modern .form-row .col-md-3  { grid-column: span 3; }
body.cl-modern .form-row .col-md-2  { grid-column: span 2; }
body.cl-modern .form-row .col-md-12 { grid-column: span 12; }
@media (max-width: 700px) {
  body.cl-modern .form-row .col-md-6,
  body.cl-modern .form-row .col-md-7,
  body.cl-modern .form-row .col-md-3,
  body.cl-modern .form-row .col-md-2 { grid-column: 1 / -1 !important; }
}

body.cl-modern .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
}
body.cl-modern .label-strong,
body.cl-modern label.label-strong {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--sv-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin: 0 !important;
}
body.cl-modern .form-control,
body.cl-modern select.form-control,
body.cl-modern input.form-control,
body.cl-modern textarea.form-control {
  width: 100% !important;
  padding: 12px 14px !important;
  height: 46px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--sv-border) !important;
  background: #fff !important;
  color: var(--sv-text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-shadow: none !important;
  background-image: none !important;
}
body.cl-modern textarea.form-control { min-height: 100px; height: auto !important; resize: vertical; }
body.cl-modern .form-control:focus {
  border-color: var(--sv-primary) !important;
  box-shadow: 0 0 0 3px rgba(11,71,212,.10) !important;
}
body.cl-modern select.form-control,
body.cl-modern .custom-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
body.cl-modern .form-control::placeholder { color: #94a3b8 !important; }

/* ───────────────────────────────────────────────────────────────
   CALENDAR
   ─────────────────────────────────────────────────────────────── */
body.cl-modern #slotSpinner {
  background: rgba(255,255,255,.92) !important;
  border-radius: 14px !important;
  inset: 0 !important;
  position: absolute !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 10px !important;
  z-index: 5;
}
body.cl-modern #slotSpinner[style*="flex"] { display: flex !important; }

body.cl-modern .cal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
body.cl-modern .cal-header .btn-group { gap: 6px !important; display: flex !important; }
body.cl-modern #calPrev,
body.cl-modern #calNext,
body.cl-modern .cal-header .btn-primary {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid var(--sv-border) !important;
  color: var(--sv-muted) !important;
  font-weight: 700 !important;
  font-size: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
  position: relative !important;
}
body.cl-modern #calPrev::before,
body.cl-modern #calNext::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  font-size: 12px;
}
body.cl-modern #calPrev::before { content: '\f053'; }
body.cl-modern #calNext::before { content: '\f054'; }
body.cl-modern #calPrev:hover,
body.cl-modern #calNext:hover {
  background: linear-gradient(135deg, var(--sv-primary), var(--sv-primary-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

body.cl-modern .calendar-grid,
body.cl-modern #calWeekdays,
body.cl-modern #calDays {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
}
body.cl-modern #calWeekdays { margin-bottom: 6px !important; }
body.cl-modern #calWeekdays li,
body.cl-modern .week-days li {
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--sv-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 6px 0 !important;
  background: transparent !important;
  border: none !important;
}
body.cl-modern #calDays li,
body.cl-modern .days-number li {
  aspect-ratio: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sv-text) !important;
  cursor: pointer !important;
  position: relative !important;
  border: 1.5px solid transparent !important;
  background: transparent !important;
  padding: 0 !important;
  transition: all .15s !important;
  font-family: inherit !important;
  list-style: none !important;
}
body.cl-modern #calDays li.active-day,
body.cl-modern #calDays li.day-number.active-day {
  background: rgba(255,255,255,.6) !important;
  border-color: var(--sv-border) !important;
  color: var(--sv-text) !important;
}
body.cl-modern #calDays li.active-day:hover {
  background: rgba(11,71,212,.08) !important;
  border-color: rgba(11,71,212,.30) !important;
  color: var(--sv-primary) !important;
  transform: scale(1.04);
}
body.cl-modern #calDays li.is-picked,
body.cl-modern #calDays li.day-number.is-picked,
body.cl-modern #calDays li.selected {
  background: linear-gradient(135deg, var(--sv-primary), var(--sv-primary-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(11,71,212,.40) !important;
  font-weight: 800 !important;
  transform: scale(1.04);
}
body.cl-modern #calDays li.inactive-day {
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
  opacity: .5;
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────
   PAYMENT CARDS (windows page) — vertical layout (icon top / text below)
   so they survive even in narrow side panels (col-md-6).
   ─────────────────────────────────────────────────────────────── */
body.cl-modern .pay-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
}
body.cl-modern .pay-card {
  position: relative !important;
  background: linear-gradient(180deg, #fff 0%, #fafbfd 100%) !important;
  border: 2px solid var(--sv-border) !important;
  border-radius: 16px !important;
  padding: 18px 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: all .2s !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sv-text) !important;
  overflow: hidden;
  min-height: 130px;
}
body.cl-modern .pay-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sv-primary), var(--sv-purple));
  opacity: 0;
  transition: opacity .25s;
}
body.cl-modern .pay-card input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0; height: 0;
}
body.cl-modern .pay-card .icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  position: relative;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}
body.cl-modern .pay-card[data-value="card"] .icon {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(59,130,246,.30) !important;
}
body.cl-modern .pay-card[data-value="cash"] .icon {
  background: linear-gradient(135deg, #34d399, #10b981) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(16,185,129,.30) !important;
}
body.cl-modern .pay-card span {
  display: block !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  font-size: 12.5px !important;
  color: var(--sv-muted) !important;
  word-break: normal !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}
body.cl-modern .pay-card span strong {
  font-weight: 700 !important;
  color: var(--sv-text) !important;
  font-size: 14.5px !important;
  display: block !important;
  margin-bottom: 2px;
}
body.cl-modern .pay-card:hover {
  transform: translateY(-2px);
  border-color: #c7d2fe !important;
  box-shadow: var(--sv-shadow-md) !important;
}
body.cl-modern .pay-card.active,
body.cl-modern .pay-card:has(input[type="radio"]:checked) {
  border-color: var(--sv-primary) !important;
  background: linear-gradient(180deg, rgba(11,71,212,.04), #fff) !important;
  box-shadow: 0 14px 30px rgba(11,71,212,.18) !important;
}
body.cl-modern .pay-card.active::before,
body.cl-modern .pay-card:has(input[type="radio"]:checked)::before { opacity: 1; }
@media (max-width: 600px) {
  body.cl-modern .pay-options { grid-template-columns: 1fr !important; }
  body.cl-modern .pay-card { min-height: 0 !important; }
}

/* Place order area */
body.cl-modern #placeOrderTotalBox {
  background: #fff !important;
  border: 1px solid rgba(11,71,212,.18) !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: var(--sv-text) !important;
}
body.cl-modern #placeOrderTotalBox span#placeOrderTotal,
body.cl-modern #placeOrderTotal {
  background: linear-gradient(135deg, var(--sv-primary), var(--sv-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--sv-primary) !important;
  font-size: 20px !important;
  margin-left: 4px;
}

/* Primary submit button (Zamow / Place order) — anything green/blue submit button */
body.cl-modern .panel button[type="submit"],
body.cl-modern .panel button.btn-primary,
body.cl-modern .btnRegister,
body.cl-modern button.btnRegister,
body.cl-modern #placeOrderBtn,
body.cl-modern .btn-place-order {
  background: linear-gradient(135deg, var(--sv-primary), var(--sv-primary-2)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 26px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 12px 28px rgba(11,71,212,.30) !important;
  transition: transform .15s, box-shadow .15s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
body.cl-modern .panel button[type="submit"]:hover,
body.cl-modern .panel button.btn-primary:hover,
body.cl-modern #placeOrderBtn:hover,
body.cl-modern .btn-place-order:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(11,71,212,.42) !important;
}

/* ───────────────────────────────────────────────────────────────
   TERMS CHECKBOX (any custom-checkbox usage)
   ─────────────────────────────────────────────────────────────── */
body.cl-modern .custom-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--sv-text) !important;
  background: #fff !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--sv-border) !important;
  margin: 12px 0 0 !important;
  padding-left: 14px !important;
  position: relative !important;
}
body.cl-modern .custom-checkbox::before,
body.cl-modern .custom-checkbox::after { display: none !important; content: none !important; }
body.cl-modern .custom-checkbox > span,
body.cl-modern .custom-checkbox span:empty { display: none !important; }
body.cl-modern .custom-checkbox input[type="checkbox"] {
  display: inline-block !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 1px 0 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  accent-color: var(--sv-primary) !important;
  position: static !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.cl-modern .custom-checkbox a {
  color: var(--sv-primary) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline !important;
}

/* ───────────────────────────────────────────────────────────────
   PROMOTION BANNER (fragment — soft amber)
   ─────────────────────────────────────────────────────────────── */
body.cl-modern .promo-banner {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  border: 1px solid #fbbf24 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin: 0 0 16px !important;
}

/* ───────────────────────────────────────────────────────────────
   SEO TEXT (bottom of page)
   ─────────────────────────────────────────────────────────────── */
body.cl-modern .seo-text {
  background: var(--sv-card) !important;
  border: 1px solid var(--sv-border) !important;
  border-radius: var(--sv-radius-lg) !important;
  border-image: none !important;
  max-width: 1100px !important;
  margin: 32px auto !important;
  padding: 36px 40px !important;
  box-shadow: var(--sv-shadow-sm) !important;
  position: relative;
  overflow: hidden;
  color: #475569 !important;
  line-height: 1.7;
  font-size: 14.5px;
}
body.cl-modern .seo-text::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sv-primary), var(--sv-primary-2), var(--sv-purple));
}
body.cl-modern .seo-text h2,
body.cl-modern .seo-text h3 {
  color: var(--sv-text) !important;
  font-weight: 800 !important;
  letter-spacing: -.018em;
}
body.cl-modern .seo-text h2 { font-size: clamp(22px, 3vw, 28px) !important; text-align: left !important; }
body.cl-modern .seo-text h3 { font-size: 17px !important; color: var(--sv-primary) !important; margin-top: 18px; }
body.cl-modern .seo-text p,
body.cl-modern .seo-text li { color: #475569 !important; line-height: 1.7; }
@media (max-width: 700px) {
  body.cl-modern .seo-text { padding: 22px 18px !important; max-width: calc(100% - 24px) !important; }
}

/* Hidden inputs sanity */
body.cl-modern input[type="hidden"] { display: none !important; }