/* ==============================================================
   forms.css — Formulaires (génériques + overrides ciblés)
   ==============================================================

   SOMMAIRE
   1) Formulaires génériques (site-wide)
   2) Contact Form 7 — bouton .lsm-btn
   3) WooCommerce Checkout — conteneur / layout 900px
   4) WooCommerce Checkout — champs / labels
   5) WooCommerce Checkout — bloc “Votre commande”
   6) WooCommerce Checkout — bouton “Commander”
   7) WooCommerce Checkout — Stripe Express (Apple Pay / Google Pay)
   8) WooCommerce Checkout — paiement Stripe (nettoyage styles)
   9) WooCommerce Checkout — lien “Retour au panier”
   10) Stripe UI (Accordion / Payment Element)
   ============================================================== */


/* --------------------------------------------------------------
   1) FORMULAIRES GÉNÉRIQUES — Styles applicables partout
-------------------------------------------------------------- */

/* Styles génériques de formulaires (hors .traiteur-form)
   Pour l'instant, tout est dans traiteur-form.css.
*/

form label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

/* form input, */
form select,
form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  font-family: inherit;
}

form ::placeholder {
  color: #888;
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: #333;
  box-shadow: 0 0 0 1px #333;
}


/* --------------------------------------------------------------
   2) CONTACT FORM 7 — Bouton .lsm-btn
-------------------------------------------------------------- */

/* Bouton Contact Form : style "Voir la formule" */
.lsm-btn {
  background-color: #C87A2A !important;
  color: #E0F7D7 !important;
  padding: 12px 28px !important;
  border: 4px solid #F99B21 !important;
  border-radius: 999px !important; /* full pill */
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  text-align: center;
}

/* Hover */
.lsm-btn:hover {
  background-color: #b06920 !important; /* légère ombre plus foncée */
  transform: translateY(-1px);
}

/* Supprimer le style par défaut des navigateurs */
.wpcf7 input[type="submit"].lsm-btn {
  -webkit-appearance: none;
  appearance: none;
  border: 4px solid #F99B21 !important;
}


/* ============================================================
   3) WOOCOMMERCE CHECKOUT — Conteneur global (900px) + layout
   ============================================================ */

body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #payment,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review_heading {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* Supprimer les floats WooCommerce */
body.woocommerce-checkout .col2-set {
  display: block !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 {
  float: none !important;
  width: 100% !important;
}

/* Espaces cohérents entre les sections */
body.woocommerce-checkout h3 {
  margin-top: 40px !important;
  margin-bottom: 20px !important;
  font-size: 22px;
  color: #c87a2a;
}

/* Alignement général — tout dans une colonne centrale */
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .woocommerce-checkout-payment,
body.woocommerce-checkout #customer_details {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 900px !important;
}


/* ============================================================
   4) WOOCOMMERCE CHECKOUT — Champs / labels
   ============================================================ */

body.woocommerce-checkout .woocommerce-input-wrapper input,
body.woocommerce-checkout .woocommerce-input-wrapper select,
body.woocommerce-checkout .woocommerce-input-wrapper textarea {
  width: 100% !important;
  border: 1px solid #d2d2d2;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
}

/* Labels harmonisés */
body.woocommerce-checkout label {
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 4px !important;
  color: #123254;
  display: block;
}


/* ============================================================
   5) WOOCOMMERCE CHECKOUT — Bloc "Votre commande"
   ============================================================ */

body.woocommerce-checkout #order_review {
  width: 100% !important;
  max-width: 900px !important;
  margin-top: 40px !important;
}

body.woocommerce-checkout #order_review table.shop_table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

body.woocommerce-checkout #order_review th,
body.woocommerce-checkout #order_review td {
  padding: 14px 10px !important;
  font-size: 15px !important;
}


/* ============================================================
   6) WOOCOMMERCE CHECKOUT — Bouton “Commander”
   ============================================================ */

