/* =============================================================
   Contact Form Block
   Mobile-first. Breakpoints: tablet >= 768px | desktop >= 1024px
   ============================================================= */
.contact-form-container {
  background: var(--corp-table-bg);
}
.contact-form-wrapper {
  padding: var(--corp-space-63) 0;
  margin: 0 var(--container-margin);
}

.contact-form {
  background: var(--corp-color-white);
  border-radius: var(--corp-radius-lg);
  padding: var(--corp-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-2xl);
}

/* ── Header ──
   Mobile: tabs on top, title+desc below (tabs is first child in DOM)
   Tablet+: tabs on right, title+desc on left (flex-row, tabs pushed to end)
   ─────────────────────────────────────────────────────────────── */

.contact-form__header {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-28);
}

.contact-form__header-left {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-lg);
}

.contact-form__title {
  margin: 0;
  font-size: var(--corp-type-desktop-body-lg-font-size);
  font-weight: var(--fw-500);
  line-height: var(--corp-type-mobile-heading-2-medium-line-height);
  color: var(--corp-color-neutral-black);
}

.contact-form__desc {
  margin: 0;
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  font-weight: var(--fw-400);
  color: var(--corp-color-neutral-black);
  letter-spacing: -0.24px;
  opacity: 0.7;
  padding-right: var(--corp-space-10);
}

/* ── Tab navigation — grey pill group (Figma: r=12 bg, r=10 per tab) ── */

.contact-form__tabs {
  display: flex;
  background: var(--corp-table-bg);
  border-radius: var(--corp-radius-md);
  padding: var(--corp-space-xs);
  gap: 0;
}

.contact-form__tabs a {
  display: block;
  flex: 1;
  text-align: center;
  padding: var(--corp-space-14) var(--corp-space-15);
  font-size: var(--corp-type-desktop-body-xs-font-size);
  font-weight: var(--fw-400);
  line-height: normal;
  text-decoration: none;
  color: var(--corp-color-primary);
  border-radius: var(--corp-radius-xxl);
  transition:
    background-color 140ms ease,
    color 140ms ease;
  white-space: nowrap;
}

.contact-form__tabs a.active {
  background: var(--corp-color-primary);
  color: var(--corp-color-surface-secondary);
}

.contact-form__tabs a:hover:not(.active) {
  background: var(--corp-color-overlay-primary-8);
}

/* ── Form body ── */

.contact-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-4xl);
}

/* ── Fields row (Business Area + Message) ── */

.contact-form__fields-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--corp-space-2xl);
}

.contact-form__fields-left {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-xl);
}

.contact-form__personal-name-row {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-md);
}
.contact-form__field-group {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-20);
}

.contact-form__field-group label {
  font-size: var(--corp-type-mobile-body-2-font-size);
  font-weight: var(--fw-500);
  color: var(--corp-color-neutral-black);
  line-height: var(--corp-type-mobile-heading-2-medium-line-height);
}

/* Mobile: grey-box style for all inputs, selects, and textarea */

.contact-form__field-group select,
.contact-form__field-group input,
.contact-form__field-group textarea {
  width: 100%;
  padding: var(--corp-space-lg) var(--corp-space-20);
  border: none;
  border-radius: var(--corp-radius-md);
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-500);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  color: var(--corp-color-neutral-black);
  background: var(--corp-color-surface-300);
  outline: none;
}

/* .contact-form__field-group select:focus,
.contact-form__field-group input:focus,
.contact-form__field-group textarea:focus {
  outline: 2px solid var(--corp-color-primary);
  outline-offset: -2px;
} */

.contact-form__field-group select::placeholder,
.contact-form__field-group input::placeholder,
.contact-form__field-group textarea::placeholder {
  color: var(--corp-color-overlay-black-20);
}

/* Section fields: inputs and selects both show placeholder at the same opacity */
.contact-form__section .contact-form__field-group input::placeholder {
  color: var(--corp-color-overlay-black-70);
}

.contact-form__section .contact-form__field-group select:has(option[value='']:checked) {
  color: var(--corp-color-overlay-black-70);
}

.contact-form__field-group input[type='date'] {
  accent-color: var(--corp-color-primary);
  cursor: pointer;
}

.contact-form__field-group input[type='date']::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
  height: 100%;
  cursor: pointer;
}

/* ── Custom Select ── */

.contact-form__custom-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

/* Native select is kept for value/validation but must not be visible */
.contact-form__custom-select select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-form__custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--corp-space-lg) var(--corp-space-20);
  border: none;
  border-radius: var(--corp-radius-md);
  background: var(--corp-color-surface-300);
  cursor: pointer;
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-500);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  text-align: left;
  gap: var(--corp-space-sm);
}

