/*
Theme Name: YourSite.biz - SaaS Store Builder (Zencommerce Inspired)
Description: A modern WordPress theme for SaaS eCommerce platform businesses, inspired by Zencommerce.in design and color scheme. Features include drag & drop customization, pricing tables, testimonials, and complete eCommerce integration.
Version: 3.0.0
Author: YourSite.biz
Author URI: https://yoursite.biz
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yoursite
Tags: ecommerce, business, saas, modern, responsive, customizer-ready, block-styles, wide-blocks
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
*/

/* ==========================================================================
   CSS VARIABLES - ZENCOMMERCE DESIGN SYSTEM
   ========================================================================== */

:root {
    /* Primary Brand Colors */
    --zc-primary: #f4b400;           /* Zencommerce golden yellow */
    --zc-primary-dark: #e09f00;      /* Darker yellow for hover */
    --zc-primary-light: #ffd54f;     /* Lighter yellow */
    
    --zc-secondary: #0f6fb8;         /* Zencommerce blue */
    --zc-secondary-dark: #0d5aa0;    /* Darker blue */
    --zc-secondary-light: #5c95db;   /* Lighter blue */
    
    /* Text Colors */
    --zc-text-primary: #1c1c1c;      /* Dark text */
    --zc-text-secondary: #5f5f5f;    /* Medium gray text */
    --zc-text-tertiary: #93afc4;     /* Light blue-gray */
    --zc-text-white: #ffffff;        /* White text */
    
    /* Background Colors */
    --zc-bg-primary: #ffffff;
    --zc-bg-secondary: #f9f9f9;      /* Light gray background */
    --zc-bg-tertiary: #f7f8f9;       /* Footer background */
    --zc-bg-dark: #111827;           /* Dark mode background */
    
    /* Border and UI Colors */
    --zc-border: #f1f1f1;            /* Light borders */
    --zc-border-dark: #e4e4e4;       /* Slightly darker borders */
    
    /* Status Colors */
    --zc-success: #7dc641;           /* Green for success */
    --zc-warning: #f79237;           /* Orange for warnings */
    --zc-error: #f26b50;             /* Red for errors */
    
    /* Shadows */
    --zc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --zc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --zc-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
    --zc-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    
    /* Border Radius */
    --zc-radius-sm: 3px;
    --zc-radius-md: 6px;
    --zc-radius-lg: 8px;
    --zc-radius-xl: 12px;
    
    /* Spacing */
    --zc-spacing-xs: 0.5rem;
    --zc-spacing-sm: 1rem;
    --zc-spacing-md: 1.5rem;
    --zc-spacing-lg: 2rem;
    --zc-spacing-xl: 3rem;
    --zc-spacing-2xl: 4rem;
}

/* Dark Mode Variables */
body.dark-mode {
    --zc-bg-primary: #111827;
    --zc-bg-secondary: #1f2937;
    --zc-bg-tertiary: #374151;
    --zc-card-bg: #1f2937;
    --zc-card-border: #374151;
    --zc-text-primary: #f9fafb;
    --zc-text-secondary: #e5e7eb;
    --zc-text-tertiary: #d1d5db;
    --zc-border: #374151;
    --zc-border-dark: #4b5563;
    --zc-input-border: #4b5563;
}

/* ==========================================================================
   RESET & NORMALIZE
   ========================================================================== */

*, 
*::before, 
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body, html {
    min-height: 100%;
    height: 100%;
    background-color: var(--zc-bg-primary);
}

/* ==========================================================================
   TYPOGRAPHY - ZENCOMMERCE STYLE
   ========================================================================== */

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--zc-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 1.2;
    color: var(--zc-text-primary);
    margin-bottom: 1em;
}

h1 { font-size: 2.2em; }
h2 { font-size: 2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1.2em; }

/* Heading variants */
.heading-highlight { color: var(--zc-primary) !important; }
.heading-secondary-highlight { color: var(--zc-secondary) !important; }
.heading-uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.heading-underline { border-bottom: 1px solid var(--zc-border); padding-bottom: 0.5em; }
.section-heading { margin-bottom: 2.5em; }

/* Paragraph styling */
p {
    font-size: 1.2em;
    line-height: 1.3;
    color: var(--zc-text-secondary);
    margin-bottom: 1.8em;
}

p:last-child { margin-bottom: 0; }
p.paragraph-highlight { color: var(--zc-text-primary); }

/* Links */
a {
    color: var(--zc-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--zc-primary-dark);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--zc-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   LAYOUT SYSTEM - COMPATIBLE WITH TAILWIND
   ========================================================================== */

.layout-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2em;
}

.layout-container.full-width { max-width: 100%; }
.layout-container.small { max-width: 800px; }
.layout-container.no-padd { padding: 0; }

/* Flexbox System */
.l-flex {
    display: flex;
}

.l-flex-left { justify-content: flex-start; }
.l-flex-right { justify-content: flex-end; }
.l-flex-center { justify-content: center; }
.l-flex-between { justify-content: space-between; }
.l-flex-vcenter { align-items: center; }
.l-flex-stretch { align-items: stretch; }
.l-flex-wrap { flex-wrap: wrap; }
.l-column { flex-direction: column; }

/* Box System - Compatible with Tailwind widths */
.l-box-1 { flex: 0 1 10%; }
.l-box-1-5 { flex: 0 1 15%; }
.l-box-2 { flex: 0 1 20%; }
.l-box-2-5 { flex: 0 1 25%; }
.l-box-3 { flex: 0 1 30%; }
.l-box-3-adjust { flex: 1 1 33.33333333%; }
.l-box-4 { flex: 0 1 40%; }
.l-box-5 { flex: 0 1 50%; }
.l-box-6 { flex: 0 1 60%; }
.l-box-7 { flex: 0 1 70%; }
.l-box-7-5 { flex: 0 1 75%; }
.l-box-8 { flex: 0 1 80%; }
.l-box-9 { flex: 0 1 90%; }
.l-box-10 { flex: 0 1 100%; }
.l-box-auto { flex: 1 1 auto; }

/* Spacing */
.l-spacing > [class*="l-box-"]:not(:last-child) { margin-right: 4em; }
.l-spacing-smaller > [class*="l-box-"]:not(:last-child) { margin-right: 2.5em; }
.l-spacing-larger > [class*="l-box-"]:not(:last-child) { margin-right: 6em; }
.l-column.l-spacing > [class*="l-box-"]:not(:last-child) { margin-right: 0; margin-bottom: 4em; }

/* ==========================================================================
   NAVIGATION - ENHANCED ZENCOMMERCE STYLE
   ========================================================================== */

.site-header,
#main-header {
    background-color: var(--zc-bg-secondary);
    display: block;
    border-bottom: 1px solid var(--zc-border-dark);
    margin-bottom: 0;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.site-header.scrolled,
#main-header.scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    background-color: rgba(249, 249, 249, 0.95);
}

.site-header .container,
.site-header .layout-container,
#main-header .layout-container {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Site Branding */
.site-branding,
#main-header figure {
    margin: 0;
    display: inline-block;
    flex: 0 0 auto;
}

.custom-logo,
#main-header figure img {
    width: auto;
    max-height: 60px;
    height: auto;
    object-fit: contain;
    display: block;
    transition: all 0.3s ease;
}

/* Desktop Navigation */
.main-navigation,
#main-nav {
    display: none;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.nav-menu-wrapper,
#main-nav ul {
    font-size: 1em;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-menu-wrapper #primary-menu li,
#main-nav > ul > li {
    display: inline-block;
    margin: 0;
    position: relative;
}

.nav-menu-wrapper #primary-menu a,
#main-nav > ul > li > a {
    color: var(--zc-text-primary);
    text-transform: uppercase;
    padding: 0.8em 1em;
    display: inline-block;
    font-size: 1.1em;
    font-weight: 300;
    border: 1px solid transparent;
    border-radius: var(--zc-radius-sm);
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.nav-menu-wrapper #primary-menu a:hover,
#main-nav > ul > li > a:hover,
#main-nav > ul > li.current-menu-item > a,
#main-nav > ul > li.current-menu-parent > a {
    text-decoration: none;
    background-color: var(--zc-bg-primary);
    border-color: var(--zc-border);
    color: var(--zc-primary);
    transform: translateY(-1px);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle,
#main-nav-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--zc-radius-sm);
    transition: all 0.2s ease;
}

.mobile-menu-toggle:hover,
#main-nav-mobile:hover {
    background-color: var(--zc-bg-primary);
}

/* Mobile Navigation Panel */
.mobile-navigation,
#mobile-navigation,
#main-nav-mobile > ul {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background-color: var(--zc-bg-primary);
    box-shadow: var(--zc-shadow-xl);
    transition: right 0.3s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    font-size: 1em;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.mobile-navigation.active,
