/* =========================================================================
   MyStream IPTV Player — Neon Pink/Cyan Theme Override
   Load this stylesheet AFTER all other site CSS (high priority).
   Recommended <link> placement: just before </head>, last in load order.
   ========================================================================= */

/* ---------- 1. CORE PALETTE ---------- */
:root {
  /* Neon brand */
  --neon-pink:        #ff2bd6;
  --neon-pink-soft:   #ff7ae0;
  --neon-magenta:     #d946ef;
  --neon-cyan:        #22d3ff;
  --neon-cyan-soft:   #7ee8ff;
  --neon-blue:        #4f8cff;
  --neon-purple:      #6a3cff;

  /* Surfaces (deep indigo/violet like the logo background) */
  --neon-bg:          #0a0420;
  --neon-bg-2:        #140833;
  --neon-surface:     #1a0d3f;
  --neon-surface-2:   #241355;
  --neon-border:      rgba(255, 43, 214, 0.35);
  --neon-border-cyan: rgba(34, 211, 255, 0.35);

  /* Text */
  --neon-text:        #f3eaff;
  --neon-text-dim:    #c9bfe6;

  /* Signature gradients */
  --neon-gradient:        linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-pink) 100%);
  --neon-gradient-soft:   linear-gradient(135deg, rgba(34,211,255,0.85) 0%, rgba(255,43,214,0.85) 100%);
  --neon-gradient-radial: radial-gradient(circle at 30% 20%, rgba(34,211,255,0.18), transparent 55%),
                          radial-gradient(circle at 75% 80%, rgba(255,43,214,0.22), transparent 60%);
  --neon-glow:            0 0 12px rgba(34,211,255,.45), 0 0 28px rgba(255,43,214,.45);
  --neon-glow-strong:     0 0 18px rgba(34,211,255,.7),  0 0 40px rgba(255,43,214,.7);
}

/* ---------- 2. ELEMENTOR GLOBAL TOKEN REMAP ---------- */
/* These were the original red/black theme tokens. Repointed to neon. */
.elementor-kit-14,
:root {
  --e-global-color-primary:   #ff2bd6 !important; /* was #F71A2C */
  --e-global-color-secondary: #0a0420 !important; /* was #000000 */
  --e-global-color-text:      #e9defb !important; /* was #C6C6C6 */
  --e-global-color-accent:    #22d3ff !important; /* was #F71A2C */
  --e-global-color-d7c7326:   #ffffff !important;
  --e-global-color-deeb276:   #140833 !important; /* was #0C0C0C */
  --e-global-color-99a92b2:   rgba(255, 43, 214, 0.30) !important;
}

/* ---------- 3. PAGE BACKDROP ---------- */
html, body,
body.elementor-default,
body .elementor-kit-14 {
  background-color: var(--neon-bg) !important;
  color: var(--neon-text) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--neon-gradient-radial);
  z-index: -1; /* sit behind all page content without touching children's positioning */
}
/* Preserve fixed/sticky headers — do NOT force position on body's direct children */
header, .elementor-location-header, .site-header, .ast-header-break-point .main-header-bar-wrap {
  z-index: 9999 !important;
}

/* ---------- 4. HEADINGS & LINKS ---------- */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  color: var(--neon-text) !important;
  text-shadow: 0 0 14px rgba(34,211,255,0.25), 0 0 22px rgba(255,43,214,0.2);
}

/* Headings that previously used the red primary color get the gradient text */
h1[style*="F71A2C"], h2[style*="F71A2C"], h3[style*="F71A2C"],
h1[style*="f71a2c"], h2[style*="f71a2c"], h3[style*="f71a2c"],
.elementor-heading-title[style*="primary"],
.has-vivid-red-color,
[style*="color:#F71A2C"], [style*="color: #F71A2C"],
[style*="color:#f71a2c"], [style*="color: #f71a2c"] {
  background: var(--neon-gradient) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
}

a, a:visited { color: var(--neon-cyan) !important; }
a:hover, a:focus {
  color: var(--neon-pink) !important;
  text-shadow: 0 0 10px rgba(255,43,214,.6);
}