.contact-form__custom-select-trigger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.contact-form__custom-select-label {
  flex: 1;
  color: var(--corp-color-overlay-black-70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-form__custom-select-caret {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform 200ms ease;
}

.contact-form__custom-select.is-open .contact-form__custom-select-caret {
  transform: rotate(180deg);
}

.contact-form__custom-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: max-content;
  background: var(--corp-color-white);
  border-radius: var(--corp-radius-md);
  box-shadow: 0 4px 44px 0 var(--corp-color-overlay-black-8);
  z-index: 10;
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
  padding: var(--corp-space-md);
}

.contact-form__custom-select-option {
  display: block;
  width: 100%;
  padding: var(--corp-space-md) var(--corp-space-xl);
  text-align: left;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--corp-type-mobile-body-2-font-size);
  font-weight: var(--fw-400);
  color: var(--corp-color-neutral-black);
  cursor: pointer;
  transition: background-color 140ms ease;
  letter-spacing: -0.24px;
}

.contact-form__custom-select-option:not(:last-child) {
  margin-bottom: var(--corp-space-6);
}

.contact-form__custom-select-option:focus {
  outline: none;
  background: transparent;
}

.contact-form__custom-select-option.is-selected,
.contact-form__custom-select-option:hover {
  color: var(--corp-color-primary);
  border-radius: var(--corp-radius-xsmd);
  background: var(--corp-color-overlay-primary-5);
}

/* ── Date input with calendar icon ── */

.contact-form__date-wrapper {
  position: relative;
  width: 100%;
}

.contact-form__date-wrapper input[type='date'] {
  padding-right: var(--corp-space-3xl);
}

.contact-form__date-wrapper .icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
}

/* Custom placeholder overlay for date inputs (browser ignores placeholder attr on type=date) */

.contact-form__date-placeholder {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 48px;
  padding: var(--corp-space-lg) var(--corp-space-20);
  pointer-events: auto;
  cursor: pointer;
  color: var(--corp-color-overlay-black-70);
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-500);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Show custom placeholder when empty and the wrapper is not focused */
.contact-form__date-wrapper:not(.is-focused) input[type='date']:invalid ~ .contact-form__date-placeholder {
  display: block;
}

/* Always hide browser's mm/dd/yyyy hint while the input is empty — even on focus */
.contact-form__date-wrapper input[type='date']:invalid::-webkit-datetime-edit {
  opacity: 0;
}

.contact-form__field-group select {
  appearance: none;
  background-image: url('/corporate/icons/caret-down.svg');
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-color: var(--corp-color-surface-300);
  cursor: pointer;
}

.contact-form__field-group textarea {
  min-height: 132px;
  resize: vertical;
  margin-top: var(--corp-space-sm);
  background: var(--corp-color-white);
  border: 1px solid var(--corp-color-overlay-black-20);
  border-radius: 0;
  padding: var(--corp-space-10) var(--corp-space-md);
  font-size: var(--corp-type-mobile-body-xs-font-size);
  line-height: var(--corp-type-lh-10);
}

/* ── Attachments — always visible, blue separator above ── */

.contact-form__attachments {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-lg);
  border-top: 1px solid var(--corp-color-overlay-primary-20);
  padding-top: var(--corp-space-4xl);
}

.contact-form__attachments-title {
  margin: 0;
  font-size: var(--corp-type-mobile-heading-1-regular-font-size);
  font-weight: var(--fw-500);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  color: var(--corp-color-neutral-black);
}

.contact-form__attachments-desc {
  margin: 0;
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-400);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  color: var(--corp-color-neutral-black);
  letter-spacing: -0.24px;
  opacity: 0.7;
}

/* Single-column on mobile, two-column on tablet+ */

.contact-form__attachments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--corp-space-lg);
  margin-top: var(--corp-space-lg);
}

.contact-form__attachments-col {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-lg);
  min-width: 0;
}

.contact-form__attachment-group {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-md);
  min-width: 0;
}

.contact-form__attachment-group label {
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-400);
  color: var(--corp-color-neutral-black);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  letter-spacing: -0.24px;
  opacity: 0.7;
}

/* File input — state-driven: default | uploading | uploaded */

.contact-form__file-input {
  display: none;
}

/* Default state */

.contact-form__file-wrapper {
  width: 100%;
  min-width: 0;
}

.contact-form__file-default {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--corp-color-surface-300);
  min-height: 42px;
  padding: var(--corp-space-5) var(--corp-space-17) var(--corp-space-5) var(--corp-space-5);
  border-radius: var(--corp-radius-xxl);
}

.contact-form__file-wrapper:not([data-state='default']) .contact-form__file-default {
  display: none;
}

.contact-form__file-btn {
  flex-shrink: 0;
  padding: var(--corp-space-10) var(--corp-space-31);
  border: none;
  border-radius: var(--corp-radius-smd);
  background: var(--corp-color-white);
  color: var(--corp-color-overlay-black-40);
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-400);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  letter-spacing: -0.24px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms ease;
}

.contact-form__file-btn:hover {
  background: var(--corp-color-primary);
  color: var(--corp-color-surface-secondary);
}

.contact-form__file-name {
  color: var(--corp-color-overlay-black-40);
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-400);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  letter-spacing: -0.24px;
  white-space: nowrap;
}

/* File card */

