/* =========================================
   MORPHOSE THANK YOU PAGE (Confirmation)
   ========================================= */

/* --- 1. Main Wrapper --- */
.morphose-thankyou-wrapper {
  max-width: 1200px;
  width: 90%;
  margin: 60px auto;
  font-family: inherit;
  /* Inherit site font */
}

/* --- 2. Header Status --- */
.morphose-thankyou-header {
  text-align: center;
  margin-bottom: 80px;
}

.morphose-success-icon {
  margin-bottom: 25px;
}

h1.woocommerce-thankyou-order-received {
  font-family: var(--iw-font) !important;
  font-weight: 600 !important;
  font-size: 30px;
  /* Match homepage hero */
  margin-bottom: 10px;
  color: var(--iw-black);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.morphose-thankyou-subtitle {
  font-family: var(--iw-font) !important;
  font-size: 16px;
  font-weight: 500;
  color: var(--iw-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 0;
}

/* --- 3. Product Grid (4 Columns) --- */
.morphose-thankyou-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 80px;
}

.morphose-thankyou-product-card {
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* --- 3A. Image Wrapper (Match User Snippet) --- */
.ic-loop-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Force le format carré 1:1 */
  overflow: hidden;
  border-radius: 12px;
}

.ic-loop-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
  margin: 0;
}

/* --- 3B. Row: Title + Qty --- */
.morphose-loop-row-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 15px;
  /* Réduit l'espace avec l'image */
  margin-bottom: 5px;
}

.morphose-loop-title-col {
  flex: 1;
  padding-right: 15px;
}

.morphose-loop-title-col h3 {
  margin: 0;
  font-size: 15px;
  /* "Pas trop gros" */
  font-weight: 600;
  line-height: 1.3;
  color: var(--iw-black);
}

.morphose-loop-title-col h3 a {
  color: inherit;
  text-decoration: none;
}

/* Qty Pill - À droite du titre */
.morphose-loop-qty-col {
  flex-shrink: 0;
}

.ic-qty-wrap-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: var(--iw-white);
  font-size: 13px;
  color: var(--iw-black);
  font-weight: 500;
  min-width: 32px;
  height: 32px;
  /* Hauteur fixe pour alignement propre */
}

/* --- 3C. Short Description (Icons) --- */
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
  color: var(--iw-muted);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;

  /* Force le stacking : Texte en haut, Icônes en bas */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* Espace entre le texte et les icônes */
}

/* Le conteneur d'icônes (span) */
.woocommerce-product-details__short-description span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Espace entre les icônes */
}

/* Icons (Images) styling */
.woocommerce-product-details__short-description img {
  display: block !important;
  /* Block dans le flex pour éviter line-height bizarre */
  margin: 0 !important;
  width: 21px;
  height: auto;
  border: none;
  box-shadow: none;
}

/* --- 3D. Price --- */
.elementor-widget-woocommerce-product-price .price {
  color: var(--iw-black);
  font-weight: 600;
  font-size: 15px;
  margin: 0;
}

/* --- 4. Responsive --- */
@media (max-width: 767px) {
  .morphose-thankyou-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  h1.woocommerce-thankyou-order-received {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .morphose-thankyou-products-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 5. Footer Buttons --- */
.morphose-thankyou-footer-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 60px;
  flex-wrap: wrap;
}

.morphose-thankyou-footer-actions .button {
  font-size: 14px;
  font-weight: 600;
  padding: 15px 40px;
  border-radius: 12px !important;
  /* Match celui du panier */
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  min-width: 200px;
  text-align: center;

  /* Style "Comme les autres" (Noir) */
  background-color: var(--iw-black) !important;
  color: var(--iw-white) !important;
  border: 2px solid var(--iw-black) !important;
}

.morphose-thankyou-footer-actions .button:hover {
  background-color: var(--iw-gray) !important;
  border-color: var(--iw-gray) !important;
}

/* Supprime les anciens styles différenciés */
/* .morphose-thankyou-footer-actions .morphose-btn-outline,
.morphose-thankyou-footer-actions .morphose-btn-primary {
    Hérite du style général .button
} */

/* =========================================
   CHECKOUT PAGE - Ship to different address
   ========================================= */

/* Alignement à gauche pour "Collecter & Livrer à une autre adresse ?" */
#ship-to-different-address {
  text-align: left !important;
  margin: 15px 0 15px 0 !important;
  padding: 0 !important;
}

