/* Home page V2 (Figma "Asia Cell" home frame). Loaded by Home/Index.cshtml after
   Site.css / SiteAr.css. Spacing uses logical properties so RTL (Arabic/Kurdish) mirrors.
   Fonts: the portal font (IRANYekan) everywhere, as on the old portal. Where a comment quotes
   a Figma style (Inter / Rubik + weight), the matching IRANYekan cut is used instead -
   Medium for 500, Bold for 600/700, ExtraBold for 800 - with font-weight: normal. */

:root {
    --home-red: #E82228;
    --home-red-soft: #F72B3114; /* Figma: #F72B31 at 8% */
    --home-green: #22C55E;
    --home-text: #333333;
    --home-muted: #6B6B6B;
    --home-line: #E2E2E2;
    --home-tile: #F4F4F4;
    --home-gap: 16px; /* one vertical gap between all home sections */
}

.homeV2 {
    max-width: 980px;
    margin: 0 auto;
    color: var(--home-text);
}

    .homeV2 a,
    .homeV2 a:hover,
    .homeV2 a:focus {
        text-decoration: none;
    }

/* ===== Shared building blocks ===== */
.homeCard {
    margin: 12px 16px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.homeSection {
    margin: 20px 16px 12px;
}

.homeSecHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.homeV2 .homeSecTitle {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    color: var(--home-text);
}

.homeSecHead .homeSecTitle {
    margin: 0;
}

.homeBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    cursor: pointer;
}

.homeV2 .homeBtnRed {
    background: var(--home-red);
    border: 1px solid var(--home-red);
    color: #fff;
}

.homeV2 .homeBtnOutline {
    background: #fff;
    border: 1px solid var(--home-text);
    color: var(--home-text);
}

.homeBtnWide {
    display: flex;
    width: 100%;
    margin-top: 12px;
}

/* ===== Status row: streak chip, tier pill, gift pill, upgrade strip ===== */
.homeTop {
    padding-top: 10px;
}

.homeStatus {
    margin: 0 16px;
}

.homeStatusRow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Arabic / Kurdish: the row is direction:rtl, where flex-end is the left edge - keep the
   tickets / points pills on the right as in English. */
.homeV2.homeRtl .homeStatusRow {
    justify-content: flex-start;
}

.homeV2 .homeStreakChip,
.homeTierPill,
.homeV2 .homeGiftPill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--home-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    color: var(--home-text);
}

.homeV2 .homeStreakChip {
    margin-inline-end: auto; /* streak chip sits on the start side, pills on the end side */
    color: #F26A1B;
}

    .homeV2 .homeStreakChip span {
        color: var(--home-text);
    }

.homeTierName {
    color: var(--tier, var(--home-red));
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
}

.homeTierPoints {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.homeTierCoin {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

    .homeTierCoin svg {
        width: 14px;
        height: 14px;
    }

.homeV2 .homeGiftPill {
    color: var(--home-red);
}

.homeUpgradeStrip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #EEF6EA;
    font-size: 12px;
    color: #333;
}

    .homeUpgradeStrip b {
        font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    }

.homeUpgradeDate {
    color: var(--home-muted);
}

.homeSignIn {
    text-align: center;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
}

    .homeSignIn .signInMessage {
        position: static;
        color: var(--home-text);
    }

.homeTop .campaignBuyPointsSection {
    margin-top: 12px;
}

/* ===== Streak card ===== */
.homeStreakHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.homeStreakDay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
}

.homeStreakCal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--home-red);
    color: #fff;
}

.homeStreakLink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    color: var(--home-red);
}

.homeStreakHint {
    margin: 10px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--home-tile);
    font-size: 12px;
    line-height: 1.4;
    color: #333;
}

    .homeStreakHint b {
        color: var(--home-red);
    }

.homeStreakGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.homeStreakTile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: #F2F2F2;
    text-align: center;
}

.homeStreakTileTop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 28px;
    padding: 4px 2px;
    background: #5D5D5D;
    font-size: 11px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    color: #fff;
    white-space: nowrap;
}

    .homeStreakTileTop svg {
        flex: 0 0 auto;
    }

.homeStreakTile.is-done .homeStreakTileTop {
    background: #219653;
}

.homeStreakTile.is-today {
    background: #F2F2F2;
}

    .homeStreakTile.is-today .homeStreakTileTop {
        background: var(--home-red-soft);
        color: var(--home-red);
    }

.homeStreakTile.is-mega .homeStreakTileTop {
    background: #E82228;
}

.homeStreakBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #FF5A00;
    font-size: 11px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    line-height: 1;
    color: #fff;
}

.homeStreakTileText {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 6px 4px;
    font-size: 11.5px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    line-height: 1.2;
    color: var(--home-text);
}

.homeStreakTile.is-today .homeStreakTileText {
    color: var(--home-red);
}

.homeStreakTile.is-mega .homeStreakTileText {
    background: #FFF0F0;
    color: var(--home-red);
}

.homeStreakActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

    .homeV2 .homeStreakActions .homeBtn {
        height: 36px;
        font-size: 13px;
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    }

    .homeV2 .homeStreakActions .homeBtnOutline {
        border-color: #F8D3D4;
        background: #FFF5F5;
        color: var(--home-red);
    }

    .homeV2 .homeStreakActions .homeBtnRed {
        background: #E82228;
        border-color: #E82228;
        box-shadow: 0 2px 6px rgba(232, 34, 40, .22);
    }

/* ===== Banner carousel (rounded image cards + dots) ===== */
.homeBannersSec {
    margin: 12px 16px;
}

.homeBanner {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    min-height: 170px;
    border-radius: 12px;
    background-color: transparent;
    background-position: center;
    background-size: cover;
}

    .homeV2 .homeBanner img.homeBannerLayer {
        position: absolute;
        top: 10%;
        inset-inline-start: 5%;
        width: 55%;
        max-width: 420px;
        height: auto;
    }

    .homeV2 .homeBanner img.homeBannerLogo {
        position: absolute;
        top: 8%;
        inset-inline-end: 5%;
        width: 18%;
        max-width: 110px;
        height: auto;
    }

.homeBannerFoot {
    position: absolute;
    bottom: 10%;
    inset-inline-start: 5%;
    inset-inline-end: 5%;
}

.homeBannerDesc {
    max-width: 60%;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.3;
    color: #fff;
}

/* The banner image is the same in every language (car on the right, free space on the left), so the
   buttons stay on the left in Arabic / Kurdish too: the row is always laid out left to right, and each
   button's own text keeps its direction (plaintext), so Arabic / Kurdish labels still read correctly. */
.homeBannerBtns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    direction: ltr;
}

    .homeBannerBtns .homeBannerBtn {
        unicode-bidi: plaintext;
    }

.homeV2 .homeBannerBtn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--home-red);
    font-size: 13px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    color: #fff;
}

.homeV2 .homeBannerBtn.homeBannerBtnAlt {
    background: #fff;
    color: var(--home-red);
}

.homeV2 .homeBannerCarousel .owl-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    padding-top: 0;
}

    .homeV2 .homeBannerCarousel .owl-dots.disabled {
        display: none;
    }

    /* Same small dots as .homeDots / Deals for you: owl.carousel.css draws a 15px dot on the
       button itself and yooz-theme.css recolours it with !important - hence !important here. */
    .homeV2 .homeBannerCarousel .owl-dots button.owl-dot {
        display: block;
        width: 7px;
        height: 7px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #D0D0D0 !important;
    }

        .homeV2 .homeBannerCarousel .owl-dots button.owl-dot.active {
            background: var(--home-red) !important;
        }

        .homeV2 .homeBannerCarousel .owl-dots button.owl-dot span {
            display: none;
        }

/* ===== Deal of the week ===== */
.homeV2 .dealCampaignSection:empty {
    display: none;
}

.homeV2 .homeDealWeek {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 168px;
    margin: 12px 16px;
    padding: 16px;
    overflow: hidden;
    border-radius: 16px;
    background: #E82228;
    color: #fff;
}

.homeDealWeekBody {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.homeDealWeekTag {
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .25);
    font-size: 11px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* Long CMS titles ("20% Discount on online purchases from ...") are clamped to two lines. */
.homeDealWeekTitle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 20px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    line-height: 1.2;
}

.homeDealWeekDesc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.35;
    opacity: .9;
}

.homeDealWeekBtn {
    margin-top: 4px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    color: #E82228;
}

/* The CMS image is shown whole (contain, never cropped): a cut-out product like the
   design's KFC bucket sits on the red; a rectangular artwork shows as a rounded tile. */
.homeDealWeekImg {
    display: flex;
    flex: 0 0 38%;
    align-items: center;
    justify-content: center;
    max-width: 160px;
}

    .homeV2 .homeDealWeekImg img.dealImage {
        display: block;
        width: 100%;
        height: auto;
        max-height: 136px;
        border-radius: 10px;
        object-fit: contain;
    }

/* ===== Deals for you (2 x 2 grid of _DealItem cards) ===== */
.homeV2 .hotDealsSec .recomSec {
    padding: 0;
}

.homeV2 .hotDealsSec .featuredContainer {
    margin: 0;
}

/* Compact deal card (Figma "Deals for ..." strip): full-bleed image, small bold title,
   2-line grey description, small points pill, one-line "Explore More" button.
   Selectors are long on purpose - they must beat Site.css's .featuredContainer card rules. */
/* equal-height cards across the owl carousel */
.homeV2 .featuredContainer .owl-stage {
    display: flex;
}

.homeV2 .featuredContainer .owl-item {
    display: flex;
}

/* no side padding: the 2 cards line up exactly with the section title and "View All" button
   (owl's 10px margin is the only gap between them); top/bottom room keeps the card shadow. */
.homeV2 .featuredContainer .featuredItems {
    width: 100%;
    height: 100%;
    padding: 4px 0 8px;
}

/* Home "Deals for you": the 4 deals as a 2 x 2 grid (master.js GetCarousel), equal-height cards per row.
   Only that slider gets .homeDealsGrid - "Friday's Deals" (.homeDiffDealsSec) stays a carousel. */
.homeV2 .featuredContainer .homeDealsGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

    .homeV2 .featuredContainer .homeDealsGrid .featuredItems {
        padding: 0;
    }

/* exactly 2 cards in view: clip the next card instead of letting it peek past the edge.
   !important because Site.css / SiteAr.css set "overflow: unset !important" on
   .featuredContainer .owl-carousel .owl-stage-outer at mobile widths (old portal peek). */
.homeV2 .featuredContainer .owl-carousel .owl-stage-outer {
    overflow: hidden !important;
}

/* small dots, same as the other home carousels (.homeDots / .homeBannerCarousel) */
.homeV2 .featuredContainer .owl-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 0;
}

    .homeV2 .featuredContainer .owl-dots.disabled {
        display: none;
    }

    /* owl.carousel.css draws the dot on the button itself (15px, red / grey active) and
       yooz-theme.css recolours it with !important - hence !important on the colours here. */
    .homeV2 .featuredContainer .owl-dots button.owl-dot {
        display: block;
        width: 7px;
        height: 7px;
        margin: 0;
        border-radius: 50%;
        background: #D0D0D0 !important;
    }

        .homeV2 .featuredContainer .owl-dots button.owl-dot.active {
            background: var(--home-red) !important;
        }

        .homeV2 .featuredContainer .owl-dots button.owl-dot span {
            display: none;
        }
.homeV2 .featuredContainer .itemSec.dealCardV1 {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

    .homeV2 .featuredContainer .itemSec.dealCardV1 .imgSec {
        padding: 0;
    }

    .homeV2 .featuredContainer .itemSec.dealCardV1 .imgWrapper {
        border-radius: 0;
    }

        /* Fill the wrapper's ratio box (Site.css .imgWrapper padding-top: 67%, img absolutely
           positioned): ~110px tall on a phone, and it grows with the card on wide screens
           instead of a fixed 110px image over an empty white box. */
        .homeV2 .featuredContainer .itemSec.dealCardV1 .imgWrapper img {
            width: 100%;
            height: 100%;
            border-radius: 0;
            object-fit: cover;
        }

    .homeV2 .featuredContainer .itemSec.dealCardV1 .descDiv {
        padding: 8px 10px 0;
        text-align: start;
    }

        .homeV2 .featuredContainer .itemSec.dealCardV1 .descDiv .title {
            height: auto;
            margin: 0;
            overflow: hidden;
            font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd";
            font-size: 13px;
            font-weight: normal;
            line-height: 1.25;
            color: var(--home-text);
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .homeV2 .featuredContainer .itemSec.dealCardV1 .descDiv .subTitle {
            height: auto;
            min-height: 26px;
            margin-top: 2px;
            font-family: inherit;
            font-size: 10.5px;
            line-height: 1.25;
            color: var(--home-muted);
            white-space: normal;
            -webkit-line-clamp: 2;
        }

    .homeV2 .featuredContainer .itemSec.dealCardV1 .lower-deal {
        padding: 6px 10px 0;
    }

        .homeV2 .featuredContainer .itemSec.dealCardV1 .lower-deal .amnt {
            gap: 2px;
            height: 20px;
            padding: 0 7px;
            border-width: 1px;
            font-size: 11px;
            font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
            line-height: 1;
        }

            .homeV2 .featuredContainer .itemSec.dealCardV1 .lower-deal .amnt .redOptBadge {
                display: inline-flex;
                padding-top: 0 !important;
            }

            .homeV2 .featuredContainer .itemSec.dealCardV1 .lower-deal .amnt svg {
                width: 11px;
                height: 11px;
            }

    .homeV2 .featuredContainer .itemSec.dealCardV1 .dealExploreWrap {
        margin-top: auto;
        padding: 8px 10px 10px;
    }

    .homeV2 .featuredContainer .itemSec.dealCardV1 .dealExploreBtn {
        height: 28px;
        padding: 0 8px;
        border: 1px solid var(--home-text);
        border-radius: 999px;
        font-size: 12px;
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
        line-height: 1;
        white-space: nowrap;
    }

/* ===== Reward categories ===== */
.homeCatGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.homeV2 .homeCatTile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 84px;
    padding: 10px 6px;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    background: #fff;
    text-align: center;
    color: var(--home-text);
}

.homeCatIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--home-red);
}

    .homeCatIcon img {
        max-width: 28px;
        max-height: 28px;
        object-fit: contain;
    }

