/* ── Form Page — modern insurance form UI ── */
.form-page {
  --form-radius-xl: 12px;
  --form-radius-lg: 10px;
  --form-radius-md: 8px;
  --form-radius-sm: 6px;
  --form-gutter: 24px;
  --form-bg: #eef1f6;
  --form-border: #dde3ec;
  --form-input-border: #c8d0dc;
  --form-input-bg: #ffffff;
  --form-label: #374151;
  --form-muted: #6b7280;
  --form-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 20px rgba(16, 24, 40, 0.06);
}

.form-page .main-wrapper {
  min-height: 100vh;
  width: 100%;
}

.form-page .main-content {
  flex: 1;
  width: 100%;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--form-bg);
}

.form-page .page-footer {
  display: none;
}

.form-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 100%;
}

/* ── Header ── */
.form-header {
  background: var(--brand-green-gradient);
  color: var(--white);
  width: 100%;
  min-height: 56px;
  padding: 14px var(--form-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  box-shadow: var(--brand-green-shadow);
}

.form-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.form-header-logo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--white);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.form-header-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.form-header-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--form-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.form-header-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.form-header-badge {
  background: rgba(255, 255, 255, 0.95);
  color: #c0392b;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Body ── */
.form-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ── Step wizard ── */
.form-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 16px var(--form-gutter);
  box-sizing: border-box;
  background: var(--white);
  border-bottom: 1px solid var(--form-border);
}

.step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background var(--transition), opacity var(--transition);
}

.step-item:not(.active):not(.done) {
  cursor: default;
  opacity: 0.55;
}

.step-item.done {
  cursor: pointer;
}

.step-item.active {
  background: var(--accent-green-soft);
  opacity: 1;
}

.step-item.done:hover {
  background: #f0faf5;
  opacity: 1;
}

.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  background: #e8ecf2;
  color: var(--form-muted);
  border: 2px solid transparent;
  transition: all var(--transition);
  flex-shrink: 0;
}

.step-text {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--form-muted);
  white-space: nowrap;
  transition: color var(--transition);
}

.step-item.active .step-num {
  background: var(--accent-green);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(61, 184, 138, 0.35);
}

.step-item.active .step-text {
  color: var(--text-dark);
  font-weight: 600;
}

.step-item.done .step-num {
  background: var(--white);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.step-item.done .step-text {
  color: var(--accent-green);
}

.step-line {
  flex: 0 0 40px;
  height: 2px;
  background: #e2e8f0;
  border-radius: 1px;
  transition: background var(--transition);
}

.step-line.done {
  background: var(--accent-green);
}

/* ── Layout & panels ── */
.form-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--form-gutter);
  box-sizing: border-box;
  flex: 1;
}

.form-step {
  display: none !important;
}

.form-step.step-active {
  display: flex !important;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius-xl);
  box-shadow: var(--form-shadow);
  overflow: hidden;
  animation: stepIn 0.3s ease;
}

@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  flex-direction: column;
}

.form-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px var(--form-gutter);
  border-bottom: 1px solid var(--form-border);
  background: linear-gradient(180deg, #fafbfc 0%, #f6f8fb 100%);
  flex-wrap: wrap;
}

.panel-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
}

.panel-head-left svg {
  width: 18px;
  height: 18px;
  color: var(--accent-green);
}

.btn-load-data {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--form-muted);
  background: var(--white);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius-md);
  padding: 7px 14px;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-load-data:hover {
  border-color: var(--accent-green);
  color: var(--accent-green);
  background: var(--accent-green-soft);
}

/* ── Section groups ── */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-section + .form-section {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px dashed var(--form-border);
}

.form-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding-bottom: 6px;
  line-height: 1.4;
}

.form-section-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-section-highlight {
  background: linear-gradient(135deg, #f0faf5 0%, #e8f7f0 100%);
  margin: 0 calc(-1 * var(--form-gutter));
  padding: 20px var(--form-gutter);
  border-top: 1px solid #c8e8d8;
  border-bottom: 1px solid #c8e8d8;
}

.form-section-highlight .form-section-title {
  color: #1f7a55;
}

/* ── Policy 2-column ── */
.policy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  align-items: stretch;
}

