/* checkout-mobile-boost.css — fixes tactiles + lisibilité checkout mobile (audit 2026-07-19).
   Scope : uniquement pages checkout (identifiées via body#checkout ou .checkout page classes) */

@media (max-width: 767px) {

  /* Tous les inputs / selects / textarea du checkout : hauteur minimum tactile 44px + font-size 16px (évite zoom iOS) */
  body#checkout input[type="text"],
  body#checkout input[type="email"],
  body#checkout input[type="tel"],
  body#checkout input[type="number"],
  body#checkout input[type="password"],
  body#checkout select,
  body#checkout textarea {
    min-height: 46px !important;
    font-size: 16px !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    border-width: 1.5px !important;
  }

  /* Focus states plus visibles */
  body#checkout input:focus,
  body#checkout select:focus,
  body#checkout textarea:focus {
    outline: none !important;
    border-color: #79a500 !important;
    box-shadow: 0 0 0 3px rgba(121, 165, 0, 0.15) !important;
  }

  /* Labels : plus lisibles, marge d'aération */
  body#checkout .form-control-label,
  body#checkout label {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: #2c2c2c !important;
    display: block !important;
  }

  /* Champs "invalid" plus visibles */
  body#checkout .form-control.is-invalid,
  body#checkout input.is-invalid {
    border-color: #c62828 !important;
    background: #fff5f5 !important;
  }
  body#checkout .invalid-feedback,
  body#checkout .form-control-comment {
    font-size: 13px !important;
    margin-top: 4px !important;
    color: #c62828 !important;
    font-weight: 500 !important;
  }

  /* Radios carriers / paiement : plus grosses, plus tactiles */
  body#checkout .custom-radio input[type="radio"] + span,
  body#checkout .payment-option input[type="radio"] + span {
    width: 24px !important;
    height: 24px !important;
  }
  body#checkout .delivery-option,
  body#checkout .payment-option {
    padding: 14px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    border: 1.5px solid #e0e0e0 !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
  }
  body#checkout .delivery-option:has(input:checked),
  body#checkout .payment-option:has(input:checked) {
    border-color: #79a500 !important;
    background: #f7fbf0 !important;
  }

  /* Boutons "Continuer" / "Valider ma commande" — sticky bottom sur mobile */
  body#checkout .continue,
  body#checkout button[type="submit"].btn-primary,
  body#checkout #payment-confirmation button {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    padding: 14px 24px !important;
    border-radius: 8px !important;
    background: #79a500 !important;
    border-color: #79a500 !important;
    color: #fff !important;
    margin-top: 12px !important;
    box-shadow: 0 4px 14px rgba(121, 165, 0, .35) !important;
  }
  body#checkout .continue:hover,
  body#checkout button[type="submit"].btn-primary:hover {
    background: #5e8200 !important;
    border-color: #5e8200 !important;
  }

  /* Steps titres plus lisibles */
  body#checkout .step-title,
  body#checkout .checkout-step .step-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    padding: 14px 16px !important;
  }
  body#checkout .step-number {
    font-size: 14px !important;
    padding: 4px 10px !important;
  }

  /* Cart summary récap : compact — pas prendre 30% de l'écran */
  body#checkout .cart-summary,
  body#checkout .js-cart-summary {
    font-size: 13px !important;
    padding: 12px !important;
  }
  body#checkout .cart-summary .cart-summary-line {
    padding: 4px 0 !important;
  }
  body#checkout .cart-summary .h6,
  body#checkout .cart-summary h1,
  body#checkout .cart-summary h2 {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }

  /* Voucher / code promo : compact */
  body#checkout .promo-code {
    padding: 12px !important;
  }
  body#checkout .promo-code .form-inline {
    display: flex !important;
    gap: 8px !important;
  }

  /* Bandeau guest checkout : ajuster padding mobile */
  body#checkout .checkout-step div[style*="linear-gradient"] {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
}