/* AAA Simple Coupons AutoPoster - CSS Corrigido para Safari Mobile */

/* ============================================
   GRID PRINCIPAL - Corrigido: gap fallback
   ============================================ */
.scap-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr; /* fallback mobile */
  gap: 16px;
  margin: -8px; /* fallback para navegadores sem gap */
}

.scap-grid > * {
  margin: 8px; /* fallback para navegadores sem gap */
}

@supports (gap: 16px) {
  .scap-grid {
    margin: 0;
  }
  .scap-grid > * {
    margin: 0;
  }
}

/* Breakpoints responsivos para Grid */
@media (min-width: 580px) {
  .scap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .scap-grid {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  }
}

/* ============================================
   CARD BASE - Corrigido: overflow
   ============================================ */
.scap-card {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: hidden; /* ADICIONADO: previne vazamento de conteúdo */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* ============================================
   BADGE
   ============================================ */
.scap-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #111827;
  color: #fff;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
  z-index: 2;
}

/* ============================================
   THUMBNAIL - Corrigido: aspect-ratio fallback
   ============================================ */
.scap-thumb {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* fallback: 16:9 = 56.25% */
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden !important;
  background: #f6f7f9;
  cursor: pointer;
  border: none;
}

/* Usar aspect-ratio nativo quando suportado */
@supports (aspect-ratio: 16/9) {
  .scap-thumb {
    aspect-ratio: 16/9;
    padding-bottom: 0;
  }
}

/* ============================================
   IMAGENS - Corrigido: position com top/left/right/bottom
   ============================================ */
.scap-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-position: center center;
  -o-object-position: center center;
}

.scap-fit-contain > .scap-img {
  object-fit: contain !important;
  -o-object-fit: contain !important;
  background: #fff;
}

.scap-fit-cover > .scap-img {
  object-fit: cover !important;
  -o-object-fit: cover !important;
}

/* Placeholder para imagens sem src */
.scap-img--ph {
  background: #f6f7f9;
}

/* ============================================
   CONTEÚDO
   ============================================ */
.scap-title {
  font-size: 18px;
  line-height: 1.3;
  margin: 6px 0 4px;
  color: #111827;
  font-weight: 600;
}

.scap-excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
  margin: 0 0 8px;
}

/* ============================================
   PRICES - Corrigido: gap fallback + flexbox
   ============================================ */
.scap-prices {
  display: -webkit-flex;
  display: flex;
  gap: 10px;
  -webkit-align-items: baseline;
  align-items: baseline;
  margin: 10px 0;
}

.scap-prices > * {
  margin-right: 10px; /* fallback */
}

.scap-prices > *:last-child {
  margin-right: 0;
}

@supports (gap: 10px) {
  .scap-prices > * {
    margin-right: 0;
  }
}

.scap-old {
  text-decoration: line-through;
  color: #9ca3af;
  font-size: 14px;
}