/* Figma Body/S/Medium: Rubik Medium 14/20, centred */
.homeV2 .homeCatText {
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd";
    font-size: 14px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
}

/* Categories past the first six stay folded until "Show more" (_HomeCatalog) opens the grid. */
.homeV2 .homeCatGrid:not(.homeCatOpen) .homeCatExtra {
    display: none;
}

.homeV2 .homeCatToggle {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    border: 1px solid var(--home-red-soft);
    border-radius: 12px;
    background: #fff;
    color: var(--home-red);
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
}

    .homeV2 .homeCatToggle svg {
        transition: transform .2s;
    }

.homeV2 .homeCatOpen .homeCatToggle svg {
    transform: rotate(180deg);
}

/* ===== Brands you love ===== */
.homeBrandStrip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

    .homeBrandStrip::-webkit-scrollbar {
        display: none;
    }

.homeV2 .homeBrand {
    display: flex;
    flex: 0 0 76px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--home-text);
}

.homeBrandLogo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    background: #fff;
}

    .homeBrandLogo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.homeBrandName {
    width: 100%;
    overflow: hidden;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* No wishlist brands: one line of text in place of the logos. */
.homeV2 .homeBrandsEmpty {
    flex: 1 1 100%;
    padding: 12px 8px;
    color: var(--home-text);
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    white-space: normal;
}

/* ===== Refer a friend ===== */
.homeV2 .homeRefer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 16px 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--home-red);
    color: #fff;
}

.homeReferIcon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

.homeReferText {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    line-height: 1.3;
}

    .homeReferText b {
        font-size: 14px;
        font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    }

.homeReferArrow {
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 1;
}

/* ===== Quick links + link list ===== */
.homeQuickLinks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 16px;
}

.homeV2 .homeQuickLink {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: 12px;
    background: var(--home-tile);
    color: var(--home-text);
}

    .homeQuickLink b {
        font-size: 12px;
        font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    }

    .homeQuickLink span {
        font-size: 10px;
        color: var(--home-muted);
    }

.homeLinkList {
    margin: 12px 16px 24px;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 16px;
    background: #fff;
}

.homeV2 .homeLinkRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border-bottom: 1px solid var(--home-line);
    font-size: 14px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    color: var(--home-text);
}

    .homeV2 .homeLinkRow:last-child {
        border-bottom: 0;
    }

    .homeV2 .homeLinkRow span {
        display: inline-flex;
        line-height: 1;
    }

/* RTL: flip the "›" arrows. Index.cshtml adds .homeRtl when the Arabic stylesheet is active. */
.homeV2.homeRtl .homeLinkRow .homeLinkArrow,
.homeV2.homeRtl .homeReferArrow,
.homeV2.homeRtl .homeStreakArrow,
.homeV2.homeRtl .homeUpgradeStrip svg {
    transform: scaleX(-1);
}

/* ===== Streak icons on the home card ===== */
.homeStreakCal svg {
    width: 16px;
    height: 16px;
}

.homeV2 .homeStreakChip svg {
    width: 14px;
    height: 16px;
}

.homeStreakHint {
    display: flex;
    align-items: center;
    gap: 8px;
}

.homeStreakHintIcon {
    display: inline-flex;
    flex: 0 0 auto;
}

    .homeStreakHintIcon svg {
        width: 20px;
        height: 20px;
    }

.homeStreakTileTop svg {
    width: 14px;
    height: 14px;
}

/* ===== Streak Journey page ===== */
.streakJourney {
    padding-bottom: 96px; /* room for the sticky button */
}

.sjHero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 12px 16px;
    padding: 16px;
    border-radius: 20px;
    background: #1A222E;
    color: #fff;
}

.sjHeroIcon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--home-red);
}

    .sjHeroIcon svg {
        width: 24px;
        height: 24px;
    }

.sjHeroText {
    flex: 1;
    min-width: 0;
}

.sjHeroLabel {
    font-size: 11px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.sjHeroTitle {
    font-size: 22px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    line-height: 1.2;
}

.sjHeroSub {
    font-size: 13px;
    color: #B8BEC7;
}

/* Figma: "Day 1 ... Day 10" sits above a solid white track with the red fill. */
.sjProgress {
    flex: 1 0 100%;
    margin-top: 14px;
}

.sjProgressEnds {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 11px;
    color: #D7DBE0;
}

.sjProgressBar {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #fff;
}

    .sjProgressBar span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--home-red);
    }

.sjHint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 16px;
    padding: 12px 14px;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    background: #fff;
    font-size: 12px;
    line-height: 1.4;
    color: #333;
}

.sjHintIcon {
    display: inline-flex;
    flex: 0 0 auto;
}

/* "Your 10 Days" list - Figma STREAK JOURNEY frame. Every row has a 32px round icon:
   green + white check (done), red + white flame (today), light grey + dark line icon
   (locked); talabat uses the supplied badge image. */
.sjDays {
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
}

.sjDaysHead {
    padding: 14px 16px 10px;
}

.sjDaysTitle {
    font-size: 16px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    color: var(--home-text);
}

.sjDaysSub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--home-muted);
}

.sjRow {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 16px;
    border-top: 1px solid #EEEEEE;
}

.sjRowIcon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    background: #F2F3F5;
    color: #1F2937;
}

    .sjRowIcon svg {
        width: 16px;
        height: 16px;
    }

    .sjRowIcon .sjTalabat {
        width: 32px;
        height: 32px;
    }

.sjRow.is-done .sjRowIcon {
    background: #22C55E;
    color: #fff;
}

    .sjRow.is-done .sjRowIcon svg {
        width: 16px;
        height: 16px;
    }

.sjRow.is-today {
    background: #FAE6E6;
}

    .sjRow.is-today .sjRowIcon {
        background: var(--home-red);
        color: #fff;
    }

.sjRowText {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

    .sjRowText b {
        font-size: 13px;
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
        color: var(--home-text);
    }

    .sjRowText span {
        font-size: 11px;
        color: var(--home-muted);
    }

.sjRow.is-locked .sjRowText b {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    color: #6B7280;
}

.sjRowReward {
    flex: 0 0 auto;
    max-width: 40%;
    font-size: 13px;
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd"; font-weight: normal;
    line-height: 1.3;
    color: #4B5563;
    text-align: end;
}

.sjRow.is-done .sjRowReward {
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    color: #22C55E;
}

.sjRow.is-today .sjRowReward {
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    color: var(--home-red);
}
/* Prize carousel ("Prizes up for grabs"): the streak's high-value prizes as swipeable cards - a soft red glow
   behind the prize image, a "Top prize" pill and the name; the next card peeks in. */
.sjPrizes {
    margin: 12px 16px;
    padding: 14px 0 12px;
    overflow: hidden;
    border-radius: 16px;
}

.sjPrizesHead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px 12px;
}

.sjPrizesIcon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--home-red-soft);
    color: var(--home-red);
}

    .sjPrizesIcon svg {
        width: 18px;
        height: 18px;
    }

.sjPrizesTitle {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    font-size: 16px;
    line-height: 1.2;
    color: #080808;
}

.sjPrizesSub {
    margin-top: 4px;
    font-family: "IRANYekanRegularRd"; font-weight: normal;
    font-size: 12px;
    line-height: 1.2;
    color: #6B6D75;
}

.sjPrizesTrack {
    display: flex;
    gap: 12px;
    padding: 2px 16px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    .sjPrizesTrack::-webkit-scrollbar {
        display: none;
    }

.sjPrize {
    flex: 0 0 74%;
    max-width: 280px;
    scroll-snap-align: start;
    overflow: hidden;
    border: 1px solid #F1E3E3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(232, 34, 40, .08);
}

.sjPrizes.is-single .sjPrize {
    flex-basis: 100%;
    max-width: none;
}

.sjPrizeMedia {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 18px;
    background: radial-gradient(circle at 50% 58%, #FFFFFF 0, #FFF1F1 42%, #FAD9DA 100%);
}

    .sjPrizeMedia img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 8px 12px rgba(26, 34, 46, .18));
    }

.sjPrizeNoImage svg {
    width: 56px;
    height: 54px;
}

.sjPrizeName {
    padding: 12px 14px 14px;
    overflow: hidden;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    font-size: 14px;
    line-height: 1.3;
    color: #080808;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sjPrizesDots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.sjPrizesDot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #E2E2E2;
    cursor: pointer;
    transition: width .25s ease, background-color .25s ease;
}

    .sjPrizesDot.is-active {
        width: 18px;
        background: var(--home-red);
    }

.sjFooter {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
}

.homeV2 .sjCta {
    display: flex;
    width: 100%;
    max-width: 948px;
    height: 46px;
    margin: 0 auto;
    font-size: 15px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
}

/* ===== Points page ===== */
.pointsPage {
    padding-bottom: 24px;
    background: #F5F6F8;
}

/* Tier-coloured band (Figma: gold gradient) holding swipeable white cards. */
.ptBand {
    padding: 24px 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tier, var(--home-red)) 75%, white), var(--tier, var(--home-red)));
}

.ptCards {
    display: flex;
    gap: 12px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

    .ptCards::-webkit-scrollbar {
        display: none;
    }

.ptCard {
    display: flex;
    flex: 0 0 88%;
    flex-direction: column;
    max-width: 420px;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    scroll-snap-align: start;
}

.ptCards .ptCard:only-child {
    flex-basis: 100%;
    max-width: none;
}

.ptCardBody {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 16px 14px;
    text-align: center;
}

.ptTier {
    display: inline-block;
    padding: 4px 16px;
    border: 1px solid color-mix(in srgb, var(--tier, var(--home-red)) 45%, white);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tier, var(--home-red)) 8%, white);
    font-size: 14px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--tier, var(--home-red));
}

.ptBalance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 46px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    line-height: 1.05;
    color: #111;
}

.ptCoin {
    display: inline-flex;
    color: var(--tier, var(--home-red));
}

    .ptCoin svg {
        width: 30px;
        height: 30px;
    }

.ptProgress {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    font-size: 11px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
}

.ptProgressFrom {
    color: var(--tier, var(--home-red));
}

.ptProgressTo {
    color: var(--next-tier, var(--home-red));
}

.ptProgressBar {
    flex: 1;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #E6E6E6;
}

    .ptProgressBar span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--next-tier, #E82228);
    }

.ptExpiry {
    margin-top: 8px;
    font-size: 11px;
    color: #6B7280;
    text-align: center;
}


/* Figma: light grey footer with a hairline border on top; whole sentence bold black,
   chevron icon after it. */
.homeV2 .ptCardFoot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 11px 12px;
    border-top: 1px solid #E3E5E8;
    background: #F1F2F4;
    font-size: 13px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    text-align: center;
    color: #1A1A1A;
}

    .homeV2 .ptCardFoot b {
        font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    }

.ptFootArrow {
    display: inline-flex;
    flex: 0 0 auto;
}

.homeV2.homeRtl .ptFootArrow {
    transform: scaleX(-1);
}

.ptActions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px;
}

.homeV2 .ptAction {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 108px;
    padding: 10px 6px;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    line-height: 1.2;
    text-align: center;
    color: var(--home-text);
}

.ptActionIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--home-red-soft);
}

    .ptActionIcon svg {
        width: 20px;
        height: 20px;
    }

.homeV2 .ptUnlock {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px;
    padding: 14px;
    border-radius: 12px;
    background: #080808;
    color: #fff;
}

.ptUnlockIcon {
    display: inline-flex;
    flex: 0 0 auto;
}

.ptUnlockText {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    opacity: .95;
}

    .ptUnlockText b {
        font-size: 13px;
        font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    }

.ptUnlockArrow {
    display: inline-flex;
    flex: 0 0 auto;
}

.homeV2.homeRtl .ptUnlockArrow {
    transform: scaleX(-1);
}

/* Figma POINTS frame: bold title above a white card of tall rows - red line icons,
   soft red check circles for benefits, light grey chevrons for actions. */
.ptSection {
    margin: 28px 16px 0;
}

    .ptSection:last-child {
        margin-bottom: 28px;
    }

.ptListTitle {
    margin-bottom: 12px;
    font-size: 18px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    color: var(--home-text);
}

.homeV2 .ptList {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
}

.homeV2 .ptRow {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 0 18px;
    border-top: 1px solid #EEEEEE;
    color: var(--home-text);
}

    .homeV2 .ptRow:first-child {
        border-top: 0;
    }

.ptRowIcon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--home-red);
}

    .ptRowIcon svg,
    .ptRowIcon img {
        max-width: 24px;
        max-height: 24px;
    }

