/* ── Popup — Jinx style ── */

#popup-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  align-items: center; justify-content: center;
  padding: 20px 16px;
}

#popup-overlay.popup-open { display: flex; }

.popup-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.8);
  opacity: 0; transition: opacity 0.3s ease;
}

#popup-overlay.popup-open    .popup-backdrop { opacity: 1; }
#popup-overlay.popup-closing .popup-backdrop { opacity: 0; transition-duration: 0.24s; }

/* ── Card shell ── */
.popup-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px; max-height: 90dvh;
  background: #626262;
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  opacity: 0;
  transform: scale(0.84) translateY(36px);
  transition: opacity 0.38s cubic-bezier(0.22,1,0.36,1), transform 0.38s cubic-bezier(0.22,1,0.36,1);
}

#popup-overlay.popup-open    .popup-card { opacity: 1; transform: scale(1) translateY(0); }
#popup-overlay.popup-closing .popup-card {
  opacity: 0; transform: scale(0.9) translateY(20px);
  transition-timing-function: cubic-bezier(0.4,0,1,1); transition-duration: 0.24s;
}

/* Red strip */
.popup-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: #a60b0b;
  z-index: 5; pointer-events: none;
}

/* ── Close button ── */
.popup-close {
  position: absolute; top: 12px; left: 12px;
  width: 32px; height: 32px;
  border-radius: 10px; border: none;
  background: #a60b0b;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  z-index: 10; opacity: 0;
  transform: scale(0.6) rotate(-45deg);
  transition: opacity 0.25s 0.22s ease, transform 0.25s 0.22s cubic-bezier(0.34,1.56,0.64,1), background 0.15s;
}

#popup-overlay.popup-open .popup-close { opacity: 1; transform: scale(1) rotate(0deg); }
.popup-close:hover  { background: #c41010; }
.popup-close:active { transform: scale(0.86) !important; }

/* ── Header ── */
.popup-header {
  padding: 20px 18px 12px;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; direction: rtl;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.3s 0.16s ease, transform 0.3s 0.16s ease;
}

#popup-overlay.popup-open .popup-header { opacity: 1; transform: translateY(0); }

.popup-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 800;
  padding: 4px 12px;
  border-radius: 8px;
  letter-spacing: 0.03em;
}

.popup-badge--new      { background: rgba(255,152,0,0.2); color: #FF9800; }
.popup-badge--discount { background: rgba(166,11,11,0.3); color: #ff8080; }

.popup-headline {
  font-size: clamp(1rem, 4.5vw, 1.2rem);
  font-weight: 900; line-height: 1.3;
  color: #ffffff; text-align: center;
}

/* ── Card wrap ── */
.popup-card-wrap {
  padding: 0 14px 18px; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(16px) scale(0.97);
  transition: opacity 0.35s 0.22s cubic-bezier(0.22,1,0.36,1), transform 0.35s 0.22s cubic-bezier(0.22,1,0.36,1);
}

#popup-overlay.popup-open .popup-card-wrap { opacity: 1; transform: translateY(0) scale(1); }

.popup-item-card { cursor: default !important; animation: none !important; pointer-events: none; }
.popup-item-card:hover { transform: none !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; }

/* ── Custom popup ── */
.popup-content {
  padding: 20px 18px 28px; overflow-y: auto; overscroll-behavior: contain;
  flex: 1; direction: rtl;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.33s 0.2s ease, transform 0.33s 0.2s ease;
}

#popup-overlay.popup-open .popup-content { opacity: 1; transform: translateY(0); }

.popup-content--custom { display: flex; flex-direction: column; align-items: center; text-align: center; }
.popup-custom-icon { font-size: 2.8rem; margin-bottom: 12px; line-height: 1; }

.popup-title {
  font-size: clamp(1.1rem, 5vw, 1.3rem);
  font-weight: 900; line-height: 1.3;
  color: #ffffff; margin-bottom: 10px; text-align: center;
}

.popup-divider {
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin-bottom: 16px; width: 100%;
}

.popup-custom-body {
  font-size: clamp(0.82rem, 2.4vw, 0.92rem);
  color: rgba(255,255,255,0.7); line-height: 1.85; text-align: right; width: 100%;
}

.popup-custom-body p, .popup-custom-body ul, .popup-custom-body ol { margin-bottom: 10px; }
.popup-custom-body strong { font-weight: 800; color: #fff; }
.popup-custom-body em     { font-style: italic; }

/* ── Price ── */
.popup-price { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.popup-price-old { font-size: 0.85rem; color: rgba(255,255,255,0.35); text-decoration: line-through; }
.popup-price-new { font-size: clamp(1.2rem, 4vw, 1.4rem); font-weight: 900; color: #FF9800; }

/* ── Banner lightbox ── */
.popup-banner-lightbox {
  position: relative; z-index: 1;
  width: 80%; max-width: 600px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transform: scale(0.88);
  transition: opacity 0.38s cubic-bezier(0.22,1,0.36,1), transform 0.38s cubic-bezier(0.22,1,0.36,1);
}

#popup-overlay.popup-open    .popup-banner-lightbox { opacity: 1; transform: scale(1); }
#popup-overlay.popup-closing .popup-banner-lightbox {
  opacity: 0; transform: scale(0.92);
  transition-timing-function: cubic-bezier(0.4,0,1,1); transition-duration: 0.24s;
}

.popup-banner-img {
  width: 100%; line-height: 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

.popup-banner-img img { display: block; width: 100%; height: auto; max-height: 80dvh; object-fit: contain; }
.popup-banner-img a   { display: block; line-height: 0; }

.popup-banner-title {
  font-size: clamp(0.85rem, 2.5vw, 1rem); font-weight: 700;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.7); text-align: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.28s 0.26s ease, transform 0.28s 0.26s ease;
}

#popup-overlay.popup-open .popup-banner-title { opacity: 1; transform: translateY(0); }

.popup-close--banner {
  position: absolute; top: -12px; left: -12px;
  background: #a60b0b !important;
  border-radius: 50% !important;
}