/**
 * Habitat storefront form controls and buttons (non-Materialize).
 *
 * STRUCTURE ONLY: shape, padding, shadow, typography. Colors (background,
 * text, borders, button bg/fg, etc.) are owned by per-store customization
 * in templates/theme-styles.html.twig — DO NOT set them here. The few
 * places where an accent is structurally required (focus ring, checked
 * checkbox/radio fill) defer to the `--im-primary` custom property
 * exposed by theme-styles, falling back to a neutral navy only when no
 * store color is configured.
 *
 * Background: this file replaces the form/control styling that used to
 * live in material-elements.scss. See the storefront-materialize-removal
 * task notes for context. Source mockups: https://projects.aviarybot.com/
 *
 * Sections:
 *   1. Tokens         (typography, shape, shadows, focus accent)
 *   2. Form elements  (inputs, textarea, select, checkbox, radio, labels)
 *   3. Buttons        (sizing, shape, hover transform/shadow)
 *
 * The cart/checkout card surfaces that used to live here (borders, drop-
 * shadow, card layout) were removed — checkout layout stays at master.
 */


/* ------------------------------------------------------------------ */
/* 1. Tokens                                                          */
/* ------------------------------------------------------------------ */

:root {
  /* shape */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 34, .04), 0 1px 1px rgba(15, 23, 34, .03);
  --shadow-md: 0 4px 14px rgba(15, 23, 34, .06), 0 1px 2px rgba(15, 23, 34, .04);

  /* typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', ui-serif, Georgia, serif;

  /* accent — prefer the store's primary, fall back to neutral navy */
  --accent: var(--im-primary, #0b2545);
  --focus: var(--im-primary, oklch(70% 0.12 250));

  /* required / error — no store-level customization for these */
  --required: #b42318;
  --danger: #b42318;
}


/* ------------------------------------------------------------------ */
/* 2. Form elements                                                   */
/* ------------------------------------------------------------------ */

.form-text,
.form-email,
.form-url,
.form-tel,
.form-number,
.form-search,
.form-password,
.form-date,
.form-time,
.form-autocomplete,
.form-textarea,
.form-select {
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

.form-text:focus,
.form-email:focus,
.form-url:focus,
.form-tel:focus,
.form-number:focus,
.form-search:focus,
.form-password:focus,
.form-date:focus,
.form-time:focus,
.form-autocomplete:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus) 30%, transparent);
}

.form-text:disabled,
.form-email:disabled,
.form-url:disabled,
.form-tel:disabled,
.form-number:disabled,
.form-search:disabled,
.form-password:disabled,
.form-date:disabled,
.form-time:disabled,
.form-autocomplete:disabled,
.form-textarea:disabled,
.form-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-textarea {
  min-height: 96px;
  padding: 12px 14px;
  line-height: 1.5;
}

.form-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

.form-checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.form-checkbox:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-checkbox:checked::after {
  content: "";
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.5l2.5 2.5L10 3.5'/></svg>") center/contain no-repeat;
}

.form-checkbox:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus) 30%, transparent);
}

.form-radio {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease;
}

.form-radio:checked {
  border-color: var(--accent);
}

.form-radio:checked::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--accent);
}

.form-radio:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus) 30%, transparent);
}

.form-item {
  margin: 0 0 16px;
}

.form-item > label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
}

.form-item.form-type-checkbox > label,
.form-item.form-type-radio > label {
  margin-bottom: 0;
  font-weight: 500;
  cursor: pointer;
}

.form-item .description {
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.7;
}

.form-item--error .form-text,
.form-item--error .form-email,
.form-item--error .form-url,
.form-item--error .form-tel,
.form-item--error .form-number,
.form-item--error .form-password,
.form-item--error .form-textarea,
.form-item--error .form-select {
  border-color: var(--danger);
}

.form-item--error-message {
  margin-top: 6px;
  font-size: 13px;
  color: var(--danger);
}

.form-required::after {
  content: "*";
  color: var(--required);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  margin-left: 4px;
}


/* ------------------------------------------------------------------ */
/* 3. Buttons                                                         */
/* ------------------------------------------------------------------ */

/*
 * habitat's input--submit.html.twig emits `.btn .btn-submit`. We only set
 * structure (size, padding, radius, font, hover transform/shadow). All
 * button colors come from theme-styles.html.twig per store config.
 */

.btn,
input[type="submit"].form-submit,
button[type="submit"].form-submit {
  appearance: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 22px;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
  text-decoration: none;
}

.btn:hover,
input[type="submit"].form-submit:hover,
button[type="submit"].form-submit:hover {
  box-shadow: 0 2px 4px rgba(15, 23, 34, .06),
              0 6px 14px rgba(15, 23, 34, .08);
}

.btn:focus-visible,
input[type="submit"].form-submit:focus-visible,
button[type="submit"].form-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus) 35%, transparent);
}

.btn:disabled,
input[type="submit"].form-submit:disabled,
button[type="submit"].form-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: var(--shadow-sm);
}

.btn-wrapper {
  display: inline-block;
}