.scap-new {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.scap-off {
  background: #fef3c7;
  color: #92400e;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* ============================================
   ACTIONS - Corrigido: gap fallback + flexbox
   ============================================ */
.scap-actions {
  display: -webkit-flex;
  display: flex;
  gap: 8px;
  margin-top: 8px;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.scap-actions > * {
  margin-right: 8px; /* fallback */
  margin-bottom: 8px; /* fallback para wrap */
}

.scap-actions > *:last-child {
  margin-right: 0;
}

@supports (gap: 8px) {
  .scap-actions > * {
    margin-right: 0;
    margin-bottom: 0;
  }
}

/* ============================================
   BUTTONS - Corrigido: touch targets
   ============================================ */
.scap-btn {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  background: #111827;
  color: #fff;
  cursor: pointer;
  border: none;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition: background-color 0.2s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.scap-btn:hover {
  background: #1f2937;
  text-decoration: none;
}

.scap-btn:active {
  background: #374151;
  transform: scale(0.98);
}

/* Touch targets maiores no mobile */
@media (max-width: 768px) {
  .scap-btn {
    padding: 14px 16px;
    min-height: 44px; /* Apple HIG */
    font-size: 16px; /* Previne zoom no Safari iOS */
  }
}

/* ============================================
   CODE
   ============================================ */
.scap-code {
  font-family: 'Courier New', Courier, monospace;
  background: #f3f4f6;
  color: #111827;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.is-hidden {
  display: none !important;
}

/* ============================================
   META - Corrigido: gap fallback + flexbox
   ============================================ */
.scap-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
  display: -webkit-flex;
  display: flex;
  gap: 12px;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.scap-meta > * {
  margin-right: 12px; /* fallback */
}

.scap-meta > *:last-child {
  margin-right: 0;
}

@supports (gap: 12px) {
  .scap-meta > * {
    margin-right: 0;
  }
}

/* ============================================
   STYLE: LIST - Corrigido: responsividade
   ============================================ */
.scap-style-list.scap-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.scap-style-list .scap-card {
  padding: 12px !important;
  border-radius: 12px !important;
}

/* Thumbnail no modo list - Corrigido: aspect-ratio fallback */
.scap-style-list .scap-thumb {
  width: var(--scap-list-thumb, 120px) !important;
  height: var(--scap-list-thumb, 120px) !important;
  min-width: var(--scap-list-thumb, 120px) !important;
  padding-bottom: 0 !important; /* remove fallback 16:9 */
  aspect-ratio: 1 / 1 !important; /* força quadrado */
  margin: 0 !important;
  border-radius: 10px !important;
}

/* Fallback para aspect-ratio 1:1 */
@supports not (aspect-ratio: 1 / 1) {
  .scap-style-list .scap-thumb {
    position: relative;
    padding-bottom: 100% !important; /* 1:1 */
    width: var(--scap-list-thumb, 120px) !important;
    height: auto !important;
  }
}

.scap-style-list .scap-thumb .scap-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  -o-object-fit: contain !important;
  background: #fff !important;
}

.scap-style-list .scap-title {
  margin: 0 0 6px !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
}

.scap-style-list .scap-excerpt {
  margin: 0 0 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

.scap-style-list .scap-prices {
  margin: 4px 0 8px !important;
}

.scap-style-list .scap-actions {
  margin-top: 0 !important;
}

/* ============================================
   LAYOUT LIST DESKTOP - Corrigido: grid responsivo
   ============================================ */
@media (min-width: 641px) {
  .scap-style-list .scap-card {
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: var(--scap-list-thumb, 120px) 14px 1fr 14px 220px;
    grid-template-columns: var(--scap-list-thumb, 120px) 1fr 220px !important;
    -ms-grid-rows: 1fr auto;
    grid-template-rows: 1fr auto !important;
    grid-column-gap: 14px !important;
    -webkit-align-items: center;
    align-items: center !important;
  }
  
  .scap-style-list .scap-thumb {
    -ms-grid-column: 1;
    grid-column: 1 !important;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / span 2 !important;
  }
  
  .scap-style-list .scap-middle {
    -ms-grid-column: 2;
    grid-column: 2 !important;
    -ms-grid-row: 1;
    grid-row: 1 !important;
    display: -webkit-flex;
    display: flex !important;
    -webkit-flex-direction: column;
    flex-direction: column !important;
    -webkit-justify-content: center;
    justify-content: center !important;
    gap: 6px !important;
    min-height: var(--scap-list-thumb, 120px) !important;
  }
  
  .scap-style-list .scap-middle > * {
    margin-bottom: 6px; /* fallback gap */
  }
  
  .scap-style-list .scap-middle > *:last-child {
    margin-bottom: 0;
  }
  
  @supports (gap: 6px) {
    .scap-style-list .scap-middle > * {
      margin-bottom: 0;
    }
  }
  
  .scap-style-list .scap-actions {
    -ms-grid-column: 3;
    grid-column: 3 !important;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / span 2 !important;
    -webkit-align-self: center;
    align-self: center !important;
    -webkit-justify-content: flex-end;
    justify-content: flex-end !important;
    margin: 0 !important;
  }
  
  .scap-style-list .scap-meta {
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2 / span 2 !important;
    -ms-grid-row: 2;
    grid-row: 2 !important;
    -webkit-align-self: end;
    align-self: end !important;
    margin-top: 8px !important;
    -webkit-justify-content: flex-start;
    justify-content: flex-start !important;
  }
}

/* ============================================
   LAYOUT LIST MOBILE - Corrigido: breakpoints
   ============================================ */
@media (max-width: 640px) {
  .scap-style-list .scap-card {
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: var(--scap-list-thumb, 120px) 14px 1fr;
    grid-template-columns: var(--scap-list-thumb, 120px) 1fr !important;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto !important;
    grid-gap: 14px;
  }
  
  .scap-style-list .scap-thumb {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
  }
  
  .scap-style-list .scap-middle {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
  }
  
  .scap-style-list .scap-actions {
    -ms-grid-column: 2;
    grid-column: 2 !important;
    -ms-grid-row: 1;
    grid-row: 1 !important;
    -webkit-align-self: center;
    align-self: center !important;
    -webkit-justify-content: flex-start;
    justify-content: flex-start !important;
    margin-top: 8px !important;
  }
  
  .scap-style-list .scap-meta {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / -1 !important;
    -ms-grid-row: 2;
    grid-row: 2 !important;
  }
}

/* Telas muito pequenas */
@media (max-width: 420px) {
  .scap-style-list .scap-card {
    -ms-grid-columns: 90px 14px 1fr;
    grid-template-columns: 90px 1fr !important;
  }
  
  .scap-style-list .scap-thumb {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
  }
  
  .scap-style-list .scap-title {
    font-size: 15px !important;
  }
  
  .scap-style-list .scap-btn {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
}

/* ============================================
   STYLE: LIST-SIDEBAR - Corrigido: flexbox
   ============================================ */
.scap-style-list-sidebar.scap-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: -5px;
}

.scap-style-list-sidebar.scap-grid > * {
  margin: 5px;
}

@supports (gap: 10px) {
  .scap-style-list-sidebar.scap-grid {
    margin: 0;
  }
  .scap-style-list-sidebar.scap-grid > * {
    margin: 0;
  }
}

.scap-style-list-sidebar .scap-card {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: row;
  flex-direction: row !important;
  -webkit-align-items: center;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 12px !important;
}

.scap-style-list-sidebar .scap-card > * {
  margin-right: 10px; /* fallback */
}

.scap-style-list-sidebar .scap-card > *:last-child {
  margin-right: 0;
}

@supports (gap: 10px) {
  .scap-style-list-sidebar .scap-card > * {
    margin-right: 0;
  }
}

.scap-style-list-sidebar .scap-thumb {
  width: var(--scap-list-thumb-sidebar, 84px) !important;
  height: var(--scap-list-thumb-sidebar, 84px) !important;
  min-width: var(--scap-list-thumb-sidebar, 84px) !important;
  padding-bottom: 0 !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

@supports not (aspect-ratio: 1 / 1) {
  .scap-style-list-sidebar .scap-thumb {
    position: relative;
    padding-bottom: 100% !important;
    height: auto !important;
  }
}

.scap-style-list-sidebar .scap-thumb .scap-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  -o-object-fit: contain !important;
  background: #fff !important;
}

.scap-style-list-sidebar .scap-title {
  margin: 0 0 4px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

.scap-style-list-sidebar .scap-excerpt {
  display: none !important;
}

.scap-style-list-sidebar .scap-prices {
  margin: 0 0 6px !important;
  gap: 6px !important;
}

.scap-style-list-sidebar .scap-old {
  display: none !important;
}

.scap-style-list-sidebar .scap-new {
  font-size: 16px !important;
}

.scap-style-list-sidebar .scap-actions {
  margin-top: 0 !important;
  gap: 6px !important;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap !important;
}

.scap-style-list-sidebar .scap-btn {
  padding: 8px 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

.scap-style-list-sidebar .scap-code {
  padding: 6px 8px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

.scap-style-list-sidebar .scap-meta {
  display: none !important;
}

/* ============================================
   HIGHLIGHT & ANIMATIONS
   ============================================ */
.scap-card.scap-highlight {
  box-shadow: 0 0 0 2px #2563eb inset, 0 0 0 0 rgba(37,99,235,.4);
  transition: box-shadow .3s ease;
}

@keyframes scapPulse {
  0% {
    box-shadow: 0 0 0 2px #2563eb inset, 0 0 0 0 rgba(37,99,235,.4);
  }
  100% {
    box-shadow: 0 0 0 2px #2563eb inset, 0 0 0 14px rgba(37,99,235,0);
  }
}

.scap-card.scap-pulse {
  animation: scapPulse 1.2s ease-out 2;
}

/* ============================================
   PERFORMANCE & SAFARI FIXES
   ============================================ */

/* Fix para renderização no Safari */
.scap-card,
.scap-btn,
.scap-thumb {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Prevenir overflow horizontal */
@media (max-width: 768px) {
  .scap-grid,
  .scap-card {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Garantir que imagens não quebrem o layout */
.scap-img {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* Box-sizing universal */
.scap-grid *,
.scap-card *,
.scap-grid *::before,
.scap-grid *::after,
.scap-card *::before,
.scap-card *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* ========================================
   CORREÇÕES DE CORES - Botões e Cards
   Adicionado em: 28/01/2026
   ======================================== */

/* CARDS - Fundo BRANCO */
.scap-card {
  background: #ffffff !important;
  color: #111827 !important;
}

/* BOTÕES - Azul do tema */
.scap-btn,
button.scap-btn,
a.scap-btn {
  background: #0ea5e9 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.scap-btn:hover,
button.scap-btn:hover,
a.scap-btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.scap-btn:active {
  background: #0369a1 !important;
  color: #ffffff !important;
  transform: scale(0.98);
}

.scap-btn:visited {
  background: #0ea5e9 !important;
  color: #ffffff !important;
}

/* BOTÃO REVELADO - Verde */
.scap-card[data-revealed="1"] .scap-btn {
  background: #16a34a !important;
  color: #ffffff !important;
}

.scap-card[data-revealed="1"] .scap-btn:hover {
  background: #15803d !important;
}

/* TEXTOS - Preto legível */
.scap-title,
.scap-title a {
  color: #111827 !important;
}

.scap-title a:visited {
  color: #4b5563 !important;
}

.scap-title a:hover {
  color: #0ea5e9 !important;
  text-decoration: underline !important;
}

.scap-excerpt {
  color: #4b5563 !important;
}

.scap-meta {
  color: #6b7280 !important;
}

/* CÓDIGO CUPOM - Azul claro */
.scap-code {
  background: #f0f9ff !important;
  color: #0c4a6e !important;
  border: 2px dashed #0ea5e9 !important;
}

/* BADGE - Azul */
.scap-badge {
  background: #0ea5e9 !important;
  color: #ffffff !important;
}

/* PREÇOS */
.scap-new {
  color: #16a34a !important;
}

.scap-old {
  color: #9ca3af !important;
}

/* THUMBNAIL HOVER */
.scap-thumb-reveal:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

/* MOBILE - Touch targets */
@media (max-width: 768px) {
  .scap-btn {
    padding: 14px 16px !important;
    min-height: 44px;
    font-size: 16px !important;
  }
}

/* FIX SAFARI */
@supports (-webkit-appearance: none) {
  button.scap-btn:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
  }
}

/* PREVENIR MODO ESCURO */
@media (prefers-color-scheme: dark) {
  .scap-card {
    background: #ffffff !important;
    color: #111827 !important;
  }
  
  .scap-title,
  .scap-excerpt {
    color: inherit !important;
  }
}