.ptRowText {
    flex: 1;
    font-size: 15px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
}

.ptCheck {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E800098F; /* Figma: #E80009 at 56% */
    color: #fff;
}

    /* White tick from wwwroot/Content/img/icons/benefits/benefit-check.svg; the circle is
       this background, so themes (yooz-v2.css) can recolour it. */
    .ptCheck svg,
    .ptCheck img {
        width: 13px;
        height: 13px;
    }

.ptArrow {
    display: inline-flex;
    flex: 0 0 auto;
    color: #C4C8CF;
}

.homeV2.homeRtl .ptArrow {
    transform: scaleX(-1);
}

/* ===== Fixes: tier pill, transfer strip, streak card on narrow phones ===== */
.homeV2 .homeTierPill {
    gap: 6px;
    border-color: color-mix(in srgb, var(--tier, var(--home-red)) 45%, white);
    background: color-mix(in srgb, var(--tier, var(--home-red)) 10%, white);
    color: var(--home-text);
    white-space: nowrap;
}

.homeV2 .homeTierName {
    color: color-mix(in srgb, var(--tier, var(--home-red)) 80%, black);
}

.homeV2 .homeTierPoints {
    gap: 4px;
}

.homeV2 .homeTierCoin {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: var(--tier, var(--home-red));
}

    .homeV2 .homeTierCoin svg {
        display: block;
        position: static;
        width: 14px;
        height: 14px;
    }

.homeV2 .homeGiftPill svg {
    flex: 0 0 auto;
}

.homeV2 .homeTransferStrip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--home-line);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    color: var(--home-text);
}

    .homeV2 .homeTransferStrip > span:nth-child(2) {
        flex: 1;
    }

.homeTransferIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--home-red-soft);
}

    .homeTransferIcon svg {
        width: 16px;
        height: 16px;
    }

/* Streak buttons stay on one line */
.homeV2 .homeStreakActions .homeBtn {
    padding: 0 10px;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .homeStreak {
        padding: 12px;
    }

    .homeStreakGrid {
        gap: 5px;
    }

    .homeStreakTileTop {
        gap: 2px;
        min-height: 24px;
        padding: 3px 1px;
        font-size: 9.5px;
    }

        .homeStreakTileTop svg,
        .homeStreakTileTop .homeStreakBadge {
            width: 11px;
            height: 11px;
            font-size: 8px;
        }

    .homeStreakTileText {
        min-height: 46px;
        padding: 4px 2px;
        font-size: 10px;
        word-break: break-word;
    }

    .homeV2 .homeStreakActions {
        gap: 8px;
    }

        .homeV2 .homeStreakActions .homeBtn {
            height: 36px;
            font-size: 13px;
        }

    .homeStreakDay {
        font-size: 15px;
    }

    .homeStreakLink {
        font-size: 12px;
    }
}

/* ===== Design pass 2 (Figma home frames 33-35) ===== */
.homeV2 {
    background: #F2F2F2;
}

/* Home page: the whole page is light grey, not just the 980px .homeV2 column
   (.homeTop only exists on Home/Index). */
body:has(.homeTop) {
    background: #F2F2F2;
}

/* Site.css gives every .inner 97% width, leaving white strips at the screen edges around
   the grey page. Home V2 pages run edge to edge. */
.inner.homeV2 {
    width: 100%;
    min-width: 0;
}

/* Site.css paints .bodyCont white, which covered the grey from the streak card down.
   Let the page grey show through so the whole home page is one light-grey surface. */
.homeV2 .bodyCont {
    background-color: transparent;
}

    /* Signed in with the streak off: gap between the banner carousel and "Deals for you", which
       takes the streak's place. Set as padding: a top margin would be swallowed by the floated
       .locationSec column above. */
    .homeV2 .bodyCont:not(:has(> .homeStreak, > .homeStreakActions)) {
        padding-top: 7px;
    }

.homeTop {
    padding-bottom: 2px;
}

/* status row: chip + tier pill on the end side */
.homeV2 .homeStreakChip {
    height: 32px;
    padding: 0 12px;
    border-color: #F3D9D9;
    font-size: 14px;
}

.homeV2 .homeTierPill {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

/* green upgrade strip */
.homeV2 .homeUpgradeStrip {
    border: 1px solid #CFE6C6;
    background: #EEF7EA;
    font-size: 13px;
    color: #2E3A2A;
}

/* hero banner card */
.homeTop .homeBannersSec {
    margin: 12px 16px 0;
}

.homeBanner {
    border-radius: 14px;
}

/* streak card header + hint */
.homeStreakCal {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

    .homeStreakCal svg {
        width: 18px;
        height: 18px;
        color: #fff;
    }

.homeStreakDay {
    font-size: 18px;
}

.homeStreakOf {
    color: var(--home-red);
}

.homeV2 .homeStreakLink {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
}

.homeStreakHint {
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--home-red-soft);
    font-size: 13px;
}

.homeStreakHintText {
    flex: 1 1 200px;
}

.homeStreakLeft {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--home-muted);
}

/* deal cards: points badge sits on the image's top corner */
.homeV2 .featuredContainer .itemSec.dealCardV1 {
    position: relative;
}

    .homeV2 .featuredContainer .itemSec.dealCardV1 .imgWrapper img {
        border-radius: 10px 10px 0 0;
    }

    .homeV2 .featuredContainer .itemSec.dealCardV1 .lower-deal {
        position: absolute;
        top: 8px;
        inset-inline-end: 8px;
        padding: 0;
    }

        .homeV2 .featuredContainer .itemSec.dealCardV1 .lower-deal .amnt {
            height: 22px;
            padding: 0 8px;
            border: 0;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
            color: var(--tier, var(--home-red));
        }

    .homeV2 .featuredContainer .itemSec.dealCardV1 .descDiv {
        padding-top: 10px;
    }

.homeV2 .homeViewAll {
    height: 42px;
    border-color: var(--home-text);
    color: var(--home-red);
    font-size: 14px;
}

/* section titles */
.homeV2 .homeSecTitleLight {
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd"; font-weight: normal;
}

/* Figma: "Our Reward Categories" - Rubik Regular 16px, line height 100%, #000000 */
.homeV2 .homeCategoriesSec .homeSecTitle {
    font-family: "IRANYekanRegularRd";
    font-size: 16px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    color: #000000;
}

/* brands you love: card with bordered tiles + dots */
/* Figma: "Brands You Love" - Rubik SemiBold 18px, line height 100%, Text/strong #080808 */
.homeV2 .homeBrandsSec .homeSecTitle {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 18px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    color: #080808;
}

/* Fixed tile size: width/min-width stop a long (nowrap) title from stretching the flex item,
   so the name is cut with "..." (.homeBrandName) and every tile stays the same size. */
.homeV2 .homeBrand {
    flex: 0 0 92px;
    width: 92px;
    min-width: 0;
    max-width: 92px;
    box-sizing: border-box;
    gap: 6px;
    padding: 10px 6px;
    border: 1px solid var(--home-line);
    border-radius: 16px;
    background: #fff;
}

.homeBrandLogo {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
}

.homeBrandName {
    display: block;
    max-width: 100%;
    min-width: 0;
    font-size: 12px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
}

.homeDots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

    .homeDots:empty {
        display: none;
    }

    .homeDots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #D0D0D0;
    }

        .homeDots span.active {
            background: var(--home-red);
        }

/* refer banner */
.homeV2 .homeRefer {
    padding: 16px;
    background: #E31C24;
}

/* Figma: "Refer a friend, get rewarded" - Rubik SemiBold 14/16, white */
.homeReferText b {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 14px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 16px;
    letter-spacing: 0;
    color: #FFFFFF;
}

/* Figma: "Earn up to 500 bonus points per invite" - Rubik Regular 12/16, white */
.homeReferText span {
    font-family: "IRANYekanRegularRd";
    font-size: 12px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 16px;
    letter-spacing: 0;
    color: #FFFFFF;
}

/* quick links: white bordered tiles */
.homeV2 .homeQuickLink {
    border: 1px solid var(--home-line);
    background: #fff;
}

    .homeQuickLink b {
        font-size: 13px;
    }

    .homeQuickLink span {
        font-size: 11px;
    }

/* statements / vouchers list (Figma): Inter 14/500, Text/strong #080808 */
.homeV2 .homeLinkRow {
    padding: 18px 16px;
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd";
    font-size: 14px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    color: #080808;
}

/* Refer icon from Figma is a plain white glyph (no circle behind it). */
.homeReferIcon {
    width: 28px;
    height: 28px;
    background: transparent;
}

/* Figma lock glyph is 14x17 - keep its proportions in the streak tile header. */
.homeStreakTile.is-locked .homeStreakTileTop svg {
    width: 11px;
    height: 13px;
}

/* category tile icons use currentColor (see _CategoryIcon) */
.homeV2 .homeCatIcon {
    color: #E82228;
}

/* Talabat logo is a full SVG now - the badge is just a sizing box. */
.homeStreakBadge {
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: none;
}

    .homeStreakBadge svg,
    .homeStreakTile .homeStreakTileTop .homeStreakBadge svg {
        width: 16px;
        height: 16px;
    }

/* Figma coin (gold badge + sparkles) next to point balances */
.homeV2 .homeTierCoin {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
}

    .homeV2 .homeTierCoin svg {
        width: 18px;
        height: 18px;
    }

.ptCoin svg {
    width: 34px;
    height: 34px;
}

/* The shared .pages-header is position:fixed (40px tall) and doesn't push content down -
   each page reserves the space itself. */
.homeV2.pointsPage,
.homeV2.streakJourney {
    padding-top: 40px;
}

/* Home V2: the Figma home frame has no app header - the status row (streak chip + tier pill)
   is the top of the page. The layout's transparent .home-header overlapped it, so hide it on
   pages that load this stylesheet (it is already hidden on non-home pages by master.js). */
.home-header {
    display: none !important;
}

.homeTop {
    padding-top: 14px;
}

/* status pills, per the frame: white flame chip, pale-gold tier pill */
.homeV2 .homeStreakChip {
    height: 34px;
    padding: 0 12px;
    border: 1px solid #F6D4D5;
    background: #fff;
    font-size: 15px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.homeV2 .homeTierPill {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--tier, var(--home-red)); /* tier colour (Helper/TierColors) */
    background: color-mix(in srgb, var(--tier, var(--home-red)) 14%, white);
    font-size: 13px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
}

.homeV2 .homeTierName {
    color: color-mix(in srgb, var(--tier, var(--home-red)) 85%, black);
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
}

/* Figma: one plain sentence in muted green on a pale green strip, black chevron at the end. */
.homeV2 .homeUpgradeStrip {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #C4D6B9;
    border-radius: 10px;
    background: #EEF7EA;
    font-size: 13px;
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd"; font-weight: normal;
    color: #60814D;
}

.homeUpgradeArrow {
    flex: 0 0 auto;
}

/* quick links (Figma): three white rounded cards, no border, soft shadow; bold title over a
   grey subtitle, each on one line. */
.homeQuickLinks {
    gap: 10px;
}

