/* ============================================================
 * PITAGORIX
 * Lotto - Calcolo vincite
 * Layout pagina
 * Mobile-first
 * ============================================================ */


/* ============================================================
 * Configurazione giocata
 * ============================================================ */

.lotto-winnings-config {

    display: flex;
    flex-direction: column;

    gap: var(--space-lg);

    width: 100%;

}


/* ============================================================
 * Righe configurazione
 * ============================================================ */

.lotto-winnings-config__row {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap: var(--space-md);

    width: 100%;

}


/*
 * Annulla il margin-top previsto dai
 * campi Lotto generici quando sono
 * inseriti nella griglia del calcolatore.
 */

.lotto-winnings-config__row
> .lotto-filter-field
+ .lotto-filter-field {

    margin-top: 0;

}


/* ============================================================
 * Totale giocata
 * ============================================================ */

.lotto-winnings-total {

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;

}

.lotto-winnings-total__label {

    margin-bottom: var(--space-xs);

    font-size: 0.9375rem;
    font-weight: 700;

    color: var(--text-secondary);

}

.lotto-winnings-total__value {

    display: flex;
    align-items: center;

    min-height: 3rem;

    padding:
        0.7rem
        0.875rem;

    font-size: 1.2rem;
    font-weight: 700;

    color: var(--text-primary);

    background-color:
        var(--surface-color);

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-md);

}


/* ============================================================
 * Azioni
 * ============================================================ */

.lotto-winnings-config__actions {

    display: flex;
    flex-direction: column;

    gap: var(--space-sm);

    width: 100%;

}

.lotto-winnings-config__actions
.btn {

    width: 100%;

}


/* ============================================================
 * Tablet
 * ============================================================ */

@media (min-width: 48rem) {

    .lotto-winnings-config__row--main {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }


    .lotto-winnings-config__row--sorts {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .lotto-winnings-config__actions {

        flex-direction: row;

        justify-content: center;
        align-items: center;

    }


    .lotto-winnings-config__actions
    .btn {

        width: auto;
        min-width: 11rem;

    }

}


/* ============================================================
 * Desktop
 * ============================================================ */

@media (min-width: 64rem) {

    /*
     * Prima riga:
     *
     * Ruota
     * Numeri giocati
     * Totale giocata
     */

    .lotto-winnings-config__row--main {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        align-items: end;

    }


    /*
     * Seconda riga:
     *
     * Ambo
     * Terno
     * Quaterna
     * Cinquina
     */

    .lotto-winnings-config__row--sorts {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        align-items: end;

    }


    /*
     * Pulsanti finali
     */

    .lotto-winnings-config__actions {

        justify-content: center;

        gap: var(--space-md);

    }


    .lotto-winnings-config__actions
    .btn {

        min-width: 13rem;

    }

}

/* ============================================================
 * Risultati
 * ============================================================ */

.lotto-winnings-results__table-wrapper {

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

}


.lotto-winnings-results__table {

    width: 100%;
    min-width: 48rem;

    border-collapse: collapse;

}


.lotto-winnings-results__table
th,
.lotto-winnings-results__table
td {

    padding:
        0.9rem
        0.75rem;

    text-align: center;
    vertical-align: middle;

    border-bottom:
        1px solid
        var(--border-color);

}


.lotto-winnings-results__table
thead
th {

    font-size: 0.875rem;
    font-weight: 700;

    color:
        var(--primary-dark);

    background-color:
        var(--primary-light);

}


.lotto-winnings-results__table
tbody
tr:last-child
th,
.lotto-winnings-results__table
tbody
tr:last-child
td {

    border-bottom: 0;

}


/* Numeri indovinati */

.lotto-winnings-results__hits {

    font-size: 1.1rem;
    font-weight: 700;

    color:
        var(--text-primary);

}


/* Celle delle sorti */

.lotto-winnings-results__sort {

    min-width: 7rem;

}


.lotto-winnings-results__amount {

    display: block;

    font-size: 1rem;
    font-weight: 700;

    color:
        var(--text-primary);

}


.lotto-winnings-results__combinations {

    display: block;

    margin-top: 0.25rem;

    font-size: 0.75rem;

    color:
        var(--text-secondary);

}


/* Vincita totale */

.lotto-winnings-results__total {

    min-width: 8rem;

    font-size: 1.05rem;
    font-weight: 800;

    color:
        var(--primary-dark);

}


/* Riga alternata */

.lotto-winnings-results__table
tbody
tr:nth-child(even) {

    background-color:
        color-mix(
            in srgb,
            var(--surface-color) 97%,
            var(--text-primary) 3%
        );

}

.lotto-winnings-results__not-played {

    display: inline-block;

    font-size: 0.875rem;
    font-weight: 600;

    color:
        var(--text-secondary);

}

/* ============================================================
 * Contesto risultati
 * ============================================================ */

.lotto-winnings-results__context {

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(12rem, 1fr)
        );

    gap:
        var(--space-md);

    margin:
        0
        0
        var(--space-lg);

}

