/* ==========================================================================
   1. LAYOUT & UTILITIES
   ========================================================================== */

/* Remove Header Image & Breadcrumb Block */
.box-image {
    display: none !important;
}

/* Force all images in post/page content to fit container */
.entry-content img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
}

/* Menu Text Capitalization (Prevent Forced Uppercase) */
.main-navigation a,
.nav-menu a,
header nav a,
header ul li a,
.main-navigation ul li a,
.site-header nav ul li a,
.navbar-nav li a,
.menu-item a,
ul.menu li a {
    text-transform: none !important;
}

/* ==========================================================================
   2. GLOBAL THEME BACKGROUND & COLOR SCHEME
   ========================================================================== */

/* Unified Site-wide Ambient Radial Gradient */
html, 
body, 
#page, 
#content, 
.site-content, 
.site-header, 
main {
    background-color: #06030a !important;
    background-image: radial-gradient(circle at 50% 15%, #2a1548 0%, #130a21 40%, #06030a 85%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    color: #ffffff !important;
}

/* Make inner cards and containers transparent so the gradient shines through */
#primary, 
.card, 
.entry-content, 
article, 
.type-page, 
.type-post, 
#sidebar, 
.widget.widget_block {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

/* ==========================================================================
   3. FOOTER & COPYRIGHT BAR
   ========================================================================== */

/* Footer & Sub-Footer Radial Background & Borders */
footer, 
.site-footer, 
#colophon, 
.footer-widgets, 
.copywrap,
.site-info,
.site-sub-footer,
.bottom-bar,
.copyright-bar {
    background: transparent !important;
    background-color: transparent !important;
    color: #a1a1aa !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Footer & Copyright Links Styling */
footer h1, footer h2, footer h3, footer h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
    color: #ffffff !important;
}

footer a, .site-footer a, div[class*="footer"] a,
.copywrap a, .site-info a, .bottom-bar a, .copyright-bar a {
    color: #ffffff !important;
    text-decoration: none !important;
}

footer a:hover, .site-footer a:hover, div[class*="footer"] a:hover,
.copywrap a:hover, .site-info a:hover, .bottom-bar a:hover, .copyright-bar a:hover {
    color: #00d2ff !important;
}

/* ==========================================================================
   4. WIDGETS & SIDEBAR
   ========================================================================== */

/* Hide Meta Widgets */
.widget_meta,
footer .widget_meta,
.site-footer .widget_meta {
    display: none !important;
}

/* Sidebar & Block Widget Styling */
#sidebar a,
.widget.widget_block a,
.widget.widget_block h1, 
.widget.widget_block h2, 
.widget.widget_block h3, 
.widget.widget_block h4, 
.widget.widget_block h5, 
.widget.widget_block h6 {
    color: #ffffff !important;
}

#sidebar a:hover,
.widget.widget_block a:hover {
    color: #00d2ff !important;
}

/* ==========================================================================
   5. WOOCOMMERCE & CHECKOUT CUSTOMIZATION
   ========================================================================== */

/* WAPO Price Table Box */
#wapo-total-price-table {
    background-color: #000000 !important;
    padding: 15px;
    border-radius: 8px;
}

/* WooCommerce Text & Prices */
.wpsf-product-title,
.wpsf-product-title a,
.woocommerce-Price-amount,
.woocommerce-Price-amount.amount,
.woocommerce-Price-currencySymbol,
.add_to_cart_inline,
.add_to_cart_inline *,
.add_to_cart_inline a,
.add_to_cart_inline .button,
.add_to_cart_inline .amount {
    color: #ffffff !important;
}

/* Checkout Form Labels & Inputs */
.woocommerce-checkout label,
.form-row label,
.wc-block-components-checkout-step label {
    color: #2596be !important;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    color: #2596be !important;
}
/* Main Footer Widget Area - Theme Match */
/* Main Footer & Widget Containers - Theme Match */
footer#colophon,
.site-footer,
.footer-wrapper,
#footer,
.footer-widget,
.widget,
.widget.py-3,
div[class*="footer"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}
.site-footer h5, 
.site-footer h6,
.footer-widget h3,
.footer-widget .widget-title {
    color: #ffffff !important;
}

/* Footer Links & Widget Lists */
.site-footer a,
.footer-widget a,
.footer-widget ul li a {
    color: #a1a1aa !important;
    text-decoration: none !important;
}

.site-footer a:hover,
.footer-widget a:hover,
.footer-widget ul li a:hover {
    color: #00d2ff !important;
}

/* Search Box & Inputs inside Footer */
.site-footer input[type="text"],
.site-footer input[type="search"],
.footer-widget input[type="text"],
.footer-widget input[type="search"] {
    background-color: #0a0514 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.site-footer input[type="submit"],
.site-footer button,
.footer-widget input[type="submit"],
.footer-widget button {
    background-color: #2596be !important;
    color: #ffffff !important;
    border: none !important;
}
/* Force custom HTML wrappers, blocks, and inner containers to be transparent */
.wp-block-html,
.custom-html-widget,
div[class*="container"],
div[class*="wrapper"],
div[class*="section"],
section,
.elementor-section,
.elementor-column,
.elementor-widget-wrap {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure text inside custom HTML blocks remains bright white and readable */
.wp-block-html,
.wp-block-html p,
.wp-block-html div,
.wp-block-html span,
.wp-block-html h1,
.wp-block-html h2,
.wp-block-html h3,
.wp-block-html h4 {
    color: #ffffff;
}
/* ==========================================================================
   NEON & TRANSPARENT HEADER NAVIGATION
   ========================================================================== */

/* 1. Transparent Floating Header Bar */
.site-header, 
header nav, 
.main-navigation, 
.navbar {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 2. Menu Link Base Styling & Smooth Transitions */
.main-navigation ul li a,
.site-header nav ul li a,
.navbar-nav li a,
.menu-item a,
ul.menu li a {
    color: #e4e4e7 !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    transition: all 0.3s ease-in-out !important;
    background: transparent !important;
    position: relative !important;
}

/* 3. Radial Glow & Neon Text Effect on Hover */
.main-navigation ul li a:hover,
.site-header nav ul li a:hover,
.navbar-nav li a:hover,
.menu-item a:hover,
ul.menu li a:hover {
    color: #00f0ff !important; /* Bright cyan text */
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.8), 
                0 0 16px rgba(0, 240, 255, 0.4) !important; /* Neon text glow */
    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.35) 0%, rgba(19, 10, 33, 0) 70%) !important; /* Radial purple glow on hover */
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.25) !important;
}

