/* =========================
   Offers Widget - Desktop
========================= */

.ofrw-head {
    margin-bottom:34px;
}

.ofrw-tabs {
    display:flex;
    align-items:center;
    justify-content: flex-start;
    gap:18px;
    margin-bottom:34px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 2px 10px;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
}

.ofrw-tabs::-webkit-scrollbar {
    display:none;
}

.ofrw-tab {
    flex:0 0 190px;
    min-width:0;
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:13px;
    padding:16px;
    border:var(--border);
    border-radius:16px;
    background: var(--diver2);
    color:var(--primary-text);
    text-align:center;
    transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,transform .2s ease;
}

.ofrw-tab.active {
    border-color: #00000038;
    background: var(--on-color);
}

.ofrw-tab:focus-visible,
.ofrw-btn:focus-visible,
.ofrw-terms:focus-visible,
.ofrw-more:focus-visible {
    outline:3px solid color-mix(in srgb,var(--uicolor) 30%,transparent);
    outline-offset:3px;
}

.ofrw-tab:active,
.ofrw-btn:active,
.ofrw-terms:active,
.ofrw-more:active {
    transform:scale(.98);
}

.ofrw-tab-icon {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    display:flex;
    align-items:center;
    justify-content:center;
    border: 1px dashed var(--uicolor);
    overflow:hidden;
    border-radius:12px;
    background: #fff;
    color: var(--uicolor);
    font-size: 27px;
}

.ofrw-tab-icon img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.ofrw-tab-icon svg,
.ofrw-tab-icon i {
    width:1em;
    height:1em;
    display:block;
}

.ofrw-tab-icon svg {
    fill:currentColor;
}

