/*
Theme Name: ProductTickler Pro
Description: A stunning dark theme with smooth animations and modern design for ProductTickler, based on the new design.
Version: 2.2.1 (Refactored & Patched)
Author: Your Team
Text Domain: productickler
*/

/* =================================================================
   1. CORE SETUP & CSS VARIABLES
   ================================================================= */
:root {
    /* Colors — light theme (bol.com / boloo.co inspired) */
    --color-background: #FFFFFF;
    --color-primary: #1D4ED8;
    /* Primary blue */
    --color-primary-light: #2563EB;
    --color-secondary: #2563EB;
    /* Secondary blue accent */
    --color-text: #0F172A;
    --color-text-muted: #64748B;
    --color-card-bg: #FFFFFF;
    --color-card-border: #E5E7EB;

    /* Surfaces (was glassmorphism on dark) */
    --glass-bg: #FFFFFF;
    --glass-border: #E5E7EB;

    /* Typography */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

    /* Layout */
    --header-height: 80px;
    --container-max-width: 1440px;
    --breakpoint-nav: 1400px;
}

/* --- Reset & Base Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-family-sans);
    background: var(--color-background);
    color: var(--color-text-muted);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Keep the dashboard header clickable by managing the stacking context. */
#page {
    position: relative;
    z-index: 2;
    /* Ensures page content is in a stacking context below the header */
}

.site-content {
    padding-top: var(--header-height);
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a:hover {
    color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.2;
}

section {
    padding: 100px 20px;
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* =================================================================
   2. LAYOUT & HELPERS
   ================================================================= */

/* --- Common Section Headers --- */
.section-tag {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    display: block;
    text-align: center;
}

.section-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    margin-bottom: 24px;
    max-width: 650px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-description {
    font-size: 1.1rem;
    margin-bottom: 60px;
    max-width: 600px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/* --- Scroll Animations --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animate {
    opacity: 1;
    transform: translateY(0);
}

/* =================================================================
   3. GLOBAL COMPONENTS
   ================================================================= */

/* --- Universal Form Elements --- */
.required {
    color: var(--color-secondary) !important;
}

/* --- Universal Button Styles --- */
.btn {
    padding: 12px 28px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none !important;
    color: white !important;
    text-decoration: none;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Primary Button (Gradient) */
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary, #1D4ED8), var(--color-secondary, #2563EB)) !important;
}

/* Secondary Button (Solid Purple) */
.btn-secondary {
    background: var(--color-primary, #1D4ED8) !important;
}

/* --- Universal Glass Card Style --- */
.feature-card,
.stat-card,
.testimonial-card,
.pricing-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 40px;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(15, 23, 42, 0.1);
}

.feature-card:hover,
.stat-card:hover,
.testimonial-card:hover,
.pricing-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.1), 0 10px 20px rgba(29, 78, 216, 0.2), inset 0 1px 0 rgba(15, 23, 42, 0.1);
    border-color: var(--color-primary);
}


/* =================================================================
   4. HEADER & NAVIGATION
   ================================================================= */

/* --- Main Header Bar (Common styles for all sizes) --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid transparent;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    transition:
        height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        backdrop-filter 0.35s ease;
}

.site-header.scrolled {
    height: 62px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

/* Header buttons also shrink slightly on scroll */
.site-header.scrolled .btn {
    padding: 8px 18px !important;
    font-size: 0.9rem !important;
}

.header-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 20px;
    flex-wrap: nowrap;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    z-index: 1002;
    flex-shrink: 0;
}

/* --- BASE DESKTOP STYLES (No Media Query - Fixes Jump & Inconsistency) --- */
.navigation-wrapper {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.main-nav {
    flex: 1 1 0%;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.navigation-wrapper .main-nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 2px !important;
}

.main-nav li {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.main-nav a {
    color: var(--color-text-muted) !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: block !important;
    white-space: nowrap;
    font-size: 1rem !important;
}

.main-nav a:hover,
.main-nav li.current-menu-item>a,
.main-nav li.current-page-ancestor>a {
    background: rgba(29, 78, 216, 0.15) !important;
    color: var(--color-primary) !important;
}

/* --- Dropdown Menu Styles --- */
.main-nav ul li.menu-item-has-children {
    position: relative;
}

.main-nav ul li.menu-item-has-children>a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 8px;
    margin-bottom: 2px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.main-nav ul li.menu-item-has-children:hover>a::after {
    transform: rotate(-135deg);
}

.main-nav ul.sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: rgba(248, 250, 252, 0.95) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    min-width: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.1) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
    pointer-events: none;
    /* Prevent hover when hidden */
}

/* Add a transparent bridge to prevent dropdown from closing when cursor moves from parent to child */
.main-nav ul.sub-menu::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 15px;
}

.main-nav ul li.menu-item-has-children:hover>ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto;
    /* Enable hover when visible */
}

.main-nav ul.sub-menu li {
    width: 100% !important;
}

.main-nav ul.sub-menu a {
    padding: 10px 15px !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    white-space: normal !important;
    /* Allow long titles to wrap in dropdown */
    line-height: 1.4 !important;
}

body.home .main-nav li.current-menu-item a[href*="#"] {
    background: transparent !important;
    color: var(--color-text-muted) !important;
    box-shadow: none !important;
}

body.home .main-nav li.current-menu-item a[href*="#"]:hover {
    background: rgba(29, 78, 216, 0.15) !important;
    color: var(--color-primary) !important;
}

.header-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.header-buttons .btn-primary {
    background: linear-gradient(135deg, #1D4ED8, #2563EB) !important;
    color: #FFFFFF !important;
}

.header-buttons .btn-secondary {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: none !important;
}

.header-buttons .btn-secondary:hover {
    background: #F3F4F6 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

.header-buttons .btn-tertiary {
    background: transparent !important;
    color: #64748B !important;
    border: none !important;
    box-shadow: none !important;
}

.header-buttons .btn-tertiary:hover {
    color: #1D4ED8 !important;
    background: transparent !important;
}

/* --- Mobile Menu Elements (Hidden by Default) --- */
.mobile-menu-toggle,
.mobile-menu-header,
.menu-separator,
#mobile-menu-overlay {
    display: none;
}

/* --- MOBILE BREAKPOINT OVERRIDES --- */
/* NOTE: 1400px breakpoint switches to the hamburger menu early enough to prevent
   nav items from overlapping with header buttons on mid-size screens (6 nav links
   + 3 action buttons need ~1350px of usable space). */
@media (max-width: 1400px) {

    /* Force the header bar to always be visible in mobile layout.
       The JS scroll handler hides it with translateY(-100%) inline style;
       this ensures it can never be hidden when the hamburger is the only
       way to navigate. */
    .site-header {
        transform: translateY(0) !important;
    }

    /* Show mobile toggle and hide desktop nav */
    .mobile-menu-toggle {
        display: block;
    }

    .main-nav,
    .header-buttons {
        display: none;
    }

    /* Push the hamburger icon to the right */
    .navigation-wrapper {
        justify-content: flex-end;
    }

    /* Style the hamburger button */
    .mobile-menu-toggle {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1001;
        position: relative;
        width: 44px;
        height: 44px;
    }

    .mobile-menu-toggle .line {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-text);
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        border-radius: 2px;
    }

    /* Style the slide-out panel.
       IMPORTANT: No CSS transition here — the transition is set via inline
       style in JS only when the menu is explicitly toggled. This prevents
       the wrapper from animating when the viewport crosses the breakpoint
       (e.g. on zoom), which caused a Chrome compositing bug that made the
       entire header vanish. */
    .navigation-wrapper {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: rgba(248, 250, 252, 0.9);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0;
        transform: translateX(100%);
        z-index: 999;
        padding: 100px 20px 40px 20px;
        border-left: 1px solid var(--glass-border);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reveal the panel when active */
    body.mobile-menu-open .navigation-wrapper {
        transform: translateX(0);
    }

    /* Show elements inside the panel.
       Note: mobile-menu-header stays hidden (display:none from base styles) because
       it contains a duplicate logo that can scroll and overlap with the X button.
       The main header logo stays visible instead. */
    .navigation-wrapper .main-nav,
    .navigation-wrapper .header-buttons {
        display: flex;
    }

    .menu-separator {
        display: block;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
        margin: 30px 0;
    }

    /* Style the links and buttons inside the panel */
    .main-nav {
        flex-grow: 0;
        justify-content: flex-start;
    }

    /* Reset desktop styles */
    .main-nav ul {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        width: 100% !important;
    }

    .main-nav li {
        width: 100% !important;
    }

    .main-nav a {
        font-size: 1.5rem !important;
        font-weight: 600 !important;
        padding: 12px 15px !important;
        width: 100% !important;
        text-align: left !important;
    }

    .header-buttons {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
        gap: 15px;
    }

    .header-buttons .btn {
        width: 100%;
        text-align: center;
        font-size: 1.1rem;
    }

    /* Hamburger to 'X' animation */
    body.mobile-menu-open .mobile-menu-toggle .line1 {
        transform: translateY(7px) rotate(45deg);
    }

    body.mobile-menu-open .mobile-menu-toggle .line2 {
        opacity: 0;
    }

    body.mobile-menu-open .mobile-menu-toggle .line3 {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Fade out the main logo when menu is open */
    .site-header>.header-container>.site-logo.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .site-header>.header-container>.site-logo {
        transition: opacity 0.3s ease-in-out;
    }

    /* Show the overlay */
    #mobile-menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0s 0.4s;
    }

    body.mobile-menu-open #mobile-menu-overlay {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }
}

/* =================================================================
   5. PAGE SECTIONS (Hero, Features, etc.)
   ================================================================= */

/* --- Hero Section --- */
.hero-section {
    padding: 0 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(90vh - var(--header-height));
}

.hero-content {
    max-width: 850px;
    display: block;
    /* CRITICAL: Ensure this is block, not flex */
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--color-text);
    display: block;
    /* ADDED: Force block display */
}

.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--color-secondary) !important;
    font-weight: 600;
    margin-bottom: 24px;
    display: block;
    /* ADDED: Force block display */
}

.hero-description {
    font-size: 1.1rem;
    max-width: 650px;
    margin: 0 auto 40px;
    display: block;
    /* ADDED: Force block display */
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-buttons .btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    color: #FFFFFF !important;
}

.hero-buttons .btn-tertiary {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
}

/* --- Features Grid (3 cards below Hero) --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 60px;
    max-width: 1200px;
    margin: -50px auto 100px;
    position: relative;
    z-index: 10;
}

.feature-card {
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.feature-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.feature-title {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.feature-description {
    font-size: 1rem;
    line-height: 1.5;
}

/* --- Detailed Features (with Demos) --- */
.features-detailed-section {
    padding: 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.features-detailed-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
    margin-bottom: 60px;
}

.feature-detailed-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    text-align: left;
    transition: all 0.8s ease;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}

.feature-detailed-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.1), 0 10px 20px rgba(29, 78, 216, 0.2);
}

.feature-detailed-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 450px;
}

.feature-detailed-card:nth-child(even) .feature-detailed-text {
    order: 2;
}

.feature-detailed-text {
    padding: 50px;
}

.feature-detailed-image {
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    position: relative;
}

.feature-detailed-tag {
    color: var(--color-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
    display: inline-block;
    padding: 6px 12px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.feature-detailed-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 20px;
}

.feature-detailed-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: 30px;
}

.feature-detailed-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    padding: 24px 0;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.feature-detailed-stat {
    text-align: center;
    flex: 1;
}

.feature-detailed-stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-secondary);
    display: block;
    margin-bottom: 8px;
}

.feature-detailed-stat-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.feature-detailed-list {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}

.feature-detailed-list li {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--color-text-muted);
    font-size: 1rem;
}

.feature-detailed-list li::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
}

/* --- Demo Preview Iframe Styles --- */
.premium-demo-container {
    position: relative;
    width: 100%;
    min-height: 450px;
    overflow: hidden;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.4s ease;
}

.feature-preview-iframe {
    width: 1280px;
    height: 800px;
    border: 30px solid #FFFFFF;
    background-color: #FFFFFF;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5625);
    transform-origin: center center;
}

.premium-demo-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Changed from 8px */
    /* Changed from 8px */
    background-color: rgba(248, 250, 252, 0.1);
    transition: opacity 0.4s ease;
}

-demo-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(248, 250, 252, 0.1);
    transition: opacity 0.4s ease;
}

.premium-demo-container:hover::before {
    opacity: 0;
}

.premium-demo-container:hover {
    border: 3px solid #2563EB;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
}

.premium-overlay {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(60, 20, 100, 0.75), rgba(80, 30, 120, 0.72));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    border-radius: 16px;
}

.premium-demo-container:hover .premium-overlay {
    opacity: 1;
    visibility: visible;
}

.overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.play-icon {
    width: 48px;
    height: 48px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.overlay-text {
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
}

.demo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.demo-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 95%;
    height: 90%;
    max-width: 1400px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F3F4F6 100%);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transform: scale(0.95);
    transition: all 0.3s ease;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12);
}

.demo-modal.active .modal-content {
    transform: scale(1);
}

.custom-modal-overlay .modal-header {
    height: 60px;
    background: rgba(15, 15, 30, 0.8);
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #F9FAFB;
}

.modal-close {
    width: 32px;
    height: 32px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 6px;
    color: #9CA3AF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#demoFrame {
    width: 100%;
    height: calc(100% - 60px);
    border: none;
}

/* --- Stats & Testimonials --- */
.stats-grid,
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.stat-card {
    text-align: left;
}

.stat-icon {
    margin-bottom: 24px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-text);
}

.stat-title {
    font-size: 1.2rem;
    color: var(--color-text);
    margin: 8px 0;
    font-weight: 600;
}

.stat-subtitle {
    font-size: 1rem;
    opacity: 0.8;
}

/* --- Pricing Widget --- */
.pricing-section {
    text-align: center;
}

.pricing-title-centered {
    text-align: center;
}

.pricing-section .section-title span {
    color: var(--color-secondary);
}

.pricing-card {
    max-width: 490px;
    margin: 60px auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pricing-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.15), rgba(37, 99, 235, 0.15));
    border-radius: 16px;
    margin-bottom: 25px;
    border: 1px solid var(--glass-border);
}

.pricing-card-icon svg {
    width: 32px;
    height: 32px;
    color: white;
    fill: white;
}

.pricing-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #1D4ED8 !important;
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.pricing-title {
    font-size: 1.5rem;
}

.pricing-subtitle {
    margin-bottom: 24px;
}

.pricing-price {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-text);
}

.pricing-price .pricing-period-small {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 700;
    margin-left: 5px;
}