.contact-form__file-card {
  display: none;
  align-items: center;
  gap: var(--corp-space-6);
  padding: var(--corp-space-10) var(--corp-space-md);
  border: 1px solid var(--corp-color-border-light);
  border-radius: var(--corp-radius-xsm);
  background: var(--corp-color-white);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.contact-form__file-wrapper:not([data-state='default']) .contact-form__file-card {
  display: flex;
}

.contact-form__file-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--corp-color-gray-1);
}

.contact-form__file-card-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--corp-type-file-card-font-size);
  color: var(--corp-color-neutral-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-form__file-wrapper[data-state='uploading'] .contact-form__file-card-icon,
.contact-form__file-wrapper[data-state='uploading'] .contact-form__file-card-name {
  opacity: 0.4;
}

/* Progress bar — uploading only */

.contact-form__file-progress-track {
  display: none;
  flex: 1;
  min-width: 40px;
  height: 3px;
  background: var(--corp-color-progress-bg);
  border-radius: 2px;
  overflow: hidden;
}

.contact-form__file-wrapper[data-state='uploading'] .contact-form__file-progress-track {
  display: block;
}

.contact-form__file-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--corp-color-primary);
  border-radius: 2px;
  transition: width 200ms ease;
}

/* File size — uploaded only */

.contact-form__file-card-size {
  display: none;
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  color: var(--corp-color-neutral-black);
  text-align: right;
  font-size: var(--corp-type-mobile-body-xs-font-size);
  font-weight: 400;
  line-height: var(--corp-type-lh-10);
  opacity: 0.4;
}

.contact-form__file-wrapper[data-state='uploaded'] .contact-form__file-card-size {
  display: block;
}

/* Action buttons (cancel / delete) */

.contact-form__file-action-btn {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--corp-color-gray-1);
  cursor: pointer;
  transition:
    background-color 140ms ease,
    color 140ms ease;
  margin-left: var(--corp-space-6);
}

.contact-form__file-wrapper[data-state='uploading'] .contact-form__file-action-btn[data-action='cancel'],
.contact-form__file-wrapper[data-state='uploaded'] .contact-form__file-action-btn[data-action='delete'] {
  display: flex;
}

.contact-form__file-action-btn:hover {
  background: var(--corp-color-surface-secondary);
  color: var(--corp-color-error);
}

/* ── Sections (Personal / Dealer / Vehicle / OTP) — blue separator ── */

.contact-form__section {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-20);
  padding-top: var(--corp-space-4xl);
  border-top: 1px solid var(--corp-color-overlay-primary-20);
}

.contact-form__section-title {
  margin: 0;
  font-size: var(--corp-type-mobile-heading-1-regular-font-size);
  font-weight: var(--fw-500);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  color: var(--corp-color-neutral-black);
}

/* 2-col and 1-col row helpers shared across sections */

.contact-form__two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--corp-space-md);
}

.contact-form__one-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--corp-space-md);
}

/* ── Personal / Dealer / Vehicle section grids (shared mobile base) ── */

.contact-form__personal-grid,
.contact-form__dealer-grid,
.contact-form__vehicle-grid {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-md);
}

/* Labels are visually hidden in all sections — placeholders serve as the visual label */

.contact-form__section .contact-form__field-group {
  gap: 0;
  min-width: 0;
}

.contact-form__section .contact-form__field-group label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── OTP ── */

/* OTP row: single grey container with Send button inset on the right */

.contact-form__otp-row {
  display: flex;
  align-items: center;
  background: var(--corp-color-surface-300);
  border-radius: var(--corp-radius-md);
  padding: var(--corp-space-xs);
  gap: var(--corp-space-xs);
}

.contact-form__otp-row .contact-form__field-group {
  flex: 1;
}

.contact-form__otp-row .contact-form__field-group input {
  background: transparent;
  border-radius: 0;
}

.contact-form__otp-row .contact-form__field-group input:disabled {
  background: var(--corp-color-surface-200);
  color: var(--corp-color-neutral-medium-gray);
  opacity: 0.6;
}

.contact-form__otp-send {
  flex-shrink: 0;
  padding: var(--corp-space-md) var(--corp-space-20);
  background: var(--corp-color-primary);
  border: none;
  border-radius: var(--corp-radius-xxl);
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-400);
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.5;
  transition:
    background-color 140ms ease,
    opacity 140ms ease;
  color: var(--corp-color-near-white);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  letter-spacing: -0.24px;
}

/* Hide arrow icon on mobile — shown only at tablet+ */

.contact-form__otp-arrow {
  display: none;
}

.contact-form__otp-send.is-active {
  opacity: 1;
}

.contact-form__otp-send:hover {
  opacity: 0.8;
}

.contact-form__otp-msg {
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-400);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  letter-spacing: -0.24px;
}

.contact-form__otp-msg[data-status='success'] {
  color: var(--corp-color-success-text);
}

.contact-form__otp-msg[data-status='error'] {
  color: var(--corp-color-error-text);
}

/* ── Actions ── */

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--corp-space-7);
}

.contact-form__click-desc {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--corp-type-mobile-body-xs-font-size);
  line-height: var(--corp-type-desktop-body-4-line-height);
  color: var(--corp-color-neutral-black);
  opacity: 0.7;
}