/* 4. Sub-Menu Dropdown Styling (Transparent Neon Panel) */
.main-navigation ul ul,
.site-header nav ul ul,
.sub-menu {
    background: rgba(19, 10, 33, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 240, 255, 0.2) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), 
                0 0 15px rgba(168, 85, 247, 0.2) !important;
    border-radius: 12px !important;
    padding: 8px 0 !important;
}
/* Transparent Neon Style for All Buttons & Submit Inputs */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.search-submit,
.search-submit[type="submit"],
.search-form input[type="submit"],
.site-footer input[type="submit"],
.footer-widget input[type="submit"],
.menu-toggle,
.btn,
.button {
    background: rgba(19, 10, 33, 0.6) !important;
    background-color: rgba(19, 10, 33, 0.6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 240, 255, 0.4) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.15) !important;
    transition: all 0.3s ease-in-out !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
}

/* Button & Submit Hover State (Neon Glow Effect) */
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.search-submit:hover,
.search-submit[type="submit"]:hover,
.search-form input[type="submit"]:hover,
.site-footer input[type="submit"]:hover,
.footer-widget input[type="submit"]:hover,
.menu-toggle:hover,
.btn:hover,
.button:hover {
    background: rgba(168, 85, 247, 0.25) !important;
    background-color: rgba(168, 85, 247, 0.25) !important;
    color: #00f0ff !important;
    border-color: #00f0ff !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.6), 0 0 25px rgba(168, 85, 247, 0.4) !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.9) !important;
}
/* Force transparent neon background on search button */
html body .search-form .search-submit,
html body input[type="submit"].search-submit,
html body .widget.py-3 input[type="submit"] {
    background: rgba(19, 10, 33, 0.6) !important;
    background-color: rgba(19, 10, 33, 0.6) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 240, 255, 0.4) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.15) !important;
}

/* Hover state override */
html body .search-form .search-submit:hover,
html body input[type="submit"].search-submit:hover,
html body .widget.py-3 input[type="submit"]:hover {
    background: rgba(168, 85, 247, 0.25) !important;
    background-color: rgba(168, 85, 247, 0.25) !important;
    background-image: none !important;
    color: #00f0ff !important;
    border-color: #00f0ff !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.6), 0 0 25px rgba(168, 85, 247, 0.4) !important;
}

 
 

 
 
/* Custom Neon Backdrop & Radial Glow */
#preloader,
.preloader,
.loader,
#loader-wrapper {
    background-color: #07030a !important;
    background-image: radial-gradient(circle at center, rgba(168, 85, 247, 0.25) 0%, rgba(0, 240, 255, 0.1) 40%, #07030a 75%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999 !important;
    /* Lets clicks pass through immediately when faded */
    transition: opacity 0.5s ease, visibility 1s ease !important;
}

 
 

 
 

/* Custom Neon Text "STOSPN" */
#preloader::before,
.preloader::before,
#loader-wrapper::before {
    content: "STOSPN" !important;
    font-family: 'Courier New', Courier, monospace, sans-serif !important;
    font-size: 3.8rem !important;
    font-weight: 900 !important;
    letter-spacing: 8px !important;
    color: #00f0ff !important;
    text-transform: uppercase !important;
    animation: neonPlugIn 0.5s ease-in-out infinite alternate !important;
}

/* Hover Effect */
.stospn-neon-logo:hover .stospn-text {
    filter: drop-shadow(0 0 6px #00e5ff) 
            drop-shadow(0 0 15px #a855f7);
    transform: translateY(-1px);
    background-color: rgba(168, 85, 247, 0.25) !important;
    background-image: none !important;
    color: #00f0ff !important;
    border-color: #00f0ff !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.6), 0 0 25px rgba(168, 85, 247, 0.4) !important;
}
/* Responsive Grid Equalization for WooCommerce */
ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: auto !important;
    flex: 1 1 220px !important; /* Allows items to fill available screen width evenly */
    margin-bottom: 25px !important;
}

/* Fix product image sizing across different resolutions */
ul.products li.product a.woocommerce-LoopProduct-link,
/* Center and Force Fixed Equal Grid Dimensions for WooCommerce Products */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    justify-content: center !important;
    justify-items: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 100% !important;
    margin: 0 !important;
}

/* Equal Image Sizing */
ul.products li.product img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center !important;
}
/* Completely hide WooCommerce result count and sorting fields */
.woocommerce-result-count,
.woocommerce-ordering,
form.woocommerce-ordering,
.storefront-sorting {
    display: none !important;
    visibility: hidden !important;
}
/* Account Navigation Buttons - Glassmorphism Base */
.woocommerce-MyAccount-navigation ul li,
.woocommerce-MyAccount-navigation ul li a,
.woocommerce-MyAccount-navigation ul li a:link,
.woocommerce-MyAccount-navigation ul li a:visited {
    background: rgba(19, 10, 33, 0.6) !important;
    background-color: rgba(19, 10, 33, 0.6) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 240, 255, 0.4) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.15) !important;
    transition: all 0.3s ease-in-out !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
    display: block !important;
}

 
 

 
 
/* Custom Neon Backdrop & Radial Glow */
#preloader,
.preloader,
.loader,
#loader-wrapper {
    background-color: #07030a !important;
    background-image: radial-gradient(circle at center, rgba(168, 85, 247, 0.25) 0%, rgba(0, 240, 255, 0.1) 40%, #07030a 75%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999 !important;
    /* Lets clicks pass through immediately when faded */
    transition: opacity 0.5s ease, visibility 0.5s ease !important;
}

/* Force-Hide Theme Default GIF, SVGs, Canvas, and CSS Spinners */
#preloader img,
.preloader img,
#preloader svg,
.preloader svg,
#preloader canvas,
.preloader canvas,
#preloader .spinner,
.preloader .spinner,
#preloader .loader,
.preloader .loader,
.loader-section,
.preloader-inner,
div[class*="preloader"] > div,
div[class*="loader"] > div,
#preloader span:not(::before),
.preloader span:not(::before) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}
/* Custom Neon Text "STOSPN" */
#preloader::before,
.preloader::before,
#loader-wrapper::before {
    content: "STOSPN" !important;
    font-family: 'Courier New', Courier, monospace, sans-serif !important;
    font-size: 3.8rem !important;
    font-weight: 900 !important;
    letter-spacing: 8px !important;
    color: #00f0ff !important;
    text-transform: uppercase !important;
    animation: neonPlugInOnce 1.2s ease-in-out forwards !important;
}

