/**
 * RexTheme Exit Intent Popup Styles
 * Version: 1.0.0
 *
 * Browser Support:
 * - Chrome 60+
 * - Firefox 55+
 * - Safari 12+
 * - Edge 79+
 * - iOS Safari 12+
 * - Android Chrome 60+
 */

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */
:root {
  --rt-popup-bg: #1a1a2e;
  --rt-popup-accent: #39ff14;
  --rt-popup-cta: #4361ee;
  --rt-popup-cta-hover: #3651d4;
  --rt-popup-text: #ffffff;
  --rt-popup-text-muted: #a0a0a0;
  --rt-popup-border: #39ff14;
  --rt-popup-overlay: rgba(0, 0, 0, 0.75);
  --rt-popup-radius: 16px;
  --rt-popup-radius-sm: 8px;
  --rt-popup-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --rt-popup-z-index: 999999;
  --rt-popup-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Reset & Base Styles (Scoped)
   ============================================ */
.rt-popup-overlay,
.rt-popup-overlay *,
.rt-popup-overlay *::before,
.rt-popup-overlay *::after {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}

/* ============================================
   Overlay
   ============================================ */
.rt-popup-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--rt-popup-overlay) !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  z-index: var(--rt-popup-z-index) !important;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity var(--rt-popup-transition), visibility var(--rt-popup-transition);
  -moz-transition: opacity var(--rt-popup-transition), visibility var(--rt-popup-transition);
  -o-transition: opacity var(--rt-popup-transition), visibility var(--rt-popup-transition);
  transition: opacity var(--rt-popup-transition), visibility var(--rt-popup-transition);
  padding: 20px !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.rt-popup-overlay.rt-popup-active {
  opacity: 1;
  visibility: visible;
}

/* WordPress Admin Bar Offset */
.admin-bar .rt-popup-overlay {
  top: 32px !important;
  height: calc(100% - 32px) !important;
}

@media screen and (max-width: 782px) {
  .admin-bar .rt-popup-overlay {
    top: 46px !important;
    height: calc(100% - 46px) !important;
  }
}

/* ============================================
   Modal Container
   ============================================ */
.rt-popup-modal {
  position: relative !important;
  background-color: #040317;
  border-radius: var(--rt-popup-radius) !important;
  width: 100% !important;
  max-width: 533px !important;
  -webkit-box-shadow: var(--rt-popup-shadow) !important;
  -moz-box-shadow: var(--rt-popup-shadow) !important;
  box-shadow: var(--rt-popup-shadow) !important;
  -webkit-transform: scale(0.9) translateY(20px);
  -moz-transform: scale(0.9) translateY(20px);
  -ms-transform: scale(0.9) translateY(20px);
  -o-transform: scale(0.9) translateY(20px);
  transform: scale(0.9) translateY(20px);
  -webkit-transition: -webkit-transform var(--rt-popup-transition);
  -moz-transition: -moz-transform var(--rt-popup-transition);
  -o-transition: -o-transform var(--rt-popup-transition);
  transition: transform var(--rt-popup-transition);
}

.rt-popup-overlay.rt-popup-active .rt-popup-modal {
  -webkit-transform: scale(1) translateY(0);
  -moz-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  -o-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
}

/* ============================================
   Close Button
   ============================================ */
.rt-popup-close {
  position: absolute !important;
  top: -12px !important;
  right: -12px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: var(--rt-popup-text) !important;
  border: none !important;
  cursor: pointer !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  -webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
  -moz-transition: background-color 0.2s ease, -moz-transform 0.2s ease;
  -o-transition: background-color 0.2s ease, -o-transform 0.2s ease;
  transition: background-color 0.2s ease, transform 0.2s ease;
  padding: 0 !important;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.rt-popup-close:hover,
.rt-popup-close:focus {
  background-color: #e0e0e0 !important;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  outline: none !important;
}

.rt-popup-close:focus-visible {
  outline: 2px solid var(--rt-popup-accent) !important;
  outline-offset: 2px !important;
}

.rt-popup-close svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--rt-popup-bg) !important;
  stroke: currentColor !important;
}

/* ============================================
   Banner Section
   ============================================ */
.rt-popup-banner {
  position: relative !important;
  padding: 24px !important;
  overflow: hidden !important;
}

/*.rt-popup-banner-inner {
  position: relative !important;
  background-color: #0a0a14 !important;
  border: 2px solid var(--rt-popup-border) !important;
  border-radius: var(--rt-popup-radius-sm) !important;
  padding: 20px !important;
  text-align: center !important;
  overflow: hidden !important;
}*/
.rt-popup-banner-promo-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.rt-popup-banner-promo-image img {
    width: 100%;
}
/* Particle Effect */
.rt-popup-particles {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: radial-gradient(circle, var(--rt-popup-accent) 1px, transparent 1px),
    radial-gradient(circle, var(--rt-popup-accent) 0.5px, transparent 0.5px);
  background-size: 30px 30px, 20px 20px;
  background-position: 0 0, 10px 10px;
  opacity: 0.3;
  pointer-events: none !important;
}

/* Title Group */
.rt-popup-title-group {
  position: relative !important;
  margin-bottom: 8px !important;
}

