/* Design Overhaul - bestcompaniesforsilverirainvestments.us.com */

/* ===== GLOBAL / CONTAINER ===== */
body.vs-body {
    background: #f7f9fc !important;
    color: #333 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.vs-container, .vs-main .vs-container {
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* ===== HEADER / NAV ===== */
.vs-header {
    background: #1a365d !important;
    padding: 0 !important;
    position: sticky;
    top: 0;
    z-index: 9990;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.vs-header-container {
    max-width: 1500px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 20px !important;
}

.vs-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.vs-logo-text {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.vs-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.vs-nav-link {
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
}

.vs-nav-link:hover, .vs-nav-link--active {
    color: #fff !important;
    background: rgba(255,255,255,0.12) !important;
}

/* Burger menu toggle */
.vs-menu-toggle {
    display: none !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    z-index: 10001 !important;
}

.vs-menu-line {
    width: 24px !important;
    height: 2px !important;
    background: #fff !important;
    transition: all 0.3s !important;
    display: block !important;
}

.vs-menu-toggle.active .vs-menu-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
}

.vs-menu-toggle.active .vs-menu-line:nth-child(2) {
    opacity: 0 !important;
}

.vs-menu-toggle.active .vs-menu-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
}

/* Mobile nav */
.vs-mobile-nav {
    display: none;
    flex-direction: column;
    background: #1a365d;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.vs-mobile-nav.active {
    display: flex !important;
    max-height: 400px !important;
    padding: 10px 0 !important;
}

.vs-mobile-link {
    color: rgba(255,255,255,0.9) !important;
    text-decoration: none !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    transition: background 0.2s !important;
}

.vs-mobile-link:hover {
    background: rgba(255,255,255,0.1) !important;
}

@media (max-width: 768px) {
    .vs-nav { display: none !important; }
    .vs-menu-toggle { display: flex !important; }
    .vs-logo-text { font-size: 13px !important; white-space: normal !important; }
}

/* ===== HERO SECTION ===== */
.vs-hero {
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 40%, #1a365d 100%) !important;
    padding: 40px 20px 30px !important;
    text-align: center !important;
    border-radius: 0 0 16px 16px !important;
    margin-bottom: 20px !important;
}

.vs-hero h1 {
    color: #fff !important;
    font-size: clamp(22px, 3vw, 34px) !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

.vs-hero .vs-lead {
    color: rgba(255,255,255,0.85) !important;
    font-size: clamp(14px, 1.5vw, 17px) !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

/* ===== COMPANIES TABLE - DESKTOP ===== */
.vs-companies-section {
    margin-top: 20px !important;
    padding-top: 0 !important;
    border-top: none !important;
}

.vs-companies-section h2 {
    text-align: center !important;
    color: #1a365d !important;
    font-size: 24px !important;
    margin-bottom: 20px !important;
}

.vs-companies-table-wrapper {
    max-width: 1500px !important;
    margin: 0 auto !important;
    overflow-x: auto !important;
}

.vs-companies-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    max-width: 1500px !important;
}

.vs-companies-table thead th {
    background: #1a365d !important;
    color: #fff !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.vs-companies-table thead th:first-child {
    border-radius: 8px 0 0 8px !important;
}

.vs-companies-table thead th:last-child {
    border-radius: 0 8px 8px 0 !important;
}

.vs-company-row {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.vs-company-row:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

.vs-company-row td {
    padding: 16px !important;
    vertical-align: middle !important;
    border: none !important;
    color: #333 !important;
    background: #fff !important;
}

.vs-company-row td:first-child {
    border-radius: 8px 0 0 8px !important;
}

.vs-company-row td:last-child {
    border-radius: 0 8px 8px 0 !important;
}

/* Company logo sizing - desktop */
.vs-company-logo {
    width: 190px !important;
    height: auto !important;
    max-height: 60px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.9) !important;
    padding: 4px !important;
}

.vs-company-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

.vs-company-name {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #1a365d !important;
}

.vs-company-badge {
    display: inline-block !important;
    background: linear-gradient(135deg, #b8860b, #daa520) !important;
    color: #fff !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.vs-rank-badge {
    width: 32px !important;
    height: 32px !important;
    background: linear-gradient(135deg, #b8860b, #daa520) !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

/* Stars */
.vs-stars {
    color: #b8860b !important;
    font-size: 16px !important;
}

.vs-star-full { color: #b8860b !important; }
.vs-star-half { color: #daa520 !important; }
.vs-star-empty { color: #ddd !important; }

.vs-rating-value {
    font-weight: 700 !important;
    color: #1a365d !important;
    font-size: 14px !important;
}

.vs-bbb-badge {
    display: inline-block !important;
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

.vs-features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.vs-features-list li {
    font-size: 13px !important;
    color: #555 !important;
    padding: 2px 0 !important;
}

.vs-features-list li::before {
    content: '\2713 ' !important;
    color: #2e7d32 !important;
    font-weight: 700 !important;
}

/* Action buttons */
.vs-action-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
}

.vs-btn.vs-btn-primary,
a.vs-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #b8860b, #daa520) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(184,134,11,0.25) !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    min-width: 140px !important;
}

.vs-btn.vs-btn-primary:hover,
a.vs-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(184,134,11,0.35) !important;
}

.vs-btn.vs-btn-review,
a.vs-btn-review {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 20px !important;
    background: transparent !important;
    color: #1a365d !important;
    border: 2px solid #1a365d !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    min-width: 140px !important;
}

.vs-btn.vs-btn-review:hover,
a.vs-btn-review:hover {
    background: #1a365d !important;
    color: #fff !important;
}

/* ===== COMPANIES TABLE - MOBILE CARDS ===== */
@media (max-width: 768px) {
    .vs-companies-table-wrapper {
        overflow-x: visible !important;
    }

    .vs-companies-table,
    .vs-companies-table thead,
    .vs-companies-table tbody,
    .vs-companies-table th,
    .vs-companies-table td,
    .vs-companies-table tr {
        display: block !important;
    }

    .vs-companies-table thead {
        display: none !important;
    }

    .vs-company-row {
        background: #fff !important;
        border-radius: 16px !important;
        padding: 20px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .vs-company-row td {
        display: block !important;
        padding: 6px 0 !important;
        border: none !important;
        width: 100% !important;
        text-align: center !important;
    }

    .vs-company-row td[data-label]::before {
        display: none !important;
    }

    .vs-td-rank {
        order: -1 !important;
    }

    .vs-rank-badge {
        margin: 0 auto 8px !important;
    }

    .vs-company-info {
        align-items: center !important;
    }

    .vs-company-logo {
        width: 45% !important;
        max-width: 180px !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 auto 8px !important;
    }

    .vs-company-name {
        font-size: 16px !important;
        text-align: center !important;
    }

    .vs-rating-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .vs-action-btns {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 8px !important;
    }

    .vs-btn.vs-btn-primary,
    .vs-btn.vs-btn-review {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }

    .vs-features-list {
        text-align: center !important;
    }

    /* Hide rank and BBB on very small */
    .vs-td-rank { display: none !important; }
}

/* ===== ARTICLE / CONTENT ===== */
.vs-article {
    max-width: 900px !important;
    margin: 0 auto !important;
    color: #333 !important;
}

.vs-article h2 {
    color: #1a365d !important;
    font-size: 1.6rem !important;
    margin: 32px 0 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #b8860b !important;
}

.vs-article h3 {
    color: #2c5282 !important;
    font-size: 1.25rem !important;
    margin: 24px 0 12px !important;
}

.vs-article p {
    color: #444 !important;
    line-height: 1.8 !important;
    margin-bottom: 14px !important;
}

.vs-article ul, .vs-list {
    color: #444 !important;
}

/* Images in article content - desktop 30% float, mobile 100% */
.vs-article img,
.vs-section img:not(.vs-company-logo):not(.vs-testimonial-avatar) {
    max-width: 30% !important;
    height: auto !important;
    border-radius: 10px !important;
    margin: 10px 20px 10px 0 !important;
    float: left !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1) !important;
}

.vs-article img:nth-of-type(2n),
.vs-section img:nth-of-type(2n):not(.vs-company-logo):not(.vs-testimonial-avatar) {
    float: right !important;
    margin: 10px 0 10px 20px !important;
}

@media (max-width: 768px) {
    .vs-article img,
    .vs-section img:not(.vs-company-logo):not(.vs-testimonial-avatar) {
        max-width: 100% !important;
        float: none !important;
        margin: 12px auto !important;
        display: block !important;
    }
}

/* ===== TABLE OF CONTENTS ===== */
.toc-box {
    max-width: 900px !important;
    margin: 0 auto 24px !important;
}

/* ===== BREADCRUMBS ===== */
.vs-breadcrumb {
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ===== FAQ SECTION ===== */
.vs-faq-section {
    max-width: 900px !important;
    margin: 30px auto !important;
    padding: 24px !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
}

.vs-faq-section h2 {
    text-align: center !important;
    color: #1a365d !important;
    font-size: 22px !important;
    margin-bottom: 20px !important;
    border-bottom: none !important;
}

.vs-faq-item {
    margin-bottom: 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    overflow: hidden !important;
}

.vs-faq-question {
    padding: 14px 18px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #1a365d !important;
    transition: background 0.2s !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
}

.vs-faq-question:hover {
    background: #f0f4f8 !important;
}

/* Single indicator - use + only */
.vs-faq-question::after {
    content: '+' !important;
    font-size: 22px !important;
    color: #b8860b !important;
    font-weight: 300 !important;
    flex-shrink: 0 !important;
    margin-left: 12px !important;
    transition: transform 0.3s !important;
}

.vs-faq-item.active .vs-faq-question::after {
    transform: rotate(45deg) !important;
}

/* Remove any arrow indicators */
.vs-faq-question .faq-arrow,
.vs-faq-question .faq-toggle,
.vs-faq-question svg {
    display: none !important;
}

.vs-faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 18px !important;
    transition: max-height 0.3s ease, padding 0.3s ease !important;
}

.vs-faq-item.active .vs-faq-answer {
    padding: 0 18px 14px !important;
}

.vs-faq-answer p {
    margin: 0 !important;
    color: #555 !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
}

/* Remove margin that could inflate height */
[class*="-faq"], #faq, [id="faq"] {
    max-width: 900px !important;
}

/* ===== REVIEW PAGES ===== */
.vs-review-header {
    text-align: center !important;
    padding: 30px 0 20px !important;
}

.vs-review-title {
    color: #1a365d !important;
    font-size: clamp(22px, 3vw, 32px) !important;
}

/* Company logo on review pages - white bg */
.vs-review-header img,
.vs-review-page img[class*="logo"],
.vs-other-card img {
    background: rgba(255,255,255,0.9) !important;
    padding: 8px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.vs-review-rating-large {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 12px 0 !important;
}

.vs-review-rating-large .vs-stars {
    font-size: 24px !important;
}

.vs-review-badge {
    display: inline-block !important;
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.vs-quick-facts {
    display: flex !important;
    justify-content: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    margin: 20px 0 !important;
    padding: 16px !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
}

.vs-fact-item {
    text-align: center !important;
}

.vs-fact-label {
    display: block !important;
    font-size: 12px !important;
    color: #888 !important;
    text-transform: uppercase !important;
}

.vs-fact-value {
    display: block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a365d !important;
}

.vs-pros-cons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin: 24px 0 !important;
}

.vs-pros h3 { color: #2e7d32 !important; }
.vs-cons h3 { color: #c62828 !important; }

.vs-pros ul li::before { content: '\2713 ' !important; color: #2e7d32 !important; }
.vs-cons ul li::before { content: '\2717 ' !important; color: #c62828 !important; }

.vs-pros ul, .vs-cons ul {
    list-style: none !important;
    padding: 0 !important;
}

.vs-pros ul li, .vs-cons ul li {
    padding: 6px 0 !important;
    color: #444 !important;
}

@media (max-width: 768px) {
    .vs-pros-cons { grid-template-columns: 1fr !important; }
}

.vs-cta-box {
    text-align: center !important;
    padding: 30px !important;
    background: linear-gradient(135deg, #1a365d, #2c5282) !important;
    border-radius: 16px !important;
    margin: 30px 0 !important;
    color: #fff !important;
}

.vs-cta-box h3 { color: #fff !important; margin-bottom: 10px !important; }
.vs-cta-box p { color: rgba(255,255,255,0.85) !important; }

.vs-cta-box .vs-btn-primary {
    background: linear-gradient(135deg, #b8860b, #daa520) !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
}

/* ===== TESTIMONIALS ===== */
.vs-testimonials-section {
    max-width: 900px !important;
    margin: 30px auto !important;
    text-align: center !important;
}

.vs-testimonials-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

.vs-testimonial-card {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    text-align: center !important;
}

.vs-testimonial-avatar {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-bottom: 12px !important;
}

.vs-testimonial-stars {
    color: #b8860b !important;
    font-size: 20px !important;
    margin-bottom: 10px !important;
}

.vs-testimonial-text {
    color: #555 !important;
    font-style: italic !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
}

.vs-testimonial-name {
    color: #1a365d !important;
    font-weight: 600 !important;
    margin-top: 10px !important;
}

/* ===== FOOTER ===== */
.vs-footer {
    background: #1a365d !important;
    color: rgba(255,255,255,0.8) !important;
    padding: 40px 0 20px !important;
    margin-top: 40px !important;
}

.vs-footer-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 30px !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.vs-footer-title {
    color: #fff !important;
    font-size: 16px !important;
    margin-bottom: 12px !important;
}

.vs-footer-links {
    list-style: none !important;
    padding: 0 !important;
}

.vs-footer-links a {
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    padding: 4px 0 !important;
    display: block !important;
}

.vs-footer-links a:hover {
    color: #daa520 !important;
}

.vs-footer-bottom {
    text-align: center !important;
    padding-top: 20px !important;
    margin-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.5) !important;
}

.vs-footer-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.vs-footer-logo .vs-logo-text {
    font-size: 14px !important;
}

/* Kit banner in footer */
.kit-banner-block {
    text-align: center !important;
    margin: 20px auto !important;
    max-width: 700px !important;
}

.kit-banner-block img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

/* ===== BANNERS CENTERING ===== */
.vs-banner-block, [class*="banner-block"] {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== STICKY FOOTER ===== */
#stickyFoot {
    background: #fff !important;
    border-top: 2px solid #b8860b !important;
}

#stickyFoot img {
    border-radius: 8px !important;
    background: rgba(255,255,255,0.9) !important;
}

/* ===== MOBILE GENERAL ===== */
@media (max-width: 768px) {
    .vs-container {
        padding: 0 12px !important;
    }

    .vs-hero {
        padding: 24px 16px 20px !important;
        border-radius: 0 !important;
    }

    .vs-faq-section {
        padding: 16px !important;
        margin: 20px 8px !important;
    }

    .vs-faq-question {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    .vs-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .vs-review-page {
        padding: 0 8px !important;
    }

    /* Sticky footer mobile */
    body {
        padding-bottom: 80px !important;
    }
}

/* ===== SECTION TITLES ===== */
.vs-section h2 {
    color: #1a365d !important;
}

/* ===== EXQ BUTTON CENTERING (from task requirement) ===== */
.exq-cta-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

.exq-btn-cta, .exq-btn-review {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* ===== DISCLOSURE BOX ===== */
.vs-companies-section + div,
div[style*="background:#fff8e1"] {
    max-width: 900px !important;
}

/* ===== REVIEW OTHER COMPANIES ===== */
.vs-other-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
}

.vs-other-card {
    background: #f8f9fa !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: center !important;
    border: 1px solid #e2e8f0 !important;
    transition: transform 0.2s !important;
}

.vs-other-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.vs-other-card h4 {
    color: #1a365d !important;
    margin-bottom: 6px !important;
}

.vs-other-card a {
    color: #b8860b !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* Fix body text color for dark-themed CSS variables */
.vs-main, .vs-main p, .vs-main li, .vs-main span, .vs-main div {
    color: #333 !important;
}

.vs-main h1, .vs-main h2, .vs-main h3 {
    color: #1a365d !important;
}

/* Override the dark theme body styles */
body {
    color: #333 !important;
    background: #f7f9fc !important;
}

/* Fee table in reviews */
.vs-fee-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 16px 0 !important;
}

.vs-fee-table th {
    background: #1a365d !important;
    color: #fff !important;
    padding: 10px 16px !important;
    text-align: left !important;
}

.vs-fee-table td {
    padding: 10px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #444 !important;
}

/* Static pages */
.vs-main article h1 {
    text-align: center !important;
    color: #1a365d !important;
    margin-bottom: 20px !important;
}


/* ====== CRITICAL OVERRIDES v2 - higher specificity ====== */

/* Force body and text colors to override dark theme variables */
body.vs-body, html body {
    background-color: #f7f9fc !important;
    color: #333 !important;
}

/* Force ALL text inside table to be dark */
body .vs-companies-table,
body .vs-companies-table td,
body .vs-companies-table th,
body .vs-companies-table .vs-company-name,
body .vs-companies-table .vs-rating-value,
body .vs-companies-table .vs-td-minimum,
body .vs-companies-table .vs-features-list li,
.vs-companies-section .vs-companies-table td,
.vs-companies-section .vs-company-name,
.vs-companies-section .vs-rating-value {
    color: #333 !important;
}

.vs-companies-section h2 {
    color: #1a365d !important;
}

/* LOGO SIZE - override vs-style.css 140px limit */
body .vs-company-logo,
.vs-companies-section .vs-company-logo,
.vs-companies-table .vs-company-logo,
table .vs-company-logo,
img.vs-company-logo {
    width: 190px !important;
    height: auto !important;
    max-width: 230px !important;
    min-width: 170px !important;
    max-height: 65px !important;
    object-fit: contain !important;
}

/* BUTTONS - force styled appearance */
body .vs-btn.vs-btn-primary,
body a.vs-btn.vs-btn-primary,
.vs-companies-section a.vs-btn-primary,
.vs-td-action a.vs-btn-primary,
a[class*="vs-btn-primary"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #b8860b, #daa520) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(184,134,11,0.25) !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    min-width: 140px !important;
    border: none !important;
}

body .vs-btn.vs-btn-primary:hover,
body a.vs-btn.vs-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(184,134,11,0.35) !important;
    color: #fff !important;
}

body .vs-btn.vs-btn-review,
body a.vs-btn.vs-btn-review,
.vs-companies-section a.vs-btn-review,
.vs-td-action a.vs-btn-review,
a[class*="vs-btn-review"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 20px !important;
    background: transparent !important;
    color: #1a365d !important;
    border: 2px solid #1a365d !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    min-width: 140px !important;
    transition: all 0.2s !important;
}

body .vs-btn.vs-btn-review:hover {
    background: #1a365d !important;
    color: #fff !important;
}

/* TABLE HEADER DARK BG */
body .vs-companies-table thead th,
.vs-companies-section .vs-companies-table thead th {
    background: #1a365d !important;
    color: #fff !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* TABLE ROWS */
body .vs-companies-table .vs-company-row,
body .vs-companies-table tr.vs-company-row {
    background: #fff !important;
}

body .vs-companies-table .vs-company-row td {
    background: #fff !important;
    color: #333 !important;
    vertical-align: middle !important;
    padding: 14px 16px !important;
}

/* RANK BADGE */
body .vs-rank-badge {
    width: 32px !important;
    height: 32px !important;
    background: linear-gradient(135deg, #b8860b, #daa520) !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
}

/* STARS */
body .vs-stars, body .vs-star-full {
    color: #b8860b !important;
}

/* BBB BADGE */
body .vs-bbb-badge {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}

/* COMPANY BADGE */
body .vs-company-badge {
    background: linear-gradient(135deg, #b8860b, #daa520) !important;
    color: #fff !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
}

/* Company name in table */
body .vs-company-name {
    font-weight: 700 !important;
    color: #1a365d !important;
    font-size: 15px !important;
}

/* FEATURES LIST */
body .vs-features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body .vs-features-list li::before {
    content: '\2713 ' !important;
    color: #2e7d32 !important;
    font-weight: 700 !important;
}

/* Action buttons column */
body .vs-action-btns, body .vs-td-action > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
}

/* ===== MOBILE CARD OVERRIDES v2 ===== */
@media (max-width: 768px) {
    /* Logo in mobile cards - 45% width */
    body .vs-company-logo,
    .vs-companies-section .vs-company-logo,
    img.vs-company-logo {
        width: 45% !important;
        min-width: 120px !important;
        max-width: 180px !important;
        max-height: none !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 10px !important;
    }

    /* Card layout */
    body .vs-companies-section .vs-companies-table tbody tr.vs-company-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        background: #fff !important;
        border-radius: 16px !important;
        padding: 20px 16px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    }

    body .vs-companies-section .vs-companies-table td {
        justify-content: center !important;
        text-align: center !important;
        color: #333 !important;
    }

    body .vs-companies-section .vs-companies-table td::before {
        display: none !important;
    }

    body .vs-companies-section .vs-td-company {
        border-bottom: 2px solid #f0e6d3 !important;
    }

    /* Center company info */
    body .vs-company-info {
        align-items: center !important;
        text-align: center !important;
    }

    /* Buttons full width in mobile */
    body .vs-td-action .vs-btn,
    body .vs-td-action a {
        width: 100% !important;
        max-width: 260px !important;
        margin: 0 auto !important;
        text-align: center !important;
        justify-content: center !important;
    }

    body .vs-td-action .vs-action-btns {
        width: 100% !important;
    }

    /* Features centered */
    body .vs-features-list {
        text-align: center !important;
    }

    /* Rating box centered */
    body .vs-rating-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* ===== HERO - compact ===== */
body .vs-hero {
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 40%, #1a365d 100%) !important;
    padding: 35px 20px 25px !important;
}

body .vs-hero h1 {
    color: #fff !important;
}

body .vs-hero .vs-lead {
    color: rgba(255,255,255,0.85) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-height: 4.8em !important;
}

/* ===== SECTION TITLES ===== */
body .vs-section h2, body .vs-article h2 {
    color: #1a365d !important;
}

body .vs-section h3, body .vs-article h3 {
    color: #2c5282 !important;
}

body .vs-section p, body .vs-article p, body .vs-section li {
    color: #444 !important;
}

/* ===== DISCLOSURE BOX ===== */
body div[style*="background:#fff8e1"] {
    color: #5d4037 !important;
}

/* ===== REVIEW PAGE - Company logo at top with white bg ===== */
body .vs-review-header img {
    background: rgba(255,255,255,0.95) !important;
    padding: 12px 20px !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08) !important;
    max-width: 200px !important;
}

/* Review page text colors */
body .vs-review-page,
body .vs-review-content,
body .vs-review-content p,
body .vs-review-section p,
body .vs-review-section li,
body .vs-lead {
    color: #444 !important;
}

body .vs-review-title {
    color: #1a365d !important;
}

/* Pros cons text */
body .vs-pros li, body .vs-cons li {
    color: #444 !important;
}

body .vs-pros h3 { color: #2e7d32 !important; }
body .vs-cons h3 { color: #c62828 !important; }

/* CTA box in review */
body .vs-cta-box {
    background: linear-gradient(135deg, #1a365d, #2c5282) !important;
    color: #fff !important;
}

body .vs-cta-box h3, body .vs-cta-box p {
    color: #fff !important;
}

/* Other companies grid */
body .vs-other-card h4 {
    color: #1a365d !important;
}

body .vs-other-card p {
    color: #666 !important;
}

body .vs-other-card a {
    color: #b8860b !important;
}

/* Contact page text */
body .vs-contact-details h3 {
    color: #1a365d !important;
}

body .vs-contact-details p {
    color: #666 !important;
}

/* Footer text overrides */
body .vs-footer, body .vs-footer p, body .vs-footer a {
    color: rgba(255,255,255,0.7) !important;
}

body .vs-footer .vs-footer-title {
    color: #fff !important;
}

body .vs-footer .vs-logo-text {
    color: #fff !important;
}

body .vs-footer-bottom p {
    color: rgba(255,255,255,0.5) !important;
}