/* =========================
   Counter Up Widget - Desktop
========================= */

.cup {
    margin-block-start:-50px;
    padding:0 0 50px;
    border-radius:60px 60px 0 0;
    background:var(--cup-bg,var(--uicolor));
}

.cup .container {
    max-width:100%;
    padding:0;
}

.cup-box {
    position:relative;
    min-height:405px;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:54px;
    overflow:hidden;
    color:var(--background-color);
}

.cup-itm {
    position:relative;
    z-index:1;
    flex:0 1 340px;
    min-width:0;
    color:var(--background-color);
    text-align:start;
}

.cup-num {
    min-width:0;
    display:flex;
    align-items:baseline;
    justify-content:flex-start;
    gap:2px;
    margin-block-end:8px;
    color:var(--background-color);
    font-family:var(--f-number);
    font-size:62px;
    font-weight:800;
    line-height:1;
    letter-spacing:-1px;
    direction:ltr;
    unicode-bidi:isolate;
}

.cup-num em,
.cup-num span {
    min-width:0;
    font-style:normal;
}

.cup-num em {
    font-variant-numeric:tabular-nums;
}

.cup-itm h3 {
    margin:0 0 18px;
    color:var(--background-color);
    font-size:28px;
    font-weight:800;
    line-height:1.2;
    overflow-wrap:anywhere;
}

.cup-itm p {
    margin:0;
    color:rgba(255,255,255,.92);
    font-size:15px;
    font-weight:700;
    line-height:1.7;
    overflow-wrap:anywhere;
}

.-ycw-section.-ycwt-cuonterup {
    padding:0;
}

/* =========================
   Direction Support
========================= */

html[dir="rtl"] .cup-num {
    justify-content:flex-end;
}

html[dir="ltr"] .cup {
    direction:ltr;
    font-family:var(--f-number);
}

html[dir="ltr"] .cup-itm h3 {
    line-height:1.18;
}

html[dir="ltr"] .cup-itm p {
    line-height:1.6;
}

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

@media only screen and (max-width:1100px) {
    .cup-box {
        gap:28px;
        padding-inline:38px;
    }

    .cup-num {
        font-size:52px;
    }

    .cup-itm h3 {
        font-size:23px;
    }
}

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

@media only screen and (max-width:820px) {
    .cup-box {
        min-height:0;
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:24px;
        padding:56px 24px 62px;
        border-radius:34px 34px 0 0;
    }

    .cup-itm {
        flex:1 1 calc(50% - 12px);
    }

    .cup-num {
        font-size:48px;
    }

    .cup-itm h3 {
        font-size:22px;
    }

    .cup {
        padding-block-end:36px;
    }
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
    .cup {
        margin-block-start:-24px;
        padding-block-end:28px;
        border-radius:34px 34px 0 0;
        background-position:center;
        background-repeat:no-repeat;
        background-size:cover;
    }

    .cup-box {
        isolation:isolate;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-items:stretch;
        gap:10px;
        padding:42px 20px 46px;
        border-radius:34px 34px 0 0;
    }

    .cup-box::before {
        content:"";
        position:absolute;
        inset:0;
        z-index:0;
        background:linear-gradient(180deg,rgba(2,38,38,.2),rgba(2,38,38,.42));
        pointer-events:none;
    }

    .cup-itm {
        width:100%;
        min-width:0;
        min-height:178px;
        display:flex;
        flex-direction:column;
        padding:17px 15px;
        border:1px solid rgba(255,255,255,.18);
        border-radius:20px;
        background:rgba(4,42,42,.28);
        box-shadow:0 18px 38px -32px rgba(0,0,0,.8);
        backdrop-filter:blur(8px);
    }

    .cup-itm:last-child:nth-child(odd) {
        grid-column:1 / -1;
    }

    .cup-num {
        gap:1px;
        margin-block-end:9px;
        font-size:clamp(34px,9vw,46px);
        letter-spacing:-1.2px;
        white-space:nowrap;
    }

    .cup-num span {
        font-size:.58em;
        letter-spacing:0;
    }

    .cup-itm h3,
    html[dir="ltr"] .cup-itm h3 {
        margin-block-end:10px;
        font-size:18px;
        line-height:1.3;
    }

    .cup-itm p,
    html[dir="ltr"] .cup-itm p {
        margin-block-start:auto;
        font-size:12.5px;
        line-height:1.6;
    }
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:480px) {
    .cup-box {
        padding:38px 16px 42px;
    }

    .cup-itm {
        min-height:168px;
        padding:15px 13px;
        border-radius:18px;
    }

    .cup-num {
        font-size:clamp(30px,9vw,38px);
    }

    .cup-itm h3,
    html[dir="ltr"] .cup-itm h3 {
        font-size:16.5px;
    }

    .cup-itm p,
    html[dir="ltr"] .cup-itm p {
        font-size:11.5px;
        line-height:1.55;
    }
}

@media only screen and (max-width:390px) {
    .cup {
        border-radius:28px 28px 0 0;
    }

    .cup-box {
        gap:8px;
        padding:34px 12px 38px;
        border-radius:28px 28px 0 0;
    }

    .cup-itm {
        min-height:162px;
        padding:14px 11px;
        border-radius:16px;
    }

    .cup-num {
        font-size:clamp(24px,7.5vw,30px);
    }

    .cup-itm h3,
    html[dir="ltr"] .cup-itm h3 {
        font-size:15.5px;
    }

    .cup-itm p,
    html[dir="ltr"] .cup-itm p {
        font-size:11px;
        line-height:1.5;
    }
}