/*
Theme Name:   Hello Elementor Child
Theme URI:    https://ready2geaux.com/
Description:  Child theme for Ready2Geaux Streaming — dark purple & golden design system built on Hello Elementor.
Author:       Ready2Geaux
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* ============================================================
   DESIGN SYSTEM — Global CSS Custom Properties
   ============================================================ */
:root {
  /* Backgrounds */
  --color-bg-primary:    #0A0A12;
  --color-bg-secondary:  #10101E;
  --color-bg-card:       #14142A;
  --color-bg-elevated:   #1A1A35;

  /* Primary — Purple */
  --color-purple:        #8B3CF7;
  --color-purple-dark:   #7A2FE0;
  --color-purple-light:  #A855F7;
  --color-purple-glow:   rgba(139, 60, 247, 0.25);

  /* Secondary — Gold */
  --color-gold:          #E8B000;
  --color-gold-dark:     #C99A00;
  --color-gold-light:    #F5C842;
  --color-gold-glow:     rgba(232, 176, 0, 0.20);

  /* Text */
  --color-text-main:     #F8F8FF;
  --color-text-secondary:#A8AECE;

  /* Borders & utility */
  --color-border:        rgba(139, 60, 247, 0.18);
  --color-border-subtle: rgba(168, 174, 206, 0.12);
  --color-success:       #22C55E;
  --color-warning:       #F59E0B;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;

  /* Spacing */
  --section-pad:    90px 0;
  --section-pad-sm: 60px 0;
}

/* ============================================================
   BASE RESET & TYPOGRAPHY
   ============================================================ */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-main);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-main);
  font-weight: 600;
  line-height: 1.25;
  margin-top: 0;
}

h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; }
h2 { font-size: clamp(26px, 4vw, 38px); }
h3 { font-size: clamp(20px, 3vw, 26px); }
h4 { font-size: 18px; }

p { color: var(--color-text-secondary); margin-top: 0; margin-bottom: 1.25em; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-purple-light); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-gold); }

img { max-width: 100%; height: auto; }

/* ============================================================
   LAYOUT WRAPPERS
   ============================================================ */
body:not([class*=elementor-page-]) .site-main {
  max-width: 100% !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}

.r2g-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.r2g-section {
  padding: var(--section-pad);
}

.r2g-section--alt {
  background-color: var(--color-bg-secondary);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.r2g-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: all 0.22s ease;
  text-decoration: none;
}

.r2g-btn--primary {
  background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
  color: #ffffff !important;
  box-shadow: 0 4px 20px var(--color-purple-glow);
}
.r2g-btn--primary:hover {
  background: linear-gradient(135deg, var(--color-purple-light), var(--color-purple));
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--color-purple-glow);
}

.r2g-btn--gold {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  color: #0A0A12 !important;
  font-weight: 700;
}
.r2g-btn--gold:hover {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: #0A0A12 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--color-gold-glow);
}

.r2g-btn--outline {
  background: transparent;
  color: var(--color-text-main) !important;
  border: 1px solid var(--color-border-subtle);
}
.r2g-btn--outline:hover {
  border-color: var(--color-purple);
  color: var(--color-purple-light) !important;
  background: rgba(139, 60, 247, 0.07);
}

/* ============================================================
   CARD BASE
   ============================================================ */
.r2g-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
.r2g-card:hover {
  border-color: var(--color-border);
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.4);
  transform: translateY(-3px);
}

/* ============================================================
   BADGE / LABEL
   ============================================================ */
.r2g-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.r2g-badge--purple { background: rgba(139,60,247,0.14); color: var(--color-purple-light); border: 1px solid rgba(139,60,247,0.25); }
.r2g-badge--gold   { background: rgba(232,176,0,0.12);  color: var(--color-gold);         border: 1px solid rgba(232,176,0,0.22); }

/* ============================================================
   SECTION EYEBROW / HEADER
   ============================================================ */