#ship-to-different-address label.checkbox {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
}

.woocommerce-shipping-fields h3#ship-to-different-address {
  text-align: left !important;
}

/* Espacement supplémentaire entre shipping fields et notes de commande */
.woocommerce-shipping-fields {
  margin-bottom: 25px !important;
}

/* =========================================
   CHECKOUT - MASQUER LIGNES INUTILES POUR ABONNEMENTS
   ========================================= */

/* Masquer les lignes à 0€ pour les abonnements (initial cart-subtotal et order-total) */
.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal:not(.recurring-total),
.woocommerce-checkout-review-order-table tfoot tr.order-total:not(.recurring-total) {
  display: none !important;
}

/* Masquer le titre "Totaux récurrents" */
.woocommerce-checkout-review-order-table tfoot tr.recurring-totals {
  display: none !important;
}

/* Masquer le sous-total récurrent (on garde seulement le total récurrent) */
.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal.recurring-total {
  display: none !important;
}

/* FORCER L'AFFICHAGE DE LA LIGNE LIVRAISON */
.woocommerce-checkout-review-order-table tfoot tr.shipping,
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals,
.woocommerce-checkout-review-order-table tfoot tr[class*='shipping'] {
  display: table-row !important;
}

/* =========================================
   CHECKOUT - BLOC CODE PROMO
   ========================================= */
.woocommerce-checkout .e-coupon-box .e-woocommerce-coupon-nudge {
  margin-bottom: 10px;
}

.woocommerce-checkout .e-coupon-box .e-coupon-anchor {
  display: none;
  margin-top: 10px;
}

.woocommerce-checkout .e-coupon-box .e-coupon-anchor-description {
  display: none !important;
}

.woocommerce-checkout .e-coupon-box .coupon-container-grid {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.woocommerce-checkout .e-coupon-box .coupon-col-1 {
  flex: 1 1 auto;
}

.woocommerce-checkout .e-coupon-box .coupon-col-2 {
  flex: 0 0 auto;
  display: flex;
}

.woocommerce-checkout .e-coupon-box #coupon_code {
  height: 44px;
  min-height: 44px;
  line-height: 44px;
}

.woocommerce-checkout .e-coupon-box .e-apply-coupon {
  height: 44px;
  min-height: 44px;
  line-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  white-space: nowrap;
}

/* =========================================
   PAGE MODIFICATION MOYEN DE PAIEMENT
   ========================================= */

/* Masquer le fil d'ariane sur la page de modification du moyen de paiement */
body.woocommerce-order-pay .elementor-element-a82f45a {
  display: none !important;
}

/* Masquer le tableau des produits/totaux */
body.woocommerce-order-pay #order_review table.shop_table {
  display: none !important;
}

/* Masquer le message d'info sur la date du prochain paiement (optionnel) */
body.woocommerce-order-pay .woocommerce-info {
  display: none !important;
}

/* Styles du bloc de paiement */
body.woocommerce-order-pay #payment {
  background: var(--iw-white);
  padding: 30px;
  border-radius: var(--iw-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.woocommerce-order-pay #payment .payment_methods li {
  background: transparent;
  border: none;
}

body.woocommerce-order-pay #payment .payment_box {
  background: var(--iw-gray-100);
  border-radius: 8px;
  padding: 20px;
  margin-top: 15px;
}

/* Champs Stripe avec bordures arrondies */
body.woocommerce-order-pay #payment .wc-stripe-upe-element,
body.woocommerce-order-pay #payment .StripeElement {
  border-radius: 8px !important;
  border: 1px solid var(--iw-border) !important;
  padding: 12px !important;
  background: var(--iw-white) !important;
}