.plan-savings {
    color: var(--color-secondary);
    font-size: 1rem;
    font-weight: 600;
    margin-top: -15px;
    margin-bottom: 25px;
    height: 1.5em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.plan-savings.visible {
    opacity: 1;
}

.pricing-features {
    list-style: none;
    margin: 30px 0;
    text-align: left;
    width: 100%;
    max-width: 280px;
}

.pricing-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pricing-features li::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: rgba(29, 78, 216, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300AA97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    border-radius: 50%;
}

.pricing-features-toggle {
    list-style: none !important;
    margin-top: 10px !important;
}

.pricing-features-toggle::before {
    display: none !important;
}

.btn-features-toggle {
    background: transparent;
    border: none;
    color: var(--color-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 8px 0;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.btn-features-toggle:hover {
    color: var(--color-primary);
}

.pricing-features-hidden {
    margin-top: 0;
}

.pricing-card .btn {
    width: 100%;
    background: #1D4ED8 !important;
    color: #FFFFFF !important;
}

.plan-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 40px 0;
    flex-wrap: wrap;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-asterisk {
    font-size: 0.9rem !important;
    vertical-align: super;
    margin-left: 2px;
    color: var(--color-text-muted);
}

.toggle-switch {
    position: relative;
    width: 56px;
    height: 30px;
    background: var(--color-card-bg);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--color-card-border);
}

.toggle-switch.active {
    background: var(--color-secondary);
}

.toggle-slider {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: var(--color-text);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.toggle-switch.active .toggle-slider {
    transform: translateX(25px);
}

.yearly-savings {
    background: rgba(37, 99, 235, 0.15);
    color: var(--color-secondary);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    border: 1px solid rgba(37, 99, 235, 0.3);
}

/* --- FAQ Section --- */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    text-align: left;
}

.faq-column h3 {
    margin-bottom: 20px;
}

.faq-column-title {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 20px;
    color: var(--color-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.faq-column-title--purple {
    color: var(--color-primary);
}

.faq-column-title--green {
    color: #2563EB;
}

.faq-item {
    border-bottom: 1px solid var(--color-card-border);
}

.faq-question {
    padding: 20px 0;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    width: 100%;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: var(--color-secondary);
}

.faq-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    font-size: 1.2rem;
    color: var(--color-primary);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: var(--color-secondary);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-answer-content {
    padding-bottom: 20px;
    line-height: 1.6;
}

/* --- Related Posts on Comparison Pages --- */
.pt-comp-related-posts {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

.pt-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.pt-related-card {
    display: flex;
    flex-direction: column;
    background: var(--glass-bg, rgba(15, 23, 42, 0.03));
    border: 1px solid var(--glass-border, rgba(15, 23, 42, 0.08));
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.pt-related-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent, #1D4ED8);
}

.pt-related-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.pt-related-content {
    padding: 20px;
    text-align: left;
}

.pt-related-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--color-text, #fff);
    line-height: 1.3;
}

.pt-related-content p {
    font-size: 0.9rem;
    color: var(--color-text-muted, #999);
    margin: 0 0 12px;
    line-height: 1.5;
}

.pt-related-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent, #1D4ED8);
}

@media (max-width: 768px) {
    .pt-related-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pt-related-card {
        flex-direction: row;
    }

    .pt-related-thumb {
        flex-shrink: 0;
        width: 120px;
    }

    .pt-related-thumb img {
        height: 100%;
        width: 120px;
    }
}

/* --- Final CTA Section --- */
.final-cta-section {
    padding: 0 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.1), rgba(37, 99, 235, 0.1));
    border-radius: 24px;
    max-width: 1200px;
    margin: 40px auto 60px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
}

.final-cta-content {
    max-width: 700px;
    margin: 0;
    padding: 0;
}

.final-cta-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 20px;
    margin-top: 0;
    line-height: 1.2;
}

.final-cta-description {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    line-height: 1.6;
}

.final-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.final-cta-buttons .btn-tertiary {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
}

/* --- Footer --- */
.site-footer {
    background-color: #0A1E4E;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 80px 0 40px;
    margin-top: 60px;
    color: rgba(255, 255, 255, 0.72);
}
.site-footer h3 { color: #FFFFFF !important; }
.site-footer .footer-section p,
.site-footer .footer-section a { color: rgba(255, 255, 255, 0.66); }
.site-footer .footer-section a:hover { color: #FFFFFF; }
.site-footer .footer-bottom { color: rgba(255, 255, 255, 0.48); border-top-color: rgba(255, 255, 255, 0.1); }
.site-footer .footer-bottom p { color: rgba(255, 255, 255, 0.55); }
.site-footer .footer-brand a span { color: #FFFFFF !important; }

.site-footer .footer-brand a img,
.site-footer .footer-brand img,
.site-footer img.footer-logo,
.site-footer .footer-logo,
.site-footer .footer-logo img {
    max-height: 40px !important;
    max-width: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.footer-content {
    max-width: var(--container-max-width);
    margin: 0 auto 40px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.footer-section h3 {
    font-size: 1rem;
    margin-bottom: 20px;
    color: var(--color-text);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 12px;
}

.footer-section ul li a:hover {
    color: var(--color-secondary);
}

.footer-section p,
.footer-section a {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.footer-socials-list a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-socials-list a:hover {
    color: var(--color-primary);
}

.footer-socials-list i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.footer-bottom {
    border-top: 1px solid var(--glass-border);
    padding: 30px 20px 0;
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* =================================================================
   6. RESPONSIVE MEDIA QUERIES
   ================================================================= */

@media (max-width: 992px) {

    .faq-grid,
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .features-detailed-grid,
    .feature-detailed-content {
        grid-template-columns: 1fr !important;
    }

    .feature-detailed-card:nth-child(even) .feature-detailed-text,
    .feature-detailed-card:nth-child(even) .feature-detailed-image {
        order: unset;
    }

    .feature-detailed-image {
        min-height: 250px;
        border-radius: 0 0 20px 20px !important;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 70px;
    }

    section {
        padding: 80px 20px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .features-grid,
    .stats-grid,
    .testimonials-grid,
    .faq-grid,
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
    }

}

/* 
 * 1. Target the specific header used ONLY on the dashboard page
 * and give it a high z-index to ensure it sits on top.
*/
.pt-dashboard-header {
    z-index: 1005;
}

/*
 * Ensure the dashboard sidebar stays below the fixed header on desktop screens without
 * affecting the mobile fly-out menu overlay.
 */
@media (min-width: 993px) {
    body.dashboard-full-page .pt-sidebar {
        z-index: 1004;
    }
}

/*
=================================================================
    Homepage Layout Adjustments
=================================================================
*/

/* 1.1: This removes the extra padding at the top of the homepage content area,
   which was pushing the hero section down unnecessarily. */
body.home .site-content,
body.front-page .site-content {
    padding-top: 0;
}

/* Magic landing page is a full-page hero template — it manages its own
   header clearance via the JS hero-layout initialiser (initMagicHeroLayout).
   Zero out site-content padding so the hero fills from the very top. */
body.page-template-page-magic-landing-php .site-content {
    padding-top: 0;
}

/* 1.2: This removes any bottom padding from the final section on the page
      to prevent a small sliver/gap from appearing above the footer. */
body.home main#primary>section:last-of-type,
body.front-page main#primary>section:last-of-type {
    padding-bottom: 0;
}

/*
=================================================================
    Kennis/Blog Page Grid & Button Styling
=================================================================
*/

/* This selector targets the main container on the blog/archive pages. */
body.blog .site-main .posts-container,
body.archive .site-main .posts-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

body.blog .site-main .navigation.pagination,
body.archive .site-main .navigation.pagination {
    text-align: center;
    margin-top: 2rem;
}

body.blog .site-main .post-card,
body.archive .site-main .post-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.blog .site-main .post-card:hover,
body.archive .site-main .post-card:hover {
    transform: translateY(-4px);
    border-color: rgba(29, 78, 216, 0.35);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(15, 23, 42, 0.12), 0 0 30px rgba(29, 78, 216, 0.08);
}

/* Post card thumbnail hover zoom */
body.blog .post-card:hover .post-card-thumbnail img,
body.archive .post-card:hover .post-card-thumbnail img {
    transform: scale(1.04);
}

/* Placeholder gradient for posts without featured images */
.post-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-bottom: 1px solid var(--glass-border, rgba(15, 23, 42, 0.1));
    position: relative;
    overflow: hidden;
}

.post-card-placeholder::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 78, 216, 0.12) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.post-card-placeholder svg {
    opacity: 0.25;
    color: var(--color-primary, #1D4ED8);
}

/* Make the card content fill remaining space so buttons align at bottom */
body.blog .post-card>div:last-child,
body.archive .post-card>div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.blog .post-card .entry-content,
body.archive .post-card .entry-content {
    flex: 1;
}

/* Card title link hover */
body.blog .post-card .entry-title a:hover,
body.archive .post-card .entry-title a:hover {
    color: var(--color-secondary, #2563EB) !important;
    transition: color 0.2s ease;
}

/* Category badges hover */
.post-card-categories a:hover {
    background: rgba(29, 78, 216, 0.3) !important;
}

/* Lees meer button styling */
body.blog article.post-card footer.entry-footer a.btn,
body.archive article.post-card footer.entry-footer a.btn {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

/* Responsive adjustments for the grid */
@media (max-width: 992px) {

    body.blog .site-main .posts-container,
    body.archive .site-main .posts-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    body.blog .site-main .posts-container,
    body.archive .site-main .posts-container {
        grid-template-columns: 1fr;
    }
}

/*
=================================================================
    Header Buttons & Layout
=================================================================
*/

/* 1. Fix the Header Layout Collision */
.header-container {
    gap: 24px;
}

/* 2. Fix the Button Sizing and Consistency */
.header-buttons .btn {
    white-space: nowrap;
    padding: 8px 14px !important;
    font-size: 0.825rem !important;
    font-weight: 500 !important;
    gap: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-buttons .btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* 3. Button Colors — light-mode (bol.com / boloo.co inspired) */
.header-buttons .btn-primary {
    background: linear-gradient(135deg, #1D4ED8, #2563EB) !important;
    color: #FFFFFF !important;
}

.header-buttons .btn-secondary {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: none !important;
}

.header-buttons .btn-secondary:hover {
    background: #F3F4F6 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

.header-buttons .btn-gradient {
    background: linear-gradient(135deg, #1D4ED8, #2563EB) !important;
    border: none !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(29, 78, 216, 0.28), 0 1px 3px rgba(29, 78, 216, 0.15);
    animation: carbon-pulse 3s ease-in-out infinite;
}

.header-buttons .btn-gradient:hover {
    box-shadow: 0 8px 22px rgba(29, 78, 216, 0.38), 0 2px 6px rgba(29, 78, 216, 0.2);
    transform: translateY(-1px);
    animation: none;
}

@keyframes carbon-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(29, 78, 216, 0.3), 0 0 4px rgba(29, 78, 216, 0.15); }
    50% { box-shadow: 0 0 20px rgba(29, 78, 216, 0.5), 0 0 8px rgba(29, 78, 216, 0.3); }
}

.header-buttons .btn-tertiary {
    background-color: transparent !important;
    border: 1px solid var(--color-card-border) !important;
    color: var(--color-text-muted) !important;
    box-shadow: none !important;
}

.header-buttons .btn-tertiary:hover {
    border-color: var(--color-primary) !important;
    background-color: rgba(29, 78, 216, 0.1) !important;
    color: var(--color-text) !important;
}

/* 4. Mobile display */
@media (max-width: 768px) {
    .header-buttons .btn span {
        display: none;
    }

    .header-buttons .btn {
        padding: 10px !important;
    }
}

/*
=================================================================
    PART 1.5 ---> Final Polish & Refinements
=================================================================
*/

/* Hero Title - glow animation removed (carbon) */

/* 2. Style "Bekijk in actie" CTA to match the "Start hier" button (Solid #1D4ED8) */
.feature-detailed-cta .btn-primary {
    background: #1D4ED8 !important;
}

/* 3. "Mijn account" / "Inloggen" button — outlined light-mode style */
.site-header .header-buttons a.btn-secondary[href*="mijn-account"] {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #E5E7EB !important;
}
.site-header .header-buttons a.btn-secondary[href*="mijn-account"]:hover {
    background: #F3F4F6 !important;
    border-color: #CBD5E1 !important;
}

/*
=================================================================
    NEXT BATCH ---> Kennis Page Title Hide
=================================================================
*/

/* This targets the page header ONLY on the blog index page (your Kennis page) and hides it. */
body.home.blog .page-header,
body.blog .page-header {
    display: none !important;
}


/* Style the logout button */
.header-buttons .btn-tertiary {
    background-color: transparent !important;
    border: 1px solid var(--color-card-border) !important;
    color: var(--color-text-muted) !important;
    box-shadow: none !important;
}

.header-buttons .btn-tertiary:hover {
    border-color: var(--color-primary) !important;
    background-color: rgba(29, 78, 216, 0.1) !important;
    color: var(--color-text) !important;
}

/*
=================================================================
    "Aanmelden" Button Text Color Adjustment
=================================================================
*/

/* Aanmelden button: handled by .header-buttons .btn-gradient above */

/*
=================================================================
    NEXT BATCH ---> Mobile Hamburger Menu Position Fix
=================================================================
*/

/* This media query ensures these rules ONLY apply on mobile screens */
@media (max-width: 992px) {

    /* 1. Make the header container a positioning context for the button. */
    .site-header .header-container {
        position: relative;
    }

    /* 2. Take the hamburger menu out of the normal layout flow and
       pin it to the top right corner of the header container. */
    .site-header .mobile-menu-toggle {
        position: absolute;
        top: 50%;
        right: 20px;
        /* Aligns with the header's padding */
        transform: translateY(-50%);
        /* Ensures perfect vertical centering */
    }
}

/*
=================================================================
    FEATURE REQUEST ---> Animated "Breathing" Outline Button
    This effect is more reliable and avoids background conflicts.
=================================================================
*/


/* 2. Apply the animation to the Dashboard button */
/* We make the button a positioning container */
/* Dashboard button: handled by .header-buttons .btn-gradient above */

/*
=================================================================
    POLISH ---> Remove Hover Glow from "Mijn Account" Button
=================================================================
*/

/*
 * The theme's main JavaScript adds a hover glow to all buttons.
 * This rule uses a high-specificity selector to target the "Mijn account"
 * button specifically when a user is logged in, and forcefully
 * removes the box-shadow glow on hover. This ensures the animated
 * "Dashboard" button is the only one with a prominent glow effect.
*/
body.logged-in .header-buttons a.btn-secondary:hover {
    box-shadow: none !important;
}

/*
=================================================================
    CUSTOM "MIJN ACCOUNT" PAGE STYLING
=================================================================
*/

/* Main container for the two-column layout */
.custom-account-container {
    display: flex;
    gap: 40px;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 60px 20px;
}

/* The custom sidebar navigation */
.custom-account-sidebar {
    flex: 0 0 250px;
    /* Do not grow, do not shrink, base width of 250px */
}

.custom-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-text);
    /* Set default text/icon color to white */
    opacity: 0.7;
    /* Make inactive links slightly subdued */
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.custom-nav-link:hover {
    background-color: var(--color-card-bg);
    opacity: 1;
    /* Make link fully bright on hover */
}

/* Style for the currently active link */
.custom-nav-link.is-active {
    background-color: var(--color-card-bg);
    border-color: var(--color-primary);
    /* Use primary color for a stronger border */
    font-weight: 600;
    opacity: 1;
    /* Ensure active link is fully bright */
}

.custom-nav-link i {
    width: 20px;
    height: 20px;
    stroke-width: 2px;
}

/* The main content area */
.custom-account-content {
    flex: 1;
    /* Grow to fill the remaining space */
    min-width: 0;
    /* Allows it to shrink on smaller screens */
}

/*
=================================================================
    CUSTOM "ACCOUNTGEGEVENS" FORM STYLING
=================================================================
*/

.custom-account-form-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--color-text);
}

.custom-account-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.custom-account-form .form-field {
    margin-bottom: 25px;
}

.custom-account-form label {
    display: block;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.custom-account-form label .required {
    color: var(--color-secondary) !important;
}

.custom-account-form input[type="text"],
.custom-account-form input[type="email"],
.custom-account-form input[type="password"] {
    width: 100%;
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-card-border) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    color: var(--color-text) !important;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.custom-account-form input:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.2) !important;
}

.custom-account-form .field-hint {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    opacity: 0.8;
    margin-top: 8px;
}

.custom-account-form .custom-fieldset {
    border: 1px solid var(--color-card-border);
    border-radius: 16px;
    padding: 25px;
    margin: 20px 0 25px 0;
}

.custom-account-form .custom-fieldset legend {
    padding: 0 15px;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--color-text);
}

.custom-account-address-section {
    margin-top: 60px;
    border-top: 1px solid var(--color-card-border);
    padding-top: 40px;
}

.custom-account-address-section .address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.custom-account-address-section .address-header .btn {
    padding: 8px 20px !important;
    font-size: 0.9rem !important;
}

.custom-account-address-section address {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    padding: 25px;
    line-height: 1.8;
    color: var(--color-text-muted);
    font-style: normal;
}

/*
=================================================================
    CUSTOM "EDIT ADDRESS" FORM STYLING
=================================================================
*/

/* Style the custom address form wrapper */
.custom-address-form {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    padding: 30px;
    margin-top: 20px;
}

/* Apply grid layout to the address form as well */
.custom-address-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.custom-address-form .form-field {
    margin-bottom: 25px;
}

.custom-address-form label {
    display: block;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

/* Use the same input styles as the main form for consistency */
.custom-address-form input[type="text"] {
    width: 100%;
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-card-border) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    color: var(--color-text) !important;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.custom-address-form input:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.2) !important;
}

/* Style the "Adres opslaan" button */
.custom-address-form .btn-secondary {
    width: auto;
    justify-self: start;
}

/*
=================================================================
    POLISH ---> Style "Read-Only" Address View Like a Form
=================================================================
*/

/* 1. Turn the <address> block into a grid container */
.custom-account-address-section address {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 25px;
    background-color: transparent;
    /* Remove the card background */
    border: none;
    /* Remove the card border */
    padding: 0;
    /* Remove the card padding */
}

/* 2. Create a wrapper for each "field" */
.address-field {
    margin-bottom: 5px;
}

/* 3. Style the labels (e.g., "Naam:", "Adres:") */
.address-field strong {
    display: block;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 10px;
    font-size: 0.95rem;
}

/* 4. This is the key: Style the data to look like a disabled input field */
.address-field span {
    display: block;
    width: 100%;
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    padding: 14px 18px;
    color: var(--color-text);
    font-size: 1rem;
    opacity: 0.7;
    /* Gives it a "read-only" feel */
    cursor: default;
    /* Show a normal cursor, not a text-input cursor */
}

/* 5. Make the full-width fields span both columns */
.address-field.full-width {
    grid-column: 1 / -1;
}

/*
=================================================================
    CUSTOM "ABONNEMENT" PAGE STYLING (v2 - Prestige Edition)
=================================================================
*/

.custom-subscription-dashboard .history-title {
    margin-top: 60px;
}

/* The "Current Plan" Card */
.current-plan-card {
    position: relative;
    /* Needed for the pseudo-element glow */
    overflow: hidden;
    /* Keeps the glow contained */
    display: flex;
    align-items: center;
    gap: 25px;
    border: 1px solid var(--color-card-border);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 40px;

    /* The Dynamic Gradient Background */
    background: radial-gradient(circle at 0% 0%, var(--color-primary), transparent 40%),
        radial-gradient(circle at 100% 100%, var(--color-secondary), transparent 40%),
        var(--color-card-bg);
    transition: all 0.4s ease;
}

/* Muted gradient for inactive/failed states */
.current-plan-card.status-cancelled,
.current-plan-card.status-failed,
.current-plan-card.status-inactive {
    background: radial-gradient(circle at 50% 50%, #F3F4F6, transparent 70%),
        var(--color-card-bg);
}

.current-plan-card .plan-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: rgba(15, 23, 42, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 1px solid rgba(15, 23, 42, 0.2);
}

.current-plan-card .plan-icon i {
    width: 32px;
    height: 32px;
}

.current-plan-card .plan-details .plan-name {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.current-plan-card .plan-details .plan-status {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    margin-top: 8px;
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--color-secondary);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.current-plan-card.status-on-hold .plan-status,
.current-plan-card.status-pending .plan-status {
    background-color: rgba(255, 165, 0, 0.1);
    color: #FFA500;
    border-color: rgba(255, 165, 0, 0.2);
}

.current-plan-card.status-cancelled .plan-status,
.current-plan-card.status-failed .plan-status,
.current-plan-card.status-inactive .plan-status {
    background-color: rgba(108, 117, 125, 0.2);
    color: #64748B;
    border-color: rgba(108, 117, 125, 0.3);
}

/* The new "Member Since" and "ID" section */
.current-plan-card .member-info {
    margin-left: auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-info .info-item .info-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.member-info .info-item .info-value {
    display: block;
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 600;
}

/* The Custom Order History Table (no changes, just included for completeness) */
.custom-order-history {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 16px;
    padding: 10px 30px 30px 30px;
}

.custom-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.custom-orders-table th {
    text-align: left;
    padding: 20px 15px;
    color: var(--color-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--color-card-border);
}

.custom-orders-table td {
    text-align: left;
    padding: 20px 15px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-card-border);
}

.custom-orders-table tr:last-child td {
    border-bottom: none;
}

.custom-orders-table .btn-secondary {
    padding: 8px 20px !important;
    font-size: 0.9rem !important;
}

/*
=================================================================
    CUSTOM "ORDER DETAILS" MODAL STYLING
=================================================================
*/
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(248, 250, 252, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-modal-overlay.is-visible {
    opacity: 1;
}

.custom-modal-panel {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.1);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.custom-modal-overlay.is-visible .custom-modal-panel {
    transform: scale(1);
}

.custom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid var(--color-card-border);
}

.custom-modal-header h2 {
    font-size: 1.5rem;
    margin: 0;
}

.custom-modal-close-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 5px;
}

.custom-modal-content {
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-loader {
    width: 40px;
    height: 40px;
    margin: 50px auto;
    border: 4px solid var(--color-card-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Styling for the content that gets loaded */
.modal-order-details .order-meta {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-card-border);
    margin-bottom: 20px;
}

.modal-order-details .order-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.modal-order-details .order-items-table th,
.modal-order-details .order-items-table td {
    padding: 15px 0;
    border-bottom: 1px solid var(--color-card-border);
    text-align: left;
}

.modal-order-details .order-items-table tfoot th,
.modal-order-details .order-items-table tfoot td {
    font-weight: 600;
    color: var(--color-text);
}

.modal-order-details .order-billing-address h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.modal-order-details .order-billing-address address {
    font-style: normal;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/*
=================================================================
    FEATURE REQUEST ---> Glowing "Prestige" Membership Card
=================================================================
*/

/* 1. Ensure the soft-glow keyframes are available (they should be) */

/* 2. Apply the animation to the ACTIVE membership card */
/* These are standard WooCommerce statuses for active/pending orders */
.current-plan-card.status-processing,
.current-plan-card.status-completed,
.current-plan-card.status-on-hold,
.current-plan-card.status-pending {
    /* Add a subtle transition for a nice hover effect */
    transition: transform 0.4s ease;
}

/* 4. Mute the entire card for INACTIVE states to add contrast */
.current-plan-card.status-cancelled,
.current-plan-card.status-failed,
.current-plan-card.status-refunded,
.current-plan-card.status-inactive {
    /* No animation for inactive states */
    animation: none;
    /* Make it look less important */
    filter: saturate(0.3);
    opacity: 0.7;
}

/*
=================================================================
    CUSTOM LOGIN PAGE STYLING (v2 - High Specificity)
=================================================================
*/

/*
 * Target the custom login template body class to guarantee these styles override
 * the default theme containers.
 */
body.page-template-page-mijn-account-php .custom-login-container {
    max-width: 550px;
    margin: 0 auto;
    padding: 80px 20px;
}

/* This rule now also uses the body class for higher specificity */
body.page-template-page-mijn-account-php .custom-login-container .woocommerce {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 16px;
    padding: 40px;
}

/* The rest of the form styling remains the same */
.custom-login-form .form-field {
    margin-bottom: 25px;
}

.custom-login-form label {
    display: block;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.custom-login-form label .required {
    color: var(--color-secondary) !important;
}

.custom-login-form label.remember-me {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-size: 0.9rem;
    cursor: pointer;
}

.custom-login-form input[type="text"],
.custom-login-form input[type="password"] {
    width: 100%;
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-card-border) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    color: var(--color-text) !important;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.custom-login-form input:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.2) !important;
}

.custom-login-form .form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 25px;
}

.custom-login-form .form-actions .btn {
    padding: 12px 28px !important;
}

.custom-login-form .lost-password {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--color-card-border);
}

/*
=================================================================
    CUSTOM LOST PASSWORD FORM STYLING
=================================================================
*/

.custom-form-intro {
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.7;
}


/*
=================================================================
    Lost Password & Notices Spacing
=================================================================
*/

/*
 * This adds some space below the success/error messages on the
 * login and lost password pages, ensuring they don't sit directly
 * on top of the form container.
*/
.custom-login-container .woocommerce-message,
.custom-login-container .woocommerce-error,
.custom-login-container .woocommerce-info {
    margin-bottom: 30px;
}

/*
=================================================================
    FEATURE ---> Custom Styling for Lucide Icons in WC Notices
=================================================================
*/

/* 1. Hide the old, default WooCommerce icon font */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none !important;
}

/* 2. Adjust the main notice container for the new icon */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    display: flex !important;
    align-items: center;
    gap: 20px;
    padding-left: 25px !important;
}

/* 3. Style the new icon wrapper and the SVG icon itself */
.notice-icon-wrapper {
    flex-shrink: 0;
}

.notice-icon-wrapper .lucide {
    width: 28px;
    height: 28px;
    stroke-width: 2.5px;
}

/* 4. Apply specific colors to each notice type for clarity */
.woocommerce-message .notice-icon-wrapper {
    color: var(--color-secondary);
    /* Teal for success */
}

.woocommerce-error .notice-icon-wrapper {
    color: #e74c3c;
    /* Red for error */
}

.woocommerce-info .notice-icon-wrapper {
    color: var(--color-primary);
    /* Purple for info */
}

/*
=================================================================
    CUSTOM CHECKOUT PAGE STYLING (v2 - Corrected Styles)
=================================================================
*/

/* --- Main Layout --- */
.custom-checkout-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
}

.checkout-main-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* Left column is slightly wider */
    gap: 60px;
    align-items: start;
}

.checkout-form-column {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 24px;
    /* Increased for a softer look */
    padding: 50px;
    /* Increased padding */
}

/* --- Shared form styles --- */
.checkout-section {
    margin-bottom: 40px;
}

.checkout-section h3 {
    font-size: 1.5rem;
    color: var(--color-text);
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-card-border);
    margin-bottom: 30px;
}

