/* cz-quote-application — Step 4 styles */
.cz-quote-application {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* ── Loading state ──────────────────────────────────────────────────────── */
/* .cz-quote-application .cz-quote-loading — padding/centering defined in quote-journey.css */
/* .cz-quote-loading p — defined in quote-journey.css */

/* ── Card panel ─────────────────────────────────────────────────────────── */
.cz-quote-application .cz-q-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.07);
  padding: 40px 48px 36px;
  position: relative;
  overflow: hidden;
}

/* Submit overlay — covers the panel while submitting */
.cz-quote-application .cz-submit-overlay {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}
.cz-quote-application .cz-submit-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* During form submission, fix the overlay to the viewport so the spinner is always in view */
.cz-quote-application .cz-submit-overlay.is-submitting {
  position: fixed;
  border-radius: 0;
  z-index: 1000;
}

@media (max-width: 600px) {
  .cz-quote-application .cz-q-panel {
    padding: 28px 20px 24px;
    border-radius: 16px;
  }
}

.cz-quote-application h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #111827;
}

/* ── Intro box ───────────────────────────────────────────────────── */
.cz-app-intro-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0;
  margin-bottom: 32px;
}
.cz-app-intro-box .cz-app-intro-text {
  margin: 0;
}

/* ── Intro text (shown after deal loads) ─────────────────────────── */
.cz-app-intro-text {
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 28px;
}
.cz-app-confirm-lead {
  color: #176862;
  font-weight: 700;
}

/* ── Section intro (helper text under section h3) ────────────────── */
.cz-section-intro {
  font-size: 14px;
  color: #6b7280;
  margin: -8px 0 16px;
  line-height: 1.5;
}

/* ── Form sections ──────────────────────────────────────────────────────── */
.cz-form-section {
  margin-bottom: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid #f3f4f6;
}
.cz-form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

/* First section gets extra top margin to space it from the intro box */
#cz-application-form {
  margin-top: 0;
}

.cz-form-section--first {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 20px;
}.cz-form-section h3 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e5e7eb;
}

/* ── Section hint + note + optional label ─────────────────────────────── */
.cz-section-hint {
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.6;
  margin: -8px 0 16px;
}
.cz-section-note {
  font-size: 14px;
  color: #6b7280;
  margin: 4px 0 0;
  line-height: 1.6;
}
.cz-optional-label {
  font-size: 13px;
  font-weight: 400;
  color: #9ca3af;
  margin-left: 4px;
}

/* ── Question label (above radio groups) ───────────────────────────────── */
.cz-question-label {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 10px;
  line-height: 1.5;
}

/* ── Radio group ────────────────────────────────────────────────────────── */
.cz-radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cz-radio-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  color: #374151;
  cursor: pointer;
}
.cz-radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #279a93;
}

