/*
 * Customer family — visual contract for user_login, user_profile and pay.
 *
 * The three themes keep page-specific CSS. This layer owns the values and
 * primitives that must stay identical: typography, controls, focus, buttons,
 * overlays, icon hit areas and radius.
 *
 * Bundle: public/customer_family/customer_family.css
 */

html[data-theme-family="customer"] {
  --customer-font: var(--ul-font, var(--font-ui, Roboto, sans-serif));
  --customer-ink: #1a1a1a;
  --customer-muted: #6b6b6b;
  --customer-line: #d9d9d9;
  --customer-paper: #ffffff;
  --customer-accent: var(--btn-front-bg, var(--accent, var(--ul-accent, #009966)));
  --customer-accent-text: var(--btn-front-text, var(--ul-accent-text, #ffffff));
  --customer-danger: #b42318;
  --customer-radius: 5px;
  --customer-control-height: 50px;
  --customer-focus: 0 0 0 1px var(--customer-accent);

  /* Bridge the old theme tokens to one source of truth. */
  --ink: var(--customer-ink);
  --ink-soft: var(--customer-muted);
  --paper: var(--customer-paper);
  --line: var(--customer-line);
  --radius: var(--customer-radius);
  --ul-ink: var(--customer-ink);
  --ul-muted: var(--customer-muted);
  --ul-line: var(--customer-line);
  --ul-radius: var(--customer-radius);
  --ul-field-h: var(--customer-control-height);
}

html[data-theme-family="customer"] :is(.ul-page, body.user-profile, body.checkout-pay) {
  font-family: var(--customer-font);
  color: var(--customer-ink);
}

html[data-theme-family="customer"] :is(
  .ul-input,
  .ul-select,
  .pay-field > .form-control,
  .pay-field > .form-select,
  .up-field > .form-control,
  .up-field > .form-select,
  body.checkout-pay .form-control,
  body.checkout-pay .form-select,
  body.user-profile .form-control,
  body.user-profile .form-select
) {
  border-color: var(--customer-line);
  border-radius: var(--customer-radius);
  color: var(--customer-ink);
}

html[data-theme-family="customer"] :is(
  .ul-input:focus,
  .ul-select:focus,
  .pay-field > .form-control:focus,
  .pay-field > .form-select:focus,
  .up-field > .form-control:focus,
  .up-field > .form-select:focus,
  body.checkout-pay .form-control:focus,
  body.checkout-pay .form-select:focus,
  body.user-profile .form-control:focus,
  body.user-profile .form-select:focus
) {
  border-color: var(--customer-accent);
  box-shadow: var(--customer-focus);
  outline: none;
}

/* The same action language in all three themes. */
html[data-theme-family="customer"] :is(
  .ul-btn,
  .up-btn,
  body.checkout-pay .btn,
  body.checkout-pay .btn-checkout-primary,
  body.checkout-pay .btn-checkout-ghost
) {
  border-radius: var(--customer-radius);
  font-family: var(--customer-font);
}

html[data-theme-family="customer"] :is(
  .ul-btn:not(.ul-btn--ghost),
  .up-btn--primary,
  body.checkout-pay .btn-checkout-primary
) {
  border-color: var(--customer-accent);
  background-color: var(--customer-accent);
  color: var(--customer-accent-text);
}

html[data-theme-family="customer"] :is(
  .ul-btn:focus-visible,
  .up-btn:focus-visible,
  body.checkout-pay .btn:focus-visible,
  .btn-close:focus-visible
) {
  box-shadow: var(--customer-focus);
  outline: none;
}

/* Bootstrap modals and custom auth/address variants share one chrome. */
html[data-theme-family="customer"] :is(
  .modal-content,
  .checkout-modal .modal-content,
  .checkout-auth-modal .modal-content,
  .map-address-modal .modal-content
) {
  border: 1px solid var(--customer-line);
  border-radius: var(--customer-radius);
  background: var(--customer-paper);
  box-shadow: none;
}

html[data-theme-family="customer"] :is(
  .modal-header,
  .checkout-modal .modal-header,
  .map-address-modal .modal-header
) {
  border-bottom-color: var(--customer-line);
}

html[data-theme-family="customer"] :is(
  .modal-title,
  .checkout-modal .modal-title,
  .map-address-modal .modal-title
) {
  color: var(--customer-ink);
  font-family: var(--customer-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Icon controls have the same hit area and optical alignment. */
html[data-theme-family="customer"] :is(
  .ul-eye,
  .up-password__toggle,
  .checkout-toggle-pwd,
  .btn-close
) {
  min-width: 38px;
  min-height: 38px;
}

html[data-theme-family="customer"] :is(
  .ul-eye,
  .up-password__toggle,
  .checkout-toggle-pwd
) {
  color: var(--customer-muted);
}

html[data-theme-family="customer"] :is(
  .ul-link,
  .ul-footer-link,
  .recover-link,
  .checkout-auth-form a,
  .up-link
) {
  color: var(--customer-muted);
  text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme-family="customer"] *,
  html[data-theme-family="customer"] *::before,
  html[data-theme-family="customer"] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}