/* ============================================
   W3Space Custom Styles
   Mobile Responsive + Dark Mode + Performance
   ============================================ */

/* ===========================================
   1. MOBILE RESPONSIVE PRICING TABLE
   Convert the wide comparison table into 
   stacked cards on mobile devices.
   =========================================== */

/* Make pricing table scroll hint visible on mobile */
@media (max-width: 991.98px) {
    .crm-pricing-table {
        padding: 16px 16px 0;
    }

    .crm-pricing-table table th.crm-pricing-switch-wrapper {
        min-width: 200px;
    }

    .crm-pricing-table table th.crm-package-wrapper {
        min-width: 140px;
    }

    .crm-pricing-table table th.crm-package-wrapper2 {
        min-width: 120px;
    }

    .crm_pricing_feature_table .crm_pricing_features_name {
        min-width: 200px;
    }

    .crm_pricing_feature_table .crm_pricing_feature_check {
        min-width: 140px;
    }

    .crm_pricing_feature_table .crm_pricing_feature_check2 {
        min-width: 120px;
    }

    .crm_pricing_feature_accordion {
        padding: 0 16px 16px;
    }
}

@media (max-width: 767.98px) {
    .crm-pricing-table {
        padding: 12px 12px 0;
        border-radius: 8px 8px 0 0;
    }

    .crm-pricing-table table th.crm-pricing-switch-wrapper {
        min-width: 160px;
        font-size: 13px;
    }

    .crm-pricing-table table th.crm-package-wrapper,
    .crm-pricing-table table th.crm-package-wrapper2 {
        min-width: 120px;
    }

    .crm-pricing-table table .crm-package-price {
        font-size: 20px;
    }

    .crm-pricing-table table .title-sm {
        font-size: 13px;
    }

    .crm-pricing-table table .crm-package-btn {
        font-size: 12px;
        padding: 4px 10px;
    }

    .crm-pricing-switch-wrapper .arrow-shape {
        display: none !important;
    }

    .crm-pricing-switch-wrapper .crm-offer-badge {
        position: static;
        display: block;
        margin-top: 4px;
    }

    .crm_pricing_feature_accordion {
        padding: 0 12px 12px;
    }

    .crm_pricing_feature_table td {
        font-size: 12px;
        padding: 6px 8px;
    }

    .crm_pricing_feature_table .crm_pricing_features_name {
        min-width: 140px;
        font-size: 12px;
    }

    .crm_pricing_feature_table .crm_pricing_feature_check,
    .crm_pricing_feature_table .crm_pricing_feature_check2 {
        min-width: 100px;
    }

    /* Pricing section tabs */
    .hm7-pricing-table-tab .nav-tabs {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center !important;
    }

    .hm7-pricing-table-tab .nav-tabs li a {
        font-size: 13px;
        padding: 4px 12px;
    }

    .hm7-pricing-table-tab .nav-tabs li a img {
        width: 18px;
        height: auto;
        margin-left: 4px;
    }
}

@media (max-width: 575.98px) {
    .crm-pricing-table {
        padding: 8px 8px 0;
    }

    .crm-pricing-table table th {
        padding: 8px 6px;
        padding-bottom: 12px;
    }

    .crm-pricing-table table th.crm-pricing-switch-wrapper {
        min-width: 130px;
    }

    .crm-pricing-table table th.crm-package-wrapper,
    .crm-pricing-table table th.crm-package-wrapper2 {
        min-width: 100px;
    }

    .crm-pricing-table table .crm-package-price {
        font-size: 16px;
    }

    .crm-pricing-table table .title-sm {
        font-size: 12px;
    }

    .crm-pricing-table table .crm-package-btn {
        font-size: 11px;
        padding: 3px 8px;
    }

    .crm-pricing-switch-wrapper .title {
        font-size: 16px;
    }

    .crm-pricing-switch button {
        font-size: 12px;
    }

    .crm_pricing_feature_accordion {
        padding: 0 8px 8px;
    }

    .crm_pricing_feature_accordion .accordion-item .accordion-header a {
        font-size: 13px;
        padding: 8px 12px 8px 28px;
    }

    .crm_pricing_feature_table .crm_pricing_features_name {
        min-width: 110px;
        font-size: 11px;
    }

    .crm_pricing_feature_table .crm_pricing_feature_check,
    .crm_pricing_feature_table .crm_pricing_feature_check2 {
        min-width: 80px;
        font-size: 11px;
    }

    .crm_pricing_feature_table td {
        padding: 5px 4px;
    }

    /* Hero adjustments */
    .hm10-hero-section h1 {
        font-size: 1.5rem;
    }

    .hm10-hero-section .lead {
        font-size: 0.9rem;
    }
}


/* ===========================================
   2. DARK MODE FIXES
   Fix hardcoded bg-white containers and 
   ensure all sections adapt to dark theme.
   =========================================== */

