/* ═══════════════════════════════════════════════════════════════════════════
 * VocabMaster — Ad slot styles
 * Theme-aware (uses --color-* tokens from global.css), RTL-safe (logical props),
 * zero CLS (fixed min-height per slot), respects print + paid tier.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden by default — JS adds .is-active once the AdManager decides to render.
   Means empty slots never appear in dev (no env vars) or when ads are gated off. */
.ad-slot-wrap {
  display: none;
  position: relative;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block: var(--space-5, 20px);
  padding: var(--space-3, 12px);
  background: var(--color-bg-surface, #161b22);
  border: 1px solid var(--color-border-default, #30363d);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  min-block-size: 100px;
  opacity: 0;
  transition: opacity var(--duration-fast, 180ms) var(--ease-out, ease-out);
}

.ad-slot-wrap.is-active { display: block; }
.ad-slot-wrap.is-filled { opacity: 1; }

/* Min-heights sized to Adsterra zones + label + padding:
   S1 300x250 → 250 + 40 chrome ; S2 728x90 → 130 ; S3 468x60 → 100 ;
   S4 native (fluid)  → 200 ; S5 300x250 → 290. */
.ad-slot-wrap[data-ad-slot-name="S1"] { min-block-size: 290px; }
.ad-slot-wrap[data-ad-slot-name="S2"] { min-block-size: 130px; }
.ad-slot-wrap[data-ad-slot-name="S3"] { min-block-size: 100px; }
.ad-slot-wrap[data-ad-slot-name="S4"] { min-block-size: 200px; }
.ad-slot-wrap[data-ad-slot-name="S5"] { min-block-size: 290px; }

/* Mobile fallback (320x50) for S1/S2 when viewport is narrow */
@media (max-width: 767px) {
  .ad-slot-wrap[data-ad-slot-name="S1"],
  .ad-slot-wrap[data-ad-slot-name="S2"] { min-block-size: 90px; }
}

.ad-slot-label {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 8px;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary, #8b949e);
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}

.ad-slot-ins {
  inline-size: 100%;
  min-block-size: inherit;
  display: block;
}

/* Paid users: hard-hide any ad slot regardless of JS state */
body.plan-premium .ad-slot-wrap,
body.plan-pro     .ad-slot-wrap,
body.plan-family  .ad-slot-wrap {
  display: none !important;
}

/* Never print ads */
@media print {
  .ad-slot-wrap,
  #vm-ads-consent { display: none !important; }
}

/* Mobile: hide desktop-only slots at the CSS layer too (defense in depth) */
@media (max-width: 767px) {
  .ad-slot-wrap[data-ad-slot-name="S3"],
  .ad-slot-wrap[data-ad-slot-name="S4"],
  .ad-slot-wrap[data-ad-slot-name="S5"] {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Consent banner
 * ═══════════════════════════════════════════════════════════════════════════ */

#vm-ads-consent {
  position: fixed;
  inset-block-end: 16px;
  inset-inline: 16px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
#vm-ads-consent.shown { opacity: 1; transform: translateY(0); }
#vm-ads-consent.closing { opacity: 0; transform: translateY(12px); }

.vm-ads-consent-card {
  pointer-events: auto;
  max-inline-size: 520px;
  inline-size: 100%;
  background: var(--color-bg-surface, #161b22);
  border: 1px solid var(--color-border-default, #30363d);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-5, 20px);
  box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.4));
  font-family: inherit;
  color: var(--color-text-primary, #e6edf3);
}

.vm-ads-consent-title {
  font-weight: 600;
  font-size: 1rem;
  margin-block-end: var(--space-2, 8px);
}
.vm-ads-consent-body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #b1bac4);
  margin-block-end: var(--space-4, 16px);
}
.vm-ads-consent-actions {
  display: flex;
  gap: var(--space-2, 8px);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.vm-ads-consent-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 10px);
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) ease,
              border-color var(--duration-fast, 150ms) ease,
              transform var(--duration-fast, 150ms) ease;
}
.vm-ads-consent-btn:active { transform: translateY(1px); }

.vm-ads-consent-decline {
  background: transparent;
  color: var(--color-text-secondary, #b1bac4);
  border-color: var(--color-border-default, #30363d);
}
.vm-ads-consent-decline:hover {
  background: var(--color-bg-surface-raised, #21262d);
}
.vm-ads-consent-accept {
  background: var(--color-brand-600, #7c3aed);
  color: #fff;
}
.vm-ads-consent-accept:hover {
  background: var(--color-brand-700, #6d28d9);
}

@media (max-width: 480px) {
  #vm-ads-consent { inset-inline: 8px; inset-block-end: 8px; }
  .vm-ads-consent-actions { justify-content: stretch; }
  .vm-ads-consent-btn { flex: 1; }
}