/* ================================================================
   SMMGEN CUSTOM STYLES
   All visual styles from homepage.twig, header_login.twig, and footer_login.twig
   ================================================================ */

/* ================================================================
   SECTION 0: ROOT VARIABLES
   All colors defined once – used throughout the entire site
   ================================================================ */

:root {
    /* ----- Brand Primary Colors (used for: buttons, links, headings, borders) ----- */
    --primary: #1F41BB;
    --primary-dark: #152E8A;
    --primary-light: #5666F2;
    --primary-gradient-start: #0D35C7;
    --primary-gradient-mid: #3C44D6;
    --primary-gradient-end: #9EC1FF;
    --global-button-purple: #6120E8;

    /* ----- FAQ Accordion Colors (used in FAQ section) ----- */
    --faq-blue: #5058C9;
    --faq-blue-light: #7187D4;
    --faq-blue-lighter: #D2DFFB;
    --faq-text-light: #E7E9FB;

    /* ----- Sign-in / Auth Colors (used on signin/signup pages) ----- */
    --auth-purple: #5f1de8;
    --auth-purple-hover: #4c16b9;
    --auth-purple-bg: rgba(95, 29, 232, 0.1);

    /* ----- Text Colors (used for all typography) ----- */
    --text-dark: #232323;          /* Headings, dark text */
    --text-dark-2: #1C1C1C;        /* Form labels */
    --text-body: #333333;          /* Body text */
    --text-light: #6B6B6B;         /* Secondary text */
    --text-muted: #888888;         /* Muted / placeholder text */
    --text-nav: #4A5568;           /* Navigation links */
    --text-black: #000000;
    --text-paragraph-1: #202633;   /* Paragraph text (dark) */
    --text-paragraph-2: #333333;   /* Paragraph text (medium) */
    --text-paragraph-4: #404A60;   /* Paragraph text (blog) */
    --text-white: #FFFFFF;         /* White text */
    --text-white-soft: #D1D5DB;    /* Soft white text */
    --text-white-muted: rgba(255, 255, 255, 0.8); /* Muted white */
    --text-footer-link: rgba(255, 255, 255, 0.8); /* Footer links */

    /* ----- Background Colors (used for sections, cards, modals) ----- */
    --bg-white: #FFFFFF;           /* White background (cards, modals) */
    --bg-light: #FAFAFB;           /* Light background (sections) */
    --bg-light-2: #F5F5F7;         /* Light background (alternative) */
    --bg-dark: #222222;            /* Dark background (trust section) */
    --bg-dark-2: #0D0D0E;          /* Dark background (API code block) */
    --bg-sidebar-dark: #121213;    /* Sidebar dark (dashboard) */
    --bg-footer-dark: #171E2F;     /* Footer icon backgrounds */

    /* ----- Border Colors (used for cards, inputs, dividers) ----- */
    --border-light: #E5E5E5;       /* Light borders */
    --border-medium: #CACACA;      /* Medium borders */
    --border-card: #E2E2E2;        /* Card borders */
    --border-input: #D0D0D0;       /* Input field borders */
    --border-white-soft: rgba(255, 255, 255, 0.15); /* Soft white border */
    --border-white-light: rgba(255, 255, 255, 0.2); /* Light white border */

    /* ----- Shadow Colors (used for cards, dropdowns, modals) ----- */
    --shadow-card: rgba(0, 0, 0, 0.08);      /* Card shadows */
    --shadow-dropdown: rgba(0, 0, 0, 0.12);  /* Dropdown shadows */
    --shadow-auth: rgba(0, 0, 0, 0.06);      /* Auth box shadows */
    --shadow-trust: rgba(0, 0, 0, 0.08);     /* Trust section shadows */

    /* ----- Star / Rating Colors (used in hero reviews) ----- */
    --star-gold: #FFC53D;

    /* ----- Gradient Blur Colors (used in Why Choose section) ----- */
    --gradient-blur-start: #D4DFFF;
    --gradient-blur-mid: rgba(212, 223, 255, 0.7);
    --gradient-blur-light: rgba(212, 223, 255, 0.35);
    --gradient-blur-fade: rgba(212, 223, 255, 0.12);

    /* ----- Platform Gradient (used in platform panel images) ----- */
    --platform-gradient-start: #E3EBFF;
    --platform-gradient-end: #85A3FF;

    /* ----- Dot Grid (used in API section) ----- */
    --dot-grid-color: #EFF0F5;

    /* ----- Misc ----- */
    --black-soft: rgba(0, 0, 0, 0.04);
    --white-soft: rgba(255, 255, 255, 0.04);
}

/* ================================================================
   HEADER STYLES – Scoped to .smmgen-header
   ================================================================ */

/* ----- Navbar Font: Roboto ----- */
.smmgen-header nav a,
.smmgen-header nav button {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.15rem !important;
}

/* ----- ALL nav links + dropdown buttons – default state (black text) ----- */
.smmgen-header nav a,
.smmgen-header nav button {
    color: var(--text-black) !important;
    background-color: transparent !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
}

/* ----- Dropdown items (inside .absolute) – revert to gray text, they'll get their own hover later ----- */
.smmgen-header .absolute a {
    color: var(--text-nav) !important;
}

/* ----- MAIN NAV LINKS + BUTTONS – hover turns text blue (ALL items) ----- */
.smmgen-header nav a:hover,
.smmgen-header nav button:hover {
    color: var(--primary) !important;
    background-color: rgba(31, 65, 187, 0.08) !important;
    border-radius: 8px !important;
}

/* ----- DROPDOWN MENU ITEMS (links inside the dropdown) - SLIDE effect on hover, keep blue ----- */
.smmgen-header .absolute a:hover {
    color: var(--primary) !important;
    background-color: rgba(31, 65, 187, 0.08) !important;
    border-radius: 8px !important;
    transform: translateX(6px) !important; /* Slides to the right */
}

/* ----- Home link (active) – keep blue (handled by .text-primary class) ----- */
.smmgen-header nav a.text-primary {
    color: var(--primary) !important;
}

/* ----- Spacing between nav items ----- */
.smmgen-header nav.gap-3 {
    gap: 1rem !important;
}

@media (min-width: 1280px) {
    .smmgen-header nav.gap-3 {
        gap: 1rem !important;
    }
}

/* ----- Space between navigation and Login/Sign Up buttons ----- */
.smmgen-header .justify-self-end {
    margin-left: 2rem !important;
}

@media (max-width: 1023px) {
    .smmgen-header .container.flex {
        gap: 1.5rem !important;
    }
}

/* ----- Header bar – default state (transparent) ----- */
.smmgen-header {
    background-color: transparent !important;
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease !important;
    border-bottom: 1px solid transparent !important;
}

/* ----- Header bar – scrolled state (glossy glass) ----- */
.smmgen-header.scrolled {
    background-color: #ffffffb3 !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a !important;
    border-bottom: 1px solid #ffffff4d !important;
}

/* ----- LOG IN BUTTON (outline style) ----- */
.smmgen-header .border-primary {
    border-color: var(--primary) !important;
}
.smmgen-header .bg-background {
    background-color: var(--bg-white) !important;
}
.smmgen-header .text-primary {
    color: var(--primary) !important;
}
.smmgen-header a[href="/signin"]:hover {
    background-color: var(--primary) !important;
    color: var(--text-white) !important;
}

/* ----- SIGN UP BUTTON (solid style) ----- */
.smmgen-header .bg-primary {
    background-color: var(--primary) !important;
    color: var(--text-white) !important;
}
.smmgen-header .bg-primary:hover {
    background-color: var(--primary-dark) !important;
    color: var(--text-white) !important;
}

/* ----- MOBILE MENU TOGGLE (hamburger icon) ----- */
.smmgen-header button[aria-label="Toggle menu"]:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: var(--primary) !important;
}

/* ----- Header container spacing ----- */
.smmgen-header .container {
    max-width: 1440px !important;
    padding-inline: 1rem !important;
    margin-inline: auto !important;
}
@media (min-width: 640px) {
    .smmgen-header .container {
        padding-inline: 1.5rem !important;
    }
}
@media (min-width: 1024px) {
    .smmgen-header .container {
        padding-inline: 2rem !important;
    }
}

/* ========================================
   FIX: Mobile Slider Custom Properties
   (Add this to your /css/custom.css)
   ======================================== */

/* 1. Fix missing z-index (Tailwind only goes up to z-50 by default) */
.z-60 {
  z-index: 60;
}

/* 2. Define your brand color variables (adjust values if needed) */
:root {
  --primary: #1F41BB;          /* Your main brand blue */
  --primary-darker: #112779;   /* Darker blue for hover states */
  --primary-foreground: #ffffff;
  --background: #ffffff;
  --nav: #121212;              /* Dark text color used in nav */
}

/* 3. Map Tailwind-like utility classes to your CSS variables */

/* Backgrounds */
.bg-primary {
  background-color: var(--primary);
}
.bg-primary-darker {
  background-color: var(--primary-darker);
}
.bg-background {
  background-color: var(--background);
}

/* Text colors */
.text-primary {
  color: var(--primary);
}
.text-primary-foreground {
  color: var(--primary-foreground);
}


/* Borders */
.border-primary {
  border-color: var(--primary);
}

/* Opacity variants (Tailwind CDN might not compile these correctly without a config) */
.border-primary\/20 {
  border-color: rgba(31, 65, 187, 0.2);
}
.border-primary\/30 {
  border-color: rgba(31, 65, 187, 0.3);
}

/* Hover states */
.hover\:bg-primary\/5:hover {
  background-color: rgba(31, 65, 187, 0.05);
}
.hover\:bg-primary\/5:hover {
  background-color: rgba(31, 65, 187, 0.05);
}
.hover\:border-primary\/30:hover {
  border-color: rgba(31, 65, 187, 0.3);
}

/* 4. Ensure the slider takes full viewport height on mobile */
#mobileMenu {
  height: 100vh; /* Fallback */
  height: 100dvh; /* Dynamic viewport height for modern mobile browsers */
}


/* ================================================================
   SECTION 16: HEADER DROPDOWN SUBMENU TEXT SIZE
   Controls: Link text inside Services / Service Area / Company dropdowns
   ================================================================ */

