/* =========================================================
   CCX OFFERS — PREMIUM / STABLE (FULL FILE)
   Cible le HTML actuel de ccx-offers-block.php :
   - .ccx-offers
   - .ccx-offers__head / __title / __updated
   - .ccx-offers__top + .ccx-offers__best (MEILLEURE OFFRE)
   - .ccx-offers__rows + .ccx-offerRow (logo | prix | livraison | bouton)
   ========================================================= */

.ccx-offers{
  --ccx-bg: rgba(255,255,255,.06);
  --ccx-bg2: rgba(0,0,0,.16);
  --ccx-bd: rgba(255,255,255,.10);
  --ccx-bd2: rgba(255,255,255,.16);
  --ccx-txt: rgba(255,255,255,.92);
  --ccx-sub: rgba(255,255,255,.70);

  --ccx-orange:#ffb14a;
  --ccx-green:#8fe35f;

  width:100%;
  box-sizing:border-box;
  color: var(--ccx-txt);
}

/* Harmonise le HTML de wc_price (Woo) */
.ccx-offers .woocommerce-Price-amount,
.ccx-offers .woocommerce-Price-currencySymbol,
.ccx-offers bdi{
  color: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
}
.ccx-offers bdi{
  font-variant-numeric: tabular-nums;
}

/* Sécurité : on masque d'anciens blocs si jamais ils traînent */
.ccx-offers__sort,
.ccx-offers__kpis{
  display:none !important;
}

/* ---------------- HEAD ---------------- */
.ccx-offers__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin: 0 0 12px 0;
}

.ccx-offers__headLeft{
  min-width:0;
}

.ccx-offers__title{
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
}

.ccx-offers__updated{
  margin-top: 6px;
  font-size: 12px;
  color: var(--ccx-sub);
}

/* ---------------- TOP (BEST ONLY) ---------------- */
.ccx-offers__top{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.ccx-offers__best{
  position: relative;
  background: var(--ccx-bg);
  border: 1px solid var(--ccx-bd);
  border-radius: 16px;
  padding: 12px;

  display:flex;
  flex-direction:column;
  gap:10px;

  min-width:0;
}

/* Badge MEILLEURE OFFRE : 1 ligne */
.ccx-offers__bestBadge{
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;

  background: rgba(255,177,74,.18);
  border: 1px solid rgba(255,177,74,.45);
  color: var(--ccx-orange);

  font-weight: 950;
  letter-spacing:.05em;
  font-size: 11px;

  padding: 6px 10px;
  border-radius: 999px;
}

.ccx-offers__bestMerchant{
  min-width:0;
}

/* Si ton badge marchand a une classe interne, on évite le débordement */
.ccx-offers__bestMerchant .ccx-merchant,
.ccx-offers__bestMerchant img{
  max-width:100%;
}

.ccx-offers__bestPrice{
  font-size: 22px;
  font-weight: 1000;
  line-height: 1.05;
}

.ccx-offers__bestMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  font-size: 12px;
  color: var(--ccx-sub);
  margin-top: -2px;
}

/* ---------------- BUTTONS ---------------- */
.ccx-offers .ccx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 10px 14px;
  border-radius: 12px;

  font-weight: 950;
  font-size: 13px;
  text-decoration:none !important;

  border: 1px solid rgba(0,0,0,.12);
  white-space: nowrap;
  box-sizing:border-box;

  user-select:none;
}

.ccx-offers .ccx-btn--cta{
  background: var(--ccx-green);
  color: rgba(0,0,0,.88);
}

.ccx-offers .ccx-btn--cta:hover{
  filter: brightness(1.02);
}

/*
  Les boutons des lignes d'offres ("Voir l’offre") reprennent désormais le vert principal
  pour assurer la cohérence avec le bouton de la meilleure offre.  L'ancien style
  grisé est remplacé par un fond vert et une police sombre.  L'ombre subtile
  reprend la couleur de l'accent vert.
*/
.ccx-offers .ccx-btn--row{
  background: var(--ccx-green);
  border: 1px solid rgba(0,0,0,.12);
  color: rgba(0,0,0,.88);
  box-shadow: 0 12px 26px rgba(0,255,106,.12);
}

.ccx-offers .ccx-btn--row:hover{
  filter: brightness(1.02);
}

/* ---------------- ROWS (comparateur 1 ligne) ---------------- */
.ccx-offers__rows{
  display:grid;
  gap: 10px;
}

.ccx-offerRow{
  background: rgba(0,0,0,.10);
  border: 1px solid var(--ccx-bd);
  border-radius: 16px;

  padding: 12px;

  display:grid;
  grid-template-columns: 220px 140px 1fr 150px; /* logo | prix | livraison | bouton */
  gap: 14px;
  align-items:center;

  min-width:0;
}

/* Marchand */
.ccx-offerRow__merchant{
  min-width:0;
  display:flex;
  align-items:center;
}
.ccx-offerRow__merchant .ccx-merchant,
.ccx-offerRow__merchant img{
  max-width: 100%;
}

/* Prix */
.ccx-offerRow__price{
  font-size: 14px;
  font-weight: 1000;
  white-space: nowrap;
  line-height: 1.1;
}

/* Livraison : on veut TOUT voir (pas de "Li...") */
.ccx-offerRow__ship{
  font-size: 12px;
  color: rgba(255,255,255,.72);

  white-space: normal;
  overflow: visible;
  text-overflow: clip;

  line-height: 1.2;
  min-width:0;
}