.policy-col {
  padding: 24px var(--form-gutter);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.policy-col:last-child {
  padding-bottom: 0;
}

.policy-col .form-section + .form-section-highlight {
  border-top: 1px solid #c8e8d8;
  margin-top: 8px;
  padding-top: 20px;
}

.policy-col:last-child .form-section-highlight {
  flex: 1;
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.policy-col:last-child .form-section-highlight .form-section-body {
  flex: 1;
}

.policy-col:first-child {
  border-right: 1px solid var(--form-border);
}

/* Steps 2–3: 2-column grid */
.panel-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  padding: 24px var(--form-gutter);
  width: 100%;
  box-sizing: border-box;
}

.panel-fields .form-field-h {
  min-width: 0;
}

.panel-fields .form-field-h:has(.field-stack),
.panel-fields .form-field-h:has(.spec-inputs),
.panel-fields .form-field-h:has(#licensePlate),
.panel-fields .form-field-h.field-check {
  grid-column: 1 / -1;
}

/* ── Fields — vertical label layout ── */
.form-field-h {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

.form-field-h > :not(.form-label) {
  width: 100%;
  min-width: 0;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--form-label);
  text-align: left;
  line-height: 1.4;
}

.form-field-h:has([required]) .form-label::after {
  content: ' *';
  color: var(--accent-red);
  font-weight: 700;
}

.form-input,
.form-select {
  font-family: 'Better Together', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dark);
  background: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  border-radius: var(--form-radius-md);
  padding: 0 12px;
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.form-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.form-input:hover:not(:read-only):not(:disabled),
.form-select:hover:not(:disabled) {
  border-color: #a8b4c4;
}

.form-input:focus,
.form-select:focus,
.search-select-input:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(61, 184, 138, 0.15);
}

.form-input.readonly,
.form-select:disabled {
  background: #f3f5f9;
  color: var(--form-muted);
  border-color: var(--form-border);
}

.form-select:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

/* ── Field groups ── */
.field-inline {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.field-inline .form-input {
  flex: 1;
  min-width: 0;
}

.field-dates {
  display: flex;
  align-items: center;
  gap: 10px;
}

.field-dates .form-input {
  flex: 1;
  min-width: 0;
}

.date-sep {
  font-size: 0.8rem;
  color: var(--form-muted);
  flex-shrink: 0;
  font-weight: 500;
}

.field-split {
  display: flex;
  gap: 10px;
}

.field-split .form-input,
.field-split .form-select,
.field-split .search-select {
  flex: 1;
  min-width: 0;
}

.field-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.input-unit {
  position: relative;
  width: 100%;
}

.input-unit .form-input {
  padding-right: 52px;
  text-align: right;
}

.input-unit .unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--form-muted);
  pointer-events: none;
  font-weight: 500;
}

.spec-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.spec-inputs .input-unit {
  min-width: 0;
}

/* ── Premium ── */
.form-field-h.field-premium {
  gap: 8px;
}

.premium-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.premium-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.premium-sublabel {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--form-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.premium-abbr {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  font-style: normal;
  color: #6b8cae;
  background: #eef4fa;
  border: 1px solid #d4e2f0;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.form-input.total-premium {
  background: var(--white);
  border: 2px solid var(--accent-green);
  color: #1a7a52;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: right;
  height: 48px;
}

/* ── Buttons ── */
.btn-search {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--form-radius-md);
  background: var(--accent-green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
}

.btn-search:hover {
  background: #2d9a6e;
  transform: translateY(-1px);
}

/* ── Checkbox & radios ── */
.form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text-dark);
  cursor: pointer;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius-md);
  width: fit-content;
  transition: border-color var(--transition), background var(--transition);
}

.form-check-inline:hover {
  border-color: var(--accent-green);
  background: var(--accent-green-soft);
}

.form-check-inline input {
  accent-color: var(--accent-green);
  width: 16px;
  height: 16px;
}