/* Single Flicker Plug-In Animation */
@keyframes neonPlugInOnce {
    0%, 19%, 21%, 23%, 25%, 54%, 56% {
        color: rgba(0, 240, 255, 0.2);
        text-shadow: none;
        opacity: 0.3;
    }
    20%, 22%, 24%, 55%, 100% {
        color: #00f0ff;
        text-shadow:
            0 0 5px #00f0ff,
            0 0 10px #00f0ff,
            0 0 20px #00f0ff,
            0 0 40px #a855f7,
            0 0 80px #a855f7;
        opacity: 1;
    }
}

/* Unblocks the Screen Completely When Page Loads */
body.loaded #preloader,
body.loaded .preloader,
#preloader.loaded,
.preloader.loaded,
#preloader.hide,
.preloader-hide,
body #preloader[style*="display: none"] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* Hover & Active Button Glow State */ 
.woocommerce-MyAccount-navigation ul li:hover a, 
.woocommerce-MyAccount-navigation ul li a:hover, 
.woocommerce-MyAccount-navigation ul li.is-active, 
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: rgba(168, 85, 247, 0.25) !important; 
    background-color: rgba(168, 85, 247, 0.25) !important; 
    background-image: none !important; 
    color: #00f0ff !important; 
    border-color: #00f0ff !important; 
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.6), 0 0 25px rgba(168, 85, 247, 0.4) !important; 
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.9) !important; 
} 

/* Hide Address Tab from My Account Navigation */ 
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address {
    display: none !important; 
} 

/* Custom Neon Backdrop & Radial Glow Matching Logo Colors */
#preloader,
.preloader,
.loader,
#loader-wrapper {
    background-color: #07030a !important;
    background-image: radial-gradient(circle at center, rgba(168, 85, 247, 0.25) 0%, rgba(0, 240, 255, 0.1) 40%, #07030a 75%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999 !important;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out !important;
}

/* Force Hide Theme Default GIF / Images / Spinners */
#preloader img,
.preloader img,
#preloader svg,
.preloader svg,
#preloader .spinner,
.preloader .spinner,
.loader-section,
.preloader-inner {
    display: none !important;
}

/* Custom Neon Text "STOSPN" */
#preloader::before,
.preloader::before,
#loader-wrapper::before {
    content: "STOSPN" !important;
    font-family: 'Courier New', Courier, monospace, sans-serif !important;
    font-size: 3.8rem !important;
    font-weight: 900 !important;
    letter-spacing: 8px !important;
    color: #00f0ff !important;
    text-transform: uppercase !important;
    animation: neonPlugIn 1.4s ease-in-out infinite alternate !important;
}

/* Neon Plug-In & Multi-Layer Glow Keyframes */
@keyframes neonPlugIn {
    0%, 19%, 21%, 23%, 25%, 54%, 56% {
        color: rgba(0, 240, 255, 0.2) !important;
        text-shadow: none !important;
        opacity: 0.3;
    }
    20%, 22%, 24%, 55%, 100% {
        color: #00f0ff !important;
        text-shadow:
            0 0 5px #00f0ff,
            0 0 10px #00f0ff,
            0 0 20px #00f0ff,
            0 0 40px #a855f7,
            0 0 80px #a855f7,
            0 0 100px #a855f7 !important;
        opacity: 1;
    }
}
/* Sub-Menu Links Default State (Bright Cream & Clear) */
.main-navigation ul ul li a,
.main-nav ul.mobile_nav .sub-menu li a,
#site-navigation .sub-menu li a,
.menu-sec .sub-menu li a,
.sub-menu li a,
.dropdown-menu li a {
    color: #fdf6e3 !important; /* Soft Cream for high contrast */
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8) !important;
}

/* Hover State Remains Glowing Cyan/Purple */
.main-navigation ul ul li a:hover,
.main-nav ul.mobile_nav .sub-menu li a:hover,
#site-navigation .sub-menu li a:hover,
.menu-sec .sub-menu li a:hover,
.sub-menu li a:hover,
.dropdown-menu li a:hover {
    color: #00f0ff !important; /* Neon Cyan */
    background-color: rgba(168, 85, 247, 0.25) !important;
    text-shadow: 0 0 8px #00f0ff !important;
}
/* Custom Transparent & Neon TOP Button */
a.scroll-btn,
.scroll-btn,
#button.scroll-btn {
    background-color: transparent !important;
    background: transparent !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
}

/* Hover Effect */
a.scroll-btn:hover,
.scroll-btn:hover,
#button.scroll-btn:hover {
    background-color: transparent !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        inset 0 0 12px rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-3px) !important;
}
/* Compact Logo Styling */
.stospn-neon-logo {
    display: inline-block;
    position: relative;
    padding: 6px 14px !important; /* Reduced container padding */
    margin: 0 !important;
    font-family: 'Orbitron', 'Rajdhani', 'Segoe UI', sans-serif;
    font-size: 0.9rem !important; /* Scaled down from 4rem */
    font-weight: 800 !important;
    letter-spacing: 2px !important; /* Tighter letter spacing */
    text-transform: uppercase;
    background: transparent;
    border-radius: 8px;
    line-height: 0.8 !important;
    
    /* Radial Background Glow matching cyan/purple theme */
    background-image: radial-gradient(
        circle at center, 
        rgba(168, 85, 247, 0.3) 0%, 
        rgba(6, 182, 212, 0.15) 55%, 
        transparent 100%
    );
}

/* Scaled Cyan-to-Purple Gradient Text */
.stospn-text {
    position: relative;
    z-index: 2;
    background: linear-gradient(90deg, #00e5ff 0%, #3b82f6 50%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    
    /* Scaled Layered Glows for Small Text */
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.8)) 
            drop-shadow(0 0 10px rgba(168, 85, 247, 0.6));
    
    transition: all 0.3s ease-in-out;
}