.smmgen-header nav[aria-label$="menu"] .absolute a {
    font-size: 15px !important;
}

/* ================================================================
   SECTION 1: CONTAINER OVERRIDE (Global)
   Controls: All .container elements across the entire site
   ================================================================ */

.container {
  max-width: 1440px !important;
  padding-inline: 1rem !important;
  margin-inline: auto !important;
}
@media (min-width: 640px) {
  .container {
    padding-inline: 1.5rem !important;
  }
}
@media (min-width: 1024px) {
  .container {
    padding-inline: 2rem !important;
  }
}

/* ================================================================
   SECTION 2: SECTION BACKGROUNDS (Global)
   Controls: Background images for Hero, What is SMM, Platform tabs, Pricing, FAQ
   ================================================================ */

.hero-bg {
  background-blend-mode: multiply !important;
  background-image: url('/images/updated-backgrounds/section-bg-1.svg') !important;
  background-position: top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.second-section-bg,
.what-smm-panel-bg {
  background-image: url('/images/updated-backgrounds/section-bg-2.webp') !important;
  background-position: top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.service-section-bg {
  background-image: url('/images/service-section-bg.webp') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.platform-panel-bg {
  background-image: url('/images/service-bg.webp') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.pricing-section-bg {
  background-image: url('/images/pricing-bg.webp') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.how-it-works-bg {
  background-image: url('/images/updated-backgrounds/section-bg-3.svg') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.faq-section-bg {
  background-image: url('/images/updated-backgrounds/section-bg-4.webp') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* ----- Flag icons in Service Area dropdown ----- */
.smmgen-header .flag-icon {
    width: 1.2rem !important;
    height: 1.2rem !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 0.5rem !important;
}

/* ================================================================
   SECTION 3: TEXT & HEADING GRADIENTS (Global)
   Controls: Blue text color and gradient heading effects
   ================================================================ */

.text-gradient {
  color: var(--primary) !important;
}

.heading-gradient {
  background: linear-gradient(90deg, var(--primary-gradient-start) 0%, var(--primary-gradient-mid) 26.44%, var(--primary-gradient-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   SECTION 4: ANIMATIONS (Global)
   Controls: Hero star pop animation and social media icon bounce
   ================================================================ */

@keyframes hero-star-pop {
  0%   { transform: scale(0); }
  10%  { transform: scale(1.1); }
  15%, 85% { transform: scale(1); }
  100% { transform: scale(0); }
}

.hero-star-pop {
  will-change: transform !important;
  animation: hero-star-pop 2.4s ease-out infinite !important;
}

.hero-star-pop:first-child {
  animation-delay: 0s !important;
}
.hero-star-pop:nth-child(2) {
  animation-delay: 0.2s !important;
}
.hero-star-pop:nth-child(3) {
  animation-delay: 0.4s !important;
}
.hero-star-pop:nth-child(4) {
  animation-delay: 0.6s !important;
}
.hero-star-pop:nth-child(5) {
  animation-delay: 0.8s !important;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-10%);
    animation-timing-function: cubic-bezier(.45,.05,.55,.95);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(.45,.05,.55,.95);
  }
}

.social_media_icon {
  object-fit: contain !important;
  will-change: transform !important;
  flex-shrink: 0 !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  animation-name: bounce !important;
  animation-duration: 2.4s !important;
  animation-iteration-count: infinite !important;
}

.social_media_icon:first-child {
  animation-delay: 0s !important;
}
.social_media_icon:nth-child(2) {
  animation-delay: .4s !important;
}
.social_media_icon:nth-child(3) {
  animation-delay: .8s !important;
}
.social_media_icon:nth-child(4) {
  animation-delay: 1.2s !important;
}
.social_media_icon:nth-child(5) {
  animation-delay: 1.6s !important;
}
.social_media_icon:nth-child(6) {
  animation-delay: 2s !important;
}

@media (min-width: 1200px) {
  .social_media_icon {
    width: 4rem !important;
    height: 4rem !important;
  }
}

/* ================================================================
   SECTION 5: SCROLL REVEAL (Global)
   Controls: Elements that fade in when scrolled into view
   ================================================================ */

[contain\:layout] {
  opacity: 0 !important;
  transform: translate3d(0, 64px, 0) !important;
  transition: opacity 0.7s ease, transform 0.7s ease !important;
}

.reveal-item {
  opacity: 0;
  transform: translate3d(0, 64px, 0);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-item.reveal-delay-0 { transition-delay: 0ms; }
.reveal-item.reveal-delay-1 { transition-delay: 90ms; }
.reveal-item.reveal-delay-2 { transition-delay: 180ms; }
.reveal-item.reveal-delay-3 { transition-delay: 270ms; }

/* ================================================================
   SECTION 6: DECORATIVE BLURS & PATTERNS (Global)
   Controls: Radial blur in Why Choose, step card texture, API dot grid
   ================================================================ */

.why-choose-blur-bg {
  background: radial-gradient(
    ellipse at center,
    var(--gradient-blur-start) 0%,
    var(--gradient-blur-mid) 30%,
    var(--gradient-blur-light) 50%,
    var(--gradient-blur-fade) 70%,
    rgba(212, 223, 255, 0.04) 85%,
    transparent 100%
  );
}

.step-card-bg {
  background-image: url('/images/backgrounds/card-bg-3.webp');
}

.api-dot-grid-bg {
  background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

/* ================================================================
   SECTION 7: PLATFORM PANEL GRADIENTS (Global)
   Controls: Gradient backgrounds on platform panel images
   ================================================================ */

.platform-gradient-bg {
  background: linear-gradient(to bottom, var(--platform-gradient-start), var(--platform-gradient-end)) !important;
}

/* ================================================================
   SECTION 8: BLOG STYLES (Global)
   Controls: Blog detail page typography and layout
   ================================================================ */

.blog-detail-content {
  flex-direction: column !important;
  gap: 1rem !important;
  display: flex !important;
}

.blog-detail-content h1,
.blog-detail-content h2,
.blog-detail-content h3,
.blog-detail-content h4 {
  color: var(--text-dark) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.blog-detail-content h1 {
  margin-bottom: 1rem !important;
  font-size: 2.25rem !important;
}

.blog-detail-content h2 {
  margin-bottom: .75rem !important;
  font-size: 1.875rem !important;
}

.blog-detail-content h3 {
  margin-bottom: .75rem !important;
  font-size: 1.5rem !important;
}

.blog-detail-content p,
.blog-detail-content span {
  color: var(--text-paragraph-4) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

.blog-detail-content p {
  margin-bottom: 1rem !important;
}

.blog-detail-content ul {
  list-style: outside !important;
  padding-left: 1.25rem !important;
}

.blog-detail-content ol {
  list-style: decimal !important;
  padding-left: 1.25rem !important;
}

.blog-detail-content li {
  margin-bottom: .5rem !important;
  line-height: 1.6 !important;
}

.blog-detail-content a {
  color: var(--primary) !important;
  text-decoration: underline !important;
}

/* ================================================================
   SECTION 9: IMAGE FIX (Global)
   Controls: All <img> tags – ensures responsiveness
   ================================================================ */

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

/* ================================================================
   SECTION 10: ADDITIONAL UTILITIES (Global)
   Controls: Bootstrap grid fix, smooth scroll, focus states
   ================================================================ */

.row > * {
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-right: calc(var(--bs-gutter-x) * .5) !important;
  padding-left: calc(var(--bs-gutter-x) * .5) !important;
  margin-top: var(--bs-gutter-y) !important;
}

html {
  scroll-behavior: smooth !important;
}

*:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}

/* ================================================================
   SECTION 11: SIGN-IN / SIGN-UP PAGE STYLES (Global)
   Controls: Authentication pages (signin, signup, signup-v2)
   Components: Top bar, back button, auth tabs, form, buttons
   ================================================================ */

.signin_top_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}
.signin_top_bar .signin_logo {
    flex: 1;
    text-align: center;
}
.signin_top_bar .signin_logo img {
    max-height: 48px;
    width: auto;
}

.signin_top_bar .signin_back_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--border-light);
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(35,35,35,0.06);
    transition: all 0.25s ease;
}
.signin_top_bar .signin_back_btn .back_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--auth-purple-bg);
    color: var(--auth-purple);
    font-size: 16px;
    transition: all 0.25s ease;
}
.signin_top_bar .signin_back_btn:hover {
    color: var(--text-white);
    background: var(--auth-purple);
    border-color: var(--auth-purple);
    box-shadow: 0 6px 16px rgba(95,29,232,0.28);
    transform: translateY(-1px);
}
.signin_top_bar .signin_back_btn:hover .back_icon {
    background: rgba(255,255,255,0.2);
    color: var(--text-white);
}
.signin_top_bar .signin_back_spacer {
    width: 118px;
    flex-shrink: 0;
}

.auth_tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.auth_tabs_inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--border-light);
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(35,35,35,0.05);
    backdrop-filter: blur(6px);
}
.auth_tabs_inner a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-dark);
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.25s ease;
}
.auth_tabs_inner a.active,
.auth_tabs_inner a:hover {
    color: var(--text-white);
    background: var(--auth-purple);
    box-shadow: 0 6px 16px rgba(95,29,232,0.28);
}

.signup_box {
    background: var(--bg-white);
    padding: 32px 40px;
    border-radius: 24px;
    border: 1px solid var(--border-medium);
    box-shadow: 0 8px 30px var(--shadow-auth);
}
.signup_title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 6px;
}
.sigup_text {
    font-size: 15px;
    color: var(--text-light);
    max-width: 500px;
    margin: 0 auto 8px;
    line-height: 1.5;
}

.form-home .form-group {
    margin-bottom: 18px;
}
.form-home label.control-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark-2);
    display: block;
    margin-bottom: 4px;
}
.form-home .input_has_icon {
    position: relative;
}
.form-home .input_has_icon .icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
    pointer-events: none;
}
.form-home .input_has_icon input {
    padding-left: 44px;
    height: 48px;
    font-size: 15px;
    border-radius: 12px;
    border: 1px solid var(--border-input);
    width: 100%;
    transition: border-color 0.2s;
}
.form-home .input_has_icon input:focus {
    border-color: var(--auth-purple);
    outline: none;
    box-shadow: 0 0 0 3px rgba(95,29,232,0.12);
}

