/* Deals page (Products/Catalog) restyle to match the Figma "Asia Cell" deals frames:
   tabs, search + filter icon, category chip row, deal cards and the combined Filter panel.
   Loaded by Catalog.cshtml after Site.css / SiteAr.css, so it overrides both; spacing uses
   logical properties (margin-inline-*) so the Arabic/Kurdish RTL layout mirrors correctly. */

:root {
    --df-red: #E82228;
    --df-red-soft: #F72B3114; /* Figma: #F72B31 at 8% */
    --df-text: #333333;
    --df-muted: #6B6B6B;
    --df-field: #F2F2F2;
    --df-chip-border: #8A8A8A;
}

/* ===== Points header ===== */
.catalogV2 .balance-header {
    padding: 16px 16px 4px;
}

.catalogContainer.catalogV2 .balance-header .balance-label {
    font-size: 16px;
    line-height: 1.35;
    font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
}

.catalogContainer.catalogV2 .balance-header .hint-label {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #333;
}

/* ===== Asia Deals / Partner Deals tabs ===== */
.catalogV2 .deals-tabs .nav-tabs {
    border: 0;
    border-radius: 6px;
    background: var(--df-field);
}

    .catalogV2 .deals-tabs .nav-tabs > li > a {
        font-size: 14px;
        font-family: "IRANYekanMediumRd", "IRANYekanRegularRd"; font-weight: normal;
        padding: 9px 12px;
        background: var(--df-field) !important;
        border-radius: 6px !important;
    }

    .catalogV2 .deals-tabs .nav-tabs > li.active > a,
    .catalogV2 .deals-tabs .nav-tabs > li.active > a:hover,
    .catalogV2 .deals-tabs .nav-tabs > li.active > a:focus {
        background: var(--df-red) !important;
        color: #fff !important;
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    }

/* ===== Search row: grey search field + filter icon ===== */
.catalogV2 .filter-search {
    gap: 10px;
}

.catalogV2 .searchDiv {
    flex: 1;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    gap: 8px;
    background: var(--df-field);
    border-radius: 8px;
}

    .catalogV2 .searchDiv .searchIcon {
        width: 18px;
        height: 18px;
    }

.catalogV2 .txtSearch {
    height: 40px;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
}

.catalogV2 .btnSorting.dfOpen {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--df-text);
    cursor: pointer;
}

    .catalogV2 .btnSorting.dfOpen svg {
        fill: none;
        width: 22px;
        height: 22px;
    }

.dfOpenCount {
    position: absolute;
    top: 2px;
    inset-inline-end: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--df-red);
    color: #fff;
    font-size: 10px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    line-height: 16px;
    text-align: center;
}

/* ===== Category chip row (ALL / partner types) ===== */
.catalogV2 .instore-online-cont {
    gap: 8px;
    padding: 0 16px;
    margin: 12px 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .catalogV2 .instore-online-cont::-webkit-scrollbar {
        display: none;
    }

.catalogV2 .category-partner-type-container {
    flex: 0 0 auto;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #C9C9C9;
    border-radius: 6px;
    color: var(--df-muted);
}

.catalogV2 .category-partner-type-text {
    font-size: 13px;
    color: inherit;
    white-space: nowrap;
}

.catalogV2 .category-partner-type-container.active {
    border: 1.5px solid var(--df-red);
    color: var(--df-red);
}

    .catalogV2 .category-partner-type-container.active .category-partner-type-text {
        color: var(--df-red);
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    }

/* ===== Deal cards ===== */
.itemSec.dealCardV1 {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

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

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

    .itemSec.dealCardV1 .descDiv {
        padding: 10px 10px 0;
    }

        .itemSec.dealCardV1 .descDiv .title {
            font-size: 15px;
            font-family: "IRANYekanExtraBoldRd", "IRANYekanBoldRd"; font-weight: normal;
            height: auto;
            color: var(--df-text);
        }

        .itemSec.dealCardV1 .descDiv .subTitle {
            margin-top: 4px;
            font-size: 12px;
            color: var(--df-muted);
            height: auto;
            min-height: 26px;
            line-height: 1.1;
        }

    .itemSec.dealCardV1 .lower-deal {
        padding: 8px 10px 4px;
    }

        .itemSec.dealCardV1 .lower-deal .amnt {
            font-size: 12px;
            padding: 1px 8px;
        }

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

    .itemSec.dealCardV1 .dealExploreBtn {
        height: 30px;
        border-radius: 999px;
        border: 1px solid var(--df-text);
        color: var(--df-text);
        font-size: 13px;
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    }

/* ===== Combined Filter panel ===== */
.filter-popup.dealsFilterPanel {
    width: 92%;
    max-width: 420px;
    padding: 0;
    border-radius: 10px;
    color: var(--df-text);
    overflow: hidden;
}

    .filter-popup.dealsFilterPanel.popUpBottom {
        border-radius: 14px 14px 0 0;
    }

.dealsFilterPanel .dfHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 0;
}

.dealsFilterPanel .dfTitle {
    font-size: 20px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
}

.dealsFilterPanel .dfClose {
    display: flex;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--df-muted);
    cursor: pointer;
}

