/* Shaylor — Global form element styles
   Applies to all WooCommerce pages and custom page wrappers.
   Scoped to avoid touching wp-admin or unrelated third-party widgets. */

/* ── Design tokens (mirrored here so this file is self-contained) ──────── */
:root {
  --oat-50:  #faf6ef;
  --oat-100: #f3ece0;
  --oat-200: #e8dcc7;
  --oat-300: #d4c2a3;
  --oat-400: #a89378;
  --ink-900: #2a2520;
  --ink-700: #4a4138;
  --ink-500: #6b5d52;
  --olive-700: #7a8b5e;
  --serif: 'Fraunces', Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ── Scope: all WC pages + our custom wrappers ──────────────────────────── */
.woocommerce,
.woocommerce-page,
.shaylor-checkout-wrap,
.shaylor-account-wrap {

  /* ── Text inputs, email, password, tel, number ───────────────────────── */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"] {
    font-family: var(--serif) !important;
    background: white !important;
    border: 1px solid var(--oat-200) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--ink-900) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .2s ease !important;
    -webkit-appearance: none;
    appearance: none;
  }

  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="tel"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="url"]:focus {
    border-color: var(--ink-900) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* ── Textarea ─────────────────────────────────────────────────────────── */
  textarea {
    font-family: var(--serif) !important;
    background: white !important;
    border: 1px solid var(--oat-200) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--ink-900) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .2s ease !important;
    resize: vertical;
    line-height: 1.6;
  }

  textarea:focus {
    border-color: var(--ink-900) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* ── Select / dropdown ────────────────────────────────────────────────── */
  select {
    font-family: var(--serif) !important;
    background-color: white !important;
    border: 1px solid var(--oat-200) !important;
    border-radius: 10px !important;
    padding: 10px 36px 10px 14px !important;
    font-size: 14px !important;
    color: var(--ink-900) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .2s ease !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    /* custom chevron */
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b5d52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
  }

  select:focus {
    border-color: var(--ink-900) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* ── Labels ───────────────────────────────────────────────────────────── */
  label {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--ink-700) !important;
    display: block;
    margin-bottom: 6px !important;
  }

  /* WC adds an asterisk for required — keep it subtle */
  label .required,
  label abbr[title] {
    color: var(--olive-700) !important;
    text-decoration: none !important;
    border: none !important;
  }

  /* ── Placeholder text ─────────────────────────────────────────────────── */
  ::placeholder {
    color: var(--oat-400) !important;
    font-style: italic;
    opacity: 1;
  }
}