/* ── Reveal block ───────────────────────────────────────────────────────── */
.cz-reveal-block {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px 12px;
  margin-bottom: 20px;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.cz-quote-application .cz-field {
  margin-bottom: 16px;
}
.cz-quote-application .cz-field label,
.cz-quote-application .cz-field .cz-question-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.cz-quote-application .cz-field input[type="date"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  -webkit-appearance: none;
}
.cz-quote-application .cz-field input[type="date"]:focus {
  outline: none;
  border-color: #279a93;
  box-shadow: 0 0 0 3px rgba(39,154,147,0.12);
}

.cz-quote-application .cz-field input[type="text"],
.cz-quote-application .cz-field input[type="email"],
.cz-quote-application .cz-field input[type="tel"],
.cz-quote-application .cz-field input[type="url"],
.cz-quote-application .cz-field select {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.cz-quote-application .cz-field select {
  height: 44px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.cz-quote-application .cz-field input:focus,
.cz-quote-application .cz-field select:focus {
  outline: none;
  border-color: #279a93;
  box-shadow: 0 0 0 3px rgba(39, 154, 147, 0.12);
}

/* Read-only display input */
.cz-display-input {
  margin-top: 6px;
  background: #f9fafb !important;
  color: #374151 !important;
  cursor: default !important;
}

/* Required asterisk — defined in quote-journey.css; kept here as a no-op fallback */

/* ── Name pair (two columns) ────────────────────────────────────────────── */
.cz-quote-application .cz-name-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 480px) {
  .cz-quote-application .cz-name-pair { grid-template-columns: 1fr; }
}

/* ── Checkbox field ─────────────────────────────────────────────────────── */
.cz-field--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cz-field--checkbox input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: #279a93;
  flex-shrink: 0;
}
.cz-field--checkbox label {
  font-size: 14px;
  font-weight: 400 !important;
  color: #374151;
  line-height: 1.5;
  cursor: pointer;
}

/* ── Address confirm (correspondence = property) ───────────────────────── */
.cz-app-addr-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0faf9;
  border: 1px solid #b8f5f1;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  color: #176862;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* ── Green check badge ──────────────────────────────────────────────────── */
.cz-check-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Address lookup ─────────────────────────────────────────────────────── */
.cz-address-lookup-wrapper {
  position: relative;
}
.cz-address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 8px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.cz-address-suggestions li {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
}
.cz-address-suggestions li:hover,
.cz-address-suggestions li.is-highlighted {
  background: #f0faf9;
}

/* ── Entity card (EA / conv after lookup) ───────────────────────────────── */
.cz-entity-card {
  background: #f0faf9;
  border: 1.5px solid #b8f5f1;
  border-radius: 12px;
  padding: 14px 16px 10px;
  margin-bottom: 16px;
}
.cz-entity-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cz-entity-card-body {
  flex: 1;
  min-width: 0;
}
/* Editable name input inside the card — styled as inline text */
.cz-entity-name-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 600;
  color: #176862;
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed rgba(23,104,98,0.35);
  border-radius: 0;
  padding: 0 0 3px;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  outline: none;
  transition: border-bottom-color 0.2s, border-bottom-width 0.2s, font-weight 0.1s;
}
.cz-entity-name-input:focus {
  border-bottom: 1px solid #279a93;
  font-weight: 700;
}
.cz-entity-name-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}
/* Address line inside the card */
.cz-entity-address-line {
  font-size: 13px;
  color: #6b7280;
  margin: 5px 0 0;
  line-height: 1.4;
}
/* Card footer — two actions sit bottom-right */
.cz-entity-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(184,245,241,0.6);
}
/* "Edit name" — primary-ish, teal underline */
.cz-edit-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #279a93;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
.cz-edit-btn:hover { color: #176862; }
/* "Start over" — green, visually consistent with Edit name */
.cz-reset-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #279a93;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
}
.cz-reset-btn:hover { color: #ef4444; }

/* ── Co-seller rows ─────────────────────────────────────────────────────── */
.cz-coseller-row {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px 12px;
  margin-bottom: 16px;
}
.cz-coseller-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.cz-coseller-title {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

/* Three-column name row: [Title narrow] [First name] [Last name] */
.cz-coseller-name-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.cz-coseller-name-row .cz-field { flex: 1 1 0; min-width: 0; margin-bottom: 16px; }
.cz-coseller-name-row .cz-field--title { flex: 0 0 90px; }
@media (max-width: 540px) {
  .cz-coseller-name-row { flex-wrap: wrap; }
  .cz-coseller-name-row .cz-field--title { flex: 0 0 80px; }
}

/* Address card (replaces search input after selection) */
.cz-cosel-addr-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #e6f7f6;
  border: 1px solid #279a93;
  border-radius: 10px;
  padding: 10px 14px;
}
.cz-cosel-addr-text {
  flex: 1 1 0;
  font-size: 14px;
  color: #1e7a73;
  line-height: 1.5;
  min-width: 0;
}
.cz-cosel-addr-clear {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  flex-shrink: 0;
  font-family: inherit;
  text-decoration: underline;
}
.cz-cosel-addr-clear:hover { color: #ef4444; }

.cz-remove-coseller {
  background: none;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 13px;
  color: #ef4444;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cz-remove-coseller:hover {
  background: #fef2f2;
}

/* ── Inline per-field validation errors ────────────────────────────────── */
.cz-field-error {
  display: none;
  color: #e97677;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 5px;
}
.cz-field-error.is-visible {
  display: block;
}
.cz-quote-application .cz-field-invalid {
  border-color: #e97677 !important;
  box-shadow: 0 0 0 3px rgba(233, 118, 119, 0.15) !important;
}

/* ── Form error ─────────────────────────────────────────────────────────── */
.cz-field-error[data-for="form"] {
  display: none;
  color: #ef4444;
  font-size: 14px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 8px;
}

/* ── Journey nav row ────────────────────────────────────────────────────── */
.cz-journey-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  gap: 12px;
}
.cz-nav-back {
  background: none;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.cz-nav-back:hover {
  border-color: #279a93;
  color: #279a93;
}

@media (max-width: 768px) {
  .cz-quote-application { padding: 24px 16px; }
}
@media (max-width: 480px) {
  .cz-nav-back { padding: 10px 14px; font-size: 13px; }
}

/* ── Error state card ───────────────────────────────────────────────────── */
.cz-error-card {
  background: #fff;
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  max-width: 480px;
  margin: 48px auto;
}
.cz-error-icon {
  display: block;
  width: 52px;
  height: 52px;
  color: #ef4444;
  margin: 0 auto 20px;
}
.cz-error-card h2 {
  font-family: Recoleta, serif;
  font-size: 24px;
  color: #111827;
  margin: 0 0 12px;
}
.cz-error-card p {
  font-size: 15px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 24px;
}
.cz-error-card p a { color: #279a93; }
.cz-error-home-btn {
  display: inline-block;
  background: #279a93;
  color: #fff;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.cz-error-home-btn:hover { background: #1e7a73; color: #fff; }

/* Confirm-email note — appears inside the reveal wrapper */
.cz-quote-application .cz-confirm-note {
  color: #1e7a73;
  font-size: 0.875rem;
  font-style: italic;
  margin: 0 0 10px;
}

/* Confirm-email wrapper — teal notice box revealed at submit time */
.cz-quote-application .cz-email-confirm-wrap {
  background: #eef8f7;
  border: 1.5px solid #279a93;
  border-radius: 8px;
  padding: 16px;
  margin-top: 2px;
}

/* ── Seller type select ─────────────────────────────────────────────────── */
#seller-type-select {
  width: 100%;
  padding: 10px 36px 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  color: #374151;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
}
#seller-type-select:focus {
  outline: none;
  border-color: #279a93;
  box-shadow: 0 0 0 3px rgba(39,154,147,0.15);
}

/* ── Manual (non-UK) corporate address fields ───────────────────────────── */
.cz-manual-address-fields {
  margin-top: 12px;
  padding: 16px 18px 4px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.cz-manual-address-fields .cz-field {
  margin-bottom: 12px;
}