/*
Theme Name: OneOffshore Company V21
Theme URI: https://oneoffshorecompany.com
Author: OneOffshore Team
Author URI: https://oneoffshorecompany.com
Description: A modern WordPress theme for offshore company formation services with full template hierarchy support - Version 21
Version: 21.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oneoffshore
Tags: one-column, custom-menu, featured-images, threaded-comments, translation-ready, woocommerce

CACHE BUSTER: V21.0.0 - 2026-03-XX - WooCommerce page alignment adjustments
*/

/* ===========================
   CSS Variables - Color Scheme
   =========================== */
:root {
    --primary-blue: #5B9DD1;
    --button-blue: #3B9DD9;
    --dark-text: #2D3748;
    --secondary-text: #718096;
    --light-bg: #F7FAFC;
    --white: #FFFFFF;
    --green-accent: #10B981;
    --footer-dark: #2D3748;
    --border-color: #E2E8F0;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    color: var(--dark-text);
    line-height: 1.6;
    overflow-x: hidden;
}

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

/* Logo images override - more specific */
.site-logo img,
.custom-logo-link.site-logo img,
.custom-logo-link img,
.custom-logo {
    max-width: none !important;
    width: auto !important;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* Global reset - but allow lists in content areas */
ul {
    list-style: none;
}

/* Restore list styling for content areas */
.entry-content ul,
.page-content ul,
.content-wrap ul,
.f_bullet ul,
.forming_cenr ul,
.site-main ul:not(.menu):not(.sub-menu),
article ul:not(.menu):not(.sub-menu) {
    list-style: disc !important;
    list-style-position: outside !important;
}

/* ===========================
   Header & Navigation
   =========================== */
.site-header {
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
}

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    width: 100%;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 600;
}

.logo-circle {
    width: 40px;
    height: 40px;
    background: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-circle svg {
    width: 24px;
    height: 24px;
    fill: white;
}

/* Logo size will be overridden by inline CSS from customizer */
.site-logo .custom-logo-link {
    display: block;
}

.site-logo .custom-logo-link img,
.site-logo .custom-logo {
    display: block;
    max-width: none;
    width: auto;
}

.logo-text {
    color: var(--dark-text);
}

.logo-text .highlight {
    color: var(--primary-blue);
}

.main-navigation {
    padding: 15px 0;
    display: flex;
    justify-content: center;
    width: 100%;
    border-top: 1px solid var(--border-color);
    margin-top: 0;
}

.main-navigation ul {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-navigation a:hover {
    color: var(--button-blue);
}

/* Dropdown Menu Styles */
.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    min-width: 200px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-radius: 6px;
    padding: 10px 0;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li.has-dropdown:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-navigation .sub-menu li {
    width: 100%;
}

.main-navigation .sub-menu a {
    padding: 10px 20px;
    display: block;
    color: var(--dark-text);
    font-size: 14px;
    white-space: nowrap;
}

.main-navigation .sub-menu a:hover {
    background: var(--light-bg);
    color: var(--button-blue);
}

/* Dropdown Toggle Arrow */
.dropdown-toggle {
    font-size: 10px;
    margin-left: 5px;
    transition: transform 0.3s;
    display: inline-block;
    pointer-events: none;
}

.main-navigation li:hover > a .dropdown-toggle {
    transform: rotate(180deg);
}

.main-navigation li.has-dropdown.open > a .dropdown-toggle {
    transform: rotate(180deg);
}

/* Nested Dropdowns (3rd level) */
.main-navigation .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: 10px;
}

.header-actions {
    display: flex;
    gap: 20px;
    align-items: center;
}

.search-btn, .cart-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--dark-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--dark-text);
    padding: 5px;
    line-height: 1;
}

/* Mobile Navigation - Hidden by default on mobile */
@media (max-width: 992px) {
    .header-container {
        position: relative;
    }

    .header-top-row {
        border-bottom: none;
    }

    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 20px;
        z-index: 999;
        margin-top: 0;
        border-top: 1px solid var(--border-color);
    }

    .main-navigation.active {
        display: block;
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }

    .main-navigation li:last-child {
        border-bottom: none;
    }

    .main-navigation a {
        padding: 15px 0;
        width: 100%;
        display: block;
    }

    .mobile-menu-toggle {
        display: block !important;
    }

    .header-actions {
        gap: 10px;
    }
}

/* Mobile Dropdown Styles */
@media (max-width: 992px) {
    .main-navigation .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--light-bg);
        margin-top: 0;
        padding-left: 20px;
        display: none;
    }

    .main-navigation.active .sub-menu {
        display: block;
    }

    .main-navigation.active li.has-dropdown > .sub-menu {
        display: none;
    }

    .main-navigation.active li.has-dropdown.open > .sub-menu {
        display: block;
    }

    .dropdown-toggle {
        margin-left: auto;
        cursor: pointer;
    }
}

/* ===========================
   Hero Section
   =========================== */
