/**
 * QuickerBill Theme Variables
 * Complete design system for theme pages (independent of store/portal/admin)
 * 
 * Brand colors come from color-format.php (database-driven)
 * All other variables defined here
 * 
 * @package QuickerBill/Theme
 */

:root {
    /**
     * Brand Colors (from color-format.php - database driven)
     * These are injected via wp_head and available globally:
     * --quickerbill-theme-variable-primary
     * --quickerbill-theme-variable-primary-hover
     * --quickerbill-theme-variable-primary-light
     * --quickerbill-theme-variable-primary-dark
     * --quickerbill-theme-variable-secondary
     * --quickerbill-theme-variable-secondary-hover
     * --quickerbill-theme-variable-secondary-light
     */
    
    /** Status Colors - Success/Green (Promotions) */
    --quickerbill-theme-variable-success: #22c55e;
    --quickerbill-theme-variable-success-hover: #16a34a;
    --quickerbill-theme-variable-success-bg: #f0fdf4;
    --quickerbill-theme-variable-success-bg-light: #dcfce7;
    --quickerbill-theme-variable-success-text: #15803d;
    --quickerbill-theme-variable-success-text-dark: #065f46;
    --quickerbill-theme-variable-success-border: #bbf7d0;
    --quickerbill-theme-variable-success-accent: #86efac;
    
    /** Status Colors - Error/Red */
    --quickerbill-theme-variable-error: #ef4444;
    --quickerbill-theme-variable-error-hover: #dc2626;
    --quickerbill-theme-variable-error-dark: #b91c1c;
    --quickerbill-theme-variable-error-bg: #fef2f2;
    --quickerbill-theme-variable-error-bg-light: #fee2e2;
    --quickerbill-theme-variable-error-text: #991b1b;
    --quickerbill-theme-variable-error-border: #fecaca;
    
    /** Status Colors - Warning/Orange */
    --quickerbill-theme-variable-warning: #f59e0b;
    --quickerbill-theme-variable-warning-hover: #ea580c;
    --quickerbill-theme-variable-warning-dark: #d97706;
    --quickerbill-theme-variable-warning-bg: #fef3c7;
    --quickerbill-theme-variable-warning-bg-light: #ffedd5;
    --quickerbill-theme-variable-warning-text: #92400e;
    --quickerbill-theme-variable-warning-border: #fcd34d;
    --quickerbill-theme-variable-warning-accent: #fbbf24;
    
    /** Status Colors - Info/Blue */
    --quickerbill-theme-variable-info: #3b82f6;
    --quickerbill-theme-variable-info-hover: #2563eb;
    --quickerbill-theme-variable-info-dark: #1e40af;
    --quickerbill-theme-variable-info-bg: #eff6ff;
    --quickerbill-theme-variable-info-bg-light: #dbeafe;
    --quickerbill-theme-variable-info-border: #bfdbfe;
    --quickerbill-theme-variable-info-accent: #60a5fa;
    
    /** Status Colors - Info/Blue - Cyan Variants (for header switch-back link) */
    --quickerbill-theme-variable-info-cyan: #0369a1;
    --quickerbill-theme-variable-info-cyan-dark: #075985;
    --quickerbill-theme-variable-info-bg-cyan: #e0f2fe;
    --quickerbill-theme-variable-info-bg-cyan-light: #f0f9ff;
    
    /** Neutral Colors */
    --quickerbill-theme-variable-white: #ffffff;
    --quickerbill-theme-variable-black: #000000;
    
    --quickerbill-theme-variable-gray-50: #f8fafc;
    --quickerbill-theme-variable-gray-100: #f1f5f9;
    --quickerbill-theme-variable-gray-200: #e2e8f0;
    --quickerbill-theme-variable-gray-300: #cbd5e1;
    --quickerbill-theme-variable-gray-400: #94a3b8;
    --quickerbill-theme-variable-gray-500: #64748b;
    --quickerbill-theme-variable-gray-600: #475569;
    --quickerbill-theme-variable-gray-700: #334155;
    --quickerbill-theme-variable-gray-800: #1e293b;
    
    /** Shadows */
    --quickerbill-theme-variable-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --quickerbill-theme-variable-shadow-sm-alt: 0 2px 4px rgba(0, 0, 0, 0.05);
    --quickerbill-theme-variable-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --quickerbill-theme-variable-shadow-md-alt: 0 2px 8px rgba(0, 0, 0, 0.15);
    --quickerbill-theme-variable-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --quickerbill-theme-variable-shadow-lg-alt: 0 8px 20px rgba(0, 0, 0, 0.15);
    --quickerbill-theme-variable-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
    --quickerbill-theme-variable-shadow-success: 0 2px 6px rgba(34, 197, 94, 0.3);
    --quickerbill-theme-variable-shadow-success-lg: 0 4px 12px rgba(34, 197, 94, 0.15);
    --quickerbill-theme-variable-shadow-info: 0 4px 12px rgba(59, 130, 246, 0.4);
    
    /** Border Radius */
    --quickerbill-theme-variable-radius-xs: 3px;
    --quickerbill-theme-variable-radius-sm: 4px;
    --quickerbill-theme-variable-radius-md: 6px;
    --quickerbill-theme-variable-radius-lg: 8px;
    --quickerbill-theme-variable-radius-xl: 12px;
    --quickerbill-theme-variable-radius-2xl: 16px;
    --quickerbill-theme-variable-radius-3xl: 20px;
    --quickerbill-theme-variable-radius-full: 50%;
    
    /** Spacing */
    --quickerbill-theme-variable-space-1: 4px;
    --quickerbill-theme-variable-space-1-5: 6px;
    --quickerbill-theme-variable-space-2: 8px;
    --quickerbill-theme-variable-space-2-5: 10px;
    --quickerbill-theme-variable-space-3: 12px;
    --quickerbill-theme-variable-space-3-5: 14px;
    --quickerbill-theme-variable-space-4: 16px;
    --quickerbill-theme-variable-space-5: 20px;
    --quickerbill-theme-variable-space-6: 24px;
    --quickerbill-theme-variable-space-8: 32px;
    --quickerbill-theme-variable-space-10: 40px;
    --quickerbill-theme-variable-space-12: 48px;
    --quickerbill-theme-variable-space-15: 60px;
    --quickerbill-theme-variable-space-20: 80px;
    
    /** Z-Index (matching store structure exactly) */
    --quickerbill-theme-variable-z-overlay: 998;
    --quickerbill-theme-variable-z-sidebar: 999;
    --quickerbill-theme-variable-z-header: 1000;
    --quickerbill-theme-variable-z-dropdown: 1001;
    --quickerbill-theme-variable-z-impersonation: 1100;
    
    /** Additional theme-specific z-index (higher layers for modals/popovers) */
    --quickerbill-theme-variable-z-modal-backdrop: 1040;
    --quickerbill-theme-variable-z-modal: 1050;
    --quickerbill-theme-variable-z-popover: 1060;
    --quickerbill-theme-variable-z-tooltip: 1070;
    
    /** Transitions */
    --quickerbill-theme-variable-transition-fast: 0.2s;
    --quickerbill-theme-variable-transition-normal: 0.3s;
    --quickerbill-theme-variable-transition-slow: 0.6s;
    --quickerbill-theme-variable-transition-slower: 0.8s;
    --quickerbill-theme-variable-transition-pulse: 2s;
}
/**
 * QuickerBill Theme Reset Styles
 * 
 * @package QuickerBill/Theme
 */

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

/** Prevent Horizontal Overflow */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/** Prevent Body Scroll (when modals/menus open) */
body.quickerbill-theme-no-scroll {
    overflow: hidden;
}

/** List Reset */
ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/** Link Reset */
a {
    text-decoration: none;
    color: inherit;
}

/** Button Reset */
button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

/** Image Reset */
img {
    max-width: 100%;
    height: auto;
    display: block;
}
/**
 * QuickerBill Theme Typography
 * 
 * @package QuickerBill/Theme
 */

/** Base Body Typography */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--quickerbill-theme-variable-gray-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/** Headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
    color: var(--quickerbill-theme-variable-gray-800);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

/** Paragraphs */
p {
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

p:last-child {
    margin-bottom: 0;
}

/** Links */
a {
    color: var(--quickerbill-theme-variable-primary);
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

a:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
}

/** Strong/Bold */
strong, b {
    font-weight: 600;
}

/** Small Text */
small {
    font-size: 0.875rem;
}

/** Code */
code {
    font-family: 'Courier New', monospace;
    background: var(--quickerbill-theme-variable-gray-100);
    padding: 2px 6px;
    border-radius: var(--quickerbill-theme-variable-radius-sm);
    font-size: 0.9em;
}

/** Blockquote */
blockquote {
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
    border-left: 4px solid var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-gray-600);
    font-style: italic;
}

/* ========================================
   WIDGET TYPOGRAPHY
   ======================================== */

/** Widget Title - Standard (42px) */
.quickerbill-theme-typography-widget-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0;
}

/** Widget Title - Large (56px for hero sections) */
.quickerbill-theme-typography-widget-title-large {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0;
}

/** Widget Description - Standard (17px) */
.quickerbill-theme-typography-widget-description {
    font-size: 17px;
    line-height: 1.7;
    color: var(--quickerbill-theme-variable-gray-500);
    margin: 0;
}

/** Widget Description - Large (19px for hero sections) */
.quickerbill-theme-typography-widget-description-large {
    font-size: 19px;
    line-height: 1.6;
    color: var(--quickerbill-theme-variable-gray-500);
    margin: 0;
}

/** Widget Header Container */
.quickerbill-theme-typography-widget-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 0 20px;
}

/** Widget Hero Container */
.quickerbill-theme-typography-widget-hero {
    position: relative;
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    overflow: hidden;
}

.quickerbill-theme-typography-widget-hero-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-5);
}
/**
 * QuickerBill Theme Layout
 * 
 * @package QuickerBill/Theme
 */

/** Container */
.quickerbill-theme-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--quickerbill-theme-variable-space-6);
}

.quickerbill-theme-container-narrow {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--quickerbill-theme-variable-space-6);
}

.quickerbill-theme-container-wide {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--quickerbill-theme-variable-space-6);
}

/** Section Spacing */
.quickerbill-theme-section {
    padding: var(--quickerbill-theme-variable-space-15) 0;
}

.quickerbill-theme-section-sm {
    padding: var(--quickerbill-theme-variable-space-10) 0;
}

.quickerbill-theme-section-lg {
    padding: var(--quickerbill-theme-variable-space-20) 0;
}

/** Grid System */
.quickerbill-theme-grid {
    display: grid;
    gap: var(--quickerbill-theme-variable-space-6);
}

.quickerbill-theme-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.quickerbill-theme-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.quickerbill-theme-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/** Flex Utilities */
.quickerbill-theme-flex {
    display: flex;
}

.quickerbill-theme-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quickerbill-theme-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quickerbill-theme-flex-column {
    display: flex;
    flex-direction: column;
}

.quickerbill-theme-flex-wrap {
    flex-wrap: wrap;
}

/** Gap Utilities */
.quickerbill-theme-gap-1 {
    gap: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-gap-2 {
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-gap-3 {
    gap: var(--quickerbill-theme-variable-space-3);
}

.quickerbill-theme-gap-4 {
    gap: var(--quickerbill-theme-variable-space-4);
}

.quickerbill-theme-gap-6 {
    gap: var(--quickerbill-theme-variable-space-6);
}

.quickerbill-theme-gap-8 {
    gap: var(--quickerbill-theme-variable-space-8);
}
/**
 * QuickerBill Theme Header Styles
 * Header-specific styles only (uses theme core/components for buttons, badges, etc.)
 * Using naming convention: quickerbill-theme-header-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   ADMIN IMPERSONATION BAR
   ======================================== */

.quickerbill-theme-header-imp-bar {
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    box-shadow: var(--quickerbill-theme-variable-shadow-md-alt);
    position: sticky;
    top: 0;
    z-index: var(--quickerbill-theme-variable-z-impersonation);
}

.quickerbill-theme-header-imp-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.quickerbill-theme-header-imp-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quickerbill-theme-header-imp-info .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-header-imp-text {
    font-size: 14px;
    font-weight: 500;
}

.quickerbill-theme-header-imp-text strong {
    font-weight: 700;
}

.quickerbill-theme-header-imp-switch-back {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: var(--quickerbill-theme-variable-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    border-radius: var(--quickerbill-theme-variable-radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-header-imp-switch-back:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.quickerbill-theme-header-imp-switch-back:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.quickerbill-theme-header-imp-switch-back .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ========================================
   MAIN HEADER
   ======================================== */

.quickerbill-theme-header {
    background: var(--quickerbill-theme-variable-white);
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-200);
    box-shadow: var(--quickerbill-theme-variable-shadow-sm-alt);
    z-index: var(--quickerbill-theme-variable-z-header);
}

.quickerbill-theme-header-sticky {
    position: sticky;
    top: 0;
}

.quickerbill-theme-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--quickerbill-theme-variable-space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

/* ========================================
   LOGO
   ======================================== */

.quickerbill-theme-header-logo {
    flex-shrink: 0;
}

.quickerbill-theme-header-logo h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-secondary);
    margin: 0;
}

.quickerbill-theme-header-logo img {
    display: block;
    max-height: 40px;
    height: 40px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    vertical-align: middle;
}

.quickerbill-theme-header-logo a {
    text-decoration: none;
    color: inherit;
}

/* ========================================
   DESKTOP NAVIGATION
   ======================================== */

.quickerbill-theme-header-nav-desktop {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.quickerbill-theme-header-nav-menu-desktop {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.quickerbill-theme-header-nav-menu-desktop .menu-item {
    position: relative;
}

.quickerbill-theme-header-nav-link-desktop,
.quickerbill-theme-header-nav-menu-desktop .menu-item > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--quickerbill-theme-variable-secondary);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    transition: all var(--quickerbill-theme-variable-transition-fast);
    cursor: pointer;
    white-space: nowrap;
}

.quickerbill-theme-header-nav-menu-desktop .menu-item > a:hover {
    background: var(--quickerbill-theme-variable-gray-50);
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-header-nav-arrow {
    font-size: 16px;
    width: 16px;
    height: 16px;
    transition: transform var(--quickerbill-theme-variable-transition-fast);
    margin-left: 4px;
}

.quickerbill-theme-header-nav-menu-desktop .menu-item-has-children.quickerbill-theme-header-dropdown-open > a .quickerbill-theme-header-nav-arrow {
    transform: rotate(180deg);
}

/* Desktop Dropdown */
.quickerbill-theme-header-nav-menu-desktop .menu-item-has-children .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--quickerbill-theme-variable-white);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    box-shadow: var(--quickerbill-theme-variable-shadow-md);
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    z-index: var(--quickerbill-theme-variable-z-dropdown);
    padding: 8px 0;
    list-style: none;
    margin: 0;
}

.quickerbill-theme-header-nav-menu-desktop .menu-item-has-children.quickerbill-theme-header-dropdown-open .sub-menu {
    display: block;
    animation: quickerbill-theme-animation-slide-down var(--quickerbill-theme-variable-transition-fast) ease;
}

.quickerbill-theme-header-nav-menu-desktop .sub-menu .menu-item > a {
    display: block;
    padding: 10px 16px;
    color: var(--quickerbill-theme-variable-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-header-nav-menu-desktop .sub-menu .menu-item > a:hover {
    background: var(--quickerbill-theme-variable-gray-50);
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-header-nav-menu-desktop .sub-menu .menu-item.current-menu-item > a {
    background: var(--quickerbill-theme-variable-info-bg-light);
    color: var(--quickerbill-theme-variable-primary);
    font-weight: 600;
}

/* ========================================
   HEADER RIGHT SECTION
   ======================================== */

.quickerbill-theme-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    margin-left: 24px;
}

/* ========================================
   CURRENCY DROPDOWN
   ======================================== */

.quickerbill-theme-header-currency-dropdown {
    position: relative;
}

.quickerbill-theme-header-currency-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    color: var(--quickerbill-theme-variable-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-header-currency-toggle:hover {
    background: var(--quickerbill-theme-variable-gray-50);
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-header-currency-arrow {
    font-size: 16px;
    width: 16px;
    height: 16px;
    transition: transform var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-header-currency-dropdown.quickerbill-theme-header-dropdown-open .quickerbill-theme-header-currency-arrow {
    transform: rotate(180deg);
}

.quickerbill-theme-header-currency-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--quickerbill-theme-variable-white);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    box-shadow: var(--quickerbill-theme-variable-shadow-md);
    min-width: 180px;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    z-index: var(--quickerbill-theme-variable-z-dropdown);
    padding: 8px 0;
}

.quickerbill-theme-header-currency-dropdown.quickerbill-theme-header-dropdown-open .quickerbill-theme-header-currency-menu {
    display: block;
    animation: quickerbill-theme-animation-slide-down var(--quickerbill-theme-variable-transition-fast) ease;
}

.quickerbill-theme-header-currency-item {
    display: block;
    padding: 10px 16px;
    color: var(--quickerbill-theme-variable-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-header-currency-item:hover {
    background: var(--quickerbill-theme-variable-gray-50);
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-header-currency-item.active {
    background: var(--quickerbill-theme-variable-info-bg-light);
    color: var(--quickerbill-theme-variable-primary);
    font-weight: 600;
}

/* ========================================
   CART BUTTON
   ======================================== */

.quickerbill-theme-header-cart-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--quickerbill-theme-variable-gray-100);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    text-decoration: none;
    color: var(--quickerbill-theme-variable-secondary);
    font-weight: 500;
    position: relative;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-header-cart-button:hover {
    background: var(--quickerbill-theme-variable-gray-200);
    color: var(--quickerbill-theme-variable-secondary);
}

.quickerbill-theme-header-cart-button .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.quickerbill-theme-header-cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--quickerbill-theme-variable-error);
    color: var(--quickerbill-theme-variable-white);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* ========================================
   USER MENU
   ======================================== */

.quickerbill-theme-header-user-menu {
    position: relative;
}

.quickerbill-theme-header-user-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--quickerbill-theme-variable-gray-50);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    cursor: pointer;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    font-size: 14px;
}

.quickerbill-theme-header-user-toggle:hover {
    background: var(--quickerbill-theme-variable-gray-200);
    border-color: var(--quickerbill-theme-variable-gray-300);
}

.quickerbill-theme-header-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--quickerbill-theme-variable-radius-full);
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.quickerbill-theme-header-user-name {
    font-weight: 500;
    color: var(--quickerbill-theme-variable-secondary);
}

.quickerbill-theme-header-user-arrow {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--quickerbill-theme-variable-gray-500);
    transition: transform var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-header-user-menu.quickerbill-theme-header-dropdown-open .quickerbill-theme-header-user-arrow {
    transform: rotate(180deg);
}

.quickerbill-theme-header-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--quickerbill-theme-variable-white);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    box-shadow: var(--quickerbill-theme-variable-shadow-md);
    min-width: 200px;
    display: none;
    z-index: var(--quickerbill-theme-variable-z-dropdown);
}

.quickerbill-theme-header-user-menu.quickerbill-theme-header-dropdown-open .quickerbill-theme-header-user-dropdown {
    display: block;
    animation: quickerbill-theme-animation-slide-down var(--quickerbill-theme-variable-transition-fast) ease;
}

.quickerbill-theme-header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--quickerbill-theme-variable-secondary);
    text-decoration: none;
    transition: background var(--quickerbill-theme-variable-transition-fast);
    font-size: 14px;
    cursor: pointer;
}

.quickerbill-theme-header-dropdown-item:first-child {
    border-radius: var(--quickerbill-theme-variable-radius-lg) var(--quickerbill-theme-variable-radius-lg) 0 0;
}

.quickerbill-theme-header-dropdown-item:last-child {
    border-radius: 0 0 var(--quickerbill-theme-variable-radius-lg) var(--quickerbill-theme-variable-radius-lg);
}

.quickerbill-theme-header-dropdown-item:hover {
    background: var(--quickerbill-theme-variable-gray-50);
    color: var(--quickerbill-theme-variable-secondary);
}

.quickerbill-theme-header-dropdown-item .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--quickerbill-theme-variable-gray-500);
}

.quickerbill-theme-header-dropdown-divider {
    height: 1px;
    background: var(--quickerbill-theme-variable-gray-200);
    margin: 4px 0;
}

/** Switch Back Link */
.quickerbill-theme-header-switch-back-link {
    background: var(--quickerbill-theme-variable-info-bg-cyan-light);
    color: var(--quickerbill-theme-variable-info-cyan);
    font-weight: 600;
}

.quickerbill-theme-header-switch-back-link:hover {
    background: var(--quickerbill-theme-variable-info-bg-cyan);
    color: var(--quickerbill-theme-variable-info-cyan-dark);
}

.quickerbill-theme-header-switch-back-link .dashicons {
    color: var(--quickerbill-theme-variable-info-cyan);
}

/* ========================================
   MOBILE MENU TOGGLE
   ======================================== */

.quickerbill-theme-header-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--quickerbill-theme-variable-gray-100);
    border: none;
    color: var(--quickerbill-theme-variable-secondary);
    cursor: pointer;
    margin-right: 12px;
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    transition: all var(--quickerbill-theme-variable-transition-fast);
    padding: 0;
    flex-shrink: 0;
}

.quickerbill-theme-header-mobile-toggle:hover {
    background: var(--quickerbill-theme-variable-gray-200);
}

.quickerbill-theme-header-mobile-toggle .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* ========================================
   MOBILE SIDEBAR
   ======================================== */

.quickerbill-theme-header-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--quickerbill-theme-variable-z-overlay);
    opacity: 0;
    transition: opacity var(--quickerbill-theme-variable-transition-normal);
}

.quickerbill-theme-header-sidebar-overlay.quickerbill-theme-header-show {
    display: block;
    opacity: 1;
}

.quickerbill-theme-header-sidebar-mobile {
    position: fixed;
    top: 70px;
    left: -280px;
    bottom: 0;
    width: 280px;
    background: var(--quickerbill-theme-variable-white);
    z-index: var(--quickerbill-theme-variable-z-sidebar);
    transition: left var(--quickerbill-theme-variable-transition-normal);
    overflow-y: auto;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    padding: 24px 0;
    display: none;
}

.quickerbill-theme-header-sidebar-mobile.quickerbill-theme-header-show {
    left: 0;
}

/* ========================================
   MOBILE NAVIGATION
   ======================================== */

.quickerbill-theme-header-nav-menu-mobile {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quickerbill-theme-header-nav-menu-mobile .menu-item {
    margin-bottom: 4px;
}

.quickerbill-theme-header-nav-menu-mobile .menu-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    color: var(--quickerbill-theme-variable-gray-500);
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    font-weight: 500;
}

.quickerbill-theme-header-nav-menu-mobile .menu-item > a:hover {
    background: var(--quickerbill-theme-variable-gray-50);
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-header-nav-menu-mobile .menu-item.current-menu-item > a {
    color: var(--quickerbill-theme-variable-primary);
    font-weight: 600;
}

/* Mobile Dropdown Toggle */
.quickerbill-theme-header-dropdown-toggle {
    transition: transform var(--quickerbill-theme-variable-transition-normal);
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.quickerbill-theme-header-nav-menu-mobile .menu-item-has-children.quickerbill-theme-header-dropdown-open > a .quickerbill-theme-header-dropdown-toggle {
    transform: rotate(180deg);
}

/* Mobile Sub-menu */
.quickerbill-theme-header-nav-menu-mobile .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--quickerbill-theme-variable-transition-normal);
    background: var(--quickerbill-theme-variable-gray-50);
}

.quickerbill-theme-header-nav-menu-mobile .menu-item-has-children.quickerbill-theme-header-dropdown-open .sub-menu {
    max-height: 500px;
}

.quickerbill-theme-header-nav-menu-mobile .sub-menu .menu-item > a {
    padding: 10px 24px 10px 48px;
    font-size: 14px;
}

/* Mobile Currency */
.quickerbill-theme-header-currency-mobile .sub-menu .menu-item > a.active {
    color: var(--quickerbill-theme-variable-primary);
    font-weight: 600;
}
/**
 * QuickerBill Theme Footer Styles
 * Footer-specific styles only (uses theme core/components for base styles)
 * Using naming convention: quickerbill-theme-footer-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   FOOTER CONTAINER
   ======================================== */

.quickerbill-theme-footer {
    background: var(--quickerbill-theme-variable-gray-50);
    padding: 60px 0 30px;
    border-top: 1px solid var(--quickerbill-theme-variable-gray-200);
}

/* ========================================
   FOOTER MAIN SECTION
   ======================================== */

.quickerbill-theme-footer-main {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 60px;
    margin-bottom: 40px;
}

/* ========================================
   FOOTER BRAND SECTION
   ======================================== */

.quickerbill-theme-footer-brand {
    display: flex;
    flex-direction: column;
}

.quickerbill-theme-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-secondary);
    margin-bottom: 16px;
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-footer-logo:hover {
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-footer-logo img {
    display: block;
    max-height: 40px;
    height: 40px;
    width: auto;
    object-fit: contain;
}

.quickerbill-theme-footer-tagline {
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-500);
    margin: 0 0 12px 0;
}

/* ========================================
   SOCIAL LINKS
   ======================================== */

.quickerbill-theme-footer-social-links {
    display: flex;
    gap: 12px;
}

.quickerbill-theme-footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--quickerbill-theme-variable-radius-full);
    background: var(--quickerbill-theme-variable-white);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    color: var(--quickerbill-theme-variable-gray-500);
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-footer-social-link:hover {
    background: var(--quickerbill-theme-variable-primary);
    border-color: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    transform: translateY(-2px);
}

.quickerbill-theme-footer-social-link .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* ========================================
   FOOTER LINKS SECTION (3 Columns)
   ======================================== */

.quickerbill-theme-footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.quickerbill-theme-footer-column {
    display: flex;
    flex-direction: column;
}

/* ========================================
   FOOTER MENUS (WordPress Menus)
   ======================================== */

.quickerbill-theme-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Parent Menu Items (Act as Column Headers) */
.quickerbill-theme-footer-menu > li {
    margin: 0;
}

.quickerbill-theme-footer-menu > li > a {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-footer-menu > li > a:hover {
    color: var(--quickerbill-theme-variable-primary);
}

/* Sub-menu Items (Nested Links) */
.quickerbill-theme-footer-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quickerbill-theme-footer-menu .sub-menu li {
    margin: 0;
}

.quickerbill-theme-footer-menu .sub-menu a {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--quickerbill-theme-variable-gray-500);
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-footer-menu .sub-menu a:hover {
    color: var(--quickerbill-theme-variable-primary);
}

/* ========================================
   FOOTER BOTTOM SECTION
   ======================================== */

/* Footer Bottom Wrapper (Outside Container - Border Extends Full Width) */
.quickerbill-theme-footer-bottom-wrapper {
    border-top: 1px solid var(--quickerbill-theme-variable-gray-200);
    padding-top: 30px;
}

.quickerbill-theme-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quickerbill-theme-footer-copyright {
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-500);
    margin: 0;
}

/* ========================================
   FOOTER LEGAL LINKS
   ======================================== */

.quickerbill-theme-footer-legal {
    display: flex;
    gap: 24px;
}

.quickerbill-theme-footer-legal a {
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-500);
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-footer-legal a:hover {
    color: var(--quickerbill-theme-variable-primary);
}
/**
 * QuickerBill Theme Utilities
 * 
 * @package QuickerBill/Theme
 */

/** Spinners */
.quickerbill-theme-spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-top-color: var(--quickerbill-theme-variable-primary);
    border-radius: var(--quickerbill-theme-variable-radius-full);
    animation: quickerbill-theme-animation-spin var(--quickerbill-theme-variable-transition-slow) linear infinite;
}

.quickerbill-theme-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--quickerbill-theme-variable-gray-200);
    border-top-color: var(--quickerbill-theme-variable-primary);
    border-radius: var(--quickerbill-theme-variable-radius-full);
    animation: quickerbill-theme-animation-spin var(--quickerbill-theme-variable-transition-slower) linear infinite;
}