.homeV2 .homeQuickLink {
    min-width: 0;
    gap: 3px;
    padding: 12px 12px 11px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

    .homeV2 .homeQuickLink b,
    .homeV2 .homeQuickLink span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Figma: Inter Semi Bold 12px, line height 100%, Text/strong #080808 */
    .homeV2 .homeQuickLink b {
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
        font-size: 12px;
        font-weight: normal; /* weight comes from the IRANYekan cut */
        line-height: 1;
        letter-spacing: 0;
        color: #080808;
    }

    /* Figma: Inter Regular 10px, line height 100%, Text/weak #6C727F */
    .homeV2 .homeQuickLink span {
        font-family: "IRANYekanRegularRd";
        font-size: 10px;
        font-weight: normal; /* weight comes from the IRANYekan cut */
        line-height: 1;
        letter-spacing: 0;
        color: #6C727F;
    }

/* Tier names in running text use their own tier colour (Helper/TierColors). */
.homeV2 .ptTierText {
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
}

/* Red chevron (Figma) after "View all partners". */
.homeRedArrow {
    display: inline-flex;
    flex: 0 0 auto;
    vertical-align: middle;
}

.homeV2.homeRtl .homeRedArrow {
    transform: scaleX(-1);
}

/* "Deals for you" points pill (Figma): white rounded pill on the image's top corner, outline
   star + points, both in the user's tier colour (--tier from Pages/Home/Index). The old
   footer amount is hidden on these cards; catalog cards keep it. */
.homeV2 .featuredContainer .itemSec.dealCardV1 .lower-deal {
    display: none;
}

.homeV2 .featuredContainer .itemSec.dealCardV1 .dealPointsPill {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    font-size: 12px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
    line-height: 1;
    color: var(--tier, var(--home-red));
}

    .homeV2 .featuredContainer .itemSec.dealCardV1 .dealPointsPill svg {
        width: 13px;
        height: 13px;
    }

/* Figma: "Deals for …" title - Inter Bold 16px, line height 100%, Text/strong #080808 */
.homeV2 .hotDealsSec .homeSecTitle {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 16px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    color: #080808;
}

/* Figma: "View All Partners & Categories" - Rubik SemiBold 14px, line height 100%,
   Text/Brand/default #E80009 */
.homeV2 .homeViewAll {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 14px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    color: #E80009;
}

/* Figma: deal card "Explore More" - Rubik Medium 12px, line height 100%, Text/strong #080808 */
.homeV2 .featuredContainer .itemSec.dealCardV1 .dealExploreBtn {
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd";
    font-size: 12px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    color: #080808;
}

/* Figma radii: "View all" button 20px, deal card 16px (image top corners follow), deal
   card "Explore More" button 16px. */
.homeV2 .homeViewAll {
    border-radius: 20px;
}

.homeV2 .featuredContainer .itemSec.dealCardV1 {
    border-radius: 16px;
}

    .homeV2 .featuredContainer .itemSec.dealCardV1 .imgWrapper img {
        border-radius: 16px 16px 0 0;
    }

    .homeV2 .featuredContainer .itemSec.dealCardV1 .dealExploreBtn {
        border-radius: 16px;
    }

/* Figma: the whole "Deals for you" section card has a 12px radius. */
.homeV2 .hotDealsSec {
    border-radius: 12px;
}

/* Deal of the week: every active campaign is a full-width card in a swipeable strip
   (scroll-snap); dots underneath when there is more than one. */
.homeV2 .homeDealWeekStrip {
    display: flex;
    gap: 12px;
    margin: 12px 0;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
}

    .homeV2 .homeDealWeekStrip::-webkit-scrollbar {
        display: none;
    }

    .homeV2 .homeDealWeekStrip .homeDealWeek {
        flex: 0 0 100%;
        margin: 0;
        scroll-snap-align: start;
    }

.homeV2 .homeDealWeekDots {
    margin: -2px 0 12px;
}

/* Figma: "Redeem Offer" - Inter Semi Bold 13px, line height 100%, Bg/Brand/default
   #E80009 on white, 100px radius */
.homeV2 .homeDealWeekBtn {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 13px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    border-radius: 100px;
    color: #E80009;
}

/* Figma streak hint: Inter Regular 13px (line height 100%), "Talabat voucher" Inter Bold
   13px, "· 14h left" Inter Regular 10px. */
.homeV2 .homeStreakHint {
    font-family: "IRANYekanRegularRd";
    font-size: 13px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    background: #FFF5F5;
    border-radius: 12px;
}

    .homeV2 .homeStreakHint b {
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    }

.homeV2 .homeStreakLeft {
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
}

/* Streak notes above the hint: the challenge completed (green, as done tiles) or a missed day that
   restarted it at Day 1 (amber). */
.homeV2 .homeStreakNote {
    line-height: 1.3;
}

    .homeV2 .homeStreakNote.is-completed {
        background: #EAF6EF;
        color: #219653;
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    }

    .homeV2 .homeStreakNote.is-reset {
        background: #FFF4E5;
        color: #B25E00;
    }

/* The checkpoint day's flag on its tile. */
.homeV2 .homeStreakCheckpoint {
    margin-inline-start: 2px;
    font-size: 11px;
    line-height: 1;
}

/* The streak "you won" popup reuses Scratch And Win's (.scratchWinInfoPopup, Site.css); only its extras here. */
.streakPrizePopup .scratchWinInfoCongratsMsg {
    text-align: center;
    padding: 24px 20px;
}

.streakPrizePopup .streakPrizeDay {
    margin: 4px 0;
    font-size: 14px;
    color: #616161;
}

/* bPopup moves the popup out of .homeV2, so the button is styled here rather than by .homeBtn. */
.streakPrizePopup .streakPrizeOk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 40px;
    margin-top: 16px;
    padding: 0 24px;
    border-radius: 100px;
    background: #E82228;
    color: #fff;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 14px;
    cursor: pointer;
}

/* Figma: "Streak Journey" link - Inter Medium 13px, line height 100%, Text/Brand/default #E80009 */
.homeV2 .homeStreakLink {
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd";
    font-size: 13px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    color: #E80009;
}

/* Figma: day tile labels (every day except the red ones - today and the mega day) -
   Inter Bold 10px, line height 100%, centred, #333333 */
.homeV2 .homeStreakTile:not(.is-today):not(.is-mega) .homeStreakTileText {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 10px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #333333;
}

/* Figma: "Day 1" … "Day 10" in each tile's coloured header - Inter Bold 9px, line height 100% */
.homeV2 .homeStreakTile .homeStreakTileTop {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 9px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
}

/* Figma: "Redeem a Voucher" and "Buy Points" buttons - 32px radius */
.homeV2 .homeStreakActions .homeBtn,
.homeV2 .homeStreakActions .homeBtnOutline {
    border-radius: 32px;
}

/* Figma: streak action buttons - Rubik Bold, line height 100%, centred; 13px on a 36px button so the day path
   leads the card. "Buy Points" white text, "Redeem a Voucher" #F72B31. */
.homeV2 .homeStreakActions .homeBtn {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 13px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}

.homeV2 .homeStreakActions .homeBtnRed {
    color: #FFFFFF;
}

.homeV2 .homeStreakActions .homeBtnOutline {
    color: #F72B31;
}

/* Figma: upgrade strip sentence - Inter Semi Bold 12px, line height 100%, #60814D */
.homeV2 .homeUpgradeStrip {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 12px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    color: #60814D;
    border-radius: 20px;
}

/* Figma: tier pill ("Silver ○ 107 pts") - 100px radius */
.homeV2 .homeTierPill {
    border-radius: 100px;
}

/* Figma: streak flame chip ("🔥 3") - 100px radius, same as the tier pill */
.homeV2 .homeStreakChip {
    border-radius: 100px;
}

/* "Day 4 / 10": one text run with real spaces (Day 4, space, "/ 10"), 10px after the icon. */
.homeV2 .homeStreakDay {
    gap: 10px;
}

.homeStreakDayText {
    white-space: nowrap;
}

/* Figma Points page actions (Buy Points / Redeem Points / Transfer to gift wallet):
   tiles 12px radius; labels Body/S/Medium - Rubik Medium 14/20, centred. */
.homeV2 .ptAction {
    border-radius: 12px;
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd";
    font-size: 14px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
}

/* Figma Points actions (107x118 tiles): white card, no border, soft shadow; 48px pale red
   circle with the red icon; label centred under it on two lines ("Buy / points"). */
.homeV2 .ptActions {
    gap: 12px;
}

.homeV2 .ptAction {
    gap: 16px;
    min-height: 118px;
    padding: 16px 8px;
    border: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    color: #080808;
}

    .homeV2 .ptAction .ptActionIcon {
        width: 48px;
        height: 48px;
        background: #FDECEC;
    }

        .homeV2 .ptAction .ptActionIcon svg {
            width: 24px;
            height: 24px;
        }

    .homeV2 .ptAction > span:last-child {
        max-width: 92px;
    }

/* Figma Points page section titles ("Your GOLD benefits", "More actions") -
   Body/M/SemiBold: Rubik SemiBold 16/24, Colors/Neutral/900 #080808 */
.homeV2 .ptListTitle {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 16px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 24px;
    letter-spacing: 0;
    color: #080808;
}

/* Figma Points list rows - benefits ("1 Points for every 1 IQD spend", partner deals,
   priority support) and "More actions" ("My statement", "My vouchers") - Body/S/Medium:
   Rubik Medium 14/20, #000000 */
.homeV2 .ptRow .ptRowText {
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd";
    font-size: 14px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 20px;
    letter-spacing: 0;
    color: #000000;
}

/* Figma "Unlock RED by earning more points / 150 more points > double points & VIP deals":
   Font-Face/Body (Rubik, as the other Body styles), white, line height 19px.
   First line Medium 500, second line Regular 400 12px. "Font Size/-2" taken as 12px. */
.homeV2 .ptUnlockText {
    gap: 0;
    font-family: "IRANYekanRegularRd";
    font-size: 12px;
    line-height: 19px;
    letter-spacing: 0;
    color: #FFFFFF;
    opacity: 1;
}

    .homeV2 .ptUnlockText b {
        font-size: 12px;
        font-family: "IRANYekanMediumRd", "IRANYekanRegularRd"; font-weight: normal;
        line-height: 19px;
    }

    .homeV2 .ptUnlockText > span {
        font-size: 12px;
        font-family: "IRANYekanRegularRd"; font-weight: normal;
        line-height: 19px;
    }

/* Figma: both Points list cards ("Your … benefits", "More actions") - 16px radius */
.homeV2 .ptSection .ptList {
    border-radius: 16px;
}

/* Figma tier card footer "Upgrade to RED to earn more": Font-Face/Body (Rubik), centred,
   Text/default #1A222E. "Upgrade to RED" Body/M/Medium (500), "to earn more" Body/M/Regular
   (400). Size/line height tokens "-3" taken as 11px / 16px. */
.homeV2 .ptCard:not(.ptCardGift) .ptCardFoot {
    font-family: "IRANYekanRegularRd";
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
    color: #1A222E;
}

    .homeV2 .ptCardFoot .ptFootStrong {
        font-family: "IRANYekanMediumRd", "IRANYekanRegularRd"; font-weight: normal;
    }

    .homeV2 .ptCardFoot .ptFootRest {
        font-family: "IRANYekanRegularRd"; font-weight: normal;
    }

/* Figma Streak Journey "Complete Today's Mission" - Button/Filled-L: Font-Face/Body (Rubik)
   Medium 500, centred, Text/Inverted/button-primary (white). Tokens "Font Size/-1" and
   "Line Height/-2,5" taken as 14px / 18px. */
.homeV2 .sjCta {
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd";
    font-size: 14px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 18px;
    letter-spacing: 0;
    text-align: center;
    color: #FFFFFF;
}

/* Figma Streak Journey rule hint ("Redeem a voucher or buy points once a day…") -
   Rubik Regular 13/20, Text/default #1A222E; card 16px radius. */
.homeV2 .sjHint {
    border-radius: 16px;
    font-family: "IRANYekanRegularRd";
    font-size: 13px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 20px;
    letter-spacing: 0;
    color: #1A222E;
}

/* Figma Streak Journey hero ("3 Day Streak" card): 20px radius; text styles below. */
.homeV2 .sjHero {
    border-radius: 20px;
}

/* "YOUR CURRENT STREAK" - Rubik SemiBold 12px, line height 100%, uppercase, white */
.homeV2 .sjHeroLabel {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 12px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: .05em; /* Figma "50%"; the frame shows slight tracking, not half a letter width */
    text-transform: uppercase;
    color: #FFFFFF;
}

/* "3 Day Streak" - Rubik Bold 22px, line height 100%, white */
.homeV2 .sjHeroTitle {
    margin-top: 6px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 22px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    color: #FFFFFF;
}

/* "Day 3 of your 10-day challenge" - Rubik Regular 13px, line height 100%, #94A3B8 */
.homeV2 .sjHeroSub {
    margin-top: 6px;
    font-family: "IRANYekanRegularRd";
    font-size: 13px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    color: #94A3B8;
}

/* Figma "Your 10 Days" - Rubik SemiBold 16px, line height 100% */
.homeV2 .sjDaysTitle {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 16px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
}

/* Figma day row titles ("Bought Points" …) - Rubik SemiBold 14px, line height 100%;
   Text/strong #080808 on done/today rows (locked rows keep their grey). */
.homeV2 .sjRowText b {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 14px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
}

.homeV2 .sjRow:not(.is-locked) .sjRowText b {
    color: #080808;
}

/* Figma locked day row titles ("So close" …) - Rubik Medium 14px, line height 100%,
   Text/weak #6C727F */
.homeV2 .sjRow.is-locked .sjRowText b {
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd"; font-weight: normal;
    color: #6C727F;
}

/* Figma day row subtitles ("10,000 IQD", "Completed" …) - Rubik Regular 12px, line height
   100%; locked rows Text/disabled #9DA3AE. */
.homeV2 .sjRowText span {
    margin-top: 4px;
    font-family: "IRANYekanRegularRd";
    font-size: 12px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
}

.homeV2 .sjRow.is-locked .sjRowText span {
    color: #9DA3AE;
}

/* Figma "Check in daily. Bigger rewards are waiting." - Rubik Regular 12px, line height 100%, #6B6D75 */
.homeV2 .sjDaysSub {
    margin-top: 6px;
    font-family: "IRANYekanRegularRd";
    font-size: 12px;
    font-weight: normal; /* weight comes from the IRANYekan cut */
    line-height: 1;
    letter-spacing: 0;
    color: #6B6D75;
}

/* Today's Mission flame keeps its 16x21 proportions inside the 32px red circle. */
.homeV2 .sjRow.is-today .sjRowIcon svg {
    width: 14px;
    height: 18px;
}

/* Figma Points actions: icons line up across the three tiles (content from the top, not
   centred) and every label takes two lines - "Buy / points" is narrower so it wraps too. */
.homeV2 .ptAction {
    justify-content: flex-start;
    padding-top: 18px;
}

    .homeV2 .ptAction > span:last-child {
        min-height: 40px; /* two lines of 20px */
    }

.homeV2 .ptActionBuy > span:last-child {
    max-width: 56px;
}

/* Streak card fixes:
   - the Talabat logo in the "Day 4" header was 16px next to 9px text and touching it -
     now 11px (same as the other header icons) with a small gap;
   - "Talabat voucher" in the hint stays on one line;
   - "Day 3 / 10" header text sits tighter (Figma) and closer to its gift icon. */
.homeV2 .homeStreakTile .homeStreakTileTop {
    gap: 3px;
}

    .homeV2 .homeStreakTile .homeStreakTileTop .homeStreakBadge,
    .homeV2 .homeStreakTile .homeStreakTileTop .homeStreakBadge svg {
        flex: 0 0 11px;
        width: 11px;
        height: 11px;
    }