/* Conteneur du bouton Commander */
body.woocommerce-checkout .place-order {
  display: flex !important;
  flex-direction: column !important; /* texte au-dessus, bouton en dessous */
  align-items: center !important;    /* centre horizontalement le bouton */
  justify-content: center !important;
  text-align: center !important;
}

/* Bouton "Commander" – centré, largeur auto */
body.woocommerce-checkout #place_order {
  float: none !important; /* annule le float:right de Woo */
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;

  width: auto !important; /* plus de width:100% */
  padding: 14px 34px !important;

  background: #c87a2a !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  border: 4px solid #f99b21 !important;

  box-shadow: 0 5px 30px -10px #123f524d !important;
  cursor: pointer;

  margin-top: 30px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  transition: 0.2s ease-in-out;
}

/* Hover */
body.woocommerce-checkout #place_order:hover {
  transform: translateY(-2px);
  background: #d88b35 !important;
}


/* ============================================================
   7) STRIPE EXPRESS — Google Pay / Apple Pay en full width
   ============================================================ */

body.woocommerce-checkout #wc-stripe-express-checkout-element,
body.woocommerce-checkout #wc-stripe-express-checkout-element .StripeElement {
  width: 100% !important;
}

/* Centrer le séparateur “OU” */
body.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
  text-align: center !important;
  margin: 30px 0 !important;
}


/* ==========================================================
   8) CHECKOUT — Nettoyage / overrides paiement Stripe
   ========================================================== */

/* Conteneur paiement WooCommerce */
body.woocommerce-checkout .woocommerce-checkout-payment,
body.woocommerce-checkout #payment {
  background: #c8792a55 !important;
  /* border: 3px solid #e5e5e5 !important; */
  box-shadow: none !important;
}

/* Liste des moyens de paiement */
body.woocommerce-checkout #payment .wc_payment_methods,
body.woocommerce-checkout #payment .payment_methods {
  /* background: #c8792a55 !important; */
  border: none !important;
}

/* Box Stripe (zone autour carte / message test) */
body.woocommerce-checkout #payment .payment_box.payment_method_stripe {
  background: #c8792a55 !important;
  /* border: 3px solid #e5e5e5 !important; */
  box-shadow: none !important;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
  border: none !important;
}

/* Message "Mode TEST" Stripe */
body.woocommerce-checkout #payment .wc-stripe-payment-method-instruction {
  /* background: #C87A2A !important; */
  /* border: 3px solid #e5e5e5 !important; */
  padding-top: 10px !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
}

/* Formulaire Stripe (fieldset qui entoure l'iframe) */
body.woocommerce-checkout #payment #wc-stripe-upe-form,
body.woocommerce-checkout #payment .wc-upe-form,
body.woocommerce-checkout #payment fieldset.wc-payment-form {
  /* background: #C87A2A !important; */
  border: 3px solid #C87A2A !important;
  box-shadow: none !important;
}

.wc-upe-form.wc-payment-form {
  padding-top: 13px !important;
}

fieldset {
  border: none !important;
}

/* Checkbox "Enregistrer les informations de paiement" */
body.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew {
  /* background: #C87A2A !important; */
  border: none !important;
}

/* Wrapper général des termes + bouton */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  /* background: #ffffff !important; */
  border: none !important;
}

.woocommerce-checkout-payment {
  background-color: #C87A2A !important;
}


/* ==========================================================
   9) CHECKOUT — Bouton / lien "Retour au panier"
   ========================================================== */

body.woocommerce-checkout .lsdm-back-to-cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;
  padding: 10px 26px;

  border-radius: 999px;
  border: 2px solid #c87a2a;
  background: #fff;
  color: #c87a2a;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;

  transition: 0.2s ease-in-out;
}

body.woocommerce-checkout .lsdm-back-to-cart-button:hover {
  background: #fff4e3;
  transform: translateY(-1px);
}


/* ==========================================================
   10) STRIPE UI — Accordion / Payment Element
   ========================================================== */

.AccordionItem.p-AccordionItem.p-AccordionItem--selected.AccordionItem--selected {
  background-color: #C87A2A !important;
}

.AccordionItem {
  background-color: #C87A2A !important;
}