.dealsFilterPanel .dfHint {
    padding: 6px 16px 0;
    font-size: 14px;
    line-height: 1.35;
    color: var(--df-muted);
}

.dealsFilterPanel .dfBody {
    max-height: 62vh;
    overflow-y: auto;
    padding: 4px 16px 8px;
}

.dealsFilterPanel .dfSection {
    padding-top: 16px;
}

.dealsFilterPanel .dfLabel {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--df-muted);
}

.dealsFilterPanel .dfChips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Chip = the old switch label; the input stays in the DOM (hidden) for Catalog.js. */
.dealsFilterPanel .dfChip.switch {
    position: relative;
    display: inline-flex;
    width: auto;
    height: auto;
    margin: 0;
    cursor: pointer;
}

    .dealsFilterPanel .dfChip.switch input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

.dealsFilterPanel .dfChipText {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--df-chip-border);
    border-radius: 5px;
    background: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: #333;
    white-space: nowrap;
    transition: border-color .15s, color .15s, background-color .15s;
}

    .dealsFilterPanel .dfChipText .basedOnLocation {
        margin-inline-start: 4px;
        font-size: 11px;
        color: var(--df-muted);
    }

.dealsFilterPanel .dfChip input:checked + .dfChipText {
    border-color: var(--df-red);
    background: var(--df-red-soft);
    color: var(--df-red);
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
}

.dealsFilterPanel .dfChip input:focus-visible + .dfChipText {
    outline: 2px solid var(--df-red);
    outline-offset: 1px;
}

.dealsFilterPanel .dfChip.dfHidden,
.dealsFilterPanel .dfChip.dfNoMatch {
    display: none;
}

.dealsFilterPanel .dfMore {
    padding: 5px 12px;
    border: 0;
    border-radius: 5px;
    background: #E6E6E6;
    font-size: 13px;
    color: #333;
}