.checkout-form-column .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.checkout-form-column .form-field {
    margin-bottom: 25px;
}

.checkout-form-column label {
    display: block;
    font-weight: 500;
    color: var(--color-text);
    /* This is the change */
    margin-bottom: 10px;
}

.checkout-form-column input[type="text"],
.checkout-form-column input[type="email"],
.checkout-form-column input[type="password"] {
    width: 100%;
    background-color: var(--color-card-bg) !important;
    /* MATCH: Use card background */
    border: 1px solid var(--color-card-border) !important;
    /* MATCH: Use card border */
    border-radius: 12px !important;
    padding: 14px 18px !important;
    color: var(--color-text) !important;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.checkout-form-column .select2-container--default .select2-selection--single {
    background-color: var(--color-card-bg) !important;
    /* MATCH */
    border: 1px solid var(--color-card-border) !important;
    /* MATCH */
    border-radius: 12px !important;
    height: auto !important;
    padding: 14px 18px !important;
}

/* MATCH: Add the focus style from the account page */
.checkout-form-column input:focus,
.checkout-form-column .select2-container--open .select2-selection--single {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.2) !important;
}


/* --- Order Summary (Right Column) --- */
#order_review {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 24px;
    /* Increased */
    padding: 40px;
    position: sticky;
    /* Makes it stick while scrolling the form */
    top: 120px;
    /* Offset from the top */
}

#order_review h3#order_review_heading {
    font-size: 1.5rem;
    color: var(--color-text);
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-card-border);
    margin-bottom: 30px;
}

table.shop_table {
    width: 100%;
    border: none !important;
}

table.shop_table th,
table.shop_table td {
    padding: 15px 0 !important;
    border-color: var(--color-card-border) !important;
    color: var(--color-text-muted);
}

table.shop_table th {
    color: var(--color-text);
    font-weight: 600;
}

table.shop_table .product-name {
    color: var(--color-text);
}

table.shop_table .product-total {
    text-align: right;
}

table.shop_table tfoot .order-total th,
table.shop_table tfoot .order-total td {
    color: var(--color-text);
    font-weight: 700;
    font-size: 1.2rem;
}

/* --- Payment Section --- */
#payment {
    background: transparent !important;
    border-radius: 0 !important;
}

#payment ul.payment_methods {
    padding: 20px 0 !important;
    border-top: 1px solid var(--color-card-border) !important;
    border-bottom: none !important;
}

#payment li.payment_method {
    color: var(--color-text-muted);
}

#payment #place_order {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    color: white !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    padding: 18px 30px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
}

/* --- Responsive Layout --- */
@media (max-width: 992px) {
    .checkout-main-grid {
        grid-template-columns: 1fr;
    }

    .checkout-summary-column {
        margin-top: 40px;
    }

    #order_review {
        position: static;
        /* Un-stick the summary on mobile */
    }
}

/*
=================================================================
    STYLING ---> Custom Checkout Payment Method Details
=================================================================
*/

/* Styles the instruction box that appears when a payment method is selected */
#payment .payment_box {
    position: relative;
    background-color: var(--color-bg-secondary) !important;
    /* A slightly different, darker bg */
    padding: 20px !important;
    margin: 20px 0 !important;
    border-radius: 12px !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-card-border);
    font-size: 0.95rem;
}

/* Creates a small arrow pointing up to the selected payment method */
#payment .payment_box::before {
    content: "";
    display: block;
    border: 10px solid transparent;
    border-bottom-color: var(--color-bg-secondary);
    position: absolute;
    top: -20px;
    left: 20px;
    margin-left: 0;
}

/*
=================================================================
    Checkout Button Spacing & Animation
=================================================================
*/

/* --- 1. Fix the Vertical Alignment in the Order Summary --- */
#order_review table.shop_table tfoot td {
    text-align: right;
}

/* --- 2. Create the New, Conflict-Free "Outward Pulse" Animation --- */


/* --- 3. Force Button Spacing & Style the Privacy Text --- */
#payment .form-row.place-order {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

#payment .woocommerce-privacy-policy-text {
    margin-top: 40px !important;
    margin-bottom: 25px !important;
    padding-top: 30px !important;
    border-top: 1px solid var(--color-card-border);
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    opacity: 0.8;
}

/* --- 4. Style the "Krijg toegang" Button & BTW Footnote --- */
#payment #place_order {
    padding: 18px 30px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    border: none !important;
    color: white !important;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s ease !important;
}

#payment #place_order:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    animation-play-state: paused;
}

/* Styles the footnote on the CHECKOUT page (now BELOW the button) */
.btw-footnote {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 35px 0 0 0;
    /* THE CHANGE: Now has space at the top */
    opacity: 0.8;
    width: 100%;
    clear: both;
    /* Prevents alignment issues with floated elements */
}

