/* ========================================================================== */
/* = PRICING
/* ========================================================================== */

/* =========================
   BÊTA GLOBAL
========================= */

.badge-beta-global {
    background: var(--cms-primary-50);
    color: var(--cms-primary-500);
    font-weight: 700;
    padding: var(--cms-spacing-xs) var(--cms-spacing-s);
    border-radius: var(--cms-border-radius-l);
    font-size: var(--cms-font-size-label);
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: var(--cms-spacing-m);
}

.badge-disabled {
    background: var(--cms-neutral-50);
    color: var(--cms-neutral-100);
}

.hero-container {
    text-align: center;
}

/* =========================
   CARDS
========================= */

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* On définit 4 lignes : Header, Pricing, Features, Footer */
    /* auto = s'adapte au contenu le plus grand de la ligne */
    /* 1fr  = la section features prend tout l'espace restant */
    grid-template-rows: auto auto 1fr auto; 
    gap: var(--cms-spacing-l);
    align-items: stretch;

    h2 {
        margin: 0;
    }

    .plan-disabled {
        opacity: 0.65;
        filter: grayscale(30%);
        position: relative;
        pointer-events: none;

        .button-disabled {
            background-color: var(--cms-neutral-100) !important;
            color: var(--cms-neutral-300) !important;
            border: none !important;
            cursor: not-allowed;
            pointer-events: none;
            justify-content: center;
        }
    }

    .beta-container {
        display: flex;
        flex-direction: column;
        gap: var(--cms-spacing-s);
        flex: 1;

        .beta-button {
            justify-content: center;
        }
    }

    /* On force les cartes à s'étendre sur les 4 lignes du parent */
    .cms-card {
        grid-row: span 4; 
        display: grid;
        grid-template-rows: subgrid; /* LA MAGIE : utilise les lignes du parent */
        height: 100%;

        &.beta-active {
            .badge-success {
                font-weight: 700;
            }
        }

        /* Ajustements des blocs internes */
        .card-header {
            grid-row: 1;
            align-items: center;
            text-align: center;

            .audience-text {
                color: var(--cms-text-default);
                margin: 0;
            }
        }

        /* On fait la même chose pour le wrapper interne card-content */
        .card-content {
            grid-row: span 4;
            display: grid;
            grid-template-rows: subgrid;
            gap: var(--cms-spacing-xl);
        }

        .card-pricing-container {
            grid-row: 2;
            justify-items: center;

            .card-pricing {
                font-size: var(--cms-font-size-h3);
                font-weight: bold;
            }

            .card-pricing:has(.price-suffix:not(:empty)) {
                display: flex;
                justify-content: center;
                gap: var(--cms-spacing-xxs);
            }

            .price-details {
                text-align: center;
                margin-top: var(--cms-spacing-xs);
                color: var(--cms-text-muted);
            }
        }

        .card-features {
            grid-row: 3;
            display: flex;
            flex-direction: column;
            gap: var(--cms-spacing-s);

            .features-list-content {

                ul {
                    list-style: none;
                    padding: 0;
                }

                /* Icône par défaut (check vert) */
                li {
                    position: relative;
                    padding-left: 28px;
                    margin-bottom: var(--cms-spacing-s);
                    color: var(--cms-text-default);

                    /* On utilise CSS pour injecter l'icône de check devant chaque élément de liste ! */
                    &::before {
                        content: "done"; /* Nom de l'icône Material Symbols */
                        font-family: 'Material Symbols Outlined';
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        color: var(--cms-success-main); /* Coche verte */
                        font-size: 20px;
                    }
                }

                /* Croix rouge pour Support */
                li.feature-support {
                    &::before {
                        content: "close";
                        color: var(--cms-danger-main);
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }

                /* Warning orange pour Attribution */
                li.feature-attribution {
                    &::before {
                        content: "warning";
                        color: var(--cms-warning-main);
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }
        }

        .card-footer {
            grid-row: 4;
            justify-content: center;

            .beta-newsletter-form {
                display: flex;
                border: 1px solid var(--cms-border-default);
                border-radius: var(--cms-border-radius-s);
                overflow: hidden;
                background: #fff;
                width: 100%;

                input {
                    border: none !important;
                    padding: var(--cms-spacing-xs) var(--cms-spacing-s);
                    font-size: var(--cms-font-size-label);
                    flex: 1;

                    &:focus {
                        outline: none;
                    }
                }

                button {
                    background: var(--cms-neutral-100);
                    border: none;
                    color: var(--cms-text-color);
                    padding: 0 var(--cms-spacing-s);
                    cursor: pointer;
                    transition: background .2s;

                    &:hover {
                        background: var(--cms-neutral-200);
                    }

                    .material-symbols-outlined {
                        font-size: 18px;
                    }
                }
            }
            
        }

        /* Style pour la mise en avant (Highlighted) */
        &.highlighted {
            border: 2px solid var(--cms-primary-500);
            transform: scale(1.02); /* Optionnel : la carte populaire dépasse un peu */
            z-index: 10;

            .badge {
                background-color: var(--cms-primary-500);
                color: var(--cms-neutral-0);
            }
        }

        .badge {
            background-color: var(--cms-primary-50);
            color: var(--cms-primary-400);
        }

        &.lifetime-plan {
            grid-column: 1 / -1; /* S'étend sur toutes les colonnes */

            .card-content {
                width: 100%;
                display: flex;
                flex-direction: row;

                .card-left, .card-right {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: var(--cms-spacing-s);
                }

                .card-header {
                    display: flex;
                    flex-direction: column;
                    gap: var(--cms-spacing-s);
                    align-items: start;
                    text-align: start;
                }

                .card-pricing-container {
                    justify-items: start;
                }

                .card-footer {
                    justify-content: start;
                }
            }
        }
    }

}

#pricing-features-table-wrapper {
    margin-top: var(--cms-spacing-xl);
    
    &.hidden {
        display: none;
    }
}

.cms-pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--cms-body-font);
    table-layout: fixed; /* Colonnes de largeur égale */
    color: var(--cms-neutral-0);

    /* Colonne de gauche plus large pour les noms de features */
    .col-feature { width: 40%; }
    .col-plan { width: 20%; }

    /* Lignes de titre de catégorie */
    .category-row {
        td {
            padding: var(--cms-spacing-m) var(--cms-spacing-s);
            background-color: transparent;
            color: var(--cms-neutral-0);
            vertical-align: bottom;
            padding-top: var(--cms-spacing-xxl);
            line-height: 1.4;
        }
        
        /* On cache les noms de plans répétés sur desktop mais utiles pour le mobile */
        .text-center {
            color: var(--cms-neutral-0);
        }
    }

    /* Lignes de features */
    tr:not(.category-row, thead tr) {

        td {
            padding: var(--cms-spacing-s);
            color: var(--cms-neutral-0);
            vertical-align: middle;
            border: 1px solid var(--cms-white-a15);
            line-height: 1.4;
        }
    }

    .feature-name {
        font-weight: 500;
        color: var(--cms-neutral-0);

        .tooltip-icon {
            font-size: 16px;
            color: var(--cms-neutral-300);
            cursor: help;
            
            &:hover { color: var(--cms-primary-500); }
        }
    }

    /* Icônes de succès */
    .text-success {
        color: var(--cms-success-main);
        font-weight: bold;
    }
}