#mobile-navigation.active,
#main-nav-mobile > ul.show {
    right: 0;
    display: flex;
}

/* ==========================================================================
   PRICING COMPONENTS - ZENCOMMERCE STYLE
   ========================================================================== */

/* Hero Section */
.pricing-hero {
    background: linear-gradient(135deg, var(--zc-secondary) 0%, var(--zc-primary) 100%);
    color: white;
    padding: 6em 0;
    text-align: center;
    position: relative;
}

.pricing-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.pricing-hero .layout-container {
    position: relative;
    z-index: 2;
}

.pricing-hero h1 {
    color: white;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.pricing-hero p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25em;
    margin-bottom: 2rem;
}

/* Billing Toggle */
.billing-toggle-section {
    text-align: center;
    margin: 4em 0;
}

.billing-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    background-color: var(--zc-bg-secondary);
    border: 1px solid var(--zc-border);
    border-radius: 50px;
    padding: 4px;
    margin: 0 auto;
    gap: 1rem;
}

.billing-option {
    padding: 1em 2em;
    border: none;
    background: none;
    border-radius: 50px;
    font-size: 1.2em;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--zc-text-secondary);
    white-space: nowrap;
}

.billing-option.active {
    background-color: var(--zc-primary);
    color: white;
    font-weight: 500;
}

.billing-option:hover:not(.active) {
    background-color: rgba(244, 180, 0, 0.1);
    color: var(--zc-primary);
}

.save-badge {
    background-color: var(--zc-success);
    color: white;
    padding: 0.5em 1em;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
    margin-left: 1rem;
}

/* Pricing Grid */
.pricing-grid {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Pricing Cards */
.pricing-card {
    background-color: white;
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius-lg);
    padding: 2em;
    position: relative;
    flex: 1 1 300px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: var(--zc-shadow-sm);
}

.pricing-card:hover {
    box-shadow: var(--zc-shadow-lg);
    transform: translateY(-4px);
}

.pricing-card.featured {
    border-color: var(--zc-primary);
    box-shadow: 0 20px 40px rgba(244, 180, 0, 0.15);
    transform: scale(1.02);
    z-index: 2;
}

.pricing-card.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--zc-primary), var(--zc-primary-dark));
    color: white;
    padding: 0.5em 1.5em;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(244, 180, 0, 0.4);
}

/* Pricing Card Content */
.plan-name {
    font-size: 1.8em;
    font-weight: 300;
    margin-bottom: 0.5em;
    text-align: center;
}

.plan-description {
    text-align: center;
    margin-bottom: 2em;
    color: var(--zc-text-secondary);
}

.price-section {
    text-align: center;
    margin-bottom: 2em;
}

.price-display {
    margin-bottom: 1.5em;
}

.price-amount {
    font-size: 3.5em;
    font-weight: 300;
    color: var(--zc-text-primary);
    line-height: 1;
}

.price-period {
    font-size: 1.2em;
    color: var(--zc-text-secondary);
    font-weight: 300;
}

.price-note {
    font-size: 0.9em;
    color: var(--zc-text-tertiary);
    margin-top: 0.5em;
}

.savings-badge {
    display: inline-block;
    background-color: rgba(125, 198, 65, 0.1);
    color: var(--zc-success);
    padding: 0.3em 0.8em;
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: 500;
    margin-top: 0.5em;
}

/* Features List */
.features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-grow: 1;
    margin-bottom: 2em;
}

.features-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5em;
    font-size: 1em;
}

.features-list li::before {
    content: '✓';
    color: var(--zc-success);
    font-weight: 500;
    margin-right: 0.8em;
    margin-top: 0.1em;
    flex-shrink: 0;
}

/* ==========================================================================
   BUTTON SYSTEM - ZENCOMMERCE INSPIRED
   ========================================================================== */

.btn {
    border-radius: var(--zc-radius-sm);
    transition: all 0.15s ease;
    display: inline-block;
    font-size: 1.2rem;
    cursor: pointer;
    font-weight: 500;
    line-height: 1;
    padding: 0.8em 1.8em;
    color: var(--zc-primary);
    border: 1px solid transparent;
    text-align: center;
    text-decoration: none;
}

.btn:hover {
    background-color: var(--zc-primary);
    color: var(--zc-text-white);
    text-decoration: none;
}

.btn.btn-primary {
    background-color: var(--zc-primary);
    border-color: var(--zc-primary);
    color: var(--zc-text-white);
}

.btn.btn-primary:hover {
    background-color: var(--zc-primary-dark);
    border-color: var(--zc-primary-dark);
    color: var(--zc-text-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 180, 0, 0.3);
}

.btn.btn-border {
    border-color: var(--zc-primary);
    background-color: transparent;
    color: var(--zc-primary);
}

.btn.btn-border:hover {
    background-color: var(--zc-primary);
    color: var(--zc-text-white);
    text-decoration: none;
}

.btn.btn-full { width: 100%; }
.btn.btn-s { font-size: 1rem; }
.btn.btn-l { font-size: 1.4rem; }

/* ==========================================================================
   FORM ELEMENTS - ZENCOMMERCE STYLE
   ========================================================================== */

form:not(:last-child):not([class*="vspacing"]) {
    margin-bottom: 3.5em;
}

form input[type="text"],
form input[type="tel"],
form input[type="email"],
form input[type="password"],
form textarea {
    border-radius: var(--zc-radius-sm);
    appearance: none;
    border: 1px solid var(--zc-border-dark);
    font-size: 1.3em;
    padding: 0.8em 2.8em 0.7em 0.7em;
    width: 100%;
    font-weight: 300;
    line-height: 24px;
    background-color: var(--zc-bg-primary);
    color: var(--zc-text-primary);
}

form input[type="text"]:focus,
form input[type="tel"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form textarea:focus {
    outline: none;
    border-color: var(--zc-primary);
    box-shadow: 0 0 0 3px rgba(244, 180, 0, 0.1);
}

form input[type="text"].valid,
form input[type="tel"].valid,
form input[type="email"].valid,
form input[type="password"].valid,
form textarea.valid {
    border-color: var(--zc-success);
}

form input[type="text"].error,
form input[type="tel"].error,
form input[type="email"].error,
form input[type="password"].error,
form textarea.error {
    border-color: var(--zc-error);
}

form select {
    border-radius: var(--zc-radius-sm);
    appearance: none;
    border: 1px solid var(--zc-border-dark);
    font-size: 1.3em;
    padding: 0.83em 0.8em 0.725em;
    width: 100%;
    font-weight: 300;
    cursor: pointer;
    background-color: var(--zc-bg-primary);
    color: var(--zc-text-primary);
}

form label {
    font-size: 1.2em;
    font-weight: 300;
    color: var(--zc-text-primary);
    margin-bottom: 0.5em;
    display: block;
}

.form-container:not(:last-child) {
    margin-bottom: 1em;
}

/* ==========================================================================
   CARDS AND COMPONENTS
   ========================================================================== */

.card,
.feature-card {
    background-color: var(--zc-bg-primary);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius-lg);
    padding: 2em;
    transition: all 0.3s ease;
    box-shadow: var(--zc-shadow-sm);
}

.card:hover,
.feature-card:hover {
    box-shadow: var(--zc-shadow-lg);
    transform: translateY(-2px);
}

/* Box Components */
.box-border {
    border: 1px solid var(--zc-border);
    padding: 2em;
    border-radius: var(--zc-radius-md);
}

.box-bg {
    background-color: var(--zc-bg-secondary);
    padding: 2em;
    border-radius: var(--zc-radius-md);
}

.box-highlight {
    background-color: var(--zc-primary);
    padding: 2em;
    color: var(--zc-text-white);
    border-radius: var(--zc-radius-md);
}

.box-highlight p {
    color: var(--zc-text-white);
}
/* ==========================================================================
   FAQ SECTION - ZENCOMMERCE STYLE
   ========================================================================== */

.faq-section {
    padding: 6em 0;
}

.faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--zc-bg-primary);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: var(--zc-shadow-sm);
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: var(--zc-shadow-md);
    transform: translateY(-1px);
}