/*
=================================================================
    DEFINITIVE FINAL v3 ---> Unified Styling for ALL Select2 Dropdowns
=================================================================
*/

/* 1. The main dropdown box */
body.woocommerce-checkout .select2-container--default .select2-selection--single,
body.woocommerce-account .select2-container--default .select2-selection--single {
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-card-border) !important;
    border-radius: 12px !important;
    height: auto !important;
    padding: 14px 18px !important;
    transition: all 0.3s ease;
}

/* 2. The text and arrow inside the dropdown box */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text) !important;
    line-height: inherit !important;
    padding: 0 !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-text-muted) transparent transparent transparent !important;
    margin-top: 4px !important;
}

/* 3. The focus state for the dropdown */
body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
body.woocommerce-account .select2-container--default.select2-container--open .select2-selection--single {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.2) !important;
}

/* 4. The dropdown panel that opens */
body .select2-container.select2-container--default.select2-container--open .select2-dropdown {
    background-color: #FFFFFF !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
}

body .select2-search--dropdown .select2-search__field {
    background-color: #FFFFFF !important;
    border: 1px solid var(--color-card-border) !important;
    border-radius: 6px !important;
    color: var(--color-text) !important;
    margin: 8px;
    width: calc(100% - 16px);
}

body .select2-results__options {
    background-color: #FFFFFF !important;
}

body .select2-results__option {
    color: var(--color-text-muted) !important;
    padding: 10px 12px !important;
    transition: all 0.2s ease;
}

body .select2-results__option--highlighted,
body .select2-results__option[aria-selected="true"] {
    background-color: var(--color-primary) !important;
    color: #FFFFFF !important;
}

/*
=================================================================
    Unified Dropdown Width
=================================================================
*/

/*
 * This targets the generated Select2 container on both the checkout and
 * my account pages and forces it to be 100% wide, fixing the inconsistency.
*/
body.woocommerce-checkout .select2-container,
body.woocommerce-account .select2-container {
    width: 100% !important;
    max-width: 100%;
}

/*
=================================================================
    CUSTOM "ORDER RECEIVED" (THANK YOU) PAGE STYLING
=================================================================
*/

.custom-order-received-container {
    max-width: 650px;
    margin: 0 auto;
    padding: 80px 20px;
}

.order-received-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 24px;
    padding: 50px;
    text-align: center;
}

.order-received-header .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-secondary);
    border-radius: 50%;
    margin-bottom: 25px;
}

.order-received-header .icon svg {
    color: var(--color-background);
    width: 32px;
    height: 32px;
}

.order-received-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 15px;
}

.order-received-header p {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 450px;
    margin: 0 auto 40px;
}

/*
=================================================================
    Smooth Pulse for "Naar Dashboard" Button
=================================================================
*/

/* 1. Style the button and prepare it for the pseudo-element */
.order-received-actions .btn {
    font-size: 1.1rem !important;
    padding: 16px 30px !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;

    /* Crucial for positioning the animated glow behind the text */
    position: relative;
    z-index: 1;
    transition: all 0.3s ease !important;
}

/* 2. Create the pseudo-element that will be animated, avoiding conflict */
.order-received-actions .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Match the button's shape and background */
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));

    /* Place it behind the button's text and icon */
    z-index: -1;
}

/* 3. Replicate the hover behavior: pause animation and add hover effects */
.order-received-actions .btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.order-received-actions .btn:hover::before {
    animation: none;
    /* This pauses the animation on hover */
}


.order-received-summary {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--color-card-border);
}

.order-received-summary h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

.summary-details {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    text-align: left;
}

.summary-item span {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.summary-item strong {
    display: block;
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 600;
}

.order-received-footer {
    margin-top: 30px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    opacity: 0.8;
}



/*
=================================================================
    Custom Password Reset Page Styling
=================================================================
*/

/*
 * This rule targets the main container on login/registration pages,
 * ensuring they all have the same centered, max-width layout.
*/
body.page-template-page-mijn-account-php .custom-login-container,
body.page-template-page-wachtwoord-instellen-php .custom-login-container,
body.page-template-page-affiliate-aanmelden-php .custom-login-container {
    max-width: 550px;
    margin: 0 auto;
    padding: 80px 20px;
}

/*
 * This rule targets the inner "box" on all login/registration pages, applying the
 * correct background, border, padding, and glass effect.
*/
body.page-template-page-mijn-account-php .custom-login-container .woocommerce,
body.page-template-page-wachtwoord-instellen-php .custom-login-container .woocommerce,
body.page-template-page-affiliate-aanmelden-php .custom-login-container .woocommerce {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(15, 23, 42, 0.1);
}

/*
=================================================================
    Affiliate Registration Button Styling
=================================================================
*/
#pt-register-affiliate-btn {
    background: var(--color-primary, #1D4ED8) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

#pt-register-affiliate-btn:not(:disabled):hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/*
=================================================================
    NEW ---> Password Strength Hint
=================================================================
*/
.password-strength-hint {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 15px;
    opacity: 0.8;
    line-height: 1.4;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

/*
=================================================================
    NEW ---> Dynamic Upgrade Button on Membership Card
=================================================================
*/

/* Modify the main card to space out the new content */
.current-plan-card {
    justify-content: space-between;
    gap: 30px;
}

/* Create a wrapper for all content on the right side */
.card-actions-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    /* Space between member info and upgrade button */
    margin-left: auto;
    /* Push this whole block to the right */
}

/* Style the upgrade section */
.upgrade-section {
    text-align: center;
}

.upgrade-prompt {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-secondary);
    margin-bottom: 12px;
}

/* Style the new upgrade button */
.btn-upgrade {
    padding: 12px 24px !important;
    font-size: 0.95rem !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    color: white !important;
    position: relative;
    z-index: 1;
}

/* Breathing glow pseudo-element removed (carbon) */

/*
=================================================================
    NEW ---> "Abonnement Geschiedenis" Table Actions
=================================================================
*/

/* Make the actions column a flex container for nice alignment */
.custom-orders-table .actions-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Space between the buttons */
}

/* Style the new invoice button specifically */
.actions-cell .btn-invoice {
    background-color: transparent !important;
    border: 1px solid var(--color-card-border) !important;
    color: var(--color-text-muted) !important;
    box-shadow: none !important;
}

.actions-cell .btn-invoice:hover {
    border-color: var(--color-primary) !important;
    background-color: rgba(29, 78, 216, 0.1) !important;
    color: var(--color-text) !important;
}

/* Ensure icons in buttons are sized correctly */
.actions-cell .btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}



/*
=================================================================
    CUSTOM "ORDER DETAILS" MODAL ACTIONS (v3 - Final)
=================================================================
*/

.modal-order-details .order-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-card-border);
    margin-bottom: 20px;
}

.modal-order-details .order-meta-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* This targets our new, manually-created invoice button */
.modal-order-details .order-meta-actions .btn-invoice {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    background: var(--color-primary) !important;
    /* Use primary theme color */
    color: white !important;
    border: none !important;
}

.modal-order-details .order-meta-actions .btn-invoice:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* --- START: State-of-the-Art 404 Page Styles --- */

.container-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height));
    padding: 40px 20px;
}

.error-404-panel {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 24px;
    padding: 4rem;
    text-align: center;
    max-width: 700px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}

.glitch-wrapper {
    position: relative;
    margin-bottom: 2rem;
}

.glitch-text {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    /* A more blocky font works well */
    font-size: clamp(6rem, 25vw, 12rem);
    font-weight: 900;
    line-height: 1;
    color: var(--color-text);
    position: relative;
    z-index: 1;
    margin: 0;
}

/* The Glitch Animation Layers */
.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-card-bg);
    /* Match background to hide original text */
    overflow: hidden;
}

.glitch-text::before {
    left: 2px;
    text-shadow: -2px 0 var(--color-primary);
    clip-path: inset(50% 0 51% 0);
    animation: glitch-anim-1 3s infinite linear alternate-reverse;
}

.glitch-text::after {
    left: -2px;
    text-shadow: -2px 0 var(--color-secondary), 2px 2px var(--color-primary);
    clip-path: inset(49% 0 50% 0);
    animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {

    0%,
    100% {
        clip-path: inset(41% 0 58% 0);
    }

    5%,
    45% {
        clip-path: inset(12% 0 45% 0);
    }

    10%,
    40% {
        clip-path: inset(82% 0 1% 0);
    }

    15%,
    35% {
        clip-path: inset(62% 0 35% 0);
    }

    20%,
    30% {
        clip-path: inset(30% 0 25% 0);
    }

    25% {
        clip-path: inset(50% 0 50% 0);
    }

    50%,
    95% {
        clip-path: inset(90% 0 2% 0);
    }

    55%,
    90% {
        clip-path: inset(25% 0 70% 0);
    }

    60%,
    85% {
        clip-path: inset(1% 0 90% 0);
    }

    65%,
    80% {
        clip-path: inset(45% 0 45% 0);
    }

    70%,
    75% {
        clip-path: inset(70% 0 10% 0);
    }
}

@keyframes glitch-anim-2 {

    0%,
    100% {
        clip-path: inset(95% 0 2% 0);
    }

    5%,
    45% {
        clip-path: inset(40% 0 23% 0);
    }

    10%,
    40% {
        clip-path: inset(80% 0 5% 0);
    }

    15%,
    35% {
        clip-path: inset(20% 0 80% 0);
    }

    20%,
    30% {
        clip-path: inset(40% 0 30% 0);
    }

    25% {
        clip-path: inset(50% 0 50% 0);
    }

    50%,
    95% {
        clip-path: inset(10% 0 80% 0);
    }

    55%,
    90% {
        clip-path: inset(60% 0 10% 0);
    }

    60%,
    85% {
        clip-path: inset(95% 0 5% 0);
    }

    65%,
    80% {
        clip-path: inset(30% 0 60% 0);
    }

    70%,
    75% {
        clip-path: inset(10% 0 40% 0);
    }
}

.error-404-panel .page-header {
    margin-bottom: 1.5rem;
}

.error-404-panel .page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
}

.error-404-panel .page-content p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 500px;
    margin: 0 auto 2.5rem auto;
}

.error-404-panel .error-actions .btn {
    padding: 14px 32px !important;
    font-size: 1rem !important;
}

.helpful-links {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-card-border);
}

.helpful-links a {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.helpful-links a:hover {
    color: var(--color-text);
}

.helpful-links .separator {
    margin: 0 1rem;
    color: var(--color-card-border);
}

/* --- END: State-of-the-Art 404 Page Styles --- */

/*
=================================================================
    CUSTOM "ABONNEMENT" PAGE - DYNAMIC STYLES
=================================================================
*/

/* Style for the new "Next Payment" text */
.plan-next-payment {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-top: 8px;
}

.plan-next-payment strong {
    color: var(--color-text);
    font-weight: 600;
}

/* Visually mute the card for cancelled/inactive states */
.current-plan-card.status-cancelled,
.current-plan-card.status-inactive {
    /* filter: saturate(0.2); <-- REMOVED */
    /* opacity: 0.8; <-- REMOVED */
    background: radial-gradient(circle at 50% 50%, #F3F4F6, transparent 70%), var(--color-card-bg);
    animation: none;
}

/* Apply the muted effect to elements INSIDE the cancelled card */
.current-plan-card.status-cancelled .plan-icon,
.current-plan-card.status-cancelled .plan-details,
.current-plan-card.status-cancelled .member-info,
.current-plan-card.status-cancelled .upgrade-prompt {
    filter: saturate(0.2);
    opacity: 0.7;
}

/* Ensure the renew button itself remains vibrant */
.current-plan-card.status-cancelled .btn-renew {
    filter: none !important;
    opacity: 1 !important;
}

/* Style the new "Renew" button */
.btn-renew {
    padding: 12px 24px !important;
    font-size: 0.95rem !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    color: white !important;
}

/* Make sure the history title has some space above it */
.custom-subscription-dashboard .history-title {
    margin-top: 60px;
}

/*
=================================================================
    CUSTOM "ABONNEMENT" PAGE - CANCELLATION STYLES
=================================================================
*/

.subscription-actions-footer {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--color-card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.subscription-actions-footer p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    max-width: 400px;
    line-height: 1.6;
}

/* Style for the cancel button to make it less prominent */
.btn-cancel {
    background-color: transparent !important;
    border: 1px solid #e74c3c !important;
    /* Red border */
    color: #e74c3c !important;
    /* Red text */
    box-shadow: none !important;
}

.btn-cancel:hover {
    background-color: #e74c3c !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3) !important;
}

/*
=================================================================
    CUSTOM "ABONNEMENT" PAGE - ACTION STYLES (v4 - Final Polish)
=================================================================
*/

/* Use flexbox to space out the main sections of the card's right side */
.card-actions-wrapper {
    display: flex;
    align-items: center;
    /* Vertically align the content */
    gap: 40px;
    /* Space between member info and the action buttons */
    margin-left: auto;
    /* Push the whole block to the right */
}

/* The new cluster for Upgrade/Cancel actions */
.management-cluster {
    display: flex;
    flex-direction: column;
    /* Stack the upgrade and cancel actions vertically */
    align-items: center;
    /* Center them horizontally within their column */
    gap: 15px;
    /* Space between the upgrade button and the cancel button */
}

/* This is the same as before */
.upgrade-section {
    text-align: center;
}

.upgrade-prompt {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-secondary);
    margin-bottom: 12px;
}

/* Style for the cancel button to be a proper, subtle "ghost" button */
.btn-cancel {
    background-color: transparent !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
    /* Subtle border */
    color: var(--color-text-muted) !important;
    /* Muted text */
    padding: 10px 22px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease !important;
    opacity: 0.8;
}

.btn-cancel:hover {
    opacity: 1;
    border-color: #e74c3c !important;
    /* Red border on hover */
    background-color: rgba(231, 76, 60, 0.1) !important;
    /* Faint red background */
    color: #e74c3c !important;
    /* Red text on hover */
    transform: translateY(-2px);
    box-shadow: none !important;
}

.btn-cancel i {
    width: 16px;
    height: 16px;
}

/*
=================================================================
    Cancelled Subscription Layout
=================================================================
*/

/* Apply the muted effect ONLY to the card itself */
.current-plan-card.status-cancelled {
    filter: saturate(0.2);
    opacity: 0.7;
}

/* New wrapper for the renewal button */
.renew-action-wrapper {
    margin-top: 25px;
    padding: 25px;
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-primary);
    /* Use primary color to draw attention */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Glow removed for carbon */
}

.renew-action-wrapper .upgrade-prompt {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0;
}

/*
=================================================================
    FINAL ---> Polished & Unified Password Strength Meter
=================================================================
*/

/* 1. Hide the default WooCommerce meter as a fallback */
.woocommerce-password-strength {
    display: none !important;
}

/* 2. Style our custom meter's container */
#password-strength-meter,
#affiliate-password-strength-meter {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 8px;
    /* Softer corners */
    margin-top: 15px !important;
    text-align: center;
    transition: all 0.3s ease;
    display: none;
    /* Starts hidden */
    border: 1px solid transparent;
    /* Start with a transparent border */
}

/* 3. Style the hint text below the meter */
.password-strength-hint {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 15px;
    opacity: 0.8;
    line-height: 1.5;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* 4. Define the styles for each strength level */

/* Level 0: Erg zwak (Red) */
#password-strength-meter.strength-0,
#affiliate-password-strength-meter.strength-0 {
    background-color: rgba(231, 76, 60, 0.2);
    border-color: rgba(231, 76, 60, 0.5);
}

