/* ==========================================================================
  AIclinics Sale Teasers ([sale_teasers] shortcode)
  Additional styles for sale badges and timers
  Base card styles are in components.css (.sale-card, .sale-teasers)
  ========================================================================== */

/* Badge styles (benefit + timer) */
.sale-badge {
  position: absolute;
  top: 12px;
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  z-index: 2;
}

.sale-badge--benefit {
  left: 12px;
  background: #ffd400;
  color: #111;
}

.sale-badge--timer {
  right: 12px;
  bottom: 12px;
  top: auto;
  background: #df3535;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.sale-badge--price {
  right: 12px;
  bottom: 12px;
  top: auto !important;
  left: auto !important;
  height: auto;
  background: #df3535;
  color: #fff;
}

.sale-badge--ended {
  right: 12px;
  background: #e74c3c;
  color: #fff;
}

/* Countdown timer blocks */
.sale-timer {
  display: flex;
  gap: 6px;
}

.sale-timer__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
  padding: 4px 6px;
  background: rgba(255,255,255,.15);
  border-radius: 4px;
}

.sale-timer__value {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.sale-timer__label {
  font-size: 9px;
  text-transform: uppercase;
  opacity: .8;
}

/* Mobile: horizontal scroll for sale teasers */
@media (max-width: 768px) {
  .sale-teasers {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .sale-teasers .sale-card {
    min-width: 80%;
    flex: 0 0 auto;
    scroll-snap-align: start;
    max-width: 320px;
  }

  /* Thin scrollbar */
  .sale-teasers::-webkit-scrollbar { height: 6px; }
  .sale-teasers::-webkit-scrollbar-track { background: transparent; }
  .sale-teasers::-webkit-scrollbar-thumb { background: var(--primary-color, #09CA8F); border-radius: 6px; }
  .sale-teasers { scrollbar-color: var(--primary-color, #09CA8F) transparent; scrollbar-width: thin; }
}