/* =========================
   Packages Widget - Desktop
========================= */

.pkgw-head {
    margin-bottom: 120px;
}

.pkgw-head .betit-w {
    color: var(--uicolor);
    font-size: 30px;
    font-weight: 700;
}

.pkgw-badges {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin-block-start:20px;
}

.pkgw-badges span {
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--secondarytext);
    font-weight:800;
    line-height:1.45;
}

.pkgw-badges i,
.pkgw-desc i,
.pkgw-card li i {
    width: 30px;
    height:17px;
    margin-top: -22px;
    flex: 0 0 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--uicolor);
    color:var(--background-color);
    font-size:10px;
}

.pkgw-badges i {
    margin-top: 0;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
}

.pkgw-list {
    display:flex;
    align-items:stretch;
    justify-content:center;
    flex-wrap:wrap;
    gap:22px;
}

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

.pkgw-card {
    position:relative;
    flex:1 1 280px;
    max-width:355px;
    min-width:0;
    min-height:500px;
    display:flex;
    flex-direction:column;
    padding: 35px 15px 35px;
    border:var(--border);
    border-radius:22px;
    border: 2px dashed var(--uicolor);
    background:var(--background-color);
    transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}

.pkgw-card.featured {
    border:4px solid var(--uicolor);
    padding-block-start:54px;
    transform:translateY(-36px);
}

.pkgw-popular {
    position:absolute;
    inset-block-start:0;
    inset-inline:0;
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px 16px;
    border-start-start-radius:17px;
    border-start-end-radius: 17px;
    background:var(--uicolor);
    color:var(--background-color);
    font-size: 22px;
    font-weight: 700;
    line-height:1.35;
    text-align:center;
}