/* Hover Effect */
.stospn-neon-logo:hover .stospn-text {
    filter: drop-shadow(0 0 6px #00e5ff) 
            drop-shadow(0 0 15px #a855f7);
    transform: translateY(-1px);
}
/* Ultimate High-Specificity Override for Search Button */
html body footer .widget.py-3 form.search-form input[type="submit"],
html body .widget_search form .search-submit,
html body form.search-form button[type="submit"],
html body form.search-form input[type="submit"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
}

/* Hover State */
html body footer .widget.py-3 form.search-form input[type="submit"]:hover,
html body .widget_search form .search-submit:hover,
html body form.search-form button[type="submit"]:hover,
html body form.search-form input[type="submit"]:hover {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        inset 0 0 12px rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-3px) !important;
}
/* Direct Widget Target for Search Submit */
#search-widget input.search-submit,
#search-widget .search-submit,
#search-widget input[type="submit"],
.widget.py-3 form.search-form input[type="submit"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
    text-transform: uppercase !important;
}

/* Hover State */
#search-widget input.search-submit:hover,
#search-widget .search-submit:hover,
#search-widget input[type="submit"]:hover,
.widget.py-3 form.search-form input[type="submit"]:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        inset 0 0 12px rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-3px) !important;
}
/* WordPress Pagination Base Styling */
.navigation.pagination .nav-links a.page-numbers,
.navigation.pagination .nav-links span.page-numbers {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* Pagination Hover State & Active/Current Page Styling */
.navigation.pagination .nav-links a.page-numbers:hover,
.navigation.pagination .nav-links span.page-numbers.current {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        inset 0 0 12px rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Dots Styling (…) */
.navigation.pagination .nav-links span.page-numbers.dots {
    border: none !important;
    box-shadow: none !important;
    color: #a855f7 !important;
}
/* WooCommerce My Account Navigation - Neon TOP Button Style */
.woocommerce-MyAccount-navigation ul li a,
.woocommerce-MyAccount-navigation ul li a:link,
.woocommerce-MyAccount-navigation ul li a:visited {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    display: block !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

/* Hover & Active/Selected Tab State */
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li:hover a,
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        inset 0 0 12px rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Container Spacing Between Navigation Items */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
}

.woocommerce-MyAccount-navigation ul li {
    margin-bottom: 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* WooCommerce Table Buttons & Order Action Buttons (View, Pay, Cancel, Browse Products) */
.woocommerce a.button,
.woocommerce table.my_account_orders .button,
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-message .button,
.woocommerce-info .button,
a.woocommerce-button.button {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

/* Hover State */
.woocommerce a.button:hover,
.woocommerce table.my_account_orders .button:hover,
.woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
a.woocommerce-button.button:hover {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        inset 0 0 12px rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-2px) !important;
}
/* Strip theme background and force neon style on active navigation tab */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.is-active a:link,
.woocommerce-MyAccount-navigation ul li.is-active a:visited,
.woocommerce-MyAccount-navigation ul li.is-active {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border: 2px solid #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        inset 0 0 12px rgba(168, 85, 247, 0.5) !important;
}
/* Remove extra outer box/border from WooCommerce account menu list items */
.woocommerce-MyAccount-navigation ul li,
.woocommerce-MyAccount-navigation ul li.is-active,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
}
<button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit">Search</button>
/* Gutenberg Block Search Button Override */
.wp-block-search__inside-wrapper button.wp-block-search__button,
.wp-block-search__inside-wrapper .wp-block-search__button,
button.wp-element-button.wp-block-search__button {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
}

/* Hover State */
.wp-block-search__inside-wrapper button.wp-block-search__button:hover,
.wp-block-search__inside-wrapper .wp-block-search__button:hover,
button.wp-element-button.wp-block-search__button:hover {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        inset 0 0 12px rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-2px) !important;
}
/* Awesome Support Buttons - Matching Site Neon Style */
.wpas-ticket-buttons-top .wpas-btn,
.wpas-ticket-buttons-top a.wpas-btn {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* Hover State */
.wpas-ticket-buttons-top .wpas-btn:hover,
.wpas-ticket-buttons-top a.wpas-btn:hover {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        inset 0 0 12px rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-2px) !important;
}
/* Hide Awesome Support Logout Button */
.wpas-ticket-buttons-top a.wpas-link-logout,
.wpas-ticket-buttons-top a[href*="action=logout"] {
    display: none !important;
}
/* Make Awesome Support Table Data Text Creamy */
.wpas-table td,
.wpas-ticket-details-header td {
    color: #fffdd0 !important; /* Creamy color */
}
/* Transparent Background for Ticket Replies & Containers */
.wpas-table tr,
.wpas-table td,
.wpas-ticket-replies tr,
.wpas-ticket-replies td,
.wpas-reply-single,
.wpas-reply-content,
.wpas-reply-meta {
    background: transparent !important;
    background-color: transparent !important;
}
/* Transparent Background for TinyMCE Text Editor Toolbar & Panels */
.mce-tinymce,
.mce-container,
.mce-container-body,
.mce-panel,
.mce-toolbar,
.mce-toolbar-grp,
.mce-btn,
.mce-top-part,
.mce-statusbar {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Change Editor Icon Colors so they stay visible on dark background */
.mce-ico {
    color: #00f0ff !important;
}

/* Button Hover State */
.mce-btn:hover,
.mce-btn:focus {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: #00f0ff !important;
}
/* Transparent Background and Styling for Reply Box Wrapper */
#wpas-reply-box,
#wp-wpas-reply-wysiwyg-wrap,
#wp-wpas-reply-wysiwyg-editor-container,
.wpas-wysiwyg-textarea {
    background: transparent !important;
    background-color: transparent !important;
}

/* Creamy Text Color for Ticket Responses & Reply Input Area */
.wpas-reply-content,
.wpas-reply-content p,
.ticket-reply,
.ticket-reply p,
textarea#wpas-reply-wysiwyg,
.wpas-form-control {
    color: #fffdd0 !important;
    background: transparent !important;
}

/* Outer Border Frame for the Editor Box */
.wp-editor-container {
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    border-radius: 6px !important;
    background: transparent !important;
}
/* Transparent Notice/Alert Box with Creamy Text & Neon Border */
.wpas-alert,
.wpas-notice,
.wpas-message,
div.wpas-alert-info {
    background: transparent !important;
    background-color: transparent !important;
    color: #fffdd0 !important; /* Creamy text */
    border: 1px solid #00f0ff !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 240, 255, 0.1) !important;
    border-radius: 6px !important;
}

/* Ensure Links/Text inside the Notice Box are Creamy/Neon */
.wpas-alert p,
.wpas-notice p,
.wpas-message p {
    color: #fffdd0 !important;
}

.wpas-alert a:not(.wpas-btn),
.wpas-notice a:not(.wpas-btn),
.wpas-message a:not(.wpas-btn) {
    color: #00f0ff !important;
    text-decoration: underline !important;
}

/* Neon Style Buttons inside the Notice Box */
.wpas-alert .wpas-btn,
.wpas-notice .wpas-btn,
.wpas-message .wpas-btn {
    background: transparent !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 0 0 8px #00f0ff, inset 0 0 8px rgba(0, 240, 255, 0.3) !important;
    transition: all 0.3s ease-in-out !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

.wpas-alert .wpas-btn:hover,
.wpas-notice .wpas-btn:hover,
.wpas-message .wpas-btn:hover {
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px #a855f7, 0 0 25px #a855f7 !important;
}
/* ==========================================
   SUPPORT TICKET REPLIES CUSTOM STYLING
   ========================================== */

/* 1. Single Reply Containers & Role Borders */
.wpas-reply-single.wpas_user_subscriber {
    background-color: #1e1e2f !important;
    border-left: 4px solid #00d34d !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
}

.wpas-reply-single.wpas_user_administrator {
    background-color: #2a2a3d !important;
    border-left: 4px solid #a855f7 !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
}

/* 2. Inner Reply Text Content */
.wpas-reply-content.ticket-reply p,
.wpas-reply-content p {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
}

/* 3. User Info & Timestamps */
.wpas-reply-meta .wpas-profilename {
    color: #a855f7 !important;
    font-weight: 600 !important;
}

.wpas-reply-time .wpas-human-date,
.wpas-reply-time .wpas-date-ago {
    color: #b3b3b3 !important;
    font-size: 12px !important;
}

/* 4. Profile Avatars */
.wpas-user-profile img.avatar {
    border-radius: 50% !important;
    border: 2px solid #a855f7 !important;
}
/* Make Product Select Box & Menu Background Dark/Transparent */
#wpas_product_wrapper select#wpas_product {
    background-color: transparent !important;
    background: transparent !important;
    color: #ffffff !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Force dark background & white text for expanded dropdown items */
#wpas_product_wrapper select#wpas_product option {
    background-color: #1e1e2f !important;
    color: #ffffff !important;
}
/* Neon Style for Submit Ticket Button */
button.wpas-btn.wpas-btn-default[name="wpas-submit"],
input[type="submit"].wpas-btn-default {
    background: transparent !important;
    color: #00f0ff !important; /* Neon cyan text */
    border: 2px solid #00f0ff !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4),
                inset 0 0 10px rgba(0, 240, 255, 0.2) !important;
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.6) !important;
}

/* Hover & Focus Effect */
button.wpas-btn.wpas-btn-default[name="wpas-submit"]:hover,
input[type="submit"].wpas-btn-default:hover {
    background-color: #00f0ff !important;
    color: #0d0e15 !important; /* Dark text on hover */
    box-shadow: 0 0 20px #00f0ff,
                0 0 40px #00f0ff !important;
    text-shadow: none !important;
}
/* Hide Privacy button inside top ticket buttons */
.wpas-ticket-buttons-top a.wpas-link-privacy,
a.wpas-btn.wpas-link-privacy,
a[class*="wpas-link-privacy"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Dashboard Button Styling */
.wpas-ticket-buttons-top a.wpas-link-privacy,
a.wpas-btn.wpas-link-privacy {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}
/* ==========================================================================
   NEON BUTTON STYLE FOR ADD TO CART / BOOK SERVICE BUTTONS
   ========================================================================== */

a.wp-block-button__link.add_to_cart_button,
.wp-block-button__link.add_to_cart_button,
.add_to_cart_button.ajax_add_to_cart,
ul.products li.product .button,
ul.products li.product a.button {
    background: rgba(19, 10, 33, 0.6) !important;
    background-color: rgba(19, 10, 33, 0.6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 240, 255, 0.4) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.15) !important;
    transition: all 0.3s ease-in-out !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
    display: inline-block !important;
    text-align: center !important;
    text-decoration: none !important;
}

/* Hover & Active State */
a.wp-block-button__link.add_to_cart_button:hover,
.wp-block-button__link.add_to_cart_button:hover,
.add_to_cart_button.ajax_add_to_cart:hover,
ul.products li.product .button:hover,
ul.products li.product a.button:hover {
    background: rgba(168, 85, 247, 0.25) !important;
    background-color: rgba(168, 85, 247, 0.25) !important;
    color: #00f0ff !important;
    border-color: #00f0ff !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.6), 0 0 25px rgba(168, 85, 247, 0.4) !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.9) !important;
}
/* ==========================================================================
   EXACT SCROLL-BUTTON STYLE FOR BOOK SERVICE / ADD TO CART BUTTONS
   ========================================================================== */

/* Base State - Matches .scroll-btn */
a.button.add_to_cart_button,
.button.add_to_cart_button,
.wp-block-button__link.add_to_cart_button,
ul.products li.product .button,
ul.products li.product a.button {
    background-color: transparent !important;
    background: transparent !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    border-radius: 8px !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.6) !important;
    display: inline-block !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

/* Hover State - Matches .scroll-btn:hover */
a.button.add_to_cart_button:hover,
.button.add_to_cart_button:hover,
.wp-block-button__link.add_to_cart_button:hover,
ul.products li.product .button:hover,
ul.products li.product a.button:hover {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        inset 0 0 12px rgba(168, 85, 247, 0.5) !important;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.9) !important;
    transform: translateY(-2px) !important;
}
/* Keep the main header fixed and compact */
.main-header,
.main-header.is-sticky,
.main-header.fixed,
header .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    z-index: 99999 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Maintain compact padding inside the menu container */
.main-header .container,
.main-header .menu-header {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Add top margin/padding to page content so nodes aren't pushed under the header */
#content,
.site-content,
main#main,
.stospn-landing-container,
.archive.post-type-archive-product #primary {
    padding-top: 100px !important;
}