.contact-form__btn-group {
  display: flex;
  flex-direction: row;
  gap: var(--corp-space-sm);
  align-items: center;
  width: 100%;
}

.contact-form__submit,
.contact-form__cancel {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--corp-space-md) var(--corp-space-40);
  border-radius: var(--corp-radius-xxl);
  font-size: var(--corp-type-mobile-body-2-font-size);
  font-weight: var(--fw-400);
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
  white-space: nowrap;
  text-align: center;
  line-height: var(--corp-type-mobile-body-2-line-height);
  letter-spacing: -0.14px;
}

.contact-form__submit {
  background: var(--corp-color-primary);
  border: 1px solid var(--corp-color-primary);
  color: var(--corp-color-near-white);
}

.contact-form__submit:hover {
  background: var(--corp-color-primary-hover);
  border-color: var(--corp-color-primary-hover);
}

.contact-form__submit.is-loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
  color: transparent;
  position: relative;
}

.contact-form__submit.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid var(--corp-color-near-white);
  border-top-color: transparent;
  border-radius: 50%;
  animation: cf-spin 0.7s linear infinite;
}

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

.contact-form__cancel {
  background: var(--corp-color-white);
  border: 1px solid var(--corp-color-primary);
  color: var(--corp-color-primary);
}

.contact-form__cancel:hover {
  background: var(--corp-color-overlay-primary-5);
}

/* ── Success screen ── */

.contact-form__success {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-34);
  padding: var(--corp-space-22) 0 var(--corp-space-xs);
}

.contact-form__success-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--corp-space-sm);
}

.contact-form__success-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.contact-form__success-title {
  margin: 0;
  font-size: var(--corp-type-mobile-heading-base-font-size);
  font-weight: var(--fw-400);
  line-height: var(--corp-type-mobile-heading-base-line-height);
  letter-spacing: -0.36px;
  color: var(--corp-color-neutral-dark-gray);
  text-align: center;
}

/* Success card */

.contact-form__success-card {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-26);
  padding: var(--corp-space-20);
  border: 1px solid var(--corp-color-overlay-white-10);
  border-radius: 10px;
  background: var(--corp-color-white);
}

/* Intro */

.contact-form__success-intro {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-lg);
}

.contact-form__success-salutation {
  margin: 0;
  font-size: var(--corp-type-mobile-body-2-font-size);
  font-weight: var(--fw-400);
  line-height: var(--corp-type-mobile-body-2-line-height);
  letter-spacing: -0.14px;
  color: var(--corp-color-neutral-black);
}

.contact-form__success-body {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-md);
}

.contact-form__success-body p {
  margin: 0;
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-400);
  line-height: var(--corp-type-mobile-body-sm-line-height);
  letter-spacing: -0.24px;
  color: var(--corp-color-neutral-dark-gray);
}

.contact-form__success-body strong {
  font-weight: var(--fw-500);
  color: var(--corp-color-neutral-black);
}

/* Divider */

.contact-form__success-divider {
  border: none;
  border-top: 1px solid var(--corp-color-overlay-black-20);
  margin: 0;
}

/* Dealer info rows */

.contact-form__success-dealer {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-14);
}

.contact-form__success-dealer-row {
  display: flex;
  gap: var(--corp-space-9);
  align-items: flex-start;
}

.contact-form__success-dealer-label {
  flex-shrink: 0;
  width: 123px;
  font-size: var(--corp-type-mobile-body-xs-font-size);
  font-weight: var(--fw-500);
  line-height: var(--corp-type-mobile-body-xss-line-height);
  color: var(--corp-color-neutral-dark-gray);
}

.contact-form__success-dealer-value {
  flex: 1;
  min-width: 0;
  font-size: var(--corp-type-mobile-body-xs-font-size);
  font-weight: var(--fw-400);
  line-height: var(--corp-type-mobile-body-xs-line-height);
  color: var(--corp-color-neutral-dark-gray);
  word-break: break-word;
  overflow-wrap: break-word;
}

.contact-form__success-email {
  color: var(--corp-color-accent-blue);
  text-decoration: underline;
}

/* Escalation */

.contact-form__success-escalation {
  display: flex;
  flex-direction: column;
  gap: var(--corp-space-sm);
}

.contact-form__success-escalation p {
  margin: 0;
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-400);
  line-height: var(--corp-type-mobile-body-sm-line-height);
  letter-spacing: -0.24px;
  color: var(--corp-color-neutral-dark-gray);
}

.contact-form__success-link {
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-400);
  line-height: var(--corp-type-mobile-tag-4-line-height);
  color: var(--corp-color-primary);
  text-decoration: underline;
}

/* ── Field-level error & required marker ── */

.contact-form__field-error {
  display: block;
  font-size: var(--corp-type-mobile-body-xs-font-size);
  line-height: var(--corp-type-lh-10);
  color: var(--corp-color-error-text);
  margin-top: var(--corp-space-xs);
}

.contact-form__required {
  color: var(--corp-color-error);
  margin-left: 2px;
}

/* ── Form message (success / error) ── */

