/* =========================================
   MINI CART STYLES (Morphose Grid)
   ========================================= */

/* ── Nuclear override: animation beats inline !important (CSS spec) ── */
@keyframes iw-kill-max-height {
  from,
  to {
    max-height: none;
  }
}

/* --- 1. La Grille Produit --- */

body .morphose-mini-cart-grid {
  display: grid !important;
  grid-template-columns: minmax(140px, 30%) 1fr 20px !important;
  gap: 15px !important;
  align-items: start !important;
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--iw-border) !important;
}

/* Enlever les margin/padding par défaut */
.woocommerce-mini-cart.cart_list.product_list_widget {
  padding-left: 0 !important;
  list-style: none !important;
}

.woocommerce-mini-cart-item {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* --- Header Logo (panier plein) --- */
.morphose-mini-cart-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 60px;
}

.morphose-mini-cart-header__logo {
  display: block;
  max-width: 120px !important;
  width: 100%;
  height: auto;
}

.morphose-mini-cart-header__site-name {
  font-size: 20px;
  font-weight: 700;
}

/* --- 2. Colonne Image --- */
body .morphose-col-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 4px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  max-width: none !important;
}

/* --- 3. Colonne Détails --- */
body .morphose-col-details {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}

.morphose-product-name a {
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
  font-size: 14px;
  color: inherit;
  display: block;
  transition: none !important;
}

.morphose-product-name a:hover {
  color: inherit !important;
  text-decoration: none !important;
}

.morphose-product-meta {
  font-size: 12px;
  color: var(--iw-gray);
  margin: 0;
}

.morphose-product-meta:empty {
  display: none;
  margin: 0;
  padding: 0;
}

.morphose-product-excerpt {
  font-size: 12px;
  color: var(--iw-muted);
  line-height: 1.5;
  margin: 0;
}

.morphose-product-excerpt p {
  margin: 0;
}

.morphose-product-price {
  font-weight: 500;
  font-size: 12px;
  color: var(--iw-muted);
  margin: 0;
}

.morphose-product-qty {
  margin: 0;
}

/* --- 4. Colonne Actions (Croix) --- */
.morphose-col-actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

body .morphose-col-actions .remove_from_cart_button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  color: var(--iw-gray) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  border: none !important;
  transition: none !important;
  margin: 0 !important;
  float: none !important;
}

body .morphose-col-actions .remove_from_cart_button:hover {
  background-color: transparent !important;
  color: var(--iw-black) !important;
}

/* --- 5. Support Responsive --- */
@media (max-width: 480px) {
  .morphose-mini-cart-grid {
    grid-template-columns: minmax(90px, 30%) 1fr 24px;
    gap: 10px;
  }

  /* ── Kill Elementor inline max-height clamp (250px) on small screens ── */
  .elementor-widget-woocommerce-menu-cart
    .woocommerce-mini-cart.cart_list.product_list_widget[class] {
    max-height: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
}

/* =========================================
   MINI CART EMPTY STYLES (IronClub Custom)
   ========================================= */

/* Container principal du panier vide */
.morphose-mini-cart-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 24px !important;
  height: 100% !important;
  min-height: 450px !important;
  gap: 20px !important;
  /* Espacement réduit entre les éléments du groupe */
  max-width: 500px;
  margin: 0 auto;
}

/* --- 1. Logo (Reste en haut) --- */
.morphose-mini-cart-empty__logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  /* Pas de auto-margin ici pour rester en haut */
}

.morphose-mini-cart-empty__logo-img {
  display: block;
  max-width: 120px !important;
  width: 100%;
  height: auto;
}

.morphose-mini-cart-empty__icon {
  margin-top: auto !important;
  /* Pousse le bloc vers le centre */
  width: 100%;
  display: flex;
  justify-content: center;
}

.morphose-mini-cart-empty__icon img {
  display: block;
  max-width: 50px;
  /* Réduit de 80px */
  height: auto;
}