.faq-toggle {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: var(--zc-radius-lg);
    outline: none;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    font-size: inherit;
    font-family: inherit;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-toggle:hover {
    background-color: var(--zc-bg-secondary);
}

.faq-toggle.active {
    background-color: var(--zc-bg-secondary);
}

.faq-toggle h3 {
    color: var(--zc-text-primary);
    margin: 0;
    padding-right: 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4;
}

.faq-toggle svg {
    transition: transform 0.3s ease;
    color: var(--zc-text-secondary);
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.faq-toggle.active svg {
    transform: rotate(180deg);
    color: var(--zc-primary);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 2rem;
    background-color: var(--zc-bg-primary);
}

.faq-content.active {
    border-top: 1px solid var(--zc-border);
    padding-bottom: 1.5rem;
    max-height: 300px;
}

.faq-content p {
    color: var(--zc-text-secondary);
    margin: 0;
    line-height: 1.6;
    font-size: 1rem;
    padding-top: 1rem;
}

.faq-toggle:focus {
    outline: 2px solid var(--zc-primary);
    outline-offset: 2px;
}
/* ==========================================================================
   CURRENCY SELECTOR & FANCY DROPDOWN
   ========================================================================== */

.fancy-selector-wrapper {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.fancy-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(15, 111, 184, 0.1) 0%, rgba(244, 180, 0, 0.1) 100%);
    border: 1px solid rgba(15, 111, 184, 0.3);
    color: var(--zc-text-primary);
    font-size: 14px;
    padding: 10px 16px;
    border-radius: var(--zc-radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    min-width: 120px;
    justify-content: space-between;
}

.fancy-selector::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.fancy-selector:hover::before {
    left: 100%;
}

.fancy-selector:hover {
    background: linear-gradient(135deg, rgba(15, 111, 184, 0.2) 0%, rgba(244, 180, 0, 0.2) 100%);
    border-color: var(--zc-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 180, 0, 0.15);
}

.fancy-selector .currency-symbol {
    color: var(--zc-primary);
    font-weight: 600;
    font-size: 16px;
}

.fancy-selector .selector-text {
    flex: 1;
    text-align: left;
}

.fancy-selector .chevron {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    color: var(--zc-text-secondary);
}

.fancy-selector-wrapper.active .chevron {
    transform: rotate(180deg);
    color: var(--zc-primary);
}

/* Dropdown */
.fancy-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: var(--zc-bg-primary);
    backdrop-filter: blur(20px);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius-lg);
    box-shadow: var(--zc-shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
    width: max-content;
}

.fancy-selector-wrapper.active .fancy-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--zc-text-secondary);
    text-decoration: none;
    border-radius: var(--zc-radius-sm);
    transition: all 0.2s ease;
    font-size: 14px;
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--zc-bg-secondary);
    color: var(--zc-text-primary);
    transform: translateX(4px);
    text-decoration: none;
}

.dropdown-item.active {
    background: linear-gradient(135deg, rgba(244, 180, 0, 0.2) 0%, rgba(15, 111, 184, 0.2) 100%);
    color: var(--zc-primary);
}

/* ==========================================================================
   COMPARISON TABLE - ZENCOMMERCE STYLE
   ========================================================================== */

.pricing-comparison-wrapper {
    margin: 40px 0;
    font-family: 'Roboto', Arial, Tahoma, sans-serif;
}

.comparison-currency-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--zc-bg-secondary);
    border-radius: var(--zc-radius-lg);
    border: 1px solid var(--zc-border);
    box-shadow: var(--zc-shadow-sm);
}

.currency-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 500;
    color: var(--zc-text-primary);
    font-size: 1.1em;
}

.currency-info::before {
    content: '💰';
    font-size: 1.2em;
}

.global-billing-toggle {
    display: flex;
    align-items: center;
    gap: 15px;
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.toggle-switch:hover {
    transform: translateY(-1px);
}

.toggle-switch input {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 50px;
    height: 26px;
    background: var(--zc-border-dark);
    border-radius: 26px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--zc-primary);
    border-color: var(--zc-primary-dark);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(24px);
    box-shadow: 0 2px 8px rgba(244, 180, 0, 0.3);
}

.toggle-label {
    font-weight: 500;
    color: var(--zc-text-primary);
    font-size: 1em;
    transition: color 0.2s ease;
}

.toggle-switch:hover .toggle-label {
    color: var(--zc-primary);
}

.toggle-savings-badge {
    background: linear-gradient(135deg, var(--zc-success), #5cb85c);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 8px;
    animation: pulse 2s infinite;
}

/* Comparison Table */
.pricing-comparison-table {
    overflow-x: auto;
    background: var(--zc-bg-primary);
    border-radius: var(--zc-radius-lg);
    box-shadow: var(--zc-shadow-md);
    border: 1px solid var(--zc-border);
    -webkit-overflow-scrolling: touch;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    background: var(--zc-bg-primary);
}

.comparison-table th,
.comparison-table td {
    padding: 20px;
    text-align: left;
    border-bottom: 1px solid var(--zc-border);
    vertical-align: top;
    transition: all 0.2s ease;
}

.comparison-table th {
    background: var(--zc-bg-secondary);
    font-weight: 500;
    border-bottom: 2px solid var(--zc-primary);
    color: var(--zc-text-primary);
    font-size: 1.1em;
    position: relative;
}

.comparison-table tbody tr:hover td {
    background-color: rgba(244, 180, 0, 0.05);
}

/* ==========================================================================
   FOOTER - ZENCOMMERCE STYLE
   ========================================================================== */

#main-footer {
    padding: 5em 0;
    background-color: var(--zc-bg-tertiary);
    margin-bottom: 0;
}

#main-footer p,
#main-footer ul li a,
#main-footer small a {
    color: var(--zc-text-tertiary);
}

#main-footer a:hover {
    text-decoration: none;
    color: var(--zc-primary);
}

#main-footer .btn {
    color: var(--zc-text-tertiary);
    border-color: var(--zc-text-tertiary);
}

#main-footer .btn:hover {
    background-color: var(--zc-text-tertiary);
    color: var(--zc-bg-primary);
}

/* ==========================================================================
   CTA SECTION - ZENCOMMERCE STYLE
   ========================================================================== */

.cta-section {
    background: linear-gradient(135deg, var(--zc-secondary) 0%, var(--zc-primary) 100%);
    color: var(--zc-text-white);
    padding: 5em 0;
    text-align: center;
    border-radius: var(--zc-radius-lg);
    margin: 4em 0;
}

.cta-section h2 {
    color: var(--zc-text-white);
    margin-bottom: 1rem;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2em;
    margin-bottom: 2rem;
}

/* ==========================================================================
   CURRENCY PRICING CONTAINER
   ========================================================================== */

.currency-pricing-container {
    background: #fff;
    padding: 20px;
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius-lg);
}

.currency-pricing-instructions {
    background: #f0f6fc;
    padding: 15px;
    border-radius: var(--zc-radius-md);
    margin-bottom: 20px;
    border-left: 4px solid var(--zc-secondary);
}

.currency-pricing-instructions h3 {
    margin-top: 0;
    color: var(--zc-secondary);
}

.base-currency-info {
    background: #fff;
    padding: 10px;
    border-radius: var(--zc-radius-sm);
    margin-top: 10px;
    border: 1px solid var(--zc-border);
    display: inline-block;
}

.currency-pricing-table table {
    margin-top: 0;
}

.currency-info-cell {
    vertical-align: top;
    padding: 15px 10px;
}

.currency-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.currency-flag {
    font-size: 18px;
    margin-right: 8px;
}

.currency-code {
    color: var(--zc-secondary);
    font-size: 14px;
}

.currency-name {
    font-size: 12px;
    color: var(--zc-text-secondary);
    margin-top: 2px;
}

.base-currency-badge {
    background: var(--zc-success);
    color: white;
    padding: 2px 6px;
    border-radius: var(--zc-radius-sm);
    font-size: 10px;
    margin-top: 4px;
}

/* ==========================================================================
   TEMPLATES PAGE STYLES
   ========================================================================== */

.templates-hero-section {
    background: linear-gradient(to bottom right, rgb(250 245 255), rgb(252 231 243));
}

body.dark-mode .templates-hero-section {
    background: linear-gradient(to bottom right, var(--zc-bg-secondary), var(--zc-bg-tertiary));
}

.templates-hero-title {
    color: var(--zc-text-primary);
}

.templates-hero-subtitle {
    color: var(--zc-text-tertiary);
}

.templates-featured-section {
    background-color: var(--zc-bg-primary);
}

.templates-grid-section {
    background-color: var(--zc-bg-secondary);
}

.templates-features-section {
    background-color: var(--zc-bg-primary);
}

.templates-cta-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.template-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.template-filter-btn.active {
    background-color: #8b5cf6;
    color: white;
}

.template-filter-btn:hover {
    background-color: #f3f4f6;
}

.template-filter-btn.active:hover {
    background-color: #7c3aed;
}

/* ==========================================================================
   CASE STUDY CARDS
   ========================================================================== */

