/* ============================================================
   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 */

/* ==========================================================
   MF-MQ-CREATE-CANONICAL-HERO-V1-20260925

   Creează mini-ligă:
   - fără container exterior mare;
   - hero canonic MyFootball;
   - back link discret în casetă;
   - formularul rămâne card separat.
   ========================================================== */


/* ----------------------------------------------------------
   PAGINA
   ---------------------------------------------------------- */

.mql-create-page {
    padding-top:
        0 !important;
}


/* ----------------------------------------------------------
   HERO CANONIC

   Tipografia vine din hero / mq-page-hero.
   Forțăm doar centrarea cerută.
   ---------------------------------------------------------- */

.mql-create-page
.mql-create-hero {
    text-align:
        center;
}


.mql-create-page
.mql-create-hero .lead {
    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;
}


/* ----------------------------------------------------------
   ← MECI QUIZ

   Aceeași idee ca linkul din pagina mini-ligii,
   dar într-o casetă discretă.
   ---------------------------------------------------------- */

.mql-create-page
.mql-create-back {
    width:
        min(
            760px,
            calc(100% - 32px)
        );

    box-sizing:
        border-box;

    margin:
        0
        auto
        18px;

    padding:
        0;
}


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

    align-items:
        center;

    gap:
        7px;

    min-height:
        38px;

    box-sizing:
        border-box;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(
            198,
            43,
            47,
            .22
        );

    border-radius:
        999px;

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

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

    font-size:
        .82rem;

    font-weight:
        800;

    line-height:
        1;

    text-decoration:
        none;

    box-shadow:
        0
        4px
        12px
        rgba(
            45,
            35,
            28,
            .04
        );

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


.mql-create-page
.mql-create-back__arrow {
    position:
        relative;

    top:
        -1px;

    font-size:
        1rem;

    font-weight:
        700;

    line-height:
        1;
}


.mql-create-page
.mql-create-back a:hover {
    border-color:
        rgba(
            198,
            43,
            47,
            .38
        );

    background:
        #ffffff;

    transform:
        translateY(-1px);
}


/* ----------------------------------------------------------
   FORMULAR

   După dispariția shell-ului, îi păstrăm propriile
   margini laterale ca să nu atingă viewportul.
   ---------------------------------------------------------- */

.mql-create-page
.mql-flow-card,

.mql-create-page
.mql-login-card {
    width:
        min(
            760px,
            calc(100% - 32px)
        ) !important;

    box-sizing:
        border-box;
}


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

@media (max-width: 700px) {

    .mql-create-page {
        padding-top:
            0 !important;

        padding-bottom:
            46px;
    }


    .mql-create-page
    .mql-create-back,

    .mql-create-page
    .mql-flow-card,

    .mql-create-page
    .mql-login-card {
        width:
            calc(
                100% - 20px
            ) !important;
    }


    .mql-create-page
    .mql-create-back {
        margin-bottom:
            16px;
    }


    .mql-create-page
    .mql-create-back a {
        min-height:
            38px;

        padding:
            0
            12px;

        font-size:
            .8rem;
    }

}

/* MF-MQ-CREATE-CANONICAL-HERO-V1-20260925-END */

/* ==========================================================
   MF-MQ-CREATE-FORM-WARM-V1-20260925

   Încălzire vizuală formular Creează mini-ligă.
   Fără modificări de markup sau logică JS.
   ========================================================== */


/* ----------------------------------------------------------
   CARD PRINCIPAL
   ---------------------------------------------------------- */

.mql-create-page
.mql-flow-card {
    border:
        1px solid
        rgba(
            86,
            65,
            46,
            .13
        ) !important;

    background:
        #fffdf9 !important;

    box-shadow:
        0
        16px
        38px
        rgba(
            63,
            46,
            33,
            .075
        ) !important;
}


/* ----------------------------------------------------------
   NUMELE MINI-LIGII
   ---------------------------------------------------------- */

.mql-create-page
.mql-field {
    margin-top:
        0;
}


.mql-create-page
.mql-field > span,
.mql-create-page
.mql-choice-group legend {
    color:
        #302923;

    font-weight:
        900;
}


.mql-create-page
.mql-field input {
    min-height:
        50px;

    border:
        1px solid
        #ddd2c5;

    border-radius:
        13px;

    padding:
        11px
        14px;

    background:
        #fffaf3;

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


.mql-create-page
.mql-field input::placeholder {
    color:
        #9b8f83;
}


.mql-create-page
.mql-field input:hover {
    border-color:
        #cfc0b1;

    background:
        #ffffff;
}


.mql-create-page
.mql-field input:focus {
    outline:
        none;

    border-color:
        #c62b2f;

    background:
        #ffffff;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            198,
            43,
            47,
            .10
        );
}


/* ----------------------------------------------------------
   GRUPE
   ---------------------------------------------------------- */

.mql-create-page
.mql-choice-group {
    margin-top:
        25px;
}


.mql-create-page
.mql-choice-group legend {
    margin-bottom:
        10px;

    font-size:
        .9rem;
}


/* ----------------------------------------------------------
   CARDURI DE ALEGERE
   ---------------------------------------------------------- */

.mql-create-page
.mql-choice-card > span {
    position:
        relative;

    justify-content:
        center;

    min-height:
        96px;

    padding:
        16px
        44px
        16px
        16px;

    border:
        1px solid
        #e1d8ce;

    border-radius:
        15px;

    background:
        #fffaf4;

    box-shadow:
        0
        3px
        10px
        rgba(
            54,
            42,
            32,
            .025
        );

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


.mql-create-page
.mql-choice-card > span::after {
    content:
        "";

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    width:
        22px;

    height:
        22px;

    box-sizing:
        border-box;

    border:
        1px solid
        #d8ccc0;

    border-radius:
        50%;

    background:
        #ffffff;

    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}


.mql-create-page
.mql-choice-card:hover > span {
    transform:
        translateY(-1px);

    border-color:
        #d2c4b6;

    background:
        #ffffff;

    box-shadow:
        0
        7px
        18px
        rgba(
            54,
            42,
            32,
            .055
        );
}


.mql-create-page
.mql-choice-card strong {
    font-size:
        .92rem;

    letter-spacing:
        .01em;
}


.mql-create-page
.mql-choice-card small {
    margin-top:
        1px;

    color:
        #746a61;

    font-size:
        .81rem;

    line-height:
        1.42;
}


/* ----------------------------------------------------------
   PRIVATĂ — vișiniu
   ---------------------------------------------------------- */

.mql-create-page
.mql-choice-card
input[value="PRIVATE"]
+ span strong {
    color:
        #970326;
}


.mql-create-page
.mql-choice-card
input[value="PRIVATE"]:checked
+ span {
    border-color:
        rgba(
            151,
            3,
            38,
            .48
        );

    background:
        #fff5f7;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(
            151,
            3,
            38,
            .12
        ),
        0
        8px
        20px
        rgba(
            151,
            3,
            38,
            .07
        );
}