.rt-popup-black {
  display: block !important;
  font-family: "Impact", "Arial Black", "Haettenschweiler", sans-serif !important;
  font-size: 56px !important;
  font-weight: 900 !important;
  letter-spacing: 8px !important;
  color: transparent !important;
  -webkit-text-stroke: 2px var(--rt-popup-accent);
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.rt-popup-friday {
  display: block !important;
  font-family: "Brush Script MT", "Segoe Script", cursive !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  color: var(--rt-popup-accent) !important;
  margin-top: -20px !important;
  line-height: 1 !important;
  font-style: italic !important;
}

/* Discount Display */
.rt-popup-discount {
  position: relative !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: end !important;
  -webkit-align-items: flex-end !important;
  -ms-flex-align: end !important;
  align-items: flex-end !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-top: 8px !important;
}

.rt-popup-percent {
  font-family: "Impact", "Arial Black", sans-serif !important;
  font-size: 72px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background: -webkit-linear-gradient(top, #4361ee 0%, var(--rt-popup-accent) 100%);
  background: -moz-linear-gradient(top, #4361ee 0%, var(--rt-popup-accent) 100%);
  background: -o-linear-gradient(top, #4361ee 0%, var(--rt-popup-accent) 100%);
  background: linear-gradient(180deg, #4361ee 0%, var(--rt-popup-accent) 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rt-popup-accent);
}

.rt-popup-off {
  font-family: "Brush Script MT", "Segoe Script", cursive !important;
  font-size: 32px !important;
  color: var(--rt-popup-accent) !important;
  font-style: italic !important;
  margin-bottom: 10px !important;
  line-height: 1 !important;
}

/* ============================================
   Content Section
   ============================================ */
.rt-popup-content {
  padding: 0 24px 24px !important;
  text-align: center !important;
}

.rt-popup-headline {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--rt-popup-text) !important;
    line-height: 1.4 !important;
    margin: 10px 0 30px 0 !important;
    letter-spacing: -1px;
}

.rt-popup-headline strong {
  color: var(--rt-popup-accent) !important;
  font-weight: 700 !important;
}

/* ============================================
   CTA Button
   ============================================ */
.rt-popup-cta {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background-color: #201CFE;
  color: var(--rt-popup-text) !important;
  font-family: Inter;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 14px 28px !important;
  border-radius: var(--rt-popup-radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  -webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
  -moz-transition: background-color 0.2s ease, -moz-transform 0.2s ease;
  -o-transition: background-color 0.2s ease, -o-transform 0.2s ease;
  transition: background-color 0.2s ease, transform 0.2s ease;
  -webkit-box-shadow: 0 4px 14px rgba(67, 97, 238, 0.4) !important;
  -moz-box-shadow: 0 4px 14px rgba(67, 97, 238, 0.4) !important;
  box-shadow: 0 4px 14px rgba(67, 97, 238, 0.4) !important;
  margin-bottom: 25px;
}

.rt-popup-cta:hover,
.rt-popup-cta:focus {
  background-color: #201CFE;
  color: var(--rt-popup-text) !important;
  text-decoration: none !important;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
  outline: none !important;
}

.rt-popup-cta:focus-visible {
  outline: 2px solid var(--rt-popup-accent) !important;
  outline-offset: 2px !important;
}

.rt-popup-cta .rt-popup-arrow {
  width: 16px !important;
  height: 16px !important;
  -webkit-transition: -webkit-transform 0.2s ease;
  -moz-transition: -moz-transform 0.2s ease;
  -o-transition: -o-transform 0.2s ease;
  transition: transform 0.2s ease;
}

.rt-popup-cta:hover .rt-popup-arrow {
  -webkit-transform: translate(2px, -2px);
  -moz-transform: translate(2px, -2px);
  -ms-transform: translate(2px, -2px);
  -o-transform: translate(2px, -2px);
  transform: translate(2px, -2px);
}

/* ============================================
   Responsive Styles
   ============================================ */
@media screen and (max-width: 480px) {
  .rt-popup-overlay {
    padding: 16px !important;
  }

  .rt-popup-modal {
    max-width: 100% !important;
  }

  .rt-popup-close {
    top: -8px !important;
    right: -8px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .rt-popup-close svg {
    width: 18px !important;
    height: 18px !important;
  }

  .rt-popup-banner {
    padding: 16px !important;
  }

  .rt-popup-banner-inner {
    padding: 16px !important;
  }

  .rt-popup-black {
    font-size: 40px !important;
    letter-spacing: 4px !important;
  }

  .rt-popup-friday {
    font-size: 36px !important;
    margin-top: -14px !important;
  }

  .rt-popup-percent {
    font-size: 56px !important;
  }

  .rt-popup-off {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }

  .rt-popup-content {
    padding: 0 16px 20px !important;
  }

  .rt-popup-headline {
    font-size: 18px !important;
  }

  .rt-popup-cta {
    width: 100% !important;
    padding: 12px 20px !important;
  }
}

/* ============================================
   Accessibility - Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .rt-popup-overlay,
  .rt-popup-modal,
  .rt-popup-close,
  .rt-popup-cta,
  .rt-popup-arrow {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }

  .rt-popup-modal {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
  }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */
@media (forced-colors: active) {
  .rt-popup-modal {
    border: 2px solid CanvasText !important;
  }

  .rt-popup-close {
    border: 2px solid CanvasText !important;
  }

  .rt-popup-cta {
    border: 2px solid CanvasText !important;
  }
}

/* ============================================
   Print Styles - Hide Popup
   ============================================ */
@media print {
  .rt-popup-overlay {
    display: none !important;
  }
}

/* ============================================
   Theme/Plugin Conflict Overrides
   ============================================ */

/* Elementor */
.elementor-page .rt-popup-overlay {
  z-index: 999999 !important;
}

/* Divi */
.et_pb_section .rt-popup-overlay {
  z-index: 999999 !important;
}

/* WooCommerce */
.woocommerce .rt-popup-overlay {
  z-index: 999999 !important;
}

/* Astra Theme */
.ast-header-break-point .rt-popup-overlay {
  z-index: 999999 !important;
}