/* Force full-width container & inner row across all pages/templates */
.container,
.site-content .container,
#primary.content-area,
.entry-content,
article .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure inner row grid stretches edge-to-edge */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Add comfortable side spacing to content sections while keeping full-width canvas */
.entry-content > *,
article > * {
    max-width: 100% !important;
}
/* Make the overall Contact Form 7 container full width / wider */
.wpcf7 {
    max-width: 1000px !important; /* Adjust overall maximum width */
    width: 100% !important;
    margin: 0 auto;
}

/* Make all form elements and fields expand to full width of the form */
.wpcf7 form {
    width: 100% !important;
}

.wpcf7 p,
.wpcf7-form-control-wrap {
    width: 100% !important;
    display: block !important;
}

/* Expand text inputs, email, subject, and textareas */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
}

/* Make the Message Body field significantly bigger */
.wpcf7 textarea {
    min-height: 250px !important; /* Increase vertical height */
    rows: 10;
}

/* Make the Submit button larger and wider */
.wpcf7 input[type="submit"] {
    min-width: 200px !important;
    padding: 14px 30px !important;
    font-size: 16px !important;
    cursor: pointer;
}
/* Match Contact Form 7 Container to Site Theme */
.wpcf7 {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto;
}

/* Labels and Field Titles */
.wpcf7 form label {
    width: 100%;
    color: #00f3ff; /* Theme cyan highlight */
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

/* Text Inputs and Message Body Styling */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100% !important;
    background-color: #0f0d22 !important; /* Dark container background */
    color: #ffffff !important;
    border: 1px solid rgba(0, 243, 255, 0.3) !important;
    border-radius: 6px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box !important;
}