.r2g-section-head {
  text-align: center;
  margin-bottom: 56px;
}
.r2g-section-head .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}
.r2g-section-head h2 { margin-bottom: 16px; }
.r2g-section-head p {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   GRADIENT TEXT
   ============================================================ */
.r2g-gradient-text {
  background: linear-gradient(135deg, var(--color-purple-light), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

.r2g-gradient-text--purple {
  background: linear-gradient(135deg, var(--color-purple-light), var(--color-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

/* ============================================================
   PRICING CARDS
   ============================================================ */
.r2g-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 960px) { .r2g-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .r2g-pricing-grid { grid-template-columns: 1fr; } }

.r2g-plan-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
.r2g-plan-card:hover {
  border-color: rgba(139,60,247,0.4);
  box-shadow: 0 12px 40px rgba(139,60,247,0.15);
  transform: translateY(-4px);
}
.r2g-plan-card--featured {
  border-color: var(--color-purple);
  background: linear-gradient(160deg, #1A1A35 0%, #12122A 100%);
  box-shadow: 0 8px 40px var(--color-purple-glow);
}
.r2g-plan-card--featured:hover {
  box-shadow: 0 16px 52px rgba(139,60,247,0.30);
}

.r2g-plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  color: #0A0A12;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 100px;
  white-space: nowrap;
}

.r2g-plan-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-purple-light);
  margin-bottom: 16px;
}
.r2g-plan-card--featured .r2g-plan-name { color: var(--color-gold); }

.r2g-plan-price {
  margin-bottom: 8px;
}
.r2g-plan-price .amount {
  font-size: 48px;
  font-weight: 700;
  color: var(--color-text-main);
  line-height: 1;
}
.r2g-plan-price .currency {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-secondary);
  vertical-align: super;
  line-height: 1;
}
.r2g-plan-price .period {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-left: 4px;
}

.r2g-plan-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}

.r2g-plan-divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: 0 0 24px;
}

.r2g-plan-features {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  flex: 1;
}
.r2g-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.r2g-plan-features li:last-child { border-bottom: none; }
.r2g-plan-features .check {
  color: var(--color-purple-light);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.r2g-plan-card--featured .r2g-plan-features .check { color: var(--color-gold); }

/* ============================================================
   CHANNEL LIST TABLE
   ============================================================ */
.r2g-channel-wrap {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.r2g-channel-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
}
.r2g-channel-search input {
  flex: 1;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-main);
  font-size: 14px;
  font-family: inherit;
  padding: 10px 16px;
  outline: none;
  transition: border-color 0.2s;
}
.r2g-channel-search input:focus { border-color: var(--color-purple); }
.r2g-channel-search input::placeholder { color: var(--color-text-secondary); }

.r2g-channel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.r2g-channel-table thead th {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 18px;
  text-align: left;
}
.r2g-channel-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.r2g-channel-table tbody tr:hover { background: rgba(139,60,247,0.05); }
.r2g-channel-table td { padding: 11px 18px; color: var(--color-text-secondary); }
.r2g-channel-table td:first-child { color: var(--color-text-main); font-weight: 500; }

/* ============================================================
   DOWNLOAD PAGE — APP CARDS
   ============================================================ */
.r2g-download-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 768px) { .r2g-download-grid { grid-template-columns: 1fr; } }

.r2g-download-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
.r2g-download-card:hover {
  border-color: rgba(139,60,247,0.35);
  box-shadow: 0 12px 36px rgba(139,60,247,0.12);
  transform: translateY(-3px);
}

.r2g-download-platform {
  display: flex;
  align-items: center;
  gap: 16px;
}
.r2g-download-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  background: rgba(139,60,247,0.12);
  border: 1px solid rgba(139,60,247,0.2);
}
.r2g-download-platform-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-main);
  margin: 0 0 4px;
}
.r2g-download-platform-sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================================
   HERO SECTION DECORATION
   ============================================================ */
.r2g-hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
.r2g-hero-glow--purple {
  background: radial-gradient(circle, rgba(139,60,247,0.25) 0%, transparent 70%);
  top: -100px;
  left: -100px;
}
.r2g-hero-glow--gold {
  background: radial-gradient(circle, rgba(232,176,0,0.12) 0%, transparent 70%);
  bottom: -100px;
  right: -100px;
}

