/* ============================================================
   MECI QUIZ MINI-LIGI FLOW V3
   ============================================================ */

.mql-flow-main {
    width: 100%;
}

.mql-flow-card,
.mql-public-preview {
    width: min(760px, 100%);
    box-sizing: border-box;
    margin: 0 auto 42px;
    padding: clamp(22px, 4vw, 34px);

    border: 1px solid rgba(17, 17, 17, .11);
    border-radius: 18px;

    background: rgba(255, 255, 255, .82);

    box-shadow:
        0 9px 26px
        rgba(17, 17, 17, .065);
}

.mql-flow-card > h2,
.mql-public-preview > h2 {
    margin:
        7px
        0
        9px;
}

.mql-choice-group {
    margin:
        27px
        0
        0;

    padding: 0;

    border: 0;
}

.mql-choice-group legend {
    margin-bottom: 11px;

    color: #222;

    font-size: .88rem;
    font-weight: 900;
}

.mql-choice-grid {
    display: grid;

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

    gap: 12px;
}

.mql-choice-card {
    position: relative;

    display: block;

    cursor: pointer;
}

.mql-choice-card input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.mql-choice-card > span {
    display: flex;

    flex-direction: column;

    gap: 5px;

    min-height: 92px;

    box-sizing: border-box;

    padding:
        17px
        18px;

    border:
        1px solid
        rgba(17, 17, 17, .13);

    border-radius: 14px;

    background: #fff;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

.mql-choice-card strong {
    color: #111;

    font-size: .9rem;
    font-weight: 950;
}

.mql-choice-card small {
    color:
        rgba(17, 17, 17, .62);

    font-size: .8rem;
    line-height: 1.4;
}

.mql-choice-card input:checked + span {
    border-color:
        #c62b2f;

    box-shadow:
        inset 0 0 0 1px #c62b2f,
        0 7px 17px rgba(198, 43, 47, .09);
}

.mql-choice-card input:focus-visible + span {
    outline:
        3px solid
        rgba(198, 43, 47, .18);

    outline-offset:
        2px;
}

.mql-flow-submit {
    margin-top: 26px;
}

.mql-flow-join {
    width: min(1130px, 100%);
    margin: 0 auto;
}

.mql-private-code-form {
    display: grid;

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

    align-items: end;

    gap: 12px;

    margin-top: 20px;
}

.mql-private-code-form
.mql-field {
    margin: 0;
}

.mql-public-discovery {
    width: 100%;

    margin:
        52px
        auto
        0;
}

.mql-flow-section-heading {
    margin-bottom:
        17px;

    text-align:
        center;
}

.mql-flow-section-heading h2 {
    margin:
        0
        0
        7px;

    color: #111;

    font-size:
        clamp(
            1.35rem,
            2.5vw,
            1.8rem
        );

    font-weight: 900;
}

.mql-flow-section-heading p {
    margin: 0;

    color:
        rgba(17, 17, 17, .63);
}

.mql-public-table {
    overflow: hidden;

    border:
        1px solid
        rgba(17, 17, 17, .10);

    border-radius:
        16px;

    background:
        #fff;

    box-shadow:
        0 8px 22px
        rgba(17, 17, 17, .055);
}

.mql-public-table__head,
.mql-public-table__row {
    display: grid;

    grid-template-columns:
        minmax(210px, 2fr)
        minmax(100px, .8fr)
        minmax(95px, .8fr)
        minmax(110px, .9fr)
        minmax(110px, .8fr);

    align-items: center;
}

.mql-public-table__head {
    min-height: 46px;

    padding:
        0
        16px;

    background:
        #1e1b1a;

    color: #fff;

    font-size: .67rem;
    font-weight: 900;

    letter-spacing: .055em;
}

.mql-public-table__row {
    min-height: 67px;

    padding:
        0
        16px;

    border-top:
        1px solid
        rgba(17, 17, 17, .075);
}

.mql-public-table__row:first-child {
    border-top: 0;
}

.mql-public-table__cell {
    min-width: 0;

    padding:
        12px
        9px;

    color:
        #24201e;

    font-size:
        .86rem;

    font-weight:
        750;
}

.mql-public-table__cell.is-name {
    color: #111;

    font-size:
        .93rem;

    font-weight:
        900;
}

.mql-public-table__cell.is-action {
    text-align:
        right;
}

.mql-public-table__cell.is-action
.mql-button {
    min-height:
        38px;

    padding:
        8px
        13px;

    font-size:
        .75rem;
}

.mql-public-preview__intro {
    margin:
        0
        0
        22px;

    color:
        rgba(17, 17, 17, .64);
}

.mql-public-preview__grid {
    display: grid;

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

    gap: 10px;

    margin-bottom: 22px;
}

.mql-public-preview__grid > div {
    padding:
        14px
        15px;

    border:
        1px solid
        rgba(17, 17, 17, .09);

    border-radius:
        12px;

    background:
        rgba(17, 17, 17, .025);
}

.mql-public-preview__grid span,
.mql-public-preview__grid strong {
    display: block;
}

.mql-public-preview__grid span {
    margin-bottom: 4px;

    color:
        rgba(17, 17, 17, .53);

    font-size:
        .7rem;

    font-weight:
        850;

    text-transform:
        uppercase;
}

.mql-public-preview__grid strong {
    color: #111;

    font-size:
        .94rem;

    font-weight:
        900;
}


@media (max-width: 700px) {

    .mql-choice-grid {
        grid-template-columns:
            1fr;
    }

    .mql-private-code-form {
        grid-template-columns:
            1fr;
    }

    .mql-private-code-form
    .mql-button {
        width: 100%;
    }

    .mql-public-table {
        overflow: visible;

        border: 0;

        background:
            transparent;

        box-shadow:
            none;
    }

    .mql-public-table__head {
        display: none;
    }

    .mql-public-table__row {
        display: grid;

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

        gap:
            12px
            14px;

        min-height: 0;

        margin-bottom:
            10px;

        padding:
            15px;

        border:
            1px solid
            rgba(17, 17, 17, .10);

        border-radius:
            14px;

        background:
            #fff;
    }

    .mql-public-table__cell {
        padding: 0;
    }

    .mql-public-table__cell::before {
        content:
            attr(data-label);

        display: block;

        margin-bottom:
            4px;

        color:
            rgba(17, 17, 17, .48);

        font-size:
            .62rem;

        font-weight:
            900;

        text-transform:
            uppercase;
    }

    .mql-public-table__cell.is-name,
    .mql-public-table__cell.is-action {
        grid-column:
            1 / -1;
    }

    .mql-public-table__cell.is-name::before {
        display: none;
    }

    .mql-public-table__cell.is-action {
        padding-top:
            3px;
    }

    .mql-public-table__cell.is-action
    .mql-button {
        width: 100%;
    }

    .mql-public-preview__grid {
        grid-template-columns:
            1fr
            1fr;
    }
}


/* ==========================================================
   MF-MQ-PUBLIC-PREVIEW-V3C
   ========================================================== */

.mql-public-preview {
    width: min(860px, 100%);
    margin: 0 auto 52px;
    padding: 30px;

    border: 1px solid rgba(28, 25, 23, .11);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(28, 25, 23, .07);
}

.mql-public-preview h2 {
    margin:
        8px
        0
        8px;

    color: #181514;

    font-size:
        clamp(
            1.65rem,
            3vw,
            2.25rem
        );

    line-height: 1.08;
}

.mql-public-preview__intro {
    margin:
        0
        0
        24px;

    color: #68615d;
}

.mql-public-preview__grid {
    display: grid;

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

    gap: 10px;

    margin-bottom: 24px;
}

.mql-public-preview__stat {
    padding: 14px 12px;

    border: 1px solid #e7e0d7;
    border-radius: 13px;

    background: #faf7f2;
}

.mql-public-preview__stat span {
    display: block;

    margin-bottom: 5px;

    color: #8b817a;

    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .06em;
}

.mql-public-preview__stat strong {
    color: #1a1715;

    font-size: .95rem;
    font-weight: 900;
}

.mql-public-preview__join {
    min-width: 220px;
}

@media (max-width: 700px) {

    .mql-public-preview {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .mql-public-preview__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .mql-public-preview__join {
        width: 100%;
    }
}

/* MF-MQ-PUBLIC-PREVIEW-V3C-END */



/* ==========================================================
   MF-MQ-MINILIGI-FLOW-NAV-V3E
   ========================================================== */

.mql-flow-main
> .mql-subnav {
    display: block;

    width:
        min(
            1130px,
            calc(100% - 32px)
        );

    margin:
        0
        auto
        28px !important;

    padding: 0;

    box-sizing:
        border-box;
}


.mql-flow-main
> .mql-subnav a {
    display:
        inline-flex;

    align-items:
        center;

    color:
        var(
            --mq-red,
            #c62b2f
        );

    font-weight:
        850;

    text-decoration:
        none;
}


.mql-flow-main
> .mql-subnav a:hover {
    text-decoration:
        underline;

    text-underline-offset:
        3px;
}


@media (max-width: 700px) {

    .mql-flow-main
    > .mql-subnav {
        width:
            calc(
                100% - 28px
            );

        margin-bottom:
            22px !important;
    }
}

/* MF-MQ-MINILIGI-FLOW-NAV-V3E-END */



/* ==========================================================
   MF-MQ-CREATE-PRONO-SHELL-V1
   ========================================================== */

.mql-create-page {
    padding-top:
        clamp(
            34px,
            5vw,
            58px
        );

    padding-bottom:
        clamp(
            54px,
            7vw,
            88px
        );
}


/*
 * Containerul mare al paginii.
 * Aceeași idee vizuală ca mini-liga Prono:
 * tot conținutul aparține unei singure suprafețe.
 */
.mql-create-page
.mql-flow-shell {
    width:
        min(
            1105px,
            calc(100% - 32px)
        );

    margin:
        0
        auto;

    padding:
        clamp(
            28px,
            3.5vw,
            42px
        );

    box-sizing:
        border-box;

    border:
        1px solid
        #e4d7c1;

    border-radius:
        22px;

    background:
        rgba(
            255,
            250,
            241,
            .72
        );

    box-shadow:
        0
        14px
        34px
        rgba(
            61,
            51,
            39,
            .055
        );
}


/* ----------------------------------------------------------
   ÎNAPOI LA MECI QUIZ
   ---------------------------------------------------------- */

.mql-create-page
.mql-flow-shell__back {
    width: 100%;

    margin:
        0
        0
        25px;

    padding: 0;
}


.mql-create-page
.mql-flow-shell__back a {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        43px;

    padding:
        0
        18px;

    box-sizing:
        border-box;

    border:
        1px solid
        #dfd3c2;

    border-radius:
        999px;

    color:
        #181513;

    background:
        rgba(
            255,
            255,
            255,
            .52
        );

    box-shadow:
        0
        3px
        9px
        rgba(
            45,
            38,
            31,
            .05
        );

    font-size:
        .86rem;

    font-weight:
        850;

    text-decoration:
        none;

    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        transform 140ms ease;
}


.mql-create-page
.mql-flow-shell__back a:hover {
    border-color:
        #cbbba4;

    background:
        #ffffff;

    transform:
        translateY(-1px);
}


/* ----------------------------------------------------------
   TITLU
   ---------------------------------------------------------- */

.mql-create-page
.mql-flow-shell__hero {
    width:
        min(
            760px,
            100%
        );

    margin:
        2px
        auto
        34px;

    text-align:
        center;
}


.mql-create-page
.mql-flow-shell__hero .eyebrow {
    margin:
        0
        0
        11px;

    color:
        var(
            --mq-red,
            #c62b2f
        );

    font-size:
        .71rem;

    font-weight:
        900;

    letter-spacing:
        .22em;
}


.mql-create-page
.mql-flow-shell__hero h1 {
    margin:
        0;

    color:
        #111318;

    font-size:
        clamp(
            2rem,
            4.2vw,
            3.25rem
        );

    font-weight:
        950;

    line-height:
        1.02;

    letter-spacing:
        -.035em;
}


.mql-create-page
.mql-flow-shell__hero .lead {
    margin:
        17px
        0
        0;

    color:
        #3e4651;

    font-size:
        clamp(
            1rem,
            1.8vw,
            1.18rem
        );

    font-weight:
        700;

    line-height:
        1.45;
}


/* ----------------------------------------------------------
   FORMULARUL DIN INTERIOR
   ---------------------------------------------------------- */

.mql-create-page
.mql-flow-card {
    width:
        min(
            760px,
            100%
        );

    margin:
        0
        auto;

    padding:
        clamp(
            25px,
            3.5vw,
            34px
        );

    border:
        1px solid
        #e4dfd7;

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0
        9px
        26px
        rgba(
            24,
            22,
            20,
            .055
        );
}


/*
 * Neutralizăm vechiul subnav.
 * Pe pagina Creează nu mai există linkul roșu
 * plutitor din stânga.
 */
.mql-create-page
> .mql-subnav {
    display:
        none !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .mql-create-page {
        padding-top:
            22px;

        padding-bottom:
            46px;
    }


    .mql-create-page
    .mql-flow-shell {
        width:
            calc(
                100% - 20px
            );

        padding:
            18px
            14px
            22px;

        border-radius:
            17px;
    }


    .mql-create-page
    .mql-flow-shell__back {
        margin-bottom:
            22px;
    }


    .mql-create-page
    .mql-flow-shell__back a {
        min-height:
            40px;

        padding:
            0
            15px;

        font-size:
            .8rem;
    }


    .mql-create-page
    .mql-flow-shell__hero {
        margin-bottom:
            27px;
    }


    .mql-create-page
    .mql-flow-shell__hero h1 {
        font-size:
            clamp(
                2rem,
                10vw,
                2.55rem
            );
    }


    .mql-create-page
    .mql-flow-card {
        padding:
            20px
            16px;

        border-radius:
            15px;
    }
}

/* MF-MQ-CREATE-PRONO-SHELL-V1-END */