.field-check {
  min-height: auto;
}

.head-radios {
  display: inline-flex;
  gap: 0;
  flex-wrap: wrap;
  background: #eef1f6;
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius-md);
  padding: 3px;
}

.form-radio-sm {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--form-muted);
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: calc(var(--form-radius-md) - 2px);
  transition: all var(--transition);
}

.form-radio-sm input {
  accent-color: var(--accent-green);
  width: 14px;
  height: 14px;
}

.form-radio-sm:has(input:checked) {
  color: var(--text-dark);
  font-weight: 600;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── Searchable Select ── */
.search-select {
  position: relative;
  width: 100%;
}

.search-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.search-select-input {
  padding-right: 32px;
  cursor: text;
}

.search-select-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--form-muted);
  display: flex;
  cursor: pointer;
}

.search-select.open .search-select-chevron {
  transform: translateY(-50%) rotate(180deg);
}

.search-select.disabled .search-select-input {
  opacity: 0.75;
  cursor: not-allowed;
  background: #f3f5f9;
}

.search-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius-md);
  box-shadow: var(--shadow-md);
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 4px;
  display: none;
}

.search-select.open .search-select-dropdown {
  display: block;
}

.search-select-item {
  padding: 8px 12px;
  font-size: 0.84rem;
  cursor: pointer;
  border-radius: calc(var(--form-radius-md) - 2px);
}

.search-select-item:hover,
.search-select-item.highlighted {
  background: var(--accent-green-soft);
}

.search-select-item.empty {
  color: var(--form-muted);
  cursor: default;
  font-size: 0.8rem;
}

/* ── Footer ── */
.form-footer {
  padding: 14px var(--form-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  border-top: 1px solid var(--form-border);
  background: var(--white);
  box-sizing: border-box;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.06);
}

.form-footer-hint {
  font-size: 0.84rem;
  color: var(--form-muted);
  margin: 0;
  font-weight: 500;
}

.form-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-prev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  color: var(--form-muted);
  font-family: 'Better Together', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--form-radius-md);
  border: 1px solid var(--form-border);
  cursor: pointer;
  transition: all var(--transition);
}

.btn-prev:hover {
  border-color: #a8b4c4;
  color: var(--text-dark);
  background: #f8fafc;
}

.btn-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-green-gradient);
  color: var(--white);
  font-family: 'Better Together', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 26px;
  border-radius: var(--form-radius-md);
  border: none;
  cursor: pointer;
  box-shadow: var(--brand-green-shadow);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-next:hover {
  background: var(--brand-green-gradient-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(45, 143, 104, 0.35);
}

.nav-sub-link.active {
  background: var(--bg-page);
  font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .policy-grid {
    grid-template-columns: 1fr;
  }

  .policy-col:first-child {
    border-right: none;
    border-bottom: 1px solid var(--form-border);
    padding-bottom: 20px;
  }

  .policy-col:last-child {
    padding-top: 4px;
    padding-bottom: 0;
  }

  .policy-col:last-child .form-section-highlight {
    flex: none;
    padding-bottom: 20px;
    border-bottom: 1px solid #c8e8d8;
  }

  .form-section-highlight {
    margin-left: calc(-1 * var(--form-gutter));
    margin-right: calc(-1 * var(--form-gutter));
  }

  .panel-fields {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .panel-fields .form-field-h:has(.field-stack),
  .panel-fields .form-field-h:has(.spec-inputs),
  .panel-fields .form-field-h:has(#licensePlate),
  .panel-fields .form-field-h.field-check {
    grid-column: auto;
  }

  .premium-inputs,
  .spec-inputs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .form-page {
    --form-gutter: 16px;
  }

  .form-header {
    min-height: auto;
    padding: 12px var(--form-gutter);
  }

  .form-header-title {
    font-size: 0.88rem;
  }

  .form-steps {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    padding: 12px var(--form-gutter);
  }

  .step-line {
    display: none;
  }

  .step-text {
    font-size: 0.75rem;
  }

  .step-item {
    padding: 6px 10px;
  }

  .form-layout {
    padding: 12px;
  }

  .policy-col,
  .panel-fields {
    padding: 16px;
  }

  .form-panel-head {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .head-radios {
    width: 100%;
    flex-wrap: wrap;
  }

  .field-dates,
  .field-split {
    flex-direction: column;
  }

  .form-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .form-footer-hint {
    text-align: center;
    font-size: 0.8rem;
  }

  .form-footer-actions {
    justify-content: stretch;
    width: 100%;
  }

  .form-footer-actions .btn-prev,
  .form-footer-actions .btn-next {
    flex: 1;
    justify-content: center;
  }
}


/* ── ERGO single-page card layout ── */
.ergo-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: var(--form-gutter);
  width: 100%;
  box-sizing: border-box;
  align-items: start;
  overflow: visible;
}

.ergo-form.form-card,
.product-key__form > .form-card.ergo-form {
  overflow: visible;
}

.ergo-form .form-body {
  overflow: visible;
}

.ergo-layout__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: visible;
}

.ergo-carcode__picker.is-open {
  z-index: 50;
}

.form-panel--card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius-xl);
  box-shadow: var(--form-shadow);
  overflow: visible;
}