.hero-section {
    /* Background gradient is set via inline CSS from customizer */
    padding: 100px 20px;
    text-align: center;
    color: var(--white);
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.hero-section h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-section .hero-subtitle {
    font-size: 18px;
    margin-bottom: 40px;
    opacity: 0.95;
    line-height: 1.8;
}

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

.hero-section .btn,
.hero-section .btn-white,
.hero-section .btn-outline,
.hero-buttons .btn,
.hero-buttons .btn-white,
.hero-buttons .btn-outline {
    background: #FFFFFF !important;
    color: #3FA4F4 !important;
    border: none !important;
}

.hero-section .btn:hover,
.hero-section .btn-white:hover,
.hero-section .btn-outline:hover,
.hero-buttons .btn:hover,
.hero-buttons .btn-white:hover,
.hero-buttons .btn-outline:hover {
    background: #f0f4f8 !important;
    color: #3FA4F4 !important;
}

.btn {
    padding: 8px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    display: inline-block;
    text-decoration: none;
}

.btn-white,
.btn-outline {
    background: #FFFFFF !important;
    color: #3FA4F4 !important;
    border: none !important;
}

.btn-white:hover,
.btn-outline:hover {
    background: #f0f4f8 !important;
    color: #3FA4F4 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ===========================
   Section Styles
   =========================== */
.content-section {
    padding: 80px 20px;
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--dark-text);
}

.section-subtitle {
    text-align: center;
    font-size: 18px;
    color: var(--secondary-text);
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Alternate background colors */
.bg-light {
    background: var(--light-bg);
}

.bg-white {
    background: var(--white);
}

/* ===========================
   Feature Cards (Welcome Section)
   =========================== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.feature-card {
    text-align: center;
}

.feature-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    color: var(--primary-blue);
}

.feature-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--dark-text);
}

.feature-card p {
    color: var(--secondary-text);
    font-size: 15px;
    line-height: 1.6;
}

/* ===========================
   Jurisdiction Cards
   =========================== */
.jurisdiction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 50px;
}

@media (min-width: 768px) {
    .jurisdiction-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .jurisdiction-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.jurisdiction-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: box-shadow 0.3s ease;
    border: 1px solid #E5E7EB;
}

.jurisdiction-card.popular-card {
    border: 2px solid #10B981;
}

.jurisdiction-card:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.jurisdiction-header-link {
    text-decoration: none;
    display: block;
}

.jurisdiction-header {
    height: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
    padding: 20px;
}

/* Flag container and display */
.flag-container {
    margin-bottom: 8px;
}

.flag-display {
    width: 48px;
    height: 32px;
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Gradient backgrounds for each jurisdiction matching the reference */
.jurisdiction-seychelles,
.flag-seychelles { 
    background: linear-gradient(45deg, #0052CC 0%, #0052CC 33%, #FFD700 33%, #FFD700 66%, #DC143C 66%, #DC143C 100%); 
}

.jurisdiction-bvi,
.flag-bvi { 
    background: linear-gradient(to right, #0052CC 0%, #0052CC 65%, #006600 65%, #006600 100%); 
}

.jurisdiction-gibraltar,
.flag-gibraltar { 
    background: linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(220, 20, 60) 50%, rgb(220, 20, 60) 100%); 
}

.jurisdiction-hongkong,
.flag-hong-kong { 
    background: #DC143C;
    position: relative;
}

/* Hong Kong flag - red with white bauhinia flower */
.flag-hong-kong .flag-display {
    background: #DC143C;
    position: relative;
}

.flag-hong-kong .flag-display::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 
        0 -8px 0 -2px #FFFFFF,
        8px 0 0 -2px #FFFFFF,
        0 8px 0 -2px #FFFFFF,
        -8px 0 0 -2px #FFFFFF,
        6px -6px 0 -2px #FFFFFF,
        6px 6px 0 -2px #FFFFFF,
        -6px 6px 0 -2px #FFFFFF,
        -6px -6px 0 -2px #FFFFFF;
}

.jurisdiction-marshall,
.flag-marshall-islands { 
    background: linear-gradient(to right, #0052CC 0%, #0052CC 50%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%); 
}

.jurisdiction-nevis,
.flag-nevis { 
    background: linear-gradient(135deg, #006600 0%, #006600 40%, #FFD700 40%, #FFD700 60%, #DC143C 60%, #DC143C 100%); 
}

.jurisdiction-uk,
.flag-uk,
.flag-uk-ltd,
.flag-uk-llp,
.flag-uk-bank { 
    background: linear-gradient(135deg, #012169 0%, #012169 50%, #C8102E 50%, #C8102E 100%); 
}

.jurisdiction-belize,
.flag-belize { 
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 12.5%, #0052CC 12.5%, #0052CC 87.5%, #DC143C 87.5%, #DC143C 100%); 
}

/* Flag display styling - inherit from parent flag class */
.flag-seychelles .flag-display { 
    background: linear-gradient(45deg, #0052CC 0%, #0052CC 33%, #FFD700 33%, #FFD700 66%, #DC143C 66%, #DC143C 100%); 
}

.flag-bvi .flag-display { 
    background: linear-gradient(to right, #0052CC 0%, #0052CC 65%, #006600 65%, #006600 100%); 
}

.flag-gibraltar .flag-display { 
    background: linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(220, 20, 60) 50%, rgb(220, 20, 60) 100%); 
}

.flag-hong-kong .flag-display { 
    background: #DC143C; 
}

.flag-marshall-islands .flag-display { 
    background: linear-gradient(to right, #0052CC 0%, #0052CC 50%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%); 
}

.flag-nevis .flag-display { 
    background: linear-gradient(135deg, #006600 0%, #006600 40%, #FFD700 40%, #FFD700 60%, #DC143C 60%, #DC143C 100%); 
}

.flag-uk .flag-display,
.flag-uk-ltd .flag-display,
.flag-uk-llp .flag-display,
.flag-uk-bank .flag-display { 
    background: linear-gradient(135deg, #012169 0%, #012169 50%, #C8102E 50%, #C8102E 100%); 
}

.flag-belize .flag-display { 
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 12.5%, #0052CC 12.5%, #0052CC 87.5%, #DC143C 87.5%, #DC143C 100%); 
}

/* Additional jurisdiction gradients for header backgrounds */
.jurisdiction-header.flag-seychelles { 
    background: linear-gradient(to right, #3B82F6 0%, #FCD34D 50%, #10B981 100%); 
}

.jurisdiction-header.flag-bvi { 
    background: linear-gradient(to right, #3B82F6 0%, #2563EB 100%); 
}

.jurisdiction-header.flag-gibraltar { 
    background: linear-gradient(to right, #DC2626 0%, #F59E0B 100%); 
}

.jurisdiction-header.flag-hong-kong { 
    background: linear-gradient(to right, #DC2626 0%, #EF4444 100%); 
}

.jurisdiction-header.flag-marshall-islands { 
    background: linear-gradient(to right, #3B82F6 0%, #2563EB 100%); 
}

.jurisdiction-header.flag-nevis { 
    background: linear-gradient(to right, #10B981 0%, #FCD34D 100%); 
}

.jurisdiction-header.flag-belize { 
    background: linear-gradient(to right, #0052CC 0%, #DC143C 100%); 
}

.jurisdiction-header.flag-uk,
.jurisdiction-header.flag-uk-ltd,
.jurisdiction-header.flag-uk-llp,
.jurisdiction-header.flag-uk-bank { 
    background: linear-gradient(to right, #4F46E5 0%, #DC2626 100%); 
}

/* ===========================
   Additional Jurisdiction Flags & Gradients
   Pre-configured for future use
   =========================== */

/* Americas & Caribbean */
.flag-delaware,
.flag-wyoming,
.flag-nevada,
.flag-united-states,
.jurisdiction-delaware,
.jurisdiction-wyoming,
.jurisdiction-nevada {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #0052CC 66%, #0052CC 100%);
}

.flag-cayman,
.jurisdiction-cayman {
    background: linear-gradient(to bottom, #0052CC 0%, #0052CC 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-bahamas,
.jurisdiction-bahamas {
    background: linear-gradient(to bottom, #006600 0%, #006600 33%, #FFD700 33%, #FFD700 66%, #006600 66%, #006600 100%);
}

.flag-panama,
.jurisdiction-panama {
    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 25%, #DC143C 25%, #DC143C 50%, #FFFFFF 50%, #FFFFFF 75%, #0052CC 75%, #0052CC 100%);
}

.flag-anguilla,
.jurisdiction-anguilla {
    background: linear-gradient(to bottom, #0052CC 0%, #0052CC 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-bermuda,
.jurisdiction-bermuda {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 50%, #0052CC 50%, #0052CC 100%);
}

.flag-turks-caicos,
.jurisdiction-turks-caicos {
    background: linear-gradient(to bottom, #0052CC 0%, #0052CC 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-st-vincent,
.flag-saint-vincent,
.jurisdiction-st-vincent,
.jurisdiction-saint-vincent {
    background: linear-gradient(to bottom, #006600 0%, #006600 33%, #FFD700 33%, #FFD700 66%, #006600 66%, #006600 100%);
}

.flag-dominica,
.jurisdiction-dominica {
    background: linear-gradient(45deg, #006600 0%, #FFD700 50%, #DC143C 100%);
}

.flag-antigua,
.flag-antigua-barbuda,
.jurisdiction-antigua,
.jurisdiction-antigua-barbuda {
    background: linear-gradient(to bottom, #000000 0%, #FFD700 25%, #006600 25%, #006600 50%, #FFD700 50%, #FFD700 75%, #DC143C 75%, #DC143C 100%);
}

.flag-st-lucia,
.flag-saint-lucia,
.jurisdiction-st-lucia,
.jurisdiction-saint-lucia {
    background: linear-gradient(135deg, #0052CC 0%, #FFD700 50%, #000000 100%);
}

.flag-barbados,
.jurisdiction-barbados {
    background: linear-gradient(to right, #006600 0%, #006600 33%, #FFD700 33%, #FFD700 66%, #006600 66%, #006600 100%);
}

.flag-costa-rica,
.jurisdiction-costa-rica {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 20%, #FFFFFF 20%, #FFFFFF 40%, #0052CC 40%, #0052CC 100%);
}

.flag-uruguay,
.jurisdiction-uruguay {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 33%, #0052CC 33%, #0052CC 66%, #FFFFFF 66%, #FFFFFF 100%);
}

.flag-puerto-rico,
.jurisdiction-puerto-rico {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #DC143C 66%, #DC143C 100%);
}

.flag-curacao,
.jurisdiction-curacao {
    background: linear-gradient(to bottom, #0052CC 0%, #0052CC 50%, #FFD700 50%, #FFD700 100%);
}

/* Europe & Middle East */
.flag-uae,
.flag-dubai,
.flag-adgm,
.flag-rakez,
.jurisdiction-uae,
.jurisdiction-dubai,
.jurisdiction-adgm,
.jurisdiction-rakez {
    background: linear-gradient(to bottom, #000000 0%, #000000 33%, #FFFFFF 33%, #FFFFFF 66%, #006600 66%, #006600 100%);
}

.flag-switzerland,
.jurisdiction-switzerland {
    background: #DC143C;
}

.flag-singapore,
.jurisdiction-singapore {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-luxembourg,
.jurisdiction-luxembourg {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #006600 66%, #006600 100%);
}

.flag-ireland,
.jurisdiction-ireland {
    background: linear-gradient(to right, #006600 0%, #006600 33%, #FFFFFF 33%, #FFFFFF 66%, #FF8C00 66%, #FF8C00 100%);
}

.flag-netherlands,
.jurisdiction-netherlands {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #0052CC 66%, #0052CC 100%);
}

.flag-cyprus,
.jurisdiction-cyprus {
    background: linear-gradient(to bottom, #006600 0%, #006600 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-estonia,
.jurisdiction-estonia {
    background: linear-gradient(to bottom, #006600 0%, #006600 33%, #000000 33%, #000000 66%, #FFFFFF 66%, #FFFFFF 100%);
}

.flag-isle-of-man,
.jurisdiction-isle-of-man {
    background: #DC143C;
}

.flag-jersey,
.jurisdiction-jersey {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #DC143C 50%, #DC143C 100%);
}

.flag-guernsey,
.jurisdiction-guernsey {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #DC143C 50%, #DC143C 100%);
}

.flag-liechtenstein,
.jurisdiction-liechtenstein {
    background: linear-gradient(to bottom, #006600 0%, #006600 50%, #DC143C 50%, #DC143C 100%);
}

.flag-monaco,
.jurisdiction-monaco {
    background: linear-gradient(to right, #DC143C 0%, #DC143C 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-andorra,
.jurisdiction-andorra {
    background: linear-gradient(to right, #0052CC 0%, #0052CC 33%, #FFD700 33%, #FFD700 66%, #DC143C 66%, #DC143C 100%);
}

.flag-bulgaria,
.jurisdiction-bulgaria {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 33%, #006600 33%, #006600 66%, #DC143C 66%, #DC143C 100%);
}

.flag-hungary,
.jurisdiction-hungary {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #006600 66%, #006600 100%);
}

.flag-georgia,
.jurisdiction-georgia {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #DC143C 50%, #DC143C 100%);
}

.flag-madeira,
.jurisdiction-madeira {
    background: linear-gradient(to right, #006600 0%, #006600 50%, #DC143C 50%, #DC143C 100%);
}

/* Asia & Pacific */
.flag-mauritius,
.jurisdiction-mauritius {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 25%, #0052CC 25%, #0052CC 50%, #FFD700 50%, #FFD700 75%, #006600 75%, #006600 100%);
}

.flag-labuan,
.jurisdiction-labuan {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-cook-islands,
.jurisdiction-cook-islands {
    background: linear-gradient(to bottom, #0052CC 0%, #0052CC 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-vanuatu,
.jurisdiction-vanuatu {
    background: linear-gradient(45deg, #DC143C 0%, #FFD700 50%, #006600 100%);
}

.flag-samoa,
.jurisdiction-samoa {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 50%, #0052CC 50%, #0052CC 100%);
}

.flag-thailand,
.jurisdiction-thailand {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #DC143C 66%, #DC143C 100%);
}

.flag-new-zealand,
.jurisdiction-new-zealand {
    background: linear-gradient(to bottom, #0052CC 0%, #0052CC 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-taiwan,
.jurisdiction-taiwan {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 50%, #FFFFFF 50%, #FFFFFF 100%);
}

/* Flag display styles for all additional jurisdictions */
.flag-delaware .flag-display,
.flag-wyoming .flag-display,
.flag-nevada .flag-display,
.flag-united-states .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #0052CC 66%, #0052CC 100%);
}

.flag-cayman .flag-display {
    background: linear-gradient(to bottom, #0052CC 0%, #0052CC 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-bahamas .flag-display {
    background: linear-gradient(to bottom, #006600 0%, #006600 33%, #FFD700 33%, #FFD700 66%, #006600 66%, #006600 100%);
}

.flag-panama .flag-display {
    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 25%, #DC143C 25%, #DC143C 50%, #FFFFFF 50%, #FFFFFF 75%, #0052CC 75%, #0052CC 100%);
}

.flag-anguilla .flag-display,
.flag-bermuda .flag-display,
.flag-turks-caicos .flag-display {
    background: linear-gradient(to bottom, #0052CC 0%, #0052CC 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-st-vincent .flag-display,
.flag-saint-vincent .flag-display {
    background: linear-gradient(to bottom, #006600 0%, #006600 33%, #FFD700 33%, #FFD700 66%, #006600 66%, #006600 100%);
}

.flag-dominica .flag-display {
    background: linear-gradient(45deg, #006600 0%, #FFD700 50%, #DC143C 100%);
}

.flag-antigua .flag-display,
.flag-antigua-barbuda .flag-display {
    background: linear-gradient(to bottom, #000000 0%, #FFD700 25%, #006600 25%, #006600 50%, #FFD700 50%, #FFD700 75%, #DC143C 75%, #DC143C 100%);
}

.flag-st-lucia .flag-display,
.flag-saint-lucia .flag-display {
    background: linear-gradient(135deg, #0052CC 0%, #FFD700 50%, #000000 100%);
}

.flag-barbados .flag-display {
    background: linear-gradient(to right, #006600 0%, #006600 33%, #FFD700 33%, #FFD700 66%, #006600 66%, #006600 100%);
}

.flag-costa-rica .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 20%, #FFFFFF 20%, #FFFFFF 40%, #0052CC 40%, #0052CC 100%);
}

.flag-uruguay .flag-display {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 33%, #0052CC 33%, #0052CC 66%, #FFFFFF 66%, #FFFFFF 100%);
}

.flag-puerto-rico .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #DC143C 66%, #DC143C 100%);
}

.flag-curacao .flag-display {
    background: linear-gradient(to bottom, #0052CC 0%, #0052CC 50%, #FFD700 50%, #FFD700 100%);
}

.flag-uae .flag-display,
.flag-dubai .flag-display,
.flag-adgm .flag-display,
.flag-rakez .flag-display {
    background: linear-gradient(to bottom, #000000 0%, #000000 33%, #FFFFFF 33%, #FFFFFF 66%, #006600 66%, #006600 100%);
}

.flag-switzerland .flag-display {
    background: #DC143C;
}

.flag-singapore .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-luxembourg .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #006600 66%, #006600 100%);
}

.flag-ireland .flag-display {
    background: linear-gradient(to right, #006600 0%, #006600 33%, #FFFFFF 33%, #FFFFFF 66%, #FF8C00 66%, #FF8C00 100%);
}

.flag-netherlands .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #0052CC 66%, #0052CC 100%);
}

.flag-cyprus .flag-display {
    background: linear-gradient(to bottom, #006600 0%, #006600 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-estonia .flag-display {
    background: linear-gradient(to bottom, #006600 0%, #006600 33%, #000000 33%, #000000 66%, #FFFFFF 66%, #FFFFFF 100%);
}

.flag-isle-of-man .flag-display {
    background: #DC143C;
}

.flag-jersey .flag-display,
.flag-guernsey .flag-display {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #DC143C 50%, #DC143C 100%);
}

.flag-liechtenstein .flag-display {
    background: linear-gradient(to bottom, #006600 0%, #006600 50%, #DC143C 50%, #DC143C 100%);
}

.flag-monaco .flag-display {
    background: linear-gradient(to right, #DC143C 0%, #DC143C 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-andorra .flag-display {
    background: linear-gradient(to right, #0052CC 0%, #0052CC 33%, #FFD700 33%, #FFD700 66%, #DC143C 66%, #DC143C 100%);
}

.flag-bulgaria .flag-display {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 33%, #006600 33%, #006600 66%, #DC143C 66%, #DC143C 100%);
}

.flag-hungary .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #006600 66%, #006600 100%);
}

.flag-georgia .flag-display {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #DC143C 50%, #DC143C 100%);
}

.flag-madeira .flag-display {
    background: linear-gradient(to right, #006600 0%, #006600 50%, #DC143C 50%, #DC143C 100%);
}

.flag-mauritius .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 25%, #0052CC 25%, #0052CC 50%, #FFD700 50%, #FFD700 75%, #006600 75%, #006600 100%);
}

.flag-labuan .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-cook-islands .flag-display {
    background: linear-gradient(to bottom, #0052CC 0%, #0052CC 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-vanuatu .flag-display {
    background: linear-gradient(45deg, #DC143C 0%, #FFD700 50%, #006600 100%);
}

.flag-samoa .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 50%, #0052CC 50%, #0052CC 100%);
}

.flag-thailand .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 33%, #FFFFFF 33%, #FFFFFF 66%, #DC143C 66%, #DC143C 100%);
}

.flag-new-zealand .flag-display {
    background: linear-gradient(to bottom, #0052CC 0%, #0052CC 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.flag-taiwan .flag-display {
    background: linear-gradient(to bottom, #DC143C 0%, #DC143C 50%, #FFFFFF 50%, #FFFFFF 100%);
}

/* Jurisdiction header gradients for all additional jurisdictions */
.jurisdiction-header.flag-delaware,
.jurisdiction-header.flag-wyoming,
.jurisdiction-header.flag-nevada,
.jurisdiction-header.flag-united-states {
    background: linear-gradient(to right, #DC143C 0%, #0052CC 100%);
}

.jurisdiction-header.flag-cayman {
    background: linear-gradient(to right, #0052CC 0%, #2563EB 100%);
}

.jurisdiction-header.flag-bahamas {
    background: linear-gradient(to right, #006600 0%, #FFD700 100%);
}

.jurisdiction-header.flag-panama {
    background: linear-gradient(to right, #DC143C 0%, #0052CC 100%);
}

.jurisdiction-header.flag-anguilla,
.jurisdiction-header.flag-bermuda,
.jurisdiction-header.flag-turks-caicos {
    background: linear-gradient(to right, #0052CC 0%, #2563EB 100%);
}

.jurisdiction-header.flag-st-vincent,
.jurisdiction-header.flag-saint-vincent {
    background: linear-gradient(to right, #006600 0%, #FFD700 100%);
}

.jurisdiction-header.flag-dominica {
    background: linear-gradient(to right, #006600 0%, #FFD700 50%, #DC143C 100%);
}

.jurisdiction-header.flag-antigua,
.jurisdiction-header.flag-antigua-barbuda {
    background: linear-gradient(to right, #006600 0%, #FFD700 100%);
}

.jurisdiction-header.flag-st-lucia,
.jurisdiction-header.flag-saint-lucia {
    background: linear-gradient(to right, #0052CC 0%, #FFD700 100%);
}

.jurisdiction-header.flag-barbados {
    background: linear-gradient(to right, #006600 0%, #FFD700 100%);
}

.jurisdiction-header.flag-costa-rica {
    background: linear-gradient(to right, #DC143C 0%, #0052CC 100%);
}

.jurisdiction-header.flag-uruguay {
    background: linear-gradient(to right, #0052CC 0%, #FFFFFF 100%);
}

.jurisdiction-header.flag-puerto-rico {
    background: linear-gradient(to right, #DC143C 0%, #FFFFFF 100%);
}

.jurisdiction-header.flag-curacao {
    background: linear-gradient(to right, #0052CC 0%, #FFD700 100%);
}

.jurisdiction-header.flag-uae,
.jurisdiction-header.flag-dubai,
.jurisdiction-header.flag-adgm,
.jurisdiction-header.flag-rakez {
    background: linear-gradient(to right, #000000 0%, #006600 100%);
}

.jurisdiction-header.flag-switzerland {
    background: linear-gradient(to right, #DC143C 0%, #EF4444 100%);
}

.jurisdiction-header.flag-singapore {
    background: linear-gradient(to right, #DC143C 0%, #FFFFFF 100%);
}

.jurisdiction-header.flag-luxembourg {
    background: linear-gradient(to right, #DC143C 0%, #006600 100%);
}

.jurisdiction-header.flag-ireland {
    background: linear-gradient(to right, #006600 0%, #FF8C00 100%);
}

.jurisdiction-header.flag-netherlands {
    background: linear-gradient(to right, #DC143C 0%, #0052CC 100%);
}

.jurisdiction-header.flag-cyprus {
    background: linear-gradient(to right, #006600 0%, #FFFFFF 100%);
}

.jurisdiction-header.flag-estonia {
    background: linear-gradient(to right, #006600 0%, #000000 50%, #FFFFFF 100%);
}

.jurisdiction-header.flag-isle-of-man {
    background: linear-gradient(to right, #DC143C 0%, #EF4444 100%);
}

.jurisdiction-header.flag-jersey,
.jurisdiction-header.flag-guernsey {
    background: linear-gradient(to right, #FFFFFF 0%, #DC143C 100%);
}

.jurisdiction-header.flag-liechtenstein {
    background: linear-gradient(to right, #006600 0%, #DC143C 100%);
}

.jurisdiction-header.flag-monaco {
    background: linear-gradient(to right, #DC143C 0%, #FFFFFF 100%);
}

.jurisdiction-header.flag-andorra {
    background: linear-gradient(to right, #0052CC 0%, #FFD700 50%, #DC143C 100%);
}

.jurisdiction-header.flag-bulgaria {
    background: linear-gradient(to right, #FFFFFF 0%, #006600 50%, #DC143C 100%);
}

.jurisdiction-header.flag-hungary {
    background: linear-gradient(to right, #DC143C 0%, #FFFFFF 50%, #006600 100%);
}

.jurisdiction-header.flag-georgia {
    background: linear-gradient(to right, #FFFFFF 0%, #DC143C 100%);
}

.jurisdiction-header.flag-madeira {
    background: linear-gradient(to right, #006600 0%, #DC143C 100%);
}

.jurisdiction-header.flag-mauritius {
    background: linear-gradient(to right, #DC143C 0%, #0052CC 50%, #FFD700 75%, #006600 100%);
}

.jurisdiction-header.flag-labuan {
    background: linear-gradient(to right, #DC143C 0%, #FFFFFF 100%);
}

.jurisdiction-header.flag-cook-islands {
    background: linear-gradient(to right, #0052CC 0%, #FFFFFF 100%);
}

.jurisdiction-header.flag-vanuatu {
    background: linear-gradient(to right, #DC143C 0%, #FFD700 50%, #006600 100%);
}

.jurisdiction-header.flag-samoa {
    background: linear-gradient(to right, #DC143C 0%, #0052CC 100%);
}

.jurisdiction-header.flag-thailand {
    background: linear-gradient(to right, #DC143C 0%, #FFFFFF 50%, #DC143C 100%);
}

.jurisdiction-header.flag-new-zealand {
    background: linear-gradient(to right, #0052CC 0%, #FFFFFF 100%);
}

.jurisdiction-header.flag-taiwan {
    background: linear-gradient(to right, #DC143C 0%, #FFFFFF 100%);
}

/* ===========================
   Service/Product Cards (Non-Jurisdiction)
   Cards for services, add-ons, and other products without flags
   =========================== */
.service-grid,
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 50px;
}

@media (min-width: 768px) {
    .service-grid,
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .service-grid,
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.service-card,
.product-card,
.generic-product-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: box-shadow 0.3s ease;
    border: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
}

.service-card:hover,
.product-card:hover,
.generic-product-card:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

/* Service card header - generic gradient with icon placeholder */
.service-card .service-header,
.product-card .product-header,
.generic-product-card .product-header {
    height: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
    padding: 20px;
    background: linear-gradient(135deg, #3FA4F4 0%, #3e2aed 100%);
}

/* Generic icon placeholder where flag would be */
.service-card .service-icon,
.product-card .product-icon,
.generic-product-card .product-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 24px;
}

.service-card .service-name,
.product-card .product-name,
.generic-product-card .product-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
}

/* Service card body - matches jurisdiction card structure */
.service-card .service-body,
.product-card .product-body,
.generic-product-card .product-body {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-card .service-title-row,
.product-card .product-title-row,
.generic-product-card .product-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.service-card h4,
.product-card h4,
.generic-product-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark-text);
    margin: 0;
    flex: 1;
}

.service-card .service-description,
.product-card .product-description,
.generic-product-card .product-description {
    color: var(--secondary-text);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex: 1;
}

.service-card .service-price-row,
.product-card .product-price-row,
.generic-product-card .product-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.service-card .service-price,
.product-card .product-price,
.generic-product-card .product-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark-text);
}

.service-card .price-label,
.product-card .price-label,
.generic-product-card .price-label {
    font-size: 14px;
    color: var(--secondary-text);
}

.service-card .card-actions,
.product-card .card-actions,
.generic-product-card .card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.service-card .card-actions .btn,
.product-card .card-actions .btn,
.generic-product-card .card-actions .btn {
    flex: 1;
    text-align: center;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Alternative header gradients for different service types */
.service-card.banking .service-header,
.product-card.banking .product-header {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.service-card.consultation .service-header,
.product-card.consultation .product-header {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}

.service-card.document .service-header,
.product-card.document .product-header {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.service-card.website .service-header,
.product-card.website .product-header {
    background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
}

.service-card.seo .service-header,
.product-card.seo .product-header {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
}

.service-card.accounting .service-header,
.product-card.accounting .product-header {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
}

.jurisdiction-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.jurisdiction-body {
    padding: 24px;
}

.jurisdiction-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    position: relative;
}

.jurisdiction-body h4 {
    font-size: 20px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
    line-height: 1.4;
}

.popular-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid transparent;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    background: #10B981;
    color: #FFFFFF;
    white-space: nowrap;
}

.jurisdiction-description {
    color: #4B5563;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.jurisdiction-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.jurisdiction-price {
    font-size: 24px;
    font-weight: 700;
    color: #3FA4F4;
}

.price-label {
    font-size: 14px;
    color: #6B7280;
}

.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.feature-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid #E5E7EB;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    background: #F3F4F6;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.feature-tag:hover {
    background: #E5E7EB;
}

.card-actions {
    display: flex;
    gap: 8px;
}

.btn-secondary {
    flex: 1;
    background: transparent;
    border: 1px solid #E5E7EB;
    color: #1F2937;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.btn-primary,
.add-to-cart-btn {
    flex: 1;
    background: #3FA4F4 !important;
    border: none !important;
    color: #FFFFFF !important;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover,
.add-to-cart-btn:hover {
    background: #2563EB !important;
    color: #FFFFFF !important;
}

/* Ensure jurisdiction section buttons are blue */
.jurisdiction-card .btn-primary,
.jurisdiction-card .add-to-cart-btn {
    background: #3FA4F4 !important;
    border: none !important;
    color: #FFFFFF !important;
}

.jurisdiction-card .btn-primary:hover,
.jurisdiction-card .add-to-cart-btn:hover {
    background: #2563EB !important;
    color: #FFFFFF !important;
}

/* ===========================
   Compliance Section
   =========================== */
.compliance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

.compliance-card {
    background: var(--white);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1px solid var(--border-color);
}

.compliance-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--dark-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.compliance-item {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.compliance-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.compliance-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compliance-icon.check-green {
    color: var(--green-accent);
    font-weight: bold;
    font-size: 20px;
}

.compliance-content {
    flex: 1;
}

.compliance-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dark-text);
}

.compliance-item p {
    color: var(--secondary-text);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.compliance-item .pdf-link {
    color: #3FA4F4;
    text-decoration: underline;
    transition: color 0.2s;
}

.compliance-item .pdf-link:hover {
    color: #2563EB;
}

.document-certification-section {
    margin-top: 40px;
    padding: 30px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1px solid var(--border-color);
    grid-column: 1 / -1;
}

.document-certification-section h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--dark-text);
}

.document-certification-section p {
    color: var(--dark-text);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.document-certification-section p:last-child {
    margin-bottom: 0;
}

.document-certification-section a {
    color: #3FA4F4;
    text-decoration: underline;
}

.document-certification-section a:hover {
    color: #2563EB;
}

.check-icon {
    color: var(--green-accent);
    font-weight: bold;
}

/* ===========================
   Services Cards
   =========================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.service-card {
    background: var(--white);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform 0.3s;
}

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

.service-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    color: var(--primary-blue);
}

.service-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--dark-text);
}

.service-card p {
    color: var(--secondary-text);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.service-link {
    color: var(--button-blue);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.service-link:hover {
    gap: 10px;
}

/* ===========================
   Testimonials
   =========================== */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.testimonial-card {
    background: var(--white);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1px solid var(--border-color);
}

.stars {
    color: #FCD34D;
    font-size: 18px;
    margin-bottom: 15px;
}

.testimonial-text {
    color: var(--dark-text);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 16px;
}

.author-info h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--dark-text);
}

.author-info p {
    font-size: 14px;
    color: var(--secondary-text);
}

/* ===========================
   About Section
   =========================== */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--secondary-text);
    margin-bottom: 20px;
}

.about-features {
    list-style: none;
    margin-top: 30px;
}

.about-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    color: var(--dark-text);
    font-size: 15px;
}

.about-features li::before {
    content: "✓";
    color: var(--green-accent);
    font-weight: bold;
    font-size: 18px;
}

.why-choose-card {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.why-choose-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--dark-text);
}

.why-item {
    margin-bottom: 25px;
}

.why-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dark-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.why-item p {
    color: var(--secondary-text);
    font-size: 14px;
    line-height: 1.6;
}

/* ===========================
   Contact Section
   =========================== */
.contact-section {
    /* Background gradient is set via inline CSS from customizer (same as hero section) */
    padding: 80px 20px;
    color: var(--white);
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.contact-info h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
}

.contact-info p {
    font-size: 18px;
    margin-bottom: 40px;
    opacity: 0.95;
}

.contact-methods {
    margin-bottom: 30px;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-method-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-method h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
}

.contact-method p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
}

.contact-form {
    background: var(--white);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    max-width: 100%;
}

/* Contact Form 7 Styles */
.contact-form .wpcf7-form,
.contact-form .wpcf7 {
    color: var(--dark-text);
}

.contact-form .wpcf7-form label,
.contact-form .wpcf7-form .wpcf7-form-control-wrap label {
    color: var(--dark-text) !important;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.contact-form .wpcf7-form input[type="text"],
.contact-form .wpcf7-form input[type="email"],
.contact-form .wpcf7-form input[type="tel"],
.contact-form .wpcf7-form input[type="url"],
.contact-form .wpcf7-form input[type="number"],
.contact-form .wpcf7-form input[type="date"],
.contact-form .wpcf7-form select,
.contact-form .wpcf7-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    color: var(--dark-text) !important;
    background: var(--white) !important;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.contact-form .wpcf7-form input:focus,
.contact-form .wpcf7-form select:focus,
.contact-form .wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--button-blue) !important;
}

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

.contact-form .wpcf7-form .wpcf7-submit {
    width: 100%;
    background: #3FA4F4 !important;
    color: var(--white) !important;
    padding: 15px 32px;
    border: none !important;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
}

.contact-form .wpcf7-form .wpcf7-submit:hover {
    background: #2E8BC9 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(63, 164, 244, 0.3);
}

.contact-form .wpcf7-response-output {
    color: var(--dark-text) !important;
    border-color: var(--border-color) !important;
}

.contact-form .wpcf7-not-valid-tip {
    color: #DC2626 !important;
}

.contact-form h3 {
    color: var(--dark-text);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
}

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

.form-group label {
    display: block;
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--button-blue);
}

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

.btn-submit {
    width: 100%;
    background: var(--button-blue);
    color: var(--white);
    padding: 15px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-submit:hover {
    background: #2E8BC9;
    transform: translateY(-2px);
}

/* ===========================
   Content Area (Posts & Pages)
   =========================== */
.site-content {
    padding: 60px 20px;
}

.content-area {
    max-width: 800px;
    margin: 0 auto;
}

/* Homepage Content Section */
.homepage-content-section {
    padding: 60px 20px;
    background: var(--white);
}

.homepage-content {
    max-width: 1200px;
    margin: 0 auto;
}

.homepage-content h1,
.homepage-content h2,
.homepage-content h3,
.homepage-content h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--dark-text);
}

.homepage-content h1:first-child,
.homepage-content h2:first-child {
    margin-top: 0;
}

.homepage-content p {
    margin-bottom: 20px;
    line-height: 1.8;
    color: var(--dark-text);
}

.homepage-content ul,
.homepage-content ol {
    margin-left: 30px;
    margin-bottom: 20px;
}

.homepage-content li {
    margin-bottom: 10px;
    color: var(--dark-text);
}

.homepage-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

.entry-header {
    margin-bottom: 40px;
}

.entry-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 20px;
}

.entry-meta {
    color: var(--secondary-text);
    font-size: 14px;
    margin-bottom: 30px;
}

.entry-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--dark-text);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--dark-text);
}

.entry-content p {
    margin-bottom: 20px;
}

.entry-content ul,
.entry-content ol,
.page-content ul,
.page-content ol,
.content-wrap ul,
.content-wrap ol,
.f_bullet ul {
    margin-left: 30px !important;
    margin-bottom: 20px !important;
    padding-left: 20px !important;
    list-style: disc !important;
    list-style-position: outside !important;
}

.entry-content li,
.page-content li,
.content-wrap li,
.f_bullet li {
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
    padding-left: 5px !important;
}

/* Ensure lists in page content are properly styled */
.page-content .f_bullet ul,
.content-wrap .f_bullet ul {
    margin-left: 0 !important;
    padding-left: 30px !important;
    list-style: disc !important;
}

.page-content .f_bullet li,
.content-wrap .f_bullet li {
    margin-bottom: 10px !important;
    line-height: 1.7 !important;
}

/* Style for forming_mn, forming_mid, forming_cenr containers */
.forming_mn,
.forming_mid,
.forming_cenr {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.forming_cenr h4 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--dark-text);
}

.forming_cenr .clear {
    margin-top: 30px;
    padding-top: 20px;
}

.forming_cenr .clear p {
    margin-bottom: 10px;
    line-height: 1.8;
}

/* ===========================
   Archive & Blog Styles
   =========================== */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.post-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--border-color);
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.post-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-card-content {
    padding: 25px;
}

.post-card-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--dark-text);
}

.post-card-title a {
    color: var(--dark-text);
}

.post-card-title a:hover {
    color: var(--button-blue);
}

.post-card-excerpt {
    color: var(--secondary-text);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.post-card-meta {
    color: var(--secondary-text);
    font-size: 13px;
}

/* ===========================
   Footer
   =========================== */
.site-footer {
    background: var(--footer-dark);
    color: #cbd5e0;
    padding: 60px 20px 30px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column h3 {
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-column p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

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

.footer-column ul li a {
    color: #cbd5e0;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: var(--white);
}

.social-links,
.header-social-links,
.footer-social-links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.header-social-links {
    gap: 10px;
}

.footer-social-links {
    justify-content: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.social-link {
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, transform 0.3s;
    text-decoration: none;
    font-size: 16px;
}

.social-link:hover {
    background: var(--button-blue);
    transform: translateY(-2px);
}

.header-social-links .social-link {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 25px;
    text-align: center;
}

.footer-bottom p {
    font-size: 14px;
    color: #a0aec0;
    margin-bottom: 10px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin: 0;
}

.footer-links a {
    color: #a0aec0;
    font-size: 13px;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-widget {
    margin-bottom: 20px;
}

.footer-widget .widget-title {
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* ===========================
   Error 404 Page
   =========================== */
.error-404 {
    text-align: center;
    padding: 100px 20px;
}

.error-404 h1 {
    font-size: 120px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 20px;
}

.error-404 h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: var(--dark-text);
}

.error-404 p {
    font-size: 18px;
    color: var(--secondary-text);
    margin-bottom: 40px;
}

/* ===========================
   Smooth Scroll
   =========================== */
html {
    scroll-behavior: smooth;
}

/* ===========================
   WooCommerce Products Page
   =========================== */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Default to 3 columns */
    gap: 30px !important;
    list-style: none !important;
    margin: 40px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Hide any ::before pseudo-elements that might interfere with grid layout */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
    display: none !important;
    content: none !important;
}

.woocommerce ul.products li.product {
    background: var(--white) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    border: 1px solid var(--border-color) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 350px !important;
    height: auto !important;
    width: 275px !important; /* Fixed width as requested */
    max-width: 275px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative !important;
}

/* Ensure direct children of product item are ordered correctly */
.woocommerce ul.products li.product > .product-image {
    order: 0 !important; /* Image at top */
}

.woocommerce ul.products li.product > .product_wrap {
    order: 1 !important; /* Product wrap after image */
}

.woocommerce ul.products li.product > .price {
    order: 998 !important; /* Price at bottom */
}

.woocommerce ul.products li.product > .button-wrap,
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product > .add_to_cart_button {
    order: 999 !important; /* Button at very bottom */
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

.woocommerce ul.products li.product .product-image {
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    position: relative !important;
    background: linear-gradient(135deg, #3FA4F4 0%, #3e2aed 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce ul.products li.product .product-image figure {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce ul.products li.product .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product .product_wrap {
    padding: 25px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Start from top */
    min-height: 270px !important;
    text-align: center !important; /* Center everything by default */
}

.woocommerce ul.products li.product .cat-name {
    font-size: 12px !important;
    color: var(--secondary-text) !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    order: 1 !important; /* Category at top */
}

.woocommerce ul.products li.product .cat-name a {
    color: var(--secondary-text) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.woocommerce ul.products li.product .cat-name a:hover {
    color: #3FA4F4 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--dark-text) !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.3 !important;
    text-align: center !important; /* Title top center */
    order: 2 !important; /* Title after category */
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    color: var(--dark-text) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
    text-align: center !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
    color: #3FA4F4 !important;
}

/* Center any description/content that appears - allow it to expand */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product .product-description,
.woocommerce ul.products li.product .woocommerce-product-details__short-description,
.woocommerce ul.products li.product .product_wrap > *:not(.woocommerce-loop-product__title):not(.cat-name):not(.price):not(.button-wrap):not(.button):not(.add_to_cart_button):not(.theme-btn) {
    text-align: center !important;
    flex: 1 !important; /* Allow content to expand and push price/button down */
    order: 3 !important; /* Content in middle */
}

/* Push price and button to bottom together */
.woocommerce ul.products li.product .price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--dark-text) !important;
    margin: 20px 0 15px 0 !important; /* Space above, just above button */
    text-align: center !important; /* Price bottom center */
    order: 998 !important; /* Price just above button */
}

/* Create a spacer to push price and button to bottom */
.woocommerce ul.products li.product .product_wrap::after {
    content: '' !important;
    flex: 1 1 auto !important;
    order: 997 !important; /* Spacer before price/button */
    min-height: 0 !important;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount {
    color: var(--dark-text) !important;
}

/* Ensure buttons are at the bottom - target all possible button locations */
.woocommerce ul.products li.product .button-wrap,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.theme-btn,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .theme-btn {
    margin-top: 0 !important;
    text-align: center !important;
    order: 999 !important; /* Button at very bottom, right after price */
}

/* If button is inside product_wrap, ensure it's positioned correctly */
.woocommerce ul.products li.product .product_wrap .button-wrap,
.woocommerce ul.products li.product .product_wrap .button,
.woocommerce ul.products li.product .product_wrap .add_to_cart_button,
.woocommerce ul.products li.product .product_wrap .theme-btn,
.woocommerce ul.products li.product .product_wrap a.button,
.woocommerce ul.products li.product .product_wrap a.add_to_cart_button,
.woocommerce ul.products li.product .product_wrap a.theme-btn {
    order: 999 !important;
    margin-top: 0 !important;
}

.woocommerce ul.products li.product .button-wrap .button,
.woocommerce ul.products li.product .button-wrap .add_to_cart_button,
.woocommerce ul.products li.product .button-wrap .theme-btn {
    width: 100% !important;
    background: #3FA4F4 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    display: block !important;
}

.woocommerce ul.products li.product .button-wrap .button span,
.woocommerce ul.products li.product .button-wrap .add_to_cart_button span,
.woocommerce ul.products li.product .button-wrap .theme-btn span,
.woocommerce ul.products li.product a.button span,
.woocommerce ul.products li.product a.add_to_cart_button span,
.woocommerce ul.products li.product a.theme-btn span {
    color: #FFFFFF !important;
}

.woocommerce ul.products li.product .button-wrap .button:hover,
.woocommerce ul.products li.product .button-wrap .add_to_cart_button:hover,
.woocommerce ul.products li.product .button-wrap .theme-btn:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.theme-btn:hover {
    background: #2563EB !important;
    color: #FFFFFF !important;
}

.woocommerce ul.products li.product .button-wrap .button:hover span,
.woocommerce ul.products li.product .button-wrap .add_to_cart_button:hover span,
.woocommerce ul.products li.product .button-wrap .theme-btn:hover span,
.woocommerce ul.products li.product a.button:hover span,
.woocommerce ul.products li.product a.add_to_cart_button:hover span,
.woocommerce ul.products li.product a.theme-btn:hover span {
    color: #FFFFFF !important;
}

.woocommerce ul.products li.product .product-action-link {
    display: none !important;
}

/* Respect WooCommerce columns class from shortcode */
.woocommerce.columns-2 ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
}

.woocommerce.columns-3 ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
}

.woocommerce.columns-4 ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
}

.woocommerce.columns-5 ul.products {
    grid-template-columns: repeat(5, 1fr) !important;
}

.woocommerce.columns-6 ul.products {
    grid-template-columns: repeat(6, 1fr) !important;
}

/* Single product page - constrain to 1200px max-width and center like header */
.single-product .content-area,
.single-product .site-content,
.single-product .entry-content,
.single-product main.site-content,
.single-product .woocommerce,
.single-product #primary,
.single-product .site-main,
.single-product .product-container,
.single-product .product-main,
.single-product .summary,
.single-product .product-gallery,
.single-product .section-container,
.single-product .container,
.single-product .row,
.single-product .col-lg-8,
.single-product .col-lg-4,
.single-product .col-md-8,
.single-product .col-md-4 {
    max-width: 1200px !important;
}

/* Center single product page content - match header's centering */
.single-product .content-area,
.single-product .site-content,
.single-product .woocommerce,
.single-product #primary,
.single-product .section-container,
.single-product .container,
.single-product main.site-content {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Ensure breadcrumbs and all content containers are also centered */
.single-product .woocommerce-breadcrumb,
.single-product .entry-content {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Hide unwanted sections on single product pages */
/* Hide entire sidebar site-wide - sidebar is intentionally disabled */
#sidebar,
.sidebar,
aside#sidebar,
aside.sidebar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide upsells and cross-sells (already removed via PHP but hide as backup) */
.single-product .upsells,
.single-product .cross-sells {
    display: none !important;
}

/* Hide everything after Related Products section */
.single-product .related ~ * {
    display: none !important;
}

/* Ensure product tabs (description) are visible */
.single-product .woocommerce-tabs {
    display: block !important;
}

/* Ensure Related Products section is visible and is the last thing */
.single-product .related {
    display: block !important;
    margin-top: 60px !important;
    clear: both !important;
}

/* Ensure container doesn't constrain width for product listing pages */
.woocommerce-page:not(.single-product) .content-area,
.woocommerce-page:not(.single-product) .site-content,
.woocommerce-page:not(.single-product) .entry-content,
.woocommerce-page:not(.single-product) main.site-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 40px 20px !important; /* Match header left padding for alignment */
}

.woocommerce-page .section-container,
.woocommerce-page .container,
.woocommerce-page .content-area .container,
.woocommerce-page #primary,
.woocommerce-page .bcf-main-content {
    width: 100% !important;
    padding: 0 20px !important; /* Match header padding for alignment */
    margin: 0 auto !important;
}

.woocommerce-page .woocommerce {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 20px !important; /* Match header padding for alignment */
}

/* Ensure products align with logo - remove any extra left margin/padding */
.woocommerce-page .woocommerce ul.products {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Align WooCommerce page content with header - match header's left edge exactly */
/* Header: max-width 1200px, padding 0 20px, margin 0 auto */
/* This ensures products start at the same horizontal position as the logo */
.woocommerce-page .section-container,
.woocommerce-page .container,
.woocommerce-page #primary,
.woocommerce-page .bcf-main-content,
.woocommerce-page .woocommerce {
    /* Match header's left alignment - use same left padding as header */
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Match header's left edge exactly - header uses max-width 1200px with padding 0 20px */
@media (min-width: 1240px) {
    .woocommerce-page .section-container,
    .woocommerce-page .container,
    .woocommerce-page #primary,
    .woocommerce-page .bcf-main-content,
    .woocommerce-page .woocommerce {
        /* Header's left edge: (100vw - 1200px) / 2 */
        /* Set margin-left to match header's left edge, then add same padding */
        margin-right: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ===========================
   Responsive Design
   =========================== */

/* Scale everything 20% smaller for 1024px - 1920px screens */
@media (min-width: 1024px) and (max-width: 1920px) {
    /* Use zoom to scale everything by 80% (20% smaller) - widely supported */
    body {
        zoom: 0.8;
    }
    
    /* Fallback for browsers that don't support zoom */
    @supports not (zoom: 1) {
        body {
            transform: scale(0.8);
            transform-origin: top left;
            width: 125%; /* Compensate for 80% scale: 100% / 0.8 = 125% */
        }
        
        html {
            overflow-x: hidden;
        }
    }
}

@media (max-width: 992px) {
    .hero-section h1 {
        font-size: 36px;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    .about-content {
        grid-template-columns: 1fr;
    }

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

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

    .woocommerce ul.products {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 28px;
    }

    .section-title {
        font-size: 28px;
    }

    .jurisdiction-grid,
    .services-grid,
    .testimonials-grid,
    .posts-grid {
        grid-template-columns: 1fr;
    }

    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }

    .woocommerce ul.products li.product {
        height: auto !important;
        min-height: 400px !important;
    }

    .footer-columns {
        grid-template-columns: 1fr;
    }
    
    .footer-columns:has(.footer-column:nth-child(1):last-child) {
        grid-template-columns: 1fr;
    }
    
    .footer-columns:has(.footer-column:nth-child(2):last-child) {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-columns:has(.footer-column:nth-child(3):last-child) {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .entry-title {
        font-size: 32px;
    }
}