/* prices-modal-cards.css */

/* Mobile pricing cards - completely replace tables on smaller screens */
@media screen and (max-width: 767px) {
    /* Hide regular tables on mobile */
    .prices-table,
    .comparison-table {
        display: none;
    }

    /* Show mobile cards container */
    .mobile-pricing-cards {
        display: block;
        margin: 20px 0;
    }

    /* Base card styles */
    .pricing-card {
        background: var(--light-purple, #cfd5f6);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    /* Card header */
    .pricing-card-header {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(114, 114, 236, 0.2);
    }

    /* Card title */
    .pricing-card-title {
        color: var(--dark-purple, #4a4a8d);
        font-family: var(--h5-font-family, "Circe-Bold", sans-serif);
        font-size: var(--h5-font-size, 20px);
        margin-bottom: 5px;
        font-weight: 700;
    }

    /* Price display */
    .pricing-card-price {
        color: var(--purple-accent, #7272ec);
        font-family: var(--h4-font-family, "Circe-Bold", sans-serif);
        font-size: 24px;
        font-weight: 700;
    }

    /* Item rows */
    .pricing-card-item {
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid rgba(114, 114, 236, 0.1);
    }

    .pricing-card-item:last-child {
        border-bottom: none;
    }

    /* Labels */
    .pricing-card-label {
        flex: 1;
        color: var(--dark-purple, #4a4a8d);
        font-family: var(--body-3-font-family, "Comfortaa-Regular", sans-serif);
        font-weight: 700;
        font-size: 14px;
    }

    /* Values */
    .pricing-card-value {
        flex: 1;
        text-align: right;
        color: var(--textdark, #2c2c62);
        font-family: var(--body-3-font-family, "Comfortaa-Regular", sans-serif);
        font-size: 14px;
    }

    /* For comparison cards specifically */
    .comparison-card-container {
        margin-top: 30px;
    }

    /* Tabs for comparison cards */
    .comparison-tabs {
        display: flex;
        margin-bottom: 15px;
        gap: 10px;
        justify-content: center;
    }

    .comparison-tab {
        padding: 8px 15px;
        background: var(--extra-light-purple, #ebe9fe);
        border: 1px solid var(--purple-accent, #7272ec);
        border-radius: 20px;
        color: var(--dark-purple, #4a4a8d);
        font-family: var(--button-font-family, "Circe-Bold", sans-serif);
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .comparison-tab.active {
        background: var(--purple-accent, #7272ec);
        color: white;
    }

    /* Adjust the features list */
    .comparison-features {
        margin-bottom: 15px;
    }

    .comparison-feature {
        padding: 12px 0;
        border-bottom: 1px solid rgba(114, 114, 236, 0.1);
        display: flex;
        align-items: center;
    }

    .comparison-feature:last-child {
        border-bottom: none;
    }

    .feature-name {
        flex: 1;
        color: var(--dark-purple, #4a4a8d);
        font-family: var(--body-3-font-family, "Comfortaa-Regular", sans-serif);
        font-size: 14px;
    }

    .feature-status {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Check marks and status icons */
    .check-icon,
    .times-icon {
        display: inline-block;
    }

    /* Very small screens adjustments */
    @media screen and (max-width: 360px) {
        .pricing-card {
            padding: 15px;
        }

        .pricing-card-title {
            font-size: 18px;
        }

        .pricing-card-price {
            font-size: 22px;
        }

        .pricing-card-label,
        .pricing-card-value,
        .feature-name {
            font-size: 13px;
        }
    }
}

/* Hide mobile cards on desktop */
@media screen and (min-width: 768px) {
    .mobile-pricing-cards,
    .comparison-card-container {
        display: none;
    }
}