/* ══════════════════════════════════════════════════════════════════
   AKSIYA E'LONI
   ──────────────────────────────────────────────────────────────────
   Sahifa ochilganda bir marta chiqadigan oyna. Uchta qoida:

   1. Kontentni BLOKLAMAYDI — fon xiralashadi, lekin Escape va tashqi
      bosish oynani yopadi. Yopib bo'lmaydigan reklama saytdan
      chiqib ketishga sabab bo'ladi.

   2. Bir marta ko'rinadi (aksiya raqami bo'yicha eslab qolinadi).
      Har sahifada qayta chiqsa, e'lon xalaqit beruvchi narsaga
      aylanadi.

   3. Bosma va harakat sezgirligi hisobga olinadi.
   ══════════════════════════════════════════════════════════════════ */

.cmp-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  background: rgba(15, 23, 42, .55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.cmp-overlay.open { opacity: 1; }

.cmp-card {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px, 5vw, 30px);
  text-align: center;
  transform: translateY(12px) scale(.98);
  transition: transform var(--dur) var(--ease-out);
}

.cmp-overlay.open .cmp-card { transform: none; }

.cmp-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.cmp-close:hover { background: var(--surface-2); color: var(--text); }

.cmp-badge {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 12px;
}

.cmp-card h2 {
  font-size: var(--text-xl);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.cmp-desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0 0 18px;
  overflow-wrap: anywhere;
}

/* Asosiy son — e'lonning butun mazmuni shu yerda. */
.cmp-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cmp-count strong {
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.cmp-count span { font-size: var(--text-sm); color: var(--text-2); }

.cmp-perks {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.cmp-perks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.cmp-perks i {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success-fg);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.cmp-deadline {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0 0 18px;
}

.cmp-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cmp-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
}

.cmp-btn-primary {
  background: var(--brand-fill);
  color: var(--on-brand);
}

.cmp-btn-primary:hover { background: var(--brand-fill-hover); }

.cmp-btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

.cmp-btn-ghost:hover { background: var(--surface-2); color: var(--text); }

@media (max-width: 480px) {
  .cmp-card { padding: 22px 18px; }
}

/* Harakatga sezgir foydalanuvchilar uchun animatsiya yo'q. */
@media (prefers-reduced-motion: reduce) {
  .cmp-overlay,
  .cmp-card { transition: none; }
}

@media print {
  .cmp-overlay { display: none; }
}