.form-check-input:checked {
    background-color: var(--auth-purple);
    border-color: var(--auth-purple);
}

.text-lost-pwd a.link {
    color: var(--auth-purple);
    font-weight: 600;
    text-decoration: none;
}
.text-lost-pwd a.link:hover {
    text-decoration: underline;
}
.home_link {
    color: var(--auth-purple);
    font-weight: 600;
    text-decoration: none;
}
.home_link:hover {
    text-decoration: underline;
}

.btn-primary {
    background: var(--auth-purple) !important;
    border: none !important;
    height: 48px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    transition: background 0.2s !important;
    color: var(--text-white) !important;
}
.btn-primary:hover {
    background: var(--auth-purple-hover) !important;
}

@media (max-width: 575px) {
    .signin_top_bar .signin_logo img {
        max-height: 40px;
    }
    .signin_top_bar .signin_back_btn {
        padding: 8px 12px 8px 8px;
        font-size: 13px;
        gap: 6px;
    }
    .signin_top_bar .signin_back_btn .back_icon {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    .signin_top_bar .signin_back_btn .back_label_full {
        display: none;
    }
    .signin_top_bar .signin_back_spacer {
        width: 72px;
    }
    .auth_tabs_inner a {
        min-width: 100px;
        padding: 11px 20px;
        font-size: 14px;
    }
    .signup_box {
        padding: 24px 16px;
    }
}

#signup_v2 .signup_box {
    padding: 32px 40px;
}
@media (max-width: 575px) {
    #signup_v2 .signup_box {
        padding: 24px 16px;
    }
}

/* ================================================================
   SECTION 12: FAQ ACCORDION (Global)
   Controls: FAQ accordion items – blue background when open
   ================================================================ */

[data-slot="accordion-item"][data-state="open"] {
    background-color: var(--faq-blue) !important;
}

[data-slot="accordion-item"][data-state="open"] .group-data-\[state\=open\]\:text-white,
[data-slot="accordion-item"][data-state="open"] .group-data-\[state\=open\]\:font-bold {
    color: var(--text-white) !important;
}

/* ================================================================
   SECTION 13: FOOTER STYLES – Scoped to .smmgen-footer
   Controls: Footer background, all footer links, country tags
   ================================================================ */

.smmgen-footer {
    background-image: url('/images/updated-backgrounds/footer.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ----- All footer links – clean, no background, light text ----- */
.smmgen-footer a {
    background-color: transparent !important;
    color: var(--text-footer-link) !important;
    transition: color 0.2s ease !important;
}

.smmgen-footer a:hover {
    color: var(--text-white) !important;
    background-color: transparent !important;
}

/* ----- Override any leftover homepage styles (just in case) ----- */
.smmgen-footer nav a,
.smmgen-footer .country-tag {
    background-color: transparent !important;
}

.smmgen-footer nav a:hover,
.smmgen-footer .country-tag:hover {
    background-color: transparent !important;
}

/* ----- Country tags (keep their own background) ----- */
.smmgen-footer .country-tag {
    display: inline-block;
    border-radius: 9999px;
    border: 1px solid var(--border-white-light);
    background-color: rgba(0, 0, 0, 0.3) !important;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--text-white);
    transition: background-color 0.2s;
    text-decoration: none;
}

.smmgen-footer .country-tag:hover {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: var(--text-white);
}

/* ================================================================
   SECTION 14: DASHBOARD STYLES (Global – only used when logged in)
   Controls: Authenticated user dashboard card and textarea
   ================================================================ */

#block_95 .card {
    background: var(--bg-white) !important;
    box-shadow: 0 5px 5px rgba(7, 7, 7, 10%) !important;
    margin-bottom: 15px !important;
    border-radius: 15px !important;
    border: 1px solid transparent !important;
    margin-top: 100px !important;
    min-width: 100% !important;
    padding: 10px !important;
}

#block_95 textarea {
    height: 150px;
}

/* ================================================================
   SECTION 15: HOMEPAGE-SPECIFIC STYLES – Scoped to .homepage-content
   Controls: All homepage-only elements (CTA, tabs, buttons, text links)
   ================================================================ */

/* ================================================================
   PART 15.1: CTA BOX (Ready to Start? section)
   ================================================================ */

/* ----- Round edges ----- */
.homepage-content .rounded-4xl {
    border-radius: 2rem !important;
    overflow: hidden !important;
}

/* ================================================================
   PART 15.2: CTA BUTTONS (Create Free Account, Browse All Services, Contact Support)
   ================================================================ */

/* ----- CREATE FREE ACCOUNT Button (Solid) ----- */
.homepage-content .relative.max-w-360 a[href="/signup"] {
    background-color: var(--primary) !important;
    color: var(--text-white) !important;
    border: 2px solid transparent !important;   /* allows the white traveling border */
}
.homepage-content .relative.max-w-360 a[href="/signup"]:hover {
    background-color: var(--primary-dark) !important;
    color: var(--text-white) !important;
}

/* ----- BROWSE ALL SERVICES Button (Outline) ----- */
.homepage-content .relative.max-w-360 a[href="/services"] {
    background-color: var(--bg-white) !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}
.homepage-content .relative.max-w-360 a[href="/services"]:hover {
    background-color: var(--primary) !important;
    color: var(--text-white) !important;
    border-color: var(--primary) !important;
}

/* ----- CONTACT SUPPORT Button (Outline) ----- */
.homepage-content .relative.max-w-360 a[href="/contact-us"] {
    background-color: var(--bg-white) !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}
.homepage-content .relative.max-w-360 a[href="/contact-us"]:hover {
    background-color: var(--primary) !important;
    color: var(--text-white) !important;
    border-color: var(--primary) !important;
}

/* ================================================================
   LEARN MORE ABOUT SMMGEN BUTTON (with data-slot="button")
   ================================================================ */

/* ----- Target ONLY the button (not text links) ----- */
.homepage-content a[data-slot="button"][href="/about-us"] {
    color: var(--text-white) !important;
    background-color: var(--primary) !important;
    transition: all 0.3s ease !important;
}

.homepage-content a[data-slot="button"][href="/about-us"]:hover {
    color: var(--text-white) !important;
    background-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(31, 65, 187, 0.3) !important;
}

/* ================================================================
   PART 15.4: PLATFORM TABS (Every Platform. Every Service. One Dashboard)
   ================================================================ */

.homepage-content [role="tab"] {
    transition: all 0.4s ease !important;
    position: relative !important;
}

/* ----- Inactive tabs hover – light gradient background ----- */
.homepage-content [role="tab"]:not([aria-selected="true"]):hover {
    background: linear-gradient(135deg, #E8EEFF 0%, #D6E0FF 100%) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(31, 65, 187, 0.12) !important;
}

/* ----- Active tab – solid blue gradient ----- */
.homepage-content [role="tab"][aria-selected="true"] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: var(--text-white) !important;
    border-color: var(--primary) !important;
}

/* ----- Active tab hover – lift only ----- */
.homepage-content [role="tab"][aria-selected="true"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(31, 65, 187, 0.2) !important;
}

/* ----- Icons keep visible on hover ----- */
.homepage-content [role="tab"]:not([aria-selected="true"]):hover img {
    filter: none !important;
}

/* ================================================================
   PLATFORM TABS – PURPLE GRADIENT ACTIVE + WHITE BORDER ON HOVER
   ================================================================ */

/* 1. Active tab – purple gradient background (same as global button) */
.homepage-content [role="tab"][aria-selected="true"] {
    background: var(--global-button-gradient) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--global-button-text) !important;
}

