/* =========================
   Services Widget - Desktop
========================= */

.srvw-head {
    max-width:920px;
    margin-bottom:50px;
}

.srvw-bdg {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:22px;
    margin-top:26px;
}

.srvw-bdg span {
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--primary-text);
    font-size:18px;
    font-weight:600;
}

.srvw-bdg i {
    flex:0 0 22px;
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--uicolor2);
    color:var(--background-color);
    font-size:12px;
}

.srvw-list {
    counter-reset:service-card;
    display:flex;
    flex-direction:column;
    gap:34px;
}

.srvw-list:empty {
    display:none;
}

.-ycwt-services .srvw-list .srv-bx:nth-of-type(6n+1) {
    --srv-tone:color-mix(in srgb,var(--uicolor) 88%,var(--primary-text));
}

.-ycwt-services .srvw-list .srv-bx:nth-of-type(6n+2) {
    --srv-tone: color-mix(in srgb, #cf6e12 80%, #ffbc89);
}

.-ycwt-services .srvw-list .srv-bx:nth-of-type(6n+3) {
    --srv-tone: color-mix(in srgb, var(--uicolor4) 72%, #174fad);
}

.-ycwt-services .srvw-list .srv-bx:nth-of-type(6n+4) {
    --srv-tone: color-mix(in srgb, #424543 64%, var(--primary-text));
}

.-ycwt-services .srvw-list .srv-bx:nth-of-type(6n+5) {
    --srv-tone:color-mix(in srgb,var(--uicolor) 56%,var(--primary-text));
}

.-ycwt-services .srvw-list .srv-bx:nth-of-type(6n+6) {
    --srv-tone:color-mix(in srgb,var(--uicolor) 48%,var(--primary-text));
}

.-ycw-section.-ycwt-services {
    border-start-start-radius:80px;
    border-start-end-radius:80px;
    background:var(--surface-color,#fff);
}

/* =========================
   English / LTR Support
========================= */

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

html[dir="ltr"] .srvw-head {
    max-width:980px;
}

html[dir="ltr"] .srvw-head .tit-wdt {
    line-height:1.18;
    letter-spacing:-1px;
}

html[dir="ltr"] .srvw-bdg {
    direction:ltr;
}

html[dir="ltr"] .srvw-actions,
html[dir="ltr"] .-ycwt-services .yc-widget-loadmore-wrap {
    justify-content:flex-start;
}

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

@media only screen and (max-width:1199px) {
    .srvw-head {
        margin-bottom:42px;
    }

    .srvw-bdg {
        gap:12px 18px;
        margin-top:22px;
    }

    .srvw-bdg span {
        font-size:16px;
    }

    .srvw-list {
        gap:28px;
    }

    .srvw-actions,
    .-ycwt-services .yc-widget-loadmore-wrap {
        margin-top:34px;
    }

    .-ycw-section.-ycwt-services {
        border-start-start-radius:52px;
        border-start-end-radius:52px;
    }
}

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

@media only screen and (max-width:767px) {
    .srvw-head {
        margin-bottom:28px;
    }

    .srvw-head .tit-wdt,
    html[dir="ltr"] .srvw-head .tit-wdt {
        max-width:100%;
        font-size:clamp(28px,7.4vw,33px);
        line-height:1.25;
        letter-spacing:-.35px;
    }

    .srvw-bdg {
        justify-content:flex-start;
        flex-wrap:nowrap;
        gap:9px;
        margin-top:18px;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-padding-inline:20px;
        scroll-snap-type:inline proximity;
        scrollbar-width:none;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
    }

    .srvw-bdg::-webkit-scrollbar {
        display:none;
    }

    .srvw-bdg span {
        flex:0 0 auto;
        width:auto;
        max-width:min(82vw,320px);
        min-height:40px;
        gap:8px;
        padding:8px 12px;
        border:1px solid color-mix(in srgb,var(--uicolor) 22%,var(--diver));
        border-radius:999px;
        background:color-mix(in srgb,var(--uicolor) 5%,var(--surface-color,#fff));
        box-shadow:0 8px 22px -22px color-mix(in srgb,var(--primary-text) 52%,transparent);
        font-size:13px;
        line-height:1.45;
        scroll-snap-align:start;
    }

    .srvw-bdg i {
        flex-basis:20px;
        width:20px;
        height:20px;
        font-size:10px;
    }

    .srvw-list {
        gap:18px;
    }

    .srvw-actions,
    .-ycwt-services .yc-widget-loadmore-wrap {
        width:100%;
        align-items:stretch;
        margin-top:26px;
    }

    .srvw-actions .yc-widget-btn,
    .srvw-actions .yc-widget-btn > a,
    .-ycwt-services .yc-widget-loadmore {
        min-width:0;
        min-height:52px;
    }

    .srvw-actions .yc-widget-btn {
        flex:1 1 180px;
    }

    .srvw-actions .yc-widget-btn > a,
    .-ycwt-services .yc-widget-loadmore {
        width:100%;
    }

    .-ycw-section.-ycwt-services {
        border-start-start-radius:30px;
        border-start-end-radius:30px;
    }
}

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

@media only screen and (max-width:480px) {
    .srvw-actions {
        flex-direction:column;
    }

    .srvw-actions .yc-widget-btn {
        flex:0 0 auto;
        width:100%;
    }
}

@media only screen and (max-width:390px) {
    .srvw-head {
        margin-bottom:24px;
    }

    .srvw-bdg span {
        max-width:86vw;
        min-height:38px;
        padding:7px 10px;
        font-size:12.5px;
    }

    .srvw-list {
        gap:14px;
    }

    .-ycw-section.-ycwt-services {
        border-start-start-radius:24px;
        border-start-end-radius:24px;
    }
}