/* ==========================================================
   Ilizitech - Mon Compte Extras
   ========================================================== */

.ilizi-account-credit-banner {
  background: #1a2540;
  color: #fff;
  padding: 16px 24px;
  border-radius: 10px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 15px;
}
.ilizi-account-credit-banner strong {
  background: #38bdf8;
  color: #1a2540;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 16px;
}

.ilizi-account-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}
.ilizi-account-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  text-decoration: none !important;
  color: #1a2540 !important;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  transition: all .15s ease;
}
.ilizi-account-tile:hover {
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.18);
  transform: translateY(-2px);
}
.ilizi-tile-icon {
  font-size: 26px;
  line-height: 1;
}

/* Avoirs */
.ilizi-avoirs-table td,
.ilizi-avoirs-table th {
  padding: 10px 12px;
}

.ilizi-avoir-doc {
  max-width: 700px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 30px;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: #1e293b;
}
.ilizi-avoir-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #1a2540;
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.ilizi-avoir-title {
  text-align: right;
  font-weight: 700;
  color: #1a2540;
}
.ilizi-avoir-date {
  font-weight: 400;
  font-size: 13px;
  color: #64748b;
}
.ilizi-avoir-items {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.ilizi-avoir-items th {
  background: #1a2540;
  color: #fff;
  padding: 8px 12px;
  text-align: left;
}
.ilizi-avoir-items td {
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
}
.ilizi-avoir-print-btn {
  background: #38bdf8;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
}

/* Cagnotte d'avoir — case injectée sur panier / paiement (blocs WooCommerce) */
.ilizi-credit-box {
  background: #f8fafc;
  border: 1px solid #38bdf8;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 20px;
  font-size: 14px;
}
.ilizi-credit-box label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  color: #1a2540;
  margin: 0;
}
.ilizi-credit-box input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #38bdf8;
  flex-shrink: 0;
  margin: 0;
}
.ilizi-credit-box.is-loading {
  opacity: .6;
  pointer-events: none;
}

/* Bouton "Recommander" */
.ilizi-reorder-btn {
  background: #38bdf8 !important;
  color: #fff !important;
  border-radius: 6px;
}

/* ==========================================================
   Photos produits — taille d'affichage uniforme
   Les photos fournies n'ont pas toutes le même cadrage (certaines montrent
   le téléphone en gros plan, d'autres avec beaucoup de marge autour) : sans
   règle commune, certains téléphones paraissent plus grands ou plus petits
   que d'autres. On force donc chaque image à s'afficher dans un cadre carré
   identique, avec object-fit: contain (la photo entière reste visible, rien
   n'est recadré) et sans jamais l'étirer/l'aplatir (pas de "cover", pas de
   width/height forcés qui déforment le ratio).

   Le thème (Astra) utilise ses propres classes pour la grille boutique
   (confirmé par inspection : "astra-shop-thumbnail-wrap", "wp-post-image",
   "attachment-woocommerce_thumbnail") plutôt que les classes WooCommerce
   génériques — les deux jeux de sélecteurs sont donc ciblés ici, pour
   couvrir la grille boutique (Astra) ET la fiche produit / le panier
   (WooCommerce standard).
   ========================================================== */

/* Grille boutique / catégorie (thème Astra) : le conteneur doit avoir un
   ratio carré fixe, sinon l'image peut être bien proportionnée mais la
   case elle-même reste de taille variable. */
.astra-shop-thumbnail-wrap,
.astra-shop-thumbnail-wrap > a {
  display: block;
  aspect-ratio: 1 / 1;
  max-width: 260px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  position: relative;
  background: #ffffff;
}

.astra-shop-thumbnail-wrap img,
img.wp-post-image,
img.attachment-woocommerce_thumbnail,
img.attachment-woocommerce_single,
img.attachment-shop_single,
img.attachment-shop_thumbnail,
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img,
.wc-block-grid__product-image .attachment-woocommerce_thumbnail,
.wc-block-components-product-image img,
.wc-block-components-product-image a img,
.woocommerce div.product div.images img,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper img,
.wc-block-components-product-thumbnail img,
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img,
.woocommerce table.cart img,
.woocommerce-cart table.cart img,
.related.products img,
.upsells.products img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center;
  background: #ffffff;
}

/* Neutralise une règle du thème/plugin tiers qui limite la hauteur des
   vignettes ("max-height: 180px !important") et casse le carré uniforme.
   Le préfixe "html body" augmente la spécificité pour garantir que cette
   règle l'emporte, quel que soit l'ordre de chargement des feuilles de
   style. */
html body .woocommerce ul.products li.product img,
html body .astra-shop-thumbnail-wrap img,
html body img.wp-post-image,
html body img.attachment-woocommerce_thumbnail,
html body img.attachment-woocommerce_single,
html body img.attachment-shop_single,
html body img.attachment-shop_thumbnail,
html body .woocommerce div.product div.images img,
html body .woocommerce-product-gallery__image img,
html body .woocommerce-product-gallery__wrapper img {
  max-height: none !important;
  height: 100% !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
}

.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img,
.wc-block-components-product-thumbnail img,
.related.products img,
.upsells.products img {
  display: block;
  aspect-ratio: 1 / 1;
}

.woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.wc-block-cart-item__image,
.wc-block-components-order-summary-item__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

@media print {
  body * {
    visibility: hidden;
  }
  .ilizi-avoir-doc,
  .ilizi-avoir-doc * {
    visibility: visible;
  }
  .ilizi-avoir-doc {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
  }
  .ilizi-avoir-print-btn {
    display: none;
  }
}