/* ============================================================
   ELEMENTOR OVERRIDES — dark theme baseline
   ============================================================ */
.elementor-section,
.e-container,
.e-con {
  background-color: transparent;
}

.elementor-widget-text-editor a { color: var(--color-purple-light); }
.elementor-widget-text-editor a:hover { color: var(--color-gold); }

.elementor-widget-heading .elementor-heading-title { color: var(--color-text-main); }

/* Icon Box */
.elementor-widget-icon-box .elementor-icon-box-wrapper { text-align: left; }
.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title { margin-top: 16px; margin-bottom: 8px; }
.elementor-widget-icon-box .elementor-icon-box-icon { margin-bottom: 0; }

/* Counter */
.elementor-widget-counter .elementor-counter { text-align: center; }
.elementor-widget-counter .elementor-counter-title { margin-top: 6px; }

/* Accordion */
.elementor-widget-accordion .elementor-accordion { border: none; }
.elementor-widget-accordion .elementor-accordion-item {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.elementor-widget-accordion .elementor-tab-title {
  padding: 18px 22px;
  background: var(--color-bg-card);
}
.elementor-widget-accordion .elementor-tab-title.elementor-active {
  background: var(--color-bg-elevated);
}
.elementor-widget-accordion .elementor-tab-content {
  padding: 0 22px 18px;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border-subtle);
}

/* Button hover */
.elementor-widget-button .elementor-button:hover {
  box-shadow: 0 6px 22px var(--color-purple-glow);
}

/* Icon list */
.elementor-widget-icon-list .elementor-icon-list-text { font-family: 'Inter', sans-serif; }
.elementor-widget-icon-list .elementor-icon-list-item { align-items: flex-start; }
.elementor-widget-icon-list .elementor-icon-list-icon { margin-top: 2px; }

/* ── Fixed header offset ── */
body { scroll-padding-top: 80px; }
body.hfe-header { padding-top: 72px; }