.mql-create-page
.mql-choice-card
input[value="PRIVATE"]:checked
+ span::after {
    content:
        "✓";

    display:
        grid;

    place-items:
        center;

    border-color:
        #970326;

    background:
        #970326;

    color:
        #ffffff;

    font-size:
        .75rem;

    font-weight:
        950;
}


/* ----------------------------------------------------------
   PUBLICĂ — portocaliu
   ---------------------------------------------------------- */

.mql-create-page
.mql-choice-card
input[value="PUBLIC"]
+ span strong {
    color:
        #d96f18;
}


.mql-create-page
.mql-choice-card
input[value="PUBLIC"]:checked
+ span {
    border-color:
        rgba(
            240,
            138,
            50,
            .62
        );

    background:
        #fff8ef;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(
            240,
            138,
            50,
            .13
        ),
        0
        8px
        20px
        rgba(
            240,
            138,
            50,
            .08
        );
}


.mql-create-page
.mql-choice-card
input[value="PUBLIC"]:checked
+ span::after {
    content:
        "✓";

    display:
        grid;

    place-items:
        center;

    border-color:
        #f08a32;

    background:
        #f08a32;

    color:
        #ffffff;

    font-size:
        .75rem;

    font-weight:
        950;
}


/* ----------------------------------------------------------
   CLASIC / INTENSIV — roșu MyFootball
   ---------------------------------------------------------- */

.mql-create-page
.mql-choice-card
input[value="ONE_PER_WEEK"]
+ span strong,

.mql-create-page
.mql-choice-card
input[value="ALL_PER_WEEK"]
+ span strong {
    color:
        #2d2926;
}


.mql-create-page
.mql-choice-card
input[value="ONE_PER_WEEK"]:checked
+ span,

.mql-create-page
.mql-choice-card
input[value="ALL_PER_WEEK"]:checked
+ span {
    border-color:
        rgba(
            198,
            43,
            47,
            .48
        );

    background:
        #fff6f4;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(
            198,
            43,
            47,
            .12
        ),
        0
        8px
        20px
        rgba(
            198,
            43,
            47,
            .07
        );
}


.mql-create-page
.mql-choice-card
input[value="ONE_PER_WEEK"]:checked
+ span::after,

.mql-create-page
.mql-choice-card
input[value="ALL_PER_WEEK"]:checked
+ span::after {
    content:
        "✓";

    display:
        grid;

    place-items:
        center;

    border-color:
        #c62b2f;

    background:
        #c62b2f;

    color:
        #ffffff;

    font-size:
        .75rem;

    font-weight:
        950;
}


/* ----------------------------------------------------------
   FOCUS TASTATURĂ
   ---------------------------------------------------------- */

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

    outline-offset:
        2px;
}


/* ----------------------------------------------------------
   BUTON CREATE
   ---------------------------------------------------------- */