/* 2. Ensure all tabs have relative positioning for the pseudo-element */
.homepage-content [role="tab"] {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* 3. White traveling border (hidden by default) – same as global */
.homepage-content [role="tab"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, transparent, #fff, transparent) border-box !important;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    animation: borderTravel 2s linear infinite !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* 4. Show white border on hover – for ALL tabs */
.homepage-content [role="tab"]:hover::before {
    opacity: 1 !important;
}

/* ================================================================
   PART 15.5: VIEW SERVICE BUTTONS (All 16 platform panels)
   - Purple Gradient Background + White Traveling Border on Hover
   ================================================================ */

/* Default state – purple gradient background */
.homepage-content a[href$="-smm-panel"] {
    background: var(--global-button-gradient) !important;
    background-color: transparent !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* Hover state – keep same purple gradient, lift & shadow only */
.homepage-content a[href$="-smm-panel"]:hover {
    background: var(--global-button-gradient) !important;
    background-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(97, 32, 232, 0.3) !important;
}

/* White traveling border (pseudo-element) – same as global */
.homepage-content a[href$="-smm-panel"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, transparent, #fff, transparent) border-box !important;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    animation: borderTravel 2s linear infinite !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Show white border on hover */
.homepage-content a[href$="-smm-panel"]:hover::before {
    opacity: 1 !important;
}

/* ================================================================
   PART 15.6: HOMEPAGE TEXT LINKS (remove blue background, keep blue text)
   ================================================================ */

/* ----- White Label SMM Panel link ----- */
.homepage-content a[href="/white-label-smm-panel"] {
    background-color: transparent !important;
    color: var(--primary) !important;
}
.homepage-content a[href="/white-label-smm-panel"]:hover {
    background-color: transparent !important;
    color: var(--primary) !important;
}

/* ----- Cheap SMM Panel link ----- */
.homepage-content a[href="/cheap-smm-panel"] {
    background-color: transparent !important;
    color: var(--primary) !important;
}
.homepage-content a[href="/cheap-smm-panel"]:hover {
    background-color: transparent !important;
    color: var(--primary) !important;
}

/* ================================================================
   PART 15.7: UNIQUE CLASS BUTTONS (scoped by unique class, not parent)
   ================================================================ */

/* ----- Start Your First Order Now button (How It Works section) ----- */
.start-first-order-btn {
    color: var(--text-white) !important;
    background-color: var(--primary) !important;
    transition: all 0.3s ease !important;
}
.start-first-order-btn:hover {
    color: var(--text-white) !important;
    background-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(31, 65, 187, 0.3) !important;
}

/* ----- Start Reselling button (API section) ----- */
.start-reselling-btn {
    color: var(--text-white) !important;
    background-color: var(--primary) !important;
    transition: all 0.3s ease !important;
}
.start-reselling-btn:hover {
    color: var(--text-white) !important;
    background-color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(31, 65, 187, 0.3) !important;
}

/* ================================================================
   PART 15.8: HERO SECTION BUTTONS (Sign In Now & Sign Up Free)
   ================================================================ */

/* ----- SIGN IN NOW Button (Hero section only) ----- */
.homepage-content .hero-bg a[href="/signin"] {
    background-color: var(--bg-white) !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    transition: all 0.3s ease !important;
}

.homepage-content .hero-bg a[href="/signin"]:hover {
    background-color: var(--primary) !important;
    color: var(--text-white) !important;
    border-color: var(--primary) !important;
}

.homepage-content .hero-bg a[href="/signup"] {
    background-color: var(--primary) !important;
    color: var(--text-white) !important;
    border: 2px solid transparent !important;  /* Allows the traveling border to show */
    transition: all 0.3s ease !important;
}

.homepage-content .hero-bg a[href="/signup"]:hover {
    background-color: var(--primary-dark) !important;
    color: var(--text-white) !important;
}

/* ================================================================
   PART 15.9: HERO CTA BUTTONS – FORCE SIDE-BY-SIDE ON MOBILE
   + REDUCED HORIZONTAL PADDING (both desktop & mobile)
   ================================================================ */

.hero-signin-btn,
.hero-signup-btn {
    padding-left: 1.05rem !important;
    padding-right: 1.05rem !important;
}

@media (max-width: 639px) {
    .hero-cta-group {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }
    .hero-signin-btn,
    .hero-signup-btn {
        width: calc(50% - 0.25rem) !important;
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
        font-size: 1rem !important;
        gap: 0.5rem !important;
    }
    .hero-signup-btn img {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}

/* ================================================================
   PART 15.10: HERO CTA BUTTONS – DESKTOP PADDING & GAP INCREASE
   ================================================================ */

@media (min-width: 640px) {
    .hero-cta-group {
        gap: 1.25rem !important;
    }
    .hero-signin-btn,
    .hero-signup-btn {
        padding-left: 2.1875rem !important;
        padding-right: 2.1875rem !important;
    }
}

/* ================================================================
   RESET PASSWORD PAGE STYLES (Scoped to .page-resetpassword)
   ================================================================ */

/* ----- Page Container ----- */
.page-resetpassword {
    display: flex;
    justify-content: center;
    align-items: flex-start !important;
    min-height: 100vh;
    min-height: 100dvh;
    background: #F5F5F7 !important;
    background-attachment: fixed;
    background-size: cover;
    font-family: sans-serif;
    position: relative !important;
    overflow: hidden;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ----- Active Background Shapes (Blobs) ----- */
/* Soft purple glow (Top Left) */
.page-resetpassword::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    top: 10%;
    left: 10%;
    background: rgba(139, 92, 246, 0.45); /* Soft Purple */
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
}

/* Soft pink glow (Bottom Right) */
.page-resetpassword::after {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    bottom: 5%;
    right: 10%;
    background: rgba(236, 72, 153, 0.35); /* Soft Pink */
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
}

/* ----- Disable old ball element ----- */
.page-resetpassword .signup_ball {
    display: none !important;
}

/* ----- WRAPPER (holds the card) ----- */
.page-resetpassword .sign_up_wrap {
    position: relative;
    z-index: 1;
    width: 520px;
    margin: auto;
    margin-top: 18vh !important; /* Fixes top, allows card to grow downward */
    transform: none !important;
}

/* ----- GLASS CARD ----- */
.page-resetpassword .total_signup {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 35px 30px 30px;
    box-sizing: border-box;
    background: rgba(200, 200, 205, 0.55) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    text-align: center;
}

/* ----- TITLE & SUBTITLE ----- */
.page-resetpassword .signup_title_wrap {
    position: relative;
    padding-bottom: 28px;
    margin-bottom: 28px;
}
.page-resetpassword .signup_title_wrap h2 {
    margin: 0 0 5px;
    color: #5721e9;
    font-size: 30px;
    font-weight: 800;
}
.page-resetpassword .signup_title_wrap p {
    margin: 0;
    color: #222;
    font-size: 14px;
}

/* ----- ANIMATED LINE ----- */
.page-resetpassword .signup_title_wrap:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 4px;
    transform: translateX(-50%);
    background: #5b18ef;
    border-radius: 10px;
    animation: linePulse 2s infinite ease-in-out;
}
.page-resetpassword .signup_title_wrap:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 45px;
    height: 4px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #fff, transparent);
    z-index: 2;
    animation: lineShine 1.3s infinite linear;
}
@keyframes linePulse {
    0%   { width: 40px; }
    50%  { width: 205px; }
    100% { width: 40px; }
}
@keyframes lineShine {
    from { margin-left: -120px; }
    to   { margin-left: 120px; }
}

/* ----- FORM FIELDS ----- */
.page-resetpassword .form_group {
    position: relative;
    width: 100%;
    margin-bottom: 18px !important;
}
.page-resetpassword .form_icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5b16ef;
    color: #fff;
    border-radius: 10px;
    font-size: 18px;
    z-index: 2;
}
.page-resetpassword .form_control {
    width: 100%;
    height: 55px;
    padding: 0 15px 0 62px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 15px;
    outline: none;
    color: #333 !important;
}
.page-resetpassword .form_control::placeholder {
    color: #888 !important;
}
.page-resetpassword .form_control:focus {
    border-color: #5b21f6;
}

/* ----- BUTTON ----- */
.page-resetpassword .signup_button {
    margin-top: 30px;
}
.page-resetpassword .btn_signup {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(90deg, #5716ff, #6610ef);
    transition: all 0.2s ease;
}
.page-resetpassword .btn_signup:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(91, 22, 239, 0.25);
}

/* ----- HIDE UNUSED BACKGROUND ----- */
.page-resetpassword .signUpBgWrap,
.page-resetpassword .singup_bg {
    display: none !important;
}

/* ================================================================
   RESET PASSWORD SUCCESS MESSAGE STYLES
   ================================================================ */

.page-resetpassword .alert,
.page-resetpassword .alert-success,
.page-resetpassword .success-message {
    display: block !important;
    background-color: #d4edda !important; /* Light green background */
    border: 1px solid #c3e6cb !important;  /* Green border */
    color: #155724 !important;             /* Dark green text */
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin-bottom: 20px !important;        /* Space below message */
    width: 100% !important;
    box-sizing: border-box !important;
}

.page-resetpassword .alert svg,
.page-resetpassword .alert .icon {
    vertical-align: middle !important;
    margin-right: 8px !important;
    color: #155724 !important;
}

/* ================================================================
   MOBILE RESPONSIVENESS FOR RESET PASSWORD PAGE (Up to 768px)
   ================================================================ */

@media (max-width: 768px) {
    .page-resetpassword {
        transform: none !important;
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 1rem !important;
        margin: 0 !important;
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        overflow: hidden !important;
        background: #F5F5F7 !important;
        box-sizing: border-box !important;
    }

    /* Blobs fixed */
    .page-resetpassword::before {
        position: fixed !important;
        width: 250px;
        height: 250px;
        top: 5%;
        left: -10%;
        background: rgba(139, 92, 246, 0.45) !important;
        border-radius: 50%;
        filter: blur(70px);
        z-index: 0 !important;
        pointer-events: none !important;
    }
    .page-resetpassword::after {
        position: fixed !important;
        width: 300px;
        height: 300px;
        bottom: 5%;
        right: -15%;
        background: rgba(236, 72, 153, 0.35) !important;
        border-radius: 50%;
        filter: blur(80px);
        z-index: 0 !important;
        pointer-events: none !important;
    }

    /* Card wrapper - wider and top fixed */
    .page-resetpassword .sign_up_wrap {
        width: 100% !important;
        max-width: 600px !important; /* Adjust this number for width */
        margin: 0 auto !important;
        margin-top: 12vh !important; /* Fixes top, allows growth downward */
        position: relative !important;
        z-index: 1 !important;
        transform: none !important;
    }

    /* Glass card */
    .page-resetpassword .total_signup {
        width: 100% !important;
        padding: 30px 20px 25px !important;
        border-radius: 16px !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        background: rgba(200, 200, 205, 0.55) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-sizing: border-box !important;
    }

    /* Typography & Inputs */
    .page-resetpassword .signup_title_wrap h2 {
        font-size: 26px !important;
    }
    .page-resetpassword .signup_title_wrap p {
        font-size: 13px !important;
    }
    .page-resetpassword .form_control {
        height: 50px !important;
        font-size: 14px !important;
        padding-left: 56px !important;
    }
    .page-resetpassword .form_icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        left: 6px !important;
    }
    .page-resetpassword .btn_signup {
        height: 48px !important;
        font-size: 15px !important;
        margin-top: 25px !important;
    }
    .page-resetpassword .signup_button {
        margin-top: 25px !important;
    }

    /* Hide unused elements */
    .page-resetpassword .signup_ball {
        display: none !important;
    }
    .page-resetpassword .signUpBgWrap,
    .page-resetpassword .singup_bg {
        display: none !important;
    }
}

/* ================================================================
   SET NEW PASSWORD PAGE STYLES (Scoped to .page-setnewpassword)
   ================================================================ */

/* ----- Page Container ----- */
.page-setnewpassword {
    display: flex;
    justify-content: center;
    align-items: flex-start !important; /* Changed from center */
    min-height: 100vh;
    min-height: 100dvh;
    background: #F5F5F7 !important;
    background-attachment: fixed;
    background-size: cover;
    font-family: sans-serif;
    position: relative !important;
    overflow: hidden;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ----- Active Background Shapes (Blobs) ----- */
.page-setnewpassword::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    top: 10%;
    left: 10%;
    background: rgba(139, 92, 246, 0.45);
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
}
.page-setnewpassword::after {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    bottom: 5%;
    right: 10%;
    background: rgba(236, 72, 153, 0.35);
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
}

/* ----- Disable old ball element ----- */
.page-setnewpassword .signup_ball {
    display: none !important;
}

/* ----- WRAPPER (holds the card) ----- */
.page-setnewpassword .sign_up_wrap {
    position: relative;
    z-index: 1;
    width: 520px;
    margin: auto;
    margin-top: 18vh !important; /* Fixes top, allows card to grow downward */
    transform: none !important;
}

/* ----- GLASS CARD ----- */
.page-setnewpassword .total_signup {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 35px 30px 30px !important;
    box-sizing: border-box !important;
    background: rgba(200, 200, 205, 0.55) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
}

/* ----- TITLE & TEXT ----- */
/* ----- TITLE & TEXT (Perfectly Centered Subtitle) ----- */
.page-setnewpassword .signup_title_wrap {
    position: relative !important;
    padding-bottom: 0 !important; /* Removes extra space for the line */
    margin-bottom: 0 !important;  /* No extra bottom margin on wrapper */
}

.page-setnewpassword .signup_title_wrap h2 {
    color: #5721e9 !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    margin: 0 0 18px !important; /* Space between title and subtitle */
}

.page-setnewpassword .signup_title_wrap p {
    color: #222 !important;
    font-size: 14px !important;
    margin: 0 0 18px !important; /* Space between subtitle and first input */
}

/* Hide the animated line to prevent extra height */
.page-setnewpassword .signup_title_wrap:after,
.page-setnewpassword .signup_title_wrap:before {
    display: none !important;
}

/* ----- INPUT SPACING & STANDARD SIZE ----- */
.page-setnewpassword .form_group {
    position: relative;
    width: 100%;
    margin-bottom: 18px !important; 
}
.page-setnewpassword .form_control {
    width: 100% !important;
    height: 55px !important;
    padding: 0 15px 0 62px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    outline: none !important;
    color: #333 !important;
}
.page-setnewpassword .form_control::placeholder {
    color: #888 !important;
}
.page-setnewpassword .form_control:focus {
    border-color: #5b21f6 !important;
}
.page-setnewpassword .form_icon {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #5b16ef !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    z-index: 2 !important;
}

/* ----- BUTTON ----- */
.page-setnewpassword .btn_signup {
    width: 100% !important;
    height: 50px !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: linear-gradient(90deg, #5716ff, #6610ef) !important;
    margin-top: 30px !important; 
}
.page-setnewpassword .btn_signup:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(91, 22, 239, 0.25) !important;
}

/* ----- HIDE UNUSED ELEMENTS ----- */
.page-setnewpassword .signUpBgWrap,
.page-setnewpassword .singup_bg {
    display: none !important;
}

/* ================================================================
   SET NEW PASSWORD SUCCESS/ERROR MESSAGE + LOADING SPINNER
   ================================================================ */

/* Shared layout for both success & error boxes */
.page-setnewpassword .alert,
.page-setnewpassword .alert-success,
.page-setnewpassword .success-message,
.page-setnewpassword .alert-danger,
.page-setnewpassword .error-message {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Hide the Close (×) button on ALL alert boxes */
.page-setnewpassword .alert .close,
.page-setnewpassword .alert-dismissible .close {
    display: none !important;
}

/* ----- SUCCESS (Green) ----- */
.page-setnewpassword .alert-success,
.page-setnewpassword .success-message {
    background-color: #d4edda !important;
    border: 1px solid #c3e6cb !important;
    color: #155724 !important;
}

/* ----- ERROR (Red) - FORCED RED! ----- */
.page-setnewpassword .alert-danger,
.page-setnewpassword .error-message,
.page-setnewpassword div.alert-danger {
    background-color: #f8d7da !important; /* Light Red */
    border: 1px solid #f5c6cb !important; /* Red Border */
    color: #721c24 !important;            /* Dark Red Text */
}

/* Icons inherit the text color */
.page-setnewpassword .alert svg,
.page-setnewpassword .alert .icon {
    vertical-align: middle !important;
    margin-right: 8px !important;
    color: inherit !important;
}

/* ----- The Loading Spinner (only inside the success box) ----- */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #155724;
    border-top: 3px solid transparent;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ================================================================
   MOBILE RESPONSIVENESS FOR SET NEW PASSWORD PAGE (Up to 768px)
   ================================================================ */

@media (max-width: 768px) {
    .page-setnewpassword {
        transform: none !important;
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 1rem !important;
        margin: 0 !important;
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        overflow: hidden !important;
        background: #F5F5F7 !important;
        box-sizing: border-box !important;
    }

    .page-setnewpassword::before {
        position: fixed !important;
        width: 250px;
        height: 250px;
        top: 5%;
        left: -10%;
        background: rgba(139, 92, 246, 0.45) !important;
        border-radius: 50%;
        filter: blur(70px);
        z-index: 0 !important;
        pointer-events: none !important;
    }
    .page-setnewpassword::after {
        position: fixed !important;
        width: 300px;
        height: 300px;
        bottom: 5%;
        right: -15%;
        background: rgba(236, 72, 153, 0.35) !important;
        border-radius: 50%;
        filter: blur(80px);
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .page-setnewpassword .sign_up_wrap {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        margin-top: 12vh !important;
        position: relative !important;
        z-index: 1 !important;
        transform: none !important;
    }

    .page-setnewpassword .total_signup {
        width: 100% !important;
        padding: 30px 20px 25px !important;
        border-radius: 16px !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        background: rgba(200, 200, 205, 0.55) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-sizing: border-box !important;
    }

    .page-setnewpassword .signup_title_wrap h2 {
        font-size: 26px !important;
    }
    .page-setnewpassword .signup_title_wrap p {
        font-size: 13px !important;
    }
    .page-setnewpassword .form_control {
        height: 50px !important;
        font-size: 14px !important;
        padding-left: 56px !important;
    }
    .page-setnewpassword .form_icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        left: 6px !important;
    }
    .page-setnewpassword .btn_signup {
        height: 48px !important;
        font-size: 15px !important;
        margin-top: 25px !important;
    }

    .page-setnewpassword .signup_ball {
        display: none !important;
    }
    .page-setnewpassword .signUpBgWrap,
    .page-setnewpassword .singup_bg {
        display: none !important;
    }
}

/* ================================================================
   FINAL FIX: Remove White Border & Full Screen Background
   ================================================================ */

/* 1. Reset the body and html margins and force the light grey background */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #F5F5F7 !important;
    min-height: 100% !important;
}

/* ================================================================
   MOBILE RESPONSIVENESS FOR RESET & SET NEW PASSWORD PAGES
   ================================================================ */

/* ----- Reset Page Mobile (up to 768px) - Larger & Lifted More ----- */
@media (max-width: 768px) {
    .page-resetpassword {
        transform: none !important;
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 1rem !important;
        margin: 0 !important;
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
        background: #F5F5F7 !important;
        box-sizing: border-box !important;
    }

    /* Blobs fixed */
    .page-resetpassword::before {
        position: fixed !important;
        width: 300px; /* Slightly larger blob */
        height: 300px;
        top: 5%;
        left: -10%;
        background: rgba(139, 92, 246, 0.45) !important;
        border-radius: 50%;
        filter: blur(70px);
        z-index: 0 !important;
        pointer-events: none !important;
    }
    .page-resetpassword::after {
        position: fixed !important;
        width: 350px; /* Slightly larger blob */
        height: 350px;
        bottom: 5%;
        right: -15%;
        background: rgba(236, 72, 153, 0.35) !important;
        border-radius: 50%;
        filter: blur(80px);
        z-index: 0 !important;
        pointer-events: none !important;
    }

    /* 
       ⬇️ EDIT THESE EXACT 3 LINES ⬇️
    */
    .page-resetpassword .sign_up_wrap {
        width: 100% !important;
        max-width: 550px !important;    
        margin: 0 auto !important;
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(-90px) !important; /* LINE 3: INCREASE UPWARD (-90px) */
    }

    .page-resetpassword .total_signup {
        width: 100% !important;
        padding: 45px 30px 40px !important; /* LINE 2: INCREASE HEIGHT (45px top, 40px bottom) */
        border-radius: 20px !important;     /* Slightly rounder corners */
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        background: rgba(200, 200, 205, 0.55) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-sizing: border-box !important;
    }

    /* Typography & Inputs */
    .page-resetpassword .signup_title_wrap h2 {
        font-size: 28px !important; /* Slightly bigger text */
    }
    .page-resetpassword .signup_title_wrap p {
        font-size: 14px !important;
    }
    .page-resetpassword .form_control {
        height: 55px !important; /* Taller inputs */
        font-size: 14px !important;
        padding-left: 58px !important;
    }
    .page-resetpassword .form_icon {
        width: 40px !important; /* Bigger icons */
        height: 40px !important;
        font-size: 16px !important;
        left: 8px !important;
    }
    .page-resetpassword .btn_signup {
        height: 52px !important; /* Taller button */
        font-size: 16px !important;
        margin-top: 25px !important;
    }
    .page-resetpassword .signup_button {
        margin-top: 25px !important;
    }

    /* Hide unused elements */
    .page-resetpassword .signup_ball {
        display: none !important;
    }
    .page-resetpassword .signUpBgWrap,
    .page-resetpassword .singup_bg {
        display: none !important;
    }
}

/* ----- Set New Password Page Mobile (up to 768px) ----- */
@media(max-width:768px){

    .page-setnewpassword{
        transform: none !important;

        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;

        padding: 1rem !important;
        margin: 0 !important;

        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        overflow: hidden !important;

        background: #F5F5F7 !important;
        box-sizing: border-box !important;
    }

    /* Keep the original light background blobs */
    .page-setnewpassword::before{
        content: '';
        position: fixed !important;

        width: 250px;
        height: 250px;

        top: 5%;
        left: -10%;

        background: rgba(139, 92, 246, 0.45) !important;
        border-radius: 50%;

        filter: blur(70px);

        z-index: 0 !important;
        pointer-events: none !important;
    }

    .page-setnewpassword::after{
        content: '';
        position: fixed !important;

        width: 300px;
        height: 300px;

        bottom: 5%;
        right: -15%;

        background: rgba(236, 72, 153, 0.35) !important;
        border-radius: 50%;

        filter: blur(80px);

        z-index: 0 !important;
        pointer-events: none !important;
    }

    /* Move only the card upward */
    .page-setnewpassword .sign_up_wrap{
        width: 100% !important;
        max-width: 400px !important;

        margin: 0 auto !important;

        position: relative !important;
        z-index: 1 !important;

        transform: translateY(-40px) !important;
    }

    .page-setnewpassword .total_signup{
        width: 100% !important;

        padding: 30px 20px 25px !important;

        border-radius: 16px !important;

        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;

        background: rgba(200, 200, 205, 0.55) !important;

        border: 1px solid rgba(255, 255, 255, 0.25) !important;

        box-sizing: border-box !important;
    }

    .page-setnewpassword .signup_title_wrap h2{
        font-size: 26px !important;
    }

    .page-setnewpassword .signup_title_wrap p{
        font-size: 13px !important;
    }

    .page-setnewpassword .form_control{
        height: 50px !important;
        font-size: 14px !important;
        padding-left: 56px !important;
    }

    .page-setnewpassword .form_icon{
        width: 36px !important;
        height: 36px !important;

        font-size: 15px !important;
        left: 6px !important;
    }

    .page-setnewpassword .btn_signup{
        height: 48px !important;
        font-size: 15px !important;

        margin-top: 25px !important;
    }

    .page-setnewpassword .signup_ball{
        display: none !important;
    }

    .page-setnewpassword .alert{
        font-size: 14px !important;
        padding: 12px !important;
    }

    .page-setnewpassword .signUpBgWrap,
    .page-setnewpassword .singup_bg{
        display: none !important;
    }
}

/* ================================================================
   FIX: PRICING SECTION "View Cheap SMM Panel" Button – Force White Text
   ================================================================ */

.pricing-section-bg a[href="/cheap-smm-panel"] {
    color: var(--text-white) !important;
    -webkit-text-fill-color: var(--text-white) !important;
    background: var(--global-button-gradient) !important;
}

.pricing-section-bg a[href="/cheap-smm-panel"]:hover {
    color: var(--text-white) !important;
    -webkit-text-fill-color: var(--text-white) !important;
}

/* ============================================================
   GLOBAL BUTTON COLORS
   ============================================================ */

:root {
    --global-button-gradient: linear-gradient(
        180deg,
        #6120E8 0%,
        #4B0DC8 100%
    );

    --global-button-text: #FFFFFF;
}


/* ============================================================
   GLOBAL BUTTONS
   ============================================================ */

/* Standard Bootstrap / theme buttons */
.btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

button.btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

a.btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

input[type="button"].btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

input[type="submit"].btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

input[type="reset"].btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}