.entreprise-edition {
    margin-top: var(--cms-spacing-l);
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-xs);

    .title {
        color: var(--cms-neutral-0);
        font-weight: bold;
    }
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-xxl);

    .faq-intro {
        text-align: center;
    }

    .faq-items {
        display: flex;
        flex-direction: column;
        gap: var(--cms-spacing-s);
    }
}


/* ========================================================================== */
/* RESPONSIVE (Desktop-first approach)
   Styles are defined for large screens first, then overridden for smaller screens
/* ========================================================================== */

/* Wide Desktop */
@media (min-width: 1921px) { 

}

/* Desktop */
@media (max-width: 1920px) { 

}

/* Small laptops & Large Tablets */
@media (max-width: 1280px) { 

}

/* Tablets landscape & Small laptops */
@media (max-width: 1024px) { 

}

/* Tablets portrait & Large Smartphones */
@media (max-width: 768px) { 
    .pricing-cards {
        grid-template-columns: 1fr;
        grid-template-rows: auto; /* On revient à un flux normal */
        
        .cms-card, .card-content {
            display: flex; /* On repasse en flexbox pour le mobile */
            flex-direction: column;
            grid-row: auto;
        }
    }

    .cms-pricing-table {
        display: block;
        overflow-x: auto; /* Permet le scroll horizontal sur petit écran */
        
        .col-feature { min-width: 200px; }
        .col-plan { min-width: 100px; }
    }
}

/* Small Smartphones */
@media (max-width: 500px) { 
    
}