#password-strength-meter.strength-0 div,
#affiliate-password-strength-meter.strength-0 div {
    color: #e74c3c;
}

/* Level 1: Zwak (Orange) */
#password-strength-meter.strength-1,
#affiliate-password-strength-meter.strength-1 {
    background-color: rgba(230, 126, 34, 0.2);
    border-color: rgba(230, 126, 34, 0.5);
}

#password-strength-meter.strength-1 div,
#affiliate-password-strength-meter.strength-1 div {
    color: #e67e22;
}

/* Level 2: Gemiddeld (Yellow) */
#password-strength-meter.strength-2,
#affiliate-password-strength-meter.strength-2 {
    background-color: rgba(243, 156, 18, 0.2);
    border-color: rgba(243, 156, 18, 0.5);
}

#password-strength-meter.strength-2 div,
#affiliate-password-strength-meter.strength-2 div {
    color: #f39c12;
}

/* Level 3 & 4: Sterk (Teal/Green - Your theme's secondary color) */
#password-strength-meter.strength-3,
#password-strength-meter.strength-4,
#affiliate-password-strength-meter.strength-3,
#affiliate-password-strength-meter.strength-4 {
    background-color: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.5);
}

#password-strength-meter.strength-3 div,
#password-strength-meter.strength-4 div,
#affiliate-password-strength-meter.strength-3 div,
#affiliate-password-strength-meter.strength-4 div {
    color: var(--color-secondary);
}

/*
=================================================================
    NEW ---> Disabled Button State for Password Strength
=================================================================
*/

/*
 * These rules target specific buttons ONLY when they are disabled.
 * This provides the greyscale, non-functional look you requested.
*/
#place_order:disabled,
#password-modal-overlay button[name="save_password"]:disabled,
#submit-password-btn:disabled,
#pt-register-affiliate-btn:disabled {
    background: #5A5A6A !important;
    /* A solid, neutral grey */
    filter: grayscale(80%);
    opacity: 0.6;
    cursor: not-allowed;
    /* Prevent hover effects on the disabled button */
    transform: none !important;
    box-shadow: none !important;
    animation: none !important;
    /* Stop the pulsing animation */
}

/* Also remove the hover effect from the pseudo-element on the dashboard button */
#place_order:disabled::before {
    animation: none !important;
}

/*
=================================================================
    NEW ---> Password Validation Feedback Styles
=================================================================
*/

/* 1. Custom styling for the password error notice */
.pt-custom-notice.pt-notice--error {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 25px;
    background-color: rgba(231, 76, 60, 0.2);
    border: 1px solid rgba(231, 76, 60, 0.5);
    border-radius: 8px;
    color: #e74c3c;
    margin-bottom: 30px;
}

.pt-custom-notice-icon-wrapper .lucide {
    width: 24px;
    height: 24px;
}

.pt-custom-notice-message {
    font-weight: 500;
}

.pt-notice-close-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
}

.pt-notice-close-btn:hover {
    opacity: 1;
}

/* 2. Shake animation for invalid password field */
@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.shake-animation {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    border-color: #e74c3c !important;
    /* Highlight with red border during shake */
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.2) !important;
}

/*
=================================================================
    ULTRA-PREMIUM ACCOUNT PAGE DESIGN
=================================================================
*/

.premium-account-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* Hero Status Card */
.account-hero-card {
    background: radial-gradient(circle at 20% 50%, rgba(29, 78, 216, 0.2), transparent 70%),
        radial-gradient(circle at 80% 50%, rgba(37, 99, 235, 0.15), transparent 70%),
        var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 24px;
    padding: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

/* Vertical split layout when action panel is present */
.account-hero-card.has-action {
    display: flex;
    gap: 0;
    padding: 0;
}

.account-hero-card.has-action .hero-main {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.account-hero-card.has-action .hero-meta {
    border-top: 1px solid rgba(15, 23, 42, 0.1);
    padding-top: 30px;
    margin-top: 40px;
}

.account-hero-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(29, 78, 216, 0.3), transparent);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.hero-content {
    display: flex;
    /* KEEP FLEX */
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    /* REMOVED: display: block; */
}

.hero-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(29, 78, 216, 0.4);
}

.hero-icon i {
    width: 40px;
    height: 40px;
    color: white;
}

.hero-text {
    flex-grow: 1;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 10px;
    line-height: 1.1;
}

/* Trial badge styling */
.trial-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-secondary, #2563EB), #2563EB);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    margin-left: 12px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Affiliate discount badge styling */
.affiliate-discount-badge {
    display: inline-block;
    background: linear-gradient(135deg, #2563EB, #2563EB);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    margin-left: 12px;
    vertical-align: middle;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25);
}

/* Affiliate discount notice on membership card */
.affiliate-discount-notice {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #2563EB;
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.affiliate-discount-notice .notice-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563EB;
    border-radius: 50%;
    color: white;
}

.affiliate-discount-notice .notice-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.affiliate-discount-notice .notice-content {
    flex: 1;
}

.affiliate-discount-notice .notice-content h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: #F3F4F6;
}

.affiliate-discount-notice .notice-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
}

.affiliate-discount-notice .notice-content strong {
    color: #2563EB;
    font-weight: 700;
}

/* Cancelled badge styling */
.cancelled-badge {
    display: inline-block;
    background: linear-gradient(135deg, #d63638, #b32d2e);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    margin-left: 12px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(214, 54, 56, 0.3);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin: 0;
}

.btn-hero-upgrade {
    padding: 18px 32px !important;
    font-size: 1.1rem !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    position: relative;
    z-index: 1;
}

/* Hero Action Panel - Vertical Split Design */
.hero-action-panel {
    min-width: 280px;
    max-width: 320px;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.15), rgba(37, 99, 235, 0.1));
    border-left: 1px solid rgba(15, 23, 42, 0.1);
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}

.hero-action-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-action-panel:hover::before {
    opacity: 0.2;
}

.hero-action-panel:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 30px rgba(29, 78, 216, 0.3);
}

.hero-action-panel .action-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(29, 78, 216, 0.3);
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s ease;
}

.hero-action-panel:hover .action-icon {
    box-shadow: 0 12px 36px rgba(29, 78, 216, 0.5);
}

.hero-action-panel .action-icon i,
.hero-action-panel .action-icon svg {
    width: 36px;
    height: 36px;
    color: white !important;
    stroke: white !important;
}

.hero-action-panel .action-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.hero-action-panel .action-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.hero-action-panel .action-price {
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Affiliate discount pricing for membership card */
.hero-action-panel .price-original-small {
    font-size: 0.85rem;
    color: #999;
    font-weight: 500;
    text-decoration: line-through;
    opacity: 0.7;
}

.hero-action-panel .price-discounted-small {
    font-size: 1.1rem;
    color: #2563EB;
    font-weight: 800;
}

.hero-action-panel .price-period {
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 600;
}

.hero-action-panel .action-arrow {
    width: 32px;
    height: 32px;
    background: rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, background 0.3s ease;
    cursor: pointer;
}

.hero-action-panel .action-arrow:hover {
    transform: translateX(4px) scale(1.1);
    background: rgba(15, 23, 42, 0.2);
}

.hero-action-panel .action-arrow i,
.hero-action-panel .action-arrow svg {
    width: 18px;
    height: 18px;
    color: white !important;
    stroke: white !important;
}

.hero-meta {
    display: flex;
    gap: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
    position: relative;
    z-index: 1;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.meta-value {
    font-size: 1.3rem;
    color: var(--color-text);
    font-weight: 700;
}

/* Management Grid */
.management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.management-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 20px;
    padding: 40px;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.management-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.management-card .card-icon {
    width: 60px;
    height: 60px;
    background: rgba(29, 78, 216, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(29, 78, 216, 0.3);
}

.management-card .card-icon i {
    width: 28px;
    height: 28px;
    color: var(--color-primary);
}

.management-card .card-content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 10px;
}

.management-card .card-content p {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.management-card .card-content strong {
    color: var(--color-secondary);
}

/* Email card - better handling for long email addresses */
.management-card.card-email .card-content strong {
    display: inline-block;
    max-width: 100%;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.management-card .btn {
    margin-top: auto;
}

.management-card .btn.btn-secondary,
.management-card .btn.btn-secondary:hover,
.management-card .btn.btn-secondary:focus,
.management-card .btn.btn-secondary:active {
    color: #FFFFFF !important;
}

.management-card .btn.btn-secondary i,
.management-card .btn.btn-secondary svg {
    color: #FFFFFF;
}

/* Premium Modals */
.premium-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    /* CHANGED: Always flex, not 'none' */
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    /* ADDED: Hide with visibility instead */
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    /* ADDED: Delay visibility */
}

.premium-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    /* ADDED */
    transition-delay: 0s;
    /* ADDED: No delay when showing */
}

.premium-modal-panel {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 24px;
    padding: 50px;
    max-width: 500px;
    width: 90%;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.premium-modal-overlay.is-visible .premium-modal-panel {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(15, 23, 42, 0.1);
    transform: rotate(90deg);
}

.modal-close i {
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
}

/* Affiliate modal positioning - always align to top since it's tall */
#affiliate-modal-overlay {
    align-items: flex-start;
    padding-top: calc(var(--header-height) + 30px);
    overflow-y: auto;
}

#affiliate-modal-overlay .premium-modal-panel {
    margin: 0 auto 30px;
    max-height: calc(100vh - var(--header-height) - 60px);
    overflow-y: auto;
    padding: 35px 40px;
    /* More compact than default 50px */
}

/* More compact header for affiliate modal */
#affiliate-modal-overlay .modal-header {
    margin-bottom: 40px !important;
    /* Explicit spacing after entire header section */
    display: block !important;
    /* Override flexbox layout that pushes h2 to the right */
    height: auto !important;
    /* Override fixed 60px height that causes overflow */
    padding: 0 !important;
    /* Remove padding that conflicts with our layout */
}

#affiliate-modal-overlay .modal-header .modal-icon {
    width: 60px;
    /* Reduced from 80px */
    height: 60px;
    margin: 0 auto 16px;
    /* Reduced from 24px */
}

#affiliate-modal-overlay .modal-header .modal-icon i,
#affiliate-modal-overlay .modal-header .modal-icon svg {
    width: 32px;
    /* Reduced from 40px */
    height: 32px;
}

#affiliate-modal-overlay .modal-header h2 {
    font-size: 1.6rem;
    /* Reduced from 2rem */
    margin: 0;
    /* No margin - parent .modal-header handles spacing */
    text-align: center !important;
}

/* Responsive modal padding adjustments */
@media (max-width: 768px) {
    #affiliate-modal-overlay {
        padding-top: calc(var(--header-height) + 20px);
    }

    #affiliate-modal-overlay .premium-modal-panel {
        padding: 25px 20px;
        margin-bottom: 20px;
    }
}

.modal-header {
    text-align: center;
    margin-bottom: 40px;
}

.modal-header .modal-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.modal-header .modal-icon i {
    width: 36px;
    height: 36px;
    color: white;
}

.modal-header h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
}

/* Remove background from email and password modal headers */
#email-modal-overlay .modal-header,
#password-modal-overlay .modal-header {
    background: transparent !important;
    border: none !important;
}

.modal-field {
    margin-bottom: 25px;
}

.modal-field label {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 10px;
}

.modal-field input {
    width: 100%;
    background: rgba(15, 23, 42, 0.05) !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    color: var(--color-text) !important;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.modal-field input:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.2) !important;
}

.password-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 10px;
    opacity: 0.8;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* =================================================================
   CONTACT MODAL STYLES
   ================================================================= */

.contact-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.contact-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.contact-modal-panel {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 20px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12);
}

.contact-modal-overlay.is-visible .contact-modal-panel {
    transform: scale(1);
}

.contact-modal-header {
    padding: 30px 30px 20px;
    border-bottom: 1px solid var(--color-card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-modal-header h2 i {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.contact-modal-close-btn {
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-text-muted);
}

.contact-modal-close-btn:hover {
    background: rgba(15, 23, 42, 0.1);
    transform: rotate(90deg);
}

.contact-modal-close-btn i {
    width: 20px;
    height: 20px;
}

.contact-modal-content {
    padding: 30px;
}

.contact-modal-description {
    color: var(--color-text-muted);
    margin-bottom: 30px;
    line-height: 1.6;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.contact-form .required {
    color: var(--color-secondary);
}

.contact-form .optional {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

.contact-form .form-control {
    width: 100%;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.2);
    border-radius: 12px;
    padding: 14px 18px;
    color: var(--color-text);
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

.contact-form .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.2);
}

.contact-form textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.contact-form select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 45px;
}

.contact-form select.form-control option {
    background: #F3F4F6;
    color: #f1f5f9;
    padding: 10px;
}

.contact-form .form-actions {
    margin-top: 30px;
}

.contact-form .form-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 12px;
    font-size: 0.95rem;
}

.contact-form .form-message.success {
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.3);
    color: var(--color-secondary);
}

.contact-form .form-message.error {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b6b;
}

.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Trial Badge Styles (Hero Section) */
.hero-trial-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.1), rgba(37, 99, 235, 0.1));
    border: 1px solid rgba(29, 78, 216, 0.3);
    border-radius: 50px;
    margin-bottom: 24px;
}

.trial-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trial-badge-icon i {
    width: 18px;
    height: 18px;
    color: var(--color-secondary);
}

.trial-badge-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Affiliate Section Styles - Matching demo box styling */
.affiliate-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.affiliate-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 60px;
    text-align: center;
    transition: all 0.3s ease;
}

.affiliate-content:hover {
    border-color: var(--color-primary);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.1), 0 10px 20px rgba(29, 78, 216, 0.2);
}

.affiliate-icon-badge {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
}

.affiliate-icon-badge svg {
    width: 40px;
    height: 40px;
    color: white;
}

.affiliate-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 20px;
}

.affiliate-description {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 30px;
    line-height: 1.8;
}

.affiliate-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.affiliate-faq-link {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-top: 16px;
}