.homeV2 .homeStreakHint b {
    white-space: nowrap;
}

.homeV2 .homeStreakDay {
    gap: 8px;
}

.homeV2 .homeStreakDayText {
    word-spacing: -2px;
}

/* Deal of the week = just the campaign's banner image from the API (it carries its own
   artwork and text), no red card around it, with the white "Redeem Offer" pill sitting on
   the image's bottom corner. */
.homeV2 .homeDealWeek.homeDealWeekBanner {
    position: relative;
    display: block;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: transparent;
}

    .homeV2 .homeDealWeekBanner .homeDealWeekBannerImg {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 16px;
        object-fit: cover;
    }

    /* small pill tucked into the bottom corner so it sits under the banner's own text */
    .homeV2 .homeDealWeekBanner .homeDealWeekBtn {
        position: absolute;
        bottom: 6px;
        inset-inline-start: 10px;
        margin: 0;
        padding: 5px 14px;
        font-size: 12px;
        line-height: 1.2;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    }

/* Deal of the week card as a slide of the hero banner carousel (after the banners):
   same size and corners as a .homeBanner so the slides don't jump in height. */
.homeV2 .homeBannerCarousel .homeDealWeek.homeBannerDeal {
    margin: 0;
    aspect-ratio: 2 / 1;
    min-height: 170px;
    border-radius: 14px;
}

    .homeV2 .homeBannerCarousel .homeBannerDeal .homeDealWeekBannerImg {
        width: 100%;
        height: 100%;
        border-radius: 14px;
        object-fit: cover;
    }

    /* "Redeem Offer" styled like the banner's "Enter The Draw" button (.homeBannerBtn), but kept
       low in the corner so it doesn't cover the artwork's own text ("Available for all users."). */
    .homeV2 .homeBannerCarousel .homeBannerDeal .homeDealWeekBtn {
        display: inline-flex;
        align-items: center;
        bottom: 8px;
        inset-inline-start: 10px;
        height: 28px;
        padding: 0 16px;
        border-radius: 999px;
        background: var(--home-red);
        box-shadow: none;
        font-size: 12px;
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
        font-weight: normal;
        line-height: 1;
        color: #fff;
    }

/* Old portal "Win a Mercedes" card (_MegaCampaignSection) in the streak's place. Its own styles
   come from Site.css; here it only gets the home side margins. The red mega campaign video
   tile ("Drive into 2027 ...", links to Home/GetMegaCampaignPage) shows under the card. */
/* It sits after "Deals for you" (whose card margin gives the gap above it).
   clear: the empty floated .locationSec column above (min-height 1px) would otherwise push
   this flex box beside it, off to the side. */
.homeV2 .homeMegaCampaign {
    clear: both;
    margin: 0 16px 12px;
}

    .homeV2 .homeMegaCampaign:empty {
        display: none;
    }

    .homeV2 .homeMegaCampaign .megaCampaignSection {
        float: none;
        padding: 0;
    }

    /* The caption bar hangs 18px below the tile (Site.css bottom: -18px): leave room for it. */
    .homeV2 .homeMegaCampaign .megaCampaignContainer {
        margin: 12px 0 18px;
    }

    /* Same 12px radius as the other home cards (.homeCard, "Deals for you"), not Site.css's 30px. */
    .homeV2 .homeMegaCampaign .megaCampaignContainer,
    .homeV2 .homeMegaCampaign .megaCampaignClip,
    .homeV2 .homeMegaCampaign .darkOverlay,
    .homeV2 .homeMegaCampaign .megaCampaignSectionBottomDiv {
        border-radius: 12px;
    }

    /* On home no white wrapper card (Site.css .entries-card) around the entries box: the box itself
       is the card, with the "Win a Mercedes" title inside it. */
    .homeV2 .homeMegaCampaign .entries-card {
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .homeV2 .homeMegaCampaign .entries-header {
        margin-bottom: 12px; /* inside the entries box, above the chances box */
    }

/* Deal of the week dots are tappable (jump to that deal). */
.homeV2 .homeDealWeekDots span {
    cursor: pointer;
}

/* statements / vouchers row icons: the red glyph sits in a light grey circle before the label. */
.homeV2 .homeLinkRow .homeLinkLabel {
    gap: 12px;
    align-items: center;
}

.homeV2 .homeLinkRow .homeLinkIcon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--home-tile);
}

/* Tickets pill next to the tier pill (_Wallet): same shape, white with a light red border,
   matching the tickets in the top bar of the other pages (AppHeader.css). */
.homeV2 .homeTicketPill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #F6D4D5;
    border-radius: 100px;
    background: #fff;
    color: var(--home-text);
    font-size: 13px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    white-space: nowrap;
    text-decoration: none;
}

    .homeV2 .homeTicketPill img {
        width: 16px;
        height: 16px;
    }

/* ===== Home: "Exchange Your Points" (Figma, _ExchangePoints.cshtml) - partner card, amount sheet, success popup ===== */
/* margin 0: .homeCard's own 12px/16px margin would push the card past the section's edges */
.homeV2 .ptExchangeCard {
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px 18px 12px 12px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    text-align: start;
    cursor: pointer;
}

.homeV2.homeRtl .ptExchangeCard {
    padding: 12px 12px 12px 18px;
}

.ptExchangeLogo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 8px;
    background: #5C0632; /* Qatar Airways maroon, shown until the logo file is added */
}

    .ptExchangeLogo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ptExchangeInfo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

    .ptExchangeInfo b {
        font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd";
        font-weight: normal;
        font-size: 16px;
        color: #080808;
    }

.ptExchangeRate {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 100px;
    background: #FDD9DA;
    color: #E80009;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
}

/* overlay shared by the sheet (bottom) and the success popup (centre) */
.ptExchangeOverlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
}

    .ptExchangeOverlay[hidden] {
        display: none;
    }

    .ptExchangeOverlay.ptExchangeCenter {
        align-items: center;
        padding: 16px;
    }

.ptExchangeLock {
    overflow: hidden;
}

.ptExchangeSheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 20px 16px 24px;
    border-radius: 16px 16px 0 0;
    background: #fff;
    text-align: center;
}

/* desktop: amount sheet becomes a centred popup instead of a bottom sheet */
@media (min-width: 768px) {
    #ptExchangeSheet {
        align-items: center;
        padding: 16px;
    }

    .ptExchangeSheet {
        border-radius: 16px;
    }
}

.ptExchangeClose {
    position: absolute;
    top: 18px;
    inset-inline-end: 14px;
    padding: 4px;
    border: 0;
    background: none;
    cursor: pointer;
}

.ptExchangeTitle {
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd";
    font-size: 20px;
    color: #080808;
    text-align: start;
}

.ptExchangeSub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    color: #8A8F98;
    font-size: 15px;
    text-align: start;
}

.ptExchangeLabel {
    display: block;
    margin: 28px 0 6px;
    color: #6C727F;
    font-size: 12px;
    font-weight: normal;
}

/* font-size shrinks with the number of digits (_ExchangePoints script) so big amounts stay readable */
/* "input." + sheet parent: beats Site.css input[type=text] (width 13vw, 16px, padding, border) */
/* the box hugs its content (width set by the script, in ch) and is centred, so the cursor
   starts at the beginning of "0,00" instead of in the middle; ltr so digits fill left to right */
.ptExchangeSheet input.ptExchangeAmount {
    display: block;
    box-sizing: content-box;
    width: 4.5ch;
    max-width: 100%;
    margin: 0 auto;
    direction: ltr;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: #080808;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 40px;
    line-height: 1.2;
    text-align: start;
    caret-color: #080808;
}

    .ptExchangeSheet input.ptExchangeAmount::placeholder {
        color: #8A8F98;
    }

.ptExchangeValue {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 100px;
    background: #F1F2F4;
    color: #6C727F;
    font-size: 12px;
}

.ptExchangeSheet input.ptExchangeAmount.hasValue ~ .ptExchangeValue {
    color: #080808;
}

.ptExchangeError {
    min-height: 18px;
    margin-top: 8px;
    color: #E80009;
    font-size: 12px;
}

.ptExchangeBtn,
.ptExchangeBtn:hover,
.ptExchangeBtn:focus {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 16px;
    border: 0;
    border-radius: 100px;
    background: #E80009;
    color: #fff;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

    .ptExchangeBtn:disabled {
        background: #F39396;
        cursor: default;
    }

.ptExchangeDone {
    position: relative;
    width: 100%;
    max-width: 300px;
    padding: 18px 14px 14px;
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

.ptExchangeDoneClose {
    position: absolute;
    top: -10px;
    inset-inline-end: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    cursor: pointer;
}

.ptExchangeDoneArt {
    display: block;
    width: 64px;
    height: 68px;
    margin: 0 auto;
    object-fit: contain;
}

.ptExchangeValue {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.ptExchangeDoneTitle {
    margin-top: 12px;
    color: #E80009;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd";
    font-size: 20px;
}

.ptExchangeDoneDesc {
    margin: 8px 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #E5E7EB;
    color: #9E9E9E;
    font-size: 15px;
    line-height: 1.4;
}

/* ===== Home: "How to Redeem" / "How to Buy Points" full-screen story (_HowToPopup.cshtml) =====
   Like a WhatsApp status: one story with both guides' BO page images - a bar section per image on
   top, close under it, the image over the whole screen. */
.howToPopup {
    --howto-slide-time: 10s;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #000;
}

    .howToPopup[hidden] {
        display: none;
    }

.howToBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    height: 100%;
    margin: 0 auto;
    background: #000;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
}

.howToLock {
    overflow: hidden;
}

    /* the app header's points / chances pills stay above the story - hide them while it's open */
    .howToLock .appHeader .appHeaderStats {
        visibility: hidden;
    }

.howToBars {
    display: flex;
    gap: 4px;
    padding: 12px 12px 0;
    padding-top: max(12px, env(safe-area-inset-top));
}

.howToBar {
    flex: 1 1 0;
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255, 255, 255, .35);
}

    .howToBar > span {
        display: block;
        width: 0;
        height: 100%;
        background: #fff;
    }

    .howToBar.done > span {
        width: 100%;
    }

    .howToBar.active > span {
        animation: howToFill var(--howto-slide-time) linear forwards;
    }

.howToPaused .howToBar.active > span {
    animation-play-state: paused;
}

@keyframes howToFill {
    from { width: 0; }
    to { width: 100%; }
}

.howToHead {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 16px;
}

.howToClose {
    display: inline-flex;
    padding: 6px;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
}

/* everything under the close button is the tap zone (back on the start third, forward elsewhere) */
.howToSlides {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    cursor: pointer;
    touch-action: pan-y;
}

/* one section: the image over the whole story screen, bars and close float over it (shaded so
   they show on light images); the image is shown whole, never cropped, on black */
.howToBars,
.howToHead {
    position: relative;
    z-index: 1;
}

.howToBox::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 96px;
    background: linear-gradient(rgba(0, 0, 0, .45), transparent);
    pointer-events: none;
}

.howToSlide {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

    .howToSlide[hidden] {
        display: none;
    }

    .howToSlideImage img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }

/* Gift wallet card: as on the old portal, the gift box (GiftW.png) sits inside the "Gift points"
   pill before the label, with the old fixed gold tint (.gift-ico in the old Site.css) - same for every tier. */
.ptGiftIcon {
    width: 20px;
    height: 20px;
    margin-inline-end: 4px;
    vertical-align: middle;
    object-fit: contain;
    filter: invert(55%) sepia(70%) saturate(450%) hue-rotate(10deg);
}

/* Gift card footer is plain text (the description), not a link - regular weight as on the old portal. */
.homeV2 .ptGiftFoot {
    font-family: "IRANYekanRegularRd";
    font-size: 13px;
    color: #1A222E;
}

/* More room between the "Gift points" pill and the balance on the gift card. */
.ptCardGift .ptBalance {
    margin-top: 18px;
}

