/**
 * Insurance & Payment Section
 * Private pay emphasized (left), insurance secondary (right)
 * 
 * Now using standardized utilities from styles.css
 * Refactored from 360 lines to ~285 lines (21% reduction)
 */

/* ==========================================================================
   Section Container - Uses .axis-section--bg-white from global
   ========================================================================== */

.insurance-section {
    position: relative;
}

/* ==========================================================================
   Two Column Layout - Uses .axis-grid-2 base with custom width override
   ========================================================================== */

.insurance-grid {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-8);
}

@media (min-width: 769px) {
    .insurance-grid {
        flex-direction: row;
        gap: var(--axis-space-8);
        align-items: stretch;
    }

    .payment-column,
    .insurance-column {
        flex: 1;
        display: flex;
    }

    .payment-card,
    .insurance-card {
        flex: 1;
    }
}

/* ==========================================================================
   Private Pay Card (Left) - Uses .axis-card base with custom accent
   ========================================================================== */

.payment-card {
    background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
    border: 2px solid rgba(0, 136, 204, 0.2);
    position: relative;
    overflow: visible;
}

/* Bold accent bar on left - signature design element */
.payment-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    width: 5px;
    background: var(--axis-gradient-accent);
    border-radius: var(--axis-radius-xl) 0 0 var(--axis-radius-xl);
}

.payment-card>* {
    position: relative;
    z-index: 1;
}

/* Restore feature icon styling */
.payment-features li::before,
.insurance-features li::before {
    font-weight: 700 !important;
    color: var(--axis-primary) !important;
}

/* Payment Title */
.payment-title {
    font-size: var(--axis-text-xl);
    font-weight: var(--axis-font-extrabold);
    color: var(--axis-dark);
    margin-bottom: var(--axis-space-3);
}

@media (min-width: 769px) {
    .payment-title {
        font-size: var(--axis-text-2xl);
    }
}

/* Price Display */
.payment-price {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--axis-text-2xl);
    font-weight: 700;
    color: var(--axis-dark);
    line-height: 1.4;
    margin-bottom: var(--axis-space-4);
}

@media (min-width: 769px) {
    .payment-price {
        font-size: var(--axis-text-2xl);
    }
}

/* Payment Description */
.payment-description {
    font-size: var(--axis-text-base);
    line-height: var(--axis-line-height-relaxed);
    color: var(--axis-text-primary);
    margin-bottom: var(--axis-space-5);
}

/* Payment Features List */
.payment-features-list {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-3);
}

.payment-feature {
    display: flex;
    align-items: center;
    gap: var(--axis-space-3);
}

.payment-feature .feature-check {
    font-size: var(--axis-text-lg);
    color: var(--axis-white);
    background: var(--axis-primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0, 136, 204, 0.3);
}

.payment-feature .feature-check i,
.payment-feature .feature-check::before {
    color: var(--axis-white) !important;
}

.payment-feature .feature-text {
    font-size: var(--axis-text-base);
    color: var(--axis-text-primary);
    line-height: 1.6;
}

/* ==========================================================================
   Decision Helper Accordion
   ========================================================================== */

.payment-decision-accordion {
    margin-top: var(--axis-space-8) !important;
    border-top: 1px solid rgba(0, 136, 204, 0.2) !important;
    padding-top: var(--axis-space-6) !important;
}

.decision-accordion-item .bricks-accordion-title {
    background: rgba(0, 136, 204, 0.08) !important;
    border: 1px solid rgba(0, 136, 204, 0.2) !important;
    border-radius: 6px !important;
    padding: 14px 18px !important;
    font-size: var(--axis-text-base) !important;
    font-weight: 600 !important;
    color: var(--axis-dark) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.decision-accordion-item .bricks-accordion-title:hover {
    background: rgba(0, 136, 204, 0.12) !important;
    border-color: rgba(0, 136, 204, 0.3) !important;
}

.decision-accordion-item .bricks-accordion-title.active {
    background: rgba(0, 136, 204, 0.15) !important;
    color: var(--axis-primary) !important;
}

.decision-accordion-item .bricks-accordion-content {
    padding: var(--axis-space-6) var(--axis-space-4) !important;
    font-size: var(--axis-text-sm) !important;
    line-height: 1.7 !important;
}

.decision-content {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-6);
}

.decision-section h4 {
    font-size: var(--axis-text-base) !important;
    font-weight: 700 !important;
    color: var(--axis-dark) !important;
    margin-bottom: var(--axis-space-3) !important;
}

.decision-section ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.decision-section li {
    padding-left: 24px !important;
    position: relative !important;
    margin-bottom: var(--axis-space-2) !important;
    font-size: var(--axis-text-sm) !important;
    line-height: 1.6 !important;
    color: var(--axis-text-primary) !important;
}

.decision-section li::before {
    content: "•" !important;
    position: absolute !important;
    left: 8px !important;
    color: var(--axis-primary) !important;
    font-weight: bold !important;
}