/* Glowing Border on Focus */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-color: #00f3ff !important;
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.4) !important;
}

/* Make Message Box Large & Wide */
.wpcf7 textarea {
    min-height: 220px !important;
    resize: vertical;
}

/* Theme Styled Submit Button */
.wpcf7 input[type="submit"] {
    background-color: transparent !important;
    color: #00f3ff !important;
    border: 2px solid #00f3ff !important;
    border-radius: 6px !important;
    padding: 12px 36px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.wpcf7 input[type="submit"]:hover {
    background-color: #00f3ff !important;
    color: #080711 !important;
    box-shadow: 0 0 18px rgba(0, 243, 255, 0.6) !important;
}
/* Make WAPO total price table and its cells transparent */
#wapo-total-price-table,
#wapo-total-price-table table,
#wapo-total-price-table table tr,
#wapo-total-price-table table th,
#wapo-total-price-table table td {
    background: transparent !important;
    background-color: transparent !important;
}

/* Maintain bright white text and borders */
#wapo-total-price-table table th,
#wapo-total-price-table table td {
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}
/* Force YITH WAPO Container and Addons to be Transparent */
.yith-wapo-container,
.yith-wapo-block,
.yith-wapo-addon,
#yith-wapo-container,
div[id^="yith-wapo-addon-"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Ensure individual options have a subtle neon border on transparent background */
.yith-wapo-option {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    border-radius: 6px !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
}

/* Make text bright white for maximum visibility */
.yith-wapo-container *,
.yith-wapo-addon * {
    color: #ffffff !important;
}
/* Selected Service Duration Option - Matches TOP Button Style */
.yith-wapo-option.selected,
.yith-wapo-option:has(input[type="radio"]:checked) {
    background: #000000 !important;
    background-color: #000000 !important;
    border: 2px solid #00f0ff !important;
    box-shadow: 0 0 15px #00f0ff, inset 0 0 10px rgba(0, 240, 255, 0.4) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease-in-out !important;
}

/* Glowing Neon Cyan Text inside Selected Option */
.yith-wapo-option.selected *,
.yith-wapo-option:has(input[type="radio"]:checked) * {
    color: #00f0ff !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.9) !important;
}

/* Book Service Button - Transparent with Glowing Cyan Outline */
.single_add_to_cart_button,
button.single_add_to_cart_button.button.alt,
.woocommerce button.button.alt {
    background: transparent !important;
    background-color: transparent !important;
    color: #00f0ff !important;
    border: 2px solid #00f0ff !important;
    box-shadow: 0 0 15px #00f0ff, inset 0 0 10px rgba(0, 240, 255, 0.4) !important;
    border-radius: 8px !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.9) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    transition: all 0.3s ease-in-out !important;
    cursor: pointer !important;
}

/* Hover Effect - Glowing Purple */
.single_add_to_cart_button:hover,
button.single_add_to_cart_button.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: rgba(157, 0, 255, 0.2) !important;
    color: #b026ff !important;
    border-color: #b026ff !important;
    box-shadow: 0 0 20px #b026ff, inset 0 0 12px rgba(176, 38, 255, 0.5) !important;
    text-shadow: 0 0 10px rgba(176, 38, 255, 0.9) !important;
}

/* Click / Active State - Electric Purple */
.single_add_to_cart_button:active,
button.single_add_to_cart_button.button.alt:active,
.woocommerce button.button.alt:active {
    background: #b026ff !important;
    color: #ffffff !important;
    border-color: #b026ff !important;
    box-shadow: 0 0 25px #b026ff, 0 0 10px #b026ff !important;
    text-shadow: none !important;
}
/* Proceed to Checkout Button - Transparent with Neon Cyan Glow */
a.wc-block-cart__submit-button,
.wc-block-cart__submit-button,
.wc-block-components-button {
    background: transparent !important;
    background-color: transparent !important;
    color: #00f0ff !important;
    border: 2px solid #00f0ff !important;
    box-shadow: 0 0 15px #00f0ff, inset 0 0 10px rgba(0, 240, 255, 0.4) !important;
    border-radius: 8px !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.9) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    transition: all 0.3s ease-in-out !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
}

/* Hover Effect - Glowing Purple */
a.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-button:hover {
    background: rgba(157, 0, 255, 0.2) !important;
    color: #b026ff !important;
    border-color: #b026ff !important;
    box-shadow: 0 0 20px #b026ff, inset 0 0 12px rgba(176, 38, 255, 0.5) !important;
    text-shadow: 0 0 10px rgba(176, 38, 255, 0.9) !important;
}

