/* ==========================================================================
   Affiliate Box — Frontend Styles
   Versão: 1.0.0
   ========================================================================== */

/* ─── CSS Custom Properties (variáveis por card via inline style) ─────────── */
:root {
  --ab-border-color: #e53e3e;
  --ab-border-width: 4px;
  --ab-border-radius: 10px;
  --ab-card-bg: #ffffff;
  --ab-card-shadow: 0 2px 12px rgba(0,0,0,.08);
  --ab-card-padding: 18px 20px 18px 20px;
  --ab-btn-color: #e53e3e;
  --ab-btn-text: #ffffff;
  --ab-btn-radius: 6px;
  --ab-position-bg: #1a202c;
  --ab-position-text: #ffffff;
  --ab-position-size: 36px;
}

/* ─── Texto visível apenas para leitores de tela (screen-reader only) ─────── */
.ab-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Reset base ──────────────────────────────────────────────────────────── */
.ab-product-card *,
.ab-product-card *::before,
.ab-product-card *::after,
.ab-product-list *,
.ab-product-list *::before,
.ab-product-list *::after {
  box-sizing: border-box;
}

/* =========================================================================
   PRODUCT CARD — Bloco individual
   ========================================================================= */

.ab-product-card {
  position: relative;
  color-scheme: light;           /* Força modo claro: impede o browser adaptar cores ao dark mode do sistema */
  background: var(--ab-card-bg);
  background-color: #ffffff !important; /* Garante fundo branco mesmo com dark mode no celular */
  color: #1a202c !important;
  border-radius: var(--ab-border-radius);
  box-shadow: var(--ab-card-shadow);
  padding: var(--ab-card-padding);
  margin-bottom: 24px;
  overflow: hidden;
  font-family: inherit;
}

/* Borda esquerda colorida */
.ab-product-card--border-left {
  border-left: var(--ab-border-width) solid var(--ab-border-color);
}

/* Borda completa colorida */
.ab-product-card--border-full {
  border: var(--ab-border-width) solid var(--ab-border-color);
}

/* ─── Badge ────────────────────────────────────────────────────────────── */
.ab-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
}

.ab-badge__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ab-badge__icon svg {
  display: block;
}

/* ─── Grid principal do card ─────────────────────────────────────────────── */
.ab-product-card__grid {
  display: grid;
  grid-template-columns: 120px 1fr minmax(160px, 200px);
  gap: 16px;
  align-items: start;
}

/* ─── Imagem ─────────────────────────────────────────────────────────────── */
.ab-product-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ab-product-card__image img {
  max-width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}

/* ─── Body (título + descrição) ──────────────────────────────────────────── */
.ab-product-card__body {
  min-width: 0;
}

.ab-product-card__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #1a202c !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

.ab-product-card__description {
  font-size: 13px;
  color: #4a5568;
  line-height: 1.5;
}

.ab-product-card__description p {
  margin: 4px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* ─── Ícone de check ─────────────────────────────────────────────────────── */
.ab-check-icon {
  color: #48bb78;
  font-weight: 700;
  flex-shrink: 0;
}

/* ─── Botões ─────────────────────────────────────────────────────────────── */
.ab-product-card__buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ab-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  background-color: var(--ab-btn-color); /* sem !important — inline style do PHP prevalece */
  color: var(--ab-btn-text) !important;
  border-radius: var(--ab-btn-radius) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  border: none !important;
  cursor: pointer !important;
  transition: filter .15s ease, transform .1s ease !important;
  white-space: normal !important;   /* permite quebra de linha em textos longos */
  text-align: center !important;
  word-break: break-word !important;
  min-height: 44px !important;
}

.ab-btn:hover {
  filter: brightness(.9) !important;
  transform: translateY(-1px) !important;
  color: var(--ab-btn-text) !important;
  text-decoration: none !important;
}

.ab-btn:active {
  transform: translateY(0) !important;
  filter: brightness(.85) !important;
}

.ab-btn:focus-visible {
  outline: 3px solid #4299e1 !important;
  outline-offset: 2px !important;
  filter: brightness(.95) !important;
}

.ab-btn__logo {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.ab-btn__store-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  /* height definido pelo inline style PHP — não sobrescrever aqui */
}

.ab-btn__store-icon svg {
  display: block !important;
  flex-shrink: 0 !important;
  height: 100% !important;  /* herda o height do span pai (inline style PHP) */
  width: auto !important;   /* proporcional ao viewBox de cada logo */
}

.ab-btn__label {
  letter-spacing: .01em;
}