.case-study-card {
    transform: translateY(0);
    transition: all 0.3s ease;
}

.case-study-card:hover {
    transform: translateY(-5px);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   PAGINATION STYLES
   ========================================================================== */

.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.pagination-wrapper .nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pagination-wrapper a,
.pagination-wrapper span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius-md);
    color: var(--zc-text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 2.5rem;
}

.pagination-wrapper a:hover {
    background: var(--zc-primary);
    color: white;
    border-color: var(--zc-primary);
    text-decoration: none;
}

.pagination-wrapper .current {
    background: var(--zc-primary);
    color: white;
    border-color: var(--zc-primary);
}

.pagination-wrapper .dots {
    background: transparent;
    border: none;
    color: var(--zc-text-tertiary);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Text Colors */
.text-primary { color: var(--zc-text-primary) !important; }
.text-secondary { color: var(--zc-text-secondary) !important; }
.text-tertiary { color: var(--zc-text-tertiary) !important; }
.text-white { color: var(--zc-text-white) !important; }
.highlight { color: var(--zc-secondary) !important; }
.secondary-highlight { color: var(--zc-primary) !important; }

/* Background Colors */
.bg-primary { background-color: var(--zc-bg-primary) !important; }
.bg-secondary { background-color: var(--zc-bg-secondary) !important; }

/* Display */
.hide { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Spacing */
.vspacing-none { margin-bottom: 0; }
.vspacing-xs { margin-bottom: 1em; }
.vspacing-s { margin-bottom: 2em; }
.vspacing-m { margin-bottom: 3.33333333em; }
.vspacing-l { margin-bottom: 5em; }
.vspacing-xl { margin-bottom: 10em; }

/* Font Sizes */
.size-s { font-size: 1em; }
.size-m { font-size: 1.2em; }
.size-l { font-size: 1.4em; }
.size-xl { font-size: 1.6em; }

/* Borders */
.underline {
    border-bottom: 1px solid var(--zc-border);
    padding-bottom: 0.5em;
}

/* ==========================================================================
   RESPONSIVE DESIGN - MOBILE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 1024px) {
    .l-spacing > [class*="l-box-"]:not(:last-child) {
        margin-right: 2rem;
    }
    
    .main-navigation,
    #main-nav {
        display: none !important;
    }
    
    .mobile-menu-toggle,
    #main-nav-mobile {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 13px;
    }
    
    .l-flex {
        flex-direction: column;
    }
    
    .l-spacing > [class*="l-box-"]:not(:last-child) {
        margin-right: 0;
        margin-bottom: 4em;
    }
    
    /* Pricing Grid Mobile */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .pricing-card {
        padding: 1.5rem;
        min-height: auto;
    }
    
    .pricing-card.featured {
        transform: none;
        margin-top: 0;
    }
    
    /* Billing Toggle Mobile */
    .billing-toggle-wrapper {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .billing-option {
        width: 100%;
        text-align: center;
    }
    
    .save-badge {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    /* Currency Notification Mobile */
    .currency-change-notification {
        left: 1rem;
        right: 1rem;
        top: 1rem;
        transform: translateY(-120%);
        min-width: auto;
    }
    
    .currency-change-notification.translate-x-0 {
        transform: translateY(0);
    }
    
    .currency-change-notification.translate-x-full {
        transform: translateY(-120%);
    }
    
    /* FAQ Mobile */
    .faq-toggle {
        padding: 1.25rem 1.5rem !important;
    }
    
    .faq-toggle h3 {
        font-size: 1rem !important;
        padding-right: 0.75rem !important;
    }
    
    .faq-content {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Hero Adjustments */
    .pricing-hero {
        padding: 3rem 0;
    }
    
    .pricing-hero h1 {
        font-size: 2.5rem;
    }
    
    /* Typography Mobile */
    h1, h2, h3, h4 {
        text-align: center;
    }
    
    .layout-container {
        padding: 0 1rem;
    }
    
    section {
        margin-bottom: 5em;
    }
    
    .section-bg {
        padding: 3em 0;
        margin-bottom: 5em;
    }
    
    /* Comparison Table Mobile */
    .comparison-currency-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 15px;
    }
    
    .currency-info {
        justify-content: center;
        font-size: 1em;
    }
    
    .global-billing-toggle {
        flex-direction: column;
        gap: 10px;
    }
    
    .toggle-switch {
        justify-content: center;
    }
    
    .pricing-comparison-table {
        margin: 0 -20px;
        border-radius: 0;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 15px 10px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    
    .layout-container {
        padding: 0 1rem;
    }
    
    section {
        margin-bottom: 5em;
    }
    
    .section-bg {
        padding: 3em 0;
        margin-bottom: 5em;
    }
    
    .pricing-card {
        padding: 1.5rem;
    }
    
    .btn {
        text-align: center;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .comparison-table {
        min-width: 600px;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 12px 8px;
        font-size: 0.85em;
    }
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.slide-in-right {
    animation: slideInFromRight 0.6s ease-out;
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

.btn:focus,
.billing-option:focus {
    outline: 2px solid var(--zc-primary);
    outline-offset: 2px;
}

.pricing-card:focus-within {
    outline: 2px solid var(--zc-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pricing-card,
    .billing-option,
    .btn,
    .card,
    .feature-card,
    .fancy-selector,
    .dropdown-item,
    .faq-toggle,
    .faq-content {
        transition: none !important;
        animation: none !important;
    }
    
    .pricing-card:hover,
    .card:hover,
    .feature-card:hover,
    .faq-item:hover {
        transform: none;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    #main-header,
    #main-footer,
    #main-nav-mobile,
    .btn,
    .button,
    .billing-toggle-wrapper {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
    }
    
    .pricing-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
        transform: none !important;
    }
    
    .pricing-card.featured {
        border: 2px solid #333;
    }
}

/* ==========================================================================
   WORDPRESS SPECIFIC OVERRIDES
   ========================================================================== */

/* WordPress Alignment Classes */
.aligncenter {
    text-align: center;
    margin: 2em auto;
}

.alignleft {
    float: left;
    margin: 0 2em 1em 0;
}

.alignright {
    float: right;
    margin: 0 0 1em 2em;
}

/* WordPress Block Editor Styles */
.wp-block-image {
    margin: 2em 0;
}

.wp-block-quote {
    border-left: 4px solid var(--zc-primary);
    padding-left: 2em;
    font-style: italic;
    font-size: 1.2em;
    margin: 2em 0;
}

.wp-block-button .wp-block-button__link {
    background-color: var(--zc-primary);
    color: var(--zc-text-white);
    border-radius: var(--zc-radius-sm);
    padding: 0.8em 1.8em;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: all 0.15s ease;
}

.wp-block-button .wp-block-button__link:hover {
    background-color: var(--zc-primary-dark);
    transform: translateY(-1px);
}

/* Screen Reader Text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Logo Handling */
.custom-logo-link {
    display: inline-block;
    max-width: 200px;
    width: auto;
    height: auto;
}

.custom-logo {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 60px;
    object-fit: contain;
    display: block;
}

/* ==========================================================================
   DARK MODE SUPPORT
   ========================================================================== */

body.dark-mode {
    background-color: var(--zc-bg-dark);
    color: var(--zc-text-secondary);
}

body.dark-mode .card,
body.dark-mode .feature-card,
body.dark-mode .pricing-card {
    background-color: var(--zc-card-bg);
    border-color: var(--zc-card-border);
}

body.dark-mode #main-header {
    background-color: var(--zc-bg-secondary);
    border-bottom-color: var(--zc-border);
}

body.dark-mode #main-footer {
    background-color: var(--zc-bg-secondary);
    border-top: 1px solid var(--zc-border);
}

/* ==========================================================================
   PRICING BOXES - TAILWIND + ZENCOMMERCE STYLE (CONVERSION OPTIMIZED)
   ========================================================================== */

/* Zencommerce Color Variables for Pricing */
:root {
    --zc-pricing-primary: #f4b400;
    --zc-pricing-primary-dark: #e09f00;
    --zc-pricing-secondary: #0f6fb8;
    --zc-pricing-accent: #1c1c1c;
    --zc-pricing-success: #7dc641;
    --zc-pricing-text-primary: #1c1c1c;
    --zc-pricing-text-secondary: #5f5f5f;
    --zc-pricing-text-muted: #93afc4;
    --zc-pricing-border: #f1f1f1;
    --zc-pricing-bg: #ffffff;
    --zc-pricing-bg-secondary: #f9f9f9;
    --zc-pricing-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --zc-pricing-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   MOBILE MENU OVERLAY FIX
   ========================================================================== */

.mobile-menu-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40 opacity-0 invisible transition-all duration-300;
}

.mobile-menu-overlay.active {
    @apply opacity-100 visible;
}

.mobile-navigation,
#mobile-navigation,
#main-nav-mobile > ul {
    @apply fixed top-0 right-0 h-full w-80 max-w-xs bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto;
}

.mobile-navigation.active,
#mobile-navigation.active,
#main-nav-mobile > ul.show {
    @apply transform translate-x-0;
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
    @apply overflow-hidden;
}

/* ==========================================================================
   PRICING HERO SECTION - CONVERSION OPTIMIZED
   ========================================================================== */

.pricing-hero {
    @apply relative overflow-hidden py-20 lg:py-24;
    background: linear-gradient(135deg, var(--zc-pricing-secondary) 0%, var(--zc-pricing-primary) 100%);
    color: white;
}

.pricing-hero::before {
    content: '';
    @apply absolute inset-0 opacity-20;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}

.pricing-hero-content {
    @apply relative z-10 text-center max-w-4xl mx-auto px-4;
}

.pricing-hero h1 {
    @apply text-4xl md:text-5xl lg:text-6xl font-light mb-4 text-white leading-tight;
}

.pricing-hero p {
    @apply text-lg md:text-xl text-white/90 mb-8 leading-relaxed;
}

.pricing-hero .trust-indicators {
    @apply flex flex-wrap justify-center items-center gap-6 mt-8 text-sm text-white/80;
}

.pricing-hero .trust-indicators span {
    @apply flex items-center gap-2;
}

/* ==========================================================================
   BILLING TOGGLE - CONVERSION OPTIMIZED
   ========================================================================== */

.billing-toggle-section {
    @apply text-center py-12 bg-gray-50;
}

.billing-toggle-wrapper {
    @apply inline-flex items-center gap-1 p-1 bg-white rounded-full shadow-md border border-gray-200;
}

.billing-option {
    @apply relative px-6 py-3 rounded-full text-sm font-medium transition-all duration-200 cursor-pointer whitespace-nowrap;
    color: var(--zc-pricing-text-secondary);
}

.billing-option.active {
    @apply text-white shadow-md;
    background-color: var(--zc-pricing-primary);
}

.billing-option:hover:not(.active) {
    @apply bg-gray-50;
    color: var(--zc-pricing-primary);
}

.save-badge {
    @apply ml-3 px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-semibold uppercase tracking-wide;
    animation: pulse 2s infinite;
}

/* Enhanced save badge with sparkle effect */
.save-badge::before {
    content: '✨';
    @apply mr-1;
}

/* ==========================================================================
   PRICING GRID SYSTEM - CONVERSION OPTIMIZED
   ========================================================================== */

.pricing-section {
    @apply py-16 bg-white;
}

.pricing-grid {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.pricing-cards-container {
    @apply grid gap-8 lg:gap-6;
    /* Force 3 columns on desktop, stack on mobile */
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
    .pricing-cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   PRICING CARDS - CONVERSION OPTIMIZED
   ========================================================================== */

.pricing-card {
    @apply relative bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden transition-all duration-300 flex flex-col;
    min-height: 480px;
}

.pricing-card:hover {
    @apply shadow-xl border-gray-300 transform -translate-y-1;
}

/* Featured Card - Maximum Conversion */
.pricing-card.featured {
    @apply border-2 ring-2 ring-opacity-50 scale-105 lg:scale-110 z-10;
    border-color: var(--zc-pricing-primary);
    ring-color: var(--zc-pricing-primary);
    box-shadow: var(--zc-pricing-shadow-hover);
}

.pricing-card.featured::before {
    content: 'Most Popular';
    @apply absolute -top-4 left-1/2 transform -translate-x-1/2 px-4 py-2 text-white text-xs font-bold uppercase tracking-wider rounded-full z-20;
    background: linear-gradient(135deg, var(--zc-pricing-primary) 0%, var(--zc-pricing-primary-dark) 100%);
    box-shadow: 0 4px 12px rgba(244, 180, 0, 0.4);
}

.pricing-card.featured:hover {
    @apply scale-105 lg:scale-110 transform -translate-y-2;
}

/* ==========================================================================
   PRICING CARD CONTENT - OPTIMIZED TYPOGRAPHY
   ========================================================================== */

.pricing-card-header {
    @apply text-center p-6 pb-4;
}

.plan-name {
    @apply text-xl font-semibold mb-2 text-gray-900;
}

.plan-description {
    @apply text-sm text-gray-600 leading-relaxed;
}

/* ==========================================================================
   PRICE SECTION - CONVERSION OPTIMIZED
   ========================================================================== */

.price-section {
    @apply text-center px-6 pb-6;
}

.price-display {
    @apply flex items-baseline justify-center mb-3;
}

.price-currency {
    @apply text-lg font-medium text-gray-600 -mt-2;
}

.price-amount {
    @apply text-4xl lg:text-5xl font-bold text-gray-900 mx-1;
}

.price-period {
    @apply text-sm font-medium text-gray-600 -mb-1;
}

/* Enhanced savings badge - conversion focused */
.price-savings {
    @apply inline-flex items-center px-3 py-1 bg-green-50 text-green-700 rounded-full text-xs font-semibold;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.price-savings::before {
    content: '💰';
    @apply mr-1;
}

.price-note {
    @apply text-xs text-gray-500 mt-2;
}

/* Annual pricing highlight */
.annual-savings {
    @apply bg-gradient-to-r from-green-50 to-emerald-50 text-green-800 px-3 py-1 rounded-full text-xs font-bold border border-green-200;
    animation: subtle-bounce 2s ease-in-out infinite;
}

@keyframes subtle-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* ==========================================================================
   FEATURES LIST - FIXED SPACING
   ========================================================================== */

.features-section {
    @apply px-6 pb-6 flex-1;
}

.features-list {
    @apply space-y-3;
    list-style: none;
    margin: 0;
    padding: 0;
}

.features-list li {
    @apply flex items-center text-sm text-gray-700 leading-relaxed;
    /* Remove line breaks - ensure inline display */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Better approach for longer feature text */
.features-list li.multiline {
    @apply whitespace-normal;
    line-height: 1.4;
}

.features-list li::before {
    content: '✓';
    @apply flex-shrink-0 w-5 h-5 mr-3 text-green-600 font-bold flex items-center justify-center;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    font-size: 12px;
}

.features-list li.not-included {
    @apply text-gray-400;
}

.features-list li.not-included::before {
    content: '—';
    @apply text-gray-300 bg-gray-100;
}

.features-list li.premium-feature {
    @apply text-amber-700 font-medium;
}

.features-list li.premium-feature::before {
    content: '⭐';
    @apply text-amber-500 bg-amber-50;
    font-size: 10px;
}

/* Feature categories for better organization */
.feature-category {
    @apply mt-4 pt-3 border-t border-gray-100 first:border-t-0 first:mt-0 first:pt-0;
}

.feature-category-title {
    @apply text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2;
}

/* ==========================================================================
   PRICING BUTTONS - CONVERSION OPTIMIZED
   ========================================================================== */

.pricing-card-footer {
    @apply p-6 pt-0;
}

.pricing-btn {
    @apply w-full py-3 px-6 rounded-lg font-semibold text-sm transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-opacity-50;
}

.pricing-btn-primary {
    @apply text-white shadow-md;
    background: linear-gradient(135deg, var(--zc-pricing-primary) 0%, var(--zc-pricing-primary-dark) 100%);
    box-shadow: 0 4px 14px 0 rgba(244, 180, 0, 0.2);
}

.pricing-btn-primary:hover {
    @apply transform -translate-y-0.5 shadow-lg;
    box-shadow: 0 8px 25px rgba(244, 180, 0, 0.3);
}

.pricing-btn-primary:focus {
    ring-color: var(--zc-pricing-primary);
}

.pricing-btn-secondary {
    @apply bg-white border-2 text-gray-700 hover:bg-gray-50;
    border-color: var(--zc-pricing-primary);
    color: var(--zc-pricing-primary);
}

.pricing-btn-secondary:hover {
    @apply text-white;
    background-color: var(--zc-pricing-primary);
}

/* Featured card button enhancement */
.pricing-card.featured .pricing-btn-primary {
    @apply shadow-xl;
    background: linear-gradient(135deg, var(--zc-pricing-primary) 0%, var(--zc-pricing-primary-dark) 100%);
    box-shadow: 0 10px 30px rgba(244, 180, 0, 0.4);
}

.pricing-card.featured .pricing-btn-primary:hover {
    @apply transform -translate-y-1;
    box-shadow: 0 15px 35px rgba(244, 180, 0, 0.5);
}

/* ==========================================================================
   TRUST SIGNALS & GUARANTEES
   ========================================================================== */

.trust-signals {
    @apply mt-4 text-center;
}
.free-plugins {
    @apply inline-flex items-center text-xs text-gray-500 bg-gray-50 px-3 py-1 rounded-full;
}

.free-plugins::before {
    content: '🔌';
    @apply mr-1;
}

.money-back-guarantee {
    @apply inline-flex items-center text-xs text-gray-500 bg-gray-50 px-3 py-1 rounded-full;
}

.money-back-guarantee::before {
    content: '🛡️';
    @apply mr-1;
}

.trial-notice {
    @apply text-xs text-green-600 font-medium mt-2;
}

.trial-notice::before {
    content: '⏱️';
    @apply mr-1;
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {
    .pricing-hero {
        @apply py-16;
    }
    
    .pricing-hero h1 {
        @apply text-3xl leading-tight;
    }
    
    .pricing-hero p {
        @apply text-base;
    }
    
    .pricing-cards-container {
        @apply gap-6;
    }
    
    .pricing-card {
        min-height: auto;
    }
    
    .pricing-card.featured {
        @apply scale-100 border border-amber-300 ring-1;
    }
    
    .price-amount {
        @apply text-3xl;
    }
    
    .billing-toggle-wrapper {
        @apply flex-col gap-1 w-full max-w-xs mx-auto;
    }
    
    .billing-option {
        @apply w-full text-center justify-center;
    }
    
    .save-badge {
        @apply ml-0;
    }
    
    /* Mobile: Allow features to wrap naturally */
    .features-list li {
        @apply whitespace-normal;
    }
}

@media (max-width: 480px) {
    .pricing-card {
        @apply mx-4;
    }
    
    .price-amount {
        @apply text-2xl;
    }
    
    .plan-name {
        @apply text-lg;
    }
    
    .features-list li {
        @apply text-xs;
    }
    
    .pricing-btn {
        @apply text-xs py-2;
    }
}

/* ==========================================================================
   PRICING STATES & VARIATIONS
   ========================================================================== */

/* Monthly/Annual Display Toggle */
.monthly-pricing,
.annual-pricing {
    @apply transition-all duration-300;
}

.pricing-container.show-monthly .monthly-pricing {
    @apply block;
}

.pricing-container.show-monthly .annual-pricing {
    @apply hidden;
}

.pricing-container.show-annual .monthly-pricing {
    @apply hidden;
}

.pricing-container.show-annual .annual-pricing {
    @apply block;
}

/* Default: Show Annual (better conversion) */
.pricing-container .monthly-pricing {
    @apply hidden;
}

.pricing-container .annual-pricing {
    @apply block;
}

/* ==========================================================================
   CONVERSION OPTIMIZATION ENHANCEMENTS
   ========================================================================== */

/* Urgency indicators */
.limited-time-offer {
    @apply absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded;
    animation: pulse 2s infinite;
}

/* Social proof */
.popular-choice {
    @apply absolute top-4 left-4 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded;
}

/* Value proposition highlight */
.best-value {
    @apply bg-gradient-to-r from-green-400 to-green-600 text-white;
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

.pricing-card:focus-within {
    @apply outline-none ring-2 ring-offset-2;
    ring-color: var(--zc-pricing-primary);
}

.pricing-btn:focus {
    @apply outline-none;
}

.billing-option:focus {
    @apply outline-none ring-2 ring-offset-2;
    ring-color: var(--zc-pricing-primary);
}

/* Screen reader only content */
.sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
    clip: rect(0, 0, 0, 0);
}

/* ==========================================================================
   LOADING & ERROR STATES
   ========================================================================== */

.pricing-card.loading {
    @apply opacity-70 pointer-events-none relative;
}

.pricing-card.loading::after {
    content: '';
    @apply absolute inset-0 bg-white bg-opacity-80 flex items-center justify-center;
}

.pricing-card.error {
    @apply border-red-200 bg-red-50;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .pricing-card {
        @apply break-inside-avoid shadow-none border border-gray-300;
        transform: none !important;
    }
    
    .pricing-card.featured {
        @apply border-2 border-gray-600;
    }
    
    .pricing-btn {
        @apply border border-gray-400 bg-transparent text-black;
    }
    
    .pricing-hero {
        @apply bg-none text-black;
    }
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

.pricing-card,
.pricing-btn,
.billing-option {
    will-change: transform;
}

/* Reduce motion for performance on low-end devices */
@media (prefers-reduced-motion: reduce) {
    .pricing-card,
    .pricing-btn,
    .billing-option,
    .save-badge,
    .annual-savings {
        transition: none !important;
        animation: none !important;
    }
    
    .pricing-card:hover,
    .pricing-card.featured {
        transform: none !important;
    }
}
/* ==========================================================================
   MOBILE NAVIGATION FIX - PROPER OVERLAY & PANEL BEHAVIOR
   ========================================================================== */

/* ==========================================================================
   BASE MOBILE NAVIGATION CONTAINER
   ========================================================================== */

/* Main mobile navigation container - Initially hidden */
#mobile-navigation,
.mobile-navigation {
    /* Remove the conflicting inset-0 and make it properly hidden */
    @apply fixed top-0 left-0 w-full h-full z-40 pointer-events-none opacity-0 transition-opacity duration-300;
    /* Don't use inset-0 as it conflicts with the panel positioning */
    visibility: hidden;
}

/* When mobile navigation is active/visible */
#mobile-navigation.active,
#mobile-navigation.show,
.mobile-navigation.active,
.mobile-navigation.show {
    @apply pointer-events-auto opacity-100;
    visibility: visible;
}

/* ==========================================================================
   MOBILE OVERLAY BACKGROUND
   ========================================================================== */

.mobile-overlay {
    /* Cover entire screen for overlay effect */
    @apply absolute inset-0 bg-black transition-opacity duration-300;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
}

/* When navigation is active, show overlay */
#mobile-navigation.active .mobile-overlay,
#mobile-navigation.show .mobile-overlay,
.mobile-navigation.active .mobile-overlay,
.mobile-navigation.show .mobile-overlay {
    opacity: 0.5;
}

/* ==========================================================================
   MOBILE MENU PANEL
   ========================================================================== */

.mobile-menu-panel {
    /* Panel slides in from the right */
    @apply absolute top-0 right-0 h-full w-80 max-w-full bg-white shadow-2xl transform transition-transform duration-300 z-50;
    /* Start off-screen to the right */
    transform: translateX(100%);
}

/* When navigation is active, slide panel in */
#mobile-navigation.active .mobile-menu-panel,
#mobile-navigation.show .mobile-menu-panel,
.mobile-navigation.active .mobile-menu-panel,
.mobile-navigation.show .mobile-menu-panel {
    transform: translateX(0);
}

/* ==========================================================================
   MOBILE MENU HEADER
   ========================================================================== */

.mobile-menu-header {
    @apply flex items-center justify-between p-4 border-b border-gray-200 bg-white;
}

.mobile-menu-header span {
    @apply text-lg font-semibold text-gray-900;
}

.mobile-menu-close {
    @apply p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer;
}

.mobile-menu-close svg {
    @apply w-6 h-6 text-gray-600;
}

/* ==========================================================================
   MOBILE MENU CONTENT
   ========================================================================== */

.mobile-menu-content {
    @apply p-4 space-y-6 overflow-y-auto;
    /* Account for header and footer */
    max-height: calc(100vh - 200px);
}

/* ==========================================================================
   MOBILE SEARCH
   ========================================================================== */

.mobile-search {
    @apply relative;
}

.mobile-search input[type="search"] {
    @apply w-full px-4 py-3 pr-10 bg-gray-50 border border-gray-200 rounded-lg text-gray-900 placeholder-gray-500;
    @apply focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-colors;
}

.mobile-search button[type="submit"] {
    @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 transition-colors;
}

.mobile-search svg {
    @apply w-5 h-5;
}

/* ==========================================================================
   MOBILE MENU LIST
   ========================================================================== */

.mobile-menu-list {
    @apply space-y-2;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-list li {
    @apply block;
}

.mobile-menu-list a {
    @apply block px-4 py-3 text-gray-700 font-medium rounded-lg hover:bg-gray-100 hover:text-gray-900 transition-colors;
    text-decoration: none;
}

.mobile-menu-list .current-menu-item a,
.mobile-menu-list .current-page-ancestor a {
    @apply bg-blue-50 text-blue-700 font-semibold;
}

/* ==========================================================================
   MOBILE THEME TOGGLE
   ========================================================================== */

.mobile-theme-toggle-wrapper {
    @apply pt-4 border-t border-gray-200;
}

.mobile-theme-toggle-wrapper .flex {
    @apply items-center justify-between;
}

.mobile-theme-toggle-wrapper span {
    @apply text-gray-700 font-medium;
}

.mobile-theme-toggle {
    @apply relative w-12 h-6 bg-gray-200 rounded-full cursor-pointer transition-colors;
}

.mobile-theme-toggle-slider {
    @apply absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transform transition-transform duration-200;
}

.mobile-theme-toggle.dark .mobile-theme-toggle-slider {
    @apply transform translate-x-6 bg-gray-800;
}

.mobile-theme-toggle.dark {
    @apply bg-blue-600;
}

.mobile-theme-icon-sun,
.mobile-theme-icon-moon {
    @apply w-4 h-4 absolute top-0.5 left-0.5 text-gray-600;
}

.mobile-theme-toggle.dark .mobile-theme-icon-sun {
    @apply hidden;
}

.mobile-theme-toggle.dark .mobile-theme-icon-moon {
    @apply block text-white;
}

/* ==========================================================================
   MOBILE CTA SECTION
   ========================================================================== */

.mobile-cta-section {
    @apply absolute bottom-0 left-0 right-0 p-4 bg-gray-50 border-t border-gray-200;
}

.mobile-cta-section a {
    @apply block w-full text-center px-4 py-3 rounded-lg font-medium transition-colors;
    text-decoration: none;
}

.mobile-cta-section a:first-child {
    @apply mb-3 border border-gray-300 text-gray-700 hover:bg-white;
}

.mobile-cta-section a:last-of-type {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold shadow-lg hover:shadow-xl;
}

.mobile-cta-section .flex {
    @apply items-center justify-center mt-3 text-xs text-gray-600;
}

.mobile-cta-section svg {
    @apply w-4 h-4 mr-1 text-green-500;
}

/* ==========================================================================
   MOBILE MENU TOGGLE BUTTON (HAMBURGER)
   ========================================================================== */

.mobile-menu-toggle,
#mobile-menu-button {
    @apply lg:hidden flex items-center justify-center p-2 rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors cursor-pointer;
}

.mobile-menu-toggle svg,
#mobile-menu-button svg {
    @apply w-6 h-6;
}

/* Hamburger animation states */
.mobile-menu-toggle.active .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* ==========================================================================
   BODY SCROLL LOCK
   ========================================================================== */

/* Prevent background scrolling when mobile menu is open */
body.mobile-menu-open {
    @apply overflow-hidden;
    position: fixed;
    width: 100%;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Hide mobile navigation on large screens */
@media (min-width: 1024px) {
    #mobile-navigation,
    .mobile-navigation,
    .mobile-menu-toggle,
    #mobile-menu-button {
        @apply hidden;
    }
}

/* Adjust panel width on smaller screens */
@media (max-width: 480px) {
    .mobile-menu-panel {
        @apply w-full max-w-full;
    }
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

.mobile-menu-toggle:focus,
.mobile-menu-close:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

.mobile-menu-list a:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2 ring-offset-gray-100;
}

.mobile-theme-toggle:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* ==========================================================================
   DARK MODE SUPPORT
   ========================================================================== */

.dark #mobile-navigation .mobile-menu-panel {
    @apply bg-gray-800 border-gray-700;
}

.dark .mobile-menu-header {
    @apply bg-gray-800 border-gray-700;
}

.dark .mobile-menu-header span {
    @apply text-gray-100;
}

.dark .mobile-menu-close {
    @apply hover:bg-gray-700;
}

.dark .mobile-menu-close svg {
    @apply text-gray-300;
}

.dark .mobile-search input {
    @apply bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400;
}

.dark .mobile-menu-list a {
    @apply text-gray-300 hover:bg-gray-700 hover:text-gray-100;
}

.dark .mobile-cta-section {
    @apply bg-gray-700 border-gray-600;
}

/* ==========================================================================
   JAVASCRIPT HELPER CLASSES
   ========================================================================== */

/* For JavaScript to easily toggle states */
.mobile-nav-hidden {
    @apply opacity-0 pointer-events-none;
    visibility: hidden;
}

.mobile-nav-visible {
    @apply opacity-100 pointer-events-auto;
    visibility: visible;
}

.mobile-panel-closed {
    transform: translateX(100%);
}

.mobile-panel-open {
    transform: translateX(0);
}

.mobile-overlay-hidden {
    opacity: 0;
}

.mobile-overlay-visible {
    opacity: 0.5;
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

.mobile-menu-panel {
    will-change: transform;
    backface-visibility: hidden;
}

.mobile-overlay {
    will-change: opacity;
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-panel,
    .mobile-overlay,
    #mobile-navigation,
    .mobile-navigation {
        transition: none !important;
    }
}

/* ==========================================================================
   FIXED STYLES FOR HOMEPAGE TEMPLATE
   ========================================================================== */

/* ==========================================================================
   BENEFITS CTA BUTTON - FIXED STYLING
   ========================================================================== */

.benefits-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--zc-primary, #f4b400) 0%, var(--zc-primary-dark, #e09f00) 100%);
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--zc-radius-lg, 12px);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(244, 180, 0, 0.25);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.benefits-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--zc-primary-dark, #e09f00) 0%, #d4940a 100%);
    transition: left 0.4s ease;
    z-index: -1;
}

.benefits-cta-button:hover::before {
    left: 0;
}

.benefits-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 180, 0, 0.4);
    color: white;
    text-decoration: none;
}

.benefits-cta-button:hover .benefits-cta-arrow {
    transform: translateX(4px);
}

.benefits-cta-button:focus {
    outline: none;
    ring: 3px solid rgba(244, 180, 0, 0.3);
    ring-offset: 2px;
}

.benefits-cta-arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* ==========================================================================
   DIFM BANNER SECTION - FIXED VERSION
   ========================================================================== */

.difm-banner-section {
    position: relative;
    overflow: hidden;
}

/* Clean Gradient Background - No distracting patterns */
.difm-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #1d4ed8 100%);
    z-index: 1;
}

/* Subtle Pattern Overlay - Very minimal for texture without hurting readability */
.difm-pattern-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 30px 30px;
    z-index: 2;
}

/* DIFM Badge - IMPROVED READABILITY */
.difm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    color: #1e40af;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.difm-badge svg {
    color: #1e40af;
}

/* DIFM Primary Button */
.difm-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: #1e40af;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 1rem 2rem;
    border-radius: var(--zc-radius-lg, 12px);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
    border: 2px solid transparent;
}

.difm-primary-button:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #1e40af;
    text-decoration: none;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
}