.form-panel--card .form-panel-head {
  border-radius: var(--form-radius-xl) var(--form-radius-xl) 0 0;
}

.form-panel--card .panel-fields {
  grid-template-columns: 1fr;
}

.form-panel--card .panel-fields .form-field-h:has(.field-dates),
.form-panel--card .panel-fields .form-field-h:has(.premium-inputs),
.form-panel--card .panel-fields .form-field-h:has(.spec-inputs),
.form-panel--card .panel-fields .form-field-h:has(.field-split),
.form-panel--card .panel-fields .form-field-h.field-check,
.form-panel--card .panel-fields .form-field-h.ergo-field--full,
.form-panel--card .panel-fields .ergo-field-row,
.form-panel--card .panel-fields .form-field-h:has(#carType),
.form-panel--card .panel-fields .form-field-h:has(#chassisNo) {
  grid-column: 1 / -1;
}

.form-check-inline--plain {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto;
}

.form-check-inline--plain:hover {
  background: transparent;
  border: none;
  color: var(--text-dark);
}

.ergo-field-row--days {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.ergo-field-row--days > .ergo-field--days {
  flex: 0 0 140px;
  min-width: 0;
}

.ergo-field-row--days > .form-check-inline--plain {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
  height: 42px;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-bottom: 0;
}

.form-check-inline--danger {
  color: #c0392b;
  font-weight: 600;
}

.ergo-carcode {
  align-items: stretch;
}

.ergo-carcode__picker {
  position: relative;
  flex: 1;
  min-width: 0;
}

.ergo-carcode__picker .form-input {
  cursor: pointer;
  background: #eef6ff;
  border-color: #bfd4f0;
  font-weight: 700;
}

.ergo-carcode__picker.is-open .form-input {
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px var(--accent-green-soft);
}

.ergo-carcode__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 280px;
  max-width: 420px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12);
}

.ergo-carcode__picker.is-open .ergo-carcode__menu,
.ergo-carcode__menu:not([hidden]) {
  display: flex;
}

.ergo-carcode__menu[hidden] {
  display: none !important;
}

.ergo-carcode__chip {
  appearance: none;
  border: 1px solid #c7d7ef;
  background: #edf4ff;
  color: #1f4f8a;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ergo-carcode__chip:hover,
.ergo-carcode__chip.is-active {
  background: #d7e8ff;
  border-color: #7eabd9;
}

.ergo-carcode__chip--ev {
  background: #e8f7ee;
  border-color: #b7e0c6;
  color: #1f7a55;
}

.ergo-carcode__chip--ev:hover,
.ergo-carcode__chip--ev.is-active {
  background: #d5f0df;
  border-color: #7fc49a;
}

.ergo-color__picker {
  position: relative;
  width: 100%;
  min-width: 0;
  z-index: 1;
}

.ergo-color__picker.is-open {
  z-index: 50;
}

.ergo-color__picker .form-input {
  cursor: pointer;
}

.ergo-color__picker .form-input.has-color {
  border-color: var(--selected-color, var(--accent-green));
  box-shadow: inset 4px 0 0 var(--selected-color, var(--accent-green));
  font-weight: 700;
}

.ergo-color__picker.is-open .form-input {
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px var(--accent-green-soft);
}

.ergo-color__menu {
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 0;
  z-index: 60;
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 260px;
  max-width: 360px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12);
}

