/*
|--------------------------------------------------------------------------
| eBettingTips App-Style Website Betslip
|--------------------------------------------------------------------------
*/

.ebt-app-slip{
    --ebt-navy:#061b31;
    --ebt-green:#0d604f;
    --ebt-line:#d9e0e5;
    --ebt-text:#151b26;
    --ebt-muted:#6d747b;

    overflow:hidden;
    width:100%;
    margin:0 0 22px;

    border:
        1px solid
        #c8d3d9;

    border-radius:
        28px;

    background:
        #ffffff;

    box-shadow:
        0 7px 18px
        rgba(15,23,42,.08);
}

.ebt-app-slip__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    min-height:112px;
    padding:
        21px
        26px;

    background:
        var(--ebt-navy);

    color:#ffffff;
}

.ebt-app-slip__head strong{
    display:block;

    font-size:
        clamp(
            22px,
            3vw,
            29px
        );

    font-weight:900;
    letter-spacing:-.02em;
}

.ebt-app-slip__head > div:first-child span{
    display:block;

    margin-top:14px;

    color:#dfe8ee;

    font-size:15px;
    font-weight:850;
    letter-spacing:.12em;
}

.ebt-app-slip__head-actions{
    display:flex;
    align-items:center;
    gap:22px;
}

.ebt-app-slip__status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:70px;
    min-height:59px;

    padding:
        9px
        13px;

    border-radius:
        10px;

    font-size:15px;
    font-weight:950;
}

.ebt-app-slip__status.is-won{
    background:#c9f7da;
    color:#11683d;
}

.ebt-app-slip__status.is-lost{
    background:#fee2e2;
    color:#b91c1c;
}

.ebt-app-slip__status.is-pending{
    background:#ffedd5;
    color:#b45309;
}

.ebt-app-slip__status.is-void{
    background:#e2e8f0;
    color:#475569;
}

.ebt-app-slip__info{
    color:#ffffff;
    font-size:30px;
    line-height:1;
}

.ebt-app-slip__meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    min-height:82px;

    padding:
        20px
        27px;

    border-bottom:
        1px solid
        var(--ebt-line);

    color:
        var(--ebt-muted);

    font-size:
        16px;
}

.ebt-app-slip__meta strong{
    color:#0b5143;
    font-weight:850;
}

.ebt-app-slip__selections{
    padding:
        0
        27px;
}

.ebt-app-slip__selection{
    display:grid;
    grid-template-columns:
        34px
        minmax(0,1fr);

    gap:15px;

    padding:
        30px
        0;

    border-bottom:
        1px solid
        var(--ebt-line);
}

.ebt-app-slip__selection:last-child{
    border-bottom:0;
}

.ebt-app-slip__number{
    padding-top:2px;

    color:#0c5d4f;

    font-size:17px;
    font-weight:900;
}

.ebt-app-slip__fixture{
    color:
        var(--ebt-text);

    font-size:
        clamp(
            18px,
            2.4vw,
            25px
        );

    font-weight:850;
    line-height:1.3;
}

.ebt-app-slip__subscribe{
    color:#0d6efd;
    text-decoration:none;
    font-weight:900;
}

.ebt-app-slip__pick-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-top:13px;
}

.ebt-app-slip__pick-row strong{
    color:#075948;

    font-size:
        clamp(
            16px,
            2vw,
            21px
        );

    font-weight:900;
}

.ebt-app-slip__pick-row span{
    color:#081426;

    font-size:
        clamp(
            20px,
            2.8vw,
            27px
        );

    font-weight:900;
}

.ebt-app-slip__selection-result{
    display:inline-flex;

    margin-top:18px;

    padding:
        11px
        13px;

    border-radius:
        9px;

    font-size:13px;
    font-weight:950;
}

.ebt-app-slip__selection-result.is-won{
    background:#d5fae2;
    color:#148044;
}

.ebt-app-slip__selection-result.is-lost{
    background:#fee2e2;
    color:#b91c1c;
}

.ebt-app-slip__selection-result.is-pending{
    background:#fff2d8;
    color:#b45309;
}

.ebt-app-slip__selection-result.is-void{
    background:#e2e8f0;
    color:#475569;
}

.ebt-app-slip__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    min-height:128px;

    padding:
        22px
        27px;

    background:
        #e9faf4;
}

.ebt-app-slip__footer > div span,
.ebt-app-slip__footer > div strong{
    display:block;
}

.ebt-app-slip__footer > div span{
    margin-bottom:11px;

    color:#355f57;

    font-size:16px;
}

.ebt-app-slip__footer > div strong{
    color:#0f5e4e;

    font-size:21px;
    font-weight:950;
}

.ebt-app-slip__total{
    color:#045345;

    font-size:
        clamp(
            31px,
            5vw,
            42px
        );

    font-weight:950;
}


@media(max-width:700px){

    .ebt-app-slip{
        border-radius:24px;
    }

    .ebt-app-slip__head{
        min-height:105px;

        padding:
            18px
            25px;
    }

    .ebt-app-slip__head strong{
        font-size:23px;
    }

    .ebt-app-slip__head > div:first-child span{
        margin-top:12px;
        font-size:14px;
    }

    .ebt-app-slip__head-actions{
        gap:17px;
    }

    .ebt-app-slip__status{
        min-width:63px;
        min-height:57px;
    }

    .ebt-app-slip__info{
        font-size:28px;
    }

    .ebt-app-slip__meta{
        min-height:79px;

        padding:
            19px
            26px;

        font-size:15px;
    }

    .ebt-app-slip__selections{
        padding:
            0
            26px;
    }

    .ebt-app-slip__selection{
        grid-template-columns:
            29px
            minmax(0,1fr);

        gap:11px;

        padding:
            27px
            0;
    }

    .ebt-app-slip__number{
        font-size:15px;
    }

    .ebt-app-slip__fixture{
        font-size:20px;
    }

    .ebt-app-slip__pick-row strong{
        font-size:17px;
    }

    .ebt-app-slip__pick-row span{
        font-size:22px;
    }

    .ebt-app-slip__footer{
        min-height:120px;

        padding:
            21px
            26px;
    }

    .ebt-app-slip__footer > div span{
        font-size:15px;
    }

    .ebt-app-slip__footer > div strong{
        font-size:19px;
    }

    .ebt-app-slip__total{
        font-size:35px;
    }
}


@media(max-width:420px){

    .ebt-app-slip__head,
    .ebt-app-slip__meta,
    .ebt-app-slip__footer{
        padding-left:20px;
        padding-right:20px;
    }

    .ebt-app-slip__selections{
        padding-left:20px;
        padding-right:20px;
    }

    .ebt-app-slip__fixture{
        font-size:18px;
    }

    .ebt-app-slip__meta{
        font-size:13px;
    }

    .ebt-app-slip__status{
        min-width:58px;
        min-height:51px;
        font-size:13px;
    }

    .ebt-app-slip__info{
        font-size:25px;
    }
}