/* POHREBKA F22E - unified visual layer for the full wizard */

#b702-dark-wizard-root {
  --f22e-surface: #173b30;
  --f22e-surface-deep: #102c25;
  --f22e-border: #456b58;
  --f22e-text: #f2f6ef;
  --f22e-muted: #c4d5c8;
}

/* Consistent width across all steps */
#b702-dark-wizard-root .b702-main {
  min-width: 0 !important;
}

#b702-dark-wizard-root .b702-content {
  width: min(calc(100% - 40px), 1450px) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding: 24px 0 48px !important;
  box-sizing: border-box !important;
}

/* Panels, documents, services, finance and final summary */
#b702-dark-wizard-root .b702-panel,
#b702-dark-wizard-root .b702-form-card,
#b702-dark-wizard-root .b702-flowers-card,
#b702-dark-wizard-root .b702-flower-item,
#b702-dark-wizard-root .b702-florist,
#b702-dark-wizard-root .b702-flower-billing,
#b702-dark-wizard-root .b702-flower-total,
#b702-dark-wizard-root .b702-preview,
#b702-dark-wizard-root .b702-needs {
  background: var(--f22e-surface) !important;
  border-color: var(--f22e-border) !important;
  color: var(--f22e-text) !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

/* Unified typography */
#b702-dark-wizard-root .b702-title h1 {
  font-size: clamp(25px, 2vw, 32px) !important;
  line-height: 1.2 !important;
}

#b702-dark-wizard-root .b702-section-title h2 {
  font-size: 21px !important;
  line-height: 1.35 !important;
}

#b702-dark-wizard-root .b702-title p,
#b702-dark-wizard-root .b702-section-title p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

#b702-dark-wizard-root .b702-field > span,
#b702-dark-wizard-root .b702-flowers-card label {
  font-size: 15px !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}

/* Forms across every step */
#b702-dark-wizard-root .b702-panel input:not([type="checkbox"]):not([type="radio"]),
#b702-dark-wizard-root .b702-panel select,
#b702-dark-wizard-root .b702-panel textarea,
#b702-dark-wizard-root .b702-flowers-card input:not([type="checkbox"]):not([type="radio"]),
#b702-dark-wizard-root .b702-flowers-card select,
#b702-dark-wizard-root .b702-flowers-card textarea {
  background: var(--f22e-surface-deep) !important;
  color: var(--f22e-text) !important;
  border: 1px solid #789582 !important;
  border-radius: 8px !important;
  min-height: 42px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

#b702-dark-wizard-root input::placeholder,
#b702-dark-wizard-root textarea::placeholder {
  color: #b8cdbd !important;
  opacity: 1 !important;
}

#b702-dark-wizard-root input[type="checkbox"],
#b702-dark-wizard-root input[type="radio"] {
  accent-color: #b8d4a7 !important;
}

/* Right-hand information summary */
@media (min-width: 1101px) {
  #b702-dark-wizard-root .b702-app[data-b702-step] .b702-grid:has(> #b702-right) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 22px !important;
    align-items: start !important;
  }

  #b702-dark-wizard-root .b702-app[data-b702-step] #b702-right {
    display: block !important;
    min-width: 0 !important;
  }

  #b702-dark-wizard-root .b702-app[data-b702-step="0"] #b702-right {
    display: none !important;
  }

  #b702-dark-wizard-root #b702-right > aside {
    position: sticky !important;
    top: 88px !important;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}

#b702-dark-wizard-root #b702-right .b702-panel {
  padding: 18px !important;
  margin-bottom: 14px !important;
}

#b702-dark-wizard-root #b702-right .b702-panel h3 {
  color: #f5f8f2 !important;
  font-size: 17px !important;
}

#b702-dark-wizard-root #b702-right .b702-kv {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Cards and rows should not overflow */
#b702-dark-wizard-root .b702-grid > *,
#b702-dark-wizard-root .b702-grid-form > *,
#b702-dark-wizard-root .b702-flower-grid > * {
  min-width: 0 !important;
}

#b702-dark-wizard-root .b702-flower-grid {
  gap: 14px !important;
}

/* Mobile */
@media (max-width: 1100px) {
  #b702-dark-wizard-root .b702-grid,
  #b702-dark-wizard-root .b702-grid-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #b702-dark-wizard-root #b702-right > aside {
    position: static !important;
    max-height: none !important;
  }
}

@media (max-width: 760px) {
  #b702-dark-wizard-root .b702-content {
    width: auto !important;
    padding: 16px 12px 30px !important;
  }

  #b702-dark-wizard-root .b702-panel,
  #b702-dark-wizard-root .b702-flowers-card {
    padding: 15px !important;
  }
}