.affiliate-faq-link .link-highlight {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.affiliate-faq-link .link-highlight:hover {
    color: var(--color-primary);
}

/* Affiliate section responsive */
@media (max-width: 768px) {
    .affiliate-content {
        padding: 40px 30px;
    }

    .affiliate-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    /* Trial badge mobile responsive */
    .trial-badge {
        display: block;
        margin-left: 0;
        margin-top: 12px;
        font-size: 0.75rem;
        padding: 4px 12px;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-meta {
        flex-direction: column;
        gap: 20px;
    }

    .management-grid {
        grid-template-columns: 1fr;
    }

    /* Stack action panel on mobile */
    .account-hero-card.has-action {
        flex-direction: column;
    }

    .account-hero-card.has-action .hero-main {
        padding: 40px 30px;
    }

    .hero-action-panel {
        min-width: 100%;
        max-width: 100%;
        border-left: none;
        border-top: 1px solid rgba(15, 23, 42, 0.1);
        padding: 40px 30px;
    }
}

/* Cancelled state styling */
.account-hero-card.hero-cancelled {
    background: radial-gradient(circle at 50% 50%, rgba(108, 117, 125, 0.2), transparent 70%),
        var(--color-card-bg);
    animation: none;
}

.account-hero-card.hero-cancelled .hero-icon {
    background: linear-gradient(135deg, #6c757d, #495057);
}

.account-hero-card.hero-cancelled .hero-subtitle {
    color: #ffc107;
    font-weight: 600;
}

/* Trial state styling */
.account-hero-card.hero-trial {
    background: radial-gradient(circle at 50% 50%, rgba(0, 123, 255, 0.2), transparent 70%),
        var(--color-card-bg);
}

.account-hero-card.hero-trial .hero-icon {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.account-hero-card.hero-trial .hero-subtitle {
    color: #17a2b8;
    font-weight: 600;
}

/* Lifetime state styling — deep gold accent so white text reads cleanly */
.account-hero-card.hero-lifetime {
    background: linear-gradient(135deg, #7A5A16 0%, #A07A1E 55%, #C99A2E 100%);
    border-color: rgba(122, 90, 22, 0.55);
    color: #FFFFFF;
}

.account-hero-card.hero-lifetime::before {
    background: radial-gradient(circle, rgba(255, 210, 120, 0.35), transparent);
}

.account-hero-card.hero-lifetime .hero-title,
.account-hero-card.hero-lifetime .hero-subtitle,
.account-hero-card.hero-lifetime .meta-label,
.account-hero-card.hero-lifetime .meta-value {
    color: #FFFFFF !important;
}

.account-hero-card.hero-lifetime .hero-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
}

.account-hero-card.hero-lifetime .meta-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

.account-hero-card.hero-lifetime.has-action .hero-meta {
    border-top-color: rgba(255, 255, 255, 0.22);
}

.account-hero-card.hero-lifetime .hero-icon {
    background: linear-gradient(135deg, #F4C96B, #B98717);
    box-shadow: 0 10px 30px rgba(122, 90, 22, 0.45);
}

/* Active (ProductTickler Core) — deep green accent */
.account-hero-card.hero-active {
    background: linear-gradient(135deg, #0F4F2E 0%, #166B3C 55%, #22A060 100%);
    border-color: rgba(15, 79, 46, 0.55);
    color: #FFFFFF;
}

.account-hero-card.hero-active::before {
    background: radial-gradient(circle, rgba(134, 239, 172, 0.3), transparent);
}

.account-hero-card.hero-active .hero-title,
.account-hero-card.hero-active .hero-subtitle,
.account-hero-card.hero-active .meta-label,
.account-hero-card.hero-active .meta-value {
    color: #FFFFFF !important;
}

.account-hero-card.hero-active .hero-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
}

.account-hero-card.hero-active .meta-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

.account-hero-card.hero-active.has-action .hero-meta {
    border-top-color: rgba(255, 255, 255, 0.22);
}

.account-hero-card.hero-active .hero-icon {
    background: linear-gradient(135deg, #34D399, #0F4F2E);
    box-shadow: 0 10px 30px rgba(15, 79, 46, 0.45);
}

/* Expiring state styling */
.account-hero-card.hero-expiring {
    background: radial-gradient(circle at 50% 50%, rgba(255, 152, 0, 0.2), transparent 70%),
        var(--color-card-bg);
    animation: none;
}

.account-hero-card.hero-expiring .hero-icon {
    background: linear-gradient(135deg, #ff9800, #f57c00);
}

.account-hero-card.hero-expiring .hero-subtitle {
    color: #ff9800;
    font-weight: 600;
}

/* Inactive state */
.account-hero-card.hero-inactive {
    background: radial-gradient(circle at 50% 50%, rgba(108, 117, 125, 0.15), transparent 70%),
        var(--color-card-bg);
    animation: none;
    filter: saturate(0.3);
}

/*
=================================================================
    AFFILIATE CODE SECTION STYLING
=================================================================
*/

.affiliate-code-section {
    max-width: 600px;
    margin: 0 auto 50px;
    text-align: center;
}

.affiliate-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 20px;
    font-weight: 500;
}

.affiliate-prompt i {
    width: 20px;
    height: 20px;
    color: var(--color-secondary);
}

.affiliate-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
}

.affiliate-code-field {
    flex: 1;
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-card-border) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    color: var(--color-text) !important;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
}

.affiliate-code-field:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.2) !important;
}

.affiliate-code-field::placeholder {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    opacity: 0.6;
}

.btn-apply-code {
    background: var(--color-secondary) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-apply-code:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-apply-code i {
    width: 18px;
    height: 18px;
}

.affiliate-confirmation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 12px;
    padding: 14px 20px;
    color: var(--color-secondary);
    font-weight: 600;
    font-size: 1rem;
}

.affiliate-confirmation i {
    width: 20px;
    height: 20px;
    color: var(--color-secondary);
}

.affiliate-confirmation strong {
    letter-spacing: 1px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .affiliate-input-wrapper {
        flex-direction: column;
    }

    .affiliate-code-field,
    .btn-apply-code {
        width: 100%;
    }
}

/*
Theme Name: ProductTickler Pro
Description: A stunning dark theme with smooth animations and modern design for ProductTickler, based on the new design.
Version: 3.5.3 (Final Visibility Fix)
Author: Your Team
Text Domain: productickler
*/

/* =================================================================
   1. CORE SETUP & CSS VARIABLES
   ================================================================= */
:root {
    /* Colors — light theme (duplicate def, kept in sync) */
    --color-background: #FFFFFF;
    --color-primary: #1D4ED8;
    --color-secondary: #2563EB;
    --color-text: #0F172A;
    --color-text-muted: #64748B;
    --color-border: #E5E7EB;

    /* Surfaces */
    --glass-bg: #FFFFFF;
    --glass-border: #E5E7EB;
    --glass-blur: 0px;

    /* Typography */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Layout */
    --header-height: 80px;
    --container-max-width: 1200px;
}

/* --- Reset & Base Styles --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family-sans);
    background-color: var(--color-background);
    color: var(--color-text-muted);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-content {
    padding-top: var(--header-height);
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.2;
}

section {
    padding: 120px 20px;
    max-width: var(--container-max-width);
    margin: 0 auto;
}

i[data-lucide] {
    width: 1em;
    height: 1em;
}


/* --- Common Section Headers --- */
.section-tag {
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    display: block;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 24px;
    text-align: center;
}

.section-title .highlight {
    color: var(--color-secondary);
}

.section-description {
    font-size: 1.1rem;
    max-width: 650px;
    text-align: center;
    margin: 0 auto 60px auto;
}

/* =================================================================
   3. GLOBAL COMPONENTS (BUTTONS)
   ================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-large {
    padding: 16px 36px;
    font-size: 1.1rem;
}

.btn-primary {
    background-color: var(--color-primary);
    color: #FFFFFF !important;
    box-shadow: 0 5px 25px rgba(29, 78, 216, 0.4);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #FFFFFF !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(29, 78, 216, 0.55);
    filter: brightness(1.1);
}

.btn-primary *,
.btn-primary:hover *,
.btn-primary:focus *,
.btn-primary:active * {
    color: #FFFFFF !important;
}

.btn-secondary {
    background-color: var(--glass-bg);
    color: var(--color-text) !important;
    border-color: var(--glass-border);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-tertiary {
    color: #FFFFFF !important;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 5px 25px rgba(29, 78, 216, 0.4);
}

.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:active {
    color: #FFFFFF !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(29, 78, 216, 0.55);
    filter: brightness(1.1);
}

.btn-tertiary:hover *,
.btn-tertiary:focus *,
.btn-tertiary:active * {
    color: #FFFFFF !important;
}

.btn-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

/* =================================================================
   4. HEADER & NAVIGATION
   ================================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    background: rgba(12, 13, 14, 0.7);
    border-bottom: 1px solid var(--glass-border);
}

.header-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    flex-shrink: 0;
}

.navigation-wrapper {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.main-nav {
    flex: 1 1 0%;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2px;
}

.main-nav a {
    color: var(--color-text-muted);
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.main-nav a:hover,
.main-nav li.current-menu-item>a {
    color: var(--color-text);
    background: var(--glass-bg);
}

.header-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Note: .mobile-menu-toggle display is controlled by media queries in the header section above */

/* =================================================================
   5. PAGE SECTIONS
   ================================================================= */

/* --- Hero Section --- */
.hero-section {
    padding-top: 120px;
    padding-bottom: 150px;
    text-align: center;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    max-width: 800px;
}

.hero-title {
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 24px;
    text-shadow: 0 0 20px rgba(29, 78, 216, 0.5);
}

.hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: 24px;
}

.hero-description {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 40px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Quick Features --- */
.quick-features-section {
    padding-top: 0;
    margin-top: -100px;
    position: relative;
    z-index: 10;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-5px);
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text);
}

.feature-icon svg {
    width: 24px;
    height: 24px;
}

.feature-title {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.feature-description {
    font-size: 1rem;
    line-height: 1.5;
}

/* --- Detailed features --- */
.features-detailed-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.feature-detailed-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
}

.feature-detailed-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.feature-detailed-card:nth-child(even) .feature-detailed-text {
    order: 2;
}

.feature-detailed-text {
    padding: 50px;
}

.feature-detailed-tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 20px;
    color: var(--color-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.feature-detailed-title {
    font-size: 2rem;
    margin-bottom: 20px;
}

.feature-detailed-description {
    margin-bottom: 30px;
}

.feature-detailed-list {
    list-style: disc;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.feature-detailed-list li::marker {
    color: var(--color-secondary);
}

.feature-detailed-cta {
    display: none;
}

/* Hide original button */

/* --- Demo Preview Iframe Styles --- */
.premium-demo-container {
    position: relative;
    width: 100%;
    min-height: 450px;
    overflow: hidden;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.feature-preview-iframe {
    width: 1280px;
    height: 800px;
    border: 30px solid #FFFFFF;
    background-color: #FFFFFF;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5625);
    transform-origin: center center;
}

.premium-demo-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(248, 250, 252, 0.1);
    transition: opacity 0.4s ease;
}

.premium-demo-container:hover::before {
    opacity: 0;
}

/* Keep the overlay visible so the call-to-action remains prominent. */
.premium-overlay {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 13, 14, 0.7);
    /* Always visible background */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    /* CHANGED: Always visible */
    visibility: visible;
    /* CHANGED: Always visible */
    transition: all 0.4s ease;
    border-radius: 16px;
}

.premium-demo-container:hover .premium-overlay {
    background: rgba(29, 78, 216, 0.3);
    /* Lighter on hover */
}

.overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    transition: transform 0.3s ease;
}

.premium-demo-container:hover .overlay-content {
    transform: scale(1.1);
}

.play-icon {
    width: 60px;
    height: 60px;
    background: rgba(29, 78, 216, 0.4);
    border: 2px solid rgba(15, 23, 42, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: all 0.3s ease;
}

.premium-demo-container:hover .play-icon {
    background: rgba(29, 78, 216, 0.7);
    border-color: rgba(15, 23, 42, 0.9);
    box-shadow: 0 0 25px rgba(29, 78, 216, 0.8);
}

.overlay-text {
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

/* --- Other Sections --- */
.pricing-section,
.faq-section {
    text-align: center;
}

.faq-section {
    padding-top: 60px;
}

.faq-section .section-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    margin-bottom: 16px;
}

.faq-section .section-description {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    margin-bottom: 40px;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--glass-border);
}

.faq-question {
    padding: 20px 0;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    width: 100%;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.faq-question:hover {
    color: var(--color-primary);
}

.faq-icon {
    transition: transform 0.3s ease;
    font-size: 1.5rem;
    color: var(--color-primary);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: var(--color-secondary);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-answer-content {
    padding: 0 0 20px 0;
    text-align: left;
}

/* --- Demo Modal --- */
.demo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.demo-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 95%;
    height: 90%;
    max-width: 1820px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F3F4F6 100%);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transform: scale(0.95);
    transition: all 0.3s ease;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12);
}

.demo-modal.active .modal-content {
    transform: scale(1);
}

.modal-header {
    height: 60px;
    background: rgba(15, 15, 30, 0.8);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.modal-title {
    font-weight: 600;
    color: white;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
}

#demoFrame {
    width: 100%;
    height: calc(100% - 60px);
    border: none;
}

/* --- Responsive & Mobile --- */
@media (max-width: 992px) {
    .feature-detailed-content {
        grid-template-columns: 1fr;
    }

    .feature-detailed-image {
        min-height: 250px;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid var(--glass-border);
    }

    .feature-detailed-card:nth-child(even) .feature-detailed-text {
        order: 0;
    }

    .feature-detailed-text {
        padding: 40px;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    section {
        padding: 80px 20px;
    }

    .hero-section {
        padding-top: 60px;
        padding-bottom: 100px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        z-index: 1001;
        cursor: pointer;
    }

    .mobile-menu-toggle .line {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-text);
        margin: 5px 0;
        transition: all 0.3s ease;
    }

    body.mobile-menu-open .navigation-wrapper {
        right: 0;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    #mobile-menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.12);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease;
    }

    body.mobile-menu-open #mobile-menu-overlay {
        opacity: 1;
        visibility: visible;
    }

    .navigation-wrapper {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: rgba(12, 13, 14, 0.9);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 80px 30px 50px;
        transition: right 0.4s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .main-nav,
    .header-buttons {
        display: none;
    }

    .navigation-wrapper .main-nav,
    .navigation-wrapper .header-buttons {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }

    .main-nav a {
        font-size: 1.2rem;
        width: 100%;
    }

    body.mobile-menu-open .line1 {
        transform: translateY(7px) rotate(45deg);
    }

    body.mobile-menu-open .line2 {
        opacity: 0;
    }

    body.mobile-menu-open .line3 {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/*
=================================================================
    Add Padding to Login Box (Not Entire Page)
=================================================================
*/

/* Remove top padding on the Mijn Account page to match the homepage */
body.page-template-page-mijn-account-php .site-content {
    padding-top: 0;
}

/* But add padding to the login container itself */
body.page-template-page-mijn-account-php .custom-login-container {
    padding-top: 100px;
    /* Add space between header and login box */
}


/*
=================================================================
    Hide Hero Card Icon on Account Page Only
=================================================================
*/

/* Only hide the decorative hero icon on the ACCOUNT page */
.premium-account-dashboard .account-hero-card .hero-content>.hero-icon {
    display: none !important;
}

/* Make the upgrade button icon BIGGER (account page only) */
.premium-account-dashboard .account-hero-card .btn-hero-upgrade i,
.premium-account-dashboard .account-hero-card .btn-hero-upgrade svg,
.premium-account-dashboard .account-hero-card button.btn-hero-upgrade i,
.premium-account-dashboard .account-hero-card button.btn-hero-upgrade svg,
.premium-account-dashboard button.wcsbs-subscribe-button.btn-hero-upgrade i,
.premium-account-dashboard button.wcsbs-subscribe-button.btn-hero-upgrade svg {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    stroke-width: 2 !important;
}

/* Ensure the button itself has proper layout (account page only) */
.premium-account-dashboard button.wcsbs-subscribe-button.btn-hero-upgrade {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

/*
=================================================================
    Hero Content Layout - Separate Account & Homepage
=================================================================
*/

/* DEFAULT: Keep hero content as BLOCK for homepage (vertical layout) */
.hero-content {
    display: block;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

/* ACCOUNT PAGE ONLY: Use FLEX for horizontal layout */
.premium-account-dashboard .account-hero-card .hero-content {
    display: flex !important;
    align-items: center;
    gap: 30px;
}

/*
=================================================================
    Affiliate System Styling Adjustments
=================================================================
*/

/* 4th Management Card - Affiliate Specific Styling */
.management-card.card-affiliate {
    position: relative;
}

.management-card.card-affiliate .card-icon {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.2), rgba(37, 99, 235, 0.2));
    border-color: rgba(29, 78, 216, 0.4);
}

.management-card.card-affiliate .card-icon i {
    color: var(--color-primary);
}

.management-card.card-affiliate .card-content p strong {
    color: var(--color-secondary);
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    font-size: 1.1rem;
}

/* Affiliate Earnings Badge (on main account page) */
.management-card .affiliate-earnings-badge {
    display: inline-block;
    background: rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(37, 99, 235, 0.4);
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-top: 15px;
}

/* --- AFFILIATE MODAL IMPROVEMENTS --- */

/* Fix Modal Header - Remove black bar */
#affiliate-modal-overlay .modal-header {
    text-align: center;
    margin-bottom: 40px !important;
    /* Explicit spacing after entire header section */
    background: transparent !important;
    /* Remove black bar */
    border: none !important;
    display: block !important;
    /* Override flexbox layout that pushes h2 to the right */
    height: auto !important;
    /* Override fixed 60px height that causes overflow */
    padding: 0 !important;
    /* Remove padding that conflicts with our layout */
}

#affiliate-modal-overlay .modal-header .modal-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 20px;
    display: flex !important;
    /* Ensure flex display for centering icon */
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 8px 30px rgba(29, 78, 216, 0.4);
}