/* ---------- 5. BUTTONS (Elementor / WP / WPForms / generic) ---------- */
.elementor-button,
.elementor-button-link,
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
.wpforms-submit,
.metform-btn,
a.button {
  background: var(--neon-gradient) !important;
  background-size: 200% 200% !important;
  background-position: 0% 50% !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: var(--neon-glow) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  transition: background-position .5s ease, box-shadow .3s ease, transform .2s ease !important;
}

.elementor-button:hover,
.elementor-button:focus,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wpforms-submit:hover,
.metform-btn:hover,
a.button:hover {
  background-position: 100% 50% !important;
  box-shadow: var(--neon-glow-strong) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Outline button variant (keep transparent fill but neon border + text) */
.elementor-button.elementor-button-link,
.elementor-button[class*="outline"] {
  background: transparent !important;
  color: var(--neon-cyan) !important;
  border: 1px solid var(--neon-cyan) !important;
  box-shadow: 0 0 10px rgba(34,211,255,.4) inset, 0 0 12px rgba(34,211,255,.3) !important;
}
.elementor-button.elementor-button-link:hover,
.elementor-button[class*="outline"]:hover {
  color: #fff !important;
  border-color: var(--neon-pink) !important;
  background: var(--neon-gradient) !important;
}

/* ---------- 6. CARDS / SECTIONS / PRICING ---------- */
.elementor-widget-wrap > .elementor-element,
.elementor-price-table,
.elementor-price-list,
.elementor-pricing,
.pp-advanced-accordion,
.elementor-tabs,
.elementor-toggle,
.elementor-image-box-wrapper,
.elementor-icon-box-wrapper {
  border-radius: 16px;
}

.elementor-price-table,
.elementor-price-list {
  background: linear-gradient(180deg, var(--neon-surface), var(--neon-surface-2)) !important;
  border: 1px solid var(--neon-border) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,43,214,.15), var(--neon-glow);
  color: var(--neon-text) !important;
}

.elementor-price-table .elementor-price-table__header,
.elementor-price-table .elementor-price-table__price,
.elementor-price-table .elementor-price-table__features-list li {
  background: transparent !important;
  color: var(--neon-text) !important;
  border-color: var(--neon-border) !important;
}

