/* ==========================================================================
   Mawadda — page de paiement (WooCommerce classique)
   Chargée seulement sur la page de paiement. Tout est rangé sous
   body.mw-paiement pour ne rien changer ailleurs.
   ========================================================================== */

.mw-paiement{--co-carte:#fff;--co-champ:#FFFCF8;--co-rose:#F3E3E7;--co-r:20px}

/* — en-tête de page plus compact — */
.mw-paiement .page-entete{padding:34px 0 30px}
.mw-paiement .page-entete h1{font-size:clamp(1.8rem,6vw,2.5rem);margin:0}
.mw-paiement .page-contenu{max-width:var(--large,1180px);padding-top:26px;padding-bottom:64px}
.mw-paiement .page-contenu .woocommerce{max-width:1040px;margin:0 auto}
.mw-paiement .page-contenu a::after{display:none!important}
.mw-paiement .mawadda-modifier-panier{margin:0 0 14px}

/* — messages (erreur, info, panier) — */
.mw-paiement .woocommerce-error,
.mw-paiement .woocommerce-message,
.mw-paiement .woocommerce-info{
  list-style:none;margin:0 0 18px;padding:16px 18px 16px 50px;position:relative;
  background:var(--co-rose);border:0!important;border-radius:14px;color:var(--profond);outline:none;box-shadow:none;
  font-size:.95rem;line-height:1.55;font-weight:400}
.mw-paiement .woocommerce-error::before,
.mw-paiement .woocommerce-message::before,
.mw-paiement .woocommerce-info::before{color:var(--bordeaux);top:16px;left:18px}
.mw-paiement .woocommerce-error li{margin:0;padding:0}
.mw-paiement .woocommerce-error li + li{margin-top:6px}
.mw-paiement .woocommerce-message .button{float:none;display:inline-block;margin:8px 0 0;
  padding:10px 18px;font-size:.72rem;border-radius:999px}
.mw-paiement .woocommerce-NoticeGroup{grid-column:1/-1}

/* — code promo : une simple ligne, discrète — */
.mw-paiement .woocommerce-form-coupon-toggle .woocommerce-info{
  background:transparent;padding:0;margin:0 0 18px;color:var(--doux);font-size:.92rem}
.mw-paiement .woocommerce-form-coupon-toggle .woocommerce-info::before{display:none}
.mw-paiement .woocommerce-form-coupon-toggle a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:3px}
.mw-paiement form.checkout_coupon{background:var(--co-carte);border:1px solid var(--filet);
  border-radius:16px;padding:18px;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mw-paiement form.checkout_coupon p{margin:0;float:none;width:auto}
.mw-paiement form.checkout_coupon p:first-child{flex:1 1 100%;color:var(--doux);font-size:.9rem}
.mw-paiement form.checkout_coupon .form-row-first{flex:1 1 200px}
.mw-paiement form.checkout_coupon .button{border-radius:14px;min-height:52px}
.mw-paiement form.checkout_coupon .clear{display:none}

/* — la grille : coordonnées à gauche, commande et paiement à droite — */
.mw-paiement form.checkout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.mw-paiement .woocommerce-NoticeGroup{margin-bottom:18px}
.mw-paiement form.checkout::before,.mw-paiement form.checkout::after{display:none}
@media (min-width:900px){
  .mw-paiement form.checkout{grid-template-columns:minmax(0,1fr) 430px;column-gap:28px;row-gap:0}
  .mw-paiement #customer_details{grid-column:1;grid-row:span 2}
  .mw-paiement #order_review_heading,.mw-paiement #order_review{grid-column:2}
}

/* — les cartes — */
.mw-paiement #customer_details,
.mw-paiement #order_review{background:var(--co-carte);border:1px solid var(--filet);
  box-shadow:0 18px 40px rgba(74,21,38,.06)}
.mw-paiement #customer_details{border-radius:var(--co-r);padding:26px 24px 12px;width:auto}
.mw-paiement #customer_details .col-1,.mw-paiement #customer_details .col-2{float:none;width:100%;max-width:none}
.mw-paiement #customer_details .col-2:empty,
.mw-paiement .woocommerce-additional-fields:empty{display:none}
.mw-paiement #order_review_heading{margin:0;background:var(--co-carte);border:1px solid var(--filet);
  border-bottom:0;border-radius:var(--co-r) var(--co-r) 0 0;padding:26px 24px 4px}
.mw-paiement #order_review{border-top:0;border-radius:0 0 var(--co-r) var(--co-r);padding:4px 24px 24px;
  box-shadow:0 30px 40px -14px rgba(74,21,38,.08)}
@media (max-width:899px){
  .mw-paiement #customer_details{margin-bottom:18px}
}

/* — titres numérotés — */
.mw-paiement form.checkout{counter-reset:co}
.mw-paiement .woocommerce-billing-fields>h3,
.mw-paiement #order_review_heading{counter-increment:co;display:flex;align-items:center;gap:12px;
  font-family:var(--titre);font-weight:700;font-size:1.35rem;color:var(--profond);line-height:1.2}