/* Location "dropdown": a select-looking button that reveals the location chips. */
.dealsFilterPanel .dfSelect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: var(--df-field);
    font-size: 13px;
    color: #333;
    text-align: start;
    cursor: pointer;
}

    .dealsFilterPanel .dfSelect .dfSelectText {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dealsFilterPanel .dfSelect .dfChevron {
        flex: 0 0 auto;
        transition: transform .2s;
    }

    .dealsFilterPanel .dfSelect.open .dfChevron {
        transform: rotate(180deg);
    }

.dealsFilterPanel .dfLocationChips {
    margin-top: 8px;
}

    .dealsFilterPanel .dfLocationChips.dfCollapsed {
        display: none;
    }

.dealsFilterPanel .dfBrandSearch {
    width: 100%;
    height: 36px;
    margin-bottom: 8px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: var(--df-field);
    font-size: 13px;
    color: #333;
    outline: 0;
}

.dealsFilterPanel .dfFooter {
    display: block;
    padding: 10px 16px 16px;
    margin: 0;
}

.filter-popup.dealsFilterPanel .btns .resultNum.dfApply {
    display: block;
    float: none;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--df-red) !important;
    color: #fff !important;
    font-size: 15px;
    font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

/* Figma category icons in the chip row (currentColor: grey, red when active). */
.catalogV2 .category-partner-type-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

    .catalogV2 .category-partner-type-icon svg {
        width: 14px;
        height: 14px;
    }

/* Figma icons: 20px search glass, 36px filter button (its own light outline), 24px chevron. */
.catalogV2 .searchDiv .searchIcon {
    width: 20px;
    height: 20px;
}

.catalogV2 .btnSorting.dfOpen svg.dfOpenIcon {
    width: 36px;
    height: 36px;
}

/* Location dropdown: the field opens a white list right under it (not chips) - one row per
   location with a tick when selected; scrolls when long. The checkboxes are unchanged. */
.dealsFilterPanel .dfLocationSection {
    position: relative;
}

.dealsFilterPanel .dfLocationChips {
    position: absolute;
    inset-inline: 0;
    z-index: 5;
    display: block;
    max-height: 220px;
    margin-top: 4px;
    padding: 4px 0;
    overflow-y: auto;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

    .dealsFilterPanel .dfLocationChips .dfChip.switch {
        display: flex;
        width: 100%;
    }

    .dealsFilterPanel .dfLocationChips .dfChipText {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px 12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 13px;
        color: #333;
    }

    .dealsFilterPanel .dfLocationChips .dfChip input:checked + .dfChipText {
        background: var(--df-red-soft);
        color: var(--df-red);
        font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
    }

        .dealsFilterPanel .dfLocationChips .dfChip input:checked + .dfChipText::after {
            content: "\2713";
            font-family: "IRANYekanBoldRd", "IRANYekanRegularRd"; font-weight: normal;
        }

/* Figma: plain grey "Reset" under the red Apply button. */
.filter-popup.dealsFilterPanel .dfFooter .dfReset {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-family: "IRANYekanMediumRd", "IRANYekanRegularRd"; font-weight: normal;
    color: #6C727F;
    text-align: center;
    cursor: pointer;
}

/* Figma filter panel: every rounded element inside it uses an 11px radius - the sort,
   location and brand chips, the "…" more chip, the location field and its dropdown list,
   the brand search box and the Apply button. */
.filter-popup.dealsFilterPanel .dfChip .dfChipText,
.filter-popup.dealsFilterPanel .dfMore,
.filter-popup.dealsFilterPanel .dfSelect,
.filter-popup.dealsFilterPanel .dfLocationChips,
.filter-popup.dealsFilterPanel .dfBrandSearch,
.filter-popup.dealsFilterPanel .btns .resultNum.dfApply {
    border-radius: 11px;
}

    /* rows inside the location dropdown stay square; the list itself is rounded */
    .filter-popup.dealsFilterPanel .dfLocationChips .dfChip .dfChipText {
        border-radius: 0;
    }

/* Category chip row ("All" + every category) - same look as the old partner type chips.
   The non-All chips are label.switch (Catalog.js needs that), so undo Site.css .switch sizing. */
.catalogV2 .dealCatChips {
    display: flex;
    flex-wrap: nowrap;
}

.catalogV2 .dealCatChips .dealCatChip,
.catalogV2 .dealCatChips label.switch.dealCatChip {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    width: auto;
    height: 30px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #C9C9C9;
    border-radius: 6px;
    background: #fff;
    color: var(--df-muted);
    font-weight: normal;
    cursor: pointer;
}

    .catalogV2 .dealCatChips .dealCatChip.active {
        border: 1.5px solid var(--df-red);
        color: var(--df-red);
    }

        .catalogV2 .dealCatChips .dealCatChip.active .category-partner-type-text {
            color: var(--df-red);
            font-family: "IRANYekanBoldRd", "IRANYekanRegularRd";
            font-weight: normal;
        }

/* Search glass: Site.css gives every .searchIcon 10px side padding, which with border-box
   sizing leaves a 20px icon no room to draw - drop it so the icon shows. */
.catalogV2 .searchDiv .searchIcon {
    flex: 0 0 20px;
    box-sizing: content-box;
    padding: 0;
}

/* Deals grid: the cards are floated Bootstrap columns of different heights (2-line subtitle,
   badges), so a taller card blocked the next one and left an empty slot in the grid. Lay the
   list out as wrapping flex rows instead - the col-* widths still decide 2 / 3 per row, and
   every row starts level. Other children (the "no data" message) take the full width. */
.catalogV2 #catalogItems,
.catalogV2 #telcoItems {
    display: flex;
    flex-wrap: wrap;
}

    .catalogV2 #catalogItems > *,
    .catalogV2 #telcoItems > * {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .catalogV2 #catalogItems > .dealsGridRow,
    .catalogV2 #telcoItems > .dealsGridRow {
        flex: 0 0 auto;
        float: none;
    }