.contact-form__message {
  width: 100%;
  padding: var(--corp-space-md) var(--corp-space-xl);
  border-radius: var(--corp-radius-md);
  font-size: var(--corp-type-mobile-body-sm-2-font-size);
  font-weight: var(--fw-400);
  line-height: var(--corp-type-mobile-body-sm-2-line-height);
  letter-spacing: -0.24px;
}

.contact-form__message--error {
  background: var(--corp-color-error-bg);
  color: var(--corp-color-error-text);
  border: 1px solid var(--corp-color-error-border);
}

.contact-form__message--success {
  background: var(--corp-color-success-bg);
  color: var(--corp-color-success-text);
  border: 1px solid var(--corp-color-success-border);
}

/* =============================================================
   Tablet (>= 768px)
   — border-radius: var(--corp-radius-ssm), underline fields, 2-col layouts
   ============================================================= */

@media screen and (width >= 768px) {
  .contact-form-wrapper {
    padding: var(--corp-space-61) 0;
    margin: 0 var(--container-margin);
  }
  .contact-form {
    border-radius: var(--corp-radius-ssm);
    padding: var(--corp-space-42);
    gap: var(--corp-space-37);
  }
  .contact-form__form {
    gap: var(--corp-space-3xl);
  }
  .contact-form__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  /* tabs is first child in DOM; on tablet push it to the right */

  .contact-form__tabs {
    order: 1;
    flex-shrink: 0;
  }

  .contact-form__header-left {
    order: 0;
    width: 294px;
  }

  .contact-form__tabs a {
    font-size: var(--corp-type-mobile-body-xs-font-size);
    padding: var(--corp-space-14) var(--corp-space-md);
    font-weight: var(--fw-500);
    line-height: var(--corp-type-tablet-body-sm-3-line-height);
    width: 80px;
  }
  .contact-form__field-group {
    gap: var(--corp-space-xl);
  }
  /* Fields row: BA + Message side by side */

  .contact-form__fields-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--corp-space-4xl);
    align-items: start;
  }

  /* Tablet: underline style for inputs and selects (not file, not textarea) */

  .contact-form__field-group select,
  .contact-form__field-group input:not([type='file']) {
    background: transparent;
    background-image: none;
    border: none;
    border-bottom: 0.5px solid var(--corp-color-overlay-black-50);
    border-radius: 0;
    padding: 0 0 var(--corp-space-md);
    font-size: var(--corp-type-mobile-body-2-font-size);
    font-weight: var(--fw-400);
    line-height: var(--corp-type-mobile-heading-2-medium-line-height);
    letter-spacing: -0.14px;
    color: var(--corp-color-neutral-black);
  }

  .contact-form__field-group input:not([type='file'])::placeholder {
    color: var(--corp-color-neutral-black);
  }

  .contact-form__field-group select:focus,
  .contact-form__field-group input:not([type='file']):focus {
    outline: none;
    border-bottom-color: var(--corp-color-primary);
  }

  .contact-form__field-group select {
    appearance: none;
    background-image: url('/corporate/icons/caret-down.svg');
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-color: transparent;
    padding-right: var(--corp-space-28);
    cursor: pointer;
  }

  /* Custom select trigger: underline style to match inputs at tablet */

  .contact-form__custom-select-trigger {
    background: transparent;
    border: none;
    border-bottom: 0.5px solid var(--corp-color-overlay-black-50);
    border-radius: 0;
    padding: 0 0 var(--corp-space-md);
  }
  .contact-form__custom-select-label {
    color: var(--corp-color-neutral-black);
    font-size: var(--corp-type-mobile-body-2-font-size);
    font-weight: 400;
    line-height: var(--corp-type-mobile-body-sm-line-height);
    letter-spacing: -0.14px;
  }

  .contact-form__custom-select-trigger:focus {
    outline: none;
    border-bottom-color: var(--corp-color-primary);
  }

  /* Date placeholder: underline style at tablet — no box padding, match input typography */

  .contact-form__date-placeholder {
    padding: 0;
    font-size: var(--corp-type-mobile-body-2-font-size);
    font-weight: var(--fw-400);
    line-height: var(--corp-type-mobile-body-2-line-height);
    letter-spacing: -0.14px;
    color: var(--corp-color-neutral-black);
  }

  /* Textarea: box style at tablet */

  .contact-form__field-group textarea {
    background: var(--corp-color-white);
    border-radius: 0;
    padding: var(--corp-space-md);
    min-height: 212px;
    margin-top: 0;
    font-weight: 400;
  }

  .contact-form__field-group textarea:focus {
    outline: none;
    border-color: var(--corp-color-primary);
  }
  .contact-form__attachments {
    padding-top: var(--corp-space-3xl);
  }

  .contact-form__custom-select-option {
    line-height: var(--corp-type-mobile-body-2-line-height);
    letter-spacing: -0.616px;
  }
  /* Section field grids: 2-col at tablet */

  .contact-form__attachments-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--corp-space-5xl);
    margin-top: var(--corp-space-30);
  }

  .contact-form__two-col {
    grid-template-columns: 1fr 1fr;
    gap: var(--corp-space-5xl);
  }

  /* One-col rows: single child sits in the left half (matches two-col column width) */

  .contact-form__one-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--corp-space-5xl);
  }

  /* Attachment file input box radius */

  .contact-form__file-default {
    border-radius: var(--corp-radius-xxl);
  }

  .contact-form__file-wrapper {
    border-radius: var(--corp-radius-xxl);
  }

  /* Section internal gap: title to fields */

  .contact-form__section {
    gap: var(--corp-space-30);
    padding-top: var(--corp-space-3xl);
  }

  /* Personal / Dealer / Vehicle: 2-col grid at tablet */

  .contact-form__personal-grid,
  .contact-form__dealer-grid,
  .contact-form__vehicle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--corp-space-xl) var(--corp-space-5xl);
  }

  /* Prefix + Name in one horizontal row (occupies left column, row 1) */

  .contact-form__personal-name-row {
    display: flex;
    gap: var(--corp-space-15);
    align-items: flex-end;
    flex-direction: row;
  }

  /* Prefix (salutation) — narrow per Figma (~52px) */

  .contact-form__personal-name-row > .contact-form__field-group:first-child {
    flex-shrink: 0;
    width: 60px;
  }

  .contact-form__personal-name-row > .contact-form__field-group:last-child {
    flex: 1;
  }

  /* Tablet typography */

  .contact-form__title {
    font-size: var(--corp-type-mobile-body-2-font-size);
    line-height: var(--corp-type-hero-line-height-24);
  }

  .contact-form__desc {
    font-size: var(--corp-type-mobile-body-sm-2-font-size);
    letter-spacing: -0.36px;
    opacity: 1;
  }

  .contact-form__field-group label {
    font-size: var(--corp-type-mobile-body-2-font-size);
    line-height: var(--corp-type-mobile-body-sm-2-line-height);
  }

  .contact-form__section-title,
  .contact-form__attachments-title {
    font-size: var(--corp-type-mobile-body-2-font-size);
  }

  .contact-form__attachments-desc {
    letter-spacing: -0.36px;
    width: 294px;
  }

  .contact-form__attachment-group label,
  .contact-form__file-btn,
  .contact-form__file-name {
    letter-spacing: -0.36px;
  }

  /* OTP row: remove gray pill background at tablet */

  .contact-form__otp-row {
    background: transparent;
    border-radius: 0;
    padding: 0;
    align-items: flex-end;
    gap: var(--corp-space-sm);
  }

  /* OTP input: fixed narrow width per Figma (160px), cancel mobile flex: 1 */

  .contact-form__otp-row .contact-form__field-group {
    flex: 0 0 160px;
    width: 160px;
  }

  .contact-form__otp-row .contact-form__field-group input {
    background: transparent;
  }

  /* OTP Send button — outlined style per Figma tablet spec */

  .contact-form__otp-send {
    display: inline-flex;
    align-items: center;
    gap: var(--corp-space-sm);
    background: transparent;
    border: 1px solid var(--corp-color-primary);
    color: var(--corp-color-primary);
    padding: var(--corp-space-md) var(--corp-space-md) var(--corp-space-md) var(--corp-space-20);
    height: 36px;
    box-sizing: border-box;
    letter-spacing: -0.36px;
    opacity: 1;
  }

  .contact-form__otp-arrow {
    display: inline-block;
    width: 6px;
    height: 11px;
    flex-shrink: 0;
  }

  /* Actions: right-align buttons on tablet */

  .contact-form__actions {
    justify-content: flex-end;
  }

  .contact-form__btn-group {
    width: auto;
  }

  .contact-form__submit,
  .contact-form__cancel {
    line-height: var(--corp-type-mobile-body-sm-line-height);
    letter-spacing: -0.36px;
    padding: var(--corp-space-md) var(--corp-space-20);
    font-size: var(--corp-type-mobile-body-sm-2-font-size);
  }

  /* ── Success screen ── */

  .contact-form__success {
    gap: var(--corp-space-35);
    padding: var(--corp-space-17) 0 0;
  }

  .contact-form__success-header {
    gap: var(--corp-space-13);
  }

  .contact-form__success-icon {
    width: 80px;
    height: 80px;
  }

  .contact-form__success-title {
    font-size: var(--corp-type-mobile-display-1-font-size);
    line-height: var(--corp-type-mobile-display-5-line-height);
    letter-spacing: -0.42px;
  }

  .contact-form__success-card {
    padding: var(--corp-space-4xl) var(--corp-space-xl);
    gap: var(--corp-space-4xl);
  }

  .contact-form__success-intro {
    gap: var(--corp-space-4xl);
  }

  .contact-form__success-salutation {
    font-size: var(--corp-type-desktop-heading-4-font-size);
    line-height: var(--corp-type-hero-line-height-24);
    letter-spacing: -0.2px;
  }

  .contact-form__success-body {
    gap: var(--corp-space-xl);
  }

  .contact-form__success-body p {
    font-size: var(--corp-type-desktop-body-lg-font-size);
    line-height: var(--corp-type-mobile-body-sm-line-height);
    letter-spacing: -0.16px;
  }

  .contact-form__success-body strong {
    line-height: var(--corp-type-mobile-body-2-line-height);
  }

  .contact-form__success-dealer {
    gap: var(--corp-space-md);
  }

  .contact-form__success-dealer-row {
    gap: var(--corp-space-xl);
  }

  .contact-form__success-dealer-label {
    width: 196px;
    font-size: var(--corp-type-desktop-body-lg-font-size);
    line-height: var(--corp-type-mobile-body-2-line-height);
    font-weight: var(--fw-500);
  }

  .contact-form__success-dealer-value {
    font-size: var(--corp-type-mobile-body-2-font-size);
    line-height: var(--corp-type-mobile-body-2-line-height);
    letter-spacing: -0.62px;
  }

  .contact-form__success-escalation p {
    font-size: var(--corp-type-desktop-body-lg-font-size);
    line-height: var(--corp-type-mobile-body-1-line-height);
    letter-spacing: -0.16px;
  }

  .contact-form__success-link {
    font-size: var(--corp-type-mobile-body-2-font-size);
    line-height: var(--corp-type-mobile-body-1-line-height);
    letter-spacing: -0.14px;
  }
}