.mw-paiement .woocommerce-billing-fields>h3{margin:0 0 18px}
.mw-paiement .woocommerce-billing-fields>h3::before,
.mw-paiement #order_review_heading::before{content:counter(co);flex:none;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;background:var(--co-rose);color:var(--bordeaux);
  font-size:1rem;font-family:var(--titre)}

/* — les champs — */
.mw-paiement .woocommerce-billing-fields__field-wrapper{display:flex;flex-wrap:wrap;gap:0 14px}
.mw-paiement form .form-row{float:none;width:100%;margin:0 0 16px;padding:0}
.mw-paiement form .form-row-first,.mw-paiement form .form-row-last{flex:1 1 calc(50% - 7px);width:auto}
.mw-paiement form .form-row label{display:block;font-size:.88rem;font-weight:500;color:var(--brun);
  margin:0 0 6px;line-height:1.4}
.mw-paiement form .form-row .required{color:var(--bordeaux);text-decoration:none;border:0}
.mw-paiement form .form-row .optional{display:none}
.mw-paiement form .form-row input.input-text,
.mw-paiement form .form-row textarea,
.mw-paiement form .form-row select,
.mw-paiement .select2-container--default .select2-selection--single{
  width:100%;min-height:52px;padding:12px 16px;border:1.5px solid var(--filet);border-radius:14px;
  background:var(--co-champ);font:inherit;font-size:16px;font-weight:400;color:var(--brun);
  box-shadow:none;transition:border-color .2s,box-shadow .2s;outline:none}
.mw-paiement .select2-container--default .select2-selection--single{display:flex;align-items:center;padding:0 16px}
.mw-paiement .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0;line-height:1.4;color:var(--brun)}
.mw-paiement .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;right:12px}
.mw-paiement form .form-row input.input-text:focus,
.mw-paiement form .form-row select:focus,
.mw-paiement .select2-container--focus .select2-selection--single,
.mw-paiement .select2-container--open .select2-selection--single{
  border-color:var(--bordeaux);box-shadow:0 0 0 4px var(--co-rose)}
.mw-paiement form .form-row.woocommerce-invalid input.input-text,
.mw-paiement form .form-row.woocommerce-invalid .select2-selection{border-color:#B4233C}
.mw-paiement form .form-row.woocommerce-validated input.input-text{border-color:var(--filet)}
.mw-paiement form .form-row .description{display:block;background:none;color:var(--doux);
  padding:6px 2px 0;margin:0;font-size:.82rem;line-height:1.45;position:static}
.mw-paiement form .form-row .description::before{display:none}
.mw-paiement .select2-dropdown{border-color:var(--filet);border-radius:14px;overflow:hidden}
.mw-paiement .select2-results__option--highlighted{background:var(--bordeaux)!important}
.mw-paiement .select2-search__field{border-radius:10px;border:1px solid var(--filet)!important;padding:8px 10px!important}

/* — le récapitulatif — */
.mw-paiement table.shop_table{border:0!important;border-radius:0;margin:0 0 18px;border-collapse:collapse!important;border-spacing:0;width:100%}
.mw-paiement table.shop_table thead{display:none}
.mw-paiement table.shop_table th,
.mw-paiement table.shop_table td{border:0;border-top:1px solid var(--filet);padding:14px 0;
  background:transparent;font-size:.95rem;vertical-align:middle}
.mw-paiement table.shop_table tbody tr:first-child td{border-top:0}
.mw-paiement table.shop_table tfoot th,.mw-paiement table.shop_table tfoot td{border-top:0}
.mw-paiement table.shop_table tfoot tr{border-top:1px solid var(--filet)}
.mw-paiement table.shop_table tfoot tr:last-child:not(.order-total){border-top:0}
.mw-paiement table.shop_table tfoot td[colspan]{text-align:left;padding-left:0}
.mw-paiement table.shop_table td.product-total,
.mw-paiement table.shop_table tfoot td{text-align:right;white-space:nowrap;padding-left:12px}
.mw-paiement table.shop_table tfoot th{font-weight:400;color:var(--doux);text-align:left}
.mw-paiement table.shop_table tr.order-total th,
.mw-paiement table.shop_table tr.order-total td{font-family:var(--titre);font-weight:700;color:var(--profond);font-size:1.25rem}
.mw-paiement table.shop_table tr.order-total td strong{font-weight:700}
.mw-paiement table.shop_table tfoot tr:last-child:not(.order-total) th,
.mw-paiement table.shop_table tfoot tr:last-child:not(.order-total) td{
  font-size:.8rem;color:var(--doux);font-weight:400;padding-top:4px;border-top:0}
.mw-paiement .mw-co-produit{display:flex;align-items:center;gap:14px;line-height:1.35;color:var(--brun)}
.mw-paiement .mw-co-mini{width:58px;height:58px;object-fit:cover;border-radius:12px;flex:none;
  background:var(--ivoire);margin:0}
.mw-paiement .product-name .product-quantity{display:none}
.mw-paiement table.shop_table td.product-name{font-size:0}
.mw-paiement td.product-name .mw-co-produit{font-size:.95rem}
.mw-paiement .product-name .mawadda-retirer{display:block;width:max-content;margin:6px 0 0 72px;padding:0;font-size:.8rem}

/* — le paiement — */
.mw-paiement #payment{background:transparent;border-radius:0;padding:0}
.mw-paiement #payment ul.payment_methods{list-style:none;margin:0 0 18px;padding:0;border:0;display:grid;gap:10px}
.mw-paiement #payment ul.payment_methods::before,.mw-paiement #payment ul.payment_methods::after{display:none}
.mw-paiement #payment ul.payment_methods li{margin:0;padding:14px 16px;border:1.5px solid var(--filet);
  border-radius:14px;background:var(--co-champ);line-height:1.4;transition:border-color .2s,background .2s}
