/* Cloudflare WAF — pure image popup (Azadi-style), no text card */

#tc-cf-waf-image-promo {
  width: min(680px, calc(100vw - 32px));
  max-width: 680px;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: #0f172a;
  background: #0b1220;
  border: 1px solid rgba(246, 130, 31, 0.55);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(2, 12, 27, 0.55);
}

#tc-cf-waf-image-promo::backdrop {
  background: rgba(2, 8, 23, 0.82);
  backdrop-filter: blur(8px);
}

#tc-cf-waf-image-promo[open] {
  animation: tc-promo-enter 220ms ease-out;
}

#tc-cf-waf-image-promo .tc-first-visit-promo__poster-link {
  background: #0b1220;
  cursor: pointer;
}

#tc-cf-waf-image-promo .tc-first-visit-promo__poster {
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 100px);
  object-fit: contain;
  display: block;
}

#tc-cf-waf-image-promo .tc-first-visit-promo__poster-link:hover .tc-first-visit-promo__poster {
  filter: brightness(1.04);
}

.tc-cf-img-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: #0b1220 !important;
  border-top: 1px solid rgba(246, 130, 31, 0.28) !important;
}

.tc-cf-img-footer .tc-first-visit-promo__message {
  color: #e2e8f0 !important;
  font-size: 13px !important;
}

.tc-cf-img-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.tc-cf-img-btn-orange {
  background: #f6821f !important;
  box-shadow: 0 8px 22px rgba(246, 130, 31, 0.28) !important;
}

.tc-cf-img-btn-orange:hover {
  background: #ea6a00 !important;
}

.tc-cf-img-btn-green {
  background: #16a34a !important;
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.25) !important;
}

.tc-cf-img-btn-green:hover {
  background: #15803d !important;
}

html.tc-cf-waf-image-promo-open,
html.tc-cf-waf-image-promo-open body {
  overflow: hidden;
}

/* Never stack under Independence */
html.tc-first-visit-promo-open #tc-cf-waf-image-promo {
  display: none !important;
}

@media (max-width: 560px) {
  #tc-cf-waf-image-promo {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    border-radius: 12px;
  }

  .tc-cf-img-actions {
    width: 100%;
  }

  .tc-cf-img-actions .tc-first-visit-promo__cta {
    flex: 1 1 auto;
    min-height: 48px;
  }
}