/* Active / Click State - Electric Purple */
a.wc-block-cart__submit-button:active,
.wc-block-cart__submit-button:active,
.wc-block-components-button:active {
    background: #b026ff !important;
    color: #ffffff !important;
    border-color: #b026ff !important;
    box-shadow: 0 0 25px #b026ff, 0 0 10px #b026ff !important;
    text-shadow: none !important;
}

/* Ensure inner text retains glowing neon cyan color */
.wc-block-components-button__text {
    color: inherit !important;
}
/* Product Loop "Book Service" Button - Transparent with Glowing Cyan Outline */
.wc-block-components-product-button__button,
a.wc-block-components-product-button__button,
.wp-block-button__link.wc-block-components-product-button__button {
    background: transparent !important;
    background-color: transparent !important;
    color: #00f0ff !important;
    border: 2px solid #00f0ff !important;
    box-shadow: 0 0 15px #00f0ff, inset 0 0 10px rgba(0, 240, 255, 0.4) !important;
    border-radius: 8px !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.9) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease-in-out !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* Hover State - Electric Purple Glow */
.wc-block-components-product-button__button:hover,
a.wc-block-components-product-button__button:hover,
.wp-block-button__link.wc-block-components-product-button__button:hover {
    background: rgba(157, 0, 255, 0.2) !important;
    color: #b026ff !important;
    border-color: #b026ff !important;
    box-shadow: 0 0 20px #b026ff, inset 0 0 12px rgba(176, 38, 255, 0.5) !important;
    text-shadow: 0 0 10px rgba(176, 38, 255, 0.9) !important;
}

/* Active / Click State - Neon Purple Fill */
.wc-block-components-product-button__button:active,
a.wc-block-components-product-button__button:active,
.wp-block-button__link.wc-block-components-product-button__button:active {
    background: #b026ff !important;
    color: #ffffff !important;
    border-color: #b026ff !important;
    box-shadow: 0 0 25px #b026ff, 0 0 10px #b026ff !important;
    text-shadow: none !important;
}