.mw-paiement #payment ul.payment_methods li:has(input:checked){border-color:var(--bordeaux);background:#FDF5F7}
.mw-paiement #payment ul.payment_methods li:only-child{border-color:var(--filet);background:var(--co-champ)}
.mw-paiement #payment ul.payment_methods li>input{width:20px;height:20px;margin:0 10px 0 0;
  vertical-align:middle;accent-color:var(--bordeaux)}
.mw-paiement #payment ul.payment_methods li>label{display:inline;font-weight:500;color:var(--profond);
  font-size:1rem;cursor:pointer;vertical-align:middle}
.mw-paiement #payment ul.payment_methods li img{display:inline-block;max-height:22px;width:auto;
  vertical-align:middle;margin:0 0 0 6px;float:none}
.mw-paiement #payment div.payment_box{background:transparent;color:var(--brun);margin:12px 0 0;padding:0;
  font-size:.9rem;border-radius:0}
.mw-paiement #payment div.payment_box::before{display:none}
.mw-paiement #payment div.payment_box p{margin:0 0 .6em}
.mw-paiement #payment div.payment_box p:last-child{margin-bottom:0}
.mw-paiement #payment div.payment_box fieldset{border:0;padding:0;margin:0;min-width:0}
.mw-paiement #payment div.payment_box .form-row{margin:0 0 12px}
.mw-paiement #payment div.payment_box .woocommerce-error{margin:6px 0 0}

/* — conditions, renonciation, bouton — */
.mw-paiement #payment div.form-row.place-order{padding:0;margin:0;background:transparent}
.mw-paiement .woocommerce-form__label-for-checkbox .required,.mw-paiement .mawadda-renonciation .required{display:none}
.mw-paiement .woocommerce-privacy-policy-text p{font-size:.8rem;line-height:1.55;color:var(--doux);margin:0 0 14px}
.mw-paiement .woocommerce-privacy-policy-text a,
.mw-paiement .woocommerce-terms-and-conditions-checkbox-text a{text-decoration:underline;text-underline-offset:2px}
.mw-paiement .woocommerce-terms-and-conditions-wrapper .form-row,
.mw-paiement .mawadda-renonciation .form-row{margin:0 0 12px}
.mw-paiement .woocommerce-form__label-for-checkbox,
.mw-paiement .mawadda-renonciation label{display:flex!important;align-items:flex-start;gap:10px;
  font-size:.86rem!important;font-weight:400!important;line-height:1.5!important;color:var(--brun);cursor:pointer}
.mw-paiement .woocommerce-form__label-for-checkbox input,
.mw-paiement .mawadda-renonciation input[type=checkbox]{width:20px;height:20px;margin:1px 0 0;flex:none;
  accent-color:var(--bordeaux)}
.mw-paiement .mawadda-renonciation{background:var(--ivoire);border:0;border-radius:14px;padding:14px 14px 2px;margin:0 0 16px;font-size:inherit}
.mw-paiement .mawadda-renonciation:hover{background:var(--ivoire)}
.mw-paiement #payment .woocommerce-terms-and-conditions-wrapper .form-row,.mw-paiement #payment .mawadda-renonciation .form-row{padding:0}
.mw-paiement #payment #place_order{display:block;float:none;width:100%;min-height:58px;margin:4px 0 0;padding:0 20px;
  border-radius:999px;font-size:.95rem;letter-spacing:.08em;line-height:1.2;
  box-shadow:0 12px 26px rgba(110,34,51,.24)}
.mw-paiement #payment #place_order:hover{box-shadow:0 14px 30px rgba(110,34,51,.3)}
.mw-paiement .mw-co-rassure{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;
  font-size:.84rem;color:var(--doux);line-height:1.4}
.mw-paiement .mw-co-rassure li{margin:0;padding-left:24px;position:relative}
.mw-paiement .mw-co-rassure li::before{content:"";position:absolute;left:0;top:1px;width:16px;height:16px;
  background:var(--bordeaux);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.mw-paiement .mw-co-rassure li:first-child::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}

/* — téléphone — */
@media (max-width:560px){
  .mw-paiement .page-entete{padding:26px 0 22px}
  .mw-paiement .page-contenu{padding-top:18px}
  .mw-paiement #customer_details{padding:22px 18px 8px}
  .mw-paiement #order_review_heading{padding:22px 18px 2px}
  .mw-paiement #order_review{padding:2px 18px 20px}
}