.quickerbill-theme-spinner-large {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--quickerbill-theme-variable-gray-200);
    border-top-color: var(--quickerbill-theme-variable-primary);
    border-radius: var(--quickerbill-theme-variable-radius-full);
    animation: quickerbill-theme-animation-spin var(--quickerbill-theme-variable-transition-slower) linear infinite;
}

/** Show/Hide Utility */
.quickerbill-theme-show {
    display: block;
}

.quickerbill-theme-hide {
    display: none;
}

/** Visibility */
.quickerbill-theme-hidden {
    display: none !important;
}

.quickerbill-theme-visible {
    display: block !important;
}

/** Text Alignment */
.quickerbill-theme-text-left {
    text-align: left;
}

.quickerbill-theme-text-center {
    text-align: center;
}

.quickerbill-theme-text-right {
    text-align: right;
}

/** Spacing Utilities - Margin */
.quickerbill-theme-m-0 {
    margin: 0;
}

.quickerbill-theme-mt-1 {
    margin-top: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-mt-2 {
    margin-top: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-mt-3 {
    margin-top: var(--quickerbill-theme-variable-space-3);
}

.quickerbill-theme-mt-4 {
    margin-top: var(--quickerbill-theme-variable-space-4);
}

.quickerbill-theme-mt-6 {
    margin-top: var(--quickerbill-theme-variable-space-6);
}

.quickerbill-theme-mt-8 {
    margin-top: var(--quickerbill-theme-variable-space-8);
}

.quickerbill-theme-mb-1 {
    margin-bottom: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-mb-2 {
    margin-bottom: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-mb-3 {
    margin-bottom: var(--quickerbill-theme-variable-space-3);
}

.quickerbill-theme-mb-4 {
    margin-bottom: var(--quickerbill-theme-variable-space-4);
}

.quickerbill-theme-mb-6 {
    margin-bottom: var(--quickerbill-theme-variable-space-6);
}

.quickerbill-theme-mb-8 {
    margin-bottom: var(--quickerbill-theme-variable-space-8);
}

/** Spacing Utilities - Padding */
.quickerbill-theme-p-0 {
    padding: 0;
}

.quickerbill-theme-pt-1 {
    padding-top: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-pt-2 {
    padding-top: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-pt-3 {
    padding-top: var(--quickerbill-theme-variable-space-3);
}

.quickerbill-theme-pt-4 {
    padding-top: var(--quickerbill-theme-variable-space-4);
}

.quickerbill-theme-pt-6 {
    padding-top: var(--quickerbill-theme-variable-space-6);
}

.quickerbill-theme-pb-1 {
    padding-bottom: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-pb-2 {
    padding-bottom: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-pb-3 {
    padding-bottom: var(--quickerbill-theme-variable-space-3);
}

.quickerbill-theme-pb-4 {
    padding-bottom: var(--quickerbill-theme-variable-space-4);
}

.quickerbill-theme-pb-6 {
    padding-bottom: var(--quickerbill-theme-variable-space-6);
}

/** Width Utilities */
.quickerbill-theme-w-full {
    width: 100%;
}

.quickerbill-theme-w-auto {
    width: auto;
}

/** Color Utilities */
.quickerbill-theme-text-primary {
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-text-secondary {
    color: var(--quickerbill-theme-variable-secondary);
}

.quickerbill-theme-text-success {
    color: var(--quickerbill-theme-variable-success);
}

.quickerbill-theme-text-error {
    color: var(--quickerbill-theme-variable-error);
}

.quickerbill-theme-text-warning {
    color: var(--quickerbill-theme-variable-warning);
}

.quickerbill-theme-text-muted {
    color: var(--quickerbill-theme-variable-gray-500);
}

/** Background Utilities */
.quickerbill-theme-bg-white {
    background-color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-bg-gray-50 {
    background-color: var(--quickerbill-theme-variable-gray-50);
}

.quickerbill-theme-bg-gray-100 {
    background-color: var(--quickerbill-theme-variable-gray-100);
}

.quickerbill-theme-bg-primary {
    background-color: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-bg-success {
    background-color: var(--quickerbill-theme-variable-success-bg);
    color: var(--quickerbill-theme-variable-success-text);
}

/** Border Utilities */
.quickerbill-theme-border {
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
}

.quickerbill-theme-border-top {
    border-top: 1px solid var(--quickerbill-theme-variable-gray-200);
}

.quickerbill-theme-border-bottom {
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-200);
}

.quickerbill-theme-border-none {
    border: none;
}

/** Border Radius Utilities */
.quickerbill-theme-rounded-sm {
    border-radius: var(--quickerbill-theme-variable-radius-sm);
}

.quickerbill-theme-rounded-md {
    border-radius: var(--quickerbill-theme-variable-radius-md);
}

.quickerbill-theme-rounded-lg {
    border-radius: var(--quickerbill-theme-variable-radius-lg);
}

.quickerbill-theme-rounded-xl {
    border-radius: var(--quickerbill-theme-variable-radius-xl);
}

.quickerbill-theme-rounded-full {
    border-radius: var(--quickerbill-theme-variable-radius-full);
}

/** Shadow Utilities */
.quickerbill-theme-shadow-sm {
    box-shadow: var(--quickerbill-theme-variable-shadow-sm);
}

.quickerbill-theme-shadow-md {
    box-shadow: var(--quickerbill-theme-variable-shadow-md);
}

.quickerbill-theme-shadow-lg {
    box-shadow: var(--quickerbill-theme-variable-shadow-lg);
}

.quickerbill-theme-shadow-none {
    box-shadow: none;
}

/** Overflow Utilities */
.quickerbill-theme-overflow-hidden {
    overflow: hidden;
}

.quickerbill-theme-overflow-auto {
    overflow: auto;
}

/** Position Utilities */
.quickerbill-theme-relative {
    position: relative;
}

.quickerbill-theme-absolute {
    position: absolute;
}

.quickerbill-theme-fixed {
    position: fixed;
}

.quickerbill-theme-sticky {
    position: sticky;
}

/** Cursor Utilities */
.quickerbill-theme-cursor-pointer {
    cursor: pointer;
}

.quickerbill-theme-cursor-not-allowed {
    cursor: not-allowed;
}

/** Transition Utilities */
.quickerbill-theme-transition {
    transition: all var(--quickerbill-theme-variable-transition-normal);
}

.quickerbill-theme-transition-fast {
    transition: all var(--quickerbill-theme-variable-transition-fast);
}
/**
 * QuickerBill Theme Animations
 * 
 * @package QuickerBill/Theme
 */

/** Spin Animation (for spinners/loading) */
@keyframes quickerbill-theme-animation-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/** Slide Down Animation (for dropdowns/modals) */
@keyframes quickerbill-theme-animation-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/** Slide Up Animation */
@keyframes quickerbill-theme-animation-slide-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/** Fade In Animation */
@keyframes quickerbill-theme-animation-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/** Fade Out Animation */
@keyframes quickerbill-theme-animation-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/** Pulse Animation (for promotion badges/timers) */
@keyframes quickerbill-theme-animation-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/** Promotion Pulse Animation (for SALE badges) */
@keyframes quickerbill-theme-animation-promotion-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

/** Shake Animation (for errors) */
@keyframes quickerbill-theme-animation-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/** Bounce Animation */
@keyframes quickerbill-theme-animation-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/** Scale In Animation */
@keyframes quickerbill-theme-animation-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/** Scale Out Animation */
@keyframes quickerbill-theme-animation-scale-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Pulse animation */
@keyframes quickerbill-theme-animation-play-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/** Spinner Classes */
.quickerbill-theme-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--quickerbill-theme-variable-gray-200);
    border-top-color: var(--quickerbill-theme-variable-primary);
    border-radius: var(--quickerbill-theme-variable-radius-full);
    animation: quickerbill-theme-animation-spin var(--quickerbill-theme-variable-transition-slower) linear infinite;
}

.quickerbill-theme-spinner-small {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.quickerbill-theme-spinner-large {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

.quickerbill-theme-spinner-white {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: var(--quickerbill-theme-variable-white);
}
/**
 * QuickerBill Theme Buttons
 * 
 * @package QuickerBill/Theme
 */

/** Base Button */
.quickerbill-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--quickerbill-theme-variable-space-2);
    padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-6);
    border: none;
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    white-space: nowrap;
}

.quickerbill-theme-btn .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/** Primary Button */
.quickerbill-theme-btn-primary {
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-btn-primary:hover {
    background: var(--quickerbill-theme-variable-primary-hover);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-btn-primary:active {
    transform: translateY(0);
}

/** Secondary Button */
.quickerbill-theme-btn-secondary {
    background: var(--quickerbill-theme-variable-gray-100);
    color: var(--quickerbill-theme-variable-secondary);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
}

.quickerbill-theme-btn-secondary:hover {
    background: var(--quickerbill-theme-variable-gray-200);
    border-color: var(--quickerbill-theme-variable-gray-300);
}

/** Outline Button */
.quickerbill-theme-btn-outline {
    background: transparent;
    color: var(--quickerbill-theme-variable-primary);
    border: 2px solid var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-btn-outline:hover {
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
}

/** Success Button */
.quickerbill-theme-btn-success {
    background: var(--quickerbill-theme-variable-success);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-btn-success:hover {
    background: var(--quickerbill-theme-variable-success-hover);
}

/** Danger Button */
.quickerbill-theme-btn-danger {
    background: var(--quickerbill-theme-variable-error);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-btn-danger:hover {
    background: var(--quickerbill-theme-variable-error-hover);
}

/** Warning Button */
.quickerbill-theme-btn-warning {
    background: var(--quickerbill-theme-variable-warning);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-btn-warning:hover {
    background: var(--quickerbill-theme-variable-warning-hover);
}

/** Info Button */
.quickerbill-theme-btn-info {
    background: var(--quickerbill-theme-variable-info);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-btn-info:hover {
    background: var(--quickerbill-theme-variable-info-hover);
}

/** Ghost Button */
.quickerbill-theme-btn-ghost {
    background: transparent;
    color: var(--quickerbill-theme-variable-secondary);
}

.quickerbill-theme-btn-ghost:hover {
    background: var(--quickerbill-theme-variable-gray-50);
}

/** Link Button */
.quickerbill-theme-btn-link {
    background: transparent;
    color: var(--quickerbill-theme-variable-primary);
    padding: var(--quickerbill-theme-variable-space-2) var(--quickerbill-theme-variable-space-3);
}

.quickerbill-theme-btn-link:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
    text-decoration: underline;
}

/** Button Sizes */
.quickerbill-theme-btn-small {
    padding: var(--quickerbill-theme-variable-space-2) var(--quickerbill-theme-variable-space-4);
    font-size: 13px;
}

.quickerbill-theme-btn-small .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.quickerbill-theme-btn-medium {
    padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-6);
    font-size: 14px;
}

.quickerbill-theme-btn-large {
    padding: var(--quickerbill-theme-variable-space-4) var(--quickerbill-theme-variable-space-8);
    font-size: 16px;
}

.quickerbill-theme-btn-large .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

/** Block Button */
.quickerbill-theme-btn-block {
    width: 100%;
    display: flex;
}

/** Button States */
.quickerbill-theme-btn:disabled,
.quickerbill-theme-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.quickerbill-theme-btn-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.quickerbill-theme-btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--quickerbill-theme-variable-white);
    border-radius: var(--quickerbill-theme-variable-radius-full);
    animation: quickerbill-theme-animation-spin 0.6s linear infinite;
}

.quickerbill-theme-btn-secondary.quickerbill-theme-btn-loading::after {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: var(--quickerbill-theme-variable-secondary);
}

/** Icon-Only Button */
.quickerbill-theme-btn-icon {
    padding: var(--quickerbill-theme-variable-space-3);
    width: 40px;
    height: 40px;
}

.quickerbill-theme-btn-icon.quickerbill-theme-btn-small {
    width: 32px;
    height: 32px;
    padding: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-btn-icon.quickerbill-theme-btn-large {
    width: 48px;
    height: 48px;
    padding: var(--quickerbill-theme-variable-space-4);
}

/** Button Group */
.quickerbill-theme-btn-group {
    display: inline-flex;
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-btn-group .quickerbill-theme-btn {
    margin: 0;
}
/**
 * QuickerBill Theme Forms
 * 
 * @package QuickerBill/Theme
 */

/** Form Group */
.quickerbill-theme-form-group {
    margin-bottom: var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-form-group:last-child {
    margin-bottom: 0;
}

/** Form Label */
.quickerbill-theme-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-700);
    margin-bottom: var(--quickerbill-theme-variable-space-2);
}

/** Required Indicator */
.quickerbill-theme-form-required {
    color: var(--quickerbill-theme-variable-error);
    margin-left: 2px;
}

/** Form Hint */
.quickerbill-theme-form-hint {
    font-size: 13px;
    color: var(--quickerbill-theme-variable-gray-500);
    margin-top: var(--quickerbill-theme-variable-space-1-5);
    line-height: 1.5;
}

/** Text Input */
.quickerbill-theme-form-input {
    width: 100%;
    padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-3-5);
    border: 1px solid var(--quickerbill-theme-variable-gray-300);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-800);
    background: var(--quickerbill-theme-variable-white);
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-form-input:focus {
    outline: none;
    border-color: var(--quickerbill-theme-variable-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.quickerbill-theme-form-input::placeholder {
    color: var(--quickerbill-theme-variable-gray-400);
}

.quickerbill-theme-form-input:disabled {
    background: var(--quickerbill-theme-variable-gray-50);
    color: var(--quickerbill-theme-variable-gray-500);
    cursor: not-allowed;
}

/** Input Sizes */
.quickerbill-theme-form-input-small {
    padding: var(--quickerbill-theme-variable-space-2) var(--quickerbill-theme-variable-space-3);
    font-size: 13px;
}

.quickerbill-theme-form-input-large {
    padding: var(--quickerbill-theme-variable-space-4) var(--quickerbill-theme-variable-space-5);
    font-size: 16px;
}

/** Textarea */
.quickerbill-theme-form-textarea {
    width: 100%;
    padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-3-5);
    border: 1px solid var(--quickerbill-theme-variable-gray-300);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    font-size: 14px;
    font-family: inherit;
    color: var(--quickerbill-theme-variable-gray-800);
    background: var(--quickerbill-theme-variable-white);
    resize: vertical;
    min-height: 100px;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-form-textarea:focus {
    outline: none;
    border-color: var(--quickerbill-theme-variable-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/** Select */
.quickerbill-theme-form-select {
    width: 100%;
    padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-3-5);
    border: 1px solid var(--quickerbill-theme-variable-gray-300);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-800);
    background: var(--quickerbill-theme-variable-white);
    cursor: pointer;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23475569" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 40px;
}

.quickerbill-theme-form-select:focus {
    outline: none;
    border-color: var(--quickerbill-theme-variable-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/** Checkbox */
.quickerbill-theme-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--quickerbill-theme-variable-space-2-5);
}

.quickerbill-theme-form-checkbox input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.quickerbill-theme-form-checkbox label {
    cursor: pointer;
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-700);
    font-weight: 500;
    margin: 0;
}

/** Radio */
.quickerbill-theme-form-radio {
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2-5);
}

.quickerbill-theme-form-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.quickerbill-theme-form-radio label {
    cursor: pointer;
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-700);
    font-weight: 500;
    margin: 0;
}

/** Radio/Checkbox Group */
.quickerbill-theme-form-radio-group,
.quickerbill-theme-form-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-3);
}

/** Input Group (with icon/button) */
.quickerbill-theme-form-input-group {
    display: flex;
    gap: var(--quickerbill-theme-variable-space-3);
}

.quickerbill-theme-form-input-group .quickerbill-theme-form-input {
    flex: 1;
}

.quickerbill-theme-form-input-group .quickerbill-theme-btn {
    flex-shrink: 0;
}

/** Form Validation States */
.quickerbill-theme-form-input.error,
.quickerbill-theme-form-select.error,
.quickerbill-theme-form-textarea.error {
    border-color: var(--quickerbill-theme-variable-error);
}

.quickerbill-theme-form-input.error:focus,
.quickerbill-theme-form-select.error:focus,
.quickerbill-theme-form-textarea.error:focus {
    box-shadow: 0 0 0 3px var(--quickerbill-theme-variable-error-bg-light);
}

.quickerbill-theme-form-input.success,
.quickerbill-theme-form-select.success,
.quickerbill-theme-form-textarea.success {
    border-color: var(--quickerbill-theme-variable-success);
}

.quickerbill-theme-form-input.success:focus,
.quickerbill-theme-form-select.success:focus,
.quickerbill-theme-form-textarea.success:focus {
    box-shadow: 0 0 0 3px var(--quickerbill-theme-variable-success-bg-light);
}

/** Form Error Message */
.quickerbill-theme-form-error-message {
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
    margin-top: var(--quickerbill-theme-variable-space-2);
    font-size: 13px;
    color: var(--quickerbill-theme-variable-error);
}

.quickerbill-theme-form-error-message .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/** Form Success Message */
.quickerbill-theme-form-success-message {
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
    margin-top: var(--quickerbill-theme-variable-space-2);
    font-size: 13px;
    color: var(--quickerbill-theme-variable-success);
}

.quickerbill-theme-form-success-message .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/** Form Row (2 columns) */
.quickerbill-theme-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-form-row .quickerbill-theme-form-group {
    margin-bottom: 0;
}
/**
 * QuickerBill Theme Cards
 * 
 * @package QuickerBill/Theme
 */

/** Base Card */
.quickerbill-theme-card {
    background: var(--quickerbill-theme-variable-white);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    padding: var(--quickerbill-theme-variable-space-6);
    box-shadow: var(--quickerbill-theme-variable-shadow-sm);
    transition: all var(--quickerbill-theme-variable-transition-normal);
}

.quickerbill-theme-card:hover {
    box-shadow: var(--quickerbill-theme-variable-shadow-md);
}

/** Card Variants */
.quickerbill-theme-card-flat {
    box-shadow: none;
}

.quickerbill-theme-card-elevated {
    box-shadow: var(--quickerbill-theme-variable-shadow-lg);
}

.quickerbill-theme-card-bordered {
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
}

/** Card Sizes */
.quickerbill-theme-card-small {
    padding: var(--quickerbill-theme-variable-space-4);
}

.quickerbill-theme-card-medium {
    padding: var(--quickerbill-theme-variable-space-6);
}

.quickerbill-theme-card-large {
    padding: var(--quickerbill-theme-variable-space-8);
}

/** Card Hover Effects */
.quickerbill-theme-card-hoverable {
    cursor: pointer;
}

.quickerbill-theme-card-hoverable:hover {
    transform: translateY(-4px);
    box-shadow: var(--quickerbill-theme-variable-shadow-lg);
    border-color: var(--quickerbill-theme-variable-primary);
}

/** Card Header */
.quickerbill-theme-card-header {
    padding-bottom: var(--quickerbill-theme-variable-space-4);
    margin-bottom: var(--quickerbill-theme-variable-space-4);
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-200);
}

.quickerbill-theme-card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--quickerbill-theme-variable-gray-800);
}

.quickerbill-theme-card-subtitle {
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-500);
    margin: var(--quickerbill-theme-variable-space-1) 0 0 0;
}

/** Card Body */
.quickerbill-theme-card-body {
    padding: 0;
}

/** Card Footer */
.quickerbill-theme-card-footer {
    padding-top: var(--quickerbill-theme-variable-space-4);
    margin-top: var(--quickerbill-theme-variable-space-4);
    border-top: 1px solid var(--quickerbill-theme-variable-gray-200);
}

/** Clickable Card */
.quickerbill-theme-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.quickerbill-theme-card-link:hover .quickerbill-theme-card {
    transform: translateY(-4px);
    border-color: var(--quickerbill-theme-variable-primary);
}

/** Icon Card */
.quickerbill-theme-card-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--quickerbill-theme-variable-space-4);
}

.quickerbill-theme-card-icon-wrapper {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--quickerbill-theme-variable-gray-50);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-card-icon-wrapper .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}
/**
 * QuickerBill Theme Badges
 * 
 * @package QuickerBill/Theme
 */

/** Base Badge */
.quickerbill-theme-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1);
    padding: var(--quickerbill-theme-variable-space-1) var(--quickerbill-theme-variable-space-2-5);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--quickerbill-theme-variable-radius-md);
    line-height: 1;
}

/** Badge Variants */
.quickerbill-theme-badge-primary {
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-badge-secondary {
    background: var(--quickerbill-theme-variable-gray-100);
    color: var(--quickerbill-theme-variable-gray-700);
}

.quickerbill-theme-badge-success {
    background: var(--quickerbill-theme-variable-success-bg);
    color: var(--quickerbill-theme-variable-success-text);
}

.quickerbill-theme-badge-error {
    background: var(--quickerbill-theme-variable-error-bg);
    color: var(--quickerbill-theme-variable-error-text);
}

.quickerbill-theme-badge-warning {
    background: var(--quickerbill-theme-variable-warning-bg);
    color: var(--quickerbill-theme-variable-warning-text);
}

.quickerbill-theme-badge-info {
    background: var(--quickerbill-theme-variable-info-bg);
    color: var(--quickerbill-theme-variable-info-dark);
}

/** Widget Badge (for hero sections and widget headers) */
.quickerbill-theme-badge-widget {
    display: inline-block;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-primary);
    background: rgba(0, 102, 255, 0.1);
    border-radius: 100px;
    margin-bottom: 16px;
}

/** Badge Sizes */
.quickerbill-theme-badge-small {
    padding: 2px var(--quickerbill-theme-variable-space-2);
    font-size: 11px;
}

.quickerbill-theme-badge-large {
    padding: var(--quickerbill-theme-variable-space-1-5) var(--quickerbill-theme-variable-space-3);
    font-size: 13px;
}

/** Badge with Icon */
.quickerbill-theme-badge .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

/** Promotion Badge (SALE) */
.quickerbill-theme-badge-promotion {
    background: var(--quickerbill-theme-variable-success);
    color: var(--quickerbill-theme-variable-white);
    font-size: 11px;
    font-weight: 700;
    padding: var(--quickerbill-theme-variable-space-1) var(--quickerbill-theme-variable-space-2-5);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    letter-spacing: 0.5px;
    box-shadow: var(--quickerbill-theme-variable-shadow-success);
    animation: quickerbill-theme-animation-promotion-pulse var(--quickerbill-theme-variable-transition-pulse) infinite;
}

/** Most Popular Badge (replaces Featured) */
.quickerbill-theme-badge-popular {
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    font-size: 11px;
    font-weight: 700;
    padding: var(--quickerbill-theme-variable-space-1-5) var(--quickerbill-theme-variable-space-4);
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: var(--quickerbill-theme-variable-shadow-md);
}

/** Cart Badge (count) */
.quickerbill-theme-badge-count {
    background: var(--quickerbill-theme-variable-error);
    color: var(--quickerbill-theme-variable-white);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
    line-height: 1;
}

/** Pill Badge */
.quickerbill-theme-badge-pill {
    border-radius: 999px;
}

/** Dot Badge (status indicator) */
.quickerbill-theme-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--quickerbill-theme-variable-radius-full);
    display: inline-block;
    margin-right: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-badge-dot-success {
    background: var(--quickerbill-theme-variable-success);
}

.quickerbill-theme-badge-dot-error {
    background: var(--quickerbill-theme-variable-error);
}

.quickerbill-theme-badge-dot-warning {
    background: var(--quickerbill-theme-variable-warning);
}

.quickerbill-theme-badge-dot-info {
    background: var(--quickerbill-theme-variable-info);
}
/**
 * Domain Search Widget Specific Styles
 * 2-column layout with image and domain search form
 * Supports video play button overlay
 * Uses centralized typography/badge from theme.css
 * Specific: Row layout, search form, video overlay
 * Using naming convention: quickerbill-theme-domain-search-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-domain-search-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
    padding: var(--quickerbill-theme-variable-space-15) 0;
}

/* ========================================
   ROW LAYOUT (2 COLUMNS)
   ======================================== */

.quickerbill-theme-domain-search-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
    align-items: center;
}

/* ========================================
   IMAGE COLUMN
   ======================================== */

.quickerbill-theme-domain-search-image {
    position: relative;
    border-radius: var(--quickerbill-theme-variable-radius-2xl);
    overflow: hidden;
}

.quickerbill-theme-domain-search-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--quickerbill-theme-variable-radius-2xl);
}

/* ========================================
   VIDEO PLAY BUTTON OVERLAY
   ======================================== */

.quickerbill-theme-domain-search-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: var(--quickerbill-theme-variable-primary);
    border-radius: var(--quickerbill-theme-variable-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
    text-decoration: none;
}

/* Pulsing glow effect */
.quickerbill-theme-domain-search-video-play::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--quickerbill-theme-variable-radius-full);
    background: var(--quickerbill-theme-variable-primary);
    animation: quickerbill-theme-animation-play-pulse 2s infinite;
    z-index: -1;
}

.quickerbill-theme-domain-search-video-play:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--quickerbill-theme-variable-primary-hover);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.quickerbill-theme-domain-search-play-icon {
    width: 40px;
    height: 40px;
    color: var(--quickerbill-theme-variable-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    position: relative;
    z-index: 1;
}

.quickerbill-theme-domain-search-play-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ========================================
   CONTENT COLUMN
   ======================================== */

.quickerbill-theme-domain-search-content {
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-4);
    align-items: flex-start;
}

/* Override badge margin - let flexbox gap handle spacing */
.quickerbill-theme-domain-search-content .quickerbill-theme-badge-widget {
    margin-bottom: 0;
}

/* Content Alignment - Center */
.quickerbill-theme-domain-search-content-center {
    text-align: center;
    align-items: center;
}

/* ========================================
   SEARCH FORM
   ======================================== */

.quickerbill-theme-domain-search-form {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: var(--quickerbill-theme-variable-space-2);
}

/* ========================================
   SEARCH INPUT WRAPPER
   ======================================== */

.quickerbill-theme-domain-search-input-wrapper {
    position: relative;
    flex: 1;
}

.quickerbill-theme-domain-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--quickerbill-theme-variable-gray-500);
    pointer-events: none;
}

.quickerbill-theme-domain-search-input {
    width: 100%;
    padding: 16px 20px;
    padding-left: 52px;
    font-size: 16px;
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    background: var(--quickerbill-theme-variable-white);
    transition: all var(--quickerbill-theme-variable-transition-fast);
    font-family: inherit;
}

.quickerbill-theme-domain-search-input:focus {
    outline: none;
    border-color: var(--quickerbill-theme-variable-primary);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
}

.quickerbill-theme-domain-search-input::placeholder {
    color: var(--quickerbill-theme-variable-gray-400);
}

/* ========================================
   TRANSFER LINK
   ======================================== */

.quickerbill-theme-domain-search-transfer-link {
    display: inline-block;
    font-size: 15px;
    color: var(--quickerbill-theme-variable-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
    margin-top: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-domain-search-transfer-link:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
    text-decoration: underline;
}

/* ========================================
   IMAGE POSITION CONTROL
   ======================================== */

/* Image Left (Default Order) */
.quickerbill-theme-domain-search-image-left .quickerbill-theme-domain-search-image {
    order: 1;
}

.quickerbill-theme-domain-search-image-left .quickerbill-theme-domain-search-content {
    order: 2;
}

/* Image Right (Reversed Order) */
.quickerbill-theme-domain-search-image-right .quickerbill-theme-domain-search-image {
    order: 2;
}

.quickerbill-theme-domain-search-image-right .quickerbill-theme-domain-search-content {
    order: 1;
}
/**
 * Domain Transfer Widget Specific Styles
 * 2-column layout with image and domain transfer form
 * Supports video play button overlay
 * Uses centralized typography/badge from theme.css
 * Specific: Row layout, transfer form, video overlay
 * Using naming convention: quickerbill-theme-domain-transfer-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-domain-transfer-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
    padding: var(--quickerbill-theme-variable-space-15) 0;
}

/* ========================================
   ROW LAYOUT (2 COLUMNS)
   ======================================== */

.quickerbill-theme-domain-transfer-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
    align-items: center;
}