/* Radio buttons */
body.woocommerce-order-pay #payment input[type='radio'] {
  margin-right: 8px;
}

body.woocommerce-order-pay #payment label {
  font-size: 15px;
  font-weight: 500;
}

/* Bouton de validation */
body.woocommerce-order-pay #place_order {
  background: var(--iw-black) !important;
  color: var(--iw-white) !important;
  border: none !important;
  border-radius: var(--iw-radius) !important;
  padding: 15px 40px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  width: 100%;
  margin-top: 20px;
}

body.woocommerce-order-pay #place_order:hover {
  background: var(--iw-gray) !important;
}

/* =========================================
   CHECKOUT PAYMENT METHOD LABEL STYLE
   ========================================= */

/* Style du label "Votre paiement" EXACTEMENT comme le h3 "Votre commande" */
.woocommerce-checkout #payment .wc_payment_method label[for^='payment_method_'] {
  color: var(--sections-title-color, #000) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: var(--sections-title-spacing, 30px) !important;
  margin-top: 0 !important;
  padding: 0 !important;
  display: block !important;
  font-family: var(--e-global-typography-titre_h3-font-family), Sans-serif !important;
  text-transform: none !important;
  line-height: var(--e-global-typography-titre_h3-line-height) !important;
  letter-spacing: var(--e-global-typography-titre_h3-letter-spacing) !important;
}

/* Masquer le radio button du moyen de paiement */
.woocommerce-checkout #payment .wc_payment_method input[type='radio'] {
  display: none !important;
}

/* Espacement du bloc de paiement */
.woocommerce-checkout #payment .wc_payment_method {
  margin-bottom: 20px !important;
}

/* Style de la box d'information */
.woocommerce-checkout #payment .payment_box {
  margin-top: 15px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* =========================================
   CHECKOUT – MASQUER LE HEADING "Additional Information"
   (le champ Notes de commande reste visible)
   ========================================= */

.woocommerce-checkout .woocommerce-additional-fields > h3 {
  display: none !important;
}

/* =========================================
   CHECKOUT – BOX-SIZING GLOBAL
   ========================================= */

.woocommerce-checkout *,
.woocommerce-checkout *::before,
.woocommerce-checkout *::after {
  box-sizing: border-box;
}

/* =========================================
   CHECKOUT – MOBILE LAYOUT FIX (≤ 767 px)
   ========================================= */

@media (max-width: 767px) {
  /* --- Page-level overflow guard --- */
  .woocommerce-checkout {
    overflow-x: hidden;
  }

  /* --- Elementor widget wrapper --- */
  .woocommerce-checkout .elementor-widget-woocommerce-checkout-page,
  .woocommerce-checkout .elementor-widget-woocommerce-checkout-page > .elementor-widget-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Customer details (billing + shipping column) --- */
  .woocommerce-checkout #customer_details {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    flex: 0 0 100% !important;
  }

  /* --- Billing / Shipping / Additional fields wrappers --- */
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields {
    width: 100% !important;
    padding: 0 !important;
  }

  /* --- Billing field rows (WooCommerce .form-row system) --- */
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Inputs, selects, textareas fill their row --- */
  .woocommerce-checkout .form-row input[type='text'],
  .woocommerce-checkout .form-row input[type='email'],
  .woocommerce-checkout .form-row input[type='tel'],
  .woocommerce-checkout .form-row input[type='number'],
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .form-row textarea,
  .woocommerce-checkout .form-row .select2-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- Order review column --- */
  .woocommerce-checkout .woocommerce-checkout-review-order {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  /* --- Iron Wallet notices injected before checkout form --- */
  .woocommerce-checkout .iron-wallet-notice {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* --- Elementor column overrides for checkout layout --- */
  .woocommerce-checkout .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
  }

  .woocommerce-checkout .e-checkout__container {
    flex-direction: column !important;
  }

  /* --- Place-order button full-width --- */
  .woocommerce-checkout #place_order {
    width: 100% !important;
  }
}