/* ── Header max-width ── */
.elementor-51 .e-con-boxed > .e-con-inner {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* ── Header backdrop blur via ::before so position:fixed dropdowns aren't trapped ── */
#masthead,
.hfe-header-wrap > header {
  background-color: transparent !important;
  border: none !important;
  overflow: visible !important;
}
#masthead::before,
.hfe-header-wrap > header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(10, 10, 18, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  z-index: 0;
}
/* Keep Elementor content above the pseudo-element backdrop */
.hfe-header-wrap > header .elementor-11 {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════
   HEADER — TABLET & MOBILE RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .elementor-51 .elementor-element-3651d76,
  .elementor-51 .elementor-element-3651d76 > .e-con-inner {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .elementor-51 .elementor-element.elementor-element-04c8254 {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin-right: auto !important;
  }
  .elementor-51 .elementor-element.elementor-element-04c8254 img { width: 180px !important; }

  .elementor-51 .elementor-element.elementor-element-3a2b51b {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-right: 8px !important;
  }
  .elementor-51 .elementor-element.elementor-element-3a2b51b .elementor-button {
    padding: 9px 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .elementor-51 .elementor-element.elementor-element-774e4dc {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .elementor-51 .elementor-element.elementor-element-774e4dc > .elementor-widget-container {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .elementor-51 .elementor-element.elementor-element-774e4dc div.hfe-nav-menu {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .elementor-51 .elementor-element-774e4dc .hfe-nav-menu__toggle .hfe-nav-menu-icon,
  .elementor-51 .elementor-element-774e4dc .hfe-nav-menu__toggle .hfe-nav-menu__toggle-icon {
    display: none !important;
  }
  .elementor-51 .elementor-element-774e4dc .hfe-has-submenu-container { position: relative !important; }
  .elementor-51 .elementor-element-774e4dc .sub-arrow {
    display: block !important;
    position: fixed !important;
    right: 20px !important;
    border: none !important;
    color: #94A3B8 !important;
  }
  .elementor-51 .elementor-element-774e4dc .hfe-nav-menu__toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1.5px solid rgba(139,60,247,0.28) !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect y='0' width='20' height='2' rx='1' fill='%23F8F8FF'/%3E%3Crect y='6' width='20' height='2' rx='1' fill='%23F8F8FF'/%3E%3Crect y='12' width='20' height='2' rx='1' fill='%23F8F8FF'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 14px !important;
    transition: border-color 0.2s, background-color 0.2s !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
  .elementor-51 .elementor-element-774e4dc .hfe-nav-menu__toggle:hover {
    border-color: rgba(139,60,247,0.55) !important;
    background-color: rgba(139,60,247,0.08) !important;
  }
  .elementor-51 .elementor-element-774e4dc .hfe-active-menu .hfe-nav-menu__toggle,
  .elementor-51 .elementor-element-774e4dc .hfe-nav-menu__toggle.hfe-active-menu {
    border-color: transparent !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cline x1='2' y1='2' x2='16' y2='16' stroke='%23F8F8FF' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='16' y1='2' x2='2' y2='16' stroke='%23F8F8FF' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-size: 18px 18px !important;
  }
  .elementor-51 .elementor-element-774e4dc .hfe-nav-menu__layout-horizontal {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    background: #0A0A12 !important;
    border-top: 1px solid rgba(139,60,247,0.15) !important;
    z-index: 9999 !important;
    padding: 10px 20px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
  }
  .elementor-51 .elementor-element-774e4dc .hfe-nav-menu__layout-horizontal li,
  .elementor-51 .elementor-element-774e4dc .hfe-nav-menu li.menu-item {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
  }
  .elementor-51 .elementor-element-774e4dc .hfe-nav-menu__layout-horizontal a.hfe-menu-item {
    padding: 11px 0 !important;
    font-size: 15px !important;
    display: flex !important;
    background: transparent !important;
  }
}

@media (max-width: 767px) {
  .elementor-51 .elementor-element.elementor-element-04c8254 img { width: 150px !important; }
  .elementor-51 .elementor-element.elementor-element-3a2b51b .elementor-button {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* ══════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════ */
.elementor-52 .hfe-nav-menu__toggle,
.elementor-52 div.hfe-nav-menu-icon,
.elementor-52 .hfe-nav-menu .sub-arrow,
.elementor-52 .hfe-nav-menu .child-item { display: none !important; }

.elementor-52 .hfe-nav-menu__layout-vertical,
.elementor-52 .hfe-nav-menu__layout-horizontal {
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  float: none !important;
  width: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.elementor-52 div.hfe-nav-menu { background: transparent !important; background-color: transparent !important; }
.elementor-52 ul.hfe-nav-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
}
.elementor-52 .hfe-nav-menu li.menu-item { display: block !important; width: auto !important; background: none !important; border: none !important; }
.elementor-52 .hfe-nav-menu a.hfe-menu-item {
  display: inline-block !important;
  color: var(--color-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  padding: 4px 0 !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
}
.elementor-52 .hfe-nav-menu a.hfe-menu-item:hover { color: var(--color-text-main) !important; }

@media (max-width: 767px) {
  .elementor-52 .elementor-element-523838b > .e-con-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 40px !important;
    padding-bottom: 0 !important;
  }
  .elementor-52 .elementor-element-6f567ed {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 !important;
  }
  .elementor-52 .elementor-element-6f567ed > .e-con {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .elementor-52 div.hfe-nav-menu,
  .elementor-52 .hfe-nav-menu__layout-vertical,
  .elementor-52 .hfe-nav-menu__layout-horizontal {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .elementor-52 .hfe-nav-menu li.menu-item,
  .elementor-52 .hfe-nav-menu a.hfe-menu-item {
    background: transparent !important;
    background-color: transparent !important;
  }
  .elementor-52 .elementor-element-c6a6a11 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding-top: 16px !important;
    padding-bottom: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── Nav dropdown dark theme (header only) ── */
.elementor-51 .elementor-widget-navigation-menu .sub-menu,
.elementor-51 .elementor-widget-navigation-menu nav.hfe-dropdown,
.elementor-51 .elementor-widget-navigation-menu nav.hfe-dropdown-expandible {
  background-color: #0A0A12 !important;
  border: 1px solid rgba(139,60,247,0.2) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55) !important;
  min-width: 160px !important;
  width: max-content !important;
}
.elementor-51 .elementor-widget-navigation-menu .sub-menu a,
.elementor-51 .elementor-widget-navigation-menu nav.hfe-dropdown a,
.elementor-51 .elementor-widget-navigation-menu nav.hfe-dropdown-expandible a { white-space: nowrap !important; }
.elementor-51 .elementor-widget-navigation-menu .sub-menu li,
.elementor-51 .elementor-widget-navigation-menu nav.hfe-dropdown li,
.elementor-51 .elementor-widget-navigation-menu nav.hfe-dropdown-expandible li {
  background-color: transparent !important;
  border: none !important;
}
.elementor-51 .elementor-widget-navigation-menu nav.hfe-dropdown-expandible li.menu-item,
.elementor-51 .elementor-widget-navigation-menu nav.hfe-dropdown-expandible li.menu-item:not(:last-child) {
  border: none !important;
  border-bottom: none !important;
}
.elementor-widget-navigation-menu .sub-menu a.hfe-sub-menu-item,
.elementor-widget-navigation-menu nav.hfe-dropdown li a { color: var(--color-text-secondary) !important; }
.elementor-widget-navigation-menu .sub-menu a.hfe-sub-menu-item:hover,
.elementor-widget-navigation-menu nav.hfe-dropdown li a:hover {
  color: var(--color-text-main) !important;
  background-color: rgba(139,60,247,0.08) !important;
}

/* Kill borders on nav menu wrappers */
.elementor-51 div.hfe-nav-menu,
.elementor-51 ul.hfe-nav-menu,
.elementor-51 .hfe-nav-menu li.menu-item,
.elementor-52 div.hfe-nav-menu,
.elementor-52 ul.hfe-nav-menu,
.elementor-52 .hfe-nav-menu li.menu-item { border: none !important; border-bottom: none !important; outline: none !important; }
.elementor-52 nav.hfe-dropdown,
.elementor-52 nav.hfe-dropdown-expandible,
.elementor-52 .hfe-nav-menu__layout-vertical {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.hfe-menu-toggle,
.hfe-menu-toggle.sub-arrow { border: none !important; outline: none !important; box-shadow: none !important; }
.hfe-menu-toggle:hover,
.hfe-menu-toggle:focus,
.hfe-menu-toggle.sub-arrow:hover,
.hfe-menu-toggle.sub-arrow:focus { border: none !important; outline: none !important; box-shadow: none !important; }

/* ── Elementor card containers ── */
.e-con.r2g-card,
.elementor-container.r2g-card {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}
.e-con.r2g-card:hover,
.elementor-container.r2g-card:hover {
  border-color: rgba(139, 60, 247, 0.4) !important;
  box-shadow: 0 10px 40px rgba(139, 60, 247, 0.15) !important;
  transform: translateY(-3px) !important;
}

/* Icon-box hover */
.elementor-widget-icon-box {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.elementor-widget-icon-box:hover { transform: translateY(-3px); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-purple  { color: var(--color-purple-light) !important; }
.text-gold    { color: var(--color-gold) !important; }
.text-muted   { color: var(--color-text-secondary) !important; }

.bg-card      { background-color: var(--color-bg-card) !important; }
.bg-elevated  { background-color: var(--color-bg-elevated) !important; }

/* ============================================================
   GLOBAL — prevent horizontal overflow
   ============================================================ */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; }

/* ============================================================
   RESPONSIVE — TABLET (769px – 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .elementor:not(.elementor-51):not(.elementor-52):not(.elementor-11):not(.elementor-12) > .e-con > .e-con-inner {
    padding-block-start: 60px !important;
    padding-block-end: 60px !important;
  }
  .r2g-section-head { margin-bottom: 40px; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {
  :root { --section-pad: 48px 0; }

  #page, .site, #content, .site-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  .hfe-header-wrap, .hfe-footer-wrap,
  header.site-header, footer.site-footer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .elementor,
  .elementor > .e-con,
  .elementor > .e-con.e-con-boxed {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .elementor:not(.elementor-51):not(.elementor-52):not(.elementor-11):not(.elementor-12) > .e-con > .e-con-inner {
    padding-block-start: 44px !important;
    padding-block-end: 44px !important;
  }
  .r2g-section-head { margin-bottom: 28px; }
  .r2g-container { padding-left: 16px; padding-right: 16px; }
  .r2g-pricing-grid { grid-template-columns: 1fr; }
  .r2g-download-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  :root { --section-pad: 36px 0; }
  .elementor:not(.elementor-51):not(.elementor-52):not(.elementor-11):not(.elementor-12) > .e-con > .e-con-inner {
    padding-block-start: 32px !important;
    padding-block-end: 32px !important;
  }
  .r2g-section-head { margin-bottom: 20px; }
}

/* ============================================================
   404 PAGE
   ============================================================ */
.r2g-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}
.r2g-404__code {
  font-size: clamp(80px, 18vw, 140px);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-purple-light), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  display: block;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.r2g-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-top: 56px;
  flex-wrap: wrap;
}
.r2g-pagination a,
.r2g-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  text-decoration: none;
  transition: all 0.2s;
}
.r2g-pagination a:hover {
  border-color: var(--color-purple);
  color: var(--color-purple-light);
  background: rgba(139,60,247,0.08);
}
.r2g-pagination .current {
  background: var(--color-purple);
  border-color: var(--color-purple);
  color: #fff;
}

/* ============================================================
   CONTACT / WHMCS REDIRECT PAGE
   ============================================================ */
.r2g-redirect-wrap {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}
.r2g-redirect-icon {
  font-size: 56px;
  margin-bottom: 24px;
  display: block;
}

/* ============================================================
   HEADER — BOX CONSTRAINT + BUTTON WIDTH FIX
   ============================================================ */
/* Constrain boxed inner to 1280px */
.elementor-11 .e-con-boxed > .e-con-inner {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* My Account button: never stretch, always fit content */
.elementor-11 .elementor-element.elementor-element-3a2b51b {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
.elementor-11 .elementor-element.elementor-element-3a2b51b .elementor-button-wrapper,
.elementor-11 .elementor-element.elementor-element-3a2b51b .elementor-widget-container {
  width: auto !important;
}

/* ── Nav dropdown dark theme (header) ── */
.elementor-11 .elementor-widget-navigation-menu .sub-menu,
.elementor-11 .elementor-widget-navigation-menu nav.hfe-dropdown,
.elementor-11 .elementor-widget-navigation-menu nav.hfe-dropdown-expandible {
  background-color: #0A0A12 !important;
  border: 1px solid rgba(168,174,206,0.12) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45) !important;
  min-width: 160px !important;
  width: max-content !important;
}
.elementor-11 .elementor-widget-navigation-menu .sub-menu a,
.elementor-11 .elementor-widget-navigation-menu nav.hfe-dropdown a,
.elementor-11 .elementor-widget-navigation-menu nav.hfe-dropdown-expandible a {
  white-space: nowrap !important;
}
.elementor-11 .elementor-widget-navigation-menu .sub-menu li,
.elementor-11 .elementor-widget-navigation-menu nav.hfe-dropdown li,
.elementor-11 .elementor-widget-navigation-menu nav.hfe-dropdown-expandible li {
  background-color: transparent !important;
  border: none !important;
}
.elementor-11 .elementor-widget-navigation-menu nav.hfe-dropdown-expandible li.menu-item,
.elementor-11 .elementor-widget-navigation-menu nav.hfe-dropdown-expandible li.menu-item:not(:last-child) {
  border: none !important;
  border-bottom: none !important;
}

/* ============================================================
   HEADER — TABLET & MOBILE RESPONSIVE
   Layout: Logo ──── [My Account] [☰]
   ============================================================ */
@media (max-width: 1024px) {
  /* Outer boxed container: full-width row, no inner border */
  .elementor-11 .elementor-element-3651d76 {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  /* Inner container: full-width, no border/shadow of its own */
  .elementor-11 .elementor-element-3651d76 > .e-con-inner {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* 1. Logo — left edge, no grow */
  .elementor-11 .elementor-element.elementor-element-04c8254 {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin-right: auto !important;
  }
  .elementor-11 .elementor-element.elementor-element-04c8254 img {
    width: 180px !important;
  }

  /* 2. My Account button — right side, before hamburger */
  .elementor-11 .elementor-element.elementor-element-3a2b51b {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: 8px !important;
  }
  .elementor-11 .elementor-element.elementor-element-3a2b51b .elementor-button {
    padding: 9px 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* 3. Nav — rightmost; let dropdown escape via overflow:visible on parent chain */
  .elementor-11 .elementor-element.elementor-element-774e4dc {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .elementor-11 .elementor-element.elementor-element-774e4dc > .elementor-widget-container {
    width: auto !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  .elementor-11 .elementor-element.elementor-element-774e4dc div.hfe-nav-menu {
    width: auto !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
  }

  /* Hide HFE's icon spans — we use SVG background-image on the button */
  .elementor-11 .elementor-element-774e4dc .hfe-nav-menu__toggle .hfe-nav-menu-icon,
  .elementor-11 .elementor-element-774e4dc .hfe-nav-menu__toggle .hfe-nav-menu__toggle-icon {
    display: none !important;
  }

  /* Sub-arrow */
  .elementor-11 .elementor-element-774e4dc .hfe-has-submenu-container {
    position: relative !important;
  }
  .elementor-11 .elementor-element-774e4dc .sub-arrow {
    display: block !important;
    position: fixed !important;
    right: 20px !important;
    border: none !important;
    color: #A8AECE !important;
  }

  /* Hamburger toggle button */
  .elementor-11 .elementor-element-774e4dc .hfe-nav-menu__toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1.5px solid rgba(168,174,206,0.22) !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect y='0' width='20' height='2' rx='1' fill='%23F8F8FF'/%3E%3Crect y='6' width='20' height='2' rx='1' fill='%23F8F8FF'/%3E%3Crect y='12' width='20' height='2' rx='1' fill='%23F8F8FF'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 14px !important;
    transition: border-color 0.2s, background-color 0.2s !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
  .elementor-11 .elementor-element-774e4dc .hfe-nav-menu__toggle:hover {
    border-color: rgba(139,60,247,0.45) !important;
    background-color: rgba(139,60,247,0.06) !important;
  }

  /* Active (menu open): ✕ close icon */
  .elementor-11 .elementor-element-774e4dc .hfe-active-menu .hfe-nav-menu__toggle,
  .elementor-11 .elementor-element-774e4dc .hfe-nav-menu__toggle.hfe-active-menu {
    border-color: transparent !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cline x1='2' y1='2' x2='16' y2='16' stroke='%23F8F8FF' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='16' y1='2' x2='2' y2='16' stroke='%23F8F8FF' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-size: 18px 18px !important;
  }

  /* Full-width dropdown — covers all HFE mobile nav variants */
  .elementor-11 .elementor-element-774e4dc nav.hfe-dropdown,
  .elementor-11 .elementor-element-774e4dc nav.hfe-dropdown-expandible,
  .elementor-11 .elementor-element-774e4dc .hfe-nav-menu__layout-horizontal {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    background: #0A0A12 !important;
    border: none !important;
    border-top: 1px solid rgba(168,174,206,0.12) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45) !important;
    z-index: 9999 !important;
    padding: 10px 20px !important;
    box-sizing: border-box !important;
  }

  /* No borders / boxes on nav items or inner containers */
  .elementor-11 .elementor-element-774e4dc ul.hfe-nav-menu {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .elementor-11 .elementor-element-774e4dc .hfe-nav-menu__layout-horizontal li,
  .elementor-11 .elementor-element-774e4dc nav.hfe-dropdown li,
  .elementor-11 .elementor-element-774e4dc nav.hfe-dropdown-expandible li,
  .elementor-11 .elementor-element-774e4dc .hfe-nav-menu li.menu-item {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
  }
  .elementor-11 .elementor-element-774e4dc .hfe-nav-menu__layout-horizontal a.hfe-menu-item,
  .elementor-11 .elementor-element-774e4dc nav.hfe-dropdown a.hfe-menu-item,
  .elementor-11 .elementor-element-774e4dc nav.hfe-dropdown-expandible a.hfe-menu-item {
    padding: 11px 0 !important;
    font-size: 15px !important;
    display: flex !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 767px) {
  .elementor-11 .elementor-element.elementor-element-04c8254 img {
    width: 150px !important;
  }
  .elementor-11 .elementor-element.elementor-element-3a2b51b .elementor-button {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   FOOTER — NAV ALWAYS VISIBLE (no toggle)
   ============================================================ */
.elementor-12 .hfe-nav-menu__toggle,
.elementor-12 div.hfe-nav-menu-icon,
.elementor-12 .hfe-nav-menu .sub-arrow,
.elementor-12 .hfe-nav-menu .child-item {
  display: none !important;
}

.elementor-12 .hfe-nav-menu__layout-vertical,
.elementor-12 .hfe-nav-menu__layout-horizontal {
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  float: none !important;
  width: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.elementor-12 div.hfe-nav-menu {
  background: transparent !important;
  background-color: transparent !important;
}
.elementor-12 ul.hfe-nav-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
}
.elementor-12 .hfe-nav-menu li.menu-item {
  display: block !important;
  width: auto !important;
  background: none !important;
  border: none !important;
}
.elementor-12 .hfe-nav-menu a.hfe-menu-item {
  display: inline-block !important;
  color: #A8AECE !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  padding: 4px 0 !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  justify-content: flex-start !important;
}
.elementor-12 .hfe-nav-menu a.hfe-menu-item:hover {
  color: #F8F8FF !important;
}

/* Footer: also transparent bg on nav */
.elementor-12 nav.hfe-dropdown,
.elementor-12 nav.hfe-dropdown-expandible {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Footer mobile responsive ── */
@media (max-width: 767px) {
  .elementor-12 div.hfe-nav-menu,
  .elementor-12 .hfe-nav-menu__layout-vertical,
  .elementor-12 .hfe-nav-menu__layout-horizontal {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .elementor-12 .hfe-nav-menu li.menu-item,
  .elementor-12 .hfe-nav-menu a.hfe-menu-item {
    background: transparent !important;
    background-color: transparent !important;
  }
}

/* ============================================================
   LEGAL PAGES — Elementor container width + content typography
   Class added via Elementor css_classes: r2g-legal-page
   ============================================================ */
.r2g-legal-page > .e-con-inner {
  max-width: 820px !important;
}

.r2g-legal-page .elementor-widget-text-editor {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.8;
}

.r2g-legal-page .elementor-widget-text-editor h2 {
  color: var(--color-text-main);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 40px 0 12px;
}

.r2g-legal-page .elementor-widget-text-editor h3 {
  color: var(--color-text-main);
  font-size: 1rem;
  font-weight: 600;
  margin: 24px 0 8px;
}

.r2g-legal-page .elementor-widget-text-editor p {
  margin-bottom: 16px;
}

.r2g-legal-page .elementor-widget-text-editor ul,
.r2g-legal-page .elementor-widget-text-editor ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.r2g-legal-page .elementor-widget-text-editor li {
  margin-bottom: 6px;
}

.r2g-legal-page .elementor-widget-text-editor a {
  color: var(--color-purple-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.r2g-legal-page .elementor-widget-text-editor a:hover {
  color: var(--color-gold);
}

.r2g-legal-page .elementor-widget-text-editor strong {
  color: var(--color-text-main);
  font-weight: 600;
}

.r2g-legal-page .elementor-widget-text-editor em {
  color: var(--color-text-secondary);
  font-size: 13px;
}