/* ========================================
   IMAGE COLUMN
   ======================================== */

.quickerbill-theme-domain-transfer-image {
    position: relative;
    border-radius: var(--quickerbill-theme-variable-radius-2xl);
    overflow: hidden;
}

.quickerbill-theme-domain-transfer-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--quickerbill-theme-variable-radius-2xl);
}

/* ========================================
   VIDEO PLAY BUTTON OVERLAY
   ======================================== */

.quickerbill-theme-domain-transfer-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: var(--quickerbill-theme-variable-primary);
    border-radius: var(--quickerbill-theme-variable-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
    text-decoration: none;
}

/* Pulsing glow effect */
.quickerbill-theme-domain-transfer-video-play::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--quickerbill-theme-variable-radius-full);
    background: var(--quickerbill-theme-variable-primary);
    animation: quickerbill-theme-animation-play-pulse 2s infinite;
    z-index: -1;
}

.quickerbill-theme-domain-transfer-video-play:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--quickerbill-theme-variable-primary-hover);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.quickerbill-theme-domain-transfer-play-icon {
    width: 40px;
    height: 40px;
    color: var(--quickerbill-theme-variable-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    position: relative;
    z-index: 1;
}

.quickerbill-theme-domain-transfer-play-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ========================================
   CONTENT COLUMN
   ======================================== */

.quickerbill-theme-domain-transfer-content {
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-4);
    align-items: flex-start;
}

/* Override badge margin - let flexbox gap handle spacing */
.quickerbill-theme-domain-transfer-content .quickerbill-theme-badge-widget {
    margin-bottom: 0;
}

/* Content Alignment - Center */
.quickerbill-theme-domain-transfer-content-center {
    text-align: center;
    align-items: center;
}

/* ========================================
   TRANSFER FORM
   ======================================== */

.quickerbill-theme-domain-transfer-form {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: var(--quickerbill-theme-variable-space-2);
}

/* ========================================
   TRANSFER INPUT WRAPPER
   ======================================== */

.quickerbill-theme-domain-transfer-input-wrapper {
    position: relative;
    flex: 1;
}

.quickerbill-theme-domain-transfer-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--quickerbill-theme-variable-gray-500);
    pointer-events: none;
}

.quickerbill-theme-domain-transfer-input {
    width: 100%;
    padding: 16px 20px;
    padding-left: 52px;
    font-size: 16px;
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    background: var(--quickerbill-theme-variable-white);
    transition: all var(--quickerbill-theme-variable-transition-fast);
    font-family: inherit;
}

.quickerbill-theme-domain-transfer-input:focus {
    outline: none;
    border-color: var(--quickerbill-theme-variable-primary);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
}

.quickerbill-theme-domain-transfer-input::placeholder {
    color: var(--quickerbill-theme-variable-gray-400);
}

/* ========================================
   REGISTER LINK
   ======================================== */

.quickerbill-theme-domain-transfer-register-link {
    display: inline-block;
    font-size: 15px;
    color: var(--quickerbill-theme-variable-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
    margin-top: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-domain-transfer-register-link:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
    text-decoration: underline;
}

/* ========================================
   IMAGE POSITION CONTROL
   ======================================== */

/* Image Left (Default Order) */
.quickerbill-theme-domain-transfer-image-left .quickerbill-theme-domain-transfer-image {
    order: 1;
}

.quickerbill-theme-domain-transfer-image-left .quickerbill-theme-domain-transfer-content {
    order: 2;
}

/* Image Right (Reversed Order) */
.quickerbill-theme-domain-transfer-image-right .quickerbill-theme-domain-transfer-image {
    order: 2;
}

.quickerbill-theme-domain-transfer-image-right .quickerbill-theme-domain-transfer-content {
    order: 1;
}
/**
 * Hosting Widget Specific Styles
 * 2-column layout with image and content (like Image Content Row)
 * Supports video play button overlay
 * Uses centralized typography/badge from theme.css
 * Specific: Row layout, pricing display, video overlay
 * Using naming convention: quickerbill-theme-hosting-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-hosting-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
    padding: var(--quickerbill-theme-variable-space-15) 0;
}

/* ========================================
   ROW LAYOUT (2 COLUMNS)
   ======================================== */

.quickerbill-theme-hosting-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
    align-items: center;
}

/* ========================================
   IMAGE COLUMN
   ======================================== */

.quickerbill-theme-hosting-image {
    position: relative;
    border-radius: var(--quickerbill-theme-variable-radius-2xl);
    overflow: hidden;
}

.quickerbill-theme-hosting-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--quickerbill-theme-variable-radius-2xl);
}

/* ========================================
   VIDEO PLAY BUTTON OVERLAY
   ======================================== */

.quickerbill-theme-hosting-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; /* Bigger: 80px → 100px */
    height: 100px;
    background: var(--quickerbill-theme-variable-primary); /* Primary color */
    border-radius: var(--quickerbill-theme-variable-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
    text-decoration: none;
}

/* Pulsing glow effect */
.quickerbill-theme-hosting-video-play::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--quickerbill-theme-variable-radius-full);
    background: var(--quickerbill-theme-variable-primary);
    animation: quickerbill-theme-animation-play-pulse 2s infinite;
    z-index: -1;
}

.quickerbill-theme-hosting-video-play:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--quickerbill-theme-variable-primary-hover);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.quickerbill-theme-hosting-play-icon {
    width: 40px; /* Bigger: 32px → 40px */
    height: 40px;
    color: var(--quickerbill-theme-variable-white); /* White play icon */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px; /* Optical centering for play icon */
    position: relative;
    z-index: 1;
}

.quickerbill-theme-hosting-play-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ========================================
   CONTENT COLUMN
   ======================================== */

.quickerbill-theme-hosting-content {
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-4);
    align-items: flex-start;
}

/* Override badge margin - let flexbox gap handle spacing */
.quickerbill-theme-hosting-content .quickerbill-theme-badge-widget {
    margin-bottom: 0;
}

/* Content Alignment - Center */
.quickerbill-theme-hosting-content-center {
    text-align: center;
    align-items: center;
}

/* ========================================
   PRICING DISPLAY
   ======================================== */

.quickerbill-theme-hosting-pricing {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--quickerbill-theme-variable-space-2);
    padding-top: var(--quickerbill-theme-variable-space-2);
    width: 100%;
}

.quickerbill-theme-hosting-content-center .quickerbill-theme-hosting-pricing {
    align-items: center;
}

.quickerbill-theme-hosting-pricing-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--quickerbill-theme-variable-gray-600);
    line-height: 1;
}

.quickerbill-theme-hosting-pricing-display {
    display: flex;
    align-items: baseline;
    gap: 0;
    min-height: 40px;
}

.quickerbill-theme-hosting-pricing-loading {
    display: flex;
    align-items: center;
    padding: var(--quickerbill-theme-variable-space-2) 0;
}

.quickerbill-theme-hosting-pricing-amount {
    font-size: 36px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-800);
    line-height: 1;
}

.quickerbill-theme-hosting-pricing-period {
    font-size: 18px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-500);
    line-height: 1;
    margin-left: 0;
}

.quickerbill-theme-hosting-pricing-placeholder {
    font-size: 16px;
    color: var(--quickerbill-theme-variable-gray-400);
    font-style: italic;
}

/* ========================================
   PROMOTION PRICING
   ======================================== */

/* SALE Badge - Positioned next to label */
.quickerbill-theme-hosting-sale-badge {
    margin-right: var(--quickerbill-theme-variable-space-2);
    display: inline-block;
    vertical-align: middle;
}

/* Stacked Pricing Container - HORIZONTAL ON DESKTOP */
.quickerbill-theme-hosting-pricing-stacked {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--quickerbill-theme-variable-space-3);
}

/* Original Price (Strikethrough) */
.quickerbill-theme-hosting-pricing-original {
    font-size: 24px;
    color: var(--quickerbill-theme-variable-gray-400);
    text-decoration: line-through;
    font-weight: 400;
    line-height: 1;
}

/* Promo Price Wrapper */
.quickerbill-theme-hosting-pricing-promo-wrapper {
    display: flex;
    align-items: baseline;
    gap: 0;
}

/* Promo Price (Green) */
.quickerbill-theme-hosting-pricing-promo {
    color: var(--quickerbill-theme-variable-success) !important;
}

/* Promo Period (Green) */
.quickerbill-theme-hosting-pricing-period-promo {
    color: var(--quickerbill-theme-variable-success) !important;
    font-weight: 700;
    margin-left: 0;
}

/* ========================================
   BUTTON POSITIONING
   ======================================== */

.quickerbill-theme-hosting-content .quickerbill-theme-btn {
    align-self: flex-start;
    margin-top: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-hosting-content-center .quickerbill-theme-btn {
    align-self: center;
}

/* ========================================
   IMAGE POSITION CONTROL
   ======================================== */

/* Image Left (Default Order) */
.quickerbill-theme-hosting-image-left .quickerbill-theme-hosting-image {
    order: 1;
}

.quickerbill-theme-hosting-image-left .quickerbill-theme-hosting-content {
    order: 2;
}

/* Image Right (Reversed Order) */
.quickerbill-theme-hosting-image-right .quickerbill-theme-hosting-image {
    order: 2;
}

.quickerbill-theme-hosting-image-right .quickerbill-theme-hosting-content {
    order: 1;
}

/* ========================================
   EDITOR PREVIEW MODE
   ======================================== */

.quickerbill-theme-hosting-editor-mode {
    opacity: 0.95;
}

.quickerbill-theme-hosting-editor-notice {
    background: var(--quickerbill-theme-variable-info-bg);
    border-left: 4px solid var(--quickerbill-theme-variable-info);
    padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-4);
    margin-bottom: var(--quickerbill-theme-variable-space-8);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2);
    font-size: 13px;
    color: var(--quickerbill-theme-variable-info-dark);
}

.quickerbill-theme-hosting-editor-notice strong {
    font-weight: 600;
}

.quickerbill-theme-hosting-editor-disabled {
    pointer-events: none;
    cursor: default;
}
/**
 * Product Grid Widget Specific Styles
 * Uses centralized typography/badge from theme.css
 * Specific: Billing cycle switcher, pricing display, features list, editor preview
 * Using naming convention: quickerbill-theme-product-grid-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER (Unified Background)
   ======================================== */

.quickerbill-theme-product-grid-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
}

/* ========================================
   BILLING CYCLE SWITCHER SECTION
   ======================================== */

.quickerbill-theme-product-grid-billing-cycle-switcher-section {
    padding: var(--quickerbill-theme-variable-space-6) 0;
}

.quickerbill-theme-product-grid-billing-cycle-switcher-container {
    display: flex;
    justify-content: center;
}

.quickerbill-theme-product-grid-billing-cycle-switcher {
    display: inline-flex;
    gap: var(--quickerbill-theme-variable-space-2);
    background: var(--quickerbill-theme-variable-gray-50);
    padding: var(--quickerbill-theme-variable-space-1-5);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    box-shadow: var(--quickerbill-theme-variable-shadow-sm);
}

.quickerbill-theme-product-grid-cycle-btn {
    padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-6);
    border: none;
    background: transparent;
    color: var(--quickerbill-theme-variable-gray-500);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    cursor: pointer;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    white-space: nowrap;
}

.quickerbill-theme-product-grid-cycle-btn:hover {
    background: var(--quickerbill-theme-variable-gray-200);
    color: var(--quickerbill-theme-variable-secondary);
}

.quickerbill-theme-product-grid-cycle-btn.active {
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    box-shadow: var(--quickerbill-theme-variable-shadow-sm-alt);
}

/* ========================================
   PRODUCTS LOADING STATE
   ======================================== */

.quickerbill-theme-product-grid-loading {
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-15) var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-product-grid-loading p {
    margin-top: var(--quickerbill-theme-variable-space-5);
    color: var(--quickerbill-theme-variable-gray-500);
    font-size: 14px;
}

/* ========================================
   PRODUCT GRID LAYOUT
   ======================================== */

.quickerbill-theme-product-grid {
    display: grid;
    gap: var(--quickerbill-theme-variable-space-8);
    align-items: stretch;
    padding-top: var(--quickerbill-theme-variable-space-5);
    padding-bottom: var(--quickerbill-theme-variable-space-12);
}

.quickerbill-theme-product-grid[data-columns="1"] {
    grid-template-columns: 1fr;
}

.quickerbill-theme-product-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.quickerbill-theme-product-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.quickerbill-theme-product-grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

/* ========================================
   PRODUCT CARD
   ======================================== */

.quickerbill-theme-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.quickerbill-theme-product-card-body {
    padding: var(--quickerbill-theme-variable-space-8) var(--quickerbill-theme-variable-space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.quickerbill-theme-product-card-body-centered {
    text-align: center;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-product-card-name {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: var(--quickerbill-theme-variable-secondary);
    line-height: 1.3;
}

/* ========================================
   PRODUCT CARD WITH PROMOTION
   ======================================== */

.quickerbill-theme-product-card.has-promotion {
    border-color: var(--quickerbill-theme-variable-success-accent);
}

.quickerbill-theme-product-card.has-promotion:hover {
    border-color: var(--quickerbill-theme-variable-success);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15);
}

/* ========================================
   MOST POPULAR PRODUCT
   ======================================== */

.quickerbill-theme-product-popular {
    transform: scale(1.05);
    border-color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-product-popular:hover {
    transform: scale(1.05) translateY(-6px);
}

.quickerbill-theme-product-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
}

/* ========================================
   PRODUCT PROMOTION BADGE
   ======================================== */

.quickerbill-theme-product-promotion-badge {
    position: absolute;
    top: var(--quickerbill-theme-variable-space-4);
    right: var(--quickerbill-theme-variable-space-4);
}

/* ========================================
   PRODUCT CARD CTA
   ======================================== */

.quickerbill-theme-product-card-cta {
    width: 100%;
    padding-top: var(--quickerbill-theme-variable-space-2);
    padding-bottom: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-product-card-cta .quickerbill-theme-btn {
    padding: var(--quickerbill-theme-variable-space-3-5) var(--quickerbill-theme-variable-space-6);
    font-size: 15px;
}

/* ========================================
   PRODUCT PRICING BOX
   ======================================== */

.quickerbill-theme-product-grid-pricing {
    width: 100%;
}

.quickerbill-theme-product-grid-price-box {
    text-align: center;
}

.quickerbill-theme-product-grid-price-box-centered {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-product-grid-price-loading {
    padding: var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-product-grid-price-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0;
}

.quickerbill-theme-product-grid-price-amount {
    font-size: 40px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-secondary);
    line-height: 1;
}

.quickerbill-theme-product-grid-price-period {
    font-size: 16px;
    color: var(--quickerbill-theme-variable-gray-500);
    margin-left: 0;
    font-weight: 700;
}

.quickerbill-theme-product-grid-billing-cycle {
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-500);
    font-weight: 500;
}

.quickerbill-theme-product-grid-price-contact {
    color: var(--quickerbill-theme-variable-gray-500);
    font-size: 16px;
    font-weight: 500;
}

/* ========================================
   PROMOTION PRICING STYLES
   ======================================== */

.quickerbill-theme-product-grid-price-with-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
}

.quickerbill-theme-product-grid-price-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-product-grid-price-original {
    font-size: 20px;
    color: var(--quickerbill-theme-variable-gray-400);
    text-decoration: line-through;
    font-weight: 400;
    line-height: 1.2;
}

.quickerbill-theme-product-grid-price-promo {
    color: var(--quickerbill-theme-variable-success);
}

.quickerbill-theme-product-grid-price-promo .quickerbill-theme-product-grid-price-period {
    color: var(--quickerbill-theme-variable-success);
    font-weight: 700;
}

/* ========================================
   PRODUCT FEATURES LIST
   ======================================== */

.quickerbill-theme-product-grid-description {
    width: 100%;
    text-align: left;
    padding-top: var(--quickerbill-theme-variable-space-2);
    border-top: 1px solid var(--quickerbill-theme-variable-gray-100);
}

.quickerbill-theme-product-grid-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quickerbill-theme-product-grid-features li {
    padding: var(--quickerbill-theme-variable-space-2) 0 var(--quickerbill-theme-variable-space-2) var(--quickerbill-theme-variable-space-8);
    position: relative;
    font-size: 15px;
    color: var(--quickerbill-theme-variable-gray-700);
    line-height: 1.6;
}

.quickerbill-theme-product-grid-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: var(--quickerbill-theme-variable-space-2);
    width: 20px;
    height: 20px;
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    font-weight: bold;
    font-size: 12px;
    border-radius: var(--quickerbill-theme-variable-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   VIEW ALL FEATURES LINK
   ======================================== */

.quickerbill-theme-product-grid-features-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
    margin-top: var(--quickerbill-theme-variable-space-4);
    font-size: 14px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-primary);
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-product-grid-features-link:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
}

/* ========================================
   EDITOR PREVIEW MODE
   ======================================== */

.quickerbill-theme-product-grid-editor-mode {
    opacity: 0.95;
}

.quickerbill-theme-product-grid-editor-notice {
    background: var(--quickerbill-theme-variable-info-bg);
    border-left: 4px solid var(--quickerbill-theme-variable-info);
    padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-4);
    margin-bottom: var(--quickerbill-theme-variable-space-8);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2-5);
    font-size: 13px;
    color: var(--quickerbill-theme-variable-info-dark);
}

.quickerbill-theme-product-grid-editor-notice strong {
    font-weight: 600;
}

.quickerbill-theme-product-grid-editor-empty {
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-10) var(--quickerbill-theme-variable-space-6);
    color: var(--quickerbill-theme-variable-gray-500);
}

.quickerbill-theme-product-grid-editor-empty p {
    margin: 0;
    font-size: 14px;
}

.quickerbill-theme-product-grid-editor-disabled {
    pointer-events: none;
    cursor: default;
}

.quickerbill-theme-product-grid-editor-card {
    cursor: default;
}

.quickerbill-theme-product-grid-editor-card:hover {
    transform: none;
}

.quickerbill-theme-product-grid-editor-mode .quickerbill-theme-product-grid-cycle-btn:not(.active) {
    opacity: 0.5;
}
/**
 * Icon Box Grid Widget Specific Styles
 * Uses centralized typography/badge from theme.css
 * Specific: Grid layout, icon box cards, icons
 * Using naming convention: quickerbill-theme-icon-box-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-icon-box-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
}

/* ========================================
   ICON BOX GRID SECTION
   ======================================== */

.quickerbill-theme-icon-box-grid-section {
    padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-12) 0;
}

/* ========================================
   ICON BOX GRID
   ======================================== */

.quickerbill-theme-icon-box-grid {
    display: grid;
    gap: var(--quickerbill-theme-variable-space-8);
    align-items: stretch;
}

/* Dynamic Column Support (1-6 columns) */
.quickerbill-theme-icon-box-grid[data-columns="1"] {
    grid-template-columns: 1fr;
}

.quickerbill-theme-icon-box-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.quickerbill-theme-icon-box-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.quickerbill-theme-icon-box-grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.quickerbill-theme-icon-box-grid[data-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
}

.quickerbill-theme-icon-box-grid[data-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
}

/* ========================================
   ICON BOX CARD
   ======================================== */

.quickerbill-theme-icon-box-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--quickerbill-theme-variable-white);
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    padding: 40px 32px;
    transition: all var(--quickerbill-theme-variable-transition-normal);
}

.quickerbill-theme-icon-box-card:hover {
    border-color: var(--quickerbill-theme-variable-primary);
    box-shadow: var(--quickerbill-theme-variable-shadow-xl);
    transform: translateY(-4px);
}

/* Make cards clickable links */
a.quickerbill-theme-icon-box-card {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

/* ========================================
   ICON
   ======================================== */

.quickerbill-theme-icon-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--quickerbill-theme-variable-space-6);
    width: 48px;
    height: 48px;
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-icon-box-icon svg {
    width: 48px;
    height: 48px;
    fill: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-icon-box-icon i {
    font-size: 48px;
    line-height: 1;
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-icon-box-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* ========================================
   CONTENT
   ======================================== */

.quickerbill-theme-icon-box-card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-secondary);
    margin-bottom: var(--quickerbill-theme-variable-space-3);
    line-height: 1.3;
}

.quickerbill-theme-icon-box-card-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--quickerbill-theme-variable-gray-500);
    margin: 0;
}
/**
 * Image Content Row Widget Specific Styles
 * Uses centralized typography/badge from theme.css
 * Specific: Alternating layout, row structure, spacing, button positioning
 * Using naming convention: quickerbill-theme-image-content-row-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-image-content-row-widget {
    width: 100%;
    padding: var(--quickerbill-theme-variable-space-15) 0;
    background: var(--quickerbill-theme-variable-bg-light);
}

/* ========================================
   ROW CONTAINER
   ======================================== */

.quickerbill-theme-image-content-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
}

.quickerbill-theme-image-content-row-last {
    margin-bottom: 0;
}

/* ========================================
   ROW SPACING MODIFIERS
   ======================================== */

.quickerbill-theme-image-content-row-spacing-large .quickerbill-theme-image-content-row {
    margin-bottom: 120px;
}

.quickerbill-theme-image-content-row-spacing-medium .quickerbill-theme-image-content-row {
    margin-bottom: 80px;
}

.quickerbill-theme-image-content-row-spacing-small .quickerbill-theme-image-content-row {
    margin-bottom: 60px;
}

/* ========================================
   IMAGE SECTION
   ======================================== */

.quickerbill-theme-image-content-row-image {
    position: relative;
}

.quickerbill-theme-image-content-row-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   CONTENT SECTION
   ======================================== */

.quickerbill-theme-image-content-row-content {
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-4); /* 16px - consistent spacing */
    align-items: flex-start; /* Prevent badge/button stretching */
}

/* Override badge margin - let flexbox gap handle spacing */
.quickerbill-theme-image-content-row-content .quickerbill-theme-badge-widget {
    margin-bottom: 0;
}

/* Content Alignment - Center */
.quickerbill-theme-image-content-row-content-center {
    text-align: center;
    align-items: center; /* Override for centered layout */
}

/* ========================================
   BUTTON POSITIONING
   ======================================== */

.quickerbill-theme-image-content-row-button {
    align-self: flex-start;
    margin-top: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-image-content-row-content-center .quickerbill-theme-image-content-row-button {
    align-self: center;
}

/* ========================================
   ALTERNATING LAYOUT
   ======================================== */

/* Image Left (Default Order) */
.quickerbill-theme-image-content-row-image-left .quickerbill-theme-image-content-row-image {
    order: 1;
}

.quickerbill-theme-image-content-row-image-left .quickerbill-theme-image-content-row-content {
    order: 2;
}

/* Image Right (Reversed Order) */
.quickerbill-theme-image-content-row-image-right .quickerbill-theme-image-content-row-image {
    order: 2;
}

.quickerbill-theme-image-content-row-image-right .quickerbill-theme-image-content-row-content {
    order: 1;
}
/**
 * Visual Accordion Widget Specific Styles
 * Uses centralized typography/badge from theme.css
 * Specific: Accordion layout, items, transitions, image switching
 * Using naming convention: quickerbill-theme-visual-accordion-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-visual-accordion-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
}

/* ========================================
   VISUAL ACCORDION SECTION
   ======================================== */

.quickerbill-theme-visual-accordion-section {
    padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-12) 0;
}

/* ========================================
   LAYOUT (50/50 Split)
   ======================================== */

.quickerbill-theme-visual-accordion-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
}

/* ========================================
   ACCORDION COLUMN
   ======================================== */

.quickerbill-theme-visual-accordion-column {
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-8);
}

.quickerbill-theme-visual-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-4);
}

/* ========================================
   ACCORDION ITEM
   ======================================== */

.quickerbill-theme-visual-accordion-item {
    background: var(--quickerbill-theme-variable-white);
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-left: 4px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    transition: all var(--quickerbill-theme-variable-transition-fast);
    overflow: hidden;
}

.quickerbill-theme-visual-accordion-item:hover {
    border-color: var(--quickerbill-theme-variable-gray-300);
    box-shadow: var(--quickerbill-theme-variable-shadow-sm);
}

.quickerbill-theme-visual-accordion-item.active {
    border-left-color: var(--quickerbill-theme-variable-primary);
    border-color: var(--quickerbill-theme-variable-gray-300);
    box-shadow: var(--quickerbill-theme-variable-shadow-md);
}

/* ========================================
   ACCORDION HEADER
   ======================================== */

.quickerbill-theme-visual-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-6);
    cursor: pointer;
    user-select: none;
}

.quickerbill-theme-visual-accordion-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-secondary);
    margin: 0;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-visual-accordion-item.active .quickerbill-theme-visual-accordion-title {
    color: var(--quickerbill-theme-variable-primary);
}

/* ========================================
   ACCORDION ICON (Plus/Minus)
   ======================================== */

.quickerbill-theme-visual-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--quickerbill-theme-variable-gray-100);
    border-radius: var(--quickerbill-theme-variable-radius-full);
    font-size: 20px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-600);
    flex-shrink: 0;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    position: relative;
}

.quickerbill-theme-visual-accordion-item.active .quickerbill-theme-visual-accordion-icon {
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-visual-accordion-icon-plus,
.quickerbill-theme-visual-accordion-icon-minus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity var(--quickerbill-theme-variable-transition-fast);
}

/* Default: Show Plus, Hide Minus */
.quickerbill-theme-visual-accordion-icon-plus {
    opacity: 1;
}

.quickerbill-theme-visual-accordion-icon-minus {
    opacity: 0;
}

/* Active: Hide Plus, Show Minus */
.quickerbill-theme-visual-accordion-item.active .quickerbill-theme-visual-accordion-icon-plus {
    opacity: 0;
}

.quickerbill-theme-visual-accordion-item.active .quickerbill-theme-visual-accordion-icon-minus {
    opacity: 1;
}

/* ========================================
   ACCORDION CONTENT
   ======================================== */

.quickerbill-theme-visual-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--quickerbill-theme-variable-transition-normal) ease;
}

.quickerbill-theme-visual-accordion-item.active .quickerbill-theme-visual-accordion-content {
    max-height: 500px; /* Adjust based on content */
}

.quickerbill-theme-visual-accordion-content-inner {
    padding: 0 var(--quickerbill-theme-variable-space-6) var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-6);
}

.quickerbill-theme-visual-accordion-content-inner p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--quickerbill-theme-variable-gray-600);
    margin: 0;
}

/* ========================================
   CTA BUTTON
   ======================================== */

.quickerbill-theme-visual-accordion-cta {
    align-self: flex-start;
}

/* ========================================
   IMAGE COLUMN
   ======================================== */

.quickerbill-theme-visual-accordion-image-column {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quickerbill-theme-visual-accordion-image-wrapper {
    position: relative;
    width: 100%;
    min-height: 500px;
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    overflow: hidden;
}

.quickerbill-theme-visual-accordion-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--quickerbill-theme-variable-transition-normal) ease;
    pointer-events: none;
}

.quickerbill-theme-visual-accordion-image.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}
/**
 * FAQs Widget Specific Styles
 * Uses centralized typography/badge from theme.css
 * Specific: FAQ accordion layout, items, transitions
 * Using naming convention: quickerbill-theme-faqs-
 * 
 * STYLING: Matches Visual Accordion widget style
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-faqs-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
}

/* ========================================
   FAQS SECTION
   ======================================== */

.quickerbill-theme-faqs-section {
    padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-12) 0;
}

/* ========================================
   FAQS LIST
   ======================================== */

.quickerbill-theme-faqs-list {
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-4);
}

/* ========================================
   FAQ ITEM (Visual Accordion Style)
   ======================================== */

.quickerbill-theme-faqs-item {
    background: var(--quickerbill-theme-variable-white);
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-left: 4px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    transition: all var(--quickerbill-theme-variable-transition-fast);
    overflow: hidden;
}

.quickerbill-theme-faqs-item:hover {
    border-color: var(--quickerbill-theme-variable-gray-300);
    box-shadow: var(--quickerbill-theme-variable-shadow-sm);
}