/* Ensure inner span text inherits button color */
.wc-block-components-product-button__button span {
    color: inherit !important;
}
/* Restrain Ultimate Member Login, Register, and Account forms to clean centered container */
.um .um-form,
.um-login,
.um-register,
.um-account,
.um-directory {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Ensure form fields and buttons stay neatly aligned within the box */
.um .um-form input[type="text"],
.um .um-form input[type="password"],
.um .um-form input[type="email"],
.um .um-button {
    box-sizing: border-box !important;
}
/* Align Contact Form 7 and its preceding header/content divisions */
.wpcf7,
.wpcf7-form,
.wpcf7-form-control-wrap,
.entry-content > .wpcf7,
.entry-content > div:has(+ .wpcf7),
.entry-content > h1:has(~ .wpcf7),
.entry-content > h2:has(~ .wpcf7),
.entry-content > h3:has(~ .wpcf7),
.entry-content > p:has(~ .wpcf7) {
    max-width: 75% !important;
    width: 75% !important;
    margin-left: 40px !important;
    margin-right: auto !important;
}

/* Ensure form inputs, textareas, and labels fill the aligned container */
.wpcf7 p,
.wpcf7-form-control-wrap,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Submit button aligned to the left */
.wpcf7 input[type="submit"] {
    display: inline-block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Mobile responsive layout adjustment */
@media (max-width: 768px) {
    .wpcf7,
    .wpcf7-form,
    .entry-content > .wpcf7,
    .entry-content > div:has(+ .wpcf7),
    .entry-content > h1:has(~ .wpcf7),
    .entry-content > h2:has(~ .wpcf7),
    .entry-content > h3:has(~ .wpcf7),
    .entry-content > p:has(~ .wpcf7) {
        max-width: 90% !important;
        width: 90% !important;
        margin-left: 20px !important;
    }
}
/* Replace Header User Icon with Neon Free Trial Button */
.user-box a[href*="free-trial"],
.user-box a {
    background-color: transparent !important;
    background: transparent !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* Replace Header User Icon with Neon Free Trial Button (Single Line) */
.user-box a[href*="free-trial"],
.user-box a {
    background-color: transparent !important;
    background: transparent !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* Responsive Header Neon Button Fix */
.user-box {
    max-width: 100% !important;
    overflow: hidden !important;
}

.user-box a[href*="free-trial"],
.user-box a {
    background-color: transparent !important;
    background: transparent !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Fix header column alignment for large screens */
.menu-header .col-xxl-1.text-end,
.menu-header .col-xl-1.text-end,
.menu-header .col-lg-1.text-end {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 5px !important;
}

/* Keep Free Trial button on one line and prevent overflow */
.user-box {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

.user-box a[href*="free-trial"],
.user-box a {
    background-color: transparent !important;
    background: transparent !important;
    border: 2px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 
        0 0 8px #00f0ff,
        inset 0 0 8px rgba(0, 240, 255, 0.3),
        0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Hide the user icon fontawesome symbol */
.user-box a i.fa-solid.fa-user {
    display: none !important;
}

/* Inject "Free Trial" text cleanly */
.user-box a::after {
    content: "Free Trial" !important;
    color: inherit !important;
    white-space: nowrap !important;
}

/* Hover State */
.user-box a[href*="free-trial"]:hover,
.user-box a:hover {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        inset 0 0 12px rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-2px) !important;
}
/* Constrain header icons and service logos */
table img {
    max-width: 32px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Specifically target and align the country flag images */
table td:first-child img, 
table th:first-child img {
    max-width: 28px;
    height: auto;
    margin-bottom: 4px;
}
/* Constrain main content width and add left/right gaps */
body.single-post #primary,
body.page #primary,
.site-content,
article {
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}
body.single-post #primary,
body.page #primary,
.site-content,
article {
    max-width: 1040px !important;
    margin-top: 40px !important;    /* Adds space above the post content */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
}
/* Force solid white text on all table rows and cells */
table tr, 
table td, 
table th {
    color: #ffffff !important;
}
/* Hide Recent Comments widget site-wide */
#block-4 {
    display: none !important;
}
/* Hide original copyright paragraph and social icons */
.copywrap.text-center.close-sticky .copywrap-info > p,
.copywrap.text-center.close-sticky .footer-social {
    display: none !important;
}

/* Insert custom copyright text inside the container */
.copywrap.text-center.close-sticky .copywrap-info::after {
    content: "Developed By Maher Aboul Hosn. STOSPN Network © 2026. All rights reserved.";
    display: block !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
}
/* Hide Archives widget site-wide */
#archives {
    display: none !important;
}
/* Make specific footer column blocks and widget backgrounds transparent */
.footer-block,
.footer-block .widget,
#categories {
    background-color: transparent !important;
    background: transparent !important;
}
/* Hide entire footer section across all pages */
#footer,
.site-footer {
    display: none !important;
}
/* Prevent service images from cropping and zooming */
.footer-block img, 
.woocommerce ul.products li.product img, 
.products img, 
.service-item img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
}
/* Force absolute transparency on outer page wrappers and match footer background */
body.archive,
.site-boxed,
#pageholder.boxlayout,
#page {
    background-color: transparent !important;
}

/* Neon styled copyright notice with white glowing top border */
.stospn-copyright {
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    padding: 15px 0;
    margin-top: 100px;
    width: 100%;
    background: transparent !important;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.4);
    border-top: 1px solid #ffffff;
    box-shadow: 0 -4px 15px rgba(255, 255, 255, 0.4), 0 -1px 6px rgba(255, 255, 255, 0.8);
}
/* ==========================================================================
   MOBILE & TABLET TEXT WRAP & CONTAINER FIX
   ========================================================================== */

@media screen and (max-width: 1024px) {
    /* Ensure main content wrappers take full width without squeezing text */
    #primary, 
    .site-content, 
    .entry-content,
    article,
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* Prevent words from breaking vertically letter-by-letter */
    h1, h2, h3, h4, h5, h6, p, span, a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
}
/* ==========================================================================
   FIXED HEADER SPACING & SIDE GAPS (DESKTOP & MOBILE)
   ========================================================================== */

/* 1. Desktop Layout (Screens wider than 769px) */
@media screen and (min-width: 769px) {
    body.page-id-295 #pageholder,
    body.page-id-295 .mainhead {
        padding-top: 110px !important;
    }
    
    body.page-id-295 .site-main,
    body.page-id-295 article#post-295,
    body.page-id-295 .stospn-catalog-wrapper {
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        box-sizing: border-box !important;
    }
}

/* 2. Mobile Layout (Screens 768px and narrower) */
@media screen and (max-width: 768px) {
    body.page-id-295 #pageholder,
    body.page-id-295 .mainhead {
        padding-top: 90px !important;
    }

    body.page-id-295 .site-main,
    body.page-id-295 article#post-295,
    body.page-id-295 .stospn-catalog-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
}
/* Adjust this value based on your header's actual height */
body {
    padding-top: 120px !important;
}

@media screen and (max-width: 1024px) {
    body {
        padding-top: 190px !important;
    }
}
.picker-track {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.picker-btn {
    flex: 1 1 300px;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    text-align: center;
    word-break: break-word;
}

.picker-btn .rate-sub, 
.picker-btn .discount-pill {
    display: block;
    margin-top: 2px;
    font-size: 0.9em;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.hero-actions .btn {
    flex: 1 1 220px;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 20px;
    word-break: break-word;
    white-space: normal;
    height: auto;
}
/* Hide the MetaMask payment method option completely */
.payment_method_metamask, 
.wc_payment_method.payment_method_metamask {
    display: none !important;
}
/* Force absolute transparent background on WooCommerce notice containers */
body.woocommerce-js .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-js div.woocommerce-message,
body.woocommerce-js .woocommerce div.woocommerce-message {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(0, 243, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.woocommerce-js .woocommerce-message::before,
body.woocommerce-js div.woocommerce-message::before {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #4CAF50 !important;
}
/* Align the 4 subscription buttons side-by-side */
.billing-picker .picker-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Let each button stack its text vertically and grow naturally to fit everything */
.billing-picker .picker-btn {
    display: flex !important;
    flex: 1 1 0px !important;
    min-width: 0 !important;
    flex-direction: column !important; /* Stack text/price/discount vertically inside the box */
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 4px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    white-space: normal !important; /* Allow text to wrap naturally inside the button */
    text-align: center !important;
}

/* Style for sub-text and discount pills so they look neat and aligned */
.billing-picker .picker-btn .rate-sub,
.billing-picker .picker-btn .discount-pill {
    display: block !important;
    margin-top: 2px !important;
}
/* Fix dimmed text on billing picker buttons */
.billing-picker .picker-btn,
.billing-picker .picker-btn *,
.billing-picker .picker-btn .rate-sub {
    opacity: 1 !important;
    color: inherit !important; /* Maintains proper active/inactive contrast */
}

/* Ensure active/inactive text colors stay bright and readable */
.billing-picker .picker-btn.active {
    color: #ffffff !important;
}

.billing-picker .picker-btn:not(.active) {
    color: #e0e0e0 !important;
}
/* Fix dimmed text on Deploy A Node button */
a.btn.btn-primary,
.btn-primary {
    color: #ffffff !important;
    opacity: 1 !important;
}

.btn-primary * {
    color: #ffffff !important;
    opacity: 1 !important;
}
/* --- Neon Styling for Billing Picker Buttons --- */
.billing-picker .picker-btn {
    border: 1px solid #00f0ff !important;
    background-color: rgba(0, 240, 255, 0.03) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* Active or Hover state for billing options with a stronger neon glow */
.billing-picker .picker-btn.active,
.billing-picker .picker-btn:hover {
    border-color: #00f0ff !important;
    background-color: rgba(0, 240, 255, 0.15) !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4), inset 0 0 10px rgba(0, 240, 255, 0.2) !important;
}

/* --- Neon Styling for Deploy A Node Button --- */
a.btn.btn-primary,
.btn-primary {
    border: 1px solid #00f0ff !important;
    background-color: rgba(0, 240, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.25) !important;
    color: #00f0ff !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.4) !important;
    transition: all 0.3s ease !important;
}

a.btn.btn-primary:hover,
.btn-primary:hover {
    background-color: #00f0ff !important;
    color: #000000 !important;
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.6) !important;
    text-shadow: none !important;
}

a.btn.btn-primary *,
.btn-primary * {
    color: inherit !important;
}