.decision-section li strong {
    color: var(--axis-dark) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   Insurance Card (Right) - Uses .axis-card with custom gradient accent
   ========================================================================== */

.insurance-card {
    position: relative;
}

/* Gradient accent bar on top */
.insurance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--axis-gradient-accent);
    border-radius: var(--axis-radius-xl) var(--axis-radius-xl) 0 0;
}

.insurance-title {
    font-size: var(--axis-text-xl);
    font-weight: var(--axis-font-bold);
    color: var(--axis-dark);
    margin-bottom: var(--axis-space-3);
}

@media (min-width: 769px) {
    .insurance-title {
        font-size: var(--axis-text-2xl);
    }
}

.insurance-description {
    font-size: var(--axis-text-base);
    line-height: 1.6;
    color: var(--axis-text-primary);
    margin-bottom: var(--axis-space-5);
    font-weight: var(--axis-font-medium);
}

.insurance-inline-list {
    display: block;
    margin-top: var(--axis-space-3);
    padding: var(--axis-space-5);
    background: rgba(0, 136, 204, 0.05);
    border-radius: 6px;
    font-weight: 600 !important;
    font-size: var(--axis-text-base) !important;
    color: var(--axis-dark) !important;
    line-height: 2 !important;
    word-spacing: 2px;
}

/* Insurance logos grid - deprecated */
.insurance-logos-grid,
.insurance-logo {
    display: none !important;
}

/* Insurance Details List */
.insurance-details-list {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-3);
    margin-top: var(--axis-space-5);
    padding-top: var(--axis-space-5);
    border-top: 1px solid var(--axis-gray-300);
}

.details-heading {
    font-size: var(--axis-text-sm) !important;
    font-weight: 700 !important;
    color: var(--axis-dark) !important;
    margin-bottom: var(--axis-space-2) !important;
    display: block !important;
}

.insurance-detail {
    display: flex;
    align-items: flex-start;
    gap: var(--axis-space-3);
}

.insurance-detail .detail-icon {
    font-size: var(--axis-text-base) !important;
    color: var(--axis-primary) !important;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.8;
}

.insurance-detail .detail-icon i,
.insurance-detail .detail-icon::before {
    color: var(--axis-primary) !important;
}

.insurance-detail .detail-text {
    font-size: var(--axis-text-sm) !important;
    line-height: 1.6 !important;
    color: var(--axis-text-primary) !important;
    margin: 0 !important;
}

.insurance-detail .detail-text strong {
    color: var(--axis-dark);
    font-weight: var(--axis-font-semibold);
}

/* ==========================================================================
   FAQ Link (Full-Width Info Banner Below Cards)
   ========================================================================== */

.faq-link-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--axis-space-2) !important;

    width: 100% !important;
    max-width: 1000px !important;
    margin: var(--axis-space-10) auto var(--axis-space-8) !important;
    padding: var(--axis-space-6) var(--axis-space-8) !important;

    background: linear-gradient(135deg, rgba(0, 136, 204, 0.06) 0%, rgba(0, 136, 204, 0.02) 100%) !important;
    border: 1px solid rgba(0, 136, 204, 0.15) !important;
    border-left: 4px solid var(--axis-primary) !important;
    border-radius: var(--axis-radius-md) !important;

    text-align: center !important;
    font-size: var(--axis-text-base) !important;
    line-height: 1.6 !important;
    color: var(--axis-text-primary) !important;

    transition: all 0.3s ease !important;
}

.faq-link-text:hover {
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.1) 0%, rgba(0, 136, 204, 0.04) 100%) !important;
    border-color: var(--axis-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.12) !important;
}

/* FAQ icon sizing and color */
.faq-link-text .brxe-icon {
    font-size: var(--axis-text-3xl) !important;
    color: var(--axis-primary) !important;
    flex-shrink: 0 !important;
}

.faq-link-text a {
    color: var(--axis-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}

.faq-link-text a:hover {
    color: #0077b3 !important;
    border-bottom-color: #0077b3 !important;
}

@media (max-width: 768px) {
    .faq-link-text {
        flex-direction: column !important;
        gap: var(--axis-space-3) !important;
        font-size: var(--axis-text-base) !important;
        padding: var(--axis-space-5) var(--axis-space-4) !important;
    }

    .faq-link-text .brxe-icon {
        font-size: 36px !important;
    }
}

/* ==========================================================================
   CTA Button Layout (component styles live in styles.css)
   ========================================================================== */

.insurance-section .cta-primary-btn {
    /* Keep inline-flex from global styles for vertical centering */
    max-width: 480px;
    margin: var(--axis-space-6) auto 0;
}

/* ==========================================================================
   Mobile Optimizations
   ========================================================================== */

@media (max-width: 768px) {
    .insurance-grid {
        max-width: 100%;
        gap: var(--axis-space-6);
    }

    .payment-card {
        padding: var(--axis-space-8);
    }

    .payment-price {
        font-size: var(--axis-text-xl);
    }

    .insurance-card {
        padding: var(--axis-space-6);
    }

    .insurance-section .cta-primary-btn {
        font-size: var(--axis-text-base);
        max-width: 100%;
    }
}