.quickerbill-theme-faqs-item.active {
    border-left-color: var(--quickerbill-theme-variable-primary);
    border-color: var(--quickerbill-theme-variable-gray-300);
    box-shadow: var(--quickerbill-theme-variable-shadow-md);
}

/* ========================================
   FAQ HEADER
   ======================================== */

.quickerbill-theme-faqs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-6);
    cursor: pointer;
    user-select: none;
    gap: var(--quickerbill-theme-variable-space-4);
}

.quickerbill-theme-faqs-question {
    font-size: 18px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-secondary);
    margin: 0;
    transition: color var(--quickerbill-theme-variable-transition-fast);
    flex: 1;
}

.quickerbill-theme-faqs-item.active .quickerbill-theme-faqs-question {
    color: var(--quickerbill-theme-variable-primary);
}

/* ========================================
   FAQ ICON (Plus/Minus)
   ======================================== */

.quickerbill-theme-faqs-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--quickerbill-theme-variable-gray-100);
    border-radius: var(--quickerbill-theme-variable-radius-full);
    font-size: 20px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-600);
    flex-shrink: 0;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    position: relative;
}

.quickerbill-theme-faqs-item.active .quickerbill-theme-faqs-icon {
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-faqs-icon-plus,
.quickerbill-theme-faqs-icon-minus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity var(--quickerbill-theme-variable-transition-fast);
    line-height: 1;
}

/* Default: Show Plus, Hide Minus */
.quickerbill-theme-faqs-icon-plus {
    opacity: 1;
}

.quickerbill-theme-faqs-icon-minus {
    opacity: 0;
}

/* Active: Hide Plus, Show Minus */
.quickerbill-theme-faqs-item.active .quickerbill-theme-faqs-icon-plus {
    opacity: 0;
}

.quickerbill-theme-faqs-item.active .quickerbill-theme-faqs-icon-minus {
    opacity: 1;
}

/* ========================================
   FAQ CONTENT
   ======================================== */

.quickerbill-theme-faqs-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--quickerbill-theme-variable-transition-normal) ease;
}

.quickerbill-theme-faqs-item.active .quickerbill-theme-faqs-content {
    max-height: 500px; /* Adjust based on content */
}

.quickerbill-theme-faqs-content-inner {
    padding: 0 var(--quickerbill-theme-variable-space-6) var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-6);
}

.quickerbill-theme-faqs-content-inner p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--quickerbill-theme-variable-gray-600);
    margin: 0;
}
/**
 * 404 Error Widget Specific Styles
 * Uses centralized typography/badge from theme.css
 * Specific: 404 hero, popular pages grid, action buttons
 * Using naming convention: quickerbill-theme-404-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-404-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
}

/* ========================================
   ERROR HERO SECTION
   ======================================== */

.quickerbill-theme-404-hero {
    padding: var(--quickerbill-theme-variable-space-15) 0 var(--quickerbill-theme-variable-space-12) 0;
    text-align: center;
}

.quickerbill-theme-404-illustration {
    margin: 0 auto var(--quickerbill-theme-variable-space-10);
    max-width: 600px;
}

.quickerbill-theme-404-illustration img {
    width: 100%;
    height: auto;
    display: block;
}

.quickerbill-theme-404-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-5) 0;
    line-height: 1.2;
}

.quickerbill-theme-404-description {
    font-size: 18px;
    line-height: 1.7;
    color: var(--quickerbill-theme-variable-gray-600);
    margin: 0 auto;
    max-width: 600px;
}

/* ========================================
   POPULAR PAGES SECTION
   ======================================== */

.quickerbill-theme-404-popular-section {
    padding: var(--quickerbill-theme-variable-space-10) 0;
}

.quickerbill-theme-404-popular-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    text-align: center;
    margin: 0 0 var(--quickerbill-theme-variable-space-8) 0;
}

.quickerbill-theme-404-popular-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--quickerbill-theme-variable-space-6);
}

/* ========================================
   PAGE CARD
   ======================================== */

.quickerbill-theme-404-page-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-8) var(--quickerbill-theme-variable-space-6);
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    background: var(--quickerbill-theme-variable-white);
    transition: all var(--quickerbill-theme-variable-transition-fast);
    color: inherit;
    text-decoration: none;
}

.quickerbill-theme-404-page-card:hover {
    border-color: var(--quickerbill-theme-variable-primary);
    box-shadow: var(--quickerbill-theme-variable-shadow-lg);
    transform: translateY(-4px);
}

.quickerbill-theme-404-page-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--quickerbill-theme-variable-primary);
    border-radius: var(--quickerbill-theme-variable-radius-full);
    color: var(--quickerbill-theme-variable-white);
    font-size: 32px;
    margin-bottom: var(--quickerbill-theme-variable-space-5);
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-404-page-card:hover .quickerbill-theme-404-page-icon {
    background: var(--quickerbill-theme-variable-primary-dark);
    transform: scale(1.05);
}

/* Force white color on icons (Font Awesome) */
.quickerbill-theme-404-page-icon i {
    color: var(--quickerbill-theme-variable-white) !important;
    font-size: 32px;
    width: 32px;
    height: 32px;
}

/* Force white color on SVG icons */
.quickerbill-theme-404-page-icon svg {
    fill: var(--quickerbill-theme-variable-white) !important;
    color: var(--quickerbill-theme-variable-white) !important;
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.quickerbill-theme-404-page-icon svg path {
    fill: var(--quickerbill-theme-variable-white) !important;
}

.quickerbill-theme-404-page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-2) 0;
    line-height: 1.3;
}

.quickerbill-theme-404-page-subtitle {
    font-size: 14px;
    line-height: 1.6;
    color: var(--quickerbill-theme-variable-gray-600);
    margin: 0;
}

/* ========================================
   ACTION BUTTONS
   ======================================== */

.quickerbill-theme-404-actions {
    padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-15) 0;
}

.quickerbill-theme-404-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--quickerbill-theme-variable-space-4);
}

.quickerbill-theme-404-btn-homepage,
.quickerbill-theme-404-btn-back {
    display: inline-flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-404-btn-homepage .dashicons,
.quickerbill-theme-404-btn-back .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}
/**
 * Blog Widget Specific Styles
 * Uses centralized typography/badge from theme.css
 * Specific: Blog grid, post cards, sidebar, pagination
 * Using naming convention: quickerbill-theme-blog-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-blog-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
}

/* ========================================
   BLOG SECTION
   ======================================== */

.quickerbill-theme-blog-section {
    padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-12) 0;
}

/* ========================================
   BLOG LAYOUT (2 Columns: Main + Sidebar)
   ======================================== */

.quickerbill-theme-blog-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: flex-start;
}

/* ========================================
   BLOG MAIN COLUMN
   ======================================== */

.quickerbill-theme-blog-main {
    width: 100%;
}

/* ========================================
   BLOG GRID
   ======================================== */

.quickerbill-theme-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--quickerbill-theme-variable-space-8);
    margin-bottom: var(--quickerbill-theme-variable-space-10);
}

/* ========================================
   BLOG POST CARD
   ======================================== */

.quickerbill-theme-blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--quickerbill-theme-variable-shadow-lg);
}

/* ========================================
   BLOG CARD IMAGE
   ======================================== */

.quickerbill-theme-blog-card-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--quickerbill-theme-variable-radius-lg) var(--quickerbill-theme-variable-radius-lg) 0 0;
    height: 240px;
}

.quickerbill-theme-blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--quickerbill-theme-variable-transition-normal);
}

.quickerbill-theme-blog-card:hover .quickerbill-theme-blog-card-image img {
    transform: scale(1.05);
}

.quickerbill-theme-blog-card-category {
    position: absolute;
    top: var(--quickerbill-theme-variable-space-4);
    left: var(--quickerbill-theme-variable-space-4);
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    padding: var(--quickerbill-theme-variable-space-1-5) var(--quickerbill-theme-variable-space-3);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    z-index: 1;
}

/* ========================================
   BLOG CARD BODY
   ======================================== */

.quickerbill-theme-blog-card-body {
    padding: var(--quickerbill-theme-variable-space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-3);
}

/* ========================================
   BLOG CARD META
   ======================================== */

.quickerbill-theme-blog-card-meta {
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-4);
    font-size: 13px;
    color: var(--quickerbill-theme-variable-gray-500);
}

.quickerbill-theme-blog-card-date,
.quickerbill-theme-blog-card-author {
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
}

.quickerbill-theme-blog-card-meta .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* ========================================
   BLOG CARD TITLE
   ======================================== */

.quickerbill-theme-blog-card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.quickerbill-theme-blog-card-title a {
    color: var(--quickerbill-theme-variable-gray-800);
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-blog-card-title a:hover {
    color: var(--quickerbill-theme-variable-primary);
}

/* ========================================
   BLOG CARD EXCERPT
   ======================================== */

.quickerbill-theme-blog-card-excerpt {
    font-size: 15px;
    line-height: 1.7;
    color: var(--quickerbill-theme-variable-gray-600);
    margin: 0;
}

/* ========================================
   BLOG CARD READ MORE
   ======================================== */

.quickerbill-theme-blog-card-read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
    color: var(--quickerbill-theme-variable-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    margin-top: auto;
}

.quickerbill-theme-blog-card-read-more:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-blog-card-read-more .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* ========================================
   NO POSTS MESSAGE
   ======================================== */

.quickerbill-theme-blog-no-posts {
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-10) 0;
}

.quickerbill-theme-blog-no-posts p {
    font-size: 18px;
    color: var(--quickerbill-theme-variable-gray-600);
    margin: 0;
}

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

.quickerbill-theme-blog-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--quickerbill-theme-variable-space-10);
}

.quickerbill-theme-blog-pagination .page-numbers {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2);
    margin: 0;
    padding: 0;
}

.quickerbill-theme-blog-pagination .page-numbers li {
    margin: 0;
}

.quickerbill-theme-blog-pagination .page-numbers a,
.quickerbill-theme-blog-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--quickerbill-theme-variable-space-3);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    color: var(--quickerbill-theme-variable-gray-700);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-blog-pagination .page-numbers a:hover {
    background: var(--quickerbill-theme-variable-gray-50);
    border-color: var(--quickerbill-theme-variable-gray-300);
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-blog-pagination .page-numbers .current {
    background: var(--quickerbill-theme-variable-primary);
    border-color: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-blog-pagination .page-numbers .dots {
    border: none;
    cursor: default;
}

.quickerbill-theme-blog-pagination .page-numbers .prev,
.quickerbill-theme-blog-pagination .page-numbers .next {
    gap: var(--quickerbill-theme-variable-space-1-5);
}

.quickerbill-theme-blog-pagination .page-numbers .prev .dashicons,
.quickerbill-theme-blog-pagination .page-numbers .next .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* ========================================
   SIDEBAR
   ======================================== */

.quickerbill-theme-blog-sidebar {
    position: sticky;
    top: 100px;
}

.quickerbill-theme-blog-sidebar-widget {
    background: var(--quickerbill-theme-variable-white);
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    padding: var(--quickerbill-theme-variable-space-6);
    margin-bottom: var(--quickerbill-theme-variable-space-6);
    transition: all var(--quickerbill-theme-variable-transition-fast);
    box-shadow: var(--quickerbill-theme-variable-shadow-sm);
}

.quickerbill-theme-blog-sidebar-widget:hover {
    box-shadow: var(--quickerbill-theme-variable-shadow-md);
    border-color: var(--quickerbill-theme-variable-gray-300);
}

.quickerbill-theme-blog-sidebar-widget:last-child {
    margin-bottom: 0;
}

.quickerbill-theme-blog-sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-5) 0;
    padding-bottom: var(--quickerbill-theme-variable-space-3);
    border-bottom: 2px solid var(--quickerbill-theme-variable-gray-100);
}

/* ========================================
   SIDEBAR - SEARCH
   ======================================== */

.quickerbill-theme-blog-search-form {
    display: flex;
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-blog-search-input {
    flex: 1;
    padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-3-5);
    border: 1px solid var(--quickerbill-theme-variable-gray-300);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    font-size: 14px;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-blog-search-input:focus {
    outline: none;
    border-color: var(--quickerbill-theme-variable-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.quickerbill-theme-blog-search-btn {
    padding: var(--quickerbill-theme-variable-space-2-5);
    flex-shrink: 0;
}

.quickerbill-theme-blog-search-btn .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* ========================================
   SIDEBAR - CATEGORIES
   ======================================== */

.quickerbill-theme-blog-categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quickerbill-theme-blog-categories-list li {
    margin-bottom: var(--quickerbill-theme-variable-space-3);
}

.quickerbill-theme-blog-categories-list li:last-child {
    margin-bottom: 0;
}

.quickerbill-theme-blog-categories-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--quickerbill-theme-variable-space-2) 0;
    color: var(--quickerbill-theme-variable-gray-700);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-blog-categories-list a:hover {
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-blog-category-count {
    color: var(--quickerbill-theme-variable-gray-500);
    font-size: 13px;
    font-weight: 600;
    background: var(--quickerbill-theme-variable-gray-100);
    padding: 2px 8px;
    border-radius: var(--quickerbill-theme-variable-radius-md);
}

/* ========================================
   SIDEBAR - RECENT POSTS
   ======================================== */

.quickerbill-theme-blog-recent-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quickerbill-theme-blog-recent-post-item {
    display: flex;
    gap: var(--quickerbill-theme-variable-space-3);
    padding: var(--quickerbill-theme-variable-space-3) 0;
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-100);
}

.quickerbill-theme-blog-recent-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.quickerbill-theme-blog-recent-post-item:first-child {
    padding-top: 0;
}

.quickerbill-theme-blog-recent-post-thumb {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: var(--quickerbill-theme-variable-radius-md);
    overflow: hidden;
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
}

.quickerbill-theme-blog-recent-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-blog-recent-post-thumb:hover img {
    transform: scale(1.05);
}

.quickerbill-theme-blog-recent-post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-1-5);
}

.quickerbill-theme-blog-recent-post-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.quickerbill-theme-blog-recent-post-title a {
    color: var(--quickerbill-theme-variable-gray-800);
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quickerbill-theme-blog-recent-post-title a:hover {
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-blog-recent-post-date {
    font-size: 12px;
    color: var(--quickerbill-theme-variable-gray-500);
    font-weight: 500;
}

/* ========================================
   SIDEBAR - TAGS
   ======================================== */

.quickerbill-theme-blog-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-blog-tag {
    display: inline-block;
    padding: var(--quickerbill-theme-variable-space-1-5) var(--quickerbill-theme-variable-space-3);
    background: var(--quickerbill-theme-variable-gray-50);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    color: var(--quickerbill-theme-variable-gray-700);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-blog-tag:hover {
    background: var(--quickerbill-theme-variable-primary);
    border-color: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    transform: translateY(-1px);
}
/**
 * Single Blog Widget Specific Styles
 * Uses centralized typography/badge from theme.css
 * Specific: Single post layout, content, author bio, related posts
 * Using naming convention: quickerbill-theme-single-blog-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-single-blog-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
}

/* ========================================
   SINGLE BLOG SECTION
   ======================================== */

.quickerbill-theme-single-blog-section {
    padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-12) 0;
}

/* ========================================
   SINGLE BLOG LAYOUT (2 Columns: Main + Sidebar)
   ======================================== */

.quickerbill-theme-single-blog-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: flex-start;
}

/* ========================================
   MAIN CONTENT COLUMN
   ======================================== */

.quickerbill-theme-single-blog-main {
    width: 100%;
}

/* ========================================
   FEATURED IMAGE
   ======================================== */

.quickerbill-theme-single-blog-featured-image {
    margin-bottom: var(--quickerbill-theme-variable-space-8);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    overflow: hidden;
}

.quickerbill-theme-single-blog-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   POST HEADER
   ======================================== */

.quickerbill-theme-single-blog-header {
    margin-bottom: var(--quickerbill-theme-variable-space-8);
}

/* ========================================
   CATEGORIES
   ======================================== */

.quickerbill-theme-single-blog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--quickerbill-theme-variable-space-2);
    margin-bottom: var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-single-blog-category {
    display: inline-block;
    padding: var(--quickerbill-theme-variable-space-1-5) var(--quickerbill-theme-variable-space-3);
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-transform: capitalize;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-single-blog-category:hover {
    background: var(--quickerbill-theme-variable-primary-hover);
    transform: translateY(-1px);
}

/* ========================================
   TITLE
   ======================================== */

.quickerbill-theme-single-blog-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-5) 0;
}

/* ========================================
   POST META
   ======================================== */

.quickerbill-theme-single-blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--quickerbill-theme-variable-space-5);
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-600);
}

.quickerbill-theme-single-blog-meta-item {
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
}

.quickerbill-theme-single-blog-meta-item .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--quickerbill-theme-variable-gray-500);
}

/* ========================================
   POST CONTENT
   ======================================== */

.quickerbill-theme-single-blog-content {
    font-size: 17px;
    line-height: 1.8;
    color: var(--quickerbill-theme-variable-gray-700);
    margin-bottom: var(--quickerbill-theme-variable-space-10);
}

.quickerbill-theme-single-blog-content p {
    margin-bottom: var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-single-blog-content p:last-child {
    margin-bottom: 0;
}

.quickerbill-theme-single-blog-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-5) 0;
    line-height: 1.3;
}

.quickerbill-theme-single-blog-content h3 {
    font-size: 26px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-4) 0;
    line-height: 1.4;
}

.quickerbill-theme-single-blog-content h4 {
    font-size: 22px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: var(--quickerbill-theme-variable-space-5) 0 var(--quickerbill-theme-variable-space-3) 0;
    line-height: 1.4;
}

.quickerbill-theme-single-blog-content ul,
.quickerbill-theme-single-blog-content ol {
    margin: var(--quickerbill-theme-variable-space-5) 0;
    padding-left: var(--quickerbill-theme-variable-space-8);
}

.quickerbill-theme-single-blog-content ul li,
.quickerbill-theme-single-blog-content ol li {
    margin-bottom: var(--quickerbill-theme-variable-space-2);
    line-height: 1.8;
}

.quickerbill-theme-single-blog-content ul {
    list-style: disc;
}

.quickerbill-theme-single-blog-content ol {
    list-style: decimal;
}

.quickerbill-theme-single-blog-content blockquote {
    margin: var(--quickerbill-theme-variable-space-6) 0;
    padding: var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-6);
    background: var(--quickerbill-theme-variable-gray-50);
    border-left: 4px solid var(--quickerbill-theme-variable-primary);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    font-style: italic;
    color: var(--quickerbill-theme-variable-gray-600);
}

.quickerbill-theme-single-blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    margin: var(--quickerbill-theme-variable-space-6) 0;
}

.quickerbill-theme-single-blog-content a {
    color: var(--quickerbill-theme-variable-primary);
    text-decoration: underline;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-single-blog-content a:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
}

.quickerbill-theme-single-blog-content code {
    background: var(--quickerbill-theme-variable-gray-100);
    padding: 2px 6px;
    border-radius: var(--quickerbill-theme-variable-radius-sm);
    font-size: 0.9em;
    font-family: 'Courier New', monospace;
}

.quickerbill-theme-single-blog-content pre {
    background: var(--quickerbill-theme-variable-gray-800);
    color: var(--quickerbill-theme-variable-white);
    padding: var(--quickerbill-theme-variable-space-5);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    overflow-x: auto;
    margin: var(--quickerbill-theme-variable-space-6) 0;
}

.quickerbill-theme-single-blog-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* ========================================
   POST TAGS SECTION
   ======================================== */

.quickerbill-theme-single-blog-tags-section {
    padding: var(--quickerbill-theme-variable-space-6) 0;
    border-top: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-200);
    margin-bottom: var(--quickerbill-theme-variable-space-10);
}

.quickerbill-theme-single-blog-tags-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-3) 0;
}

.quickerbill-theme-single-blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-single-blog-tag {
    display: inline-block;
    padding: var(--quickerbill-theme-variable-space-1-5) var(--quickerbill-theme-variable-space-3);
    background: var(--quickerbill-theme-variable-gray-50);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    color: var(--quickerbill-theme-variable-gray-700);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-single-blog-tag:hover {
    background: var(--quickerbill-theme-variable-primary);
    border-color: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    transform: translateY(-1px);
}

/* ========================================
   AUTHOR BIO
   ======================================== */

.quickerbill-theme-single-blog-author-bio {
    padding: var(--quickerbill-theme-variable-space-8);
    margin-bottom: var(--quickerbill-theme-variable-space-10);
    background: var(--quickerbill-theme-variable-gray-50);
}

.quickerbill-theme-single-blog-author-bio-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-5) 0;
}

.quickerbill-theme-single-blog-author-bio-content {
    display: flex;
    gap: var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-single-blog-author-avatar {
    flex-shrink: 0;
}

.quickerbill-theme-single-blog-author-avatar img {
    width: 80px;
    height: 80px;
    border-radius: var(--quickerbill-theme-variable-radius-full);
    border: 3px solid var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-single-blog-author-info {
    flex: 1;
}

.quickerbill-theme-single-blog-author-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 var(--quickerbill-theme-variable-space-2) 0;
}

.quickerbill-theme-single-blog-author-name a {
    color: var(--quickerbill-theme-variable-gray-800);
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-single-blog-author-name a:hover {
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-single-blog-author-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--quickerbill-theme-variable-gray-600);
    margin: 0 0 var(--quickerbill-theme-variable-space-3) 0;
}

.quickerbill-theme-single-blog-author-link {
    display: inline-flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
    color: var(--quickerbill-theme-variable-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-single-blog-author-link:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-single-blog-author-link .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* ========================================
   RELATED POSTS SECTION
   ======================================== */

.quickerbill-theme-single-blog-related-section {
    margin-top: var(--quickerbill-theme-variable-space-10);
}

.quickerbill-theme-single-blog-related-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-8) 0;
    text-align: center;
}

.quickerbill-theme-single-blog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--quickerbill-theme-variable-space-6);
}

/* ========================================
   RELATED POST CARD
   ======================================== */

.quickerbill-theme-single-blog-related-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quickerbill-theme-single-blog-related-card:hover {
    transform: translateY(-4px);
}

.quickerbill-theme-single-blog-related-card-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--quickerbill-theme-variable-radius-lg) var(--quickerbill-theme-variable-radius-lg) 0 0;
    height: 200px;
}

.quickerbill-theme-single-blog-related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--quickerbill-theme-variable-transition-normal);
}

.quickerbill-theme-single-blog-related-card:hover .quickerbill-theme-single-blog-related-card-image img {
    transform: scale(1.05);
}

.quickerbill-theme-single-blog-related-card-category {
    position: absolute;
    top: var(--quickerbill-theme-variable-space-3);
    left: var(--quickerbill-theme-variable-space-3);
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    padding: var(--quickerbill-theme-variable-space-1) var(--quickerbill-theme-variable-space-2-5);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.quickerbill-theme-single-blog-related-card-body {
    padding: var(--quickerbill-theme-variable-space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-2-5);
}

.quickerbill-theme-single-blog-related-card-meta {
    font-size: 12px;
    color: var(--quickerbill-theme-variable-gray-500);
}

.quickerbill-theme-single-blog-related-card-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.quickerbill-theme-single-blog-related-card-title a {
    color: var(--quickerbill-theme-variable-gray-800);
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-single-blog-related-card-title a:hover {
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-single-blog-related-card-read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
    color: var(--quickerbill-theme-variable-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    margin-top: auto;
}

.quickerbill-theme-single-blog-related-card-read-more:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-single-blog-related-card-read-more .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

/* ========================================
   SIDEBAR (Reuses Blog Widget Styles)
   ======================================== */

.quickerbill-theme-single-blog-sidebar {
    position: sticky;
    top: 100px;
}
/**
 * QuickerBill KB Widget Specific Styles
 * Uses centralized typography/components from theme.css
 * Naming convention: quickerbill-theme-knowledgebase-
 * 
 * Reuses from theme.css:
 * - .quickerbill-theme-container
 * - .quickerbill-theme-card
 * - .quickerbill-theme-btn
 * - .quickerbill-theme-badge-widget
 * - Typography classes
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-knowledgebase-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
}

/* ========================================
   HERO SECTION
   ======================================== */

.quickerbill-theme-knowledgebase-hero {
    background: var(--quickerbill-theme-variable-primary);
    padding: var(--quickerbill-theme-variable-space-20) 0 var(--quickerbill-theme-variable-space-15) 0;
    position: relative;
    overflow: hidden;
}

.quickerbill-theme-knowledgebase-hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
}

.quickerbill-theme-knowledgebase-hero-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-white);
    margin: 0 0 var(--quickerbill-theme-variable-space-10) 0;
    line-height: 1.3;
}

/* Hero Search */
.quickerbill-theme-knowledgebase-hero-search {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.quickerbill-theme-knowledgebase-hero-search-icon {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: rgba(100, 116, 139, 0.5);
    pointer-events: none;
}

.quickerbill-theme-knowledgebase-hero-search-input {
    width: 100%;
    padding: 20px 28px 20px 64px;
    font-size: 18px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--quickerbill-theme-variable-gray-800);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-hero-search-input:focus {
    outline: none;
    background: var(--quickerbill-theme-variable-white);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.quickerbill-theme-knowledgebase-hero-search-input::placeholder {
    color: rgba(100, 116, 139, 0.6);
}

/* ========================================
   MAIN SECTION
   ======================================== */

.quickerbill-theme-knowledgebase-section {
    padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-12) 0;
}

/* ========================================
   LAYOUT (2 COLUMNS: Main + Sidebar)
   ======================================== */

.quickerbill-theme-knowledgebase-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: flex-start;
}

/* ========================================
   MAIN CONTENT COLUMN
   ======================================== */

.quickerbill-theme-knowledgebase-main {
    width: 100%;
}

/* ========================================
   CATEGORY GRID
   ======================================== */

.quickerbill-theme-knowledgebase-category-grid {
    display: grid;
    gap: var(--quickerbill-theme-variable-space-6);
}

.quickerbill-theme-knowledgebase-category-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.quickerbill-theme-knowledgebase-category-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.quickerbill-theme-knowledgebase-category-grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

/* Category Card */
.quickerbill-theme-knowledgebase-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-10) var(--quickerbill-theme-variable-space-6);
    background: var(--quickerbill-theme-variable-white);
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-normal);
    box-shadow: var(--quickerbill-theme-variable-shadow-sm);
}

.quickerbill-theme-knowledgebase-category-card:hover {
    border-color: var(--quickerbill-theme-variable-primary);
    box-shadow: var(--quickerbill-theme-variable-shadow-lg);
    transform: translateY(-4px);
}

/* Category Icon */
.quickerbill-theme-knowledgebase-category-card-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--quickerbill-theme-variable-space-5);
    color: var(--quickerbill-theme-variable-primary);
    font-size: 48px;
}

.quickerbill-theme-knowledgebase-category-card-icon i,
.quickerbill-theme-knowledgebase-category-card-icon svg {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--quickerbill-theme-variable-primary);
    fill: var(--quickerbill-theme-variable-primary);
}

/* Category Title */
.quickerbill-theme-knowledgebase-category-card-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-3) 0;
    line-height: 1.3;
}

/* Category Description */
.quickerbill-theme-knowledgebase-category-card-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--quickerbill-theme-variable-gray-600);
    margin: 0 0 var(--quickerbill-theme-variable-space-4) 0;
}

/* Category Count */
.quickerbill-theme-knowledgebase-category-card-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--quickerbill-theme-variable-gray-500);
}

/* ========================================
   ARCHIVE HEADER (Search, Category)
   ======================================== */

.quickerbill-theme-knowledgebase-archive-header {
    padding: var(--quickerbill-theme-variable-space-12) 0 var(--quickerbill-theme-variable-space-8) 0;
    background: var(--quickerbill-theme-variable-gray-50);
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-200);
}

.quickerbill-theme-knowledgebase-archive-search,
.quickerbill-theme-knowledgebase-archive-category {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-4);
}