#affiliate-modal-overlay .modal-header .modal-icon i,
#affiliate-modal-overlay .modal-header .modal-icon svg {
    width: 40px;
    height: 40px;
    color: white;
    stroke: white;
}

#affiliate-modal-overlay .modal-header h2 {
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-text);
    margin: 0;
    /* No margin - parent .modal-header handles spacing */
    text-align: center !important;
}

/* Affiliate Code Display Section */
/* Affiliate modal specific override for code display */
#affiliate-modal-overlay .affiliate-code-display {
    text-align: center;
    margin-top: 50px !important;
    /* Force spacing from header */
    margin-bottom: 24px;
    /* Reduced from 40px */
    padding: 20px;
    /* Reduced from 30px */
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.05), rgba(37, 99, 235, 0.05));
    border-radius: 16px;
    border: 1px solid rgba(29, 78, 216, 0.2);
    clear: both;
    /* Ensure it clears any floats */
}

.affiliate-code-display {
    text-align: center;
    margin-top: 30px;
    /* Add top margin to ensure spacing from modal-header */
    margin-bottom: 24px;
    /* Reduced from 40px */
    padding: 20px;
    /* Reduced from 30px */
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.05), rgba(37, 99, 235, 0.05));
    border-radius: 16px;
    border: 1px solid rgba(29, 78, 216, 0.2);
}

.affiliate-code-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
    /* Reduced from 16px */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.affiliate-code-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

.affiliate-code-value {
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 4px;
    padding: 16px 40px;
    background-color: rgba(15, 23, 42, 0.03);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    font-family: 'Courier New', monospace;
    position: relative;
}

.affiliate-copy-btn {
    background: rgba(29, 78, 216, 0.15);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-primary);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.affiliate-copy-btn:hover {
    background: rgba(29, 78, 216, 0.25);
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(29, 78, 216, 0.4);
}

.affiliate-copy-btn svg {
    width: 22px;
    height: 22px;
}

/* Affiliate Stats Grid */
.affiliate-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    /* Reduced from 20px */
    margin-bottom: 24px;
    /* Reduced from 40px */
}

.affiliate-stat-card {
    text-align: center;
    padding: 20px 16px;
    /* Reduced from 28px 20px */
    background: var(--glass-bg);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.affiliate-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.affiliate-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08);
    border-color: var(--color-primary);
}

.affiliate-stat-card:hover::before {
    opacity: 1;
}

.affiliate-stat-card:nth-child(2) {
    border-color: rgba(37, 99, 235, 0.3);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0.02));
}

.affiliate-stat-card:nth-child(2)::before {
    background: var(--color-secondary);
}

.affiliate-stat-card:nth-child(2):hover {
    border-color: var(--color-secondary);
}

.affiliate-stat-number {
    font-size: 1.8rem;
    /* Reduced from 2.2rem */
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 8px;
    /* Reduced from 10px */
    line-height: 1;
}

.affiliate-stat-card:nth-child(2) .affiliate-stat-number {
    background: linear-gradient(135deg, var(--color-secondary), #2563EB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.affiliate-stat-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}

/* --- Affiliate breakdown section --- */
#affiliate-breakdown-section>div {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    /* Reduced from 30px */
    margin-bottom: 24px !important;
    /* Reduced from 30px */
}

#affiliate-breakdown-section h4 {
    margin: 0 0 16px 0 !important;
    /* Reduced from 25px */
    font-size: 1.1rem !important;
    /* Reduced from 1.2rem */
    color: var(--color-text) !important;
    font-weight: 800 !important;
}

#affiliate-breakdown-section>div>div {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    /* Reduced from 20px */
    text-align: center !important;
}

#affiliate-breakdown-section>div>div>div {
    padding: 16px !important;
    /* Reduced from 20px */
    background: rgba(15, 23, 42, 0.02) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    transition: all 0.3s ease !important;
}

#affiliate-breakdown-section>div>div>div:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-2px) !important;
}

#affiliate-breakdown-section>div>div>div>div:first-child {
    font-size: 1.6rem !important;
    /* Reduced from 2rem */
    font-weight: 900 !important;
    color: var(--color-text) !important;
    /* ← CHANGED: Now white */
    margin-bottom: 6px !important;
    /* Reduced from 8px */
}

#affiliate-breakdown-section>div>div>div>div:last-child {
    color: var(--color-text-muted) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 700 !important;
}

/* --- Payout Settings Section --- */
.affiliate-payout-settings {
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.6), rgba(248, 250, 252, 0.6));
    border-radius: 20px;
    padding: 24px;
    /* Reduced from 35px */
    margin: 24px 0;
    /* Reduced from 40px */
    border: 1px solid var(--glass-border);
    position: relative;
}

.affiliate-payout-settings::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-secondary), transparent);
}

.affiliate-payout-settings h4 {
    font-size: 1.2rem;
    /* Reduced from 1.3rem */
    color: var(--color-text);
    margin: 0 0 20px 0;
    /* Reduced from 30px */
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
}

.affiliate-payout-settings h4::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 2px;
}

.affiliate-payout-field {
    margin-bottom: 16px;
    /* Reduced from 24px */
}

.affiliate-payout-field:last-child {
    margin-bottom: 0;
}

.affiliate-payout-field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.affiliate-payout-field input {
    width: 100%;
    padding: 16px 20px !important;
    background: #FFFFFF !important;
    border: 2px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 12px !important;
    font-size: 1rem;
    color: var(--color-text) !important;
    transition: all 0.3s ease;
    font-family: inherit;
}

.affiliate-payout-field input::placeholder {
    color: rgba(15, 23, 42, 0.4);
}

.affiliate-payout-field input:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.18) !important;
    background: #FFFFFF !important;
}

.affiliate-save-payout-btn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    color: white !important;
    border: none !important;
    padding: 16px 28px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(29, 78, 216, 0.3);
}

.affiliate-save-payout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(29, 78, 216, 0.5);
    filter: brightness(1.1);
}

/* Last Payout Section */
.affiliate-last-payout {
    text-align: center;
    padding: 25px;
    background: rgba(15, 23, 42, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    margin-top: 30px;
}

.affiliate-last-payout>div:first-child {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.affiliate-last-payout>div:last-child {
    font-size: 1.2rem;
    color: var(--color-text);
    font-weight: 700;
}

/* Responsive Styles */
@media (max-width: 992px) {

    .affiliate-stats-grid,
    #affiliate-breakdown-section>div>div {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .affiliate-code-value {
        font-size: 1.8rem;
        padding: 14px 30px;
        letter-spacing: 3px;
    }
}

@media (max-width: 768px) {
    .affiliate-code-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    .affiliate-code-value {
        font-size: 1.5rem;
        padding: 12px 25px;
        letter-spacing: 2px;
    }

    .affiliate-payout-settings {
        padding: 25px;
    }

    .affiliate-payout-settings h4 {
        font-size: 1.1rem;
    }
}

/* =================================================================
   VS COMPARISON PAGES
   ================================================================= */

/* --- Hero --- */
.pt-comparison-hero {
    padding: 8rem 20px 5rem 20px;
    text-align: center;
}

.pt-comparison-hero .container {
    max-width: 900px;
    margin: 0 auto;
}

.pt-vs-badge {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(29, 78, 216, 0.15);
    color: #2563EB;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(29, 78, 216, 0.3);
}

.pt-comparison-hero h1 {
    color: var(--color-text);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.pt-comparison-hero .pt-hero-subtitle {
    color: var(--color-text-muted);
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
}

.pt-comparison-hero .hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.pt-comparison-hero .hero-buttons .btn-tertiary {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
}

/* --- VS Section Titles (reuse landing page system) --- */
.pt-comp-section .section-title,
.pt-diff-section .section-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    margin-bottom: 16px;
}

.pt-comp-section .section-description,
.pt-diff-section .section-description {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    margin-bottom: 2.5rem;
}

/* --- Comparison Table --- */
.pt-comp-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 4rem 20px 0;
}

.pt-comp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--glass-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(15, 23, 42, 0.1);
    border: 1px solid var(--glass-border);
}

.pt-comp-table th,
.pt-comp-table td {
    padding: 1.5rem;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}

.pt-comp-table th {
    background: rgba(15, 23, 42, 0.03);
    color: var(--color-text);
    font-size: 1.2rem;
    font-weight: 700;
}

.pt-comp-table th:first-child { width: 40%; }
.pt-comp-table th:nth-child(2) { color: var(--color-primary); width: 30%; }
.pt-comp-table th:nth-child(3) { color: var(--color-text-muted); opacity: 0.7; width: 30%; }

.pt-comp-table td {
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

.pt-comp-table td:nth-child(2) {
    color: var(--color-text);
}

.pt-comp-table tr:last-child td { border-bottom: none; }

.pt-comp-table tbody tr {
    transition: background 0.3s ease;
}

.pt-comp-table tbody tr:hover {
    background: rgba(15, 23, 42, 0.03);
}

/* --- Key Differentiators --- */
.pt-diff-section {
    max-width: 1000px;
    margin: 4rem auto 0;
    padding: 0 20px;
}

.pt-diff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.pt-diff-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(15, 23, 42, 0.1);
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.pt-diff-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.1), 0 10px 20px rgba(29, 78, 216, 0.2), inset 0 1px 0 rgba(15, 23, 42, 0.1);
    border-color: var(--color-primary);
}

.pt-diff-card .pt-diff-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.pt-diff-card .pt-diff-icon svg {
    width: 24px;
    height: 24px;
}

.pt-diff-card .pt-diff-content h3 {
    color: var(--color-text);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.pt-diff-card .pt-diff-content p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* --- SEO Section --- */
.pt-seo-section {
    max-width: 900px;
    margin: 5rem auto;
    padding: 0 20px;
}

.pt-seo-section h2 {
    font-size: 2.2rem;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.pt-seo-section h3 {
    font-size: 1.6rem;
    color: var(--color-text);
    margin: 3rem 0 1rem 0;
}

.pt-seo-section p {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.pt-seo-section ul {
    margin-bottom: 2rem;
    font-size: 1.15rem;
    color: var(--color-text-muted);
    line-height: 1.8;
}

/* --- VS page responsive --- */
@media (max-width: 768px) {
    .pt-comparison-hero {
        padding: 6rem 16px 3rem 16px;
    }

    .pt-diff-grid {
        grid-template-columns: 1fr;
    }

    .pt-diff-card {
        flex-direction: column;
    }

    .pt-comp-table th,
    .pt-comp-table td {
        padding: 1rem 0.8rem;
        font-size: 0.95rem;
    }
}

/* =================================================================
   ABOUT PAGE (Over Ons)
   ================================================================= */

.pt-about-company-box {
    padding: 2rem;
    background: rgba(29, 78, 216, 0.08);
    border: 1px solid rgba(29, 78, 216, 0.2);
    border-radius: 16px;
}

.pt-about-company-box h2 {
    color: var(--color-text);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
}

.pt-about-company-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pt-about-company-box li {
    padding: 0.5rem 0;
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

.pt-about-company-box li strong {
    color: var(--color-text);
}

.pt-about-company-box a {
    color: var(--color-primary-light, #2563EB);
    text-decoration: none;
}

.pt-about-company-box a:hover {
    text-decoration: underline;
}

/* Force hero section down - Override all previous rules */
body.home .hero-section,
body.front-page .hero-section {
    padding-top: 12vh !important;
    padding-bottom: 4vh !important;
    align-items: flex-start !important;
    min-height: auto !important;
}

/* Force feature cards down - Override all previous rules */
body.home .quick-features-section,
body.front-page .quick-features-section {
    margin-top: 0 !important;
    padding-top: 120px !important;
    /* Adds space below the hero buttons */
}

/* Force line break in thank you title */
.order-received-header h2 {
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.2 !important;
}

/* Fix order summary layout - make each item horizontal */
.order-received-summary .summary-details {
    display: flex !important;
    justify-content: space-around !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
}

.order-received-summary .summary-item {
    display: flex !important;
    flex-direction: row !important;
    /* ← CHANGED: row instead of column */
    align-items: center !important;
    gap: 8px !important;
    /* ← ADDED: space between label and value */
}

.order-received-summary .summary-item span {
    display: inline !important;
}

.order-received-summary .summary-item strong {
    display: inline !important;
}

/* Fix Euro amount color - target all nested elements */
.order-received-summary .summary-item:last-child strong,
.order-received-summary .summary-item:last-child strong *,
.order-received-summary .summary-item:last-child .woocommerce-Price-amount {
    color: var(--color-text) !important;
}

/**
 * ADD THIS CSS to your theme's style.css or woocommerce.css
 * Styling for the new "Start Abonnement" card
 */

/* Purchase Card - Special styling for inactive users */
.management-card.card-purchase {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.05), rgba(37, 99, 235, 0.05));
    border: 2px solid rgba(29, 78, 216, 0.3);
    position: relative;
    overflow: hidden;
}

/* Purchase card glow pseudo-element removed (carbon) */


.management-card.card-purchase .card-icon {
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
}

.management-card.card-purchase .card-content h3 {
    color: #1D4ED8;
    font-weight: 700;
}

.management-card.card-purchase .btn {
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
    border: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

.management-card.card-purchase .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.4);
}

/* Hero card - Inactive state gets extra prominence */
.account-hero-card.hero-inactive {
    background: linear-gradient(135deg,
            rgba(29, 78, 216, 0.1),
            rgba(37, 99, 235, 0.1));
    border: 2px solid rgba(29, 78, 216, 0.3);
}

.account-hero-card.hero-inactive .hero-icon {
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
}

.account-hero-card.hero-inactive .btn-hero-upgrade {
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Purchase card glow pseudo-element already removed (carbon) */
}

/* SIMPLIFIED CSS - JavaScript handles the calculations */

/* Container setup */
body.home main#primary,
body.front-page main#primary {
    display: block !important;
    min-height: 100vh !important;
}

/* Hero section - JS will set the exact height */
body.home .hero-section,
body.front-page .hero-section {
    /* JavaScript will apply inline styles, but we set defaults */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 50vh !important;
    /* Fallback if JS doesn't load */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    transform: none !important;
}

/* Hero content */
.hero-content {
    display: block;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Feature cards - JS will adjust spacing */
body.home .quick-features-section,
body.front-page .quick-features-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 60px !important;
    transform: none !important;
}

/* Feature grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Next section - JS will adjust */
body.home .features-detailed-section,
body.front-page .features-detailed-section {
    margin-top: 150px !important;
    padding-top: 120px !important;
}

/* Responsive grid only */
@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Small screen text adjustments */
@media (max-height: 800px) {
    .hero-title {
        font-size: 3rem !important;
    }

    .hero-description {
        font-size: 1rem !important;
    }
}

@media (max-height: 700px) {
    .hero-title {
        font-size: 2.5rem !important;
    }

    .hero-buttons .btn {
        padding: 10px 24px !important;
    }

    .feature-card {
        padding: 20px !important;
    }
}

/* SIMPLIFIED CSS - JavaScript handles the calculations */

/* Container setup */
body.home main#primary,
body.front-page main#primary {
    display: block !important;
    min-height: 100vh !important;
    /* Hide content until JavaScript finishes positioning the layout. */
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

/* Show content when JS is ready */
body.home.layout-ready main#primary,
body.front-page.layout-ready main#primary {
    opacity: 1;
}