.ergo-color__picker.is-open .ergo-color__menu,
.ergo-color__menu:not([hidden]) {
  display: flex;
}

.ergo-color__menu[hidden] {
  display: none !important;
}

.ergo-color__chip {
  appearance: none;
  border: 2px solid var(--chip-border, #94a3b8);
  background: var(--chip-color, #f8fafc);
  color: var(--chip-text, #334155);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ergo-color__chip:hover,
.ergo-color__chip.is-active {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.08);
}

.ergo-title__picker {
  position: relative;
  flex: 1;
  min-width: 0;
  z-index: 1;
}

.ergo-title__picker.is-open {
  z-index: 50;
}

.ergo-title__picker .form-input {
  cursor: pointer;
  font-weight: 700;
}

.ergo-title__picker.is-open .form-input {
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px var(--accent-green-soft);
}

.ergo-title__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 10px;
  min-width: 280px;
  max-width: 360px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12);
}

.ergo-title__picker.is-open .ergo-title__menu,
.ergo-title__menu:not([hidden]) {
  display: flex;
}

.ergo-title__menu[hidden] {
  display: none !important;
}

.ergo-title__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ergo-title__chip {
  appearance: none;
  border: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.ergo-title__chip--person {
  background: #3b82f6;
}

.ergo-title__chip--org {
  background: #22a06b;
}

.ergo-title__chip:hover,
.ergo-title__chip.is-active {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.ergo-title__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
}

.ergo-title__other {
  appearance: none;
  border: none;
  background: transparent;
  color: #2563eb;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.ergo-title__other:hover {
  text-decoration: underline;
}

.ergo-title__close {
  appearance: none;
  border: none;
  background: #e5e7eb;
  color: #6b7280;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.ergo-title__close:hover {
  background: #d1d5db;
  color: #374151;
}

.ergo-receipt-radios {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}

.ergo-premium-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px var(--form-gutter) 24px;
}

.ergo-premium-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--form-muted);
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--form-border);
}

.ergo-premium-summary__row strong {
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
  font-weight: 600;
}

.ergo-premium-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: var(--form-radius-lg);
  background: linear-gradient(135deg, #eef8f2 0%, #e2f3ea 100%);
  border: 1px solid #c8e8d8;
}

.ergo-premium-summary__total span {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f7a55;
}

.ergo-premium-summary__total strong {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-green, #2e9e6a);
}