/* Cores padrão por loja — passam WCAG AA 4.5:1 — inline style do PHP sempre tem prioridade */
.ab-btn--amazon       { background-color: #b45309; color: #fff !important; } /* contraste 4.95:1 */
.ab-btn--shopee       { background-color: #c0392b; color: #fff !important; } /* contraste 5.44:1 */
.ab-btn--mercadolivre { background-color: #FFE600; color: #333 !important; } /* contraste 10:1  */

/* Mercado Livre: mantém texto escuro no hover (evita texto branco sobre amarelo) */
.ab-btn--mercadolivre:hover,
.ab-btn--mercadolivre:active,
.ab-btn--mercadolivre:focus-visible { color: #333 !important; }

/* ── Links clicáveis (imagem e título) ────────────────────────────────────── */
.ab-product-link {
  display: block;
}

.ab-product-link img {
  transition: opacity .15s ease, transform .15s ease;
}

.ab-product-link:hover img {
  opacity: .85;
  transform: scale(1.03);
}

.ab-product-title-link {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
  transition: border-color .15s ease, color .15s ease;
}

.ab-product-title-link:hover {
  color: inherit !important;
  border-bottom-color: rgba(0,0,0,.4);
  text-decoration: none !important;
}

.ab-product-title-link:focus-visible {
  outline: 3px solid #4299e1;
  outline-offset: 2px;
  border-radius: 2px;
  border-bottom-color: transparent;
}

.ab-product-link:focus-visible {
  outline: 3px solid #4299e1;
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================================
   PRODUCT LIST — Lista numerada
   ========================================================================= */

.ab-product-list {
  margin-bottom: 32px;
}

.ab-product-list__title {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 20px 0 !important;
  color: #1a202c !important;
}

/* ─── Item da lista ──────────────────────────────────────────────────────── */
.ab-product-list__item {
  position: relative;
  color-scheme: light;           /* Força modo claro no browser */
  background: var(--ab-card-bg);
  background-color: #ffffff !important; /* Garante fundo branco mesmo com dark mode no celular */
  color: #1a202c !important;
  border-radius: var(--ab-border-radius);
  box-shadow: var(--ab-card-shadow);
  margin-bottom: 16px;
  overflow: hidden;
  padding: 16px 18px;
}

.ab-product-list__item--border-left {
  border-left: var(--ab-border-width) solid var(--ab-border-color);
}

.ab-product-list__item--border-full {
  border: var(--ab-border-width) solid var(--ab-border-color);
}

/* Badge posicionado no topo do item */
.ab-product-list__item > .ab-badge {
  margin-bottom: 10px;
}

/* ─── Layout interno do item ─────────────────────────────────────────────── */
.ab-product-list__item-inner {
  display: grid;
  grid-template-columns: var(--ab-position-size) 100px 1fr minmax(160px, 200px);
  gap: 14px;
  align-items: center;
}

/* ─── Número de posição ──────────────────────────────────────────────────── */
.ab-position {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ab-position-size);
  height: var(--ab-position-size);
  border-radius: 50%;
  background-color: var(--ab-position-bg);
  color: var(--ab-position-text);
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}

/* ─── Imagem do item da lista ────────────────────────────────────────────── */
.ab-product-list__image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ab-product-list__image img {
  max-width: 100%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

/* ─── Body do item da lista ──────────────────────────────────────────────── */
.ab-product-list__body {
  min-width: 0;
}

.ab-product-list__body .ab-product-list__title {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #1a202c !important;
  margin: 0 0 8px 0 !important;
}

.ab-product-list__description {
  font-size: 12.5px;
  color: #4a5568;
  line-height: 1.45;
}

.ab-product-list__description p {
  margin: 3px 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

/* ─── Botões do item da lista ────────────────────────────────────────────── */
.ab-product-list__buttons {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ab-product-list__buttons .ab-btn {
  font-size: 12px !important;
  padding: 9px 10px !important;
  min-height: 38px !important;
}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */

/* Tablet */
@media (max-width: 768px) {

  .ab-product-card__grid {
    grid-template-columns: 90px 1fr;
    grid-template-rows: auto auto;
  }

  .ab-product-card__buttons {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ab-product-card__buttons .ab-btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 120px !important;
  }

  .ab-product-list__item-inner {
    grid-template-columns: var(--ab-position-size) 80px 1fr;
    grid-template-rows: auto auto;
  }

  .ab-product-list__buttons {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 7px;
  }

  .ab-product-list__buttons .ab-btn {
    flex: 1 1 calc(33% - 5px) !important;
    min-width: 140px !important;
  }
}

/* Mobile */
@media (max-width: 480px) {

  .ab-product-card {
    padding: 14px;
  }

  .ab-product-card__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .ab-product-card__image img {
    max-height: 180px;
    max-width: 180px;
  }

  .ab-product-card__description p {
    justify-content: flex-start;
    text-align: left;
  }

  .ab-product-card__buttons .ab-btn {
    flex: 1 1 100% !important;
  }

  .ab-product-list__item {
    padding: 12px;
  }

  .ab-product-list__item-inner {
    grid-template-columns: var(--ab-position-size) 56px 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  .ab-product-list__image img {
    max-height: 56px;
    max-width: 56px;
  }

  .ab-product-list__buttons {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ab-product-list__buttons .ab-btn {
    flex: none !important;
    width: 100% !important;
  }
}


/* =========================================================================
   ALINHAMENTOS GUTENBERG
   ========================================================================= */
.ab-product-card.alignwide,
.ab-product-list.alignwide {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.ab-product-card.alignfull,
.ab-product-list.alignfull {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}