/* CTA */
.ccx-offerRow__cta{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.ccx-offerRow__cta .ccx-btn{
  width: 100%;
  max-width: 170px;
}

/* ---------------- Fineprint ---------------- */
.ccx-offers__fineprint{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .ccx-offers__head{
    flex-direction:column;
    align-items:flex-start;
  }

  .ccx-offerRow{
    grid-template-columns: 1fr;
    gap: 10px;
    align-items:stretch;
  }

  .ccx-offerRow__cta{
    justify-content:flex-start;
  }

  .ccx-offerRow__cta .ccx-btn{
    max-width: none;
  }
}


/* ===== Plus d'air / premium spacing ===== */
.ccx-offers__top{
  margin-bottom: 18px !important;
}

.ccx-offers__best{
  padding: 18px !important;
  gap: 12px !important;
  border-radius: 18px !important;
}

.ccx-offers__rows{
  gap: 14px !important;
}

.ccx-offerRow{
  padding: 16px !important;
  border-radius: 18px !important;
  gap: 16px !important;
}

/* Mobile: encore plus respirant */
@media (max-width: 980px){
  .ccx-offers__best{ padding: 16px !important; }
  .ccx-offerRow{ padding: 14px !important; }
}


/* =========================================================
   TABLET RANGE: 1240px -> 981px
   On force l'affichage "mobile-like" pour éviter le débordement
   ========================================================= */
@media (max-width: 1240px){
  /* rows passent en empilé */
  .ccx-offerRow{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* merchant */
  .ccx-offerRow__merchant{
    justify-content: flex-start;
  }

  /* price + ship en ligne */
  .ccx-offerRow__meta,
  .ccx-offerRow__price{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 10px;
    flex-wrap:wrap;
  }

  /* si tu utilises __price + __ship (nouveau HTML) */
  .ccx-offerRow__price{
    font-size: 15px;
    font-weight: 1000;
    white-space: nowrap;
  }
  .ccx-offerRow__ship{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* CTA pleine largeur */
  .ccx-offerRow__cta{
    justify-content: flex-start !important;
  }
  .ccx-offerRow__cta .ccx-btn{
    width: 100% !important;
    max-width: none !important;
  }
}


/* =========================================================
   Marketplace meta: état / vendeur
   ========================================================= */
.ccx-offers .ccx-condBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding: 5px 10px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 950;
  letter-spacing: .02em;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}

.ccx-offers .ccx-condBadge--new{
  background: rgba(143,227,95,.16);
  border-color: rgba(143,227,95,.45);
  color: var(--ccx-green);
}

.ccx-offers .ccx-condBadge--refurbished{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.88);
}

.ccx-offers .ccx-condBadge--used{
  background: rgba(255,177,74,.14);
  border-color: rgba(255,177,74,.38);
  color: var(--ccx-orange);
}

.ccx-offers .ccx-seller{
  font-size: 11px;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}
.ccx-offers .ccx-seller strong{
  color: rgba(255,255,255,.92);
  font-weight: 950;
}

.ccx-offerRow__extras{
  margin-top: 6px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}

/* =========================================================
   CCX Offers — prix (ancien / actuel) + livraison + total
   ========================================================= */

.ccx-priceOld{
  font-size:13px;
  color:rgba(255,255,255,.86);
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(255,255,255,.75);
  margin-right:10px;
  font-weight:700;
  white-space:nowrap;
}

.ccx-priceNow{
  font-weight:900;
  white-space:nowrap;
  color:var(--ccx-gold);
}

/* Best offer: conserve le gros prix, mais ancien plus petit */
.ccx-offers__bestPrice .ccx-priceOld{
  font-size:14px;
  opacity:.95;
}

.ccx-offers__bestMeta .ccx-total strong{
  color:#fff;
  font-weight:900;
}

.ccx-offerRow__shipLine{
  display:block;
  line-height:1.25;
}

.ccx-offerRow__shipLine--total strong{
  color:#fff;
  font-weight:900;
}


/* =========================================================
   CCX — Premium pricing (TOTAL en avant)
   ========================================================= */
.ccx-priceNow--total{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.2px;
}
.ccx-offers__bestMeta .ccx-subLine,
.ccx-offerRow__shipLine--sub{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: .85;
}
.ccx-dot{
  opacity: .5;
  font-weight: 700;
}






/* =========================================================
   CCX — Desktop: autres offres comme tablette (stack)
   ========================================================= */
@media (min-width: 1241px){

  /* on empile la ligne d'offre */
  .ccx-offerRow{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* meta (prix total + ligne livraison) bien lisible */
  .ccx-offerRow__meta{
    display:flex !important;
    align-items:baseline !important;
    justify-content:space-between !important;
    gap: 10px !important;
    flex-wrap:wrap !important;
  }

  /* total en gras / plus gros */
  .ccx-offerRow__total .ccx-priceNow--total{
    font-size: 15px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
  }

  /* CTA pleine largeur en bas */
  .ccx-offerRow__cta{
    justify-content: flex-start !important;
  }
  .ccx-offerRow__cta .ccx-btn{
    width: 100% !important;
    max-width: none !important;
  }
}


/* CCX — On ne montre pas les pastilles de condition (Occasion/Reconditionné)
   car c'est déjà géré par les onglets */
.ccx-offers .ccx-condBadge,
.ccx-offers .ccx-condBadge--used,
.ccx-offers .ccx-condBadge--refurbished,
.ccx-offers .ccx-condBadge--new{
  display:none !important;
}

/* ============================
   FIX: images visibles dans CCX Offers
   ============================ */
.ccx-offers img,
.ccx-offers .ccx-offer img,
.ccx-offers .ccx-offers img{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100%;
  height: auto;
}