/* Keep the gift icon and the "Gift points" label on one line inside the pill. */
.ptCardGift .ptTier {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Home: the same vertical gap between every section (streak, Deals for you, Win a Mercedes,
   Exchange, Reward categories, Brands, Refer, quick links, statement/voucher links).
   Top and bottom are equal so the collapsed margin between two neighbours is always --home-gap.
   The last block keeps extra room at the page bottom. */
.homeV2 .bodyCont > .homeCard,
.homeV2 .bodyCont > .homeSection,
.homeV2 .bodyCont > .homeMegaCampaign,
.homeV2 .bodyCont > .homeRefer,
.homeV2 .bodyCont > .homeQuickLinks,
.homeV2 .bodyCont > .homeLinkList {
    margin-top: var(--home-gap);
    margin-bottom: var(--home-gap);
}

.homeV2 .bodyCont > .homeLinkList {
    margin-bottom: 24px;
}

/* Home status row: tickets first, then the points pill - both the same design as the header pills
   on the other pages (AppHeader .appStat): transparent (the page shows through), neutral grey border,
   dark text, 16px icon, 4px gap. */
.homeV2 .homeTierPill,
.homeV2 .homeTicketPill {
    gap: 4px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #E5E7EB;
    background: transparent;
    font-size: 13px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    color: var(--home-text);
}

    .homeV2 .homeTierPill .homeTierName {
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
        color: var(--home-text);
    }

    .homeV2 .homeTierPill .homeTierCoin,
    .homeV2 .homeTierPill .homeTierCoin svg {
        flex-basis: 16px;
        width: 16px;
        height: 16px;
    }

/* Streak chip in the same row: same grey border as the tickets / points pills. */
.homeV2 .homeStreakChip {
    border-color: #E5E7EB;
}

/* Same --home-gap in the top part too: status row -> upgrade strip -> banner -> first section.
   The content wrapper (.bodyCont) drops its own top padding (Site.css 15px, +7px with the streak
   off) and becomes a flow root, so the first section's --home-gap top margin is the whole gap
   under the banner (no margin collapsing out of it, and the floated .locationSec can't eat it). */
.homeTop {
    padding-bottom: 0;
}

    .homeTop .homeStatus .homeUpgradeStrip,
    .homeTop .homeBannersSec {
        margin-top: var(--home-gap);
    }

.homeV2 .bodyCont,
.homeV2 .bodyCont:not(:has(> .homeStreak, > .homeStreakActions)) {
    display: flow-root;
    padding-top: 0;
}

/* "Win a Mercedes": the entries card and the red video tile under it are two blocks - same gap between them. */
.homeV2 .homeMegaCampaign .megaCampaignContainer {
    margin-top: var(--home-gap);
}

/* How-to story with images (_HowToPopup): the sections fill the whole screen and the bar + close
   button float over them (like WhatsApp status), with a soft shade so they stay visible on light
   images. An image section shows the BO image whole (contain) on black; a text section keeps the
   red background and leaves room at the top for the bar. */
.howToBars,
.howToHead {
    position: relative;
    z-index: 1;
}

.howToBars {
    background: linear-gradient(rgba(0, 0, 0, .35), transparent);
}

.howToSlides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.howToSlide {
    padding-top: 72px;
}

.howToSlideImage {
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #000;
}

    .howToSlideImage img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }


/* Home "How to Redeem" / "How to Buy Points" / "Collect Points": round story circles (like Instagram /
   WhatsApp status) instead of the three cards - a red ring (grey once the story was watched to the
   end), a white gap, the icon on a soft red disc, the title under it. Each opens its own story
   (_HowToPopup). */
.homeV2 .homeStories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
}

/* each circle centred in its third, so the three span the full row like the sections above */
.homeV2 .homeStory {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    color: #080808;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.homeStoryRing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    padding: 3px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #E82228, #FF7A45, #E82228);
    transition: transform .15s ease;
}

.homeStorySeen .homeStoryRing {
    background: #D1D5DB;
}

.homeStory:active .homeStoryRing {
    transform: scale(.94);
}

.homeStoryIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    color: var(--home-red);
}

    .homeV2 .homeStory b {
        width: 100%;
        text-align: center; /* a long (ar / ku) title wraps instead of being cut */
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
        font-size: 12px;
        font-weight: normal; /* weight comes from the IRANYekan cut */
        line-height: 1.3;
    }

/* How-to story: no black behind the image - white around it instead (on a phone the 9:16 image
   fills the screen anyway; this only shows on wider screens / other image shapes). */
.howToPopup,
.howToBox,
.howToSlideImage {
    background: #fff;
}

/* How-to story: the image fills the whole screen edge to edge (cropped to fit, no strips around it),
   and only the progress lines float on top - no dark shade behind them. */
.howToBox {
    max-width: none;
}

    /* a light shade behind the bar and the back arrow, so they stay readable on any BO image
       (e.g. a red logo, where the red bar fill would disappear) */
    .howToBox::before {
        background: linear-gradient(rgba(0, 0, 0, .3), transparent);
    }

.howToBars {
    background: none;
}

    .howToSlideImage img {
        object-fit: cover;
    }

/* a faint outline keeps the white lines visible on light images */
.howToBar {
    box-shadow: 0 0 2px rgba(0, 0, 0, .35);
}

/* How-to story text (Figma "How to Redeem"): the BO page's Title next to the back arrow on top, and
   a red panel with a wavy top edge at the bottom holding the SubTitle, the Description and (How to
   Redeem only) the white "Redeem Offer Now" button. The bar fills red on white tracks. */
.howToBar {
    background: rgba(255, 255, 255, .9);
}

    .howToBar > span {
        background: #E31C24;
    }

.howToHead {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    padding: 10px 12px;
}

.howToBack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .45));
}

.howToRtl .howToBack svg {
    transform: scaleX(-1);
}

.howToTitle {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: "IRANYekanRegularRd";
    font-size: 14px;
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, .5);
}

.howToPanel {
    position: absolute;
    inset: auto 0 0;
    padding: 8px 24px max(24px, env(safe-area-inset-bottom));
    background: linear-gradient(#E3161E, #9E0F15);
    color: #fff;
    cursor: default;
}

    /* the wave over the panel's top edge, same red as the panel's top; it overlaps the panel by 1px
       so no hairline shows between them on sub-pixel sizes */
    .howToPanel::before {
        content: "";
        position: absolute;
        inset: auto 0 calc(100% - 1px);
        height: 40px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 40' preserveAspectRatio='none'%3E%3Cpath d='M0 14C70 2 130 0 190 12C250 24 315 30 375 18V40H0Z' fill='%23E3161E'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
    }

.howToSubTitle {
    margin: 0 0 12px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 20px;
    font-weight: normal;
    line-height: 1.3;
    color: #fff;
}

.howToText {
    margin: 0 0 20px;
    font-family: "IRANYekanRegularRd";
    font-size: 14px;
    line-height: 1.45;
    color: #fff;
}

.howToBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 24px;
    background: #fff;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 14px;
    color: #E31C24;
    text-decoration: none;
}

    .howToBtn:hover,
    .howToBtn:focus {
        color: #E31C24;
        text-decoration: none;
    }

/* How-to stories: one numbered step per section - a lighter question over the step, the number in a
   white circle before the bold line. */
/* dark Asiacell red behind the BO image until it loads (the image carries its own room photo) */
.howToSlideImage.howToSlideSteps {
    background: #A81419;
}

    /* the whole image, not cropped, between the header and the panel; its bottom edge stays hidden
       behind the panel (bottom is less than the panel's min-height) */
    .howToSlideImage.howToSlideSteps img {
        position: absolute;
        inset: 64px 0 190px;
        height: calc(100% - 254px);
        object-position: center bottom;
    }

/* same panel height on every step, so the question and the button don't move between sections;
   the step sits centred between them */