/* Hero section - JS will set the exact height */
body.home .hero-section,
body.front-page .hero-section {
    /* JavaScript will apply inline styles, but we set defaults */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 50vh !important;
    /* Fallback if JS doesn't load */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    transform: none !important;
}

/* === Compact stats (scoped) === */
.stats-section.stats-section--compact .stat-card {
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: radial-gradient(120% 120% at 100% 0%, rgba(15, 23, 42, 0.03) 0%, rgba(15, 23, 42, 0.02) 35%, rgba(0, 0, 0, 0.0) 100%),
        rgba(18, 18, 28, 0.25);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* force the compact layout */
.stats-section.stats-section--compact .stat-card.stat-card--compact {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    min-height: 88px;
    /* row feel like picture 2 */
}

/* gradient badge behind icon */
.stats-section.stats-section--compact .icon-badge {
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10),
        0 6px 16px rgba(19, 212, 161, 0.18);
}

.stats-section.stats-section--compact .icon-badge--lg {
    width: 48px;
    height: 48px;
}

/* lucide icon inside badge */
.stats-section.stats-section--compact .stat-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.stats-section.stats-section--compact .stat-icon svg,
.stats-section.stats-section--compact .stat-icon i {
    color: #fff;
}

/* copy stack */
.stats-section.stats-section--compact .stat-copy {
    display: grid;
    gap: 2px;
}

.stats-section.stats-section--compact .stat-number {
    font-weight: 800;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: .2px;
}

.stats-section.stats-section--compact .stat-title {
    font-weight: 700;
    font-size: 16px;
}

.stats-section.stats-section--compact .stat-subtitle {
    color: rgba(15, 23, 42, 0.75);
    font-size: 14px;
}

/* grid */
.stats-section.stats-section--compact .stats-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 900px) {
    .stats-section.stats-section--compact .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-section.stats-section--compact .stat-number {
        font-size: 30px;
    }
}

@media (max-width: 899px) {
    .stats-section.stats-section--compact .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   WORDPRESS POST CONTENT STYLES - Match Editor Spacing
   ================================================================= */

/* Base content area styling */
.entry-content {
    color: var(--color-text-muted);
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Paragraph spacing to match WordPress editor */
.entry-content>*+* {
    margin-top: 1.5rem;
}

.entry-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.entry-content p:last-child {
    margin-bottom: 0;
}

/* Heading spacing to match WordPress editor */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child,
.entry-content h5:first-child,
.entry-content h6:first-child {
    margin-top: 0;
}

.entry-content h1 {
    font-size: 2.5rem;
    margin-top: 3rem;
}

.entry-content h2 {
    font-size: 2rem;
    margin-top: 2.5rem;
}

.entry-content h3 {
    font-size: 1.75rem;
}

.entry-content h4 {
    font-size: 1.5rem;
}

.entry-content h5 {
    font-size: 1.25rem;
}

.entry-content h6 {
    font-size: 1.1rem;
}

/* List spacing to match WordPress editor */
.entry-content ul,
.entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
    line-height: 1.8;
}

.entry-content ul {
    list-style-type: disc;
}

.entry-content ol {
    list-style-type: decimal;
}

.entry-content li {
    margin-bottom: 0.5rem;
}

.entry-content li:last-child {
    margin-bottom: 0;
}

.entry-content ul ul,
.entry-content ul ol,
.entry-content ol ul,
.entry-content ol ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Nested lists */
.entry-content ul ul {
    list-style-type: circle;
}

.entry-content ul ul ul {
    list-style-type: square;
}

/* Blockquote spacing to match WordPress editor */
.entry-content blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    border-left: 4px solid var(--color-secondary);
    background: rgba(29, 78, 216, 0.05);
    border-radius: 8px;
    font-style: italic;
    color: var(--color-text);
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: normal;
}

/* Code and preformatted text */
.entry-content code {
    background: rgba(29, 78, 216, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: var(--color-secondary);
}

.entry-content pre {
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid var(--color-card-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    overflow-x: auto;
    line-height: 1.6;
}

.entry-content pre code {
    background: none;
    padding: 0;
    color: var(--color-text);
    font-size: 0.95rem;
}

/* Image spacing to match WordPress editor */
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem 0;
    border-radius: 8px;
}

.entry-content figure {
    margin: 2rem 0;
}

.entry-content figure img {
    margin: 0;
}

.entry-content figcaption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-align: center;
    font-style: italic;
}

/* Table spacing to match WordPress editor */
.entry-content table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: collapse;
    border: 1px solid var(--color-card-border);
    border-radius: 8px;
    overflow: hidden;
}

.entry-content table th,
.entry-content table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-card-border);
    text-align: left;
}

.entry-content table th {
    background: rgba(29, 78, 216, 0.1);
    color: var(--color-text);
    font-weight: 600;
}

.entry-content table tr:nth-child(even) {
    background: rgba(248, 250, 252, 0.3);
}

/* Horizontal rule */
.entry-content hr {
    margin: 2.5rem 0;
    border: none;
    border-top: 2px solid var(--color-card-border);
    opacity: 0.5;
}

/* Links within content */
.entry-content a {
    color: var(--color-secondary);
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.3);
    text-underline-offset: 3px;
    transition: all 0.3s ease;
}

.entry-content a:hover {
    color: var(--color-primary-light);
    text-decoration-color: var(--color-primary-light);
}

/* Strong and emphasis */
.entry-content strong,
.entry-content b {
    font-weight: 700;
    color: var(--color-text);
}

.entry-content em,
.entry-content i {
    font-style: italic;
}

/* WordPress alignment classes */
.entry-content .alignleft {
    float: left;
    margin: 0.5rem 2rem 1.5rem 0;
}

.entry-content .alignright {
    float: right;
    margin: 0.5rem 0 1.5rem 2rem;
}

.entry-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.entry-content .alignwide {
    max-width: 100%;
}

.entry-content .alignfull {
    max-width: 100%;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* WordPress block spacing */
.entry-content .wp-block-image {
    margin: 2rem 0;
}

.entry-content .wp-block-quote {
    margin: 2rem 0;
}

.entry-content .wp-block-separator {
    margin: 2.5rem auto;
}

/* Clear floats */
.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .entry-content {
        font-size: 1rem;
    }

    .entry-content h1 {
        font-size: 2rem;
    }

    .entry-content h2 {
        font-size: 1.75rem;
    }

    .entry-content h3 {
        font-size: 1.5rem;
    }

    .entry-content h4 {
        font-size: 1.25rem;
    }

    .entry-content .alignleft,
    .entry-content .alignright {
        float: none;
        margin: 1.5rem 0;
    }

    .entry-content ul,
    .entry-content ol {
        padding-left: 1.5rem;
    }

    .entry-content blockquote {
        padding: 1rem 1.5rem;
        margin: 1.5rem 0;
    }
}

/* =================================================================
   EMAIL CAPTURE POPUP
   ================================================================= */

.pt-email-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pt-email-popup-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.pt-email-popup-panel {
    background: #FFFFFF;
    border: 1px solid rgba(29, 78, 216, 0.3);
    border-radius: 20px;
    padding: 40px;
    max-width: 480px;
    width: 92%;
    position: relative;
    text-align: center;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18), 0 0 40px rgba(29, 78, 216, 0.08);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
}

.pt-email-popup-overlay.is-visible .pt-email-popup-panel {
    transform: translateY(0) scale(1);
}

.pt-email-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background 0.2s, color 0.2s;
}

.pt-email-popup-close:hover {
    background: rgba(15, 23, 42, 0.1);
    color: var(--color-text);
}

.pt-email-popup-icon {
    margin-bottom: 20px;
}

.pt-email-popup-title {
    color: var(--color-text);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.pt-email-popup-desc {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.pt-email-popup-fields {
    display: flex;
    gap: 8px;
}

.pt-email-popup-input {
    flex: 1;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 10px;
    color: var(--color-text);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.pt-email-popup-input::placeholder {
    color: rgba(15, 23, 42, 0.4);
}

.pt-email-popup-input::placeholder {
    color: rgba(15, 23, 42, 0.3);
}

.pt-email-popup-input:focus {
    border-color: var(--color-primary);
}

.pt-email-popup-btn {
    flex-shrink: 0;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.1s;
}

.pt-email-popup-btn:hover {
    opacity: 0.9;
}

.pt-email-popup-btn:active {
    transform: scale(0.97);
}

.pt-email-popup-message {
    margin-top: 12px;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    text-align: center;
}

.pt-email-popup-message.success {
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-secondary);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.pt-email-popup-message.error {
    background: rgba(214, 54, 56, 0.1);
    color: #ff6b6b;
    border: 1px solid rgba(214, 54, 56, 0.2);
}

.pt-email-popup-privacy {
    margin-top: 16px;
    font-size: 0.75rem;
    color: rgba(15, 23, 42, 0.3);
}

/* --- Minimized popup badge (bottom-right) --- */
.pt-email-popup-badge {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 0;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border: 1px solid rgba(5, 150, 105, 0.55);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    box-shadow:
        0 10px 28px rgba(5, 150, 105, 0.28),
        0 2px 6px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pt-email-popup-badge.is-visible {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

.pt-email-popup-badge:hover {
    border-color: rgba(5, 150, 105, 0.85);
    box-shadow:
        0 12px 34px rgba(5, 150, 105, 0.4),
        0 2px 8px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
    animation: none;
}

@media (max-width: 480px) {
    .pt-email-popup-badge {
        bottom: 18px;
        right: 18px;
        padding: 14px;
    }
}

/* Spin animation for loading spinners */
@keyframes pt-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.pt-spin {
    animation: pt-spin 0.8s linear infinite;
}

/* =================================================================
   INLINE BLOG NEWSLETTER SIGNUP
   ================================================================= */

.pt-inline-signup {
    margin-top: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.08), rgba(37, 99, 235, 0.06));
    border: 1px solid rgba(29, 78, 216, 0.2);
    border-radius: 16px;
    text-align: center;
}

.pt-inline-signup-icon {
    margin-bottom: 12px;
    color: var(--color-primary);
}

.pt-inline-signup-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.pt-inline-signup-desc {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.pt-inline-signup-fields {
    display: flex;
    gap: 8px;
    max-width: 420px;
    margin: 0 auto;
}

.pt-inline-signup-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}

.pt-inline-signup-input::placeholder {
    color: rgba(15, 23, 42, 0.3);
}

.pt-inline-signup-input:focus {
    border-color: var(--color-primary);
}

.pt-inline-signup-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.pt-inline-signup-btn:hover {
    opacity: 0.9;
}

.pt-inline-signup-message {
    margin-top: 10px;
    padding: 8px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.pt-inline-signup-message.success {
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-secondary);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.pt-inline-signup-message.error {
    background: rgba(214, 54, 56, 0.1);
    color: #ff6b6b;
    border: 1px solid rgba(214, 54, 56, 0.2);
}

/* Mobile / narrow popups: stack the form fields so long button text fits */
@media (max-width: 540px) {

    .pt-email-popup-fields,
    .pt-inline-signup-fields {
        flex-direction: column;
    }

    .pt-email-popup-panel {
        padding: 28px 20px;
    }
}

/* =================================================================
   GLOBAL POLISH — light-mode premium touches
   ================================================================= */

/* Smooth scroll everywhere */
html { scroll-behavior: smooth; }

/* Premium focus-visible rings — keyboard-only, not on mouse click */
:root {
    --focus-ring: 0 0 0 3px rgba(29, 78, 216, 0.22), 0 0 0 1px rgba(29, 78, 216, 0.6);
}
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 8px;
    transition: box-shadow 0.15s ease;
}

/* Text selection uses brand color */
::selection {
    background: rgba(29, 78, 216, 0.18);
    color: #0A1E4E;
}
::-moz-selection {
    background: rgba(29, 78, 216, 0.18);
    color: #0A1E4E;
}

/* Tighter defaults for headings site-wide */
h1, h2, h3 {
    letter-spacing: -0.02em;
    color: #0A1E4E;
}
h1 { letter-spacing: -0.035em; }

/* Font rendering */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Softer default borders via card-border var */
:root { --color-card-border: #EFF2F7; }

/* Subtle reveal on primary buttons — site-wide */
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(100%); }

/* Reduced motion — respect accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Header alignment refinement */
@media (min-width: 993px) {
    .header-container {
        padding-left: clamp(64px, 6vw, 108px);
        padding-right: clamp(64px, 6vw, 108px);
    }
}

/* Keep menu labels visually consistent */
.main-nav a,
.main-nav a:visited,
.main-nav li.current-menu-item > a,
.main-nav li.current-page-ancestor > a,
.main-nav li.current_page_item > a,
.main-nav li.current-menu-parent > a,
.main-nav li.current_page_parent > a,
body.home .main-nav li.current-menu-item a[href*="#"],
body.front-page .main-nav li.current-menu-item a[href*="#"] {
    color: var(--color-text-muted) !important;
    background: transparent !important;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a:active,
.main-nav li.current-menu-item > a,
.main-nav li.current-page-ancestor > a,
.main-nav li.current_page_item > a,
.main-nav li.current-menu-parent > a,
.main-nav li.current_page_parent > a,
.main-nav li.current-menu-item > a:hover,
.main-nav li.current-page-ancestor > a:hover,
.main-nav li.current_page_item > a:hover,
.main-nav li.current-menu-parent > a:hover,
.main-nav li.current_page_parent > a:hover,
body.home .main-nav li.current-menu-item a[href*="#"]:hover,
body.front-page .main-nav li.current-menu-item a[href*="#"]:hover {
    color: var(--color-text-muted) !important;
    background: rgba(29, 78, 216, 0.15) !important;
}

/* Final desktop nav color normalization */
@media (min-width: 993px) {
    .site-header .main-nav > ul > li > a,
    .site-header .main-nav > ul > li > a:visited,
    .site-header .main-nav > ul > li.current-menu-item > a,
    .site-header .main-nav > ul > li.current-page-ancestor > a,
    .site-header .main-nav > ul > li.current_page_item > a,
    .site-header .main-nav > ul > li.current-menu-parent > a,
    .site-header .main-nav > ul > li.current_page_parent > a {
        color: #64748b !important;
    }

    .site-header .main-nav > ul > li > a:hover,
    .site-header .main-nav > ul > li > a:focus,
    .site-header .main-nav > ul > li > a:active,
    .site-header .main-nav > ul > li.current-menu-item > a,
    .site-header .main-nav > ul > li.current-page-ancestor > a,
    .site-header .main-nav > ul > li.current_page_item > a,
    .site-header .main-nav > ul > li.current-menu-parent > a,
    .site-header .main-nav > ul > li.current_page_parent > a {
        color: #64748b !important;
        background: rgba(29, 78, 216, 0.15) !important;
    }
}