/* =============================================================
   Desktop (>= 1200px)
   ============================================================= */

@media screen and (width >= 1200px) {
  .contact-form-wrapper {
    padding: var(--corp-space-6xl) 0;
    margin: 0 var(--corp-space-5xl);
  }
  .contact-form {
    border-radius: var(--corp-radius-md);
    padding: var(--corp-space-6xl);
    gap: var(--corp-space-67);
  }

  .contact-form__form {
    gap: var(--corp-space-6xl);
  }

  /* Desktop typography */

  .contact-form__title {
    font-size: var(--corp-type-desktop-heading-2-font-size);
    line-height: var(--corp-type-desktop-heading-2-line-height);
  }

  .contact-form__desc {
    font-size: var(--corp-type-mobile-body-2-font-size);
    line-height: var(--corp-type-desktop-body-4-line-height);
    max-width: 480px;
  }

  .contact-form__tabs a {
    padding: var(--corp-space-md) var(--corp-space-3xl);
    font-size: var(--corp-type-mobile-body-2-font-size);
    width: 157px;
    line-height: var(--corp-type-mobile-heading-2-medium-line-height);
  }

  .contact-form__header-left {
    width: 445px;
  }

  .contact-form__attachments {
    padding-top: var(--corp-space-6xl);
  }
  .contact-form__field-group label {
    font-size: var(--corp-type-desktop-heading-2-font-size);
    line-height: var(--corp-type-desktop-heading-2-line-height);
  }

  .contact-form__field-group {
    gap: var(--corp-space-4xl);
  }

  .contact-form__custom-select-label {
    font-size: var(--corp-type-desktop-heading-5-font-size);
    line-height: var(--corp-type-hero-line-height-24);
    letter-spacing: -0.54px;
    color: var(--corp-color-overlay-black-70);
  }

  .contact-form__date-placeholder {
    font-size: var(--corp-type-desktop-heading-5-font-size);
    line-height: var(--corp-type-hero-line-height-24);
    letter-spacing: -0.54px;
    color: var(--corp-color-overlay-black-70);
  }

  .contact-form__fields-left .contact-form__custom-select-trigger {
    padding: 0 0 var(--corp-space-xl);
  }

  .contact-form__field-group select,
  .contact-form__field-group input:not([type='file']) {
    font-size: var(--corp-type-desktop-heading-5-font-size);
    line-height: var(--corp-type-hero-line-height-24);
    letter-spacing: -0.54px;
    color: var(--corp-color-overlay-black-70);
  }

  .contact-form__field-group input:not([type='file'])::placeholder {
    color: var(--corp-color-overlay-black-70);
  }

  /* Textarea: thicker border at desktop */

  .contact-form__field-group textarea {
    border: 2px solid var(--corp-color-overlay-black-5);
    min-height: 324px;
    margin-top: var(--corp-space-xs);
    padding: var(--corp-space-15) var(--corp-space-20);
    font-size: var(--corp-type-mobile-body-sm-2-font-size);
    line-height: var(--corp-type-mobile-body-2-line-height);
    letter-spacing: -0.18px;
  }

  /* Fields row: bigger gap at desktop */

  .contact-form__fields-row {
    gap: var(--corp-space-192);
    align-items: start;
  }

  /* Attachment grid: large gap at desktop */

  .contact-form__attachments-grid {
    gap: var(--corp-space-192);
    margin-top: var(--corp-space-22);
  }

  /* Section field grids: 49px gap between columns */

  .contact-form__two-col {
    gap: var(--corp-space-49);
  }

  /* Section internal gap: title to fields */

  .contact-form__section {
    gap: var(--corp-space-40);
    padding-top: var(--corp-space-6xl);
  }
  .contact-form__personal-name-row {
    gap: var(--corp-space-xl);
  }

  .contact-form__personal-name-row > .contact-form__field-group:first-child {
    width: auto;
  }

  .contact-form__personal-name-row > .contact-form__field-group:first-child .contact-form__custom-select-trigger {
    width: auto;
  }

  .contact-form__personal-grid,
  .contact-form__dealer-grid,
  .contact-form__vehicle-grid {
    gap: var(--corp-space-35);
  }

  .contact-form__section-title,
  .contact-form__attachments-title {
    font-size: var(--corp-type-desktop-heading-2-font-size);
    line-height: var(--corp-type-desktop-heading-2-line-height);
  }

  .contact-form__attachments-desc {
    font-size: var(--corp-type-mobile-body-2-font-size);
    width: 448px;
    line-height: var(--corp-type-lh-21);
  }

  .contact-form__attachment-group label {
    font-size: var(--corp-type-mobile-heading-1-regular-font-size);
    line-height: var(--corp-type-desktop-body-4-line-height);
    letter-spacing: -0.16px;
  }

  .contact-form__file-default {
    padding: var(--corp-space-10) var(--corp-space-50) var(--corp-space-10) var(--corp-space-md);
    border-radius: var(--corp-radius-md);
  }

  .contact-form__file-btn {
    padding: var(--corp-space-10) var(--corp-space-31);
    font-size: var(--corp-type-mobile-body-2-font-size);
    line-height: var(--corp-type-mobile-body-2-line-height);
    letter-spacing: -0.42px;
  }

  .contact-form__file-name {
    font-size: var(--corp-type-mobile-body-2-font-size);
    line-height: var(--corp-type-mobile-body-2-line-height);
    letter-spacing: -0.42px;
  }

  /* OTP send button */

  .contact-form__otp-send {
    padding: var(--corp-space-md) var(--corp-space-30) var(--corp-space-md) var(--corp-space-40);
    font-size: var(--corp-type-mobile-body-2-font-size);
    line-height: var(--corp-type-mobile-body-2-line-height);
    letter-spacing: -0.42px;
  }

  .contact-form__submit,
  .contact-form__cancel {
    padding: var(--corp-space-md) var(--corp-space-40);
    font-size: var(--corp-type-mobile-body-2-font-size);
    line-height: var(--corp-type-mobile-body-2-line-height);
    letter-spacing: -0.42px;
  }

  .contact-form__message {
    font-size: var(--corp-type-mobile-body-2-font-size);
  }

  /* Desktop actions: description LEFT, buttons pushed RIGHT */

  .contact-form__actions {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--corp-space-md);
  }

  .contact-form__click-desc {
    flex: 0 1 auto;
    margin-right: auto;
    color: var(--corp-color-neutral-black);
    font-size: var(--corp-type-mobile-body-2-font-size);
    font-weight: 400;
    line-height: var(--corp-type-lh-21);
  }
  .contact-form__custom-select-option {
    font-size: var(--corp-type-desktop-heading-5-font-size);
    font-weight: 400;
    line-height: var(--corp-type-hero-line-height-24);
    letter-spacing: -0.54px;
  }

  /* ── Success screen ── */

  .contact-form__success {
    gap: var(--corp-space-93);
    padding-top: var(--corp-space-22);
  }

  .contact-form__success-header {
    gap: var(--corp-space-xl);
  }

  .contact-form__success-icon {
    width: 160px;
    height: 160px;
  }

  .contact-form__success-title {
    font-size: var(--corp-type-desktop-heading-xxl-font-size);
    line-height: var(--corp-type-hero-line-height-24);
    letter-spacing: -1.5px;
  }

  .contact-form__success-card {
    padding: var(--corp-space-48);
    border-radius: 12px;
    border-color: var(--corp-color-overlay-black-20);
  }

  .contact-form__success-intro {
    gap: var(--corp-space-4xl);
  }

  .contact-form__success-salutation {
    font-size: var(--corp-type-desktop-heading-2-font-size);
    line-height: var(--corp-type-mobile-heading-xxl-line-height);
  }

  .contact-form__success-body {
    gap: var(--corp-space-xl);
  }

  .contact-form__success-body p {
    font-size: var(--corp-type-desktop-heading-4-font-size);
    line-height: var(--corp-type-desktop-heading-5-line-height);
    letter-spacing: -0.4px;
  }

  .contact-form__success-body strong {
    line-height: var(--corp-type-hero-line-height-24);
  }

  .contact-form__success-dealer {
    gap: var(--corp-space-md);
  }

  .contact-form__success-dealer-row {
    gap: var(--corp-space-xl);
  }

  .contact-form__success-dealer-label {
    width: 196px;
    font-size: var(--corp-type-desktop-heading-4-font-size);
    line-height: var(--corp-type-hero-line-height-24);
    font-weight: var(--fw-500);
  }

  .contact-form__success-dealer-value {
    font-size: var(--corp-type-desktop-heading-5-font-size);
    line-height: var(--corp-type-hero-line-height-24);
    letter-spacing: -0.54px;
  }

  .contact-form__success-escalation {
    gap: var(--corp-space-xl);
  }

  .contact-form__success-escalation p {
    font-size: var(--corp-type-desktop-heading-4-font-size);
    line-height: var(--corp-type-desktop-heading-5-line-height);
  }

  .contact-form__success-link {
    font-size: var(--corp-type-mobile-body-2-font-size);
    line-height: var(--corp-type-lh-21);
  }
}