/* ============================================================
 * Pitagorix - Condivisione / Post social
 * Mobile first
 * ============================================================ */


/* ============================================================
 * Dialog
 * ============================================================ */

.social-post-dialog {

    width:
        min(
            calc(100% - 2rem),
            42rem
        );

    max-height:
        calc(100vh - 2rem);

    padding:
        0;

    border:
        0;

    border-radius:
        1rem;

    background:
        #ffffff;

    box-shadow:
        0 1rem 3rem
        rgba(
            0,
            0,
            0,
            0.22
        );

    overflow:
        hidden;

}


.social-post-dialog::backdrop {

    background:
        rgba(
            14,
            17,
            23,
            0.58
        );

}


/* ============================================================
 * Contenuto
 * ============================================================ */

.social-post-dialog__content {

    display:
        flex;

    flex-direction:
        column;

    max-height:
        calc(100vh - 2rem);

}


/* ============================================================
 * Header
 * ============================================================ */

.social-post-dialog__header {

    padding:
        1.25rem;

    border-bottom:
        1px solid
        #e5e7eb;

}


.social-post-dialog__title {

    margin:
        0;

    font-size:
        1.25rem;

    line-height:
        1.3;

}


.social-post-dialog__description {

    margin:
        0.5rem 0 0;

    color:
        #667085;

    font-size:
        0.9375rem;

    line-height:
        1.5;

}


/* ============================================================
 * Corpo
 * ============================================================ */

.social-post-dialog__body {

    padding:
        1.25rem;

    overflow-y:
        auto;

}


.social-post-dialog__label {

    display:
        block;

    margin-bottom:
        0.5rem;

    font-weight:
        600;

}


.social-post-dialog__textarea {

    display:
        block;

    width:
        100%;

    min-height:
        16rem;

    padding:
        0.875rem;

    border:
        1px solid
        #d0d5dd;

    border-radius:
        0.625rem;

    box-sizing:
        border-box;

    resize:
        vertical;

    font:
        inherit;

    line-height:
        1.5;

    background:
        #ffffff;

    color:
        inherit;

}


.social-post-dialog__textarea:focus {

    outline:
        2px solid
        #ff9819;

    outline-offset:
        2px;

}

/* ============================================================
 * Modalità condivisione
 * ============================================================ */

.social-post-dialog__modes {

    display:
        grid;

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

    gap:
        0.625rem;

    margin-top:
        1rem;

}


.social-post-dialog__modes[hidden] {

    display:
        none;

}


.social-post-dialog__mode {

    width:
        100%;

}


.social-post-dialog__mode.is-active {

    color:
        #ffffff;

    background-color:
        #ff9819;

    border-color:
        #ff9819;

}


.social-post-dialog__mode.is-active:hover {

    color:
        #ffffff;

    background-color:
        #ff9819;

    border-color:
        #ff9819;

}

/* ============================================================
 * Feedback
 * ============================================================ */

.social-post-dialog__feedback {

    min-height:
        1.5em;

    margin:
        0.75rem 0 0;

    color:
        #667085;

    font-size:
        0.875rem;

}


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

.social-post-dialog__actions {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.625rem;

    padding:
        1rem 1.25rem 1.25rem;

    border-top:
        1px solid
        #e5e7eb;

}


.social-post-dialog__actions .btn {

    width:
        100%;

}


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

@media (min-width: 48rem) {

    .social-post-dialog__header {

        padding:
            1.5rem;

    }


    .social-post-dialog__body {

        padding:
            1.5rem;

    }

.social-post-dialog__modes {

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

}

    .social-post-dialog__actions {

        display:
            grid;

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

        gap:
            0.75rem;

        padding:
            1rem 1.5rem 1.5rem;

    }

.social-post-dialog[data-mode="text"]
.social-post-dialog__actions {

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

}

    .social-post-dialog__actions .btn {

        width:
            100%;

        min-width:
            0;

        white-space:
            nowrap;

    }

}