.morphose-mini-cart-empty__site-name {
  font-size: 24px;
  font-weight: 700;
  color: inherit;
}

/* --- 2. Message --- */
.morphose-mini-cart-empty__message {
  font-size: 16px;
  /* Réduit de 20px */
  font-family: var(--iw-font);
  font-weight: var(--e-global-typography-police_principale-font-weight, 500);
  color: var(--iw-black);
  line-height: 1.6;
  max-width: 100%;
  text-align: center;
}

/* --- 3. Bouton CTA --- */
.morphose-mini-cart-empty__cta {
  margin-bottom: auto !important;
  /* Équilibre le centrage vers le haut */
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 0;
}

.morphose-mini-cart-empty__button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  border-radius: var(--e-global-border-radius-button, 4px);
  transition: background-color 0.2s ease;
  cursor: pointer;
  width: 100%;
  gap: 8px;

  /* Laisse Elementor global gérer les couleurs via variables */
  background-color: var(--e-global-color-primary, #000) !important;
  color: var(--e-global-color-secondary, #fff) !important;
  border: 1px solid transparent;
}

.morphose-mini-cart-empty__button:hover {
  opacity: 0.85;
}

/* =========================================
   POPUP MINI-CART (Elementor Widget)
   ========================================= */

/* Overlay du popup (fond assombri) */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(2px) !important;
}

/* Panneau principal du panier (slide-in depuis la droite) */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
  background: var(--iw-white) !important;
  max-width: 380px !important;
  width: 100% !important;
  height: 100vh !important;
  height: calc(100dvh - var(--admin-bar-height, 0px)) !important;
  margin-left: auto !important;
  border-radius: 24px 0 0 24px !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18) !important;
  padding: 24px 24px 0 !important;
  /* Padding bas géré par le footer pour le scroll */
  font-family: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: absolute !important;
  top: var(--admin-bar-height, 0px) !important;
  right: 0 !important;
}

/* Container intermédiaire WooCommerce (indispensable) */
.elementor-widget-woocommerce-menu-cart .widget_shopping_cart_content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important; /* CRUCIAL: permet au flex child de shrink — sans ça, la liste crop */
  overflow: hidden !important;
}

/* Calcul dynamique pour la barre d'administration WordPress */
:root {
  --admin-bar-height: 0px;
}

body.admin-bar {
  --admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --admin-bar-height: 46px;
  }
}

/* Header (Fixe en haut) */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__header {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--iw-black) !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}