/* Archive Title */
.quickerbill-theme-knowledgebase-archive-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0;
    line-height: 1.2;
}

/* Archive Label (Category:) */
.quickerbill-theme-knowledgebase-archive-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--quickerbill-theme-variable-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Archive Category Name */
.quickerbill-theme-knowledgebase-archive-category-name {
    font-size: 42px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0;
    line-height: 1.2;
}

/* Archive Count */
.quickerbill-theme-knowledgebase-archive-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--quickerbill-theme-variable-gray-500);
}

/* Archive Description */
.quickerbill-theme-knowledgebase-archive-description {
    font-size: 17px;
    line-height: 1.7;
    color: var(--quickerbill-theme-variable-gray-600);
    margin: 0;
    max-width: 700px;
}

/* ========================================
   BREADCRUMBS
   ======================================== */

.quickerbill-theme-knowledgebase-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--quickerbill-theme-variable-space-2);
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-600);
    margin-bottom: var(--quickerbill-theme-variable-space-6);
    padding-bottom: var(--quickerbill-theme-variable-space-4);
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-100);
}

.quickerbill-theme-knowledgebase-breadcrumb-link {
    color: var(--quickerbill-theme-variable-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-breadcrumb-link:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
}

.quickerbill-theme-knowledgebase-breadcrumb-separator {
    color: var(--quickerbill-theme-variable-gray-400);
    font-weight: 400;
}

.quickerbill-theme-knowledgebase-breadcrumb-current {
    color: var(--quickerbill-theme-variable-gray-700);
    font-weight: 500;
}

/* ========================================
   ARTICLE GRID
   ======================================== */

.quickerbill-theme-knowledgebase-article-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--quickerbill-theme-variable-space-8);
    margin-bottom: var(--quickerbill-theme-variable-space-10);
}

/* ========================================
   ARTICLE CARD
   ======================================== */

.quickerbill-theme-knowledgebase-article-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--quickerbill-theme-variable-shadow-lg);
}

/* Card Image */
.quickerbill-theme-knowledgebase-article-card-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--quickerbill-theme-variable-radius-lg) var(--quickerbill-theme-variable-radius-lg) 0 0;
    height: 240px;
}

.quickerbill-theme-knowledgebase-article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--quickerbill-theme-variable-transition-normal);
}

.quickerbill-theme-knowledgebase-article-card:hover .quickerbill-theme-knowledgebase-article-card-image img {
    transform: scale(1.05);
}

.quickerbill-theme-knowledgebase-article-card-category {
    position: absolute;
    top: var(--quickerbill-theme-variable-space-4);
    left: var(--quickerbill-theme-variable-space-4);
    background: var(--quickerbill-theme-variable-white);
    color: var(--quickerbill-theme-variable-gray-800);
    padding: var(--quickerbill-theme-variable-space-1-5) var(--quickerbill-theme-variable-space-3);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    z-index: 1;
    box-shadow: var(--quickerbill-theme-variable-shadow-sm);
}

/* Card Body */
.quickerbill-theme-knowledgebase-article-card-body {
    padding: var(--quickerbill-theme-variable-space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-3);
}

/* Card Meta (NO AUTHOR - only date and reading time) */
.quickerbill-theme-knowledgebase-article-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--quickerbill-theme-variable-space-2);
    font-size: 13px;
    color: var(--quickerbill-theme-variable-gray-500);
}

.quickerbill-theme-knowledgebase-article-card-category-text {
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-700);
}

.quickerbill-theme-knowledgebase-article-card-date {
    font-weight: 500;
}

.quickerbill-theme-knowledgebase-article-card-reading-time {
    font-weight: 500;
}

/* Card Title */
.quickerbill-theme-knowledgebase-article-card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.quickerbill-theme-knowledgebase-article-card-title a {
    color: var(--quickerbill-theme-variable-gray-800);
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-article-card-title a:hover {
    color: var(--quickerbill-theme-variable-primary);
}

/* Card Excerpt */
.quickerbill-theme-knowledgebase-article-card-excerpt {
    font-size: 15px;
    line-height: 1.7;
    color: var(--quickerbill-theme-variable-gray-600);
    margin: 0;
}

/* Card Read More */
.quickerbill-theme-knowledgebase-article-card-read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
    color: var(--quickerbill-theme-variable-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    margin-top: auto;
}

.quickerbill-theme-knowledgebase-article-card-read-more:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-knowledgebase-article-card-read-more .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* ========================================
   NO ARTICLES MESSAGE
   ======================================== */

.quickerbill-theme-knowledgebase-no-articles {
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-10) 0;
}

.quickerbill-theme-knowledgebase-no-articles p {
    font-size: 18px;
    color: var(--quickerbill-theme-variable-gray-600);
    margin: 0;
}

/* ========================================
   SINGLE ARTICLE
   ======================================== */

.quickerbill-theme-knowledgebase-single-header {
    margin-bottom: var(--quickerbill-theme-variable-space-8);
}

/* Single Categories */
.quickerbill-theme-knowledgebase-single-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--quickerbill-theme-variable-space-2);
    margin-bottom: var(--quickerbill-theme-variable-space-5);
}

/* Single Title */
.quickerbill-theme-knowledgebase-single-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-5) 0;
}

/* Single Meta (NO AUTHOR - only date and reading time) */
.quickerbill-theme-knowledgebase-single-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--quickerbill-theme-variable-space-5);
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-600);
}

.quickerbill-theme-knowledgebase-single-meta-item {
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
}

.quickerbill-theme-knowledgebase-single-meta-item .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--quickerbill-theme-variable-gray-500);
}

/* Single Content */
.quickerbill-theme-knowledgebase-single-content {
    font-size: 17px;
    line-height: 1.8;
    color: var(--quickerbill-theme-variable-gray-700);
    margin-bottom: var(--quickerbill-theme-variable-space-10);
}

.quickerbill-theme-knowledgebase-single-content p {
    margin-bottom: var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-knowledgebase-single-content p:last-child {
    margin-bottom: 0;
}

.quickerbill-theme-knowledgebase-single-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-5) 0;
    line-height: 1.3;
}

.quickerbill-theme-knowledgebase-single-content h3 {
    font-size: 26px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-4) 0;
    line-height: 1.4;
}

.quickerbill-theme-knowledgebase-single-content h4 {
    font-size: 22px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: var(--quickerbill-theme-variable-space-5) 0 var(--quickerbill-theme-variable-space-3) 0;
    line-height: 1.4;
}

.quickerbill-theme-knowledgebase-single-content ul,
.quickerbill-theme-knowledgebase-single-content ol {
    margin: var(--quickerbill-theme-variable-space-5) 0;
    padding-left: var(--quickerbill-theme-variable-space-8);
}

.quickerbill-theme-knowledgebase-single-content ul li,
.quickerbill-theme-knowledgebase-single-content ol li {
    margin-bottom: var(--quickerbill-theme-variable-space-2);
    line-height: 1.8;
}

.quickerbill-theme-knowledgebase-single-content ul {
    list-style: disc;
}

.quickerbill-theme-knowledgebase-single-content ol {
    list-style: decimal;
}

.quickerbill-theme-knowledgebase-single-content blockquote {
    margin: var(--quickerbill-theme-variable-space-6) 0;
    padding: var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-6);
    background: var(--quickerbill-theme-variable-gray-50);
    border-left: 4px solid var(--quickerbill-theme-variable-primary);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    font-style: italic;
    color: var(--quickerbill-theme-variable-gray-600);
}

.quickerbill-theme-knowledgebase-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    margin: var(--quickerbill-theme-variable-space-6) 0;
}

.quickerbill-theme-knowledgebase-single-content a {
    color: var(--quickerbill-theme-variable-primary);
    text-decoration: underline;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-single-content a:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
}

.quickerbill-theme-knowledgebase-single-content code {
    background: var(--quickerbill-theme-variable-gray-100);
    padding: 2px 6px;
    border-radius: var(--quickerbill-theme-variable-radius-sm);
    font-size: 0.9em;
    font-family: 'Courier New', monospace;
}

.quickerbill-theme-knowledgebase-single-content pre {
    background: var(--quickerbill-theme-variable-gray-800);
    color: var(--quickerbill-theme-variable-white);
    padding: var(--quickerbill-theme-variable-space-5);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    overflow-x: auto;
    margin: var(--quickerbill-theme-variable-space-6) 0;
}

.quickerbill-theme-knowledgebase-single-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Single Tags Section */
.quickerbill-theme-knowledgebase-single-tags-section {
    padding: var(--quickerbill-theme-variable-space-6) 0;
    border-top: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-200);
    margin-bottom: var(--quickerbill-theme-variable-space-10);
}

.quickerbill-theme-knowledgebase-single-tags-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-3) 0;
}

.quickerbill-theme-knowledgebase-single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-knowledgebase-single-tag {
    display: inline-block;
    padding: var(--quickerbill-theme-variable-space-1-5) var(--quickerbill-theme-variable-space-3);
    background: var(--quickerbill-theme-variable-gray-50);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    color: var(--quickerbill-theme-variable-gray-700);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-single-tag:hover {
    background: var(--quickerbill-theme-variable-primary);
    border-color: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    transform: translateY(-1px);
}

/* ========================================
   HELPFUL VOTING SECTION
   ======================================== */

.quickerbill-theme-knowledgebase-single-helpful-section {
    padding: var(--quickerbill-theme-variable-space-8) 0;
    margin: var(--quickerbill-theme-variable-space-10) 0;
    border-top: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-200);
    text-align: center;
}

.quickerbill-theme-knowledgebase-single-helpful-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-6) 0;
}

.quickerbill-theme-knowledgebase-single-helpful-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-5);
}

/* Voting Buttons (Using existing .quickerbill-theme-btn patterns) */
.quickerbill-theme-knowledgebase-single-helpful-buttons {
    display: flex;
    gap: var(--quickerbill-theme-variable-space-4);
}

.quickerbill-theme-knowledgebase-single-helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2);
    padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-6);
    background: var(--quickerbill-theme-variable-white);
    border: 2px solid var(--quickerbill-theme-variable-gray-300);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    color: var(--quickerbill-theme-variable-gray-700);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    position: relative;
}

.quickerbill-theme-knowledgebase-single-helpful-btn:hover:not(:disabled) {
    border-color: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-primary);
    transform: translateY(-2px);
    box-shadow: var(--quickerbill-theme-variable-shadow-md);
}

.quickerbill-theme-knowledgebase-single-helpful-btn:active:not(:disabled) {
    transform: translateY(0);
}

.quickerbill-theme-knowledgebase-single-helpful-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quickerbill-theme-knowledgebase-single-helpful-btn .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

/* Yes Button - Use success color */
.quickerbill-theme-knowledgebase-single-helpful-btn-yes:hover:not(:disabled) {
    border-color: var(--quickerbill-theme-variable-success);
    color: var(--quickerbill-theme-variable-success);
}

/* No Button - Use error color */
.quickerbill-theme-knowledgebase-single-helpful-btn-no:hover:not(:disabled) {
    border-color: var(--quickerbill-theme-variable-error);
    color: var(--quickerbill-theme-variable-error);
}

/* Loading State (Uses existing quickerbill-theme-animation-spin) */
.quickerbill-theme-knowledgebase-single-helpful-btn.loading {
    color: transparent;
    pointer-events: none;
}

.quickerbill-theme-knowledgebase-single-helpful-btn.loading .dashicons,
.quickerbill-theme-knowledgebase-single-helpful-btn.loading .quickerbill-theme-knowledgebase-single-helpful-btn-text {
    visibility: hidden;
}

/* Loading State (Widget-specific spinner that combines centering + rotation) */
.quickerbill-theme-knowledgebase-single-helpful-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid var(--quickerbill-theme-variable-gray-300);
    border-top-color: var(--quickerbill-theme-variable-primary);
    border-radius: var(--quickerbill-theme-variable-radius-full);
    animation: quickerbill-knowledgebase-spinner-spin var(--quickerbill-theme-variable-transition-slower) linear infinite;
}

/* Widget-specific spinner animation (combines centering + core spin) */
@keyframes quickerbill-knowledgebase-spinner-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Thank You Message (Uses existing success badge styles) */
.quickerbill-theme-knowledgebase-single-helpful-message {
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2);
    padding: var(--quickerbill-theme-variable-space-4) var(--quickerbill-theme-variable-space-6);
    background: var(--quickerbill-theme-variable-success-bg);
    border: 2px solid var(--quickerbill-theme-variable-success);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    color: var(--quickerbill-theme-variable-success-text);
    font-size: 16px;
    font-weight: 600;
}

.quickerbill-theme-knowledgebase-single-helpful-message .dashicons {
    width: 24px;
    height: 24px;
    font-size: 24px;
    flex-shrink: 0;
}

/* Stats Display (Widget-specific layout) */
.quickerbill-theme-knowledgebase-single-helpful-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-knowledgebase-single-helpful-percentage {
    font-size: 32px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-success);
    line-height: 1;
}

.quickerbill-theme-knowledgebase-single-helpful-count {
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-600);
    font-weight: 500;
}

/* Error Message (Uses existing error message styles) */
.quickerbill-theme-knowledgebase-single-helpful-error {
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2);
    padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-5);
    background: var(--quickerbill-theme-variable-error-bg);
    border: 2px solid var(--quickerbill-theme-variable-error);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    color: var(--quickerbill-theme-variable-error-text);
    font-size: 14px;
    font-weight: 600;
    animation: quickerbill-theme-animation-slide-down var(--quickerbill-theme-variable-transition-normal) ease;
}

.quickerbill-theme-knowledgebase-single-helpful-error .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
    flex-shrink: 0;
}

/* Search Error (Uses existing shake animation) */
.quickerbill-theme-knowledgebase-search-error {
    animation: quickerbill-theme-animation-shake 0.5s;
    border-color: var(--quickerbill-theme-variable-error) !important;
}

/* ========================================
   RELATED ARTICLES SECTION
   ======================================== */

.quickerbill-theme-knowledgebase-single-related-section {
    margin-top: var(--quickerbill-theme-variable-space-10);
}

.quickerbill-theme-knowledgebase-single-related-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-8) 0;
    text-align: center;
}

.quickerbill-theme-knowledgebase-single-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--quickerbill-theme-variable-space-6);
}

/* Related Card */
.quickerbill-theme-knowledgebase-related-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quickerbill-theme-knowledgebase-related-card:hover {
    transform: translateY(-4px);
}

.quickerbill-theme-knowledgebase-related-card-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--quickerbill-theme-variable-radius-lg) var(--quickerbill-theme-variable-radius-lg) 0 0;
    height: 200px;
}

.quickerbill-theme-knowledgebase-related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--quickerbill-theme-variable-transition-normal);
}

.quickerbill-theme-knowledgebase-related-card:hover .quickerbill-theme-knowledgebase-related-card-image img {
    transform: scale(1.05);
}

.quickerbill-theme-knowledgebase-related-card-category {
    position: absolute;
    top: var(--quickerbill-theme-variable-space-3);
    left: var(--quickerbill-theme-variable-space-3);
    background: var(--quickerbill-theme-variable-white);
    color: var(--quickerbill-theme-variable-gray-800);
    padding: var(--quickerbill-theme-variable-space-1) var(--quickerbill-theme-variable-space-2-5);
    border-radius: var(--quickerbill-theme-variable-radius-md);
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.quickerbill-theme-knowledgebase-related-card-body {
    padding: var(--quickerbill-theme-variable-space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--quickerbill-theme-variable-space-2-5);
}

.quickerbill-theme-knowledgebase-related-card-meta {
    font-size: 12px;
    color: var(--quickerbill-theme-variable-gray-500);
}

.quickerbill-theme-knowledgebase-related-card-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.quickerbill-theme-knowledgebase-related-card-title a {
    color: var(--quickerbill-theme-variable-gray-800);
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-related-card-title a:hover {
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-knowledgebase-related-card-read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1-5);
    color: var(--quickerbill-theme-variable-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    margin-top: auto;
}

.quickerbill-theme-knowledgebase-related-card-read-more:hover {
    color: var(--quickerbill-theme-variable-primary-hover);
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-knowledgebase-related-card-read-more .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

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

.quickerbill-theme-knowledgebase-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--quickerbill-theme-variable-space-10);
}

.quickerbill-theme-knowledgebase-pagination .page-numbers {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2);
    margin: 0;
    padding: 0;
}

.quickerbill-theme-knowledgebase-pagination .page-numbers li {
    margin: 0;
}

.quickerbill-theme-knowledgebase-pagination .page-numbers a,
.quickerbill-theme-knowledgebase-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--quickerbill-theme-variable-space-3);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    color: var(--quickerbill-theme-variable-gray-700);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-pagination .page-numbers a:hover {
    background: var(--quickerbill-theme-variable-gray-50);
    border-color: var(--quickerbill-theme-variable-gray-300);
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-knowledgebase-pagination .page-numbers .current {
    background: var(--quickerbill-theme-variable-primary);
    border-color: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-knowledgebase-pagination .page-numbers .dots {
    border: none;
    cursor: default;
}

.quickerbill-theme-knowledgebase-pagination .page-numbers .prev,
.quickerbill-theme-knowledgebase-pagination .page-numbers .next {
    gap: var(--quickerbill-theme-variable-space-1-5);
}

.quickerbill-theme-knowledgebase-pagination .page-numbers .prev .dashicons,
.quickerbill-theme-knowledgebase-pagination .page-numbers .next .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* ========================================
   SIDEBAR
   ======================================== */

.quickerbill-theme-knowledgebase-sidebar {
    position: sticky;
    top: 100px;
}

.quickerbill-theme-knowledgebase-sidebar-widget {
    background: var(--quickerbill-theme-variable-white);
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    padding: var(--quickerbill-theme-variable-space-6);
    margin-bottom: var(--quickerbill-theme-variable-space-6);
    transition: all var(--quickerbill-theme-variable-transition-fast);
    box-shadow: var(--quickerbill-theme-variable-shadow-sm);
}

.quickerbill-theme-knowledgebase-sidebar-widget:hover {
    box-shadow: var(--quickerbill-theme-variable-shadow-md);
    border-color: var(--quickerbill-theme-variable-gray-300);
}

.quickerbill-theme-knowledgebase-sidebar-widget:last-child {
    margin-bottom: 0;
}

.quickerbill-theme-knowledgebase-sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-5) 0;
    padding-bottom: var(--quickerbill-theme-variable-space-3);
    border-bottom: 2px solid var(--quickerbill-theme-variable-gray-100);
}

/* ========================================
   SIDEBAR - SEARCH
   ======================================== */

.quickerbill-theme-knowledgebase-search-form {
    display: flex;
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-knowledgebase-search-input {
    flex: 1;
    padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-3-5);
    border: 1px solid var(--quickerbill-theme-variable-gray-300);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    font-size: 14px;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-search-input:focus {
    outline: none;
    border-color: var(--quickerbill-theme-variable-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.quickerbill-theme-knowledgebase-search-btn {
    padding: var(--quickerbill-theme-variable-space-2-5);
    flex-shrink: 0;
}

.quickerbill-theme-knowledgebase-search-btn .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* ========================================
   SIDEBAR - CATEGORY TREE
   ======================================== */

.quickerbill-theme-knowledgebase-category-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quickerbill-theme-knowledgebase-category-item {
    margin-bottom: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-knowledgebase-category-item:last-child {
    margin-bottom: 0;
}

.quickerbill-theme-knowledgebase-category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--quickerbill-theme-variable-space-2) 0;
    color: var(--quickerbill-theme-variable-gray-700);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-category-link:hover {
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-knowledgebase-category-item.current-category > .quickerbill-theme-knowledgebase-category-link {
    color: var(--quickerbill-theme-variable-primary);
    font-weight: 600;
}

.quickerbill-theme-knowledgebase-category-count {
    color: var(--quickerbill-theme-variable-gray-500);
    font-size: 13px;
    font-weight: 600;
    background: var(--quickerbill-theme-variable-gray-100);
    padding: 2px 8px;
    border-radius: var(--quickerbill-theme-variable-radius-md);
}

/* Category Tree Children (Subcategories) */
.quickerbill-theme-knowledgebase-category-tree-children {
    list-style: none;
    margin: var(--quickerbill-theme-variable-space-2) 0 0 var(--quickerbill-theme-variable-space-5);
    padding: 0;
    border-left: 2px solid var(--quickerbill-theme-variable-gray-200);
}

.quickerbill-theme-knowledgebase-category-tree-children .quickerbill-theme-knowledgebase-category-item {
    padding-left: var(--quickerbill-theme-variable-space-4);
}

.quickerbill-theme-knowledgebase-category-tree-children .quickerbill-theme-knowledgebase-category-link {
    font-size: 14px;
}

/* ========================================
   SIDEBAR - POPULAR ARTICLES
   ======================================== */

.quickerbill-theme-knowledgebase-popular-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quickerbill-theme-knowledgebase-popular-item {
    padding: var(--quickerbill-theme-variable-space-3) 0;
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-100);
}

.quickerbill-theme-knowledgebase-popular-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.quickerbill-theme-knowledgebase-popular-item:first-child {
    padding-top: 0;
}

.quickerbill-theme-knowledgebase-popular-item a {
    text-decoration: none;
    display: block;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-popular-item a:hover {
    transform: translateX(4px);
}

.quickerbill-theme-knowledgebase-popular-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-1) 0;
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-knowledgebase-popular-item a:hover .quickerbill-theme-knowledgebase-popular-title {
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-knowledgebase-popular-meta {
    font-size: 12px;
    color: var(--quickerbill-theme-variable-gray-500);
    font-weight: 500;
}

/* ========================================
   CATEGORY TREE TOGGLE (Added by JS)
   ======================================== */

.quickerbill-theme-knowledgebase-category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 16px;
    margin-right: var(--quickerbill-theme-variable-space-2);
    color: var(--quickerbill-theme-variable-gray-400);
    transition: transform var(--quickerbill-theme-variable-transition-fast);
    flex-shrink: 0;
}

.quickerbill-theme-knowledgebase-category-toggle.expanded {
    transform: rotate(180deg);
}

.quickerbill-theme-knowledgebase-category-item:hover .quickerbill-theme-knowledgebase-category-toggle {
    color: var(--quickerbill-theme-variable-primary);
}
/**
 * Product Comparison Widget Specific Styles
 * Uses centralized typography/badge from theme.css
 * Specific: Comparison table, pricing, features
 * Using naming convention: quickerbill-theme-product-comparison-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-product-comparison-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
}

/* ========================================
   COMPARISON SECTION
   ======================================== */

.quickerbill-theme-product-comparison-section {
    padding: 0 0 var(--quickerbill-theme-variable-space-12) 0;
}

/* ========================================
   BILLING CYCLE SECTION
   ======================================== */

.quickerbill-theme-product-comparison-billing-cycle-section {
    padding: var(--quickerbill-theme-variable-space-6) 0;
}

/* ========================================
   LOADING STATE
   ======================================== */

.quickerbill-theme-product-comparison-loading {
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-15) var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-product-comparison-loading p {
    margin-top: var(--quickerbill-theme-variable-space-5);
    color: var(--quickerbill-theme-variable-gray-500);
    font-size: 14px;
}

/* ========================================
   TABLE WRAPPER
   ======================================== */

.quickerbill-theme-product-comparison-table-wrapper {
    overflow-x: auto;
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    box-shadow: var(--quickerbill-theme-variable-shadow-lg);
}

/* ========================================
   COMPARISON TABLE
   ======================================== */

.quickerbill-theme-product-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--quickerbill-theme-variable-white);
    border: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    overflow: hidden;
}

/* Dynamic column widths based on product count */
.quickerbill-theme-product-comparison-table[data-columns="2"] th:first-child,
.quickerbill-theme-product-comparison-table[data-columns="2"] td:first-child {
    width: 40%;
}

.quickerbill-theme-product-comparison-table[data-columns="2"] th:not(:first-child),
.quickerbill-theme-product-comparison-table[data-columns="2"] td:not(:first-child) {
    width: 30%;
}

.quickerbill-theme-product-comparison-table[data-columns="3"] th:first-child,
.quickerbill-theme-product-comparison-table[data-columns="3"] td:first-child {
    width: 30%;
}

.quickerbill-theme-product-comparison-table[data-columns="3"] th:not(:first-child),
.quickerbill-theme-product-comparison-table[data-columns="3"] td:not(:first-child) {
    width: 23.33%;
}

.quickerbill-theme-product-comparison-table[data-columns="4"] th:first-child,
.quickerbill-theme-product-comparison-table[data-columns="4"] td:first-child {
    width: 25%;
}

.quickerbill-theme-product-comparison-table[data-columns="4"] th:not(:first-child),
.quickerbill-theme-product-comparison-table[data-columns="4"] td:not(:first-child) {
    width: 18.75%;
}

/* ========================================
   TABLE HEADER
   ======================================== */

.quickerbill-theme-product-comparison-header-row {
    background: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-product-comparison-feature-header {
    padding: var(--quickerbill-theme-variable-space-8) var(--quickerbill-theme-variable-space-6);
    text-align: left;
    font-size: 20px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-800);
    background: var(--quickerbill-theme-variable-gray-50);
    border-bottom: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-right: 1px solid var(--quickerbill-theme-variable-gray-200);
    vertical-align: middle;
}

.quickerbill-theme-product-comparison-product-header {
    padding: var(--quickerbill-theme-variable-space-8) var(--quickerbill-theme-variable-space-6);
    text-align: center;
    background: var(--quickerbill-theme-variable-white);
    border-bottom: 2px solid var(--quickerbill-theme-variable-gray-200);
    border-right: 1px solid var(--quickerbill-theme-variable-gray-200);
    vertical-align: top;
}

.quickerbill-theme-product-comparison-product-header:last-child {
    border-right: none;
}

/* ========================================
   PRODUCT NAME
   ======================================== */

.quickerbill-theme-product-comparison-product-name {
    font-size: 22px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-800);
    margin: 0 0 var(--quickerbill-theme-variable-space-5) 0;
    line-height: 1.3;
}

/* ========================================
   PRICE BOX
   ======================================== */

.quickerbill-theme-product-comparison-price-box {
    margin-bottom: var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-price-main {
    justify-content: center;
    margin-bottom: var(--quickerbill-theme-variable-space-2);
    gap: 0;
}

.quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-price-amount {
    font-size: 36px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-800);
}

.quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-price-period {
    font-size: 16px;
    color: var(--quickerbill-theme-variable-gray-500);
    font-weight: 700;
    margin-left: 0;
}

.quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-billing-cycle {
    display: block;
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-500);
    font-weight: 500;
}

/* Promotion Pricing */
.quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-price-with-promo {
    flex-direction: column;
    align-items: center;
}

.quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-price-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-price-original {
    font-size: 20px;
    color: var(--quickerbill-theme-variable-gray-400);
    text-decoration: line-through;
    font-weight: 400;
}

.quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-price-promo {
    color: var(--quickerbill-theme-variable-success);
}

.quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-price-promo .quickerbill-theme-product-grid-price-period {
    color: var(--quickerbill-theme-variable-success);
    font-weight: 700;
    margin-left: 0;
}

/* ========================================
   ORDER BUTTON
   ======================================== */

.quickerbill-theme-product-comparison-order-btn {
    width: 100%;
    justify-content: center;
}

/* ========================================
   FEATURE ROWS
   ======================================== */

.quickerbill-theme-product-comparison-row {
    transition: background var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-product-comparison-row:hover {
    background: var(--quickerbill-theme-variable-gray-50);
}

.quickerbill-theme-product-comparison-row-even {
    background: var(--quickerbill-theme-variable-white);
}

.quickerbill-theme-product-comparison-row-odd {
    background: var(--quickerbill-theme-variable-gray-50);
}

/* ========================================
   FEATURE LABEL
   ======================================== */

.quickerbill-theme-product-comparison-feature-label {
    padding: var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-6);
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-700);
    border-right: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-200);
    background: var(--quickerbill-theme-variable-gray-50);
}

/* ========================================
   TOOLTIP
   ======================================== */