.ofrw-tab strong {
    min-width:0;
    font-size:17px;
    font-weight:900;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.ofrw-box {
    position:relative;
}

.ofrw-list {
    display:flex;
    flex-direction:column;
    gap:21px;
    transition:opacity .2s ease;
}

.ofrw-list.is-loading {
    opacity:.45;
}

.ofrw-card {
    min-width:0;
    min-height:190px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:28px;
    padding: 25px 30px;
    border: 2px dashed var(--uicolor);
    border-radius:16px;
    background:var(--background-color);
}

.ofrw-discount {
    flex: 0 0 150px;
    min-width:0;
    min-height: 120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;
    padding: 25px 10px 10px;
    border-radius: 90px / 20%;
    background: linear-gradient(180deg,color-mix(in srgb,var(--uicolor) 4%,var(--uicolor2)) 0 65%,color-mix(in srgb,var(--uicolor2) 49%,#fff) 50% 100%);
    color:var(--primary-text);
}

.ofrw-discount strong {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-block-end:20px;
    color: #000000;
    font-size: 20px;
    font-weight:900;
    line-height:1.25;
    text-align:center;
    overflow-wrap:anywhere;
}

.ofrw-discount span {
    min-height: 25px;
    display:flex;
    align-items:center;
    color:var(--primary-text);
    font-weight: 800;
    line-height:1.4;
}

.ofrw-main {
    flex:1;
    min-width:0;
}

.ofrw-time {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
    color:var(--secondarytext);
    font-weight: 700;
    font-size: 20px;
    line-height:1.45;
}

.ofrw-time b {
    min-width:0;
    color: var(--uicolor);
    font-family:var(--f-number);
    unicode-bidi:plaintext;
    overflow-wrap:anywhere;
}

.ofrw-card h3 {
    margin: 20px 0px 12px;
    color:var(--primary-text);
    font-size: 25px;
    font-weight:900;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.ofrw-card p {
    margin:0;
    color:var(--secondarytext);
    font-size: 16px;
    font-weight: 700;
    line-height:1.65;
    overflow-wrap:anywhere;
}

.ofrw-meta {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:12px;
    margin-block-start:14px;
    color:var(--secondarytext);
    font-size: 18px;
    font-weight:800;
    padding: 5px 19px;
    border-inline-start:6px solid var(--uicolor);
    line-height:1.5;
    border-start-start-radius:20px;
    border-end-start-radius:20px;
    border-start-end-radius:0;
    border-end-end-radius:0;
    background: linear-gradient(120deg, color-mix(in srgb, var(--uicolor2) 0%, #fffdf800) 0 65%, color-mix(in srgb, var(--uicolor3) 18%, #fff) 50% 100%);
}

html[dir="ltr"] .ofrw-meta {
    background: linear-gradient(
232deg, color-mix(in srgb, var(--uicolor2) 0%, #fffdf800) 0 65%, color-mix(in srgb, var(--uicolor) 23%, #fff) 50% 100%);
}

.ofrw-meta span {
    min-width:0;
    overflow-wrap:anywhere;
}

.ofrw-meta b {
    color:var(--uicolor);
    font-family:var(--f-number);
    unicode-bidi:plaintext;
}

.ofrw-related {
    flex:1 1 100%;
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:row-reverse;
    flex-wrap:wrap;
    overflow:hidden;
    margin-block-start:0;
    border:1px solid color-mix(in srgb,var(--uicolor) 18%,var(--diver));
    border-radius:7px;
    background:color-mix(in srgb,var(--uicolor) 5%,var(--background-color));
}

.ofrw-related span {
    position:relative;
    flex: 1 1 340px;
    min-width:0;
    min-height: 78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 38px 12px 1px;
    border-inline-start:1px solid color-mix(in srgb,var(--uicolor) 16%,var(--diver));
    color:var(--primary-text);
    font-size: 16px;
    padding-top: 38px;
    font-weight: 800;
    line-height:1.4;
}

.ofrw-related span > b {
    min-width:0;
    overflow-wrap:anywhere;
}

.ofrw-related small {
    position:absolute;
    inset-block-start: 0;
    inset-inline-start: 6px;
    min-height: 25px;
    display:flex;
    align-items:center;
    padding-block:5px;
    padding-inline:8px;
    background: var(--uicolor);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    border-radius: 0 0 10px 10px;
    line-height: 20px;
}

.ofrw-related em {
    min-width:0;
    font-family:var(--f-number);
    font-style:normal;
    font-size: 25px;
    line-height:1.4;
    text-align:end;
    unicode-bidi:plaintext;
    overflow-wrap:anywhere;
}

.ofrw-side {
    flex:0 0 138px;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
    margin-block:auto;
}

.ofrw-btn {
    min-width:120px;
    min-height: 37px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 5px 20px;
    border-radius:7px;
    background: var(--uicolor4);
    color: #ffffff;
    font-weight: 800;
    line-height:1.4;
    text-align:center;
    transition:transform .2s ease,background-color .2s ease;
}

.ofrw-terms {
    color:var(--uicolor);
    background:transparent;
    font-size:11px;
    font-weight:800;
    line-height:1.4;
    text-align:center;
    transition:transform .2s ease;
}

.ofrw-more {
    min-width:160px;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:34px auto 0;
    padding-inline:28px;
    border-radius:999px;
    background:var(--uicolor);
    color:var(--background-color);
    font-weight:900;
    line-height:1.4;
    text-align:center;
    transition:transform .2s ease,opacity .2s ease;
}

.ofrw-more.loading {
    pointer-events:none;
    opacity:.65;
}

.ofrw-more.is-hidden {
    display:none;
}

.ofrw-empty {
    padding:28px;
    border:var(--border);
    border-radius:18px;
    color:var(--secondarytext);
    font-weight:900;
    line-height:1.7;
    text-align:center;
}

.ofrw-loader {
    display:none;
    flex-direction:column;
    gap:18px;
    margin-block-end:24px;
}

.ofrw-loader.active {
    display:flex;
}

.ofrw-loader span {
    height:118px;
    border:var(--border);
    border-radius:20px;
    background:linear-gradient(90deg,var(--background-color),color-mix(in srgb,var(--uicolor) 9%,var(--background-color)),var(--background-color));
    background-size:220% 100%;
    animation:ofrwLoad 1.1s linear infinite;
}

@keyframes ofrwLoad {
    from { background-position:220% 0; }
    to { background-position:-220% 0; }
}

.-ycw-section.-ycwt-offers {
    margin-block-start:-50px;
    padding-block-end:100px;
    border-radius:60px 60px 0 0;
    background:var(--background-color);
}

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

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

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

html[dir="ltr"] .ofrw-related {
    flex-direction:row;
}

html[dir="ltr"] .ofrw-main,
html[dir="ltr"] .ofrw-meta,
html[dir="ltr"] .ofrw-related span {
    text-align:start;
}


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

@media only screen and (max-width:991px) {
    .ofrw-tabs {
        justify-content:flex-start;
        margin-block-end:30px;
        scroll-padding-inline:2px;
        scroll-snap-type:inline proximity;
    }

    .ofrw-tab {
        scroll-snap-align:start;
    }

    .ofrw-card {
        display:grid;
        grid-template-columns:150px minmax(0,1fr) 124px;
        align-items:center;
        gap:18px;
        padding:22px 20px;
    }

    .ofrw-card > * {
        min-width:0;
    }

    .ofrw-discount,
    .ofrw-side {
        width:100%;
    }

    .ofrw-discount {
        min-height:126px;
        padding-inline:10px;
    }

    .ofrw-discount strong {
        font-size:18px;
    }

    .ofrw-main {
        text-align:start;
    }

    .ofrw-time {
        margin-block-end:14px;
    }

    .ofrw-time,
    .ofrw-meta {
        justify-content:flex-start;
    }

    .ofrw-side {
        gap:14px;
    }

    .ofrw-btn {
        width:100%;
    }

    .ofrw-related {
        grid-column:1 / -1;
    }

    .ofrw-loader span {
        height:170px;
    }
}


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

@media only screen and (max-width:767px) {
    .ofrw-head {
        margin-block-end:24px;
    }

    .ofrw-head .betit-w {
        margin-block-end:9px;
        font-size:15px;
    }

    .ofrw-head .tit-wdt,
    html[dir="ltr"] .ofrw-head .tit-wdt {
        max-width:100%;
        font-size:clamp(27px,7vw,33px);
        line-height:1.24;
        letter-spacing:-.3px;
        overflow-wrap:anywhere;
    }

    .ofrw-tabs {
        justify-content:flex-start;
        gap:9px;
        margin-block-end:22px;
        padding:2px 1px 8px;
        scroll-padding-inline:1px;
        scroll-snap-type:inline mandatory;
    }

    .ofrw-tab {
        flex-basis:112px;
        min-height:108px;
        gap:8px;
        padding:11px 10px;
        border-radius:16px;
        scroll-snap-align:start;
        scroll-snap-stop:always;
    }

    .ofrw-tab.active {
        background:color-mix(in srgb,var(--uicolor) 6%,var(--background-color));
        box-shadow:
            0 0 0 1px var(--uicolor) inset,
            0 12px 24px -20px color-mix(in srgb,var(--uicolor) 44%,transparent);
    }

    .ofrw-tab-icon {
        width:54px;
        height:54px;
        flex-basis:54px;
        border-radius:11px;
        font-size:27px;
    }

    .ofrw-tab strong {
        font-size:12.5px;
        line-height:1.35;
    }

    .ofrw-list {
        gap:14px;
    }

    .ofrw-card {
        grid-template-columns:minmax(112px,130px) minmax(0,1fr);
        grid-template-areas:
            "discount main"
            "side side"
            "related related";
        align-items:start;
        gap:14px;
        min-height:0;
        padding:15px;
        border-color:color-mix(in srgb,var(--uicolor) 14%,var(--diver));
        border-radius:20px;
        box-shadow:0 12px 30px -25px color-mix(in srgb,var(--primary-text) 38%,transparent);
    }

    .ofrw-discount {
        grid-area:discount;
        min-height:116px;
        padding:24px 6px 9px;
        border-radius:14px;
    }

    .ofrw-discount strong {
        min-height:50px;
        padding-block-end:12px;
        font-size:16px;
        line-height:1.25;
    }

    .ofrw-discount span {
        min-height:38px;
        font-size:12px;
    }

    .ofrw-main {
        grid-area:main;
        align-self:center;
        min-width:0;
    }

    .ofrw-time {
        gap:5px 7px;
        margin-block-end:9px;
        font-size:12px;
        line-height:1.45;
    }

    .ofrw-card h3 {
        margin:0 0 7px;
        font-size:18px;
        line-height:1.4;
    }

    .ofrw-card p {
        font-size:13px;
        line-height:1.6;
    }

    .ofrw-meta {
        gap:6px 9px;
        margin-block-start:9px;
        padding:7px 10px;
        border-inline-start-width:4px;
        font-size:12px;
        line-height:1.5;
    }

    .ofrw-side {
        grid-area:side;
        width:100%;
        display:flex;
        flex-direction:row;
        align-items:stretch;
        gap:9px;
        margin:0;
    }

    .ofrw-btn,
    .ofrw-terms {
        min-width:0;
        min-height:48px;
    }

    .ofrw-btn {
        flex:1 1 170px;
        border-radius:12px;
        font-size:14px;
    }

    .ofrw-terms {
        flex:0 1 150px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:9px 12px;
        border:1px solid color-mix(in srgb,var(--uicolor) 25%,var(--diver));
        border-radius:12px;
        background:color-mix(in srgb,var(--uicolor) 5%,var(--background-color));
        font-size:11.5px;
    }

    .ofrw-related,
    html[dir="ltr"] .ofrw-related {
        grid-area:related;
        flex-direction:row;
        flex-wrap:nowrap;
        gap:0;
        overflow-x:auto;
        overflow-y:hidden;
        border-radius:12px;
        scroll-padding-inline:0;
        scroll-snap-type:inline mandatory;
        scrollbar-width:none;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
    }

    .ofrw-related::-webkit-scrollbar {
        display:none;
    }

    .ofrw-related span {
        flex:0 0 min(72vw,260px);
        min-height:72px;
        padding:24px 11px 9px;
        border-inline-start:0;
        border-inline-end:1px solid color-mix(in srgb,var(--uicolor) 16%,var(--diver));
        font-size:12px;
        scroll-snap-align:start;
        scroll-snap-stop:always;
    }

    .ofrw-related span:last-child {
        border-inline-end:0;
    }

    .ofrw-related small {
        max-width:100%;
        font-size:10px;
        overflow-wrap:anywhere;
    }

    .ofrw-related em {
        max-width:46%;
        font-size:12px;
    }

    .ofrw-more {
        min-height:50px;
        margin-block-start:24px;
    }

    .ofrw-empty {
        min-height:132px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:24px 18px;
        border-style:dashed;
        border-radius:18px;
        background:var(--background-color);
        font-size:14px;
    }

    .ofrw-loader {
        gap:12px;
        margin-block-end:18px;
    }

    .ofrw-loader span {
        height:190px;
        border-radius:20px;
    }

    .-ycw-section.-ycwt-offers {
        margin-block-start:-24px;
        padding-block-end:60px;
        border-radius:34px 34px 0 0;
    }
}


/* =========================
   Compact Mobile Layout
========================= */

@media only screen and (max-width:575px) {
    .ofrw-head {
        margin-block-end:22px;
    }

    .ofrw-tabs {
        gap:8px;
        margin-block-end:20px;
    }

    .ofrw-tab {
        flex-basis:108px;
        min-height:104px;
    }

    .ofrw-card {
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:
            "discount"
            "main"
            "side"
            "related";
        gap:12px;
        padding:14px;
        border-radius:18px;
    }

    .ofrw-discount {
        min-height:72px;
        flex-direction:row;
        align-items:stretch;
        padding:0;
        border-radius:14px;
        background:color-mix(in srgb,var(--uicolor2) 9%,var(--background-color));
    }

    .ofrw-discount strong {
        flex:1;
        min-width:0;
        min-height:72px;
        justify-content:flex-start;
        padding:12px 14px;
        font-size:clamp(18px,4.8vw,20px);
        text-align:start;
    }

    .ofrw-discount span {
        flex:0 0 84px;
        min-height:72px;
        justify-content:center;
        padding:10px;
        background:color-mix(in srgb,var(--uicolor2) 72%,#fff);
        text-align:center;
    }

    .ofrw-main {
        align-self:auto;
    }

    .ofrw-time {
        margin-block-end:8px;
        font-size:12px;
    }

    .ofrw-card h3 {
        font-size:17.5px;
    }

    .ofrw-meta {
        font-size:11.5px;
    }

    .ofrw-btn,
    .ofrw-terms {
        flex:1 1 0;
    }

    .ofrw-related span {
        flex-basis:min(78vw,250px);
    }

    .ofrw-loader span {
        height:180px;
    }
}


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

@media only screen and (max-width:390px) {
    .ofrw-head .tit-wdt,
    html[dir="ltr"] .ofrw-head .tit-wdt {
        font-size:clamp(25px,8vw,30px);
    }

    .ofrw-tab {
        flex-basis:104px;
        min-height:100px;
        padding-inline:8px;
    }

    .ofrw-tab strong {
        font-size:12px;
    }

    .ofrw-tab-icon {
        width:50px;
        height:50px;
        flex-basis:50px;
        font-size:25px;
    }

    .ofrw-card {
        padding:12px;
    }

    .ofrw-discount strong {
        padding-inline:12px;
        font-size:17px;
    }

    .ofrw-discount span {
        flex-basis:78px;
        padding-inline:8px;
        font-size:11px;
    }

    .ofrw-card h3 {
        font-size:17px;
    }

    .ofrw-side {
        gap:7px;
    }

    .ofrw-btn,
    .ofrw-terms {
        padding-inline:10px;
        font-size:11.5px;
    }

    .ofrw-btn {
        font-size:13px;
    }

    .ofrw-related span {
        flex-basis:calc(100vw - 64px);
    }

    .ofrw-more {
        min-width:0;
        width:100%;
    }

    .-ycw-section.-ycwt-offers {
        border-radius:28px 28px 0 0;
    }
}


/* =========================
   320px Safety
========================= */

@media only screen and (max-width:340px) {
    .ofrw-head .tit-wdt,
    html[dir="ltr"] .ofrw-head .tit-wdt {
        font-size:24px;
    }

    .ofrw-tab {
        flex-basis:100px;
    }

    .ofrw-discount strong {
        font-size:16px;
    }

    .ofrw-discount span {
        flex-basis:70px;
        font-size:10.5px;
    }

    .ofrw-side {
        flex-direction:column;
    }

    .ofrw-btn,
    .ofrw-terms {
        width:100%;
        flex:1 1 auto;
    }

    .ofrw-related span {
        flex-basis:calc(100vw - 52px);
    }
}


/* =========================
   Reduced Motion
========================= */

@media (prefers-reduced-motion:reduce) {
    .ofrw-tab,
    .ofrw-list,
    .ofrw-btn,
    .ofrw-terms,
    .ofrw-more {
        transition:none;
    }

    .ofrw-loader span {
        animation:none;
        background-position:50% 0;
    }

    .ofrw-tabs,
    .ofrw-related {
        scroll-behavior:auto;
    }
}