/* public/css/form-modern.css
 * Public UI form polish — extends nedate-form-system tokens.
 * Loaded late in the cascade (after nedate-unified) for public/auth/shipping forms.
 * Does not change carriers, payments, or business logic.
 */

:root {
  --nd-form-modern-radius: var(--nd-brand-radius-sm, 10px);
  --nd-form-modern-height: 48px;
  --nd-form-modern-font: 1rem; /* 16px — avoids iOS input zoom */
  --nd-form-modern-label: 0.8125rem;
  --nd-form-modern-label-weight: 600;
  --nd-form-modern-placeholder: color-mix(in srgb, var(--nd-brand-muted, #657384) 78%, transparent);
  --nd-form-modern-gap: 1rem;
  --nd-form-modern-touch: 44px;
  --nd-form-modern-focus-ring: color-mix(in srgb, var(--nd-brand-primary, #e61a0a) 28%, transparent);
  --nd-form-modern-border: var(--nd-brand-border, #e1e6eb);
  --nd-form-modern-text: var(--nd-brand-heading, #202938);
  --nd-form-modern-muted: var(--nd-brand-muted, #657384);
  --nd-form-modern-bg: var(--nd-brand-surface, #ffffff);
  --nd-form-modern-invalid: #dc2626;
}

/* ===== Base text controls (public + guest + marketing + auth + shipping) ===== */
body.nedate-ui-standard.nedate-public-standard :is(
  .form-control,
  .form-select,
  textarea.form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="month"],
  input[type="week"],
  select:not([multiple])
):not(.nedate-no-standardize):not(.btn):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
body.nedate-ui-standard.nedate-auth-standard :is(
  .form-control,
  .form-select,
  textarea.form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select:not([multiple])
):not(.nedate-no-standardize):not(.btn):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.nedate-ui-standard .shipping-page-wrapper :is(
  .form-control,
  .form-select,
  textarea.form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select:not([multiple])
):not(.nedate-no-standardize):not(.btn):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.nedate-ui-standard.nedate-guest-ui :is(
  .form-control,
  .form-select,
  textarea.form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"]
):not(.nedate-no-standardize):not(.btn):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--nd-form-modern-height) !important;
  border-radius: var(--nd-form-modern-radius) !important;
  border: 1px solid var(--nd-form-modern-border) !important;
  background-color: var(--nd-form-modern-bg) !important;
  color: var(--nd-form-modern-text) !important;
  font-size: var(--nd-form-modern-font) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

body.nedate-ui-standard.nedate-public-standard textarea.form-control,
body.nedate-ui-standard.nedate-auth-standard textarea.form-control,
body.nedate-ui-standard .shipping-page-wrapper textarea.form-control {
  min-height: 112px !important;
}

/* Placeholders — muted, lighter than typed values */
body.nedate-ui-standard.nedate-public-standard :is(.form-control, textarea, input)::placeholder,
body.nedate-ui-standard.nedate-auth-standard :is(.form-control, textarea, input)::placeholder,
body.nedate-ui-standard .shipping-page-wrapper :is(.form-control, textarea, input)::placeholder,
body.nedate-ui-standard.nedate-guest-ui :is(.form-control, textarea, input)::placeholder,
body.nedate-ui-standard.nedate-public-standard .log-input::placeholder,
body.nedate-ui-standard .welcome-modern-page .log-input::placeholder {
  color: var(--nd-form-modern-placeholder) !important;
  opacity: 1 !important;
  font-weight: var(--sw-weight-light, 300) !important;
}

/* Labels */
body.nedate-ui-standard.nedate-public-standard :is(.form-label, .log-label, .log-input-inner-label, .register-page__field-label),
body.nedate-ui-standard.nedate-auth-standard :is(.form-label, .register-page__field-label),
body.nedate-ui-standard .shipping-page-wrapper :is(.form-label, label.form-label),
body.nedate-ui-standard .welcome-modern-page .log-label,
body.nedate-ui-standard .welcome-modern-page .log-input-inner-label {
  color: var(--nd-form-modern-muted) !important;
  font-size: var(--nd-form-modern-label) !important;
  font-weight: var(--nd-form-modern-label-weight) !important;
  letter-spacing: .01em;
  margin-bottom: .35rem !important;
}

/* Focus ring — clear and accessible */
body.nedate-ui-standard.nedate-public-standard :is(.form-control, .form-select, textarea, input):focus,
body.nedate-ui-standard.nedate-auth-standard :is(.form-control, .form-select, textarea, input):focus,
body.nedate-ui-standard .shipping-page-wrapper :is(.form-control, .form-select, textarea, input):focus,
body.nedate-ui-standard.nedate-guest-ui :is(.form-control, .form-select, textarea, input):focus,
body.nedate-ui-standard .welcome-modern-page .log-input:focus {
  border-color: var(--nd-brand-primary, #e61a0a) !important;
  box-shadow: 0 0 0 .2rem var(--nd-form-modern-focus-ring) !important;
  outline: 0 !important;
}

/* Invalid / error */
body.nedate-ui-standard.nedate-public-standard :is(.form-control, .form-select, input, textarea).is-invalid,
body.nedate-ui-standard.nedate-auth-standard :is(.form-control, .form-select, input, textarea).is-invalid,
body.nedate-ui-standard .shipping-page-wrapper :is(.form-control, .form-select, input, textarea).is-invalid,
body.nedate-ui-standard.nedate-public-standard .was-validated :is(.form-control, .form-select, input, textarea):invalid,
body.nedate-ui-standard.nedate-auth-standard .was-validated :is(.form-control, .form-select, input, textarea):invalid {
  border-color: var(--nd-form-modern-invalid) !important;
  box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--nd-form-modern-invalid) 22%, transparent) !important;
}

body.nedate-ui-standard.nedate-public-standard .invalid-feedback,
body.nedate-ui-standard.nedate-auth-standard .invalid-feedback,
body.nedate-ui-standard .shipping-page-wrapper .invalid-feedback {
  color: var(--nd-form-modern-invalid) !important;
  font-size: .8125rem !important;
  font-weight: 500 !important;
}

/* ===== Radio + checkbox: visible, aligned, touch-friendly ===== */
body.nedate-ui-standard.nedate-public-standard .form-check,
body.nedate-ui-standard.nedate-auth-standard .form-check,
body.nedate-ui-standard .shipping-page-wrapper .form-check,
body.nedate-ui-standard.nedate-guest-ui .form-check,
body.nedate-ui-standard.nedate-auth-standard .terms-check,
body.nedate-ui-standard .shipping-page-wrapper .terms-accept-option {
  display: flex !important;
  align-items: flex-start !important;
  gap: .65rem !important;
  min-height: var(--nd-form-modern-touch) !important;
  padding: .45rem 0 !important;
  margin-bottom: .15rem !important;
}

body.nedate-ui-standard.nedate-public-standard :is(.form-check-input, input[type="checkbox"], input[type="radio"]):not(.d-none):not([hidden]),
body.nedate-ui-standard.nedate-auth-standard :is(.form-check-input, input[type="checkbox"], input[type="radio"]):not(.d-none):not([hidden]),
body.nedate-ui-standard .shipping-page-wrapper :is(.form-check-input, input[type="checkbox"], input[type="radio"]):not(.d-none):not([hidden]),
body.nedate-ui-standard.nedate-guest-ui :is(.form-check-input, input[type="checkbox"], input[type="radio"]):not(.d-none):not([hidden]) {
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  min-height: 1.15rem !important;
  margin-top: .2rem !important;
  flex-shrink: 0 !important;
  border: 1.5px solid color-mix(in srgb, var(--nd-form-modern-border) 80%, #94a3b8) !important;
  background-color: var(--nd-form-modern-bg) !important;
  accent-color: var(--nd-brand-primary, #e61a0a) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

body.nedate-ui-standard.nedate-public-standard input[type="radio"],
body.nedate-ui-standard.nedate-auth-standard input[type="radio"],
body.nedate-ui-standard .shipping-page-wrapper input[type="radio"],
body.nedate-ui-standard.nedate-public-standard .form-check-input[type="radio"],
body.nedate-ui-standard.nedate-auth-standard .form-check-input[type="radio"] {
  border-radius: 50% !important;
}

body.nedate-ui-standard.nedate-public-standard :is(.form-check-input, input[type="checkbox"], input[type="radio"]):checked,
body.nedate-ui-standard.nedate-auth-standard :is(.form-check-input, input[type="checkbox"], input[type="radio"]):checked,
body.nedate-ui-standard .shipping-page-wrapper :is(.form-check-input, input[type="checkbox"], input[type="radio"]):checked {
  background-color: var(--nd-brand-primary, #e61a0a) !important;
  border-color: var(--nd-brand-primary, #e61a0a) !important;
}

body.nedate-ui-standard.nedate-public-standard :is(.form-check-input, input[type="checkbox"], input[type="radio"]):focus-visible,
body.nedate-ui-standard.nedate-auth-standard :is(.form-check-input, input[type="checkbox"], input[type="radio"]):focus-visible,
body.nedate-ui-standard .shipping-page-wrapper :is(.form-check-input, input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid var(--nd-brand-primary, #e61a0a) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 .2rem var(--nd-form-modern-focus-ring) !important;
}

body.nedate-ui-standard.nedate-public-standard .form-check-label,
body.nedate-ui-standard.nedate-auth-standard .form-check-label,
body.nedate-ui-standard .shipping-page-wrapper .form-check-label {
  color: var(--nd-form-modern-text) !important;
  font-size: .9375rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  padding-top: .1rem;
}

/* Register type toggle buttons (radio-as-label) — touch friendly */
body.nedate-ui-standard.nedate-auth-standard .register-page__type-btn {
  min-height: var(--nd-form-modern-touch) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--nd-form-modern-radius) !important;
  font-weight: 600 !important;
  gap: .4rem;
}

/* Welcome quote: type selector buttons */
body.nedate-ui-standard .welcome-modern-page .type-selector {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
  margin-bottom: .85rem !important;
}

body.nedate-ui-standard .welcome-modern-page .type-btn {
  min-height: var(--nd-form-modern-touch) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  padding: .55rem .9rem !important;
  border-radius: var(--nd-form-modern-radius) !important;
  border: 1px solid var(--nd-form-modern-border) !important;
  background: var(--nd-form-modern-bg) !important;
  color: var(--nd-form-modern-text) !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

body.nedate-ui-standard .welcome-modern-page input[type="radio"]:checked + .type-btn {
  border-color: var(--nd-brand-primary, #e61a0a) !important;
  color: var(--nd-brand-primary, #e61a0a) !important;
  background: color-mix(in srgb, var(--nd-brand-primary, #e61a0a) 8%, #ffffff) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nd-brand-primary, #e61a0a) 35%, transparent);
}

/* Re-enable type selector if page-system hid it — prefer visible touch controls */
body.nedate-public-standard .welcome-modern-hero-tool-card .type-selector {
  display: flex !important;
}

/* Welcome quote log-inputs */
body.nedate-ui-standard .welcome-modern-page .log-input,
body.nedate-ui-standard .welcome-modern-page .log-select-btn,
body.nedate-ui-standard .welcome-modern-page .log-input-group {
  border-radius: var(--nd-form-modern-radius) !important;
  min-height: var(--nd-form-modern-height) !important;
}

body.nedate-ui-standard .welcome-modern-page .log-input {
  font-size: var(--nd-form-modern-font) !important;
  font-weight: 500 !important;
  color: var(--nd-form-modern-text) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: .7rem .9rem !important;
  border: 1px solid var(--nd-form-modern-border) !important;
  background: var(--nd-form-modern-bg) !important;
}

body.nedate-ui-standard .welcome-modern-page .log-city-field {
  margin-top: .45rem !important;
}

body.nedate-ui-standard .welcome-modern-page #qq_form .row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

body.nedate-ui-standard .welcome-modern-page #qq_form .mb-4 {
  margin-bottom: 1.1rem !important;
}

body.nedate-ui-standard .welcome-modern-page .btn-action,
body.nedate-ui-standard .welcome-modern-page #qq_form button[type="submit"] {
  min-height: 48px !important;
  border-radius: var(--nd-form-modern-radius) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

/* Login / register floating fields */
body.nedate-ui-standard.nedate-auth-standard .login-page__input,
body.nedate-ui-standard.nedate-auth-standard .form-floating > .form-control,
body.nedate-ui-standard.nedate-auth-standard .form-floating > .form-select {
  font-size: var(--nd-form-modern-font) !important;
  border-radius: var(--nd-form-modern-radius) !important;
}

body.nedate-ui-standard.nedate-auth-standard .form-floating > label {
  font-weight: 500 !important;
  color: var(--nd-form-modern-muted) !important;
}

body.nedate-ui-standard.nedate-auth-standard .login-page__input-wrap {
  margin-bottom: .85rem !important;
}

/* Select2 on shipping — match modern controls */
body.nedate-ui-standard .shipping-page-wrapper .select2-container .select2-selection--single {
  min-height: var(--nd-form-modern-height) !important;
  border-radius: var(--nd-form-modern-radius) !important;
  border-color: var(--nd-form-modern-border) !important;
}

body.nedate-ui-standard .shipping-page-wrapper .select2-container .select2-selection__rendered {
  font-size: var(--nd-form-modern-font) !important;
  line-height: calc(var(--nd-form-modern-height) - 2px) !important;
  color: var(--nd-form-modern-text) !important;
}

body.nedate-ui-standard .shipping-page-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--nd-form-modern-placeholder) !important;
}

/* Mobile: 16px inputs + comfortable gaps, no horizontal overflow */
@media (max-width: 768px) {
  body.nedate-ui-standard.nedate-public-standard :is(
    .form-control, .form-select, textarea, input[type="text"], input[type="email"],
    input[type="password"], input[type="number"], input[type="tel"], input[type="url"],
    input[type="search"], input[type="date"], input[type="datetime-local"], input[type="time"], select
  ),
  body.nedate-ui-standard.nedate-auth-standard :is(
    .form-control, .form-select, textarea, input[type="text"], input[type="email"],
    input[type="password"], input[type="number"], input[type="tel"], select
  ),
  body.nedate-ui-standard .shipping-page-wrapper :is(
    .form-control, .form-select, textarea, input[type="text"], input[type="email"],
    input[type="password"], input[type="number"], input[type="tel"], input[type="url"],
    input[type="search"], input[type="date"], select,
    .select2-container .select2-selection__rendered,
    .select2-container .select2-search__field
  ),
  body.nedate-ui-standard .welcome-modern-page .log-input,
  body.nedate-ui-standard.nedate-guest-ui :is(.form-control, .form-select, input, textarea) {
    font-size: 16px !important;
  }

  /* Labels can stay slightly smaller than 16px — they don't trigger zoom */
  body.nedate-ui-standard .shipping-page-wrapper .form-floating > label {
    font-size: 0.8125rem !important;
  }

  body.nedate-ui-standard .welcome-modern-page,
  body.nedate-ui-standard .welcome-modern-hero-tool-card,
  body.nedate-ui-standard .shipping-page-wrapper,
  body.nedate-ui-standard.nedate-auth-standard .login-page,
  body.nedate-ui-standard.nedate-auth-standard .register-page {
    overflow-x: clip;
    max-width: 100%;
  }

  body.nedate-ui-standard .welcome-modern-page #qq_form .row.g-3,
  body.nedate-ui-standard .shipping-page-wrapper .row.g-3,
  body.nedate-ui-standard .shipping-page-wrapper .row.g-2 {
    --bs-gutter-x: 0.85rem;
    --bs-gutter-y: 0.85rem;
  }

  body.nedate-ui-standard .welcome-modern-hero-tool-card .p-4,
  body.nedate-ui-standard .welcome-modern-hero-tool-card .p-md-5 {
    padding: 1.1rem !important;
  }
}

/* Dark mode */
html[data-theme="dark"] body.nedate-ui-standard,
html[data-bs-theme="dark"] body.nedate-ui-standard,
body.dark-mode.nedate-ui-standard {
  --nd-form-modern-bg: var(--dark-input-bg, #0b1220);
  --nd-form-modern-text: var(--dark-text-color, #f8fafc);
  --nd-form-modern-muted: var(--dark-muted-color, #94a3b8);
  --nd-form-modern-border: var(--dark-border-color, #263447);
  --nd-form-modern-placeholder: color-mix(in srgb, var(--dark-muted-color, #94a3b8) 75%, transparent);
}