.mql-create-page
.mql-flow-submit {
    min-height:
        46px;

    margin-top:
        27px;

    padding:
        11px
        19px;

    border-radius:
        12px;

    background:
        #ad2926;

    box-shadow:
        0
        7px
        16px
        rgba(
            157,
            43,
            36,
            .13
        );

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


.mql-create-page
.mql-flow-submit:hover:not(:disabled) {
    background:
        #9d221f;

    transform:
        translateY(-1px);

    box-shadow:
        0
        9px
        19px
        rgba(
            157,
            43,
            36,
            .18
        );
}


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

@media (max-width: 700px) {

    .mql-create-page
    .mql-flow-card {
        padding:
            21px
            16px !important;
    }


    .mql-create-page
    .mql-choice-group {
        margin-top:
            22px;
    }


    .mql-create-page
    .mql-choice-grid {
        gap:
            9px;
    }


    .mql-create-page
    .mql-choice-card > span {
        min-height:
            82px;

        padding:
            13px
            42px
            13px
            14px;
    }


    .mql-create-page
    .mql-choice-card > span::after {
        top:
            12px;

        right:
            12px;

        width:
            21px;

        height:
            21px;
    }


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

}

/* MF-MQ-CREATE-FORM-WARM-V1-20260925-END */

/* ==========================================================
   MF-MQ-CREATE-VISIBILITY-INFO-V1-20260925

   PRIVATĂ / PUBLICĂ:
   - număr jucători;
   - durata sezonului;
   - creștere minimă a cardurilor.
   ========================================================== */


.mql-create-page
.mql-choice-group--visibility
.mql-choice-card > span {
    min-height:
        112px;

    padding-top:
        12px;

    padding-bottom:
        12px;

    gap:
        3px;
}


/* ----------------------------------------------------------
   FACTS
   ---------------------------------------------------------- */

.mql-create-page
.mql-choice-facts {
    display:
        grid;

    gap:
        1px;

    margin-top:
        1px;
}


.mql-create-page
.mql-choice-fact {
    display:
        block;

    color:
        #554b43;

    font-size:
        .73rem;

    font-weight:
        650;

    line-height:
        1.3;
}


.mql-create-page
.mql-choice-fact b {
    color:
        #302923;

    font-weight:
        900;
}


/* descrierea finală rămâne mai discretă */

.mql-create-page
.mql-choice-group--visibility
.mql-choice-card small {
    margin-top:
        2px;

    color:
        #85786d;

    font-size:
        .75rem;

    line-height:
        1.3;
}


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

@media (max-width: 700px) {

    .mql-create-page
    .mql-choice-group--visibility
    .mql-choice-card > span {
        min-height:
            104px;

        padding-top:
            11px;

        padding-bottom:
            11px;
    }


    .mql-create-page
    .mql-choice-fact {
        font-size:
            .72rem;
    }

}

/* MF-MQ-CREATE-VISIBILITY-INFO-V1-20260925-END */

/* ==========================================================
   MF-MQ-JOIN-WARM-V1-20260925

   Intră într-o mini-ligă:
   - Back canonic MyFootball;
   - card privat mai cald;
   - input + CTA finisate;
   - empty state public compact.
   - JS / logică / tabel public neatinse.
   ========================================================== */


/* ----------------------------------------------------------
   BACK CANONIC
   ---------------------------------------------------------- */

.mql-join-page
> .mql-join-back {
    width:
        min(
            760px,
            calc(100% - 32px)
        );

    box-sizing:
        border-box;

    margin:
        0
        auto
        18px !important;

    padding:
        0;
}


.mql-join-page
> .mql-join-back a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        38px;

    box-sizing:
        border-box;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(
            198,
            43,
            47,
            .22
        );

    border-radius:
        999px;

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

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

    font-size:
        .82rem;

    font-weight:
        800;

    line-height:
        1;

    text-decoration:
        none;

    box-shadow:
        0
        4px
        12px
        rgba(
            45,
            35,
            28,
            .04
        );

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


.mql-join-page
.mql-join-back__arrow {
    position:
        relative;

    top:
        -1px;

    font-size:
        1rem;

    font-weight:
        700;

    line-height:
        1;
}


.mql-join-page
> .mql-join-back a:hover {
    border-color:
        rgba(
            198,
            43,
            47,
            .38
        );

    background:
        #ffffff;

    text-decoration:
        none;

    transform:
        translateY(-1px);
}


/* ----------------------------------------------------------
   CARD MINI-LIGĂ PRIVATĂ
   ---------------------------------------------------------- */

.mql-join-page
.mql-flow-join
> .mql-flow-card {
    border:
        1px solid
        rgba(
            86,
            65,
            46,
            .13
        );

    background:
        #fffdf9;

    box-shadow:
        0
        16px
        38px
        rgba(
            63,
            46,
            33,
            .075
        );
}


/* kicker */

.mql-join-page
.mql-flow-join
> .mql-flow-card
> .mql-kicker {
    color:
        #970326;
}


/* titlu */

.mql-join-page
.mql-flow-join
> .mql-flow-card
> h2 {
    color:
        #1d1916;
}


/* explicație */

.mql-join-page
.mql-flow-join
> .mql-flow-card
> p {
    color:
        #71665d;

    line-height:
        1.5;
}


/* ----------------------------------------------------------
   INPUT COD
   ---------------------------------------------------------- */

.mql-join-page
.mql-private-code-form
.mql-field > span {
    color:
        #302923;

    font-weight:
        900;
}


.mql-join-page
.mql-private-code-form
.mql-field input {
    min-height:
        50px;

    border:
        1px solid
        #ddd2c5;

    border-radius:
        13px;

    padding:
        11px
        14px;

    background:
        #fffaf3;

    color:
        #2d2722;

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


.mql-join-page
.mql-private-code-form
.mql-field input::placeholder {
    color:
        #9b8f83;
}


.mql-join-page
.mql-private-code-form
.mql-field input:hover {
    border-color:
        #cfc0b1;

    background:
        #ffffff;
}


.mql-join-page
.mql-private-code-form
.mql-field input:focus {
    outline:
        none;

    border-color:
        #c62b2f;

    background:
        #ffffff;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            198,
            43,
            47,
            .10
        );
}


/* ----------------------------------------------------------
   CTA COD
   ---------------------------------------------------------- */

.mql-join-page
.mql-private-code-form
.mql-button-primary {
    min-height:
        50px;

    padding:
        10px
        18px;

    border-radius:
        12px;

    background:
        #ad2926;

    box-shadow:
        0
        7px
        16px
        rgba(
            157,
            43,
            36,
            .13
        );

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


.mql-join-page
.mql-private-code-form
.mql-button-primary:hover:not(:disabled) {
    background:
        #9d221f;

    transform:
        translateY(-1px);

    box-shadow:
        0
        9px
        19px
        rgba(
            157,
            43,
            36,
            .18
        );
}


/* ----------------------------------------------------------
   SECȚIUNEA PUBLICĂ
   ---------------------------------------------------------- */

.mql-join-page
.mql-public-discovery {
    margin-top:
        50px;
}


.mql-join-page
.mql-flow-section-heading h2 {
    color:
        #181514;
}


.mql-join-page
.mql-flow-section-heading p {
    color:
        #776c63;
}


/* ----------------------------------------------------------
   EMPTY STATE

   Nu mai ocupă artificial toată lățimea de 1130px.
   ---------------------------------------------------------- */

.mql-join-page
.mql-public-discovery
.mql-empty {
    width:
        min(
            760px,
            100%
        );

    box-sizing:
        border-box;

    margin:
        0
        auto;

    padding:
        17px
        20px;

    border:
        1px solid
        #e4d9ce;

    border-radius:
        14px;

    background:
        #fffaf3;

    color:
        #71655b;

    text-align:
        center;

    box-shadow:
        0
        5px
        15px
        rgba(
            55,
            42,
            31,
            .035
        );
}


/* loading-ul folosește aceeași geometrie */

.mql-join-page
.mql-public-discovery
.mql-loading {
    width:
        min(
            760px,
            100%
        );

    box-sizing:
        border-box;

    margin:
        0
        auto;

    text-align:
        center;
}


/* ----------------------------------------------------------
   TABEL PUBLIC

   Păstrăm layoutul și JS-ul actual.
   Doar îl apropiem cromatic de restul paginii.
   ---------------------------------------------------------- */

.mql-join-page
.mql-public-table {
    border-color:
        #e1d8ce;

    background:
        #fffdf9;

    box-shadow:
        0
        10px
        26px
        rgba(
            63,
            46,
            33,
            .06
        );
}


.mql-join-page
.mql-public-table__row {
    background:
        #fffdf9;
}


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

@media (max-width: 700px) {

    .mql-join-page
    > .mql-join-back {
        width:
            calc(
                100% - 20px
            );

        margin-bottom:
            16px !important;
    }


    .mql-join-page
    > .mql-join-back a {
        min-height:
            38px;

        padding:
            0
            12px;

        font-size:
            .8rem;
    }


    .mql-join-page
    .mql-flow-join
    > .mql-flow-card {
        padding:
            21px
            16px;
    }


    .mql-join-page
    .mql-private-code-form {
        gap:
            10px;
    }


    .mql-join-page
    .mql-private-code-form
    .mql-button-primary {
        min-height:
            48px;
    }


    .mql-join-page
    .mql-public-discovery
    .mql-empty,

    .mql-join-page
    .mql-public-discovery
    .mql-loading {
        width:
            calc(
                100% - 20px
            );
    }

}

/* MF-MQ-JOIN-WARM-V1-20260925-END */

/* ==========================================================
   MF-MQ-PUBLIC-RESPONSIVE-V3-20260925

   Desktop:
   - tabel original;
   - join direct.

   Mobile:
   - card complet;
   - margini laterale;
   - join direct.
   ========================================================== */


/* NOTICE */

.mql-join-page
.mql-public-join-notice {
    width:
        min(
            760px,
            calc(100% - 32px)
        );

    box-sizing:
        border-box;

    margin:
        0
        auto
        16px;
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 701px) {

    .mql-join-page
    .mql-public-table {
        width:
            100% !important;

        margin:
            0 !important;

        overflow:
            hidden !important;

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

        border-radius:
            16px !important;

        background:
            #ffffff !important;

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


    .mql-join-page
    .mql-public-table__head {
        display:
            grid !important;
    }


    .mql-join-page
    .mql-public-table__body {
        display:
            block !important;
    }


    .mql-join-page
    .mql-public-responsive-row {
        display:
            grid !important;

        grid-template-columns:
            minmax(210px, 2fr)
            minmax(100px, .8fr)
            minmax(95px, .8fr)
            minmax(180px, 1.25fr)
            minmax(110px, .8fr) !important;

        align-items:
            center;

        gap:
            0 !important;

        min-height:
            64px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;
    }


    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell {
        display:
            block !important;
    }


    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell.is-action {
        text-align:
            right;
    }


    .mql-join-page
    .mql-public-mobile-card {
        display:
            none !important;
    }


    .mql-join-page
    .mql-public-responsive-row.is-joined {
        opacity:
            .55;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    /*
     * Cardul privat respiră față de display.
     */

    .mql-join-page
    .mql-flow-join
    > .mql-flow-card {
        width:
            calc(100% - 24px) !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        box-sizing:
            border-box;
    }


    /*
     * Containerul public are aceleași margini.
     */

    .mql-join-page
    .mql-public-table {
        width:
            calc(100% - 24px) !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        overflow:
            visible !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }


    .mql-join-page
    .mql-public-table__head {
        display:
            none !important;
    }


    .mql-join-page
    .mql-public-table__body {
        display:
            block !important;
    }


    .mql-join-page
    .mql-public-responsive-row {
        display:
            block !important;

        margin:
            0
            0
            12px !important;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }


    /*
     * Celulele desktop nu apar pe mobil.
     */

    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell {
        display:
            none !important;
    }


    /*
     * Cardul mobil.
     */

    .mql-join-page
    .mql-public-mobile-card {
        display:
            block !important;

        width:
            100% !important;

        min-width:
            0;

        box-sizing:
            border-box;

        margin:
            0 !important;

        padding:
            18px
            16px !important;

        border:
            1px solid
            #e1d8ce;

        border-radius:
            18px;

        background:
            #fffdf9;

        box-shadow:
            0
            12px
            28px
            rgba(
                63,
                46,
                33,
                .07
            );
    }


    .mql-join-page
    .mql-public-mobile-card
    > .mql-kicker {
        display:
            block;

        margin-bottom:
            7px;

        color:
            #c62b2f;
    }


    .mql-join-page
    .mql-public-mobile-card
    > h3 {
        margin:
            0
            0
            15px;

        color:
            #171412;

        font-size:
            1.14rem;

        font-weight:
            950;

        line-height:
            1.15;
    }


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

        gap:
            9px;

        margin-bottom:
            15px;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat.is-wide {
        grid-column:
            1 / -1;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__grid
    > div {
        min-width:
            0;

        padding:
            12px;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-join-card__button {
        width:
            100%;
    }


    .mql-join-page
    .mql-public-responsive-row.is-joined
    .mql-public-mobile-card {
        opacity:
            .55;

        transform:
            scale(.985);
    }

}

/* MF-MQ-PUBLIC-RESPONSIVE-V3-20260925-END */

/* ==========================================================
   MF-MQ-PUBLIC-MOBILE-COMPACT-V4-20260925

   Desktop: NEATINS.

   Mobil:
   Nume | Format | Jucători | Sezon | CTA
   ========================================================== */


/* informația importantă despre start */

.mql-join-page
.mql-public-start-note {
    color:
        #b52a2a !important;

    font-weight:
        800;

    line-height:
        1.4;
}


@media (max-width: 700px) {

    /* ------------------------------------------------------
       Text start
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-start-note {
        width:
            calc(100% - 32px);

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            .82rem;

        line-height:
            1.35;
    }


    /* ------------------------------------------------------
       Fiecare ligă = UN SINGUR RÂND
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-mobile-card {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(52px, auto)
            minmax(34px, auto)
            minmax(55px, auto)
            auto;

        align-items:
            center;

        gap:
            6px;

        min-height:
            54px;

        padding:
            8px
            9px !important;

        border-radius:
            13px !important;
    }


    /* kicker inutil pe lista compactă */

    .mql-join-page
    .mql-public-mobile-card
    > .mql-kicker {
        display:
            none !important;
    }


    /* ------------------------------------------------------
       NUME
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-mobile-card
    > h3 {
        grid-column:
            1;

        min-width:
            0;

        margin:
            0 !important;

        overflow:
            hidden;

        color:
            #171412;

        font-size:
            .88rem !important;

        font-weight:
            950;

        line-height:
            1.15;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    /* ------------------------------------------------------
       Flatten grid-ul intern:
       staturile devin coloane ale aceluiași rând.
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__grid {
        display:
            contents !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat {
        min-width:
            0;

        margin:
            0;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        text-align:
            center;
    }


    /* ascundem etichetele FORMAT / JUCĂTORI / SEZON */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > span {
        display:
            none !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > strong {
        display:
            block;

        overflow:
            hidden;

        margin:
            0;

        color:
            #27221e;

        font-size:
            .72rem;

        font-weight:
            900;

        line-height:
            1.1;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    /* FORMAT */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(1) {
        display:
            block !important;

        grid-column:
            2;
    }


    /* JUCĂTORI */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(2) {
        display:
            block !important;

        grid-column:
            3;
    }


    /* LOCURI LIBERE — scos */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(3) {
        display:
            none !important;
    }


    /* CREATOR — scos */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(4) {
        display:
            none !important;
    }


    /* SEZON */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(5) {
        display:
            block !important;

        grid-column:
            4;
    }


    /* ÎNCEPE — mutat sus, deci scos din fiecare rând */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(6) {
        display:
            none !important;
    }


    /* ------------------------------------------------------
       CTA
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-join-card__button {
        grid-column:
            5;

        width:
            auto !important;

        min-width:
            54px;

        min-height:
            34px;

        margin:
            0;

        padding:
            6px
            8px;

        border-radius:
            9px;

        font-size:
            .65rem;

        font-weight:
            900;

        line-height:
            1;
    }


    /* ------------------------------------------------------
       Separator vizual discret între ligi
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-responsive-row {
        margin-bottom:
            7px !important;
    }

}


/* telefoane foarte înguste */

@media (max-width: 390px) {

    .mql-join-page
    .mql-public-mobile-card {
        grid-template-columns:
            minmax(0, 1fr)
            48px
            30px
            50px
            auto;

        gap:
            4px;

        padding:
            7px
            7px !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    > h3 {
        font-size:
            .82rem !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > strong {
        font-size:
            .67rem;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-join-card__button {
        min-width:
            50px;

        padding:
            6px;

        font-size:
            .61rem;
    }

}

/* MF-MQ-PUBLIC-MOBILE-COMPACT-V4-20260925-END */


/* ==========================================================
   MF-MQ-PUBLIC-MOBILE-PRONO-V5-20260925

   MOBILE ONLY.

   Stil inspirat direct din lista Prono:
   - container comun alb;
   - border + radius 18px;
   - shadow discret;
   - fiecare ligă = rând compact ~86px;
   - accent vertical PUBLIC;
   - nume sus;
   - FORMAT / JUCĂTORI / SEZON jos;
   - CTA compact în dreapta.

   Desktop: NEATINS.
   ========================================================== */

@media (max-width: 700px) {

    /* ------------------------------------------------------
       CONTAINER COMUN — stil Prono
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-table {
        width:
            calc(100% - 32px) !important;

        max-width:
            680px;

        margin:
            0 auto !important;

        overflow:
            hidden !important;

        border:
            1px solid
            #d8d1c5 !important;

        border-radius:
            18px !important;

        background:
            #ffffff !important;

        box-shadow:
            0
            12px
            30px
            rgba(
                40,
                52,
                44,
                .08
            ) !important;
    }


    .mql-join-page
    .mql-public-table__body {
        display:
            block !important;

        width:
            100%;
    }


    /* ------------------------------------------------------
       RÂNDUL UNEI LIGI
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-responsive-row {
        position:
            relative;

        display:
            block !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;
    }


    .mql-join-page
    .mql-public-responsive-row
    + .mql-public-responsive-row {
        border-top:
            1px solid
            #ebe6de !important;
    }


    /* accent vertical PUBLIC */

    .mql-join-page
    .mql-public-responsive-row::before {
        position:
            absolute;

        z-index:
            2;

        top:
            0;

        bottom:
            0;

        left:
            0;

        width:
            6px;

        content:
            "";

        background:
            #f08a32;
    }


    /* ------------------------------------------------------
       CARDUL DEVINE RÂND, NU CARD SEPARAT
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-mobile-card {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(0, .9fr)
            minmax(0, .9fr)
            auto;

        grid-template-rows:
            auto
            auto;

        align-items:
            center;

        align-content:
            center;

        column-gap:
            10px;

        row-gap:
            5px;

        width:
            100% !important;

        min-height:
            86px;

        box-sizing:
            border-box;

        margin:
            0 !important;

        padding:
            10px
            10px
            10px
            16px !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }


    /* kicker-ul MINI-LIGĂ PUBLICĂ nu mai este necesar */

    .mql-join-page
    .mql-public-mobile-card
    > .mql-kicker {
        display:
            none !important;
    }


    /* ------------------------------------------------------
       NUMELE LIGII
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-mobile-card
    > h3 {
        grid-column:
            1 / 4;

        grid-row:
            1;

        align-self:
            end;

        min-width:
            0;

        margin:
            0 !important;

        overflow:
            hidden;

        color:
            #17251d;

        font-size:
            .92rem !important;

        font-weight:
            900;

        line-height:
            1.15;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    /* ------------------------------------------------------
       STATURI
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__grid {
        display:
            contents !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat {
        min-width:
            0;

        align-self:
            start;

        margin:
            0;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        text-align:
            left;
    }


    /* etichetele revin */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > span {
        display:
            block !important;

        margin:
            0
            0
            2px !important;

        overflow:
            hidden;

        color:
            #81827d;

        font-size:
            .55rem !important;

        font-weight:
            900;

        line-height:
            1.05;

        letter-spacing:
            .045em;

        text-overflow:
            ellipsis;

        text-transform:
            uppercase;

        white-space:
            nowrap;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > strong {
        display:
            block;

        margin:
            0;

        overflow:
            hidden;

        color:
            #27221e;

        font-size:
            .76rem;

        font-weight:
            900;

        line-height:
            1.1;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    /* FORMAT */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(1) {
        display:
            block !important;

        grid-column:
            1;

        grid-row:
            2;
    }


    /* JUCĂTORI */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(2) {
        display:
            block !important;

        grid-column:
            2;

        grid-row:
            2;
    }


    /* LOCURI LIBERE — redundant */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(3) {
        display:
            none !important;
    }


    /* CREATOR — nu este necesar în listă */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(4) {
        display:
            none !important;
    }


    /* SEZON */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(5) {
        display:
            block !important;

        grid-column:
            3;

        grid-row:
            2;
    }


    /* ÎNCEPE — informația este deja sub titlul secțiunii */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(6) {
        display:
            none !important;
    }


    /* ------------------------------------------------------
       CTA
       ------------------------------------------------------ */

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-join-card__button {
        grid-column:
            4;

        grid-row:
            1 / 3;

        align-self:
            center;

        width:
            auto !important;

        min-width:
            58px;

        min-height:
            36px;

        margin:
            0 !important;

        padding:
            7px
            9px;

        border-radius:
            10px;

        font-size:
            .66rem;

        font-weight:
            900;

        line-height:
            1;
    }


    /* stare după join */

    .mql-join-page
    .mql-public-responsive-row.is-joined {
        opacity:
            .58;
    }

}


/* telefoane foarte înguste */

@media (max-width: 420px) {

    .mql-join-page
    .mql-public-table {
        width:
            calc(100% - 24px) !important;
    }


    .mql-join-page
    .mql-public-mobile-card {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(0, .85fr)
            minmax(0, .85fr)
            auto;

        column-gap:
            7px;

        padding:
            9px
            8px
            9px
            14px !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    > h3 {
        font-size:
            .88rem !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > span {
        font-size:
            .51rem !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > strong {
        font-size:
            .71rem;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-join-card__button {
        min-width:
            54px;

        min-height:
            34px;

        padding:
            6px
            7px;

        font-size:
            .62rem;
    }

}

/* MF-MQ-PUBLIC-MOBILE-PRONO-V5-20260925-END */


/* ==========================================================
   MF-MQ-PUBLIC-MOBILE-PRONO-V6-20260925

   Mobile only.
   Ajustare fină:
   - numele ligii SUS, centrat;
   - FORMAT / JUCĂTORI / SEZON / CTA jos, aliniate la bază;
   - înălțime un pic redusă;
   - desktop NEATINS.
   ========================================================== */

@media (max-width: 700px) {

    .mql-join-page
    .mql-public-mobile-card {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 1fr)
            auto !important;

        grid-template-rows:
            auto
            auto !important;

        align-items:
            end !important;

        align-content:
            center !important;

        column-gap:
            10px !important;

        row-gap:
            4px !important;

        min-height:
            78px !important;

        padding:
            8px 10px 8px 16px !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    > h3 {
        grid-column:
            1 / -1 !important;

        grid-row:
            1 !important;

        justify-self:
            center !important;

        align-self:
            start !important;

        text-align:
            center !important;

        max-width:
            100%;

        font-size:
            .90rem !important;

        line-height:
            1.08 !important;

        margin:
            0 !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(1) {
        grid-column:
            1 !important;

        grid-row:
            2 !important;

        align-self:
            end !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(2) {
        grid-column:
            2 !important;

        grid-row:
            2 !important;

        align-self:
            end !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(5) {
        grid-column:
            3 !important;

        grid-row:
            2 !important;

        align-self:
            end !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat {
        align-self:
            end !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > span {
        margin:
            0 0 1px !important;

        font-size:
            .54rem !important;

        line-height:
            1.02 !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > strong {
        font-size:
            .76rem !important;

        line-height:
            1.05 !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-join-card__button {
        grid-column:
            4 !important;

        grid-row:
            2 !important;

        align-self:
            end !important;

        justify-self:
            end !important;

        min-width:
            60px !important;

        min-height:
            34px !important;

        padding:
            6px 10px !important;

        margin:
            0 !important;

        border-radius:
            10px !important;

        font-size:
            .66rem !important;

        line-height:
            1 !important;
    }

}

@media (max-width: 420px) {

    .mql-join-page
    .mql-public-table {
        width:
            calc(100% - 24px) !important;
    }

    .mql-join-page
    .mql-public-mobile-card {
        column-gap:
            8px !important;

        row-gap:
            3px !important;

        min-height:
            74px !important;

        padding:
            7px 8px 7px 14px !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    > h3 {
        font-size:
            .86rem !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > span {
        font-size:
            .50rem !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > strong {
        font-size:
            .70rem !important;
    }

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-join-card__button {
        min-width:
            56px !important;

        min-height:
            32px !important;

        padding:
            5px 8px !important;

        font-size:
            .62rem !important;
    }

}

/* MF-MQ-PUBLIC-MOBILE-PRONO-V6-20260925-END */

/* ==========================================================
   MF-MQ-PUBLIC-MOBILE-PRONO-V7-20260925

   Micro-retus mobile:
   - container mai scund;
   - linia de jos mai aproape de baza;
   - buton INTRA mai scund;
   - desktop neatins.
   ========================================================== */

@media (max-width: 700px) {

    .mql-join-page
    .mql-public-mobile-card {
        grid-template-rows:
            auto
            1fr !important;

        align-content:
            stretch !important;

        row-gap:
            2px !important;

        min-height:
            70px !important;

        padding:
            6px
            10px
            5px
            16px !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    > h3 {
        align-self:
            start !important;

        margin:
            0 !important;

        line-height:
            1.05 !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(1),

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(2),

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat:nth-child(5) {
        align-self:
            end !important;

        padding-bottom:
            0 !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > span {
        margin-bottom:
            1px !important;

        line-height:
            1 !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-preview__stat
    > strong {
        line-height:
            1 !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-join-card__button {
        align-self:
            end !important;

        min-height:
            30px !important;

        height:
            30px !important;

        min-width:
            58px !important;

        padding:
            0
            9px !important;

        border-radius:
            9px !important;

        font-size:
            .64rem !important;

        line-height:
            30px !important;
    }

}


@media (max-width: 420px) {

    .mql-join-page
    .mql-public-mobile-card {
        min-height:
            68px !important;

        padding:
            6px
            8px
            5px
            14px !important;

        row-gap:
            2px !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-join-card__button {
        min-height:
            29px !important;

        height:
            29px !important;

        min-width:
            54px !important;

        padding:
            0
            7px !important;

        font-size:
            .60rem !important;

        line-height:
            29px !important;
    }

}

/* MF-MQ-PUBLIC-MOBILE-PRONO-V7-20260925-END */

/* ==========================================================
   MF-MQ-PUBLIC-MOBILE-PRONO-V8-20260925

   Mobile only:
   - mic spatiu intre mini-ligi;
   - fiecare liga ramane card separat;
   - buton INTRA mai mic;
   - desktop neatins.
   ========================================================== */

@media (max-width: 700px) {

    /*
     * Containerul exterior nu mai lipeste
     * randurile unul de altul.
     */
    .mql-join-page
    .mql-public-table {
        overflow:
            visible !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }


    .mql-join-page
    .mql-public-table__body {
        display:
            grid !important;

        gap:
            8px !important;
    }


    /*
     * Fiecare liga = card separat.
     */
    .mql-join-page
    .mql-public-responsive-row {
        overflow:
            hidden;

        margin:
            0 !important;

        border:
            1px solid
            #d8d1c5 !important;

        border-radius:
            16px !important;

        background:
            #ffffff !important;

        box-shadow:
            0
            6px
            16px
            rgba(
                70,
                55,
                32,
                .055
            ) !important;
    }


    /*
     * Anulam separatorul vechi dintre randuri,
     * pentru ca acum avem gap real.
     */
    .mql-join-page
    .mql-public-responsive-row
    + .mql-public-responsive-row {
        border-top:
            1px solid
            #d8d1c5 !important;
    }


    /*
     * CTA mai mic.
     */
    .mql-join-page
    .mql-public-mobile-card
    .mql-public-join-card__button {
        min-width:
            50px !important;

        min-height:
            27px !important;

        height:
            27px !important;

        padding:
            0
            7px !important;

        border-radius:
            8px !important;

        font-size:
            .58rem !important;

        line-height:
            27px !important;
    }

}


@media (max-width: 420px) {

    .mql-join-page
    .mql-public-table__body {
        gap:
            7px !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-join-card__button {
        min-width:
            48px !important;

        min-height:
            26px !important;

        height:
            26px !important;

        padding:
            0
            6px !important;

        font-size:
            .56rem !important;

        line-height:
            26px !important;
    }

}

/* MF-MQ-PUBLIC-MOBILE-PRONO-V8-20260925-END */

/* ==========================================================
   MF-MQ-PUBLIC-LIST-V9-20260925

   MOBILE:
   MINI-LIGA: numele ligii, sus-stanga,
   stil tipografic Prono.

   DESKTOP:
   INCEPE -> SEZON;
   valorile centrate pe coloane.
   ========================================================== */


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 701px) {

    /*
     * Header:
     * numele ligii rămâne la stânga,
     * celelalte coloane sunt centrate.
     */

    .mql-join-page
    .mql-public-table__head
    > span {
        text-align:
            center;
    }


    .mql-join-page
    .mql-public-table__head
    > span:first-child {
        text-align:
            left;
    }


    /*
     * Valorile:
     * numele rămâne la stânga,
     * Format / Jucători / Sezon / CTA centrate.
     */

    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell {
        text-align:
            center !important;
    }


    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell.is-name {
        text-align:
            left !important;
    }


    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell.is-action {
        text-align:
            center !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    /*
     * Titlul nu mai este titlu centrat.
     * Devine linia Prono:
     * MINI-LIGĂ: Nume
     */

    .mql-join-page
    .mql-public-mobile-card
    > h3 {
        display:
            flex !important;

        grid-column:
            1 / -1 !important;

        grid-row:
            1 !important;

        align-items:
            baseline;

        justify-content:
            flex-start !important;

        justify-self:
            stretch !important;

        gap:
            6px;

        min-width:
            0;

        margin:
            0 !important;

        overflow:
            hidden;

        text-align:
            left !important;

        white-space:
            nowrap;
    }


    /*
     * Exact tratamentul tipografic
     * folosit de Prono pentru etichete:
     * 0.77rem / 850 / .055em / uppercase.
     */

    .mql-join-page
    .mql-public-mobile-title-label {
        flex:
            0 0 auto;

        color:
            #5f625d;

        font-size:
            .77rem;

        font-weight:
            850;

        line-height:
            1;

        letter-spacing:
            .055em;

        text-transform:
            uppercase;
    }


    .mql-join-page
    .mql-public-mobile-title-name {
        display:
            block;

        min-width:
            0;

        overflow:
            hidden;

        color:
            #17251d;

        font-size:
            .88rem;

        font-weight:
            900;

        line-height:
            1.08;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }

}


@media (max-width: 420px) {

    .mql-join-page
    .mql-public-mobile-card
    > h3 {
        gap:
            5px;
    }


    .mql-join-page
    .mql-public-mobile-title-label {
        font-size:
            .70rem;
    }


    .mql-join-page
    .mql-public-mobile-title-name {
        font-size:
            .84rem;
    }

}

/* MF-MQ-PUBLIC-LIST-V9-20260925-END */


/* ==========================================================
   MF-MQ-PUBLIC-DESKTOP-COLUMNS-V10-20260925

   Desktop only:
   - FORMAT centrat exact pe coloana lui;
   - JUCATORI centrat exact;
   - SEZON centrat exact;
   - numele ligii ramane stanga;
   - CTA neatins;
   - mobile neatins.
   ========================================================== */

@media (min-width: 701px) {

    /* header FORMAT / JUCATORI / SEZON */

    .mql-join-page
    .mql-public-table__head
    > span:nth-child(2),

    .mql-join-page
    .mql-public-table__head
    > span:nth-child(3),

    .mql-join-page
    .mql-public-table__head
    > span:nth-child(4) {
        width:
            100%;

        box-sizing:
            border-box;

        justify-self:
            stretch;

        text-align:
            center !important;
    }


    /* valorile FORMAT / JUCATORI / SEZON */

    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell:nth-child(2),

    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell:nth-child(3),

    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell:nth-child(4) {
        display:
            block;

        width:
            100%;

        box-sizing:
            border-box;

        justify-self:
            stretch !important;

        text-align:
            center !important;
    }

}

/* MF-MQ-PUBLIC-DESKTOP-COLUMNS-V10-20260925-END */



/* ==========================================================
   MF-MQ-PUBLIC-DESKTOP-GRID-V11-20260925

   Desktop only.
   Headerul si randurile folosesc EXACT aceeasi grila:
   MINI-LIGA | FORMAT | JUCATORI | SEZON | CTA
   Mobil neatins.
   ========================================================== */

@media (min-width: 701px) {

    .mql-join-page
    .mql-public-table__head,

    .mql-join-page
    .mql-public-responsive-row {
        grid-template-columns:
            minmax(210px, 2fr)
            minmax(100px, .8fr)
            minmax(95px, .8fr)
            minmax(110px, .9fr)
            minmax(110px, .8fr) !important;

        column-gap:
            0 !important;
    }


    /* MINI-LIGA ramane la stanga */

    .mql-join-page
    .mql-public-table__head
    > span:first-child,

    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell:first-child {
        text-align:
            left !important;
    }


    /* FORMAT / JUCATORI / SEZON — aceeasi axa */

    .mql-join-page
    .mql-public-table__head
    > span:nth-child(2),

    .mql-join-page
    .mql-public-table__head
    > span:nth-child(3),

    .mql-join-page
    .mql-public-table__head
    > span:nth-child(4),

    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell:nth-child(2),

    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell:nth-child(3),

    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell:nth-child(4) {
        width:
            100%;

        box-sizing:
            border-box;

        justify-self:
            stretch !important;

        text-align:
            center !important;
    }


    /* CTA ramane centrat in ultima coloana */

    .mql-join-page
    .mql-public-responsive-row
    > .mql-public-table__cell.is-action {
        width:
            100%;

        justify-self:
            stretch !important;

        text-align:
            center !important;
    }
}

/* MF-MQ-PUBLIC-DESKTOP-GRID-V11-20260925-END */


/* ==========================================================
   MF-MQ-PUBLIC-MOBILE-TITLE-V12-20260925

   MOBILE ONLY:
   - MINI-LIGA mai vizibil;
   - numele ligii clar mai mare;
   - restul cardului neatins;
   - desktop neatins.
   ========================================================== */

@media (max-width: 700px) {

    .mql-join-page
    .mql-public-mobile-card
    > h3 {
        gap:
            7px !important;

        line-height:
            1.12 !important;
    }


    .mql-join-page
    .mql-public-mobile-title-label {
        font-size:
            .84rem !important;

        font-weight:
            900 !important;

        line-height:
            1 !important;

        letter-spacing:
            .05em !important;
    }


    .mql-join-page
    .mql-public-mobile-title-name {
        font-size:
            1.05rem !important;

        font-weight:
            950 !important;

        line-height:
            1.08 !important;
    }

}


@media (max-width: 420px) {

    .mql-join-page
    .mql-public-mobile-title-label {
        font-size:
            .80rem !important;
    }


    .mql-join-page
    .mql-public-mobile-title-name {
        font-size:
            1rem !important;
    }

}

/* MF-MQ-PUBLIC-MOBILE-TITLE-V12-20260925-END */


/* ==========================================================
   MF-MQ-PUBLIC-MOBILE-TITLE-RED-V13-20260925

   MOBILE ONLY:
   numele mini-ligii folosește același roșu
   ca subtitlul "Liga începe..."
   ========================================================== */

@media (max-width: 700px) {

    .mql-join-page
    .mql-public-mobile-title-name {
        color:
            #b52a2a !important;
    }

}

/* MF-MQ-PUBLIC-MOBILE-TITLE-RED-V13-20260925-END */


/* ==========================================================
   MF-MQ-PUBLIC-MOBILE-BLACK-ACCENT-V15-20260925

   Mobile only:
   accentul vertical din stanga devine negru.
   ========================================================== */

@media (max-width: 700px) {

    .mql-join-page
    .mql-public-responsive-row::before {
        background:
            #111111 !important;
    }

}

/* MF-MQ-PUBLIC-MOBILE-BLACK-ACCENT-V15-20260925-END */



/* ==========================================================
   MF-MQ-PUBLIC-PAGINATION-V1-20260927
   ========================================================== */

.mql-public-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;

    width: 100%;

    margin:
        22px
        auto
        0;
}

.mql-public-pagination[hidden] {
    display: none !important;
}

.mql-public-pagination__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;

    padding:
        0
        10px;

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

    border-radius: 10px;

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

    color: #111;

    font: inherit;
    font-size: .86rem;
    font-weight: 850;
    line-height: 1;

    cursor: pointer;
}

.mql-public-pagination__button.is-current {
    border-color: #111;
    background: #111;
    color: #fff;
    cursor: default;
}

.mql-public-pagination__button:disabled {
    opacity: .34;
    cursor: default;
}

.mql-public-pagination__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 24px;
    height: 38px;

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

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

@media (max-width: 700px) {

    .mql-public-pagination {
        gap: 5px;
        margin-top: 18px;
    }

    .mql-public-pagination__button {
        min-width: 34px;
        height: 34px;

        padding:
            0
            8px;

        border-radius: 9px;

        font-size: .80rem;
    }

    .mql-public-pagination__dots {
        min-width: 18px;
        height: 34px;
    }
}

/* MF-MQ-PUBLIC-PAGINATION-V1-20260927-END */


/* MF-MQ-PUBLIC-NOTICE-760-V2-20260927
   Notice-ul de succes pentru join public:
   max 760px, centrat.
*/

/* ==========================================================
   MF-MQ-PUBLIC-FORMAT-HELP-V1-20261001:START

   CLASIC / INTENSIV:
   - desktop: hover + keyboard focus;
   - mobil: tap;
   - tooltip flotant ca să nu fie tăiat de cardurile compacte.
   ========================================================== */


.mql-join-page
.mql-public-format-help {
    cursor:
        help;

    text-decoration-line:
        underline;

    text-decoration-style:
        dotted;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;

    text-decoration-color:
        rgba(
            181,
            42,
            42,
            .52
        );

    transition:
        color .15s ease,
        background .15s ease,
        text-decoration-color .15s ease;
}


.mql-join-page
.mql-public-format-help:hover,
.mql-join-page
.mql-public-format-help:focus-visible,
.mql-join-page
.mql-public-format-help.is-format-help-active {
    color:
        #a9242b;

    text-decoration-color:
        #a9242b;
}


.mql-join-page
.mql-public-format-help:focus-visible {
    outline:
        2px solid
        rgba(
            198,
            43,
            47,
            .28
        );

    outline-offset:
        3px;

    border-radius:
        6px;
}


.mql-public-format-tooltip {
    position:
        fixed;

    z-index:
        10050;

    box-sizing:
        border-box;

    width:
        max-content;

    max-width:
        min(
            300px,
            calc(
                100vw - 24px
            )
        );

    padding:
        10px
        12px;

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

    border-radius:
        11px;

    background:
        #25211f;

    color:
        #ffffff;

    box-shadow:
        0
        12px
        30px
        rgba(
            17,
            14,
            12,
            .24
        );

    font-size:
        .78rem;

    font-weight:
        750;

    line-height:
        1.42;

    text-align:
        left;

    pointer-events:
        none;
}


.mql-public-format-tooltip[hidden] {
    display:
        none !important;
}


@media (max-width: 700px) {

    .mql-public-format-tooltip {
        max-width:
            min(
                270px,
                calc(
                    100vw - 24px
                )
            );

        padding:
            9px
            11px;

        border-radius:
            10px;

        font-size:
            .74rem;

        line-height:
            1.38;
    }


    .mql-join-page
    .mql-public-format-help {
        text-underline-offset:
            2px;
    }

}


/* MF-MQ-PUBLIC-FORMAT-HELP-V1-20261001:END */

/* ==========================================================
   MF-MQ-PUBLIC-FORMAT-AFFORDANCE-V2-20261001:START

   CLASIC / INTENSIV devin evident interactive:
   - chip discret;
   - icon "i";
   - hover desktop;
   - indicator permanent mobil;
   - logica tooltipului V1 rămâne neatinsă.
   ========================================================== */


/* Eliminăm underline-ul V1 — chipul devine affordance-ul */

.mql-join-page
.mql-public-format-help {
    text-decoration:
        none !important;
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 701px) {

    .mql-join-page
    .mql-public-table__cell.mql-public-format-help {
        position:
            relative;

        justify-self:
            center;

        align-self:
            center;

        width:
            max-content;

        max-width:
            calc(100% - 8px);

        box-sizing:
            border-box;

        padding:
            6px
            31px
            6px
            10px;

        border:
            1px solid
            rgba(
                181,
                42,
                42,
                .24
            );

        border-radius:
            999px;

        background:
            rgba(
                181,
                42,
                42,
                .055
            );

        color:
            #27221e;

        box-shadow:
            0
            2px
            8px
            rgba(
                60,
                40,
                35,
                .045
            );

        cursor:
            help;

        transition:
            transform .15s ease,
            background .15s ease,
            border-color .15s ease,
            color .15s ease,
            box-shadow .15s ease;
    }


    .mql-join-page
    .mql-public-table__cell.mql-public-format-help::after {
        position:
            absolute;

        top:
            50%;

        right:
            8px;

        width:
            16px;

        height:
            16px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        transform:
            translateY(-50%);

        border:
            1px solid
            rgba(
                181,
                42,
                42,
                .44
            );

        border-radius:
            50%;

        background:
            #ffffff;

        color:
            #b52a2a;

        content:
            "i";

        font-family:
            Arial,
            sans-serif;

        font-size:
            10px;

        font-weight:
            900;

        line-height:
            1;

        pointer-events:
            none;
    }


    .mql-join-page
    .mql-public-table__cell.mql-public-format-help:hover,
    .mql-join-page
    .mql-public-table__cell.mql-public-format-help:focus-visible,
    .mql-join-page
    .mql-public-table__cell.mql-public-format-help.is-format-help-active {
        transform:
            translateY(-1px);

        border-color:
            rgba(
                181,
                42,
                42,
                .46
            );

        background:
            #fff1ef;

        color:
            #a9242b;

        box-shadow:
            0
            5px
            13px
            rgba(
                112,
                47,
                42,
                .10
            );
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .mql-join-page
    .mql-public-mobile-card
    .mql-public-format-help {
        position:
            relative;

        cursor:
            pointer;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-format-help
    > strong {
        position:
            relative;

        display:
            inline-flex !important;

        align-items:
            center;

        justify-content:
            center;

        box-sizing:
            border-box;

        max-width:
            100%;

        overflow:
            visible !important;

        padding:
            4px
            23px
            4px
            8px !important;

        border:
            1px solid
            rgba(
                181,
                42,
                42,
                .28
            );

        border-radius:
            999px;

        background:
            #fff3f1;

        color:
            #7f2427 !important;

        box-shadow:
            0
            2px
            6px
            rgba(
                80,
                45,
                40,
                .05
            );

        text-overflow:
            clip !important;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-format-help
    > strong::after {
        position:
            absolute;

        top:
            50%;

        right:
            5px;

        width:
            14px;

        height:
            14px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        transform:
            translateY(-50%);

        border:
            1px solid
            rgba(
                181,
                42,
                42,
                .45
            );

        border-radius:
            50%;

        background:
            #ffffff;

        color:
            #b52a2a;

        content:
            "i";

        font-family:
            Arial,
            sans-serif;

        font-size:
            9px;

        font-weight:
            900;

        line-height:
            1;

        pointer-events:
            none;
    }


    .mql-join-page
    .mql-public-mobile-card
    .mql-public-format-help.is-format-help-active
    > strong {
        border-color:
            rgba(
                181,
                42,
                42,
                .52
            );

        background:
            #ffecea;

        color:
            #a9242b !important;
    }

}


/* MF-MQ-PUBLIC-FORMAT-AFFORDANCE-V2-20261001:END */


/* MF-MQ-STEP12D-PREVIEW-NAV
   Navigare aliniata cu cardul numai pentru preview.
*/
.mql-detail-main.mql-detail-preview > .mql-subnav {
    width: min(860px, 100%) !important;
    box-sizing: border-box;
    margin: 0 auto 18px !important;
}


/* MF-MQ-STEP14-CENTER-FONTS-LIVE-V2 */
/* Numai statusurile din Etape si rezultate, desktop */
@media (min-width: 1025px) {
  .mql-detail-main .mql-intensive-match-center__state,
  .mql-detail-main .mql-fixture-state {
    font-size: 17px !important;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .mql-detail-main .mql-wait-goals {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .mql-detail-main .mql-wait-goals strong {
    font-size: 17px !important;
    font-weight: 700;
    line-height: 1.15;
  }

  .mql-detail-main .mql-wait-goals small {
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.15;
  }

  .mql-detail-main
  .mql-intensive-match-center__state.is-final,
  .mql-detail-main .mql-fixture-state.is-final {
    font-size: 14px !important;
  }
}
/* END STEP14 CENTER FONTS LIVE V2 */