/* ============================================================
 * Azioni di condivisione nei risultati
 * Mobile first
 * ============================================================ */

.lotto-winnings-results__share {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.75rem;

}


.share-actions__button {

    width:
        100%;

    max-width:
        18rem;

}


/* Desktop */

@media (min-width: 48rem) {

    .lotto-winnings-results__share {

        flex-direction:
            row;

        align-items:
            center;

    }


    .share-actions__button {

        width:
            14rem;

        max-width:
            none;

    }

}

/* ============================================================
 * Azioni condivise
 * Mobile first
 * ============================================================ */

.share-actions {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.75rem;

    margin-top:
        1.5rem;

}


@media (min-width: 48rem) {

    .share-actions {

        flex-direction:
            row;

    }

}

/* ============================================================
 * Preview card social
 * ============================================================ */

.social-post-dialog__preview {

    margin-bottom:
        1.25rem;

}


.social-post-card {

    padding:
        1.25rem;

    border:
        1px solid
        #e5e7eb;

    border-radius:
        1rem;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff7ed 100%
        );

    box-shadow:
        0 0.5rem 1.5rem
        rgba(
            15,
            23,
            42,
            0.08
        );

}


.social-post-card__brand {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.625rem;

    margin-bottom:
        1rem;

}

.social-post-card__logo {

    display:
        block;

    width:
        8rem;

    max-width:
        45%;

    height:
        auto;

}

.social-post-card__heading {

    text-align:
        center;

    margin-bottom:
        1rem;

}


.social-post-card__game {

    margin:
        0;

    font-size:
        1.125rem;

    font-weight:
        800;

    color:
        #0f172a;

}


.social-post-card__title {

    margin:
        0.25rem 0 0;

    font-size:
        0.95rem;

    font-weight:
        700;

    color:
        #475467;

}


.social-post-card__date {

    margin:
        0.25rem 0 0;

    font-size:
        0.95rem;

    color:
        #667085;

}


.social-post-card__numbers {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        0.625rem;

    margin-bottom:
        1rem;

}


.social-post-card__ball {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        2.5rem;

    height:
        2.5rem;

    border-radius:
        999px;

    background:
        #0f172a;

    color:
        #ffffff;

    font-weight:
        700;

    box-shadow:
        0 0.35rem 0.85rem
        rgba(
            15,
            23,
            42,
            0.18
        );

}


.social-post-card__specials {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        0.75rem;

    margin-bottom:
        1rem;

}


.social-post-card__special-item {

    min-width:
        7rem;

    padding:
        0.75rem
        0.875rem;

    border-radius:
        0.875rem;

    background:
        #ffffff;

    border:
        1px solid
        #e5e7eb;

    text-align:
        center;

}


.social-post-card__special-label {

    display:
        block;

    font-size:
        0.8125rem;

    font-weight:
        700;

    color:
        #667085;

}


.social-post-card__special-value {

    display:
        block;

    margin-top:
        0.25rem;

    font-size:
        1.125rem;

    font-weight:
        800;

    color:
        #0f172a;

}


.social-post-card__footer {

    text-align:
        center;

    font-size:
        0.875rem;

    color:
        #667085;

}

/* ============================================================
 * Preview immagine generata
 * ============================================================ */

.social-post-dialog__preview-loading,
.social-post-dialog__preview-error {

    padding:
        1rem;

    border:
        1px solid
        #e5e7eb;

    border-radius:
        1rem;

    text-align:
        center;

    color:
        #667085;

    background:
        #ffffff;

}


.social-post-dialog__preview-image {

    display:
        block;

    width:
        100%;

    height:
        auto;

    border:
        1px solid
        #e5e7eb;

    border-radius:
        1rem;

    background:
        #ffffff;

    box-shadow:
        0 0.5rem 1.5rem
        rgba(
            15,
            23,
            42,
            0.08
        );

}