.quickerbill-theme-product-comparison-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--quickerbill-theme-variable-space-1-5);
    cursor: help;
    position: relative;
}

.quickerbill-theme-product-comparison-tooltip .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: var(--quickerbill-theme-variable-gray-400);
    transition: color var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-product-comparison-tooltip:hover .dashicons {
    color: var(--quickerbill-theme-variable-primary);
}

/* ========================================
   FEATURE VALUE
   ======================================== */

.quickerbill-theme-product-comparison-feature-value {
    padding: var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-6);
    text-align: center;
    font-size: 15px;
    color: var(--quickerbill-theme-variable-gray-600);
    border-right: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-200);
    vertical-align: middle;
}

.quickerbill-theme-product-comparison-feature-value:last-child {
    border-right: none;
}

/* Last row no bottom border */
.quickerbill-theme-product-comparison-row:last-child .quickerbill-theme-product-comparison-feature-label,
.quickerbill-theme-product-comparison-row:last-child .quickerbill-theme-product-comparison-feature-value {
    border-bottom: none;
}

/* ========================================
   CHECKMARK / CROSS
   ======================================== */

.quickerbill-theme-product-comparison-check,
.quickerbill-theme-product-comparison-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--quickerbill-theme-variable-radius-full);
}

.quickerbill-theme-product-comparison-check {
    background: var(--quickerbill-theme-variable-success-bg);
}

.quickerbill-theme-product-comparison-check .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--quickerbill-theme-variable-success);
}

.quickerbill-theme-product-comparison-cross {
    background: var(--quickerbill-theme-variable-error-bg);
}

.quickerbill-theme-product-comparison-cross .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--quickerbill-theme-variable-error);
}

/* ========================================
   EDITOR PREVIEW MODE
   ======================================== */

.quickerbill-theme-product-comparison-editor-mode {
    opacity: 0.95;
}

.quickerbill-theme-product-comparison-editor-empty {
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-10) var(--quickerbill-theme-variable-space-6);
    color: var(--quickerbill-theme-variable-gray-500);
}

.quickerbill-theme-product-comparison-editor-empty p {
    margin: 0;
    font-size: 14px;
}
/**
 * Spotlight TLDs Widget Specific Styles
 * Uses centralized typography/badge from theme.css
 * Specific: Grid layout, TLD cards, pricing display
 * Using naming convention: quickerbill-theme-spotlight-tlds-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-spotlight-tlds-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
}

/* ========================================
   TLDs SECTION
   ======================================== */

.quickerbill-theme-spotlight-tlds-section {
    padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-12) 0;
}

/* ========================================
   LOADING STATE
   ======================================== */

.quickerbill-theme-spotlight-tlds-loading {
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-15) var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-spotlight-tlds-loading p {
    margin-top: var(--quickerbill-theme-variable-space-5);
    color: var(--quickerbill-theme-variable-gray-500);
    font-size: 14px;
}

/* ========================================
   TLDs GRID
   ======================================== */

.quickerbill-theme-spotlight-tlds-grid {
    display: grid;
    gap: var(--quickerbill-theme-variable-space-6);
    align-items: stretch;
    margin-bottom: var(--quickerbill-theme-variable-space-10);
}

/* Dynamic column support */
.quickerbill-theme-spotlight-tlds-grid[data-columns="1"] {
    grid-template-columns: 1fr;
}

.quickerbill-theme-spotlight-tlds-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.quickerbill-theme-spotlight-tlds-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.quickerbill-theme-spotlight-tlds-grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.quickerbill-theme-spotlight-tlds-grid[data-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
}

.quickerbill-theme-spotlight-tlds-grid[data-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
}

/* ========================================
   TLD CARD
   ======================================== */

.quickerbill-theme-spotlight-tld-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-8) var(--quickerbill-theme-variable-space-6);
    gap: var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-spotlight-tld-card.loading {
    opacity: 0.6;
}

/* ========================================
   TLD NAME
   ======================================== */

.quickerbill-theme-spotlight-tld-name {
    font-size: 36px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-secondary);
    margin: 0;
    line-height: 1.2;
}

/* ========================================
   PRICING SECTION
   ======================================== */

.quickerbill-theme-spotlight-tld-pricing {
    width: 100%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-spotlight-tld-price-loading {
    padding: var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-spotlight-tld-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-gray-800);
    line-height: 1.2;
}

.quickerbill-theme-spotlight-tld-renewal {
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-500);
    font-weight: 500;
}

.quickerbill-theme-spotlight-tld-no-price {
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-400);
    font-style: italic;
}

/* ========================================
   BUTTON
   ======================================== */

.quickerbill-theme-spotlight-tld-button {
    width: 100%;
    padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-5);
}

/* ========================================
   BOTTOM LINK
   ======================================== */

.quickerbill-theme-spotlight-tlds-bottom-link {
    text-align: center;
    margin-top: var(--quickerbill-theme-variable-space-10);
}

/* ========================================
   PROMOTION PRICING
   ======================================== */

.quickerbill-theme-spotlight-tld-price-with-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-spotlight-tld-price-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-spotlight-tld-price-original {
    font-size: 18px;
    color: var(--quickerbill-theme-variable-gray-400);
    text-decoration: line-through;
    font-weight: 400;
    line-height: 1.2;
}

.quickerbill-theme-spotlight-tld-price-promo {
    color: var(--quickerbill-theme-variable-success) !important;
}

/* ========================================
   PROMOTION STYLING (GREEN CARD)
   ======================================== */
   
.quickerbill-theme-spotlight-tld-card.has-promotion {
    border-color: var(--quickerbill-theme-variable-success-accent);
}

.quickerbill-theme-spotlight-tld-card.has-promotion:hover {
    border-color: var(--quickerbill-theme-variable-success);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15);
}

/* ========================================
   SALE BADGE
   ======================================== */

.quickerbill-theme-spotlight-tld-promotion-badge {
    position: absolute;
    top: var(--quickerbill-theme-variable-space-4);
    right: var(--quickerbill-theme-variable-space-4);
}
/**
 * Domain Pricing Widget Specific Styles
 * Uses centralized typography/badge from theme.css
 * Specific: Table layout, controls, pagination
 * Using naming convention: quickerbill-theme-domain-pricing-
 * 
 * NO RESPONSIVE STYLES - All @media queries go in core/responsive.css
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   WIDGET CONTAINER
   ======================================== */

.quickerbill-theme-domain-pricing-widget {
    width: 100%;
    background: var(--quickerbill-theme-variable-white);
}

/* ========================================
   PRICING SECTION
   ======================================== */

.quickerbill-theme-domain-pricing-section {
    padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-12) 0;
}

/* ========================================
   LOADING STATE
   ======================================== */

.quickerbill-theme-domain-pricing-loading {
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-15) var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-domain-pricing-loading p {
    margin-top: var(--quickerbill-theme-variable-space-5);
    color: var(--quickerbill-theme-variable-gray-500);
    font-size: 14px;
}

/* ========================================
   TABLE CONTROLS
   ======================================== */

.quickerbill-theme-domain-pricing-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--quickerbill-theme-variable-space-6);
    margin-bottom: var(--quickerbill-theme-variable-space-6);
}

/* ========================================
   PRICE TYPE SWITCHER
   ======================================== */

.quickerbill-theme-domain-pricing-type-switcher {
    display: inline-flex;
    gap: var(--quickerbill-theme-variable-space-2);
    background: var(--quickerbill-theme-variable-gray-50);
    padding: var(--quickerbill-theme-variable-space-1-5);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    box-shadow: var(--quickerbill-theme-variable-shadow-sm);
}

.quickerbill-theme-domain-pricing-type-btn {
    padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-6);
    border: none;
    background: transparent;
    color: var(--quickerbill-theme-variable-gray-500);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    cursor: pointer;
    transition: all var(--quickerbill-theme-variable-transition-fast);
    white-space: nowrap;
}

.quickerbill-theme-domain-pricing-type-btn:hover {
    background: var(--quickerbill-theme-variable-gray-200);
    color: var(--quickerbill-theme-variable-secondary);
}

.quickerbill-theme-domain-pricing-type-btn.active {
    background: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    box-shadow: var(--quickerbill-theme-variable-shadow-sm-alt);
}

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

.quickerbill-theme-domain-pricing-search {
    flex: 1;
    max-width: 400px;
}

.quickerbill-theme-domain-pricing-search-input {
    width: 100%;
}

/* ========================================
   TABLE WRAPPER
   ======================================== */

.quickerbill-theme-domain-pricing-table-wrapper {
    background: var(--quickerbill-theme-variable-white);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-xl);
    overflow: hidden;
    box-shadow: var(--quickerbill-theme-variable-shadow-sm);
}

/* Table scroll container */
.quickerbill-theme-domain-pricing-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   TABLE
   ======================================== */

.quickerbill-theme-domain-pricing-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    table-layout: fixed; /* EQUAL COLUMN WIDTHS */
}

.quickerbill-theme-domain-pricing-table thead {
    background: var(--quickerbill-theme-variable-gray-50);
}

.quickerbill-theme-domain-pricing-table th {
    padding: var(--quickerbill-theme-variable-space-4) var(--quickerbill-theme-variable-space-5);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--quickerbill-theme-variable-gray-700);
    border-bottom: 2px solid var(--quickerbill-theme-variable-gray-200);
    height: 56px; /* EQUAL HEIGHT */
    vertical-align: middle;
}

.quickerbill-theme-domain-pricing-table td {
    padding: var(--quickerbill-theme-variable-space-4) var(--quickerbill-theme-variable-space-5);
    font-size: 15px;
    color: var(--quickerbill-theme-variable-gray-700);
    border-bottom: 1px solid var(--quickerbill-theme-variable-gray-200);
    text-align: center;
    height: 72px; /* EQUAL HEIGHT */
    vertical-align: middle;
}

.quickerbill-theme-domain-pricing-table tbody tr:last-child td {
    border-bottom: none;
}

.quickerbill-theme-domain-pricing-table tbody tr:hover {
    background: var(--quickerbill-theme-variable-gray-50);
}

/* TLD Column */
.quickerbill-theme-domain-pricing-td-tld {
    font-weight: 600;
    color: var(--quickerbill-theme-variable-secondary);
}

/* ========================================
   TABLE FOOTER
   ======================================== */

.quickerbill-theme-domain-pricing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-6);
    background: var(--quickerbill-theme-variable-white);
    border-top: 1px solid var(--quickerbill-theme-variable-gray-200);
}

.quickerbill-theme-domain-pricing-showing {
    font-size: 14px;
    color: var(--quickerbill-theme-variable-gray-600);
}

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

.quickerbill-theme-domain-pricing-pagination {
    display: flex;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-2);
}

.quickerbill-theme-domain-pricing-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--quickerbill-theme-variable-space-3);
    background: var(--quickerbill-theme-variable-white);
    border: 1px solid var(--quickerbill-theme-variable-gray-200);
    border-radius: var(--quickerbill-theme-variable-radius-lg);
    color: var(--quickerbill-theme-variable-gray-700);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--quickerbill-theme-variable-transition-fast);
}

.quickerbill-theme-domain-pricing-page-btn:hover {
    background: var(--quickerbill-theme-variable-gray-50);
    border-color: var(--quickerbill-theme-variable-gray-300);
    color: var(--quickerbill-theme-variable-primary);
}

.quickerbill-theme-domain-pricing-page-active {
    background: var(--quickerbill-theme-variable-primary);
    border-color: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
    cursor: default;
}

.quickerbill-theme-domain-pricing-page-active:hover {
    background: var(--quickerbill-theme-variable-primary);
    border-color: var(--quickerbill-theme-variable-primary);
    color: var(--quickerbill-theme-variable-white);
}

/* ========================================
   NO RESULTS
   ======================================== */

.quickerbill-theme-domain-pricing-no-results {
    text-align: center;
    padding: var(--quickerbill-theme-variable-space-15) var(--quickerbill-theme-variable-space-5);
}

.quickerbill-theme-domain-pricing-no-results p {
    font-size: 16px;
    color: var(--quickerbill-theme-variable-gray-500);
    margin: 0;
}

/* ========================================
   PROMOTION STYLING
   ======================================== */

/* Row with promotion - green border and background */
.quickerbill-theme-domain-pricing-row-promo {
    background: var(--quickerbill-theme-variable-success-bg) !important;
    border-left: 4px solid var(--quickerbill-theme-variable-success) !important;
}

.quickerbill-theme-domain-pricing-row-promo:hover {
    background: var(--quickerbill-theme-variable-success-bg-light) !important;
}

/* TLD with SALE badge */
.quickerbill-theme-domain-pricing-td-tld {
    position: relative;
}

.quickerbill-theme-domain-pricing-sale-badge {
    display: inline-block;
    margin-left: var(--quickerbill-theme-variable-space-2);
    vertical-align: middle;
}

/* Price stacking for promotions */
.quickerbill-theme-domain-pricing-price-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quickerbill-theme-variable-space-1);
}

.quickerbill-theme-domain-pricing-price-original {
    font-size: 13px;
    color: var(--quickerbill-theme-variable-gray-400);
    text-decoration: line-through;
    font-weight: 400;
    line-height: 1.2;
}

.quickerbill-theme-domain-pricing-price-promo {
    font-size: 15px;
    font-weight: 700;
    color: var(--quickerbill-theme-variable-success);
    line-height: 1.2;
}
/**
 * QuickerBill Theme Responsive Styles
 * Handles all responsive behavior (core, components, widgets)
 * 
 * Breakpoints:
 * - Tablet: 1024px and below (Mobile menu activates here)
 * - Mobile: 768px and below (Size reductions)
 * - Small Mobile: 480px and below (Further size reductions)
 * 
 * @package QuickerBill/Theme
 */

/* ========================================
   TABLET (1024px and below)
   ======================================== */

@media (max-width: 1024px) {
    
    /* ========================================
       CORE - TABLET
       ======================================== */
    
    /** Container */
    .quickerbill-theme-container,
    .quickerbill-theme-container-narrow,
    .quickerbill-theme-container-wide {
        padding: 0 var(--quickerbill-theme-variable-space-5);
    }
    
    /** Grid System */
    .quickerbill-theme-grid-3,
    .quickerbill-theme-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /** Section Spacing */
    .quickerbill-theme-section {
        padding: var(--quickerbill-theme-variable-space-12) 0;
    }
    
    .quickerbill-theme-section-lg {
        padding: var(--quickerbill-theme-variable-space-15) 0;
    }
    
    /** Typography */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    /** Cards */
    .quickerbill-theme-card-large {
        padding: var(--quickerbill-theme-variable-space-6);
    }
    
    /* ========================================
       CENTRALIZED WIDGET TYPOGRAPHY - TABLET
       ======================================== */
    
    .quickerbill-theme-typography-widget-title {
        font-size: 36px;
    }
    
    .quickerbill-theme-typography-widget-title-large {
        font-size: 48px;
    }
    
    .quickerbill-theme-typography-widget-header {
        padding: 60px 0 30px;
    }
    
    .quickerbill-theme-typography-widget-hero {
        padding: 100px 0 60px;
    }
    
    /* ========================================
       HEADER - TABLET
       ======================================== */
    
    /** Header Impersonation Bar */
    .quickerbill-theme-header-imp-bar-inner {
        padding: 12px 20px;
    }
    
    /** Header Inner */
    .quickerbill-theme-header-inner {
        padding: 0 var(--quickerbill-theme-variable-space-5);
    }
    
    /** Header - Logo (keep close to hamburger) */
    .quickerbill-theme-header-logo {
        flex: 1;
    }
    
    /** Header - Activate Mobile Menu on Tablet (CRITICAL) */
    .quickerbill-theme-header-mobile-toggle {
        display: flex !important;
    }
    
    .quickerbill-theme-header-sidebar-mobile {
        display: block !important;
    }
    
    .quickerbill-theme-header-nav-desktop {
        display: none !important;
    }
    
    /** Header - Hide Currency Dropdown on Tablet */
    .quickerbill-theme-header-currency-dropdown {
        display: none !important;
    }
    
    /* ========================================
       FOOTER - TABLET
       ======================================== */
    
    /** Footer Main - Stack Vertically */
    .quickerbill-theme-footer-main {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* ========================================
       DOMAIN SEARCH WIDGET - TABLET
       ======================================== */
    
    .quickerbill-theme-domain-search-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Force image to always appear first on tablet/mobile */
    .quickerbill-theme-domain-search-image {
        order: 1 !important;
    }
    
    .quickerbill-theme-domain-search-content {
        order: 2 !important;
    }
    
    /* Center all content on tablet/mobile */
    .quickerbill-theme-domain-search-content {
        text-align: center;
        align-items: center;
    }
    
    .quickerbill-theme-domain-search-video-play {
        width: 90px;
        height: 90px;
    }
    
    .quickerbill-theme-domain-search-play-icon {
        width: 36px;
        height: 36px;
    }
    
    /* ========================================
       DOMAIN TRANSFER WIDGET - TABLET
       ======================================== */
    
    .quickerbill-theme-domain-transfer-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Force image to always appear first on tablet/mobile */
    .quickerbill-theme-domain-transfer-image {
        order: 1 !important;
    }
    
    .quickerbill-theme-domain-transfer-content {
        order: 2 !important;
    }
    
    /* Center all content on tablet/mobile */
    .quickerbill-theme-domain-transfer-content {
        text-align: center;
        align-items: center;
    }
    
    .quickerbill-theme-domain-transfer-video-play {
        width: 90px;
        height: 90px;
    }
    
    .quickerbill-theme-domain-transfer-play-icon {
        width: 36px;
        height: 36px;
    }
    
    /* ========================================
       HOSTING WIDGET - TABLET
       ======================================== */
    
    .quickerbill-theme-hosting-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Force image to always appear first on tablet/mobile */
    .quickerbill-theme-hosting-image {
        order: 1 !important;
    }
    
    .quickerbill-theme-hosting-content {
        order: 2 !important;
    }
    
    /* Center all content on tablet/mobile */
    .quickerbill-theme-hosting-content {
        text-align: center;
        align-items: center;
    }
    
    .quickerbill-theme-hosting-pricing {
        align-items: center;
    }
    
    .quickerbill-theme-hosting-content .quickerbill-theme-btn {
        align-self: center;
    }
    
    .quickerbill-theme-hosting-video-play {
        width: 90px;
        height: 90px;
    }
    
    .quickerbill-theme-hosting-play-icon {
        width: 36px;
        height: 36px;
    }
    
    /* ========================================
       PRODUCT GRID WIDGET - TABLET
       ======================================== */
    
    .quickerbill-theme-product-grid[data-columns="3"],
    .quickerbill-theme-product-grid[data-columns="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /** Most Popular Product - Remove scale on tablet */
    .quickerbill-theme-product-popular {
        transform: scale(1);
    }
    
    .quickerbill-theme-product-popular:hover {
        transform: translateY(-6px);
    }
    
    /** Billing Cycle Switcher */
    .quickerbill-theme-product-grid-billing-cycle-switcher {
        flex-wrap: wrap;
    }
    
    .quickerbill-theme-product-grid-cycle-btn {
        padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-5);
        font-size: 13px;
    }
    
    /* ========================================
       ICON BOX GRID WIDGET - TABLET
       ======================================== */
    
    .quickerbill-theme-icon-box-grid-section {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-10) 0;
    }
    
    /* Force 2 columns for 3+ column grids on tablet */
    .quickerbill-theme-icon-box-grid[data-columns="3"],
    .quickerbill-theme-icon-box-grid[data-columns="4"],
    .quickerbill-theme-icon-box-grid[data-columns="5"],
    .quickerbill-theme-icon-box-grid[data-columns="6"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ========================================
       IMAGE CONTENT ROW WIDGET - TABLET
       ======================================== */
    
    .quickerbill-theme-image-content-row {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 80px;
    }
    
    .quickerbill-theme-image-content-row-spacing-large .quickerbill-theme-image-content-row {
        margin-bottom: 100px;
    }
    
    .quickerbill-theme-image-content-row-spacing-medium .quickerbill-theme-image-content-row {
        margin-bottom: 60px;
    }
    
    .quickerbill-theme-image-content-row-spacing-small .quickerbill-theme-image-content-row {
        margin-bottom: 40px;
    }
    
    /* Force image to always appear first on tablet/mobile */
    .quickerbill-theme-image-content-row-image {
        order: 1 !important;
    }
    
    .quickerbill-theme-image-content-row-content {
        order: 2 !important;
    }
    
    /* ========================================
       VISUAL ACCORDION WIDGET - TABLET
       ======================================== */
    
    .quickerbill-theme-visual-accordion-section {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-10) 0;
    }
    
    .quickerbill-theme-visual-accordion-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .quickerbill-theme-visual-accordion-image-wrapper {
        min-height: 400px;
        order: 1;
    }
    
    .quickerbill-theme-visual-accordion-column {
        order: 2;
    }
    
    /* ========================================
       FAQS WIDGET - TABLET
       ======================================== */
       
    .quickerbill-theme-faqs-section {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-10) 0;
    }
    
    .quickerbill-theme-faqs-question {
        font-size: 16px;
    }
    
    /* ========================================
       404 WIDGET - TABLET
       ======================================== */
       
    .quickerbill-theme-404-hero {
        padding: var(--quickerbill-theme-variable-space-12) 0 var(--quickerbill-theme-variable-space-10) 0;
    }
    
    .quickerbill-theme-404-illustration {
        max-width: 500px;
        margin-bottom: var(--quickerbill-theme-variable-space-8);
    }
    
    .quickerbill-theme-404-title {
        font-size: 40px;
    }
    
    .quickerbill-theme-404-description {
        font-size: 17px;
    }
    
    .quickerbill-theme-404-popular-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ========================================
       BLOG WIDGET - TABLET
       ======================================== */

    .quickerbill-theme-blog-section {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-10) 0;
    }

    .quickerbill-theme-blog-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .quickerbill-theme-blog-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--quickerbill-theme-variable-space-6);
    }

    .quickerbill-theme-blog-sidebar-widget {
        margin-bottom: 0;
    }

    .quickerbill-theme-blog-card-image {
        height: 220px;
    }

    .quickerbill-theme-blog-card-title {
        font-size: 18px;
    }
    
    /* ========================================
       SINGLE BLOG WIDGET - TABLET
       ======================================== */

    .quickerbill-theme-single-blog-section {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-10) 0;
    }

    .quickerbill-theme-single-blog-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .quickerbill-theme-single-blog-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--quickerbill-theme-variable-space-6);
    }

    .quickerbill-theme-single-blog-title {
        font-size: 36px;
    }

    .quickerbill-theme-single-blog-content {
        font-size: 16px;
    }

    .quickerbill-theme-single-blog-content h2 {
        font-size: 28px;
    }

    .quickerbill-theme-single-blog-content h3 {
        font-size: 24px;
    }

    .quickerbill-theme-single-blog-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ========================================
       KNOWLEDGEBASE WIDGET - TABLET
       ======================================== */
    
    /** Hero Section */
    .quickerbill-theme-knowledgebase-hero {
        padding: var(--quickerbill-theme-variable-space-15) 0 var(--quickerbill-theme-variable-space-12) 0;
    }
    
    .quickerbill-theme-knowledgebase-hero-title {
        font-size: 36px;
    }
    
    /** Category Grid */
    .quickerbill-theme-knowledgebase-category-grid[data-columns="3"],
    .quickerbill-theme-knowledgebase-category-grid[data-columns="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quickerbill-theme-knowledgebase-category-card {
        padding: var(--quickerbill-theme-variable-space-8) var(--quickerbill-theme-variable-space-5);
    }
    
    /** Archive Header */
    .quickerbill-theme-knowledgebase-archive-header {
        padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-6) 0;
    }
    
    .quickerbill-theme-knowledgebase-archive-title,
    .quickerbill-theme-knowledgebase-archive-category-name {
        font-size: 36px;
    }
    
    /** Layout (2-col → 1-col) */
    .quickerbill-theme-knowledgebase-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /** Article Grid */
    .quickerbill-theme-knowledgebase-article-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-knowledgebase-article-card-image {
        height: 220px;
    }
    
    .quickerbill-theme-knowledgebase-article-card-title {
        font-size: 18px;
    }
    
    /** Single Article */
    .quickerbill-theme-knowledgebase-single-title {
        font-size: 36px;
    }
    
    .quickerbill-theme-knowledgebase-single-content {
        font-size: 16px;
    }
    
    .quickerbill-theme-knowledgebase-single-content h2 {
        font-size: 28px;
    }
    
    .quickerbill-theme-knowledgebase-single-content h3 {
        font-size: 24px;
    }
    
    .quickerbill-theme-knowledgebase-single-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /** Sidebar */
    .quickerbill-theme-knowledgebase-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-knowledgebase-sidebar-widget {
        margin-bottom: 0;
    }
    
    /* ========================================
       PRODUCT COMPARISON WIDGET - TABLET
       ======================================== */

    .quickerbill-theme-product-comparison-section {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-10) 0;
    }

    .quickerbill-theme-product-comparison-billing-cycle-section {
        padding: var(--quickerbill-theme-variable-space-5) 0;
    }

    .quickerbill-theme-product-comparison-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .quickerbill-theme-product-comparison-product-name {
        font-size: 20px;
    }

    .quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-price-amount {
        font-size: 32px;
    }

    .quickerbill-theme-product-comparison-feature-header {
        font-size: 18px;
    }
    
   /* ========================================
      SPOTLIGHT TLDS WIDGET - TABLET
      ======================================== */

    .quickerbill-theme-spotlight-tlds-section {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-10) 0;
    }
    
    /* Force 2 columns for 3+ column grids on tablet */
    .quickerbill-theme-spotlight-tlds-grid[data-columns="3"],
    .quickerbill-theme-spotlight-tlds-grid[data-columns="4"],
    .quickerbill-theme-spotlight-tlds-grid[data-columns="5"],
    .quickerbill-theme-spotlight-tlds-grid[data-columns="6"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ========================================
       DOMAIN PRICING WIDGET - TABLET
       ======================================== */
    
    .quickerbill-theme-domain-pricing-section {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-10) 0;
    }
    
    /* KEEP HORIZONTAL LAYOUT ON TABLET */
    .quickerbill-theme-domain-pricing-controls {
        gap: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-domain-pricing-search {
        max-width: 350px;
    }
    
    .quickerbill-theme-domain-pricing-type-btn {
        padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-5);
        font-size: 13px;
    }
    
}

/* ========================================
   MOBILE (768px and below)
   ======================================== */

