/**
 * RecoKit Widget — CSS
 * Design neutre, adaptable à n'importe quel thème PrestaShop.
 * EPIC-PS-03 / US-PS-03.2
 *
 * Toutes les couleurs et espacements sont des CSS custom properties
 * overridables depuis le thème du marchand.
 */

:root {
  --recokit-primary:      #2d6cdf;
  --recokit-atc-text:     #fff;
  --recokit-atc-radius:   var(--recokit-radius);
  --recokit-atc-font-weight: 600;
  --recokit-text:         #1a1a2e;
  --recokit-text-light:   #6b7280;
  --recokit-bg:           #f9fafb;
  --recokit-border:       #e5e7eb;
  --recokit-radius:       8px;
  --recokit-gap:          16px;
  --recokit-font:         inherit;
}

/* ── Conteneur principal ── */
.recokit-widget {
  margin: 48px 0 24px;
  padding: 24px;
  background: var(--recokit-bg);
  border-radius: var(--recokit-radius);
  font-family: var(--recokit-font);
}

.recokit-widget__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--recokit-text);
  margin: 0 0 20px;
}

/* ── Grille de produits ── */
.recokit-widget__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: var(--recokit-gap);
}

/* The comparator is one wide table, not a product-card grid item. */
.recokit-comparator-widget__grid {
  display: block !important;
  width: 100%;
  max-width: 100%;
}

.recokit-bundle-widget__content {
  display: block !important;
  width: 100%;
  max-width: 100%;
}

/* Product visuals in the wide zones must remain comparable to recommendation cards. */
.recokit-comparator-table img,
.recokit-bundle-items img {
  width: 140px !important;
  height: 140px !important;
  max-width: 140px !important;
  object-fit: contain !important;
}

.recokit-comparator-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.recokit-comparator-table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.4;
}

.recokit-comparator-table th,
.recokit-comparator-table td {
  min-width: 170px;
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
  font-size: inherit;
  font-weight: 400;
}

.recokit-comparator-table .recokit-comparator-corner,
.recokit-comparator-table .recokit-comparator-feature {
  min-width: 190px;
  width: 190px;
}

.recokit-comparator-feature {
  color: #374151;
  font-weight: 600 !important;
  background: #f7f7f7;
}

.recokit-comparator-value--empty { color: #9ca3af; }

.recokit-comparator-product {
  height: 100%;
  padding-top: 0 !important;
  vertical-align: top !important;
}

.recokit-comparator-product__card {
  min-height: 315px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.recokit-comparator-product img,
.recokit-comparator-product__image-placeholder {
  display: block;
  width: 140px !important;
  height: 140px !important;
  margin: 0 auto 12px;
  object-fit: contain !important;
  border-radius: 4px;
}

.recokit-comparator-product__name {
  display: block;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.recokit-comparator-product__price {
  margin-top: 10px;
  font-size: 18px !important;
}

.recokit-comparator-product__action {
  margin-top: auto;
  padding-top: 12px;
}

.recokit-comparator-product__action .recokit-atc {
  width: 100%;
}

.recokit-comparator-product__eyebrow {
  min-height: 24px;
  margin-bottom: 8px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 700;
}

@media (min-width: 576px) {
  .recokit-widget__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .recokit-widget__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Skeleton Loader ── */
.recokit-widget__skeleton {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--recokit-gap);
}

@media (min-width: 576px) {
  .recokit-widget__skeleton { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
  .recokit-widget__skeleton { grid-template-columns: repeat(4, 1fr); }
}

.recokit-skeleton-card {
  background: #fff;
  border: 1px solid var(--recokit-border);
  border-radius: var(--recokit-radius);
  padding: 12px;
  overflow: hidden;
}

.recokit-skeleton-img,
.recokit-skeleton-text,
.recokit-skeleton-price {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: recokit-shimmer 1.4s infinite;
  border-radius: 4px;
}

.recokit-skeleton-img   { height: 140px; margin-bottom: 10px; }
.recokit-skeleton-text  { height: 14px;  margin-bottom: 6px; width: 90%; }
.recokit-skeleton-price { height: 14px;  width: 40%; }

@keyframes recokit-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Mode carrousel (paramètre central « Mise en page » du dashboard) ── */
.recokit-widget.recokit-carousel {
  position: relative;
}

.recokit-widget__grid.recokit-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: var(--recokit-gap);
  padding-bottom: 10px;
  scrollbar-width: none;
}

.recokit-widget__grid.recokit-carousel-track::-webkit-scrollbar {
  display: none;
}

.recokit-carousel .product-miniature {
  flex: 0 0 240px;
  min-width: 0;
  scroll-snap-align: start;
}

.recokit-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--recokit-border);
  background: #fff;
  color: var(--recokit-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recokit-carousel-btn:hover:not(:disabled) { background: #f5f5f5; }
.recokit-carousel-btn:disabled { opacity: 0.35; cursor: default; }

.recokit-carousel-prev { left: 8px; }
.recokit-carousel-next { right: 8px; }

@media (max-width: 768px) {
  .recokit-carousel .product-miniature { flex-basis: 170px; }
  /* Le swipe natif suffit sur mobile */
  .recokit-carousel-btn { display: none; }
}

/* ── Bouton « Ajouter au panier » direct (paramètre central du dashboard) ── */
.recokit-atc {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--recokit-primary);
  color: var(--recokit-atc-text);
  border: none;
  border-radius: var(--recokit-atc-radius);
  font-size: 13px;
  font-weight: var(--recokit-atc-font-weight);
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
}

.recokit-atc:hover:not(:disabled) { opacity: 0.9; }
.recokit-atc:disabled { opacity: 0.7; cursor: default; }
.recokit-atc.is-added { background: #2bbd63; }
.recokit-atc.is-error { background: #d9534f; }

/* Keep actions aligned when titles and explanations have different lengths.
   Classic positions .product-description for catalog tiles, so the whole card
   layout is explicitly reset inside RecoKit instead of relying on theme CSS. */
.recokit-widget__grid .product-miniature {
  display: flex !important;
  align-self: stretch;
}

.recokit-widget__grid .thumbnail-container {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
}

.recokit-widget__grid .product-description {
  position: static !important;
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100% !important;
  height: auto !important;
}

.recokit-widget__grid .recokit-atc {
  margin-top: auto !important;
}

/* ── Panier et modal d'ajout ── */
.recokit-cart-recommendations .recokit-widget {
  margin: 24px 0;
}

/* Carrousel des zones panier : cartes légèrement plus étroites que la
   fiche produit, encore plus dans la popup d'ajout (fenêtre modale
   étroite). */
.recokit-cart-recommendations .recokit-carousel .product-miniature {
  flex: 0 0 220px;
}

.recokit-cart-recommendations--modal .recokit-carousel .product-miniature {
  flex: 0 0 190px;
}

.recokit-cart-recommendations--modal .recokit-widget {
  margin: 16px 0 0;
  padding: 16px;
}

.recokit-cart-recommendations--modal .recokit-widget__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recokit-cart-recommendations--modal .product-miniature {
  min-width: 0;
}