.elementor-price-table .elementor-price-table__heading,
.elementor-price-table .elementor-price-table__integer-part,
.elementor-price-table .elementor-price-table__currency,
.elementor-price-table .elementor-price-table__period {
  background: var(--neon-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* ---------- 7. ICONS (red icons → gradient) ---------- */
.elementor-icon,
.elementor-icon-list-icon i,
.elementor-icon-list-icon svg,
i.fa, i.fas, i.fab, i.far {
  color: var(--neon-pink) !important;
  text-shadow: 0 0 8px rgba(255,43,214,.6), 0 0 14px rgba(34,211,255,.4);
}

.elementor-icon-box-icon .elementor-icon {
  /* background: var(--neon-gradient) !important; */
  color: #fff !important;
  border-color: transparent !important;
  /* box-shadow: var(--neon-glow); */
}

/* ---------- 8. DIVIDERS / BORDERS ---------- */
.elementor-divider-separator,
hr {
  background: var(--neon-gradient) !important;
  border: none !important;
  height: 2px !important;
  box-shadow: 0 0 10px rgba(255,43,214,.6);
}

.elementor-widget-divider .elementor-divider {
  border-color: transparent !important;
}

/* ---------- 9. TABS / ACCORDIONS ---------- */
.elementor-tabs .elementor-tab-title.elementor-active,
.elementor-toggle .elementor-tab-title.elementor-active,
.e-n-tab-title[aria-selected="true"],
.pp-advanced-accordion-item.pp-toggle-item-active .pp-advanced-accordion-title {
  background: var(--neon-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--neon-glow);
}

.elementor-tab-title,
.e-n-tab-title,
.pp-advanced-accordion-title {
  color: var(--neon-text) !important;
  border-color: var(--neon-border) !important;
}

/* ---------- 10. FORMS (WPForms / Metform / Elementor) ---------- */
:root {
  --wpforms-button-background-color:  #ff2bd6;
  --wpforms-button-border-color:      #ff2bd6;
  --wpforms-page-break-color:         #ff2bd6;
  --wpforms-field-border-color:       rgba(255, 43, 214, 0.45);
  --wpforms-field-border-color-spare: rgba(34, 211, 255, 0.45);
  --wpforms-field-background-color:   #140833;
  --wpforms-field-text-color:         #f3eaff;
  --wpforms-field-menu-color:         #1a0d3f;
  --wpforms-label-color:              #f3eaff;
  --wpforms-label-sublabel-color:     #c9bfe6;
  --wpforms-label-error-color:        #ff5d8a;
}

input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select,
.mf-input, .mf-textarea, .mf-select {
  background-color: var(--neon-bg-2) !important;
  color: var(--neon-text) !important;
  border: 1px solid var(--neon-border) !important;
  border-radius: 10px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

input:focus, textarea:focus, select:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
  outline: none !important;
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 0 3px rgba(34,211,255,.25), 0 0 14px rgba(255,43,214,.35) !important;
}

::placeholder { color: rgba(243,234,255,.5) !important; }

/* ---------- 11. HEADER / NAV / FOOTER ---------- */
header, .elementor-location-header,
footer, .elementor-location-footer {
  background-color: var(--neon-bg-2) !important;
  border-bottom: 1px solid var(--neon-border);
}
footer, .elementor-location-footer {
  border-top: 1px solid var(--neon-border);
  border-bottom: none;
}

.elementor-nav-menu a,
nav a {
  color: var(--neon-text) !important;
  transition: color .2s ease, text-shadow .2s ease;
}
.elementor-nav-menu a:hover,
.elementor-nav-menu .current-menu-item > a,
.elementor-nav-menu .elementor-item-active,
nav a:hover {
  color: var(--neon-pink) !important;
  text-shadow: 0 0 10px rgba(255,43,214,.6);
}

/* ---------- 12. BADGES, RIBBONS, HIGHLIGHTS ---------- */
.elementor-price-table__ribbon-inner,
.badge, .label, .ribbon {
  background: var(--neon-gradient) !important;
  color: #fff !important;
  box-shadow: var(--neon-glow);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ---------- 13. SELECTION / SCROLLBAR ---------- */
::selection {
  background: var(--neon-pink);
  color: #0a0420;
}

* { scrollbar-color: var(--neon-pink) var(--neon-bg-2); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--neon-bg-2); }
*::-webkit-scrollbar-thumb {
  background: var(--neon-gradient);
  border-radius: 10px;
  box-shadow: var(--neon-glow);
}

/* ---------- 14. BRUTE-FORCE RED → NEON SWAPS ---------- */
/* Anything still hard-coded to the old red gets pulled into the gradient. */
[style*="#F71A2C"], [style*="#f71a2c"],
[style*="rgb(247, 26, 44)"], [style*="rgb(247,26,44)"],
[style*="#cf2e2e"], [style*="#CF2E2E"],
[style*="#d63637"], [style*="#D63637"] {
  color: var(--neon-pink) !important;
  border-color: var(--neon-pink) !important;
}

[style*="background-color:#F71A2C"], [style*="background-color: #F71A2C"],
[style*="background-color:#f71a2c"], [style*="background-color: #f71a2c"],
[style*="background:#F71A2C"],        [style*="background: #F71A2C"],
[style*="background:#f71a2c"],        [style*="background: #f71a2c"] {
  background: var(--neon-gradient) !important;
  color: #fff !important;
  box-shadow: var(--neon-glow);
}

/* WhatsApp green (#25D366) — keep but harmonize edge */
[style*="#25D366"] { box-shadow: 0 0 12px rgba(37,211,102,.45); }

/* ---------- 15. WP block presets (vivid-red / pale-pink etc.) ---------- */
.has-vivid-red-background-color  { background: var(--neon-gradient) !important; color: #fff !important; }
.has-vivid-red-color             { color: var(--neon-pink) !important; }
.has-pale-pink-background-color  { background-color: var(--neon-pink-soft) !important; }
.has-pale-pink-color             { color: var(--neon-pink-soft) !important; }