@media (max-width: 768px) {
    
    /* ========================================
       CORE - MOBILE
       ======================================== */
    
    /** Container */
    .quickerbill-theme-container,
    .quickerbill-theme-container-narrow,
    .quickerbill-theme-container-wide {
        padding: 0 var(--quickerbill-theme-variable-space-4);
    }
    
    /** Grid System */
    .quickerbill-theme-grid-2,
    .quickerbill-theme-grid-3,
    .quickerbill-theme-grid-4 {
        grid-template-columns: 1fr;
    }
    
    /** Section Spacing */
    .quickerbill-theme-section {
        padding: var(--quickerbill-theme-variable-space-10) 0;
    }
    
    .quickerbill-theme-section-sm {
        padding: var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-section-lg {
        padding: var(--quickerbill-theme-variable-space-12) 0;
    }
    
    /** Typography */
    body {
        font-size: 15px;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    h4 {
        font-size: 1.125rem;
    }
    
    h5 {
        font-size: 1rem;
    }
    
    /** Buttons */
    .quickerbill-theme-btn {
        padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-btn-large {
        padding: var(--quickerbill-theme-variable-space-3-5) var(--quickerbill-theme-variable-space-6);
        font-size: 15px;
    }
    
    .quickerbill-theme-btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .quickerbill-theme-btn-group .quickerbill-theme-btn {
        width: 100%;
    }
    
    /** Forms */
    .quickerbill-theme-form-input,
    .quickerbill-theme-form-select,
    .quickerbill-theme-form-textarea {
        font-size: 16px;
    }
    
    .quickerbill-theme-form-input-large {
        padding: var(--quickerbill-theme-variable-space-3-5) var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-form-row {
        grid-template-columns: 1fr;
        gap: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-form-input-group {
        flex-direction: column;
    }
    
    .quickerbill-theme-form-input-group .quickerbill-theme-btn {
        width: 100%;
    }
    
    /** Cards */
    .quickerbill-theme-card {
        padding: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-card-small {
        padding: var(--quickerbill-theme-variable-space-3-5);
    }
    
    .quickerbill-theme-card-medium {
        padding: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-card-large {
        padding: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-card-title {
        font-size: 16px;
    }
    
    .quickerbill-theme-card-icon-wrapper {
        width: 56px;
        height: 56px;
    }
    
    .quickerbill-theme-card-icon-wrapper .dashicons {
        font-size: 28px;
        width: 28px;
        height: 28px;
    }
    
    /** Badges */
    .quickerbill-theme-badge {
        font-size: 11px;
        padding: var(--quickerbill-theme-variable-space-1) var(--quickerbill-theme-variable-space-2);
    }
    
    /** Utilities */
    .quickerbill-theme-flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--quickerbill-theme-variable-space-3);
    }
    
    .quickerbill-theme-gap-8 {
        gap: var(--quickerbill-theme-variable-space-6);
    }
    
    /* ========================================
       CENTRALIZED WIDGET BADGE - MOBILE
       ======================================== */
    
    .quickerbill-theme-badge-widget {
        font-size: 12px;
        padding: 5px 14px;
    }
    
    /* ========================================
       CENTRALIZED WIDGET TYPOGRAPHY - MOBILE
       ======================================== */
    
    .quickerbill-theme-typography-widget-title {
        font-size: 32px;
    }
    
    .quickerbill-theme-typography-widget-title-large {
        font-size: 40px;
    }
    
    .quickerbill-theme-typography-widget-description {
        font-size: 16px;
    }
    
    .quickerbill-theme-typography-widget-description-large {
        font-size: 17px;
    }
    
    .quickerbill-theme-typography-widget-header {
        padding: 40px 0 20px;
    }
    
    .quickerbill-theme-typography-widget-hero {
        padding: 80px 0 60px;
    }
    
    /* ========================================
       HEADER - MOBILE
       ======================================== */
    
    /** Header - Impersonation Bar */
    .quickerbill-theme-header-imp-bar-inner {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
    }
    
    .quickerbill-theme-header-imp-info {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    
    .quickerbill-theme-header-imp-switch-back {
        width: 100%;
        justify-content: center;
    }
    
    .quickerbill-theme-header-imp-text {
        font-size: 13px;
    }
    
    /** Header - Layout (Size Reductions) */
    .quickerbill-theme-header-inner {
        height: 60px;
        padding: 0 var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-header-logo {
        flex: 1;
    }
    
    .quickerbill-theme-header-logo img {
        max-height: 35px;
    }
    
    .quickerbill-theme-header-sidebar-mobile {
        top: 60px;
    }
    
    .quickerbill-theme-header-right {
        gap: 10px;
    }
    
    /** Header - Hide Text Labels on Mobile (CRITICAL) */
    .quickerbill-theme-header-cart-text,
    .quickerbill-theme-header-user-name {
        display: none !important;
    }
    
    /** Header - User Menu Compact */
    .quickerbill-theme-header-user-toggle {
        padding: 8px;
    }
    
    /** Header - Hide User Dropdown Arrow (CRITICAL) */
    .quickerbill-theme-header-user-arrow {
        display: none !important;
    }
    
    /* ========================================
       FOOTER - MOBILE
       ======================================== */
    
    /** Footer Links - Single Column */
    .quickerbill-theme-footer-links {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    /** Footer Bottom - Stack Vertically */
    .quickerbill-theme-footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    /** Footer Legal - Center */
    .quickerbill-theme-footer-legal {
        justify-content: center;
    }
    
   /* ========================================
       DOMAIN SEARCH WIDGET - MOBILE
       ======================================== */
    
    .quickerbill-theme-domain-search-widget {
        padding: var(--quickerbill-theme-variable-space-10) 0;
    }
    
    .quickerbill-theme-domain-search-row {
        gap: 32px;
    }
    
    .quickerbill-theme-domain-search-content {
        gap: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-domain-search-form {
        flex-direction: column;
    }
    
    .quickerbill-theme-domain-search-input {
        padding: 14px 18px;
        padding-left: 48px;
    }
    
    .quickerbill-theme-domain-search-video-play {
        width: 80px;
        height: 80px;
    }
    
    .quickerbill-theme-domain-search-play-icon {
        width: 32px;
        height: 32px;
    }
    
    /* ========================================
       DOMAIN TRANSFER WIDGET - MOBILE
       ======================================== */
    
    .quickerbill-theme-domain-transfer-widget {
        padding: var(--quickerbill-theme-variable-space-10) 0;
    }
    
    .quickerbill-theme-domain-transfer-row {
        gap: 32px;
    }
    
    .quickerbill-theme-domain-transfer-content {
        gap: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-domain-transfer-form {
        flex-direction: column;
    }
    
    .quickerbill-theme-domain-transfer-input {
        padding: 14px 18px;
        padding-left: 48px;
    }
    
    .quickerbill-theme-domain-transfer-video-play {
        width: 80px;
        height: 80px;
    }
    
    .quickerbill-theme-domain-transfer-play-icon {
        width: 32px;
        height: 32px;
    }
    
    /* ========================================
       HOSTING WIDGET - MOBILE
       ======================================== */
    
    .quickerbill-theme-hosting-widget {
        padding: var(--quickerbill-theme-variable-space-10) 0;
    }
    
    .quickerbill-theme-hosting-row {
        gap: 32px;
    }
    
    .quickerbill-theme-hosting-content {
        gap: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-hosting-content .quickerbill-theme-btn {
        width: 100%;
    }
    
    /* CHANGE TO VERTICAL ON MOBILE */
    .quickerbill-theme-hosting-pricing-stacked {
        flex-direction: column;
        align-items: center;
        gap: var(--quickerbill-theme-variable-space-1);
    }
    
    .quickerbill-theme-hosting-pricing-amount {
        font-size: 28px;
    }
    
    .quickerbill-theme-hosting-pricing-original {
        font-size: 18px;
    }
    
    .quickerbill-theme-hosting-pricing-period {
        font-size: 16px;
    }
    
    /* SALE badge positioning on mobile */
    .quickerbill-theme-hosting-sale-badge {
        position: static;
        margin-bottom: var(--quickerbill-theme-variable-space-2);
    }
    
    .quickerbill-theme-hosting-video-play {
        width: 80px;
        height: 80px;
    }
    
    .quickerbill-theme-hosting-play-icon {
        width: 32px;
        height: 32px;
    }
    
    /* ========================================
       PRODUCT GRID WIDGET - MOBILE
       ======================================== */
    
    /** Product Grid */
    .quickerbill-theme-product-grid {
        grid-template-columns: 1fr !important;
        gap: var(--quickerbill-theme-variable-space-6);
        padding-top: var(--quickerbill-theme-variable-space-4);
        padding-bottom: var(--quickerbill-theme-variable-space-8);
    }
    
    /** Product Grid - Billing Cycle Switcher */
    .quickerbill-theme-product-grid-billing-cycle-switcher-section {
        padding: var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-product-grid-billing-cycle-switcher-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }
    
    .quickerbill-theme-product-grid-billing-cycle-switcher-container::-webkit-scrollbar {
        height: 6px;
    }
    
    .quickerbill-theme-product-grid-billing-cycle-switcher-container::-webkit-scrollbar-track {
        background: var(--quickerbill-theme-variable-gray-50);
        border-radius: 3px;
    }
    
    .quickerbill-theme-product-grid-billing-cycle-switcher-container::-webkit-scrollbar-thumb {
        background: var(--quickerbill-theme-variable-gray-300);
        border-radius: 3px;
    }
    
    .quickerbill-theme-product-grid-billing-cycle-switcher-container::-webkit-scrollbar-thumb:hover {
        background: var(--quickerbill-theme-variable-gray-400);
    }
    
    .quickerbill-theme-product-grid-billing-cycle-switcher {
        flex-wrap: nowrap;
        width: auto;
        min-width: 100%;
    }
    
    .quickerbill-theme-product-grid-cycle-btn {
        flex-shrink: 0;
        padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-5);
        font-size: 13px;
        white-space: nowrap;
    }
    
    /** Product Grid - Card */
    .quickerbill-theme-product-card-body {
        padding: var(--quickerbill-theme-variable-space-7) var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-product-card-name {
        font-size: 20px;
    }
    
    /** Product Grid - Pricing (Mobile Specific - Force Correct Sizes) */
    .quickerbill-theme-product-grid-price-amount {
        font-size: 32px !important;
    }
    
    .quickerbill-theme-product-grid-price-original {
        font-size: 16px !important;
    }
    
    .quickerbill-theme-product-grid-price-period {
        font-size: 14px !important;
    }
    
    .quickerbill-theme-product-grid-billing-cycle {
        font-size: 13px;
    }
    
    /** Product Grid - Features */
    .quickerbill-theme-product-grid-features li {
        padding: var(--quickerbill-theme-variable-space-2) 0 var(--quickerbill-theme-variable-space-2) var(--quickerbill-theme-variable-space-6);
        font-size: 14px;
    }
    
    .quickerbill-theme-product-grid-features li::before {
        width: 18px;
        height: 18px;
        font-size: 11px;
        top: var(--quickerbill-theme-variable-space-2);
    }
    
    /** Product Grid - Features Link */
    .quickerbill-theme-product-grid-features-link {
        font-size: 13px;
    }
    
    /** Product Grid - Badges */
    .quickerbill-theme-product-promotion-badge {
        top: var(--quickerbill-theme-variable-space-3);
        right: var(--quickerbill-theme-variable-space-3);
        font-size: 10px;
        padding: 3px 8px;
    }
    
    /** Product Grid - Editor Notice */
    .quickerbill-theme-product-grid-editor-notice {
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }
    
    /* ========================================
       ICON BOX GRID WIDGET - MOBILE
       ======================================== */
    
    .quickerbill-theme-icon-box-grid-section {
        padding: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-8) 0;
    }
    
    /* Force 1 column for ALL grids on mobile */
    .quickerbill-theme-icon-box-grid[data-columns="2"],
    .quickerbill-theme-icon-box-grid[data-columns="3"],
    .quickerbill-theme-icon-box-grid[data-columns="4"],
    .quickerbill-theme-icon-box-grid[data-columns="5"],
    .quickerbill-theme-icon-box-grid[data-columns="6"] {
        grid-template-columns: 1fr;
    }
    
    .quickerbill-theme-icon-box-grid {
        gap: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-icon-box-card {
        padding: 32px 24px;
    }
    
    .quickerbill-theme-icon-box-icon {
        width: 44px;
        height: 44px;
        margin-bottom: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-icon-box-icon svg,
    .quickerbill-theme-icon-box-icon img {
        width: 44px;
        height: 44px;
    }
    
    .quickerbill-theme-icon-box-icon i {
        font-size: 44px;
    }
    
    .quickerbill-theme-icon-box-card-title {
        font-size: 18px;
    }
    
    .quickerbill-theme-icon-box-card-description {
        font-size: 14px;
    }
    
    /* ========================================
       IMAGE CONTENT ROW WIDGET - MOBILE
       ======================================== */
    
    .quickerbill-theme-image-content-row-widget {
        padding: var(--quickerbill-theme-variable-space-10) 0;
    }
    
    .quickerbill-theme-image-content-row {
        gap: 32px;
        margin-bottom: 60px;
    }
    
    .quickerbill-theme-image-content-row-spacing-large .quickerbill-theme-image-content-row {
        margin-bottom: 80px;
    }
    
    .quickerbill-theme-image-content-row-spacing-medium .quickerbill-theme-image-content-row {
        margin-bottom: 50px;
    }
    
    .quickerbill-theme-image-content-row-spacing-small .quickerbill-theme-image-content-row {
        margin-bottom: 40px;
    }
    
    .quickerbill-theme-image-content-row-content {
        gap: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-image-content-row-button {
        width: 100%;
    }
    
    /* ========================================
       VISUAL ACCORDION WIDGET - MOBILE
       ======================================== */
    
    .quickerbill-theme-visual-accordion-section {
        padding: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-visual-accordion-layout {
        gap: 32px;
    }
    
    .quickerbill-theme-visual-accordion-image-wrapper {
        min-height: 300px;
    }
    
    .quickerbill-theme-visual-accordion-title {
        font-size: 16px;
    }
    
    .quickerbill-theme-visual-accordion-header {
        padding: var(--quickerbill-theme-variable-space-4) var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-visual-accordion-content-inner {
        padding: 0 var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-4) var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-visual-accordion-content-inner p {
        font-size: 14px;
    }
    
    .quickerbill-theme-visual-accordion-cta {
        width: 100%;
    }

    /* ========================================
       FAQS WIDGET - MOBILE
       ======================================== */
       
    .quickerbill-theme-faqs-section {
        padding: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-faqs-list {
        gap: var(--quickerbill-theme-variable-space-3);
    }
    
    .quickerbill-theme-faqs-header {
        padding: var(--quickerbill-theme-variable-space-4) var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-faqs-question {
        font-size: 15px;
    }
    
    .quickerbill-theme-faqs-content-inner {
        padding: 0 var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-4) var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-faqs-content-inner p {
        font-size: 14px;
    }
    
    /* ========================================
       404 WIDGET - MOBILE
       ======================================== */
       
    .quickerbill-theme-404-hero {
        padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-404-illustration {
        max-width: 400px;
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-404-title {
        font-size: 32px;
    }
    
    .quickerbill-theme-404-description {
        font-size: 16px;
    }
    
    .quickerbill-theme-404-popular-section {
        padding: var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-404-popular-title {
        font-size: 18px;
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-404-popular-grid {
        grid-template-columns: 1fr;
        gap: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-404-page-card {
        padding: var(--quickerbill-theme-variable-space-6) var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-404-page-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }
    
    .quickerbill-theme-404-page-icon i,
    .quickerbill-theme-404-page-icon svg {
        font-size: 28px;
        width: 28px;
        height: 28px;
    }
    
    .quickerbill-theme-404-page-title {
        font-size: 17px;
    }
    
    .quickerbill-theme-404-actions {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-12) 0;
    }
    
    .quickerbill-theme-404-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .quickerbill-theme-404-btn-homepage,
    .quickerbill-theme-404-btn-back {
        width: 100%;
        justify-content: center;
    }
    
    /* ========================================
       BLOG WIDGET - MOBILE
       ======================================== */

    .quickerbill-theme-blog-section {
        padding: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-8) 0;
    }

    .quickerbill-theme-blog-layout {
        gap: 32px;
    }

    .quickerbill-theme-blog-grid {
        grid-template-columns: 1fr;
        gap: var(--quickerbill-theme-variable-space-6);
        margin-bottom: var(--quickerbill-theme-variable-space-8);
    }

    .quickerbill-theme-blog-card-image {
        height: 200px;
    }

    .quickerbill-theme-blog-card-body {
        padding: var(--quickerbill-theme-variable-space-5);
    }

    .quickerbill-theme-blog-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--quickerbill-theme-variable-space-2);
    }

    .quickerbill-theme-blog-card-title {
        font-size: 17px;
    }

    .quickerbill-theme-blog-card-excerpt {
        font-size: 14px;
    }

    .quickerbill-theme-blog-sidebar {
        grid-template-columns: 1fr;
    }

    .quickerbill-theme-blog-pagination {
        margin-top: var(--quickerbill-theme-variable-space-8);
    }

    .quickerbill-theme-blog-pagination .page-numbers {
        flex-wrap: wrap;
    }

    .quickerbill-theme-blog-pagination .page-numbers a,
    .quickerbill-theme-blog-pagination .page-numbers span {
        min-width: 40px;
        height: 40px;
        font-size: 13px;
    }

    .quickerbill-theme-blog-pagination .page-numbers .prev,
    .quickerbill-theme-blog-pagination .page-numbers .next {
        font-size: 0;
    }

    .quickerbill-theme-blog-pagination .page-numbers .prev .dashicons,
    .quickerbill-theme-blog-pagination .page-numbers .next .dashicons {
        margin: 0;
    }
    
    /* ========================================
       SINGLE BLOG WIDGET - MOBILE
       ======================================== */

    .quickerbill-theme-single-blog-section {
        padding: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-8) 0;
    }

    .quickerbill-theme-single-blog-layout {
        gap: 32px;
    }

    .quickerbill-theme-single-blog-featured-image {
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }

    .quickerbill-theme-single-blog-header {
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }

    .quickerbill-theme-single-blog-title {
        font-size: 28px;
    }

    .quickerbill-theme-single-blog-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--quickerbill-theme-variable-space-2);
    }

    .quickerbill-theme-single-blog-content {
        font-size: 15px;
        margin-bottom: var(--quickerbill-theme-variable-space-8);
    }

    .quickerbill-theme-single-blog-content h2 {
        font-size: 24px;
        margin: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-4) 0;
    }

    .quickerbill-theme-single-blog-content h3 {
        font-size: 20px;
        margin: var(--quickerbill-theme-variable-space-5) 0 var(--quickerbill-theme-variable-space-3) 0;
    }

    .quickerbill-theme-single-blog-content h4 {
        font-size: 18px;
    }

    .quickerbill-theme-single-blog-tags-section {
        margin-bottom: var(--quickerbill-theme-variable-space-8);
    }

    .quickerbill-theme-single-blog-author-bio {
        padding: var(--quickerbill-theme-variable-space-6);
        margin-bottom: var(--quickerbill-theme-variable-space-8);
    }

    .quickerbill-theme-single-blog-author-bio-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .quickerbill-theme-single-blog-author-avatar img {
        width: 70px;
        height: 70px;
    }

    .quickerbill-theme-single-blog-related-section {
        margin-top: var(--quickerbill-theme-variable-space-8);
    }

    .quickerbill-theme-single-blog-related-title {
        font-size: 24px;
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }

    .quickerbill-theme-single-blog-related-grid {
        grid-template-columns: 1fr;
        gap: var(--quickerbill-theme-variable-space-5);
    }

    .quickerbill-theme-single-blog-related-card-image {
        height: 200px;
    }

    .quickerbill-theme-single-blog-sidebar {
        grid-template-columns: 1fr;
    }
    
    /* ========================================
       KNOWLEDGEBASE WIDGET - MOBILE
       ======================================== */
    
    /** Section */
    .quickerbill-theme-knowledgebase-section {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-10) 0;
    }
    
    /** Hero Section */
    .quickerbill-theme-knowledgebase-hero {
        padding: var(--quickerbill-theme-variable-space-12) 0 var(--quickerbill-theme-variable-space-10) 0;
    }
    
    .quickerbill-theme-knowledgebase-hero-content {
        max-width: 100%;
    }
    
    .quickerbill-theme-knowledgebase-hero-title {
        font-size: 32px;
    }
    
    .quickerbill-theme-knowledgebase-hero-search-input {
        padding: 16px 20px 16px 56px;
        font-size: 16px;
    }
    
    .quickerbill-theme-knowledgebase-hero-search-icon {
        left: 20px;
        font-size: 20px;
    }
    
    /** Category Grid (Force single column) */
    .quickerbill-theme-knowledgebase-category-grid[data-columns="2"],
    .quickerbill-theme-knowledgebase-category-grid[data-columns="3"],
    .quickerbill-theme-knowledgebase-category-grid[data-columns="4"] {
        grid-template-columns: 1fr;
    }
    
    .quickerbill-theme-knowledgebase-category-grid {
        gap: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-knowledgebase-category-card {
        padding: var(--quickerbill-theme-variable-space-6) var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-knowledgebase-category-card-icon {
        width: 70px;
        height: 70px;
        margin-bottom: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-knowledgebase-category-card-icon i,
    .quickerbill-theme-knowledgebase-category-card-icon svg {
        font-size: 40px;
        width: 40px;
        height: 40px;
    }
    
    .quickerbill-theme-knowledgebase-category-card-title {
        font-size: 20px;
    }
    
    .quickerbill-theme-knowledgebase-category-card-description {
        font-size: 14px;
    }
    
    /** Archive Header */
    .quickerbill-theme-knowledgebase-archive-header {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-6) 0;
    }
    
    .quickerbill-theme-knowledgebase-archive-title,
    .quickerbill-theme-knowledgebase-archive-category-name {
        font-size: 28px;
    }
    
    .quickerbill-theme-knowledgebase-archive-description {
        font-size: 16px;
    }
    
    /** Layout */
    .quickerbill-theme-knowledgebase-layout {
        gap: 32px;
    }
    
    /** Article Grid (Single column) */
    .quickerbill-theme-knowledgebase-article-grid {
        grid-template-columns: 1fr;
        gap: var(--quickerbill-theme-variable-space-6);
        margin-bottom: var(--quickerbill-theme-variable-space-8);
    }
    
    .quickerbill-theme-knowledgebase-article-card-image {
        height: 200px;
    }
    
    .quickerbill-theme-knowledgebase-article-card-body {
        padding: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-knowledgebase-article-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--quickerbill-theme-variable-space-1-5);
    }
    
    .quickerbill-theme-knowledgebase-article-card-title {
        font-size: 17px;
    }
    
    .quickerbill-theme-knowledgebase-article-card-excerpt {
        font-size: 14px;
    }
    
    /** Breadcrumbs */
    .quickerbill-theme-knowledgebase-breadcrumb {
        font-size: 13px;
        gap: var(--quickerbill-theme-variable-space-1-5);
    }
    
    /** Single Article */
    .quickerbill-theme-knowledgebase-single-header {
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-knowledgebase-single-title {
        font-size: 28px;
    }
    
    .quickerbill-theme-knowledgebase-single-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--quickerbill-theme-variable-space-2);
    }
    
    .quickerbill-theme-knowledgebase-single-content {
        font-size: 15px;
        margin-bottom: var(--quickerbill-theme-variable-space-8);
    }
    
    .quickerbill-theme-knowledgebase-single-content h2 {
        font-size: 24px;
        margin: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-4) 0;
    }
    
    .quickerbill-theme-knowledgebase-single-content h3 {
        font-size: 20px;
        margin: var(--quickerbill-theme-variable-space-5) 0 var(--quickerbill-theme-variable-space-3) 0;
    }
    
    .quickerbill-theme-knowledgebase-single-content h4 {
        font-size: 18px;
    }
    
    .quickerbill-theme-knowledgebase-single-tags-section {
        padding: var(--quickerbill-theme-variable-space-5) 0;
        margin-bottom: var(--quickerbill-theme-variable-space-8);
    }
    
    /** Helpful Voting Section */
    .quickerbill-theme-knowledgebase-single-helpful-section {
        padding: var(--quickerbill-theme-variable-space-6) 0;
        margin: var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-title {
        font-size: 18px;
        margin-bottom: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-buttons {
        flex-direction: column;
        width: 100%;
        gap: var(--quickerbill-theme-variable-space-3);
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-btn {
        width: 100%;
        justify-content: center;
        padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-5);
        font-size: 15px;
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-percentage {
        font-size: 28px;
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-count {
        font-size: 13px;
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-message,
    .quickerbill-theme-knowledgebase-single-helpful-error {
        font-size: 14px;
        padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-4);
    }
    
    /** Related Articles */
    .quickerbill-theme-knowledgebase-single-related-section {
        margin-top: var(--quickerbill-theme-variable-space-8);
    }
    
    .quickerbill-theme-knowledgebase-single-related-title {
        font-size: 24px;
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-knowledgebase-single-related-grid {
        grid-template-columns: 1fr;
        gap: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-knowledgebase-related-card-image {
        height: 200px;
    }
    
    /** Pagination */
    .quickerbill-theme-knowledgebase-pagination {
        margin-top: var(--quickerbill-theme-variable-space-8);
    }
    
    .quickerbill-theme-knowledgebase-pagination .page-numbers {
        flex-wrap: wrap;
    }
    
    .quickerbill-theme-knowledgebase-pagination .page-numbers a,
    .quickerbill-theme-knowledgebase-pagination .page-numbers span {
        min-width: 40px;
        height: 40px;
        font-size: 13px;
    }
    
    /** Sidebar (Grid to single column) */
    .quickerbill-theme-knowledgebase-sidebar {
        grid-template-columns: 1fr;
    }
    
    .quickerbill-theme-knowledgebase-sidebar-widget {
        padding: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-knowledgebase-sidebar-title {
        font-size: 16px;
        margin-bottom: var(--quickerbill-theme-variable-space-4);
    }
    
    /* ========================================
       PRODUCT COMPARISON WIDGET - MOBILE
       ======================================== */

    .quickerbill-theme-product-comparison-section {
        padding: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-8) 0;
    }

    .quickerbill-theme-product-comparison-billing-cycle-section {
        padding: var(--quickerbill-theme-variable-space-4) 0;
    }

    .quickerbill-theme-product-comparison-table {
        min-width: 800px;
    }

    .quickerbill-theme-product-comparison-feature-header,
    .quickerbill-theme-product-comparison-product-header {
        padding: var(--quickerbill-theme-variable-space-6) var(--quickerbill-theme-variable-space-4);
    }

    .quickerbill-theme-product-comparison-feature-header {
        font-size: 16px;
    }

    .quickerbill-theme-product-comparison-product-name {
        font-size: 18px;
    }

    .quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-price-amount {
        font-size: 28px;
    }

    .quickerbill-theme-product-comparison-feature-label,
    .quickerbill-theme-product-comparison-feature-value {
        padding: var(--quickerbill-theme-variable-space-4);
        font-size: 14px;
    }

    .quickerbill-theme-product-comparison-check,
    .quickerbill-theme-product-comparison-cross {
        width: 28px;
        height: 28px;
    }

    .quickerbill-theme-product-comparison-check .dashicons,
    .quickerbill-theme-product-comparison-cross .dashicons {
        width: 18px;
        height: 18px;
        font-size: 18px;
    }
    
   /* ========================================
      SPOTLIGHT TLDS WIDGET - MOBILE
      ======================================== */

    .quickerbill-theme-spotlight-tlds-section {
        padding: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-8) 0;
    }
    
    /* Force 1 column for ALL grids on mobile */
    .quickerbill-theme-spotlight-tlds-grid[data-columns="2"],
    .quickerbill-theme-spotlight-tlds-grid[data-columns="3"],
    .quickerbill-theme-spotlight-tlds-grid[data-columns="4"],
    .quickerbill-theme-spotlight-tlds-grid[data-columns="5"],
    .quickerbill-theme-spotlight-tlds-grid[data-columns="6"] {
        grid-template-columns: 1fr;
    }
    
    .quickerbill-theme-spotlight-tlds-grid {
        gap: var(--quickerbill-theme-variable-space-5);
        margin-bottom: var(--quickerbill-theme-variable-space-8);
    }
    
    .quickerbill-theme-spotlight-tld-card {
        padding: var(--quickerbill-theme-variable-space-6) var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-spotlight-tld-name {
        font-size: 28px;
    }
    
    .quickerbill-theme-spotlight-tld-price {
        font-size: 24px;
    }
    
    .quickerbill-theme-spotlight-tlds-bottom-link {
        margin-top: var(--quickerbill-theme-variable-space-8);
    }
    
    .quickerbill-theme-spotlight-tld-price-original {
        font-size: 16px;
    }
    
    .quickerbill-theme-spotlight-tld-promotion-badge {
        top: var(--quickerbill-theme-variable-space-3);
        right: var(--quickerbill-theme-variable-space-3);
        font-size: 10px;
        padding: 3px 8px;
    }
    
    /* ========================================
       DOMAIN PRICING WIDGET - MOBILE
       ======================================== */
    
    .quickerbill-theme-domain-pricing-section {
        padding: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-8) 0;
    }
    
    /* STACK VERTICALLY ON MOBILE ONLY */
    .quickerbill-theme-domain-pricing-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .quickerbill-theme-domain-pricing-search {
        max-width: 100%;
    }
    
    .quickerbill-theme-domain-pricing-type-switcher {
        width: 100%;
        justify-content: center;
    }
    
    .quickerbill-theme-domain-pricing-type-btn {
        flex: 1;
        padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-4);
        font-size: 13px;
    }
    
    /* Table becomes scrollable horizontally on mobile */
    .quickerbill-theme-domain-pricing-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .quickerbill-theme-domain-pricing-footer {
        flex-direction: column;
        gap: var(--quickerbill-theme-variable-space-4);
        text-align: center;
    }
    
    .quickerbill-theme-domain-pricing-pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .quickerbill-theme-domain-pricing-page-btn {
        min-width: 40px;
        height: 40px;
        font-size: 13px;
    }
    
}

/* ========================================
   SMALL MOBILE (480px and below)
   ======================================== */

@media (max-width: 480px) {
    
    /* ========================================
       CORE - SMALL MOBILE
       ======================================== */
    
    /** Container */
    .quickerbill-theme-container,
    .quickerbill-theme-container-narrow,
    .quickerbill-theme-container-wide {
        padding: 0 var(--quickerbill-theme-variable-space-3);
    }
    
    /** Section Spacing */
    .quickerbill-theme-section {
        padding: var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-section-sm {
        padding: var(--quickerbill-theme-variable-space-6) 0;
    }
    
    .quickerbill-theme-section-lg {
        padding: var(--quickerbill-theme-variable-space-10) 0;
    }
    
    /** Typography */
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.375rem;
    }
    
    h3 {
        font-size: 1.125rem;
    }
    
    h4 {
        font-size: 1rem;
    }
    
    /** Buttons */
    .quickerbill-theme-btn {
        padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-4);
        font-size: 13px;
    }
    
    .quickerbill-theme-btn-small {
        padding: var(--quickerbill-theme-variable-space-2) var(--quickerbill-theme-variable-space-3);
        font-size: 12px;
    }
    
    .quickerbill-theme-btn-large {
        padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-5);
        font-size: 14px;
    }
    
    .quickerbill-theme-btn-icon {
        width: 36px;
        height: 36px;
        padding: var(--quickerbill-theme-variable-space-2);
    }
    
    .quickerbill-theme-btn-icon .dashicons {
        width: 16px;
        height: 16px;
        font-size: 16px;
    }
    
    /** Forms */
    .quickerbill-theme-form-group {
        margin-bottom: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-form-label {
        font-size: 13px;
    }
    
    .quickerbill-theme-form-input,
    .quickerbill-theme-form-select,
    .quickerbill-theme-form-textarea {
        padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-3);
        font-size: 16px;
    }
    
    .quickerbill-theme-form-hint,
    .quickerbill-theme-form-error-message,
    .quickerbill-theme-form-success-message {
        font-size: 12px;
    }
    
    .quickerbill-theme-form-row {
        gap: var(--quickerbill-theme-variable-space-4);
    }
    
    /** Cards */
    .quickerbill-theme-card {
        padding: var(--quickerbill-theme-variable-space-4);
        border-radius: var(--quickerbill-theme-variable-radius-lg);
    }
    
    .quickerbill-theme-card-small {
        padding: var(--quickerbill-theme-variable-space-3);
    }
    
    .quickerbill-theme-card-large {
        padding: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-card-title {
        font-size: 15px;
    }
    
    .quickerbill-theme-card-subtitle {
        font-size: 13px;
    }
    
    .quickerbill-theme-card-icon-wrapper {
        width: 48px;
        height: 48px;
    }
    
    .quickerbill-theme-card-icon-wrapper .dashicons {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }
    
    /** Badges */
    .quickerbill-theme-badge {
        font-size: 10px;
        padding: 2px var(--quickerbill-theme-variable-space-2);
    }
    
    .quickerbill-theme-badge-large {
        font-size: 12px;
        padding: var(--quickerbill-theme-variable-space-1-5) var(--quickerbill-theme-variable-space-2-5);
    }
    
    .quickerbill-theme-badge .dashicons {
        width: 12px;
        height: 12px;
        font-size: 12px;
    }
    
    .quickerbill-theme-badge-popular {
        font-size: 10px;
        padding: var(--quickerbill-theme-variable-space-1) var(--quickerbill-theme-variable-space-3);
    }
    
    /** Spacing Utilities */
    .quickerbill-theme-mt-8,
    .quickerbill-theme-mb-8 {
        margin-top: var(--quickerbill-theme-variable-space-6);
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-pt-6,
    .quickerbill-theme-pb-6 {
        padding-top: var(--quickerbill-theme-variable-space-4);
        padding-bottom: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-gap-6 {
        gap: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-gap-8 {
        gap: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-grid {
        gap: var(--quickerbill-theme-variable-space-4);
    }
    
    /** Spinners */
    .quickerbill-theme-spinner {
        width: 20px;
        height: 20px;
        border-width: 2px;
    }
    
    .quickerbill-theme-spinner-large {
        width: 32px;
        height: 32px;
        border-width: 3px;
    }
    
    /* ========================================
       CENTRALIZED WIDGET TYPOGRAPHY - SMALL MOBILE
       ======================================== */
    
    .quickerbill-theme-typography-widget-title {
        font-size: 28px;
    }
    
    .quickerbill-theme-typography-widget-title-large {
        font-size: 32px;
    }
    
    .quickerbill-theme-typography-widget-description-large {
        font-size: 16px;
    }
    
    .quickerbill-theme-typography-widget-header {
        padding: 30px 0 15px;
    }
    
    .quickerbill-theme-typography-widget-hero {
        padding: 60px 0 40px;
    }
    
    /* ========================================
       HEADER - SMALL MOBILE
       ======================================== */
    
    /** Header - Logo */
    .quickerbill-theme-header-logo img {
        max-height: 32px;
    }
    
    .quickerbill-theme-header-logo h1 {
        font-size: 20px;
    }
    
    .quickerbill-theme-header-inner {
        padding: 0 var(--quickerbill-theme-variable-space-3);
    }
    
    /** Header - Cart Button */
    .quickerbill-theme-header-cart-button {
        padding: 8px 12px;
    }
    
    /** Header - Right Section */
    .quickerbill-theme-header-right {
        gap: 8px;
    }
    
    /* ========================================
       DOMAIN SEARCH WIDGET - SMALL MOBILE
       ======================================== */
    
    .quickerbill-theme-domain-search-widget {
        padding: var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-domain-search-row {
        gap: 24px;
    }
    
    .quickerbill-theme-domain-search-video-play {
        width: 70px;
        height: 70px;
    }
    
    .quickerbill-theme-domain-search-play-icon {
        width: 28px;
        height: 28px;
    }
    
    /* ========================================
       DOMAIN TRANSFER WIDGET - SMALL MOBILE
       ======================================== */
    
    .quickerbill-theme-domain-transfer-widget {
        padding: var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-domain-transfer-row {
        gap: 24px;
    }
    
    .quickerbill-theme-domain-transfer-video-play {
        width: 70px;
        height: 70px;
    }
    
    .quickerbill-theme-domain-transfer-play-icon {
        width: 28px;
        height: 28px;
    }
    
    /* ========================================
       HOSTING WIDGET - SMALL MOBILE
       ======================================== */
    
    .quickerbill-theme-hosting-widget {
        padding: var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-hosting-row {
        gap: 24px;
    }
    
    .quickerbill-theme-hosting-pricing-amount {
        font-size: 24px;
    }
    
    .quickerbill-theme-hosting-pricing-original {
        font-size: 16px;
    }
    
    .quickerbill-theme-hosting-video-play {
        width: 70px;
        height: 70px;
    }
    
    .quickerbill-theme-hosting-play-icon {
        width: 28px;
        height: 28px;
    }
    
    /* ========================================
       PRODUCT GRID WIDGET - SMALL MOBILE
       ======================================== */
    
    /** Product Grid */
    .quickerbill-theme-product-grid {
        gap: var(--quickerbill-theme-variable-space-5);
        padding-bottom: var(--quickerbill-theme-variable-space-6);
    }
    
    /** Product Grid - Billing Cycle Switcher */
    .quickerbill-theme-product-grid-billing-cycle-switcher-section {
        padding: var(--quickerbill-theme-variable-space-6) 0;
    }
    
    .quickerbill-theme-product-grid-billing-cycle-switcher {
        padding: 5px;
        gap: 4px;
    }
    
    .quickerbill-theme-product-grid-cycle-btn {
        padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-4);
        font-size: 13px;
    }
    
    /** Product Grid - Card */
    .quickerbill-theme-product-card-body {
        padding: var(--quickerbill-theme-variable-space-6) var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-product-card-name {
        font-size: 18px;
    }
    
    .quickerbill-theme-product-card-cta .quickerbill-theme-btn {
        padding: var(--quickerbill-theme-variable-space-3) var(--quickerbill-theme-variable-space-5);
        font-size: 14px;
    }
    
    /** Product Grid - Pricing (Force even smaller on tiny screens) */
    .quickerbill-theme-product-grid-price-amount {
        font-size: 28px !important;
    }
    
    .quickerbill-theme-product-grid-price-original {
        font-size: 14px !important;
    }
    
    .quickerbill-theme-product-grid-price-period {
        font-size: 13px !important;
    }
    
    .quickerbill-theme-product-grid-billing-cycle {
        font-size: 12px;
    }
    
    /** Product Grid - Features */
    .quickerbill-theme-product-grid-features li {
        font-size: 13px;
    }
    
    /** Product Grid - Features Link */
    .quickerbill-theme-product-grid-features-link {
        font-size: 12px;
    }
    
    /** Product Grid - Badges */
    .quickerbill-theme-product-promotion-badge {
        top: var(--quickerbill-theme-variable-space-2-5);
        right: var(--quickerbill-theme-variable-space-2-5);
        font-size: 9px;
        padding: 3px 7px;
    }
    
    .quickerbill-theme-product-popular-badge {
        font-size: 9px;
        padding: 3px 8px;
    }
    
    /* ========================================
       ICON BOX GRID WIDGET - SMALL MOBILE
       ======================================== */
    
    .quickerbill-theme-icon-box-grid-section {
        padding: var(--quickerbill-theme-variable-space-5) 0 var(--quickerbill-theme-variable-space-6) 0;
    }
    
    .quickerbill-theme-icon-box-card {
        padding: 24px 20px;
    }
    
    .quickerbill-theme-icon-box-icon {
        width: 40px;
        height: 40px;
        margin-bottom: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-icon-box-icon svg,
    .quickerbill-theme-icon-box-icon img {
        width: 40px;
        height: 40px;
    }
    
    .quickerbill-theme-icon-box-icon i {
        font-size: 40px;
    }
    
    .quickerbill-theme-icon-box-card-title {
        font-size: 17px;
    }
    
    .quickerbill-theme-icon-box-card-description {
        font-size: 13px;
    }
    
    /* ========================================
       IMAGE CONTENT ROW WIDGET - SMALL MOBILE
       ======================================== */
    
    .quickerbill-theme-image-content-row-widget {
        padding: var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-image-content-row {
        gap: 24px;
        margin-bottom: 40px;
    }
    
    .quickerbill-theme-image-content-row-spacing-large .quickerbill-theme-image-content-row {
        margin-bottom: 60px;
    }
    
    .quickerbill-theme-image-content-row-spacing-medium .quickerbill-theme-image-content-row {
        margin-bottom: 40px;
    }
    
    .quickerbill-theme-image-content-row-spacing-small .quickerbill-theme-image-content-row {
        margin-bottom: 30px;
    }
    
    /* ========================================
       VISUAL ACCORDION WIDGET - SMALL MOBILE
       ======================================== */
    
    .quickerbill-theme-visual-accordion-section {
        padding: var(--quickerbill-theme-variable-space-5) 0 var(--quickerbill-theme-variable-space-6) 0;
    }
    
    .quickerbill-theme-visual-accordion-layout {
        gap: 24px;
    }
    
    .quickerbill-theme-visual-accordion-image-wrapper {
        min-height: 250px;
    }
    
    .quickerbill-theme-visual-accordion-title {
        font-size: 15px;
    }
    
    .quickerbill-theme-visual-accordion-header {
        padding: var(--quickerbill-theme-variable-space-3-5) var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-visual-accordion-icon {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
    
    .quickerbill-theme-visual-accordion-content-inner {
        padding: 0 var(--quickerbill-theme-variable-space-4) var(--quickerbill-theme-variable-space-3-5) var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-visual-accordion-content-inner p {
        font-size: 13px;
    }
    
    /* ========================================
       FAQS WIDGET - SMALL MOBILE
       ======================================== */
       
    .quickerbill-theme-faqs-section {
        padding: var(--quickerbill-theme-variable-space-5) 0 var(--quickerbill-theme-variable-space-6) 0;
    }
    
    .quickerbill-theme-faqs-header {
        padding: var(--quickerbill-theme-variable-space-3-5) var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-faqs-question {
        font-size: 14px;
    }
    
    .quickerbill-theme-faqs-icon {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
    
    .quickerbill-theme-faqs-content-inner {
        padding: 0 var(--quickerbill-theme-variable-space-4) var(--quickerbill-theme-variable-space-3-5) var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-faqs-content-inner p {
        font-size: 13px;
    }
    
    /* ========================================
       404 WIDGET - SMALL MOBILE
       ======================================== */
       
    .quickerbill-theme-404-hero {
        padding: var(--quickerbill-theme-variable-space-8) 0 var(--quickerbill-theme-variable-space-6) 0;
    }
    
    .quickerbill-theme-404-illustration {
        max-width: 300px;
        margin-bottom: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-404-title {
        font-size: 28px;
    }
    
    .quickerbill-theme-404-description {
        font-size: 15px;
    }
    
    .quickerbill-theme-404-popular-section {
        padding: var(--quickerbill-theme-variable-space-6) 0;
    }
    
    .quickerbill-theme-404-popular-title {
        font-size: 17px;
        margin-bottom: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-404-page-card {
        padding: var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-404-page-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
        margin-bottom: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-404-page-icon i,
    .quickerbill-theme-404-page-icon svg {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }
    
    .quickerbill-theme-404-page-title {
        font-size: 16px;
    }
    
    .quickerbill-theme-404-page-subtitle {
        font-size: 13px;
    }
    
    .quickerbill-theme-404-actions {
        padding: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-10) 0;
    }
    
    /* ========================================
       BLOG WIDGET - SMALL MOBILE
       ======================================== */

    .quickerbill-theme-blog-section {
        padding: var(--quickerbill-theme-variable-space-5) 0 var(--quickerbill-theme-variable-space-6) 0;
    }

    .quickerbill-theme-blog-layout {
        gap: 24px;
    }

    .quickerbill-theme-blog-grid {
        gap: var(--quickerbill-theme-variable-space-5);
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }

    .quickerbill-theme-blog-card-image {
        height: 180px;
    }

    .quickerbill-theme-blog-card-body {
        padding: var(--quickerbill-theme-variable-space-4);
        gap: var(--quickerbill-theme-variable-space-2-5);
    }

    .quickerbill-theme-blog-card-meta {
        font-size: 12px;
    }

    .quickerbill-theme-blog-card-title {
        font-size: 16px;
    }

    .quickerbill-theme-blog-card-excerpt {
        font-size: 13px;
    }

    .quickerbill-theme-blog-card-read-more {
        font-size: 13px;
    }

    .quickerbill-theme-blog-sidebar-widget {
        padding: var(--quickerbill-theme-variable-space-5);
    }

    .quickerbill-theme-blog-sidebar-title {
        font-size: 16px;
        margin-bottom: var(--quickerbill-theme-variable-space-4);
    }

    .quickerbill-theme-blog-recent-post-thumb {
        width: 60px;
        height: 60px;
    }

    .quickerbill-theme-blog-recent-post-title {
        font-size: 13px;
    }

    .quickerbill-theme-blog-tag {
        font-size: 12px;
        padding: var(--quickerbill-theme-variable-space-1) var(--quickerbill-theme-variable-space-2-5);
    }

    .quickerbill-theme-blog-pagination .page-numbers a,
    .quickerbill-theme-blog-pagination .page-numbers span {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
    }
    
    /* ========================================
       SINGLE BLOG WIDGET - SMALL MOBILE
       ======================================== */

    .quickerbill-theme-single-blog-section {
        padding: var(--quickerbill-theme-variable-space-5) 0 var(--quickerbill-theme-variable-space-6) 0;
    }

    .quickerbill-theme-single-blog-layout {
        gap: 24px;
    }

    .quickerbill-theme-single-blog-featured-image {
        margin-bottom: var(--quickerbill-theme-variable-space-5);
    }

    .quickerbill-theme-single-blog-header {
        margin-bottom: var(--quickerbill-theme-variable-space-5);
    }

    .quickerbill-theme-single-blog-title {
        font-size: 24px;
    }

    .quickerbill-theme-single-blog-meta {
        font-size: 13px;
    }

    .quickerbill-theme-single-blog-content {
        font-size: 14px;
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }

    .quickerbill-theme-single-blog-content h2 {
        font-size: 22px;
    }

    .quickerbill-theme-single-blog-content h3 {
        font-size: 18px;
    }

    .quickerbill-theme-single-blog-content h4 {
        font-size: 16px;
    }

    .quickerbill-theme-single-blog-tags-section {
        padding: var(--quickerbill-theme-variable-space-5) 0;
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }

    .quickerbill-theme-single-blog-author-bio {
        padding: var(--quickerbill-theme-variable-space-5);
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }

    .quickerbill-theme-single-blog-author-bio-title {
        font-size: 18px;
    }

    .quickerbill-theme-single-blog-author-avatar img {
        width: 60px;
        height: 60px;
    }

    .quickerbill-theme-single-blog-author-name {
        font-size: 16px;
    }

    .quickerbill-theme-single-blog-author-description {
        font-size: 14px;
    }

    .quickerbill-theme-single-blog-related-section {
        margin-top: var(--quickerbill-theme-variable-space-6);
    }

    .quickerbill-theme-single-blog-related-title {
        font-size: 20px;
        margin-bottom: var(--quickerbill-theme-variable-space-5);
    }

    .quickerbill-theme-single-blog-related-card-image {
        height: 180px;
    }

    .quickerbill-theme-single-blog-related-card-body {
        padding: var(--quickerbill-theme-variable-space-4);
    }

    .quickerbill-theme-single-blog-related-card-title {
        font-size: 15px;
    }
    
    /* ========================================
       KNOWLEDGEBASE WIDGET - SMALL MOBILE
       ======================================== */
    
    /** Section */
    .quickerbill-theme-knowledgebase-section {
        padding: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-8) 0;
    }
    
    /** Hero Section */
    .quickerbill-theme-knowledgebase-hero {
        padding: var(--quickerbill-theme-variable-space-10) 0 var(--quickerbill-theme-variable-space-8) 0;
    }
    
    .quickerbill-theme-knowledgebase-hero-title {
        font-size: 28px;
    }
    
    .quickerbill-theme-knowledgebase-hero-search-input {
        padding: 14px 18px 14px 52px;
        font-size: 16px;
    }
    
    .quickerbill-theme-knowledgebase-hero-search-icon {
        left: 18px;
        font-size: 18px;
    }
    
    /** Category Grid */
    .quickerbill-theme-knowledgebase-category-grid {
        gap: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-knowledgebase-category-card {
        padding: var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-knowledgebase-category-card-icon {
        width: 60px;
        height: 60px;
        margin-bottom: var(--quickerbill-theme-variable-space-3);
    }
    
    .quickerbill-theme-knowledgebase-category-card-icon i,
    .quickerbill-theme-knowledgebase-category-card-icon svg {
        font-size: 36px;
        width: 36px;
        height: 36px;
    }
    
    .quickerbill-theme-knowledgebase-category-card-title {
        font-size: 18px;
    }
    
    .quickerbill-theme-knowledgebase-category-card-description {
        font-size: 13px;
    }
    
    /** Archive Header */
    .quickerbill-theme-knowledgebase-archive-header {
        padding: var(--quickerbill-theme-variable-space-6) 0 var(--quickerbill-theme-variable-space-5) 0;
    }
    
    .quickerbill-theme-knowledgebase-archive-title,
    .quickerbill-theme-knowledgebase-archive-category-name {
        font-size: 24px;
    }
    
    .quickerbill-theme-knowledgebase-archive-description {
        font-size: 15px;
    }
    
    /** Layout */
    .quickerbill-theme-knowledgebase-layout {
        gap: 24px;
    }
    
    /** Article Grid */
    .quickerbill-theme-knowledgebase-article-grid {
        gap: var(--quickerbill-theme-variable-space-5);
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-knowledgebase-article-card-image {
        height: 180px;
    }
    
    .quickerbill-theme-knowledgebase-article-card-body {
        padding: var(--quickerbill-theme-variable-space-4);
        gap: var(--quickerbill-theme-variable-space-2-5);
    }
    
    .quickerbill-theme-knowledgebase-article-card-meta {
        font-size: 12px;
    }
    
    .quickerbill-theme-knowledgebase-article-card-title {
        font-size: 16px;
    }
    
    .quickerbill-theme-knowledgebase-article-card-excerpt {
        font-size: 13px;
    }
    
    .quickerbill-theme-knowledgebase-article-card-read-more {
        font-size: 13px;
    }
    
    /** Breadcrumbs */
    .quickerbill-theme-knowledgebase-breadcrumb {
        font-size: 12px;
        margin-bottom: var(--quickerbill-theme-variable-space-5);
    }
    
    /** Single Article */
    .quickerbill-theme-knowledgebase-single-header {
        margin-bottom: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-knowledgebase-single-title {
        font-size: 24px;
    }
    
    .quickerbill-theme-knowledgebase-single-meta {
        font-size: 13px;
    }
    
    .quickerbill-theme-knowledgebase-single-content {
        font-size: 14px;
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-knowledgebase-single-content h2 {
        font-size: 22px;
    }
    
    .quickerbill-theme-knowledgebase-single-content h3 {
        font-size: 18px;
    }
    
    .quickerbill-theme-knowledgebase-single-content h4 {
        font-size: 16px;
    }
    
    .quickerbill-theme-knowledgebase-single-tags-section {
        padding: var(--quickerbill-theme-variable-space-4) 0;
        margin-bottom: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-knowledgebase-single-tags {
        gap: var(--quickerbill-theme-variable-space-1-5);
    }
    
    .quickerbill-theme-knowledgebase-single-tag {
        font-size: 12px;
        padding: var(--quickerbill-theme-variable-space-1) var(--quickerbill-theme-variable-space-2-5);
    }
    
    /** Helpful Voting Section */
    .quickerbill-theme-knowledgebase-single-helpful-section {
        padding: var(--quickerbill-theme-variable-space-5) 0;
        margin: var(--quickerbill-theme-variable-space-6) 0;
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-title {
        font-size: 16px;
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-btn {
        padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-4);
        font-size: 14px;
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-btn .dashicons {
        width: 18px;
        height: 18px;
        font-size: 18px;
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-percentage {
        font-size: 24px;
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-count {
        font-size: 12px;
    }
    
    .quickerbill-theme-knowledgebase-single-helpful-message,
    .quickerbill-theme-knowledgebase-single-helpful-error {
        font-size: 13px;
        padding: var(--quickerbill-theme-variable-space-2-5) var(--quickerbill-theme-variable-space-3);
    }
    
    /** Related Articles */
    .quickerbill-theme-knowledgebase-single-related-section {
        margin-top: var(--quickerbill-theme-variable-space-6);
    }
    
    .quickerbill-theme-knowledgebase-single-related-title {
        font-size: 20px;
        margin-bottom: var(--quickerbill-theme-variable-space-5);
    }
    
    .quickerbill-theme-knowledgebase-related-card-image {
        height: 180px;
    }
    
    .quickerbill-theme-knowledgebase-related-card-body {
        padding: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-knowledgebase-related-card-title {
        font-size: 15px;
    }
    
    /** Pagination */
    .quickerbill-theme-knowledgebase-pagination .page-numbers a,
    .quickerbill-theme-knowledgebase-pagination .page-numbers span {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
    }
    
    /** Sidebar */
    .quickerbill-theme-knowledgebase-sidebar-widget {
        padding: var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-knowledgebase-sidebar-title {
        font-size: 15px;
    }
    
    .quickerbill-theme-knowledgebase-category-link {
        font-size: 14px;
    }
    
    .quickerbill-theme-knowledgebase-category-tree-children .quickerbill-theme-knowledgebase-category-link {
        font-size: 13px;
    }
    
    .quickerbill-theme-knowledgebase-popular-title {
        font-size: 13px;
    }
    
    /* ========================================
       PRODUCT COMPARISON WIDGET - SMALL MOBILE
       ======================================== */

    .quickerbill-theme-product-comparison-section {
        padding: var(--quickerbill-theme-variable-space-5) 0 var(--quickerbill-theme-variable-space-6) 0;
    }

    .quickerbill-theme-product-comparison-table {
        min-width: 700px;
    }

    .quickerbill-theme-product-comparison-feature-header,
    .quickerbill-theme-product-comparison-product-header {
        padding: var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-3);
    }

    .quickerbill-theme-product-comparison-feature-header {
        font-size: 15px;
    }

    .quickerbill-theme-product-comparison-product-name {
        font-size: 17px;
    }

    .quickerbill-theme-product-comparison-price-box .quickerbill-theme-product-grid-price-amount {
        font-size: 24px;
    }

    .quickerbill-theme-product-comparison-feature-label,
    .quickerbill-theme-product-comparison-feature-value {
        padding: var(--quickerbill-theme-variable-space-3);
        font-size: 13px;
    }

    .quickerbill-theme-product-comparison-check,
    .quickerbill-theme-product-comparison-cross {
        width: 24px;
        height: 24px;
    }

    .quickerbill-theme-product-comparison-check .dashicons,
    .quickerbill-theme-product-comparison-cross .dashicons {
        width: 16px;
        height: 16px;
        font-size: 16px;
    }

    .quickerbill-theme-product-comparison-tooltip .dashicons {
        width: 14px;
        height: 14px;
        font-size: 14px;
    }
    
   /* ========================================
      SPOTLIGHT TLDS WIDGET - SMALL MOBILE
      ======================================== */

    .quickerbill-theme-spotlight-tlds-section {
        padding: var(--quickerbill-theme-variable-space-5) 0 var(--quickerbill-theme-variable-space-6) 0;
    }
    
    .quickerbill-theme-spotlight-tld-card {
        padding: var(--quickerbill-theme-variable-space-5) var(--quickerbill-theme-variable-space-4);
    }
    
    .quickerbill-theme-spotlight-tld-name {
        font-size: 24px;
    }
    
    .quickerbill-theme-spotlight-tld-price {
        font-size: 20px;
    }
    
    .quickerbill-theme-spotlight-tld-price-original {
        font-size: 14px;
    }
    
    .quickerbill-theme-spotlight-tld-promotion-badge {
        top: var(--quickerbill-theme-variable-space-2-5);
        right: var(--quickerbill-theme-variable-space-2-5);
        font-size: 9px;
        padding: 3px 7px;
    }
    
    /* ========================================
       DOMAIN PRICING WIDGET - MOBILE
       ======================================== */
    
    .quickerbill-theme-domain-pricing-page-btn {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
    }
    
}
/**
 * QuickerBill Theme Print Styles
 * 
 * @package QuickerBill/Theme
 */

@media print {
    
    /** Hide interactive elements */
    .quickerbill-theme-btn,
    .quickerbill-theme-dropdown,
    .quickerbill-theme-form-group,
    .quickerbill-theme-alert-close,
    .quickerbill-theme-badge-promotion {
        display: none;
    }
    
    /** Optimize for print */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: var(--quickerbill-theme-variable-black);
    }
    
    /** Remove shadows and backgrounds */
    .quickerbill-theme-card {
        border: 1px solid var(--quickerbill-theme-variable-gray-300);
        box-shadow: none;
        page-break-inside: avoid;
    }
    
    .quickerbill-theme-alert,
    .quickerbill-theme-badge {
        border: 1px solid var(--quickerbill-theme-variable-gray-300);
        background: transparent;
        color: var(--quickerbill-theme-variable-black);
    }
    
}