/* Produits listés (Prend tout l'espace restant et scrolle) */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__products,
.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart.cart_list[class] {
  flex: 1 1 auto !important;
  min-height: 0 !important; /* flex-shrink: sans ça, overflow crop */
  margin: 0 !important;
  padding: 0 5px 0 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: none !important;
  /* Supprime la limite fixe Elementor (250px inline) */
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product {
  display: grid !important;
  grid-template-columns: 64px 1fr auto !important;
  column-gap: 12px !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image img {
  width: 64px !important;
  height: auto !important;
  border-radius: 12px !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--iw-black) !important;
  margin-bottom: 2px !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price {
  font-size: 12px !important;
  color: var(--iw-muted) !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove {
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

/* Message panier vide (Elementor default) */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__empty-message {
  font-size: 13px !important;
  color: var(--iw-muted) !important;
  padding: 20px 0 !important;
  text-align: center !important;
}

/* Sous-total (Fixe en bas de liste) */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 24px 14px !important;
  /* Ajout horizontal padding */
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 0 !important;
  background: var(--iw-white) !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal span:first-child {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--iw-muted) !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal span:last-child {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--iw-black) !important;
}

/* =========================================
   MINI CART FOOTER BUTTONS
   ========================================= */

/* Container des boutons footer */
.elementor-menu-cart__footer-buttons,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 20px 0px 20px !important;
  background: var(--iw-white) !important;
}

/* Style commun des boutons footer */
.elementor-menu-cart__footer-buttons .elementor-button {
  border-radius: 12px !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Bouton "Voir le panier" - Fond blanc, bordure noire, texte noir */
.elementor-button--view-cart {
  background: var(--iw-white) !important;
  background-color: var(--iw-white) !important;
  color: var(--iw-black) !important;
  border: 1px solid var(--iw-black) !important;
}

.elementor-button--view-cart:hover {
  background: var(--iw-gray-100) !important;
  background-color: var(--iw-gray-100) !important;
  color: var(--iw-black) !important;
  border-color: var(--iw-black) !important;
}

/* Bouton "Commander" - Fond noir, pas de bordure, texte blanc */
.elementor-button--checkout {
  background: var(--iw-black) !important;
  background-color: var(--iw-black) !important;
  color: var(--iw-white) !important;
  border: 1px solid var(--iw-black) !important;
}

.elementor-button--checkout:hover {
  background: var(--iw-gray) !important;
  background-color: var(--iw-gray) !important;
  color: var(--iw-white) !important;
  border-color: var(--iw-gray) !important;
}

/* =========================================
   SCROLL MINI-CART (Custom morphose list)
   ========================================= */

/* Scroll si trop de produits dans notre liste custom */
.woocommerce-mini-cart.cart_list.product_list_widget[class] {
  max-height: none !important;
  /* Kill Elementor 250px clamp — [class] boost specificity */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin-bottom: 0 !important;
  padding-right: 5px !important;
  animation: iw-kill-max-height 0s both !important;
}

/* Scrollbar personnalisée pour webkit (Chrome, Safari) */
.woocommerce-mini-cart.cart_list.product_list_widget::-webkit-scrollbar {
  width: 6px;
}

.woocommerce-mini-cart.cart_list.product_list_widget::-webkit-scrollbar-track {
  background: var(--iw-gray-100);
  border-radius: 3px;
}

.woocommerce-mini-cart.cart_list.product_list_widget::-webkit-scrollbar-thumb {
  background: var(--iw-gray);
  border-radius: 3px;
}

.woocommerce-mini-cart.cart_list.product_list_widget::-webkit-scrollbar-thumb:hover {
  background: var(--iw-muted);
}

/* =========================================
   RESPONSIVE — MINI CART MOBILE (≤ 767px)
   Fix: bottom-sheet ancré, full viewport, iOS safe-area
   ========================================= */

@media (max-width: 767px) {
  /* ── A. Overlay : neutraliser backdrop-filter (containing-block fix) ── */
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    /* Pas de transform/filter/perspective ici non plus */
  }

  /* ── B. Panel plein écran (inset-driven, pas de height explicite) ── */
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
    position: fixed !important;
    top: var(--admin-bar-height, 0px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; /* inset top+bottom suffit */
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important; /* seule la liste scrolle */
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* ── C. Container intermédiaire WooCommerce : flex colonne robuste ── */
  .elementor-widget-woocommerce-menu-cart .widget_shopping_cart_content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important; /* override desktop height:100% */
    min-height: 0 !important; /* crucial pour flex-shrink iOS */
    overflow: hidden !important;
  }

  /* ── D. Wrapper __products (si présent) : transparent pour le flex ── */
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__products {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important; /* délègue le scroll à la UL */
  }

  /* ── E. Liste produits : zone scrollable ── */
  .elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart.cart_list[class],
  .elementor-widget-woocommerce-menu-cart
    .woocommerce-mini-cart.cart_list.product_list_widget[class] {
    flex: 1 1 auto !important;
    min-height: 0 !important; /* flex-shrink iOS/Chrome */
    max-height: none !important; /* kill Elementor 250px inline clamp */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    animation: iw-kill-max-height 0s both !important;
  }

  /* ── F. Subtotal : fixe, ne scrolle pas ── */
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal {
    flex: 0 0 auto !important;
  }

  /* ── G. Footer boutons : toujours visible en bas ── */
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons {
    flex: 0 0 auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    margin: 0 !important;
  }

  .elementor-menu-cart__footer-buttons .elementor-button,
  .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button {
    font-size: 15px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
  }

  /* ── H. Panier vide : adapté mobile ── */
  .morphose-mini-cart-empty {
    padding: 30px 15px;
    min-height: 250px;
    gap: 32px;
    max-width: 480px;
  }

  .morphose-mini-cart-empty__logo-img {
    max-width: 120px;
  }

  .morphose-mini-cart-empty__message {
    font-size: 14px;
  }

  .morphose-mini-cart-empty__button {
    padding: 12px 24px !important;
    font-size: 13px !important;
    min-width: 150px;
  }
}

.morphose-mini-cart-empty__button .elementor-button-text {
  color: inherit;
}

/* =========================================
     INLINE QTY PILL (reused from loop shortcode)
     ========================================= */

/* Formulaire compact dans la carte – UNIQUEMENT dans le widget shortcode */
.ic_loop_add_to_cart .ic-loop-cart {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  background: var(--iw-white) !important;
}

/* Pill quantité */
.ic_loop_add_to_cart .ic-qty-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  background: var(--iw-white) !important;
}

/* Boutons - et + TOUJOURS visibles, petits */
.ic_loop_add_to_cart .ic-qty-minus,
.ic_loop_add_to_cart .ic-qty-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: var(--iw-black) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* Hover léger */
.ic_loop_add_to_cart .ic-qty-minus:hover,
.ic_loop_add_to_cart .ic-qty-plus:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* Champ quantité au centre, très petit */
.ic_loop_add_to_cart .ic-qty-wrap .qty {
  width: 20px !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  background: transparent !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: var(--iw-black) !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

.ic_loop_add_to_cart .ic-qty-wrap .qty::-webkit-inner-spin-button,
.ic_loop_add_to_cart .ic-qty-wrap .qty::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* =========================================
   FIX : EFFET NOIR LORS DE LA SUPPRESSION
   ========================================= */

/* Empêche le contenu de devenir transparent et de laisser voir l'overlay sombre du drawer */
.elementor-widget-woocommerce-menu-cart .widget_shopping_cart_content.processing {
  opacity: 1 !important;
}

/* Force l'overlay de chargement (WooCommerce blockUI) à être blanc au lieu de noir */
.elementor-widget-woocommerce-menu-cart .blockUI.blockOverlay {
  background: var(--iw-white) !important;
  opacity: 0.7 !important;
  z-index: 9999 !important;
  border-radius: 20px !important;
}

/* Style du spinner de chargement */
.woocommerce .blockUI.blockOverlay::before {
  color: var(--iw-black) !important;
}

/* =========================================
   CHECKOUT BUTTONS DISABLED STATE
   ========================================= */

/* Bouton checkout désactivé (utilisateur non connecté) */
.elementor-button--checkout.morphose-checkout-disabled,
.checkout-button.button.morphose-checkout-disabled {
  background: var(--iw-border) !important;
  background-color: var(--iw-border) !important;
  color: var(--iw-gray) !important;
  border-color: var(--iw-border) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
  transition: none !important;
}

/* =========================================
   ULTRAROBUTSE FIX : NUCLEAR RESET MAX-HEIGHT
   On cible toutes les combinaisons Elementor / WooCommerce possibles
   ========================================= */

/* 1. On surcharge avec une spécificité augmentée [class] */
.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart.cart_list.product_list_widget[class],
.elementor-menu-cart__main .woocommerce-mini-cart.cart_list[class],
.widget_shopping_cart_content .woocommerce-mini-cart.cart_list {
  max-height: none !important;
  max-height: initial !important;
  max-height: 100vh !important;
  flex: 1 1 auto !important;
  height: auto !important; /* Force l'expansion flex */
  min-height: 0 !important; /* Crucial pour le scroll iOS */
  display: flex !important;
  flex-direction: column !important;
}

/* 2. On s'assure que le wrapper Elementor ne bride rien non plus */
.elementor-menu-cart__products {
  max-height: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}