/**
 * Amazon Ads — Frontend styles
 *
 * Overrides the default recommend.js widget styles to match
 * the Sabias Que / Understrap child theme design language.
 *
 * @package Amazon_Ads
 */

/* ── Design tokens ──
 * Defaults match Sabías Que. Each theme can override them on
 * .amazon-ads (or :root) without touching the plugin.
 */
.amazon-ads {
  --amazon-ads-font: "Rubik", sans-serif;
  --amazon-ads-ink: #002a32;
  --amazon-ads-ink-hover: #00545c;
  --amazon-ads-border: #e5efef;
  --amazon-ads-soft: #f5fbfb;
  --amazon-ads-strike: #8fa3aa;
  --amazon-ads-muted: #617379;
  --amazon-ads-sale: #cc0c39;
  --amazon-ads-sale-bg: rgba(204, 12, 57, 0.08);
  --amazon-ads-shadow: rgba(0, 42, 50, 0.06);
  --amazon-ads-shadow-hover: rgba(0, 42, 50, 0.12);
  --amazon-ads-radius: 14px;
  --amazon-ads-inline-margin: 0 2rem 1.5rem;
  --amazon-ads-inline-margin-sm: 0 1rem 1.5rem;
}

/* ── Base slot wrapper ── */
.amazon-ads {
  background: linear-gradient(180deg, #ffffff 0%, var(--amazon-ads-soft) 100%);
}

.amazon-ads__html {
  margin-bottom: 0;
}

/* ── Amazon widget card ── */
.amazon-ads--products {
  overflow: hidden;
}

.amazon-ads--products .amz-rec-container {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
}

.amazon-ads--products .amz-rec-title {
  color: var(--amazon-ads-ink) !important;
  font-family: var(--amazon-ads-font) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.amazon-ads--products .amz-rec-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.amazon-ads--products .amz-rec-card {
  background: #fff !important;
  border: 1px solid var(--amazon-ads-border) !important;
  border-radius: var(--amazon-ads-radius) !important;
  box-shadow: 0 4px 16px var(--amazon-ads-shadow) !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  position: relative !important;
}

.amazon-ads--products .amz-rec-card:hover {
  box-shadow: 0 8px 24px var(--amazon-ads-shadow-hover) !important;
  transform: translateY(-2px) !important;
}

.amazon-ads--products .amz-rec-img {
  background: var(--amazon-ads-soft) !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 100px !important;
  object-fit: contain !important;
  padding: 8px !important;
  width: 100px !important;
}

.amazon-ads--products .amz-rec-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  min-width: 0 !important;
}

.amazon-ads--products .amz-rec-name {
  color: var(--amazon-ads-ink) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 2 !important;
}

/* Discount badge */
.amazon-ads--products .amz-rec-discount {
  background: var(--amazon-ads-sale) !important;
  border-radius: 0 0 8px 0 !important;
  color: #fff !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  left: 0 !important;
  padding: 3px 8px !important;
  position: absolute !important;
  top: 0 !important;
  z-index: 1 !important;
}

/* ── Pricing: original crossed out, discount highlighted ── */
.amazon-ads--products .amz-rec-prices {
  align-items: baseline !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

.amazon-ads--products .amz-rec-original {
  color: var(--amazon-ads-strike) !important;
  font-size: 0.78rem !important;
  text-decoration: line-through !important;
  order: 1 !important;
}

.amazon-ads--products .amz-rec-price {
  color: var(--amazon-ads-sale) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  order: 0 !important;
}

/* When there IS a discount, make current price even more prominent */
.amazon-ads--products .amz-rec-prices:has(.amz-rec-original) .amz-rec-price {
  background: var(--amazon-ads-sale-bg) !important;
  border-radius: 6px !important;
  padding: 1px 6px !important;
}

.amazon-ads--products .amz-rec-rating {
  color: var(--amazon-ads-muted) !important;
  font-size: 0.75rem !important;
}

.amazon-ads--products .amz-rec-btn {
  background: var(--amazon-ads-ink) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  padding: 6px 10px !important;
  text-align: center !important;
  transition: background 0.2s ease !important;
}

.amazon-ads--products .amz-rec-btn:hover {
  background: var(--amazon-ads-ink-hover) !important;
}

/* ── After-content widget (.amazon-ads--inline, wide grid) ── */
.amazon-ads--inline.amazon-ads--products {
  background: linear-gradient(180deg, var(--amazon-ads-soft) 0%, #ffffff 100%);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--amazon-ads-shadow);
  margin: var(--amazon-ads-inline-margin);
}

.amazon-ads--inline.amazon-ads--products .amz-rec-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
}

.amazon-ads--inline.amazon-ads--products .amz-rec-card {
  flex-direction: column !important;
}

.amazon-ads--inline.amazon-ads--products .amz-rec-img {
  height: 160px !important;
  min-height: 160px !important;
  width: 100% !important;
}

/* ── Home: una sola fila horizontal ── */
.amazon-ads--home.amazon-ads--products .amz-rec-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

/* ── Responsive: Tablet ── */
@media (max-width: 991.98px) {
  .amazon-ads--products .amz-rec-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }

  .amazon-ads--products .amz-rec-card {
    flex-direction: column !important;
  }

  .amazon-ads--products .amz-rec-img {
    height: 140px !important;
    min-height: 140px !important;
    width: 100% !important;
  }
}

/* ── Responsive: Mobile ── */
@media (max-width: 767.98px) {
  .amazon-ads--products .amz-rec-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .amazon-ads--products .amz-rec-img {
    height: 120px !important;
    min-height: 120px !important;
  }

  .amazon-ads--products .amz-rec-name {
    font-size: 0.78rem !important;
  }

  .amazon-ads--products .amz-rec-price {
    font-size: 0.88rem !important;
  }

  .amazon-ads--products .amz-rec-btn {
    font-size: 0.72rem !important;
    padding: 5px 8px !important;
  }

  .amazon-ads--inline.amazon-ads--products {
    margin: var(--amazon-ads-inline-margin-sm);
  }
}

/* ── Responsive: Small mobile ── */
@media (max-width: 399.98px) {
  .amazon-ads--products .amz-rec-grid {
    grid-template-columns: 1fr !important;
  }

  .amazon-ads--products .amz-rec-card {
    flex-direction: row !important;
  }

  .amazon-ads--products .amz-rec-img {
    height: auto !important;
    min-height: 90px !important;
    width: 90px !important;
  }
}

/* ── Home en celular: tira que se desliza de lado ── */
@media (max-width: 767.98px) {
  .amazon-ads--home.amazon-ads--products .amz-rec-grid {
    grid-auto-columns: minmax(150px, 46%) !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .amazon-ads--home.amazon-ads--products .amz-rec-card {
    flex-direction: column !important;
    scroll-snap-align: start;
  }

  .amazon-ads--home.amazon-ads--products .amz-rec-img {
    height: 120px !important;
    min-height: 120px !important;
    width: 100% !important;
  }
}