/* Fix pricing table bg-white in dark mode */
[data-bs-theme="dark"] .crm-pricing-table.bg-white,
[data-bs-theme="dark"] .crm_pricing_feature_accordion.bg-white {
    background-color: var(--bs-body-bg, #1a1d21) !important;
    color: var(--bs-body-color, #dee2e6);
}

/* Fix pricing title colors in dark mode */
[data-bs-theme="dark"] .crm-pricing-table table .title-sm,
[data-bs-theme="dark"] .crm-pricing-table table .crm-package-price,
[data-bs-theme="dark"] .crm-pricing-switch-wrapper .title {
    color: #fff;
}

/* Fix accordion header background in dark mode */
[data-bs-theme="dark"] .crm_pricing_feature_accordion .accordion-item .accordion-header a {
    background-color: rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
}

/* Fix feature table borders in dark mode */
[data-bs-theme="dark"] .crm_pricing_feature_table td {
    border-color: rgba(192, 213, 255, 0.08);
    color: #ccc;
}

/* Fix hero section dark mode */
[data-bs-theme="dark"] .hm10-hero-section {
    background-color: #1a1d21;
}

/* Dark mode for cards and sections with hardcoded white bg */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-body-bg, #1a1d21) !important;
}

/* Fix text colors in dark mode for sections that have dark text hardcoded */
[data-bs-theme="dark"] .hm7-title h2,
[data-bs-theme="dark"] .hm7-title h5 {
    color: #fff;
}

/* Fix feedback section in dark mode */
[data-bs-theme="dark"] .feedback-section {
    background-color: #1e1e2c;
}

/* Fix why-choose section dark mode */
[data-bs-theme="dark"] .why-choose-card {
    background-color: #1e1e2c;
    border-color: rgba(192, 213, 255, 0.08);
}

/* Fix control panel section dark mode */
[data-bs-theme="dark"] .cp-feature-card {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Fix SSL table dark mode */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
}

/* Fix affiliate section dark mode */
[data-bs-theme="dark"] .affiliate-step {
    background-color: #1e1e2c;
    border-color: rgba(192, 213, 255, 0.08);
}

[data-bs-theme="dark"] .affiliate-commission-table th,
[data-bs-theme="dark"] .affiliate-commission-table td {
    border-color: rgba(192, 213, 255, 0.08);
}

/* Fix pricing switch button colors in dark mode */
[data-bs-theme="dark"] .crm-pricing-switch button {
    color: #ccc;
}

/* Dark mode tab links */
[data-bs-theme="dark"] .hm7-pricing-table-tab .nav-tabs li a.active {
    color: #fff;
}

/* Fix border colors globally in dark mode */
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-top {
    border-color: rgba(192, 213, 255, 0.08) !important;
}

/* Fix custom plan box readability in dark mode */
[data-bs-theme="dark"] .custom-plan-box {
    background-image: linear-gradient(101.48deg, #0d1840 -0.49%, #050930 97.87%);
}


/* ===========================================
   3. GENERAL LAYOUT IMPROVEMENTS
   =========================================== */

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

/* Better image rendering */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure table-responsive has proper scroll indicator */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Fix mobile navigation spacing */
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* Improve footer spacing on mobile */
@media (max-width: 767.98px) {
    .footer-widget {
        margin-bottom: 24px;
    }

    .footer-nav li {
        margin-bottom: 4px;
    }
}

/* Better focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #1c40f2;
    outline-offset: 2px;
}

/* Lazy load placeholder */
img[loading="lazy"] {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ===========================================
   4. STICKY FIRST COLUMN FOR PRICING TABLES
   =========================================== */
@media (max-width: 991.98px) {

    .crm-pricing-table table,
    .crm_pricing_feature_table table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .crm-pricing-table table th:first-child,
    .crm_pricing_feature_table table td:first-child {
        position: sticky;
        left: 0;
        z-index: 10;
        background-color: #fff;
        border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    [data-bs-theme="dark"] .crm-pricing-table table th:first-child,
    [data-bs-theme="dark"] .crm_pricing_feature_table table td:first-child {
        background-color: var(--bs-body-bg, #1a1d21);
        border-right: 1px solid rgba(192, 213, 255, 0.08) !important;
        z-index: 10;
    }

    /* Shadow effect to show it's sticky */
    .crm-pricing-table table th:first-child::after,
    .crm_pricing_feature_table table td:first-child::after {
        content: '';
        position: absolute;
        top: 0;
        right: -5px;
        bottom: 0;
        width: 5px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
        pointer-events: none;
        z-index: 3;
    }

    [data-bs-theme="dark"] .crm-pricing-table table th:first-child::after,
    [data-bs-theme="dark"] .crm_pricing_feature_table table td:first-child::after {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
    }
}

/* ===========================================
   5. COMPREHENSIVE DARK MODE TYPOGRAPHY
   Overrides hardcoded text colors in main.css
   =========================================== */
[data-bs-theme=\
dark\] body {
    color: #adb5bd;
}

[data-bs-theme=\dark\] h1,
[data-bs-theme=\dark\] h2,
[data-bs-theme=\dark\] h3,
[data-bs-theme=\dark\] h4,
[data-bs-theme=\dark\] h5,
[data-bs-theme=\dark\] h6,
[data-bs-theme=\dark\] .h1,
[data-bs-theme=\dark\] .h2,
[data-bs-theme=\dark\] .h3,
[data-bs-theme=\dark\] .h4,
[data-bs-theme=\dark\] .h5,
[data-bs-theme=\dark\] .h6 {
    color: #f8f9fa;
}

[data-bs-theme=\dark\] p,
[data-bs-theme=\dark\] ul li,
[data-bs-theme=\dark\] table td {
    color: #adb5bd;
}

[data-bs-theme=\dark\] .text-dark,
[data-bs-theme=\dark\] .text-black {
    color: #f8f9fa !important;
}

[data-bs-theme=\dark\] .text-muted {
    color: #8c98a4 !important;
}

/* Fix navbar links in dark mode */
[data-bs-theme=\dark\] .nav-wrapper ul li a {
    color: #e0e0e0;
}

/* Fix mobile menu links */
[data-bs-theme=\dark\] .mobile-menu ul li a {
    color: #e0e0e0;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme=\dark\] .mobile-menu ul li.has-submenu>a::after {
    color: #e0e0e0;
}

/* Fix offcanvas menu text */
[data-bs-theme=\dark\] .ofcanvus-menu {
    background: #1a1d21;
}

[data-bs-theme=\dark\] .ofcanvus-menu .mg-item-wrapper .mg-item-content-right h6,
[data-bs-theme=\dark\] .ofcanvus-menu .script-icon .script-icon-wrapper {
    color: #e0e0e0;
}

/* Fix topbar */
[data-bs-theme=\dark\] .topbar p {
    color: #f8f9fa;
}

/* Fix any cards that have hardcoded white bg */
[data-bs-theme=\dark\] .card,
[data-bs-theme=\dark\] .bg-white {
    background-color: #212529 !important;
    border-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme=\dark\] .border,
[data-bs-theme=\dark\] .border-bottom,
[data-bs-theme=\dark\] .border-top {
    border-color: rgba(255, 255, 255, 0.05) !important;
}




/* ===========================================
   5. COMPREHENSIVE DARK MODE TYPOGRAPHY
   Overrides hardcoded text colors in main.css
   =========================================== */
[data-bs-theme="dark"] body {
    color: #adb5bd !important;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1,
[data-bs-theme="dark"] .h2,
[data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4,
[data-bs-theme="dark"] .h5,
[data-bs-theme="dark"] .h6 {
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] p,
[data-bs-theme="dark"] ul li,
[data-bs-theme="dark"] table td {
    color: #adb5bd;
}

[data-bs-theme="dark"] a:not(.btn) {
    color: #6ea8fe;
}

[data-bs-theme="dark"] a:not(.btn):hover {
    color: #8bb9fe;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black {
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .text-muted {
    color: #8c98a4 !important;
}

/* Fix navbar links in dark mode */
[data-bs-theme="dark"] .nav-wrapper ul li a {
    color: #e0e0e0;
}

/* Fix mobile menu links */
[data-bs-theme="dark"] .mobile-menu ul li a {
    color: #e0e0e0;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .mobile-menu ul li.has-submenu>a::after {
    color: #e0e0e0;
}

/* Fix offcanvas menu text */
[data-bs-theme="dark"] .ofcanvus-menu {
    background: #1a1d21;
}

[data-bs-theme="dark"] .ofcanvus-menu .mg-item-wrapper .mg-item-content-right h6,
[data-bs-theme="dark"] .ofcanvus-menu .script-icon .script-icon-wrapper {
    color: #e0e0e0;
}

/* Fix topbar */
[data-bs-theme="dark"] .topbar p {
    color: #f8f9fa;
}

/* Fix any cards that have hardcoded white bg */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .bg-white {
    background-color: #212529 !important;
    border-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-top {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Fix FAQ accordion and generic accordion */
[data-bs-theme="dark"] .accordion-item {
    background-color: #1a1d21;
    border-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .accordion-button {
    background-color: #1a1d21;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Subtitles / Lead text */
[data-bs-theme="dark"] .lead,
[data-bs-theme="dark"] .subtitle {
    color: #adb5bd !important;
}

/* Testimonial texts */
[data-bs-theme="dark"] .feedback-widget p {
    color: #adb5bd;
}

[data-bs-theme="dark"] .feedback-widget h5 {
    color: #f8f9fa;
}