/* ============================================================
 * Risultati - Mobile
 * ============================================================ */

@media (max-width: 47.9375rem) {

    .lotto-winnings-results__table-wrapper {

        margin-inline:
            calc(-1 * var(--space-md));

        width:
            calc(
                100% +
                (2 * var(--space-md))
            );

        padding-inline:
            var(--space-md);

    }


    .lotto-winnings-results__table {

        min-width: 46rem;

    }

}

/* ============================================================
 * Selezione numeri giocata
 * ============================================================ */

.lotto-winnings-number-count {

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;

}


.lotto-winnings-number-count__label {

    margin-bottom:
        var(--space-xs);

    font-size:
        0.9375rem;

    font-weight:
        700;

    color:
        var(--text-secondary);

}


.lotto-winnings-number-count__value {

    display: flex;

    align-items: center;

    min-height:
        3rem;

    padding:
        0.7rem
        0.875rem;

    font-size:
        1.2rem;

    font-weight:
        700;

    background-color:
        var(--surface-color);

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-md);

}


/* Pannello numeri */

.lotto-winnings-numbers {

    width: 100%;

    padding:
        var(--space-md);

    background-color:
        var(--surface-color);

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-md);

}


.lotto-winnings-numbers__header {

    display: flex;

    flex-direction: column;

    gap:
        var(--space-xs);

    margin-bottom:
        var(--space-md);

}


.lotto-winnings-numbers__title {

    font-weight:
        700;

    color:
        var(--text-primary);

}


.lotto-winnings-numbers__counter {

    font-size:
        0.875rem;

    color:
        var(--text-secondary);

}

.lotto-winnings-numbers__summary {

    margin-top:
        var(--space-md);

    padding-top:
        var(--space-md);

    font-weight:
        700;

    line-height:
        1.6;

    text-align:
        center;

    color:
        var(--primary-dark);

    border-top:
        1px solid
        var(--border-color);

}

/* ============================================================
 * Campi automatici
 * ============================================================ */

.lotto-winnings-number-count__value,
.lotto-winnings-total__value {

    background-color:
        rgba(0, 0, 0, 0.025);

    border-color:
        color-mix(
            in srgb,
            var(--border-color) 75%,
            var(--text-secondary) 25%
        );

    cursor:
        default;

}


.lotto-winnings-number-count__label::after,
.lotto-winnings-total__label::after {

    content:
        "Automatico";

    display:
        inline-block;

    margin-left:
        0.5rem;

    padding:
        0.15rem
        0.4rem;

    font-size:
        0.6875rem;

    font-weight:
        600;

    line-height:
        1.2;

    color:
        var(--text-secondary);

    background-color:
        rgba(0, 0, 0, 0.04);

    border-radius:
        var(--radius-sm);

}

/* Tablet */

@media (min-width: 48rem) {

    .lotto-winnings-numbers__header {

        flex-direction: row;

        align-items: center;
        justify-content: space-between;

    }

}

/* ============================================================
 * Condivisione risultato
 * ============================================================ */

.lotto-winnings-results__share {

    display: flex;
    flex-direction: column;
    align-items: center;

    gap:
        var(--space-md);

    margin-top:
        2rem;

}


.lotto-winnings-results__share-fallback {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap:
        var(--space-sm);

}


.lotto-winnings-results__share-fallback[hidden] {

    display:
        none;

}