/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Tailwind 4 needs modern color support (Safari 16.4+/Chrome 111+).
 * Keep customer forms and Wallet links usable when that stylesheet cannot render.
 * This intentionally sits outside CSS layers, which older browsers also ignore.
 */
@supports not (color: color-mix(in oklab, black, white)) {
  .customer-flow {
    margin: 0;
    background: white;
    color: black;
    font: 16px/1.5 Arial, sans-serif;
  }

  .customer-flow * { box-sizing: border-box; }

  .customer-flow > div {
    max-width: 36rem;
    margin: 0 auto;
    padding: 1.5rem;
  }

  .customer-flow img { max-width: 100%; height: auto; max-height: 6rem; }
  .customer-flow svg { width: 1.5rem; height: 1.5rem; }
  .customer-flow label, .customer-flow legend { font-weight: bold; }
  .customer-flow form > div, .customer-flow fieldset { margin-bottom: 1rem; }
  .customer-flow fieldset { min-width: 0; }

  .customer-flow .form-input {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    margin: 0.25rem 0 0.75rem;
    padding: 0.5rem;
    border: 1px solid;
    border-radius: 0.5rem;
    background: white;
    color: black;
    font: inherit;
  }

  .customer-flow input[type="submit"],
  .customer-flow button,
  .customer-flow a[data-turbo="false"] {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    margin: 1rem 0;
    padding: 0.75rem;
    border: 1px solid;
    border-radius: 0.5rem;
    background: black;
    color: white;
    font: inherit;
    text-align: center;
  }

  .customer-flow .text-white { color: white; }
}