@media (min-width: 1100px) {
  .form-panel--card .panel-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .ergo-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ergo-layout {
    padding: 12px;
    gap: 12px;
  }

  .form-panel--card .panel-fields {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .ergo-field-row--days {
    flex-direction: column;
    align-items: flex-start;
  }

  .ergo-field-row--days > .ergo-field--days {
    flex: 1 1 auto;
    width: 100%;
  }

  .ergo-premium-summary__total strong {
    font-size: 1.15rem;
  }
}

.ergo-form .form-header-logo {
  width: 96px;
  height: 44px;
}

/* ERGO confirm (Step 2) */
.ergo-form .form-body[hidden] {
  display: none !important;
}

.ergo-confirm {
  --confirm-ink: #14231c;
  --confirm-muted: #5f6f66;
  --confirm-line: rgba(20, 35, 28, 0.08);
  --confirm-soft: #f3faf6;
  --confirm-accent: var(--accent-green, #2e9e6a);
  padding: 22px 24px 16px;
  background:
    radial-gradient(1200px 320px at 10% -10%, rgba(46, 158, 106, 0.12), transparent 60%),
    radial-gradient(900px 280px at 100% 0%, rgba(46, 158, 106, 0.08), transparent 55%),
    linear-gradient(180deg, #f7faf8 0%, #eef1f6 100%);
}

.ergo-confirm__sheet {
  max-width: 880px;
  margin: 0 auto;
  border: 1px solid rgba(46, 158, 106, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 18px 40px rgba(20, 35, 28, 0.06);
  overflow: hidden;
  animation: ergoConfirmIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ergoConfirmIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ergo-confirm__hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 18px;
  background:
    linear-gradient(135deg, rgba(46, 158, 106, 0.1) 0%, rgba(255, 255, 255, 0.4) 55%, transparent 100%);
  border-bottom: 1px solid var(--confirm-line);
}

.ergo-confirm__hero-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(145deg, #3cb57a 0%, #1f7a55 100%);
  box-shadow: 0 8px 18px rgba(31, 122, 85, 0.28);
}

.ergo-confirm__hero-icon i {
  width: 24px;
  height: 24px;
}

.ergo-confirm__eyebrow {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--confirm-accent);
}

.ergo-confirm__hero-copy h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--confirm-ink);
  letter-spacing: -0.02em;
}

.ergo-confirm__lead {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--confirm-muted);
}

.ergo-confirm__highlights {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 1fr;
  gap: 12px;
  padding: 16px 20px 8px;
}

.ergo-confirm__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--confirm-soft);
  border: 1px solid rgba(46, 158, 106, 0.12);
}

.ergo-confirm__stat--premium {
  background: linear-gradient(145deg, #e8f7ef 0%, #d7f0e3 100%);
  border-color: rgba(46, 158, 106, 0.22);
}

.ergo-confirm__stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--confirm-muted);
}

.ergo-confirm__stat-value {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--confirm-ink);
  line-height: 1.35;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

.ergo-confirm__stat--premium .ergo-confirm__stat-value {
  font-size: 1.35rem;
  color: #1f7a55;
}

.ergo-confirm__sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 8px 8px 16px;
}

.ergo-confirm__section {
  min-width: 0;
  margin: 8px;
  padding: 4px 4px 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--confirm-line);
}

.ergo-confirm__section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 14px 10px;
}

.ergo-confirm__section-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(46, 158, 106, 0.12);
  color: var(--confirm-accent);
  flex-shrink: 0;
}

.ergo-confirm__section-icon i {
  width: 17px;
  height: 17px;
}

.ergo-confirm__section-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--confirm-ink);
}

.ergo-confirm__grid {
  margin: 0;
  padding: 2px 14px 12px;
  display: grid;
  gap: 0;
}

.ergo-confirm__row {
  display: grid;
  grid-template-columns: minmax(108px, 138px) minmax(0, 1fr);
  gap: 10px 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px dashed rgba(20, 35, 28, 0.08);
}

.ergo-confirm__row:first-child {
  border-top: 0;
}

.ergo-confirm__row dt {
  margin: 0;
  text-align: left;
  font-size: 0.8rem;
  color: var(--confirm-muted);
  font-weight: 600;
}

.ergo-confirm__row dd {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--confirm-ink);
  word-break: break-word;
}

.ergo-confirm__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  font-weight: 600;
}

.ergo-confirm__plate {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: 8px;
  border: 1.5px solid #1f2937;
  background: linear-gradient(180deg, #fff 0%, #f3f4f6 100%);
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

@media (max-width: 900px) {
  .ergo-confirm__highlights {
    grid-template-columns: 1fr;
  }

  .ergo-confirm__sections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ergo-confirm {
    padding: 12px;
  }

  .ergo-confirm__hero {
    padding: 18px 16px 14px;
  }

  .ergo-confirm__hero-copy h2 {
    font-size: 1.15rem;
  }

  .ergo-confirm__highlights {
    padding: 12px 12px 4px;
  }

  .ergo-confirm__sections {
    padding: 4px 4px 10px;
  }

  .ergo-confirm__row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .ergo-confirm__stat--premium .ergo-confirm__stat-value {
    font-size: 1.2rem;
  }
}