.difm-primary-button svg {
    transition: transform 0.3s ease;
}

.difm-primary-button:hover svg:last-child {
    transform: translateX(2px);
}

/* DIFM Secondary Button - FIXED HOVER STATE */
.difm-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 1rem 2rem;
    border: 2px solid white;
    border-radius: var(--zc-radius-lg, 12px);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.difm-secondary-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: white;
    transition: left 0.3s ease;
    z-index: 1;
}

.difm-secondary-button span,
.difm-secondary-button svg {
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.difm-secondary-button:hover::before {
    left: 0;
}

.difm-secondary-button:hover {
    color: #1e40af !important;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.difm-secondary-button:hover span,
.difm-secondary-button:hover svg {
    color: #1e40af;
}

/* DIFM Trust Items */
.difm-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--zc-radius-lg, 12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.difm-trust-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.difm-trust-item.difm-guarantee {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.3);
    position: relative;
    overflow: hidden;
}

.difm-trust-item.difm-guarantee::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==========================================================================
   FAQ SECTION - FIXED IMPLEMENTATION
   ========================================================================== */

.faq-section {
    padding: 4rem 0;
    background: var(--zc-bg-primary, #ffffff);
}

.faq-section .layout-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.faq-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--zc-text-primary, #1f2937);
}

.faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: var(--zc-bg-primary, #ffffff);
    border: 1px solid var(--zc-border, #e5e7eb);
    border-radius: var(--zc-radius-lg, 12px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.faq-item.active {
    border-color: var(--zc-primary, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* FAQ Toggle Button */
.faq-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem 2rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: inherit;
}

.faq-toggle:hover {
    background: var(--zc-bg-secondary, #f9fafb);
}

.faq-toggle:focus {
    outline: none;
    background: var(--zc-bg-secondary, #f9fafb);
}

.faq-toggle h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--zc-text-primary, #1f2937);
    line-height: 1.4;
    flex: 1;
    text-align: left;
}

/* FAQ Toggle Icon - Single clean chevron */
.faq-toggle-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--zc-text-secondary, #6b7280);
    transition: all 0.3s ease;
}

.faq-item.active .faq-toggle-icon {
    color: var(--zc-primary, #3b82f6);
    transform: rotate(180deg);
}

/* FAQ Content */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--zc-bg-primary, #ffffff);
    border-top: 1px solid transparent;
}

.faq-content.active {
    max-height: 500px;
    border-top-color: var(--zc-border, #e5e7eb);
}

.faq-content-inner {
    padding: 0 2rem 1.5rem 2rem;
    color: var(--zc-text-secondary, #6b7280);
    line-height: 1.6;
}

.faq-content p {
    margin: 0;
    padding-top: 1rem;
}

/* ==========================================================================
   RESPONSIVE DESIGN FIXES
   ========================================================================== */

@media (max-width: 768px) {
    /* Benefits CTA Button Mobile */
    .benefits-cta-button {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }
    
    /* DIFM Section Mobile */
    .difm-banner-section .grid {
        gap: 2rem;
    }
    
    .difm-badge {
        font-size: 0.75rem;
        padding: 0.625rem 1.25rem;
    }
    
    .difm-primary-button,
    .difm-secondary-button {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    .difm-trust-item {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }
    
    /* FAQ Mobile */
    .faq-toggle {
        padding: 1.25rem 1.5rem;
    }
    
    .faq-toggle h3 {
        font-size: 1rem;
        padding-right: 1rem;
    }
    
    .faq-content-inner {
        padding: 0 1.5rem 1.25rem 1.5rem;
    }
    
    .faq-toggle-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .benefits-cta-button {
        font-size: 0.9375rem;
        padding: 0.8125rem 1.375rem;
    }
    
    .difm-primary-button,
    .difm-secondary-button {
        padding: 0.8125rem 1.25rem;
        font-size: 0.9375rem;
    }
    
    .faq-toggle {
        padding: 1rem 1.25rem;
    }
    
    .faq-content-inner {
        padding: 0 1.25rem 1rem 1.25rem;
    }
}

/* ==========================================================================
   DARK MODE SUPPORT
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .faq-item {
        background: var(--zc-card-bg, #1f2937);
        border-color: var(--zc-card-border, #374151);
    }
    
    .faq-toggle:hover,
    .faq-toggle:focus {
        background: var(--zc-bg-tertiary, #374151);
    }
    
    .faq-toggle h3 {
        color: var(--zc-text-primary, #f9fafb);
    }
    
    .faq-content {
        background: var(--zc-card-bg, #1f2937);
        border-top-color: var(--zc-card-border, #374151);
    }
    
    .faq-content-inner {
        color: var(--zc-text-secondary, #d1d5db);
    }
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

.benefits-cta-button:focus-visible,
.difm-primary-button:focus-visible,
.difm-secondary-button:focus-visible {
    outline: 2px solid var(--zc-primary, #3b82f6);
    outline-offset: 2px;
}

.faq-toggle:focus-visible {
    outline: 2px solid var(--zc-primary, #3b82f6);
    outline-offset: -2px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .benefits-cta-button,
    .difm-primary-button,
    .difm-secondary-button,
    .faq-item,
    .faq-toggle,
    .faq-content,
    .faq-toggle-icon {
        transition: none !important;
        animation: none !important;
    }
    
    .benefits-cta-button:hover,
    .difm-primary-button:hover,
    .difm-secondary-button:hover,
    .faq-item:hover {
        transform: none !important;
    }
    
    .faq-item.active .faq-toggle-icon {
        transform: rotate(180deg) !important;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .difm-banner-section {
        background: white !important;
        color: black !important;
    }
    
    .difm-background,
    .difm-pattern-overlay {
        display: none !important;
    }
    
    .benefits-cta-button,
    .difm-primary-button,
    .difm-secondary-button {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
        box-shadow: none !important;
    }
    
    .faq-content.active {
        max-height: none !important;
    }
}

/* ==========================================================================
   USP BENEFITS SECTION - ZENCOMMERCE STYLE
   ========================================================================== */

/* USP Benefits Card Styling */
.usp-benefits-card {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--zc-radius-xl, 16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.usp-benefits-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(244, 180, 0, 0.05), transparent);
    transition: left 0.6s ease;
}

.usp-benefits-card:hover::before {
    left: 100%;
}

.usp-benefits-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border-color: rgba(244, 180, 0, 0.2);
}

/* Dark mode support */
.dark .usp-benefits-card {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(75, 85, 99, 0.3);
}

.dark .usp-benefits-card:hover {
    border-color: rgba(244, 180, 0, 0.3);
}

/* USP Benefits Icon Wrapper */
.usp-benefits-icon-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, var(--zc-primary, #f4b400) 0%, var(--zc-primary-dark, #e09f00) 100%);
    border-radius: var(--zc-radius-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(244, 180, 0, 0.3);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.usp-benefits-card:hover .usp-benefits-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(244, 180, 0, 0.4);
}

.usp-benefits-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
    stroke-width: 2.5;
}

/* USP Benefits Title */
.usp-benefits-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--zc-text-primary, #1f2937);
    margin: 0;
    line-height: 1.3;
}

.dark .usp-benefits-title {
    color: var(--zc-text-white, #f9fafb);
}

/* USP Benefits List */
.usp-benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.usp-benefits-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--zc-text-secondary, #6b7280);
    line-height: 1.6;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.usp-benefits-list-item:hover {
    color: var(--zc-text-primary, #1f2937);
    transform: translateX(4px);
}

.dark .usp-benefits-list-item {
    color: var(--zc-text-secondary, #d1d5db);
}

.dark .usp-benefits-list-item:hover {
    color: var(--zc-text-white, #f9fafb);
}

.usp-benefits-check-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--zc-success, #10b981);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* Float Animation for Metrics Cards */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-float.delay-1000 {
    animation-delay: 1s;
}

/* USP Benefits CTA Button */
.usp-benefits-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--zc-primary, #f4b400) 0%, var(--zc-primary-dark, #e09f00) 100%);
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--zc-radius-lg, 12px);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(244, 180, 0, 0.25);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.usp-benefits-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--zc-primary-dark, #e09f00) 0%, #d4940a 100%);
    transition: left 0.4s ease;
    z-index: -1;
}

.usp-benefits-cta-button:hover::before {
    left: 0;
}

.usp-benefits-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 180, 0, 0.4);
    color: white;
    text-decoration: none;
}

.usp-benefits-cta-button:hover .usp-benefits-cta-arrow {
    transform: translateX(4px);
}

.usp-benefits-cta-button:focus {
    outline: none;
    ring: 3px solid rgba(244, 180, 0, 0.3);
    ring-offset: 2px;
}

.usp-benefits-cta-arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1024px) {
    .usp-benefits-card {
        padding: 1.5rem;
    }
    
    .usp-benefits-icon-wrapper {
        width: 3rem;
        height: 3rem;
    }
    
    .usp-benefits-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .usp-benefits-title {
        font-size: 1.375rem;
    }
}

@media (max-width: 768px) {
    .usp-benefits-section {
        padding: 3rem 0;
    }
    
    .usp-benefits-card {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }
    
    .usp-benefits-title {
        font-size: 1.25rem;
    }
    
    .usp-benefits-list-item {
        font-size: 0.875rem;
    }
    
    /* Stack floating elements on mobile */
    .animate-float {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        margin: 1rem auto !important;
        animation: none;
    }
}

@media (max-width: 480px) {
    .usp-benefits-card {
        padding: 1rem;
    }
    
    .usp-benefits-icon-wrapper {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .usp-benefits-icon {
        width: 1rem;
        height: 1rem;
    }
    
    .usp-benefits-title {
        font-size: 1.125rem;
    }
    
    .usp-benefits-check-icon {
        width: 1rem;
        height: 1rem;
    }
    
    .usp-benefits-cta-button {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

.usp-benefits-card:focus-within {
    outline: 2px solid var(--zc-primary, #f4b400);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .usp-benefits-card,
    .usp-benefits-icon-wrapper,
    .usp-benefits-list-item,
    .usp-benefits-cta-button,
    .animate-float {
        transition: none !important;
        animation: none !important;
    }
    
    .usp-benefits-card:hover,
    .usp-benefits-card:hover .usp-benefits-icon-wrapper,
    .usp-benefits-list-item:hover,
    .usp-benefits-cta-button:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .usp-benefits-section {
        background: white !important;
        color: black !important;
    }
    
    .usp-benefits-card {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .usp-benefits-icon-wrapper {
        background: #f4b400 !important;
        color: white !important;
        box-shadow: none !important;
    }
    
    .usp-benefits-cta-button {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
        box-shadow: none !important;
    }
    
    .animate-float {
        position: relative !important;
        animation: none !important;
    }
}