.howToPanelSteps {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 4px 24px max(24px, env(safe-area-inset-bottom));
    background: linear-gradient(#E31C24, #7D0F14);
}

    .howToPanelSteps::before {
        height: 44px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 44' preserveAspectRatio='none'%3E%3Cpath d='M0 32C60 12 120 0 180 0C260 0 320 30 402 40V44H0Z' fill='%23E31C24'/%3E%3C/svg%3E");
    }

.howToPanelSteps .howToSubTitle {
    margin: 0;
    font-family: "IRANYekanRegularRd";
    font-size: 15px;
}

.howToPanelSteps .howToBtn {
    flex: 0 0 auto;
    height: 40px;
    font-size: 13px;
    color: #E82228;
}

.howToStep {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.howToStepNum {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd";
    font-size: 16px;
    line-height: 1;
    color: #E82228;
}

.howToStepText {
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd";
    font-size: 16px;
    line-height: 1.3;
    text-transform: uppercase;
    color: #fff;
}

    .howToHead[hidden] {
        display: none;
    }

/* How-to section without a BO image: white background; the bar tracks, the back arrow and the
   title turn dark (no shade) so they stay readable on it. */
.howToSlideBlank {
    background: #fff;
}

.howToOnBlank .howToBox::before {
    content: none;
}

.howToOnBlank .howToBar {
    background: #e6e6e6;
    box-shadow: none;
}

.howToOnBlank .howToBack,
.howToOnBlank .howToTitle {
    color: #1a1a1a;
    filter: none;
    text-shadow: none;
}

/* The home card's mission hint sits at the end of the card, under the actions. */
.homeV2 .homeStreakHint.is-mission {
    margin: 12px 0 0;
}

    /* time left as a small clock chip at the sentence's end */
    .homeV2 .homeStreakHint.is-mission .homeStreakLeft {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #fff;
        color: var(--home-red);
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
        font-size: 11px;
        white-space: nowrap;
    }

        .homeV2 .homeStreakHint.is-mission .homeStreakLeft svg {
            width: 12px;
            height: 12px;
        }

/* the missed-day note: one line after a restart icon */
.homeV2 .homeStreakNote.is-reset {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

    .homeV2 .homeStreakNote.is-reset svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
    }

/* the next day's number in its dot */
.stkNodeNum {
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd";
    font-size: 15px;
    line-height: 1;
}

/* a locked day after the next one: a lock in its dot (home path and journey list) */
.stkNodeLock {
    display: inline-flex;
}

    .stkNodeDot .stkNodeLock svg {
        width: 14px;
        height: 17px;
    }

.stkChip.stkChipLock {
    padding: 3px 6px;
}

    .stkChipLock svg {
        width: 10px;
        height: 12px;
    }

/* ===== Streak revamp (stk*) =====
   Home day path, claim banner + prize reveal (_StreakClaim), and the Streak Journey hero, day timeline and day sheet.
   Brand red #E82228, night #1A222E, done green #22C55E, gold #FFC531 for the high-value / mystery prizes.
   Everything animated stops under prefers-reduced-motion (end of this block). */

/* -- Home: the days as a swipeable path -- */
.stkPath {
    display: flex;
    margin: 6px -12px 14px;
    padding: 4px 8px 2px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    .stkPath::-webkit-scrollbar {
        display: none;
    }

.stkNode {
    position: relative;
    display: flex;
    flex: 0 0 78px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-align: center;
    text-decoration: none;
    scroll-snap-align: center;
    animation: stkPop .5s cubic-bezier(.2, 1.4, .4, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms);
}

    .stkNode:hover,
    .stkNode:focus {
        color: inherit;
        text-decoration: none;
    }

    /* the line to the next day (inline-end side, so RTL draws it the right way); the next node is painted after it, so
       its dot covers the line's end. Green from a done day to a done day or today. */
    .stkNode::after {
        content: "";
        position: absolute;
        top: 21px;
        inset-inline-start: 50%;
        width: 100%;
        height: 4px;
        border-radius: 2px;
        background: #E5E7EB;
    }

    .stkNode:last-child::after {
        display: none;
    }

    .stkNode.is-done:has(+ .stkNode.is-done, + .stkNode.is-today)::after {
        background: #22C55E;
    }

.stkNodeDot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #F2F3F5;
    color: #9CA3AF;
    box-shadow: 0 0 0 1px #E5E7EB;
}

    .stkNodeDot svg {
        width: 18px;
        height: 18px;
    }

/* a day still to come with prize icons: they slide in its white circle (_StreakPrizeSlide) */
.stkNode.has-icons .stkNodeDot {
    padding: 4px;
    background: #fff;
    box-shadow: 0 0 0 1px #E5E7EB, 0 4px 10px rgba(26, 34, 46, .08);
}

/* -- A day's prizes as their icons sliding in turn (home day circle, journey "surprise" thumbs) -- */
.stkSlide {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    direction: ltr;
    border-radius: inherit;
}

    .stkSlide img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        transform: translateX(110%);
        transition: transform .55s cubic-bezier(.3, 1.25, .5, 1), opacity .35s ease;
    }

        .stkSlide img.is-on {
            opacity: 1;
            transform: none;
        }

        .stkSlide img.is-off {
            transform: translateX(-110%);
        }

.stkPrizeThumb.is-await:has(.stkSlide) {
    padding: 5px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #F8D3D4;
}

.stkNode.is-done .stkNodeDot {
    background: #22C55E;
    color: #fff;
    box-shadow: 0 4px 12px rgba(34, 197, 94, .35);
}

.stkNode.is-today .stkNodeDot {
    background: linear-gradient(135deg, #FF5A5F, #E82228);
    color: #fff;
    animation: stkPulse 1.8s ease-out infinite;
}

    .stkNode.is-today .stkNodeDot svg {
        width: 15px;
        height: 19px;
    }

.stkNode.is-mega .stkNodeDot {
    overflow: hidden;
    background: linear-gradient(135deg, #1A222E, #3A4556);
    color: #FFC531;
    box-shadow: 0 4px 14px rgba(26, 34, 46, .35);
}

    .stkNode.is-mega .stkNodeDot::after,
    .stkPrizeThumb.is-mystery::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
        transform: translateX(-120%);
        animation: stkShine 2.6s ease-in-out infinite;
    }

/* a won prize still to claim: a pulsing gift badge on the day */
.stkNode.has-claim .stkNodeDot::before {
    content: "";
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #FFC531;
    animation: stkPulseGold 1.6s ease-out infinite;
}

.stkNodeDay {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 11px;
    line-height: 1;
    color: #080808;
    white-space: nowrap;
}

.stkNode.is-locked .stkNodeDay {
    color: #6B7280;
}

.stkNodeText {
    display: flex;
    justify-content: center;
    max-width: 74px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 10px;
    line-height: 1.25;
    color: #6B6D75;
}

.stkNode.is-done .stkNodeText {
    color: #16A34A;
}

.stkNode .stkNodeText .stkMission {
    flex-direction: column;
    gap: 4px;
    min-height: 46px;
    padding: 0;
    background: none;
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd";
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
}

    .stkNodeText .stkMission svg {
        box-sizing: content-box;
        width: 12px;
        height: 12px;
        padding: 5px;
        border-radius: 50%;
        background: #F3F4F6;
    }

    .stkNodeText .stkMission > span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .stkNodeText .stkMission.is-redeem svg { background: #FFF1F1; }
    .stkNodeText .stkMission.is-buypoints svg { background: #EFF6FF; }
    .stkNodeText .stkMission.is-both svg { background: #F5F3FF; }
    .stkNodeText .stkMission.is-any svg { background: #FFF7ED; }

.stkMystery {
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1A222E, #3A4556);
    color: #FFC531;
}

/* -- The mission in a few words (a coloured chip per kind) -- */
.stkMission {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #F3F4F6;
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd";
    font-size: 11px;
    line-height: 1.2;
    color: #374151;
    white-space: nowrap;
}

    .stkMission svg {
        flex: 0 0 auto;
        width: 13px;
        height: 13px;
    }

    .stkMission.is-redeem {
        background: #FFF1F1;
        color: #C81E24;
    }

    .stkMission.is-buypoints {
        background: #EFF6FF;
        color: #1D4ED8;
    }

    .stkMission.is-both {
        background: #F5F3FF;
        color: #6D28D9;
    }

    .stkMission.is-any {
        background: #FFF7ED;
        color: #C2410C;
    }

/* -- Claim banner (home card and journey) -- */
.stkClaimBanner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 14px;
    padding: 12px 14px;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(120deg, #E82228, #FF5A36 60%, #FF8A00);
    color: #fff;
    font-family: "IRANYekanRegularRd";
    text-align: start;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(232, 34, 40, .3);
    animation: stkBannerIn .6s cubic-bezier(.2, 1.4, .4, 1) both;
}

    .stkClaimBanner::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
        transform: translateX(-120%);
        animation: stkShine 2.8s ease-in-out infinite;
        pointer-events: none;
    }

    .stkClaimBanner.is-high {
        background: linear-gradient(120deg, #1A222E, #3B2F12 60%, #8A6400);
        box-shadow: 0 10px 26px rgba(138, 100, 0, .35), inset 0 0 0 1px rgba(255, 213, 74, .5);
    }

.stk .stkClaimBanner {
    width: calc(100% - 32px);
    margin: 12px 16px;
}

.stkClaimGift {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .2);
    animation: stkWiggle 2s ease-in-out infinite;
}

    .stkClaimGift svg {
        width: 24px;
        height: 24px;
    }

.stkClaimBanner.is-high .stkClaimGift {
    background: linear-gradient(135deg, #FFE27A, #F6A800);
    color: #1A222E;
}

.stkClaimText {
    flex: 1;
    min-width: 0;
}

    .stkClaimText b {
        display: block;
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
        font-size: 15px;
        font-weight: normal;
        line-height: 1.25;
    }

    .stkClaimText small {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        opacity: .88;
    }

.stkClaimBtn {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 12px;
    color: #E82228;
    white-space: nowrap;
}

.stkClaimBanner.is-high .stkClaimBtn {
    background: linear-gradient(135deg, #FFE27A, #F6A800);
    color: #1A222E;
}

/* -- Journey: hero -- */
.stkHero {
    position: relative;
    margin: 12px 16px;
    padding: 18px 16px 16px;
    overflow: hidden;
    border-radius: 22px;
    background: radial-gradient(120% 140% at 100% 0%, #47161B 0%, #1A222E 55%, #0F1620 100%);
    color: #fff;
    box-shadow: 0 14px 30px rgba(15, 22, 32, .28);
}

.stkHeroGlow {
    position: absolute;
    top: -90px;
    inset-inline-end: -60px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 34, 40, .6), transparent 65%);
    animation: stkGlow 4s ease-in-out infinite;
}

.stkHeroTop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.stkFlame {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #FF7A45, #E82228);
    box-shadow: 0 10px 22px rgba(232, 34, 40, .5);
}

    .stkFlame svg {
        width: 30px;
        height: 30px;
        transform-origin: 50% 90%;
        animation: stkFlicker 1.6s ease-in-out infinite;
    }

.stkHeroText {
    flex: 1;
    min-width: 0;
}

.stkHeroLabel {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 11px;
    line-height: 1;
    letter-spacing: .08em;
    color: #FCA5A5;
    text-transform: uppercase;
}

.stkHeroCount {
    margin-top: 6px;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd";
    font-size: 36px;
    line-height: 1;
}

    .stkHeroCount small {
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
        font-size: 15px;
        opacity: .92;
    }

.stkHeroSub {
    margin-top: 6px;
    font-size: 13px;
    color: #94A3B8;
}

.stkSegments {
    position: relative;
    display: flex;
    gap: 5px;
    margin-top: 18px;
}

.stkSeg {
    position: relative;
    flex: 1;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
}

    .stkSeg.is-done {
        background: linear-gradient(90deg, #FF7A45, #E82228);
        transform-origin: left center;
        animation: stkSegIn .5s ease both;
        animation-delay: calc(var(--i, 0) * 90ms);
    }

[dir="rtl"] .stkSeg.is-done,
.homeRtl .stkSeg.is-done {
    transform-origin: right center;
}

.stkSeg.is-today::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(232, 34, 40, .75);
    animation: stkBlink 1.4s ease-in-out infinite;
}

.stkSeg.is-final {
    box-shadow: inset 0 0 0 1px rgba(255, 197, 49, .7);
}

.stkHeroChips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

    .stkHeroChips:empty {
        display: none;
    }

.stkHeroChip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: 12px;
    color: #E5E7EB;
}

    .stkHeroChip svg {
        width: 13px;
        height: 13px;
    }

/* -- Journey: the days timeline -- */
.stkDays {
    margin: 12px 16px;
    padding: 16px 12px 6px;
    border-radius: 20px;
}

.stkDaysHead {
    padding: 0 4px 14px;
}

.stkTimeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stkDay {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 10px;
    padding-bottom: 12px;
}

    .stkDay::before {
        content: "";
        position: absolute;
        top: 40px;
        bottom: -2px;
        inset-inline-start: 18.5px;
        width: 3px;
        border-radius: 2px;
        background: #E5E7EB;
    }

    .stkDay:last-child::before {
        display: none;
    }

    .stkDay.is-done::before {
        background: #22C55E;
    }

.stkDayNode {
    position: relative;
    z-index: 1;
    display: flex;
    grid-column: 1;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: 10px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #F2F3F5;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 14px;
    color: #6B7280;
    box-shadow: 0 0 0 1px #E5E7EB;
}

    .stkDayNode svg {
        width: 16px;
        height: 16px;
    }

.stkDay.is-done .stkDayNode {
    background: #22C55E;
    color: #fff;
    box-shadow: 0 4px 10px rgba(34, 197, 94, .35);
}

.stkDay.is-today .stkDayNode {
    background: linear-gradient(135deg, #FF5A5F, #E82228);
    color: #fff;
    animation: stkPulse 1.8s ease-out infinite;
}

    .stkDay.is-today .stkDayNode svg {
        width: 13px;
        height: 17px;
    }

.stkDay.is-final.is-locked .stkDayNode {
    background: linear-gradient(135deg, #1A222E, #3A4556);
    color: #FFC531;
}

.stkDayCard {
    display: flex;
    grid-column: 2;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #EEF0F3;
    border-radius: 16px;
    background: #fff;
    text-align: start;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(17, 24, 39, .04);
    transition: transform .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}

    .stkDayCard:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(17, 24, 39, .08);
    }

    .stkDayCard:active {
        transform: scale(.98);
    }

    .stkDayCard:focus-visible {
        outline: 2px solid #E82228;
        outline-offset: 2px;
    }

.stkDay.is-done .stkDayCard {
    border-color: #D1FAE5;
    background: #F6FEF9;
}

.stkDay.is-today .stkDayCard {
    border-color: rgba(232, 34, 40, .35);
    background: linear-gradient(135deg, #FFF3F3, #FFFFFF 70%);
    box-shadow: 0 10px 22px rgba(232, 34, 40, .12);
}

.stkDay.is-final .stkDayCard {
    border-color: transparent;
    background: linear-gradient(135deg, #1A222E, #2B3646);
    box-shadow: 0 10px 24px rgba(26, 34, 46, .25);
}

.stkDayMain {
    flex: 1;
    min-width: 0;
}

.stkDayTop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.stkDayLabel {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 11px;
    line-height: 1;
    letter-spacing: .06em;
    color: #6B6D75;
    text-transform: uppercase;
}

.stkChip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #F2F3F5;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 10px;
    line-height: 1.3;
    color: #6B7280;
}

    .stkChip.is-done {
        background: #DCFCE7;
        color: #15803D;
    }

    .stkChip.is-today {
        background: #FEE2E2;
        color: #E82228;
    }

    .stkChip.is-checkpoint {
        background: #FEF3C7;
        color: #B45309;
    }

.stkDayTitle {
    margin-top: 7px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 14px;
    line-height: 1.3;
    color: #080808;
}

.stkDay.is-locked .stkDayTitle {
    color: #4B5563;
}

.stkDayMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.stkDayCount {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 11px;
    color: #E82228;
}

.stkDay.is-final .stkDayLabel {
    color: #FCA5A5;
}

.stkDay.is-final .stkDayTitle {
    color: #fff;
}

.stkDay.is-final .stkMission {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.stkDay.is-final .stkChip.is-locked {
    background: rgba(255, 255, 255, .12);
    color: #CBD5E1;
}

/* one fixed column, so every day's prize sits on the same vertical line whatever its name */
.stkDayPrize {
    display: flex;
    flex: 0 0 84px;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 84px;
    text-align: center;
}

    .stkDayPrize:empty {
        display: none;
    }

.stkPrizeThumb {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 14px;
    background: #FFF1F1;
    color: #E82228;
}

    .stkPrizeThumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .stkPrizeThumb svg {
        width: 22px;
        height: 22px;
    }

    .stkPrizeThumb.is-won {
        background: #fff;
        color: #16A34A;
        box-shadow: inset 0 0 0 2px #22C55E;
    }

    .stkPrizeThumb.is-mystery {
        background: linear-gradient(135deg, #2B3646, #475569);
        color: #FFC531;
        animation: stkWiggle 2.4s ease-in-out infinite;
    }

    .stkPrizeThumb.is-none {
        background: #F3F4F6;
        color: #9CA3AF;
    }

.stkPrizeName {
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 11px;
    line-height: 1.25;
    color: #374151;
}

.stkDay.is-done .stkPrizeName {
    color: #16A34A;
}

.stkDay.is-final .stkPrizeName {
    color: #FFC531;
}

/* a locked day's prize (the final day's too), not claimed yet: a grey gift on grey */
.stkPrizeThumb.is-locked {
    background: #E5E7EB;
    color: #9CA3AF;
}

.stkDayClaim {
    display: inline-flex;
    grid-column: 2;
    align-items: center;
    justify-self: start;
    gap: 6px;
    margin-top: 8px;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF5A5F, #E82228);
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(232, 34, 40, .35);
    animation: stkPulse 1.8s ease-out infinite;
}

    .stkDayClaim svg {
        width: 16px;
        height: 16px;
    }

    .stkDayClaim.is-wide {
        justify-content: center;
        width: 100%;
        height: 46px;
        margin: 12px 0 2px;
    }

/* days slide in as they scroll into view (the script adds .stkReady / .is-in) */
.stkReady .stkDay {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .55s cubic-bezier(.2, .9, .3, 1);
    transition-delay: calc(var(--i, 0) * 45ms);
}

    .stkReady .stkDay.is-in {
        opacity: 1;
        transform: none;
    }

/* -- Journey: the day sheet -- */
.stkSheet {
    position: fixed;
    inset: 0;
    z-index: 99999;
    font-family: "IRANYekanRegularRd";
}

    .stkSheet[hidden] {
        display: none;
    }

.stkSheetBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 18, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .3s ease;
}

.stkSheet.is-shown .stkSheetBackdrop {
    opacity: 1;
}

.stkSheetPanel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 560px;
    max-height: 88vh;
    margin: 0 auto;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 26px 26px 0 0;
    background: #fff;
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.2, .9, .3, 1);
}

.stkSheet.is-shown .stkSheetPanel {
    transform: none;
}

.stkSheetGrip {
    display: block;
    width: 42px;
    height: 5px;
    margin: 0 auto 10px;
    border-radius: 3px;
    background: #E5E7EB;
}

.stkSheetClose {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #F3F4F6;
    font-size: 22px;
    line-height: 1;
    color: #374151;
    cursor: pointer;
}

.stkSheet.is-shown .stkSheetDay > * {
    animation: stkUp .45s ease both;
}

    .stkSheet.is-shown .stkSheetDay > *:nth-child(2) { animation-delay: .05s; }
    .stkSheet.is-shown .stkSheetDay > *:nth-child(3) { animation-delay: .1s; }
    .stkSheet.is-shown .stkSheetDay > *:nth-child(4) { animation-delay: .15s; }
    .stkSheet.is-shown .stkSheetDay > *:nth-child(5) { animation-delay: .2s; }
    .stkSheet.is-shown .stkSheetDay > *:nth-child(n+6) { animation-delay: .25s; }

.stkSheetHead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0 4px;
    padding-inline-end: 40px;
}

.stkSheetBadge {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 20px;
    background: #F3F4F6;
    color: #374151;
}

    .stkSheetBadge small {
        font-size: 10px;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .stkSheetBadge b {
        font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd";
        font-size: 28px;
        font-weight: normal;
        line-height: 1;
    }

.stkSheetDay.is-done .stkSheetBadge {
    background: linear-gradient(135deg, #34D399, #16A34A);
    color: #fff;
}

.stkSheetDay.is-today .stkSheetBadge {
    background: linear-gradient(135deg, #FF5A5F, #E82228);
    color: #fff;
}

.stkSheetDay.is-final.is-locked .stkSheetBadge {
    background: linear-gradient(135deg, #1A222E, #3A4556);
    color: #FFC531;
}

.stkSheetTitle {
    margin: 6px 0 0;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 17px;
    font-weight: normal;
    line-height: 1.3;
    color: #080808;
}

.stkSheetLabel {
    margin: 18px 0 8px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 11px;
    font-weight: normal;
    letter-spacing: .08em;
    color: #9CA3AF;
    text-transform: uppercase;
}

.stkChecklist {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .stkChecklist li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        background: #F9FAFB;
        font-size: 13px;
        line-height: 1.35;
        color: #1F2937;
    }

        .stkChecklist li.is-done {
            background: #F0FDF4;
        }

.stkCheckIcon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #fff;
    color: #E82228;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

    .stkCheckIcon svg {
        width: 17px;
        height: 17px;
    }

.stkCheckMark {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-inline-start: auto;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    color: #fff;
}

    .stkCheckMark svg {
        width: 12px;
        height: 12px;
    }

.stkChecklist li.is-done .stkCheckMark {
    border-color: #22C55E;
    background: #22C55E;
    animation: stkPop .4s cubic-bezier(.2, 1.6, .4, 1) .3s both;
}

.stkSheetPrize {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px dashed rgba(232, 34, 40, .28);
    border-radius: 16px;
    background: #FFF7F7;
}

    .stkSheetPrize .stkPrizeThumb {
        width: 58px;
        height: 58px;
    }

    .stkSheetPrize b {
        display: block;
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
        font-size: 15px;
        font-weight: normal;
        line-height: 1.3;
        color: #080808;
    }

    .stkSheetPrize small {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.4;
        color: #6B6D75;
    }

    .stkSheetPrize.is-won {
        border: 1px solid #BBF7D0;
        background: #F0FDF4;
    }

        .stkSheetPrize.is-won small {
            color: #16A34A;
        }

    .stkSheetPrize.is-mystery {
        border: 0;
        background: linear-gradient(135deg, #1A222E, #2B3646);
    }

        .stkSheetPrize.is-mystery b {
            color: #FFC531;
        }

        .stkSheetPrize.is-mystery small {
            color: #CBD5E1;
        }

.stkEvents {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stkEv {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}

    .stkEv:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 41px;
        bottom: -7px;
        inset-inline-start: 16px;
        width: 2px;
        background: #EEF0F3;
    }

.stkEvIcon {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    background: #F3F4F6;
    color: #4B5563;
}

    .stkEvIcon svg {
        width: 15px;
        height: 15px;
    }

    .stkEvIcon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #fff;
    }

.stkEv.is-activity .stkEvIcon {
    background: #FFF1F1;
    color: #E82228;
}

.stkEv.is-opened .stkEvIcon {
    background: #22C55E;
    color: #fff;
}

.stkEv.is-prize.is-won .stkEvIcon,
.stkEv.is-prize.is-claimed .stkEvIcon {
    background: #FEF3C7;
    color: #B45309;
    box-shadow: 0 0 0 2px #FCD34D;
}

.stkEv.is-prize.is-high .stkEvIcon {
    box-shadow: 0 0 0 2px #FFC531, 0 0 12px rgba(255, 197, 49, .8);
}

.stkEv.is-reset .stkEvIcon {
    background: #FEE2E2;
    color: #DC2626;
}

.stkEvBody {
    flex: 1;
    min-width: 0;
}

    .stkEvBody b {
        display: block;
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
        font-size: 13px;
        font-weight: normal;
        line-height: 1.35;
        color: #111827;
    }

    .stkEvBody small {
        display: block;
        font-size: 12px;
        color: #6B6D75;
    }

.stkEv.is-prize.is-won b span {
    color: #B45309;
}

.stkEv.is-reset b {
    color: #DC2626;
}

/* today's day again after a restart: what is left now, last in its story */
.stkEv.is-now .stkEvIcon {
    background: #FFF5F5;
    color: var(--home-red, #E82228);
    box-shadow: 0 0 0 2px #F8D3D4;
}

.stkEv.is-now b {
    color: var(--home-red, #E82228);
}

.stkEv.is-prize.is-none b,
.stkEv.is-prize.is-pending b {
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd";
    color: #6B7280;
}

.stkEv time {
    flex: 0 0 auto;
    font-size: 11px;
    color: #9CA3AF;
    direction: ltr;
}

.stkSheetEmpty {
    margin: 0;
    padding: 14px;
    border-radius: 14px;
    background: #F9FAFB;
    font-size: 13px;
    line-height: 1.5;
    color: #6B6D75;
    text-align: center;
}

.homeV2 .stkSheetCta,
.stkSheetCta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-top: 18px;
    border-radius: 999px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 15px;
}

/* -- Motion -- */
@keyframes stkPulse {
    0% { box-shadow: 0 0 0 0 rgba(232, 34, 40, .55); }
    70% { box-shadow: 0 0 0 12px rgba(232, 34, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 34, 40, 0); }
}

@keyframes stkPulseGold {
    0% { box-shadow: 0 0 0 0 rgba(255, 197, 49, .8); }
    70% { box-shadow: 0 0 0 8px rgba(255, 197, 49, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 197, 49, 0); }
}

@keyframes stkPop {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: none; }
}

@keyframes stkShine {
    0%, 55% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@keyframes stkWiggle {
    0%, 70%, 100% { transform: rotate(0); }
    76% { transform: rotate(-10deg) scale(1.06); }
    82% { transform: rotate(9deg) scale(1.06); }
    88% { transform: rotate(-6deg); }
    94% { transform: rotate(4deg); }
}

@keyframes stkUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes stkBannerIn {
    from { opacity: 0; transform: translateY(-10px) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes stkBlink {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

@keyframes stkGlow {
    0%, 100% { opacity: .7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes stkFlicker {
    0%, 100% { transform: scale(1) rotate(0); }
    25% { transform: scale(1.06, .96) rotate(-2deg); }
    50% { transform: scale(.97, 1.05) rotate(1deg); }
    75% { transform: scale(1.04, .98) rotate(2deg); }
}

@keyframes stkSegIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* -- Journey: the prize list, compact - a white card like the day cards, small still prize tiles (two and a bit in
   view): the prize's icon on white and its name, and red dots. -- */
.stk .sjPrizes {
    padding: 12px 0 10px;
    border: 1px solid #F3E6E6;
    background: #fff;
    box-shadow: 0 6px 18px rgba(232, 34, 40, .06);
}

.stk .sjPrizesGlow {
    display: none;
}

.stk .sjPrizesHead {
    gap: 8px;
    padding: 0 14px 10px;
}

.stk .sjPrizesIcon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(135deg, #FF7A45, #E82228);
    color: #fff;
    box-shadow: 0 4px 10px rgba(232, 34, 40, .3);
}

    .stk .sjPrizesIcon svg {
        width: 15px;
        height: 15px;
    }

.stk .sjPrizesTitle {
    font-size: 14px;
}

.stk .sjPrizesSub {
    margin-top: 2px;
    font-size: 11px;
}

.stk .sjPrizesTrack {
    gap: 10px;
    padding: 2px 14px 4px;
    scroll-padding-inline: 14px;
}

.stk .sjPrize {
    flex: 0 0 40%;
    max-width: 150px;
    border: 1px solid #F3E6E6;
    border-radius: 14px;
    box-shadow: none;
}

.stk .sjPrizes.is-single .sjPrize {
    flex-basis: 100%;
    max-width: none;
}

.stk .sjPrizeMedia {
    height: 92px;
    padding: 12px;
    overflow: hidden;
    background: #fff;
}

.stk .sjPrizes.is-single .sjPrizeMedia {
    height: 120px;
}

    .stk .sjPrizeMedia img,
    .stk .sjPrizeNoImage {
        position: relative;
    }

.stk .sjPrizeNoImage svg {
    width: 40px;
    height: 38px;
}

.stk .sjPrizeName {
    display: -webkit-box;
    min-height: calc(2 * 1.3em + 16px);
    padding: 8px 10px;
    font-size: 12px;
    text-align: center;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.stk .sjPrizesDots {
    gap: 5px;
    margin-top: 8px;
}

.stk .sjPrizesDot {
    width: 5px;
    height: 5px;
}

    .stk .sjPrizesDot.is-active {
        width: 14px;
    }

@media (prefers-reduced-motion: reduce) {
    .stkPath *, .stkNode, .stkClaimBanner, .stkClaimBanner *, .stk *, .stkSheet *, .stkSheetPanel {
        animation: none !important;
        transition: none !important;
    }

    .stkReady .stkDay {
        opacity: 1;
        transform: none;
    }
}

/* How-to guides from the BO (_HowToPopup .howToSlideBo): the BO image already holds the whole design - the room
   photo and the red wave at the bottom - so it fills the screen edge to edge and the text sits directly on its red
   area. No red panel, wave or background photo is drawn by the code. */
.howToSlideBo.howToSlideImage,
.howToSlideBo.howToSlideImage.howToSlideSteps {
    background: #A81419;
}

    .howToSlideBo.howToSlideImage img,
    .howToSlideBo.howToSlideImage.howToSlideSteps img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
    }

.howToSlideBo .howToPanel,
.howToSlideBo .howToPanelSteps {
    background: none;
}

    .howToSlideBo .howToPanel::before,
    .howToSlideBo .howToPanelSteps::before {
        content: none;
    }

/* on a page without an image (white background) the text stays readable */
.howToSlideBo.howToSlideBlank .howToPanel,
.howToSlideBo.howToSlideBlank .howToText,
.howToSlideBo.howToSlideBlank .howToStepText {
    color: #E31C24;
}

/* Home "How to" stories as a carousel (like Instagram stories): one horizontal row you swipe, any number of
   circles (4 guides now), snapping to each circle, no scrollbar. The row runs to the screen edges so the next
   circle peeks in and shows it scrolls; works the same in RTL. */
.homeV2 .homeStories {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    margin-inline: 0; /* the row itself reaches the screen edges; the 16px gutter is inner padding */
    padding: 4px 16px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .homeV2 .homeStories::-webkit-scrollbar {
        display: none;
    }

    .homeV2 .homeStories .homeStory {
        flex: 0 0 84px;
        width: 84px;
        scroll-snap-align: start;
    }

@media (prefers-reduced-motion: reduce) {
    .homeV2 .homeStories {
        scroll-behavior: auto;
    }
}

/* How-to guides from the BO: the text on the image's red wave (Figma "How to Redeem Story") - the Title as the
   question, the Step Number in a white circle beside the bold step sentence, and, only when the BO page has both
   ButtonText and Button Link, a white full-width pill button with red text at the bottom. */
.howToSlideBo .howToPanelSteps,
.howToSlideBo .howToPanel {
    min-height: 0;
    /* bottom: lifts the button a little off the screen edge (all languages) */
    padding: 0 24px max(44px, calc(env(safe-area-inset-bottom) + 16px));
    text-align: start;
}

.howToSlideBo .howToIntro {
    margin: 0 0 18px;
    font-family: "IRANYekanRegularRd";
    font-size: 17px;
    line-height: 1.4;
    color: #fff;
}

.howToSlideBo .howToStep {
    flex: 0 0 auto;
    gap: 14px;
    padding: 0 0 24px;
}

.howToSlideBo .howToStepNum {
    width: 36px;
    height: 36px;
    font-size: 17px;
}

.howToSlideBo .howToStepText {
    font-size: 22px;
    line-height: 1.25;
}

.howToSlideBo .howToBtn,
.howToSlideBo .howToPanelSteps .howToBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin-top: 4px;
    padding: 0 20px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
    font-size: 15px;
    color: #E31C24;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .howToSlideBo .howToBtn:hover,
    .howToSlideBo .howToBtn:focus-visible {
        color: #E31C24;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
    }

    .howToSlideBo .howToBtn:active {
        transform: scale(.98);
    }

    .howToSlideBo .howToBtn:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }

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

/* How-to guides from the BO, fitted to the image (export ~804 x 1748, the red wave starting ~61% down):
   - the image always spans the full width, anchored to the bottom, so the phone is never cut at the sides;
     on a taller screen the top just shows more dark red behind the room photo
   - the text starts just under the wave and the button sits at the bottom. Heights use the slide width
     (cqw), the same unit the image scales with, so the text follows the wave on every phone. */
.howToSlideBo {
    container-type: inline-size;
}

    .howToSlideBo.howToSlideImage img,
    .howToSlideBo.howToSlideImage.howToSlideSteps img {
        inset: auto 0 0;
        width: 100%;
        height: auto;
        object-fit: initial;
    }

.howToSlideBo .howToPanel,
.howToSlideBo .howToPanelSteps {
    display: flex;
    flex-direction: column;
    height: 84cqw;
    max-height: 70%;
    /* the question + step start a little lower on the red wave (was 15cqw) */
    padding-top: 19cqw;
    box-sizing: border-box;
}

.howToSlideBo .howToPanel .howToBtn {
    margin-top: auto;
}