.pkgw-card em {
    margin-block-end: 8px;
    color: var(--secondarytext);
    font-size: 18px;
    font-style:normal;
    font-weight: 700;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.pkgw-card h3 {
    margin:0 0 18px;
    color:var(--primary-text);
    font-size: 25px;
    line-height: 1.5;
    font-weight: 800;
    overflow-wrap:anywhere;
}

.pkgw-desc {
    min-height:58px;
    display:flex;
    gap:8px;
    margin: 20px 0px 28px;
    color:var(--secondarytext);
    font-size: 16px;
    font-weight: 700;
    line-height:1.45;
    background: var(--diver);
    padding: 10px;
    border: 1px solid #00000017;
    border-radius: 10px;
    flex-direction: column;
}

.pkgw-desc span {
    min-width:0;
    overflow-wrap:anywhere;
}

.pkgw-price {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-block-end:18px;
}

.pkgw-price small {
    width:max-content;
    max-width:100%;
    color:var(--secondarytext);
    font-family:var(--f-number);
    line-height:1.4;
    font-size: 18px;
    text-decoration:line-through;
    unicode-bidi:plaintext;
    overflow-wrap:anywhere;
}

.pkgw-price strong {
    min-width:0;
    color:var(--primary-text);
    font-family:var(--f-number);
    font-size: 35px;
    line-height:1;
    font-weight:900;
    unicode-bidi:plaintext;
    overflow-wrap:anywhere;
}

.pkgw-price span {
    color: var(--Text-color);
    font-size: 18px;
    font-weight: 700;
    background: var(--diver2);
    padding: 5px 10px;
    line-height:1.5;
    margin-top: 13px;
    border: 1px dashed var(--uicolor);
    overflow-wrap:anywhere;
}

.pkgw-btn-wrap {
    min-width:0;
    margin-block-end:22px;
}

.pkgw-card ul {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-block-start:auto;
    padding-block-start:22px;
    border-top:var(--border);
}

.pkgw-card li {
    min-width:0;
    display:flex;
    align-items:flex-start;
    gap:9px;
    color:var(--primary-text);
    font-size:13px;
    line-height:1.45;
}

.pkgw-card li span {
    min-width:0;
    overflow-wrap:anywhere;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.pkgw-card li i {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    margin-block-start:2px;
    background:transparent;
    background: var(--uicolor);
    font-size:11px;
}

.pkgw-card a:focus-visible,
.pkgw .yc-widget-loadmore:focus-visible {
    outline:3px solid color-mix(in srgb,var(--uicolor) 32%,transparent);
    outline-offset:3px;
}

.pkgw-empty {
    width:100%;
    padding:24px;
    border:var(--border);
    border-radius:20px;
    color:var(--secondarytext);
    font-weight:900;
    line-height:1.7;
    text-align:center;
}

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

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

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

html[dir="ltr"] .pkgw-card,
html[dir="ltr"] .pkgw-desc,
html[dir="ltr"] .pkgw-card li {
    text-align:start;
}

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

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

    .pkgw-badges {
        gap:12px 16px;
    }

    .pkgw-list {
        gap:18px;
    }

    .pkgw-card,
    .pkgw-card.featured {
        flex:1 1 calc(50% - 9px);
        max-width:none;
        transform:none;
    }

    .pkgw-card:only-child {
        max-width:620px;
    }

    .pkgw-card:last-child:nth-child(odd):not(:only-child) {
        flex-grow:0;
    }
}

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

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

    .pkgw-head .betit-w {
        margin-bottom:10px;
        font-size:16px;
    }

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

    .pkgw-badges {
        justify-content:flex-start;
        flex-wrap:nowrap;
        gap:8px;
        margin-block-start:16px;
        margin-inline:-20px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:2px 20px 10px;
        scroll-padding-inline:20px;
        scrollbar-width:none;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
    }

    .pkgw-badges::-webkit-scrollbar {
        display:none;
    }

    .pkgw-badges span {
        flex:0 0 auto;
        min-height:38px;
        gap:7px;
        padding:8px 12px;
        border:1px solid color-mix(in srgb,var(--uicolor) 12%,var(--diver));
        border-radius:999px;
        background:color-mix(in srgb,var(--uicolor) 5%,var(--background-color));
        font-size:13px;
        white-space:nowrap;
    }

    .pkgw-badges i {
        width:16px;
        height:16px;
        flex-basis:16px;
        font-size:9px;
    }

    .pkgw-list {
        justify-content:flex-start;
        flex-wrap:nowrap;
        gap:12px;
        margin-inline:-20px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:4px 20px 18px;
        scroll-padding-inline:20px;
        scroll-snap-type:inline mandatory;
        scrollbar-width:none;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
    }

    .pkgw-list::-webkit-scrollbar {
        display:none;
    }

    .pkgw-card,
    .pkgw-card.featured {
        flex:0 0 min(calc(100vw - 48px),420px);
        width:auto;
        max-width:none;
        min-height:0;
        align-self:stretch;
        padding:22px 20px 20px;
        border:1px solid color-mix(in srgb,var(--uicolor) 14%,var(--diver));
        border-radius:22px;
        scroll-snap-align:start;
        scroll-snap-stop:always;
        box-shadow:0 16px 36px -28px color-mix(in srgb,var(--primary-text) 40%,transparent);
    }

    .pkgw-card.featured {
        padding-block-start:50px;
        border:3px solid var(--uicolor);
        box-shadow:0 18px 38px -26px color-mix(in srgb,var(--uicolor) 48%,transparent);
    }

    .pkgw-card:only-child,
    .pkgw-card.featured:only-child {
        flex-basis:min(calc(100vw - 40px),560px);
        max-width:none;
    }

    .pkgw-popular {
        min-height:36px;
        border-start-start-radius:18px;
        border-start-end-radius:18px;
        font-size:12px;
    }

    .pkgw-card em {
        margin-block-end:7px;
        font-size:13px;
    }

    .pkgw-card h3 {
        margin-block-end:13px;
        font-size:23px;
        line-height:1.3;
    }

    .pkgw-desc {
        min-height:0;
        gap:8px;
        margin-block-end:20px;
        font-size:13px;
        line-height:1.6;
    }

    .pkgw-desc i {
        margin-block-start:2px;
    }

    .pkgw-price {
        gap:2px;
        margin-block-end:16px;
    }

    .pkgw-price strong {
        font-size:clamp(34px,10vw,40px);
        line-height:1.1;
    }

    .pkgw-price span {
        padding-block-start:6px;
        font-size:11.5px;
    }

    .pkgw-btn-wrap {
        width:100%;
        margin-block-end:18px;
    }

    .pkgw-btn-wrap,
    .pkgw-btn-wrap > a,
    .pkgw .yc-widget-loadmore {
        min-width:0;
        min-height:52px;
    }

    .pkgw-btn-wrap > a,
    .pkgw .yc-widget-loadmore {
        width:100%;
    }

    .pkgw-card ul {
        gap:10px;
        padding-block-start:18px;
    }

    .pkgw-card li {
        gap:8px;
        font-size:12.5px;
        line-height:1.55;
    }

    .pkgw-card li i {
        margin-block-start:3px;
    }

    .pkgw .yc-widget-loadmore-wrap {
        width:100%;
        align-items:stretch;
        margin-block-start:22px;
    }

    .pkgw-empty {
        flex:0 0 calc(100vw - 40px);
        padding:24px 18px;
        border-style:dashed;
        border-radius:18px;
        background:var(--background-color);
        font-size:14px;
    }
}

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

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

    .pkgw-head .tit-wdt,
    html[dir="ltr"] .pkgw-head .tit-wdt {
        font-size:clamp(27px,8.4vw,31px);
    }

    .pkgw-list {
        gap:10px;
    }

    .pkgw-card,
    .pkgw-card.featured {
        padding:20px 17px 18px;
        border-radius:20px;
    }

    .pkgw-card.featured {
        padding-block-start:48px;
    }

    .pkgw-popular {
        border-start-start-radius:16px;
        border-start-end-radius:16px;
    }

    .pkgw-card h3 {
        font-size:21px;
    }

    .pkgw-desc {
        margin-block-end:17px;
        font-size:12.5px;
    }

    .pkgw-price strong {
        font-size:34px;
    }

    .pkgw-card li {
        font-size:12px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .pkgw-card {
        transition:none;
    }

    .pkgw-badges,
    .pkgw-list {
        scroll-behavior:auto;
    }
}