/* Bootstrap button variants */
.btn-primary {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-secondary {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-default {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-success {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-danger {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-warning {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-info {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-light {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-dark {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-block {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-sm {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-lg {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-xs {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}


/* Theme-specific button classes */
.btn_primary {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn_signup {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-gradient {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn-actions {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn_serv {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.no-pay-btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.no-action-btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.cat_btn_filter {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.filter-btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.padding-btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.mass-order-panel-head-btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.service-tab {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.service_button_filter {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.btn_ser_filter {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}


/* Submit / input buttons */
button[type="submit"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

input[type="submit"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

input[type="button"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

input[type="reset"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}


/* Button-like links */
a[class*="-btn"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

a[class*="_btn"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

a[class*="-button"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

a[class*="_button"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

a[class*="btn_"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

a[class*="button_"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

a[class*="group/button"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}


/* Specific buttons */
.discord-hero-btn-signup {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.discord-hero-btn-viewall {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.discord-how-to-order-btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.discord-safe-btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.discord-cta-btn-create {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.discord-cta-btn-browse {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.buy-instagram-views-hero-btn-signup {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.services-catalog-card-btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

.buy-telegram-members-pricing-btn {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}


/* Service panel buttons */
[class*="-services-panel-btn"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}

[class*="-services-panel-cta"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
}


/* ============================================================
   BUTTON TEXT / ICON COLOR
   Makes nested button content white too
   ============================================================ */

.btn span,
.btn i,
.btn svg,
.btn-primary span,
.btn-primary i,
.btn-primary svg,
.btn-secondary span,
.btn-secondary i,
.btn-secondary svg,
.btn_signup span,
.btn_signup i,
.btn_signup svg,
.btn_primary span,
.btn_primary i,
.btn_primary svg,
.btn-actions span,
.btn-actions i,
.btn-actions svg,
.btn_serv span,
.btn_serv i,
.btn_serv svg,
.no-pay-btn span,
.no-pay-btn i,
.no-pay-btn svg,
.no-action-btn span,
.no-action-btn i,
.no-action-btn svg,
a[class*="-btn"] span,
a[class*="-btn"] i,
a[class*="-btn"] svg,
a[class*="_btn"] span,
a[class*="_btn"] i,
a[class*="_btn"] svg,
a[class*="-button"] span,
a[class*="-button"] i,
a[class*="-button"] svg,
a[class*="_button"] span,
a[class*="_button"] i,
a[class*="_button"] svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
}


/* ============================================================
   EXCLUSIONS
   Keep non-action controls unchanged
   ============================================================ */

button.close {
    background: transparent !important;
    background-image: none !important;
}

button[class*="close"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="btn-close"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="-close"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="faq-question"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="-faq-"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="faq_"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="accordion"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="-dot"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="-dots"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="reviews-dot"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="-reviews-prev"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="-reviews-next"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="search"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="-search-btn"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="search-btn"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="menu"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="sidebar"] {
    background: transparent !important;
    background-image: none !important;
}

button[class*="toggle"] {
    background: transparent !important;
    background-image: none !important;
}


/* ============================================================
   GLOBAL BUTTON TEXT COLOR
   ============================================================ */

:root {
    --global-button-text: #FFFFFF;
}


/* ============================================================
   BUTTON TEXT COLOR
   ============================================================ */

.btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

button.btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a.btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

input[type="button"].btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

input[type="submit"].btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

input[type="reset"].btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-primary {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-secondary {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-default {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-success {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-danger {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-warning {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-info {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-light {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-dark {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-block {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-sm {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-lg {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-xs {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn_primary {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn_signup {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-gradient {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-actions {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn_serv {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.no-pay-btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.no-action-btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.cat_btn_filter {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.filter-btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.padding-btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.mass-order-panel-head-btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.service-tab {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.service_button_filter {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn_ser_filter {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

button[type="submit"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

input[type="submit"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

input[type="button"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

input[type="reset"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="-btn"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="_btn"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="-button"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="_button"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="btn_"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="button_"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="group/button"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.discord-hero-btn-signup {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.discord-hero-btn-viewall {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.discord-how-to-order-btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.discord-safe-btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.discord-cta-btn-create {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.discord-cta-btn-browse {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.buy-instagram-views-hero-btn-signup {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.services-catalog-card-btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.buy-telegram-members-pricing-btn {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

[class*="-services-panel-btn"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

[class*="-services-panel-cta"] {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}


/* ============================================================
   TEXT / ELEMENTS INSIDE BUTTONS
   ============================================================ */

.btn * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

button.btn * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a.btn * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-primary * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-secondary * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-default * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-success * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-danger * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-warning * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-info * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-light * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-dark * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn_primary * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn_signup * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-gradient * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn-actions * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn_serv * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.no-pay-btn * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.no-action-btn * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.cat_btn_filter * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.filter-btn * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.padding-btn * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.mass-order-panel-head-btn * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.service-tab * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.service_button_filter * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn_ser_filter * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="-btn"] * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="_btn"] * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="-button"] * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="_button"] * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="btn_"] * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="button_"] * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="group/button"] * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

[class*="-services-panel-btn"] * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

[class*="-services-panel-cta"] * {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}


/* ============================================================
   SVG / ICONS INSIDE BUTTONS
   ============================================================ */

.btn svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

button.btn svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

a.btn svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn-primary svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn-secondary svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn-default svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn-success svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn-danger svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn-warning svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn-info svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn-light svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn-dark svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn_primary svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn_signup svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn-gradient svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn-actions svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn_serv svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.no-pay-btn svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.no-action-btn svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.cat_btn_filter svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.filter-btn svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.padding-btn svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.mass-order-panel-head-btn svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.service-tab svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.service_button_filter svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

.btn_ser_filter svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

a[class*="-btn"] svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

a[class*="_btn"] svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

a[class*="-button"] svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

a[class*="_button"] svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

a[class*="btn_"] svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

a[class*="button_"] svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

a[class*="group/button"] svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

[class*="-services-panel-btn"] svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}

[class*="-services-panel-cta"] svg {
    color: var(--global-button-text) !important;
    fill: var(--global-button-text) !important;
    stroke: var(--global-button-text) !important;
}


/* ============================================================
   PSEUDO-STATES
   Prevent existing hover/focus/active text colors
   ============================================================ */

.btn:hover {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn:focus {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

.btn:active {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

button.btn:hover {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

button.btn:focus {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

button.btn:active {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a.btn:hover {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a.btn:focus {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a.btn:active {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="-btn"]:hover {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="-btn"]:focus {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="-btn"]:active {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="_btn"]:hover {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="_btn"]:focus {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="_btn"]:active {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="-button"]:hover {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="-button"]:focus {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="-button"]:active {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="_button"]:hover {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="_button"]:focus {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="_button"]:active {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="btn_"]:hover {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="btn_"]:focus {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="btn_"]:active {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="button_"]:hover {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="button_"]:focus {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

a[class*="button_"]:active {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

[class*="-services-panel-btn"]:hover {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

[class*="-services-panel-btn"]:focus {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

[class*="-services-panel-btn"]:active {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

[class*="-services-panel-cta"]:hover {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

[class*="-services-panel-cta"]:focus {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

[class*="-services-panel-cta"]:active {
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
}

/* ================================================================
   OVERRIDE: Header "Log In" & Hero "Sign In Now" → White box + Purple text + Purple border + Traveling border on hover
   ================================================================ */

.smmgen-header a[href="/signin"],
.homepage-content .hero-bg a[href="/signin"] {
    background-color: var(--bg-white) !important;
    background-image: none !important;
    border: 2px solid var(--global-button-purple) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: var(--global-button-purple) !important;
    -webkit-text-fill-color: var(--global-button-purple) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.smmgen-header a[href="/signin"]:hover,
.homepage-content .hero-bg a[href="/signin"]:hover {
    background-color: var(--global-button-purple) !important;
    background-image: none !important;
    border-color: var(--global-button-purple) !important;
    color: var(--global-button-text) !important;
    -webkit-text-fill-color: var(--global-button-text) !important;
    box-shadow: 0 4px 12px rgba(97, 32, 232, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Traveling border pseudo-element (same as global, but for our buttons) */
.smmgen-header a[href="/signin"]::before,
.homepage-content .hero-bg a[href="/signin"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, transparent, #fff, transparent) border-box !important;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    animation: borderTravel 2s linear infinite !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.smmgen-header a[href="/signin"]:hover::before,
.homepage-content .hero-bg a[href="/signin"]:hover::before {
    opacity: 1 !important;
}

/* ============================================================
   GLOBAL BUTTON HOVER - BORDER LIGHT TRAVEL (2PX, LIFT, NO SHADOW)
   ============================================================ */

/* 1. Base positioning & overflow for all buttons */
.btn,
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn,
input[type="reset"].btn,
.btn-primary,
.btn-secondary,
.btn-default,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
.btn-block,
.btn-sm,
.btn-lg,
.btn-xs,
.btn_primary,
.btn_signup,
.btn-gradient,
.btn-actions,
.btn_serv,
.no-pay-btn,
.no-action-btn,
.cat_btn_filter,
.filter-btn,
.padding-btn,
.mass-order-panel-head-btn,
.service-tab,
.service_button_filter,
.btn_ser_filter,
button[type="submit"],
input[type="submit"],
input[type="button"],
input[type="reset"],
a[class*="-btn"],
a[class*="_btn"],
a[class*="-button"],
a[class*="_button"],
a[class*="btn_"],
a[class*="button_"],
a[class*="group/button"],
.discord-hero-btn-signup,
.discord-hero-btn-viewall,
.discord-how-to-order-btn,
.discord-safe-btn,
.discord-cta-btn-create,
.discord-cta-btn-browse,
.buy-instagram-views-hero-btn-signup,
.services-catalog-card-btn,
.buy-telegram-members-pricing-btn,
[class*="-services-panel-btn"],
[class*="-services-panel-cta"] {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 2px solid transparent !important; /* 2px border */
}

/* 2. Traveling border pseudo-element (hidden initially) */
.btn::before,
button.btn::before,
a.btn::before,
input[type="button"].btn::before,
input[type="submit"].btn::before,
input[type="reset"].btn::before,
.btn-primary::before,
.btn-secondary::before,
.btn-default::before,
.btn-success::before,
.btn-danger::before,
.btn-warning::before,
.btn-info::before,
.btn-light::before,
.btn-dark::before,
.btn-block::before,
.btn-sm::before,
.btn-lg::before,
.btn-xs::before,
.btn_primary::before,
.btn_signup::before,
.btn-gradient::before,
.btn-actions::before,
.btn_serv::before,
.no-pay-btn::before,
.no-action-btn::before,
.cat_btn_filter::before,
.filter-btn::before,
.padding-btn::before,
.mass-order-panel-head-btn::before,
.service-tab::before,
.service_button_filter::before,
.btn_ser_filter::before,
button[type="submit"]::before,
input[type="submit"]::before,
input[type="button"]::before,
input[type="reset"]::before,
a[class*="-btn"]::before,
a[class*="_btn"]::before,
a[class*="-button"]::before,
a[class*="_button"]::before,
a[class*="btn_"]::before,
a[class*="button_"]::before,
a[class*="group/button"]::before,
.discord-hero-btn-signup::before,
.discord-hero-btn-viewall::before,
.discord-how-to-order-btn::before,
.discord-safe-btn::before,
.discord-cta-btn-create::before,
.discord-cta-btn-browse::before,
.buy-instagram-views-hero-btn-signup::before,
.services-catalog-card-btn::before,
.buy-telegram-members-pricing-btn::before,
[class*="-services-panel-btn"]::before,
[class*="-services-panel-cta"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    border: 2px solid transparent !important; /* Match thickness */
    background: linear-gradient(90deg, transparent, #fff, transparent) border-box !important;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    animation: borderTravel 2s linear infinite !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* 3. Show traveling border + lift button (no shadow) on hover */
.btn:hover::before,
button.btn:hover::before,
a.btn:hover::before,
input[type="button"].btn:hover::before,
input[type="submit"].btn:hover::before,
input[type="reset"].btn:hover::before,
.btn-primary:hover::before,
.btn-secondary:hover::before,
.btn-default:hover::before,
.btn-success:hover::before,
.btn-danger:hover::before,
.btn-warning:hover::before,
.btn-info:hover::before,
.btn-light:hover::before,
.btn-dark:hover::before,
.btn-block:hover::before,
.btn-sm:hover::before,
.btn-lg:hover::before,
.btn-xs:hover::before,
.btn_primary:hover::before,
.btn_signup:hover::before,
.btn-gradient:hover::before,
.btn-actions:hover::before,
.btn_serv:hover::before,
.no-pay-btn:hover::before,
.no-action-btn:hover::before,
.cat_btn_filter:hover::before,
.filter-btn:hover::before,
.padding-btn:hover::before,
.mass-order-panel-head-btn:hover::before,
.service-tab:hover::before,
.service_button_filter:hover::before,
.btn_ser_filter:hover::before,
button[type="submit"]:hover::before,
input[type="submit"]:hover::before,
input[type="button"]:hover::before,
input[type="reset"]:hover::before,
a[class*="-btn"]:hover::before,
a[class*="_btn"]:hover::before,
a[class*="-button"]:hover::before,
a[class*="_button"]:hover::before,
a[class*="btn_"]:hover::before,
a[class*="button_"]:hover::before,
a[class*="group/button"]:hover::before,
.discord-hero-btn-signup:hover::before,
.discord-hero-btn-viewall:hover::before,
.discord-how-to-order-btn:hover::before,
.discord-safe-btn:hover::before,
.discord-cta-btn-create:hover::before,
.discord-cta-btn-browse:hover::before,
.buy-instagram-views-hero-btn-signup:hover::before,
.services-catalog-card-btn:hover::before,
.buy-telegram-members-pricing-btn:hover::before,
[class*="-services-panel-btn"]:hover::before,
[class*="-services-panel-cta"]:hover::before {
    opacity: 1 !important;
}

.btn:hover,
button.btn:hover,
a.btn:hover,
input[type="button"].btn:hover,
input[type="submit"].btn:hover,
input[type="reset"].btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-default:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-light:hover,
.btn-dark:hover,
.btn-block:hover,
.btn-sm:hover,
.btn-lg:hover,
.btn-xs:hover,
.btn_primary:hover,
.btn_signup:hover,
.btn-gradient:hover,
.btn-actions:hover,
.btn_serv:hover,
.no-pay-btn:hover,
.no-action-btn:hover,
.cat_btn_filter:hover,
.filter-btn:hover,
.padding-btn:hover,
.mass-order-panel-head-btn:hover,
.service-tab:hover,
.service_button_filter:hover,
.btn_ser_filter:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
a[class*="-btn"]:hover,
a[class*="_btn"]:hover,
a[class*="-button"]:hover,
a[class*="_button"]:hover,
a[class*="btn_"]:hover,
a[class*="button_"]:hover,
a[class*="group/button"]:hover,
.discord-hero-btn-signup:hover,
.discord-hero-btn-viewall:hover,
.discord-how-to-order-btn:hover,
.discord-safe-btn:hover,
.discord-cta-btn-create:hover,
.discord-cta-btn-browse:hover,
.buy-instagram-views-hero-btn-signup:hover,
.services-catalog-card-btn:hover,
.buy-telegram-members-pricing-btn:hover,
[class*="-services-panel-btn"]:hover,
[class*="-services-panel-cta"]:hover {
    transform: translateY(-2px) !important; /* Movement */
}

/* 4. Keyframes for traveling border */
@keyframes borderTravel {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 5. Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .btn::before,
    button.btn::before,
    a.btn::before,
    input[type="button"].btn::before,
    input[type="submit"].btn::before,
    input[type="reset"].btn::before,
    .btn-primary::before,
    .btn-secondary::before,
    .btn-default::before,
    .btn-success::before,
    .btn-danger::before,
    .btn-warning::before,
    .btn-info::before,
    .btn-light::before,
    .btn-dark::before,
    .btn-block::before,
    .btn-sm::before,
    .btn-lg::before,
    .btn-xs::before,
    .btn_primary::before,
    .btn_signup::before,
    .btn-gradient::before,
    .btn-actions::before,
    .btn_serv::before,
    .no-pay-btn::before,
    .no-action-btn::before,
    .cat_btn_filter::before,
    .filter-btn::before,
    .padding-btn::before,
    .mass-order-panel-head-btn::before,
    .service-tab::before,
    .service_button_filter::before,
    .btn_ser_filter::before,
    button[type="submit"]::before,
    input[type="submit"]::before,
    input[type="button"]::before,
    input[type="reset"]::before,
    a[class*="-btn"]::before,
    a[class*="_btn"]::before,
    a[class*="-button"]::before,
    a[class*="_button"]::before,
    a[class*="btn_"]::before,
    a[class*="button_"]::before,
    a[class*="group/button"]::before,
    .discord-hero-btn-signup::before,
    .discord-hero-btn-viewall::before,
    .discord-how-to-order-btn::before,
    .discord-safe-btn::before,
    .discord-cta-btn-create::before,
    .discord-cta-btn-browse::before,
    .buy-instagram-views-hero-btn-signup::before,
    .services-catalog-card-btn::before,
    .buy-telegram-members-pricing-btn::before,
    [class*="-services-panel-btn"]::before,
    [class*="-services-panel-cta"]::before {
        animation: none !important;
        transition: none !important;
    }
}




:root {
  --global-button-gradient: linear-gradient(
    180deg,
    #6120E8 0%,
    #4B0DC8 100%
  );
}

/* -------------------------------------------------------------------------
   1) FLAT BLUE TEXT — Tailwind `text-[#HEX]` utility classes
      Covers: heading highlight spans, card titles, price badges, links,
      button labels, numbered list highlights, etc.
      Hex values found in the theme: #1F41BB, #505CDE, #155DFC, #8292CC,
      #1447E6
   ---------------------------------------------------------------------- */
.text-\[\#1F41BB\],
.text-\[\#505CDE\],
.text-\[\#155DFC\],
.text-\[\#8292CC\],
.text-\[\#1447E6\] {
  background: var(--global-button-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* -------------------------------------------------------------------------
   2) FLAT BLUE TEXT — inline `style="color:#HEX"` (no class, used for two
      status labels on the API page: "In progress" / "Delivery is
      actively running")
   ---------------------------------------------------------------------- */
[style="color:#1447E6"] {
  background: var(--global-button-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* -------------------------------------------------------------------------
   3) ALREADY-GRADIENT BLUE TEXT — Tailwind gradient-text combos
      (`bg-clip-text text-transparent bg-gradient-to-r/bg-linear-to-r
      from-[#HEX] via-[#HEX] to-[#HEX]`)
      Two combos found in the theme:
        a) from-[#0D35C7] via-[#3C44D6] to-[#9EC1FF]
        b) from-[#505CDE] to-[#9EC1FF]
   ---------------------------------------------------------------------- */
.from-\[\#0D35C7\].via-\[\#3C44D6\].to-\[\#9EC1FF\],
.from-\[\#505CDE\].to-\[\#9EC1FF\] {
  background: var(--global-button-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

[style*="background: linear-gradient(90deg, #0D35C7 0%, #3C44D6 26.44%, #9EC1FF 100%)"],
[style*="background: linear-gradient(90deg, #505CDE 0%, #9EC1FF 100%)"] {
  background: var(--global-button-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.text-gradient {
  background: var(--global-button-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* .heading-gradient: already gradient text, just swap the stops (1x) */
.heading-gradient {
  background: var(--global-button-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.text-primary:not(.border-primary):not(.bg-primary):not(i):not([class*="shrink-0"]) {
  background: var(--global-button-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ==========================================================
   NEW — ANIMATED BLUE→PURPLE FLOW FOR TEXT GRADIENT CLASSES
   (left‑to‑right, seamless, infinite)
   ========================================================== */

@keyframes headerShine {
  to {
    background-position: 200% center;
  }
}

.text-\[\#1F41BB\],
.text-\[\#505CDE\],
.text-\[\#155DFC\],
.text-\[\#8292CC\],
.text-\[\#1447E6\],
[style="color:#1447E6"],
.from-\[\#0D35C7\].via-\[\#3C44D6\].to-\[\#9EC1FF\],
.from-\[\#505CDE\].to-\[\#9EC1FF\],
[style*="background: linear-gradient(90deg, #0D35C7 0%, #3C44D6 26.44%, #9EC1FF 100%)"],
[style*="background: linear-gradient(90deg, #505CDE 0%, #9EC1FF 100%)"],
.text-gradient,
.heading-gradient,
.text-primary:not(.border-primary):not(.bg-primary):not(i):not([class*="shrink-0"]) {
  background: linear-gradient(
    90deg,
    #6120E8 0%,
    #4B0DC8 50%,
    #6120E8 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% auto !important;
  background-repeat: repeat !important;
  animation: headerShine 10s linear infinite;
}

/* ================================================================
   GLOBAL OVERRIDE: VERTICAL LINE & STEP CIRCLES – PURPLE GRADIENT
   Applies to all pages (homepage, about-us, etc.) that use "How It Works"
   ================================================================ */

/* Vertical line (blue → purple gradient) */
.bg-\[\#5666f2\] {
    background: var(--global-button-gradient) !important;
}

/* Step circle outer ring (light blue → light purple gradient) */
.bg-\[\#c2d5ff\] {
    background: linear-gradient(135deg, #E9D5FF 0%, #D8B4FE 100%) !important;
}

/* Step card border (light blue → light purple tint) */
.border-\[\#d1cbff\] {
    border-color: rgba(97, 32, 232, 0.2) !important;
}


/* ================================================================
   UNIVERSAL FIX: All Platform Hero Buttons (Instagram, Twitter, etc.)
   ================================================================ */

/* Base state – purple gradient background */
[class*="buy-"][class*="-hero-link-"] {
    background: var(--global-button-gradient) !important;
    color: var(--global-button-text) !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* Hover – keep purple gradient, lift & shadow */
[class*="buy-"][class*="-hero-link-"]:hover {
    background: var(--global-button-gradient) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(97, 32, 232, 0.3) !important;
}

/* White traveling border on hover */
[class*="buy-"][class*="-hero-link-"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, transparent, #fff, transparent) border-box !important;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    animation: borderTravel 2s linear infinite !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Show white border on hover */
[class*="buy-"][class*="-hero-link-"]:hover::before {
    opacity: 1 !important;
}

/* ================================================================
   HEADER NAVIGATION – PURPLE GRADIENT (ACTIVE & HOVER)
   ================================================================ */

/* 1. Override the Home link (or any link with .text-primary) to purple gradient */
.smmgen-header nav a.text-primary {
    background: linear-gradient(90deg, #6120E8 0%, #4B0DC8 50%, #6120E8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* 2. Override hover state for all nav links to purple gradient */
.smmgen-header nav a:hover,
.smmgen-header nav button:hover {
    background: linear-gradient(90deg, #6120E8 0%, #4B0DC8 50%, #6120E8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    background-color: transparent !important; /* Remove blue background if any */
}

/* 3. Also for mobile menu links */
#mobileMenu nav a.text-primary,
#mobileMenu nav a:hover {
    background: linear-gradient(90deg, #6120E8 0%, #4B0DC8 50%, #6120E8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* 4. If you plan to use an .active class later, style it the same */
.smmgen-header nav a.active {
    background: linear-gradient(90deg, #6120E8 0%, #4B0DC8 50%, #6120E8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* ================================================================
   ACTIVE NAV LINK – PURPLE GRADIENT (Guest Header & Mobile Menu)
   ================================================================ */

.smmgen-header nav a.active,
#mobileMenu nav a.active {
    background: linear-gradient(90deg, #6120E8 0%, #4B0DC8 50%, #6120E8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Keep dropdown chevron icons visible and allow flip on hover */
.smmgen-header nav button svg.lucide-chevron-down,
.smmgen-header nav button:hover svg.lucide-chevron-down {
    color: var(--text-nav) !important;
    -webkit-text-fill-color: var(--text-nav) !important;
    stroke: var(--text-nav) !important;
}

/* When the dropdown is open (aria-expanded="true"), flip the icon */
.smmgen-header nav button[aria-expanded="true"] svg.lucide-chevron-down {
    transform: rotate(180deg) !important;
}

/* When button is active (has .active class), let icon match the gradient text */
.smmgen-header nav button.active svg.lucide-chevron-down {
    stroke: #6120E8 !important; /* Purple – or keep neutral if preferred */
}


/* ============================================================
   Platform Services Tabs — global override for ALL country pages
   Scoped strictly to the "Social media platforms" tablist widget,
   so it can never affect any other tab component on the site.
   ============================================================ */

[role="tablist"][aria-label="Social media platforms"] [role="tab"] {
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    background-color: #fff !important;
    border-color: #E2E2E2 !important;
    color: #000 !important;
    position: relative; /* For the pseudo-element border */
}

/* White traveling border (hidden by default) */
[role="tablist"][aria-label="Social media platforms"] [role="tab"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid transparent;
    background: linear-gradient(90deg, transparent, #fff, transparent) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderTravel 2s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

[role="tablist"][aria-label="Social media platforms"] [role="tab"][aria-selected="true"] {
    background: linear-gradient(180deg, #6120E8 0%, #4B0DC8 100%) !important; /* Global purple gradient */
    border-color: transparent !important;
    color: #fff !important;
}

[role="tablist"][aria-label="Social media platforms"] [role="tab"][aria-selected="false"]:hover {
    background: rgba(31, 65, 187, 0.08) !important; /* Keep original hover tint */
    border-color: rgba(31, 65, 187, 0.25) !important;
    color: #000 !important;
}

[role="tablist"][aria-label="Social media platforms"] [role="tab"][aria-selected="true"]:hover {
    background: linear-gradient(180deg, #6120E8 0%, #4B0DC8 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Show white border on hover for ALL tabs */
[role="tablist"][aria-label="Social media platforms"] [role="tab"]:hover::before {
    opacity: 1;
}


/* ========================================================== 
   ULTRA LUXURY HEADER — SHIMMER EFFECT (UNIVERSAL) 
   
@keyframes headline {
    to {
        background-position: -240% center;
    }
}
.hero-bg h1,
.second-section-bg h2,
section.bg-\[\#FAFAFB\] h2,
.service-section-bg h2,
section.bg-\[\#F5F5F7\] h2,
.how-it-works-bg h2 {
    margin-top: 18px;
    font-size: clamp(2.2rem, 5vw, 4.3rem);
    letter-spacing: -0.055em;
    line-height: 1.01;
    background: linear-gradient(
        95deg,
        #fff 0%,
        #6120E8 33%,
        #4B0DC8 54%,
        #fff 75%,
        #6120E8 100%
    );
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent; 
    animation: headline 10s linear infinite;
}
.hero-bg h1 span,
.second-section-bg h2 span,
section.bg-\[\#FAFAFB\] h2 span,
.service-section-bg h2 span,
section.bg-\[\#F5F5F7\] h2 span,
.how-it-works-bg h2 span {
    background: none !important;
    color: inherit !important; 
}

   ========================================================== */