/* =========================================================
   FONT
   ========================================================= */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../Fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../Fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../Fonts/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../Fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   DESIGN SYSTEM
   ========================================================= */

:root {

    --primary: #D9909B;
    --primary-dark: #C67582;
    --primary-deep: #B75F70;

    --primary-light: #FFF1F3;
    --primary-light-2: #FFF7F8;

    --background: #FFF8F8;
    --surface: #FFFFFF;

    --text: #3E3E43;
    --text-secondary: #6E6E75;
    --text-light: #99999F;

    --border: #EEDFE2;
    --border-light: #F4EAEC;

    --success: #4CAF50;
    --danger: #D9535F;

    --radius-small: 10px;
    --radius: 15px;
    --radius-large: 20px;

    --shadow-small:
        0 3px 12px rgba(70,35,45,.055);

    --shadow:
        0 8px 25px rgba(70,35,45,.075);

    --shadow-hover:
        0 15px 38px rgba(70,35,45,.12);
}


/* =========================================================
   GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    direction: rtl;
}


body {

    margin: 0;
    padding: 0;

    direction: rtl;

    font-family:
        'Vazirmatn',
        Tahoma,
        Arial,
        sans-serif;

    font-weight: 400;

    color: var(--text);

    background:
        linear-gradient(
            180deg,
            #FFFBFB 0,
            #FFF7F8 350px,
            #FFF9F9 100%
        );

    -webkit-font-smoothing: antialiased;
}


button,
input,
select,
textarea {

    font-family:
        'Vazirmatn',
        Tahoma,
        Arial,
        sans-serif;
}


a {
    -webkit-tap-highlight-color: transparent;
}


::selection {
    background: #EABBC3;
    color: #443438;
}


.page {
    width: 100%;
}


/* =========================================================
   HEADER
   ========================================================= */

.siteHeader {

    width: 100%;

    position: relative;

    z-index: 100;

    background:
        linear-gradient(
            125deg,
            #DE99A3 0%,
            #D58895 48%,
            #C87584 100%
        );

    border-bottom:
        1px solid rgba(255,255,255,.22);

    box-shadow:
        0 5px 25px rgba(90,40,50,.15);
}


.siteHeader::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );
}


.siteHeaderInner {

    width: 95%;
    max-width: 1400px;

    min-height: 88px;

    margin: auto;

    padding: 13px 5px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;
}


/* =========================================================
   BRAND
   ========================================================= */

.siteBrand {

    display: flex;

    align-items: center;

    gap: 13px;

    color: white;
}


.siteBrandIcon {

    width: 50px;
    height: 50px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(255,255,255,.17);

    border:
        1px solid rgba(255,255,255,.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 4px 12px rgba(70,30,40,.08);

    font-size: 23px;
}


.siteBrandText {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.siteBrandTitle {

    color: #fff;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.6;
}


.siteBrandSubtitle {

    color:
        rgba(255,255,255,.82);

    font-size: 11px;

    font-weight: 400;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.siteActions {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}


/* =========================================================
   WALLET / LEVEL
   ========================================================= */

.walletBox {

    min-width: 190px;

    height: 54px;

    padding: 7px 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: white;

    border-radius: 14px;

    background:
        rgba(255,255,255,.15);

    border:
        1px solid rgba(255,255,255,.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15);

    transition:
        background .2s ease,
        transform .2s ease;
}


.walletBox:hover {

    background:
        rgba(255,255,255,.21);

    transform:
        translateY(-1px);
}


.walletIcon {

    width: 37px;
    height: 37px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 3px 10px rgba(70,30,40,.09);

    font-size: 19px;
}


.walletInfo {

    pointer-events: none;

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.walletLabel {

    color:
        rgba(255,255,255,.82);

    font-size: 10px;

    font-weight: 400;
}


.walletAmount {

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;
}


.walletAmount2 {

    color: #c9546f;

    font-size: 15px;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   HEADER MENU BUTTONS
   ========================================================= */

.menuBtn {

    height: 43px;

    padding: 0 16px !important;

    border:
        1px solid rgba(255,255,255,.5) !important;

    border-radius:
        11px !important;

    background:
        rgba(255,255,255,.96) !important;

    color:
        #B95F70 !important;

    font-family:
        'Vazirmatn',
        Tahoma,
        sans-serif !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    cursor: pointer;

    box-shadow:
        0 3px 10px rgba(80,30,40,.08);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.menuBtn:hover {

    transform:
        translateY(-2px);

    background:
        #fff !important;

    box-shadow:
        0 7px 18px rgba(80,30,40,.14);
}


.menuBtn:active {
    transform: translateY(0);
}


.menuBtnCart {

    background:
        #FFF4F6 !important;

    color:
        #B65C6D !important;
}


.menuBtnLogout {
    color: #A95260 !important;
}


/* =========================================================
   OLD HEADER COMPATIBILITY
   ========================================================= */

.header {

    background:
        var(--primary);

    padding:
        15px 25px;

    overflow:
        hidden;
}


.headerTitle {

    float: right;

    color: white;

    font-size: 35px;

    font-weight: 700;
}


.headerMenu {

    float: left;

    margin-top: 8px;
}


/* =========================================================
   MAIN
   ========================================================= */

.siteMain {

    width: 100%;

    min-height:
        calc(100vh - 190px);
}


.main {

    width: 95%;

    max-width: 1400px;

    margin:
        30px auto;
}


/* =========================================================
   FORMS
   ========================================================= */

.formBox {

    width: 100%;

    max-width: 500px;

    margin: auto;

    padding: 30px;

    background: white;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow);
}


.txt {

    width: 100%;

    height: 46px;

    padding:
        0 12px;

    margin-bottom:
        12px;

    border:
        1px solid #E6DCDE;

    border-radius:
        10px;

    outline: none;

    background:
        #fff;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.txt:focus {

    border-color:
        #D99AA5;

    box-shadow:
        0 0 0 4px
        rgba(217,144,155,.10);
}


/* =========================================================
   GENERAL BUTTON
   ========================================================= */

.btn {

    width: 100%;

    height: 46px;

    border: none;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #D9909B,
            #C97786
        );

    color: white;

    cursor: pointer;

    font-weight: 600;

    box-shadow:
        0 5px 13px
        rgba(190,88,108,.15);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(190,88,108,.22);
}


.btn:active {
    transform: translateY(0);
}


/* =========================================================
   SEARCH
   ========================================================= */

.searchPanel {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 28px;

    padding: 14px;

    background:
        rgba(255,255,255,.88);

    border:
        1px solid var(--border-light);

    border-radius:
        17px;

    box-shadow:
        var(--shadow-small);
}


.searchBoxWrapper {

    position: relative;

    width: 270px;
}


.txtSearch,
.cmbBrand {

    height: 43px;

    border:
        1px solid #E5DADD;

    border-radius:
        10px;

    background: white;

    color: #444;

    outline: none;

    font-size: 13px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.txtSearch {

    width: 100%;

    padding:
        0 12px;
}


.cmbBrand {

    padding:
        0 10px;
}


.txtSearch:focus,
.cmbBrand:focus {

    border-color:
        #D99AA5;

    box-shadow:
        0 0 0 4px
        rgba(217,144,155,.10);
}


.txtSearch::placeholder {
    color: #aaa;
}


.searchBtn {

    height: 43px;

    padding:
        0 22px;

    border: none;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #D9909B,
            #C97786
        );

    color: white;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 4px 11px
        rgba(190,88,108,.14);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.searchBtn:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 16px
        rgba(190,88,108,.2);
}


/* =========================================================
   LIVE SEARCH
   ========================================================= */

.searchSuggestions {

    position: absolute;

    top:
        calc(100% + 7px);

    right: 0;

    width: 100%;

    overflow: hidden;

    display: none;

    z-index: 99999;

    background: #fff;

    border:
        1px solid #E8DADD;

    border-radius:
        15px;

    box-shadow:
        0 18px 45px
        rgba(61,37,42,.15);
}


.searchSuggestionItem {

    width: 100%;

    padding:
        11px 13px;

    display: flex;

    align-items: center;

    gap: 12px;

    background: #fff;

    border-bottom:
        1px solid #F2E8EA;

    cursor: pointer;

    transition:
        background .15s ease;
}


.searchSuggestionItem:last-child {
    border-bottom: none;
}


.searchSuggestionItem:hover {
    background: #FFF5F7;
}


.searchSuggestionImage {

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    object-fit: contain;

    border-radius:
        10px;

    background: #fff;

    border:
        1px solid #F0E7E9;
}


.searchSuggestionInfo {

    flex: 1;

    min-width: 0;

    text-align: right;
}


.searchSuggestionTitle {

    color: #404046;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.8;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.searchSuggestionPrice {

    margin-top: 3px;

    color:
        #B86A79;

    font-size: 12px;

    font-weight: 500;
}


.noSearchResult {

    padding: 18px;

    text-align: center;

    color: #888;

    font-size: 13px;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.productsPage {
    width: 100%;
}


.productsGrid {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    justify-content:
        flex-start;
}


.productCard {

    width:
        calc(25% - 16.5px);

    position: relative;

    overflow: hidden;

    padding:
        13px 13px 17px;

    text-align: center;

    background: #fff;

    border:
        1px solid #F0E5E7;

    border-radius:
        19px;

    box-shadow:
        0 4px 16px
        rgba(70,35,42,.055);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.productCard:hover {

    transform:
        translateY(-6px);

    border-color:
        #E5C8CE;

    box-shadow:
        0 15px 36px
        rgba(70,35,42,.11);
}


/* =========================================================
   PRODUCT LINKS
   ========================================================= */

.productDetailLink,
.productTitleLink,
.bestSellingDetailLink,
.bestSellingNameLink {

    color: inherit !important;

    text-decoration:
        none !important;

    outline: none;
}


.productDetailLink:visited,
.productTitleLink:visited,
.bestSellingDetailLink:visited,
.bestSellingNameLink:visited {

    color: inherit !important;

    text-decoration:
        none !important;
}


.productDetailLink:hover,
.productTitleLink:hover,
.bestSellingDetailLink:hover,
.bestSellingNameLink:hover {

    color: inherit !important;

    text-decoration:
        none !important;
}


.productDetailLink {

    display: block;

    overflow: hidden;

    border-radius:
        14px;

    cursor: pointer;
}


.productImage {

    display: block;

    width: 100%;

    height: 250px;

    object-fit: cover;

    border-radius:
        14px;

    background:
        #F8F8F8;

    transition:
        transform .35s ease;
}


.productCard:hover .productImage {
    transform: scale(1.025);
}


.productTitle {

    min-height: 58px;

    margin-top: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #414146;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.9;
}


.productTitleLink {
    cursor: pointer;
}


.productStock {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 6px;

    padding:
        4px 10px;

    color:
        #77777D;

    background:
        #F8F8F8;

    border-radius:
        20px;

    font-size:
        11px;

    font-weight: 400;
}


.productPrice {

    margin-top:
        11px;

    color:
        #C66578;

    font-size:
        19px;

    font-weight:
        700;
}


/* =========================================================
   ADD TO CART
   ========================================================= */

.cartBtn {

    width: 100%;

    height: 46px;

    margin-top:
        13px;

    border: none;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #D9909B,
            #C97786
        );

    color: white;

    font-size:
        13px;

    font-weight:
        600;

    cursor: pointer;

    box-shadow:
        0 5px 13px
        rgba(193,92,110,.15);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.cartBtn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(193,92,110,.22);
}


.cartBtn:active {
    transform: translateY(0);
}


.cartBtnAdded {

    background:
        var(--success) !important;

    color:
        #fff !important;

    cursor:
        default;
}


/* =========================================================
   CART
   ========================================================= */

.cartItem {

    padding: 16px;

    margin-bottom:
        15px;

    overflow: hidden;

    background: white;

    border:
        1px solid var(--border-light);

    border-radius:
        18px;

    box-shadow:
        var(--shadow-small);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.cartItem:hover {

    border-color:
        #E8D0D5;

    box-shadow:
        var(--shadow);
}


.cartImage {

    width: 100px;
    height: 100px;

    float: right;

    object-fit: cover;

    border-radius:
        12px;

    background:
        #F7F7F7;

    border:
        1px solid #F0E7E9;
}


.cartInfo {
    margin-right: 120px;
}


.cartTitle {

    color:
        #414146;

    font-size:
        16px;

    font-weight:
        600;
}


.cartPrice {

    margin-top: 8px;

    color:
        #666;
}


.cartQtyPanel {
    margin-top: 10px;
}


.cartTotal {

    margin-top: 8px;

    color:
        #C66578;

    font-weight:
        600;
}


.qtyBtn {

    width: 36px;
    height: 36px;

    border: none;

    border-radius:
        9px;

    background:
        var(--primary);

    color: white;

    cursor: pointer;

    font-size: 18px;

    box-shadow:
        0 3px 8px
        rgba(190,90,105,.13);
}


.qtyBtn:hover {
    background: var(--primary-dark);
}


.qtyLabel {

    display: inline-block;

    width: 42px;

    text-align: center;

    font-weight: 600;
}


.deleteBtn {

    margin-top: 10px;

    padding:
        8px 15px;

    border: none;

    border-radius:
        9px;

    background:
        var(--danger);

    color: white;

    cursor: pointer;

    font-weight: 500;
}


.deleteBtn:hover {
    background: #C94754;
}


/* =========================================================
   CART FOOTER
   ========================================================= */

.cartFooter {

    padding: 22px;

    text-align: center;

    background: white;

    border:
        1px solid var(--border-light);

    border-radius:
        19px;

    box-shadow:
        var(--shadow);
}


/* =========================================================
   LEVEL DISCOUNT
   ========================================================= */

.levelDiscountPanel {

    position: relative;

    overflow: hidden;

    margin:
        20px 0;

    padding:
        21px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #FFF9FA,
            #FFF2F4
        );

    border:
        1px solid #EBCFD5;

    border-radius:
        17px;

    box-shadow:
        0 5px 17px
        rgba(95,46,57,.06);
}


.levelDiscountPanel::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #D9909B,
            transparent
        );
}


.levelDiscountTitle {

    margin-bottom:
        10px;

    color:
        #45454A;

    font-size:
        17px;

    font-weight:
        700;
}


.levelDiscountAmount {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    color:
        #66666C;

    font-size:
        14px;

    font-weight:
        500;
}


.levelDiscountAmount #MainContent_lblLevelDiscount {

    color:
        #C9546B;

    font-size:
        22px;

    font-weight:
        700;
}


/* =========================================================
   WALLET PANEL
   ========================================================= */

.walletPanel {

    width: 100%;

    margin:
        20px 0;

    padding:
        20px;

    direction: rtl;

    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #FFFAFB
        );

    border:
        1px solid #EAD5DA;

    border-radius:
        17px;

    box-shadow:
        0 5px 17px
        rgba(80,40,50,.055);
}


.walletTitle {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-bottom:
        16px;

    color:
        #44444A;

    font-size:
        16px;

    font-weight:
        600;
}


.walletTitle::before {

    content:
        "💰";

    font-size:
        19px;
}


.walletCheck {

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        14px 16px;

    background:
        #FFF7F8;

    border:
        1px solid #EFD9DD;

    border-radius:
        12px;

    transition:
        background .18s ease,
        border-color .18s ease;
}


.walletCheck:hover {

    background:
        #FFF1F3;

    border-color:
        #E4C4CB;
}


.walletCheck input[type="checkbox"] {

    width: 19px;
    height: 19px;

    margin-left:
        8px;

    cursor: pointer;

    accent-color:
        #D88C9D;
}


.walletCheck label {

    color:
        #55555B;

    font-size:
        14px;

    font-weight:
        500;

    cursor: pointer;
}


/* =========================================================
   PAYMENT SUMMARY
   ========================================================= */

.paymentSummary {

    width: 100%;

    margin:
        20px 0;

    padding:
        10px 22px;

    direction: rtl;

    background: #fff;

    border:
        1px solid #EAD5DA;

    border-radius:
        17px;

    box-shadow:
        0 5px 18px
        rgba(80,40,50,.055);
}


.paymentRow {

    min-height:
        52px;

    padding:
        8px 4px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    border-bottom:
        1px solid #F1E5E8;

    color:
        #55555B;

    font-size:
        14px;

    font-weight:
        500;
}


.paymentRow:last-child {
    border-bottom: none;
}


.paymentLabel {
    text-align: right;
}


.paymentValue {

    white-space: nowrap;

    text-align: left;

    color:
        #333338;

    font-weight:
        600;
}


.walletValue {
    color: #77777D;
}


.cashPaymentRow {

    margin-top:
        5px;

    padding:
        18px 4px;

    border-top:
        2px solid #EAD5DA;

    border-bottom:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            #FFF7F8,
            transparent
        );

    color:
        #333338;

    font-size:
        16px;

    font-weight:
        700;
}


.cashValue {

    color:
        #C65E74;

    font-size:
        22px;

    font-weight:
        700;
}


/* =========================================================
   PAYMENT PAGE
   ========================================================= */

.paymentBox {

    max-width: 900px;

    margin: auto;

    padding: 30px;

    text-align: center;

    background: white;

    border:
        1px solid var(--border-light);

    border-radius:
        20px;

    box-shadow:
        0 12px 35px
        rgba(72,37,45,.075);
}


.successIcon {

    width: 78px;
    height: 78px;

    line-height: 78px;

    margin:
        0 auto 20px;

    border-radius:
        50%;

    background:
        #4CAF50;

    color: white;

    font-size:
        38px;

    font-weight:
        700;

    box-shadow:
        0 8px 20px
        rgba(76,175,80,.18);
}


.infoIcon {

    width: 45px;
    height: 45px;

    line-height: 45px;

    margin:
        0 auto 15px;

    border-radius:
        50%;

    border:
        2px solid #D9909B;

    background:
        #FFF2F4;

    color:
        #C86E7F;

    font-size:
        20px;

    font-weight:
        700;
}


.paymentTitle {

    margin:
        10px 0 5px;

    color:
        #36363B;

    font-size:
        25px;

    font-weight:
        700;
}


/* =========================================================
   PAYMENT SCROLL BUTTON
   ========================================================= */

.paymentActionBox {

    text-align: center;

    margin:
        16px 0 25px;
}


.paymentScrollBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-width: 210px;

    padding:
        11px 23px;

    background:
        linear-gradient(
            135deg,
            #D9909B,
            #C97786
        );

    color:
        #fff !important;

    border:
        1px solid #D9909B;

    border-radius:
        11px;

    text-decoration:
        none !important;

    font-size:
        13px;

    font-weight:
        600;

    cursor: pointer;

    box-shadow:
        0 5px 15px
        rgba(217,144,155,.22);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.paymentScrollBtn:hover {

    color:
        #fff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(217,144,155,.30);
}


.paymentScrollArrow {

    font-size: 17px;

    line-height: 1;
}


/* =========================================================
   FINAL PAYMENT AMOUNT
   ========================================================= */

.paymentmablagh {

    margin-top:
        20px;

    padding:
        18px 20px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 15px;

    background:
        linear-gradient(
            135deg,
            #FFF9FA,
            #FFF3F5
        );

    border:
        1px solid #E5CBD1;

    border-radius:
        14px;

    color:
        #55555B;

    font-size:
        15px;

    font-weight:
        600;
}


.paymentmablagh span {

    color:
        #C45F76;

    font-size:
        23px;

    font-weight:
        700;

    white-space:
        nowrap;
}


#paymentTargetSection {
    scroll-margin-top: 90px;
}


/* =========================================================
   PAYMENT BANK SECTION
   ========================================================= */

.paymentSectionTitle {

    margin-top:
        25px;

    margin-bottom:
        15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color:
        #44444A;

    font-size:
        18px;

    font-weight:
        600;
}


.paymentSectionIcon {

    width: 34px;
    height: 34px;

    display:
        inline-flex;

    align-items: center;

    justify-content: center;

    border-radius:
        50%;

    background:
        #FFF1F3;

    color:
        #C96F84;

    border:
        1px solid #EBCDD3;

    font-size:
        17px;
}


.bankList {

    width: 100%;

    display: flex;

    flex-direction:
        column;

    gap: 10px;
}


.bankInfo {

    width: 100%;

    min-height: 0;

    height: auto;

    padding:
        14px 16px;

    display: flex;

    align-items: center;

    gap: 12px;

    text-align: right;

    color:
        #44444A;

    line-height:
        1.8;

    font-size:
        14px;

    background:
        linear-gradient(
            135deg,
            #FFFDFD,
            #FFF8F9
        );

    border:
        1px solid #EEE0E3;

    border-radius:
        12px;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


.bankInfo:hover {

    transform:
        translateY(-2px);

    border-color:
        #E5C9CF;

    box-shadow:
        0 6px 17px
        rgba(80,40,50,.07);
}


.bankInfoIcon {

    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius:
        10px;

    background: white;

    border:
        1px solid #E8D6DA;

    color:
        #C96F84;

    font-size:
        18px;
}


.bankInfoText {

    flex: 1;

    min-width: 0;

    min-height: 0;

    height: auto;

    /*
       خیلی مهم:
       قبلاً pre-line بود و با ساختار جدید
       باعث کشیده‌شدن بیش از حد باکس می‌شد.
    */
    white-space: normal;
}


/* =========================================================
   PAYMENT COPY
   ========================================================= */

.paymentCopyRow {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 9px;

    width: 100%;

    min-height: 0;
}


.paymentCopyNumber {

    direction: ltr;

    unicode-bidi: plaintext;

    display: inline-block;

    color:
        #333338;

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.5;

    letter-spacing:
        .2px;

    overflow-wrap:
        anywhere;
}


.paymentCopyBtn {

    width: auto !important;

    height: auto !important;

    min-width: 62px !important;

    min-height: 30px !important;

    margin: 0 !important;

    padding:
        5px 10px !important;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        #FFF4F6;

    color:
        #B45F70;

    border:
        1px solid #E7C9CF;

    border-radius:
        8px;

    font-family:
        'Vazirmatn',
        Tahoma,
        sans-serif;

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1.5;

    white-space:
        nowrap;

    cursor:
        pointer;

    box-shadow:
        none;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.paymentCopyBtn:hover {

    background:
        #D9909B;

    color:
        #fff;

    border-color:
        #D9909B;

    transform:
        translateY(-1px);
}


.paymentCopyBtn.copied {

    background:
        #4CAF50;

    color:
        #fff;

    border-color:
        #4CAF50;
}


.paymentBankTitle {

    margin-top:
        5px;

    color:
        #66666C;

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.8;
}


.paymentNote {

    margin-top:
        22px;

    margin-bottom:
        10px;

    padding:
        15px 18px;

    background:
        #FAFAFA;

    border:
        1px solid #EEEEEE;

    border-radius:
        12px;

    color:
        #66666C;

    line-height:
        2;

    font-size:
        13px;
}


.paymentOrdersBtn {

    margin-top:
        22px;

    max-width:
        320px;
}


/* =========================================================
   INFO
   ========================================================= */

#lblinfo {

    display: block;

    margin-top:
        12px;

    color:
        #B65F72;

    font-size:
        13px;

    line-height:
        1.9;
}


/* =========================================================
   MY ORDERS
   ========================================================= */

.orderCard {

    margin-bottom:
        15px;

    padding:
        20px;

    background: white;

    border:
        1px solid var(--border-light);

    border-radius:
        18px;

    box-shadow:
        var(--shadow-small);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.orderCard:hover {

    transform:
        translateY(-3px);

    border-color:
        #E8CFD4;

    box-shadow:
        var(--shadow);
}


.orderHeader {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    margin-bottom:
        10px;
}


.orderNumber {
    font-weight: 600;
}


.orderDate {

    color:
        #77777D;

    font-size:
        13px;
}


.orderAmount {
    margin-top: 10px;
}


.orderStatus {

    display:
        inline-block;

    margin-top:
        10px;

    padding:
        5px 10px;

    border-radius:
        20px;

    background:
        var(--primary-light);

    color:
        #BF6073;

    font-weight:
        600;

    font-size:
        12px;
}


.btnSmall {

    padding:
        10px 18px;

    border: none;

    border-radius:
        9px;

    background:
        var(--primary);

    color: white;

    cursor: pointer;

    font-weight:
        500;
}


.btnSmall:hover {
    background: var(--primary-dark);
}


/* =========================================================
   ORDER DETAILS
   ========================================================= */

.orderDetailBox {

    padding:
        25px;

    background: white;

    border:
        1px solid var(--border-light);

    border-radius:
        19px;

    box-shadow:
        var(--shadow);
}


.orderInfo div {

    margin-bottom:
        12px;

    font-size:
        14px;
}


.orderItem {

    margin-bottom:
        12px;

    padding:
        12px;

    overflow: hidden;

    background:
        #FFFDFD;

    border:
        1px solid #F0E5E7;

    border-radius:
        12px;
}


.orderItemImage {

    width: 90px;
    height: 90px;

    float: right;

    object-fit:
        contain;

    border-radius:
        9px;

    background: white;

    border:
        1px solid #EEE;
}


.orderItemInfo {
    margin-right: 110px;
}


.itemTitle {

    margin-bottom:
        8px;

    font-weight:
        600;
}


/* =========================================================
   BEST SELLING
   ========================================================= */

.bestSellingSection {

    width: 100%;

    position: relative;

    overflow: hidden;

    margin-top:
        45px;

    padding:
        28px 20px 25px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(255,247,249,.92)
        );

    border:
        1px solid #ECDDDF;

    border-radius:
        22px;

    box-shadow:
        0 10px 30px
        rgba(70,35,42,.065);
}


.bestSellingSection::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -150px;
    right: -90px;

    border-radius:
        50%;

    background:
        rgba(217,144,155,.08);

    pointer-events: none;
}


.bestSellingTitle {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color:
        #49494F;

    font-size:
        19px;

    font-weight:
        700;
}


.bestSellingTitleIcon {

    width: 32px;
    height: 32px;

    display:
        inline-flex;

    align-items: center;

    justify-content: center;

    border-radius:
        50%;

    background:
        #FFF0F3;

    border:
        1px solid #EFD4DA;

    color:
        #C66D80;

    font-size:
        16px;
}


.bestSellingSubtitle {

    margin-top:
        7px;

    margin-bottom:
        24px;

    color:
        #99999F;

    font-size:
        11px;
}


.bestSellingGrid {

    width: 100%;

    display: flex;

    align-items:
        flex-start;

    justify-content:
        center;

    gap: 30px;

    flex-wrap:
        wrap;
}


.bestSellingItem {

    width: 135px;

    display: flex;

    flex-direction:
        column;

    align-items:
        center;
}


.bestSellingImageCircle {

    width: 112px;
    height: 112px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        50%;

    background: #fff;

    border:
        2px solid #F0E1E4;

    box-shadow:
        0 6px 18px
        rgba(70,35,42,.08);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.bestSellingImageCircle:hover {

    transform:
        translateY(-5px)
        scale(1.025);

    border-color:
        #DFB8C0;

    box-shadow:
        0 12px 26px
        rgba(70,35,42,.13);
}


.bestSellingImage {

    width: 100%;
    height: 100%;

    object-fit:
        cover;

    padding: 0;
}


.bestSellingName {

    width: 100%;

    min-height:
        44px;

    margin-top:
        11px;

    display: flex;

    align-items:
        flex-start;

    justify-content:
        center;

    text-align:
        center;

    color:
        #55555B;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.8;
}


.bestSellingAddBtn {

    width: 42px;
    height: 36px;

    margin-top:
        7px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid #E1BFC7;

    border-radius:
        11px;

    background:
        #FFF5F7;

    color:
        #C56579;

    font-size:
        18px;

    font-weight:
        600;

    cursor: pointer;

    transition:
        all .2s ease;
}


.bestSellingAddBtn:hover {

    transform:
        translateY(-2px);

    background:
        #D9909B;

    color: white;

    border-color:
        #D9909B;

    box-shadow:
        0 5px 12px
        rgba(80,40,50,.12);
}


.bestSellingAddBtnAdded {

    background:
        #4CAF50 !important;

    border-color:
        #4CAF50 !important;

    color:
        white !important;

    cursor:
        default;
}


/* =========================================================
   CUSTOMER LEVEL POPUP
   ========================================================= */

.walletLevelModal {

    display: none;

    position: fixed;

    width: 300px;

    padding: 20px;

    box-sizing:
        border-box;

    direction: rtl;

    text-align:
        center;

    background:
        #fff;

    border:
        1px solid #E9D8DC;

    border-radius:
        18px;

    box-shadow:
        0 20px 50px
        rgba(60,35,40,.19);

    z-index:
        999999;

    animation:
        levelPopupIn .18s ease-out;
}


@keyframes levelPopupIn {

    from {

        opacity: 0;

        transform:
            translateY(5px)
            scale(.98);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


.walletLevelModal:before {

    content: "";

    position: absolute;

    top: 20px;
    right: -9px;

    width: 16px;
    height: 16px;

    background: #fff;

    border-top:
        1px solid #EADCE0;

    border-right:
        1px solid #EADCE0;

    transform:
        rotate(45deg);
}


.walletLevelModalClose {

    position: absolute;

    top: 7px;
    left: 9px;

    width: 26px;
    height: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        50%;

    color: #999;

    font-size:
        20px;

    cursor: pointer;
}


.walletLevelModalClose:hover {

    color:
        #C56579;

    background:
        #FFF0F3;
}


.walletModalMedal {

    margin-bottom:
        10px;

    font-size:
        38px;

    line-height:
        1;
}


.walletModalTitle {

    margin-bottom:
        10px;

    color:
        #55555B;

    font-size:
        15px;

    font-weight:
        700;
}


.walletModalText {

    color:
        #66666C;

    font-size:
        11px;

    line-height:
        2;
}


.walletModalText strong {
    color: #C56579;
}


.walletModalHint {

    margin-top:
        13px;

    padding-top:
        10px;

    border-top:
        1px solid #F0E3E6;

    color:
        #99999F;

    font-size:
        10px;

    line-height:
        1.8;
}


/* =========================================================
   FOOTER
   ========================================================= */

.siteFooter {

    position: relative;

    margin-top:
        50px;

    overflow: hidden;

    color: white;

    background:
        linear-gradient(
            125deg,
            #CA7C89 0%,
            #C06F7D 55%,
            #B96575 100%
        );

    box-shadow:
        0 -5px 25px
        rgba(80,35,45,.06);
}


.siteFooter::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -190px;
    left: -80px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.06);

    pointer-events: none;
}


.siteFooterInner {

    position: relative;

    z-index: 1;

    width: 95%;

    max-width:
        1400px;

    margin: auto;

    padding:
        30px 5px 19px;
}


.footerMain {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    text-align: center;
}


.footerIcon {

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        13px;

    background:
        rgba(255,255,255,.13);

    border:
        1px solid rgba(255,255,255,.2);

    font-size:
        20px;
}


.footerText {

    display: flex;

    flex-direction:
        column;

    gap: 5px;
}


.footerTitle {

    color: white;

    font-size:
        15px;

    font-weight:
        600;
}


.footerDescription {

    color:
        rgba(255,255,255,.78);

    font-size:
        10px;

    font-weight:
        400;
}


.footerDivider {

    height: 1px;

    margin:
        22px 0 15px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );
}


.footerBottom {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 15px;

    color:
        rgba(255,255,255,.74);

    font-size:
        10px;
}


.footerCopyright {
    white-space: nowrap;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1000px) {

    .productCard {

        width:
            calc(50% - 11px);
    }


    .siteBrandTitle {
        font-size: 19px;
    }


    .walletBox {
        min-width: 165px;
    }


    .bestSellingGrid {
        gap: 25px;
    }


    .bestSellingItem {
        width: 120px;
    }


    .bestSellingImageCircle {

        width:
            100px;

        height:
            100px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {


    body {
        background: #FFF8F8;
    }


    .main {

        width: 94%;

        margin:
            17px auto;
    }


    /* HEADER */

    .siteHeaderInner {

        width: 94%;

        padding:
            12px 0;

        flex-direction:
            column;

        align-items:
            stretch;

        gap: 12px;
    }


    .siteBrand {
        justify-content: center;
    }


    .siteBrandIcon {

        width: 43px;
        height: 43px;
    }


    .siteBrandTitle {
        font-size: 17px;
    }


    .siteBrandSubtitle {
        font-size: 9px;
    }


    .siteActions {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 7px;
    }


    .walletBox {

        width: 100%;

        min-width: 0;

        grid-column:
            span 2;

        justify-content:
            center;
    }


    .menuBtn {

        width: 100%;

        min-height:
            44px;

        padding:
            0 8px !important;

        font-size:
            12px !important;
    }


    /* SEARCH */

    .searchPanel {

        display: block;

        padding: 11px;

        margin-bottom:
            18px;

        border-radius:
            14px;
    }


    .searchBoxWrapper {
        width: 100%;
    }


    .txtSearch,
    .cmbBrand,
    .searchBtn {

        width: 100%;

        height: 48px;

        min-height:
            48px;

        margin-bottom:
            10px;

        font-size:
            14px;
    }


    .searchSuggestionImage {

        width: 50px;

        height: 50px;
    }


    /* PRODUCTS */

    .productCard {

        width: 100%;

        padding:
            11px 11px 15px;

        border-radius:
            17px;
    }


    .productCard:hover {
        transform: none;
    }


    .productImage {
        border-radius: 12px;
    }


    .productTitle {

        min-height: auto;

        margin:
            13px 0 6px;

        font-size:
            15px;
    }


    .productPrice {
        font-size: 19px;
    }


    .cartBtn {

        height:
            50px;

        font-size:
            14px;
    }


    /* CART */

    .cartItem {
        padding: 15px;
    }


    .cartImage {

        float: none;

        display: block;

        margin: auto;
    }


    .cartInfo {

        margin-right: 0;

        margin-top:
            10px;

        text-align:
            center;
    }


    .qtyBtn {

        width: 44px;

        height: 44px;
    }


    .deleteBtn {
        min-height: 44px;
    }


    .cartFooter {

        padding: 15px;

        border-radius:
            17px;
    }


    /* LEVEL */

    .levelDiscountPanel {

        padding:
            18px 10px;

        border-radius:
            15px;
    }


    .levelDiscountTitle {
        font-size: 16px;
    }


    .levelDiscountAmount {
        font-size: 13px;
    }


    .levelDiscountAmount #MainContent_lblLevelDiscount {
        font-size: 21px;
    }


    /* WALLET */

    .walletPanel {

        padding: 16px;

        margin:
            15px 0;
    }


    .walletTitle {
        font-size: 15px;
    }


    .walletCheck label {
        font-size: 13px;
    }


    /* PAYMENT */

    .paymentSummary {

        margin:
            15px 0;

        padding:
            8px 15px;
    }


    .paymentRow {

        min-height:
            48px;

        gap: 10px;

        font-size:
            13px;
    }


    .cashPaymentRow {
        font-size: 15px;
    }


    .cashValue {
        font-size: 20px;
    }


    .paymentBox {

        padding:
            22px 15px;

        border-radius:
            17px;
    }


    .paymentTitle {
        font-size: 21px;
    }


    .paymentActionBox {

        margin:
            13px 0 21px;
    }


    .paymentScrollBtn {

        width: 100%;

        max-width:
            290px;

        padding:
            12px 18px;

        font-size:
            13px;
    }


    .paymentmablagh {

        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;

        gap: 6px;

        padding: 16px;
    }


    .paymentmablagh span {
        font-size: 21px;
    }


    #paymentTargetSection {
        scroll-margin-top: 45px;
    }


    .paymentSectionTitle {
        font-size: 16px;
    }


    .bankInfo {

        padding:
            12px;

        gap: 9px;

        font-size:
            13px;
    }


    .bankInfoIcon {

        width: 34px;
        height: 34px;

        min-width: 34px;

        font-size:
            16px;
    }


    .paymentCopyRow {
        gap: 7px;
    }


    .paymentCopyNumber {
        font-size: 13px;
    }


    .paymentCopyBtn {

        min-width:
            58px !important;

        min-height:
            29px !important;

        padding:
            4px 8px !important;

        font-size:
            10px;
    }


    .paymentBankTitle {

        margin-top:
            4px;

        font-size:
            11px;
    }


    .paymentNote {
        font-size: 12px;
    }


    /* ORDERS */

    .orderCard {
        padding: 15px;
    }


    .orderHeader {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 7px;
    }


    .orderItemImage {

        width:
            75px;

        height:
            75px;
    }


    .orderItemInfo {
        margin-right: 90px;
    }


    /* BEST SELLING */

    .bestSellingSection {

        margin-top:
            30px;

        padding:
            22px 10px 20px;

        border-radius:
            18px;
    }


    .bestSellingTitle {
        font-size: 17px;
    }


    .bestSellingSubtitle {

        margin-bottom:
            20px;

        font-size:
            10px;
    }


    .bestSellingGrid {

        gap:
            22px 10px;

        justify-content:
            space-around;
    }


    .bestSellingItem {
        width: 105px;
    }


    .bestSellingImageCircle {

        width:
            88px;

        height:
            88px;
    }


    .bestSellingImage {
        border-radius: 50%;
    }


    .bestSellingName {

        min-height:
            42px;

        font-size:
            11px;
    }


    /* LEVEL POPUP */

    .walletLevelModal {

        width:
            260px;

        padding:
            17px;
    }


    .walletModalMedal {
        font-size: 34px;
    }


    .walletModalTitle {
        font-size: 14px;
    }


    .walletModalText {
        font-size: 10px;
    }


    /* FOOTER */

    .siteFooter {
        margin-top: 35px;
    }


    .siteFooterInner {

        padding:
            24px 5px 16px;
    }


    .footerBottom {

        flex-direction:
            column;

        text-align:
            center;

        gap: 8px;
    }


    .footerTitle {
        font-size: 14px;
    }


    .footerDescription {
        font-size: 9px;
    }

}

/* =========================================================
   LOGIN PAGE
   ========================================================= */

.loginPage {

    width: 100%;

    padding:
        30px 15px 45px;

    display: flex;

    justify-content: center;
}


.loginCard {

    width: 100%;

    max-width: 560px;

    overflow: hidden;

    padding:
        30px 34px 32px;

    background:
        rgba(255,255,255,.98);

    border:
        1px solid #F0E3E6;

    border-radius:
        22px;

    box-shadow:
        0 14px 42px
        rgba(80,40,50,.085);
}


/* =========================================================
   SHOP IDENTITY
   ========================================================= */

.loginShopHeader {

    text-align: center;

    padding:
        2px 5px 5px;
}


.loginLogoBox,
.loginLogoFallback {

    width: 90px;
    height: 90px;

    margin:
        0 auto 16px;

    border-radius:
        24px;

    overflow: hidden;

    background:
        #FFF7F8;

    border:
        1px solid #ECD9DD;

    box-shadow:
        0 7px 20px
        rgba(75,40,48,.08);
}


.loginLogoBox {

    width: 90px;
    height: 90px;

    margin: 0 auto 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #fff;

    border: 1px solid #ECD9DD;
    border-radius: 20px;

    box-shadow:
        0 7px 20px rgba(75,40,48,.08);
}


.loginShopLogo {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    padding: 8px;

    background: #fff;
}


.loginLogoFallback {

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #FFF5F7,
            #FBE8EC
        );

    color:
        #C56D7E;

    font-size:
        35px;

    font-weight:
        700;
}


.loginShopName {

    margin:
        0;

    color:
        #3E3E43;

    font-size:
        25px;

    font-weight:
        700;

    line-height:
        1.8;
}


.loginShopDescription {

    max-width: 430px;

    margin:
        7px auto 0;

    color:
        #7A7A80;

    font-size:
        12px;

    line-height:
        2;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.loginDivider {

    width: 100%;

    height: 1px;

    margin:
        23px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ECDDE0,
            transparent
        );
}


/* =========================================================
   LOGIN FORM
   ========================================================= */

.loginFormSection {

    width: 100%;

    max-width: 440px;

    margin: auto;
}


.loginTitle {

    margin:
        0;

    text-align: center;

    color:
        #424247;

    font-size:
        20px;

    font-weight:
        700;
}


.loginSubtitle {

    margin:
        6px 0 21px;

    text-align: center;

    color:
        #99999F;

    font-size:
        11px;

    line-height:
        1.9;
}


.loginField {

    width: 100%;

    height: 49px;

    position: relative;

    margin-bottom:
        11px;
}


.loginFieldIcon {

    width: 43px;

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;

    font-size:
        16px;
}


.loginInput {

    width: 100%;
    height: 49px;

    padding:
        0 44px 0 14px;

    border:
        1px solid #E6DADD;

    border-radius:
        11px;

    outline: none;

    background:
        #FFFDFD;

    color:
        #44444A;

    font-size:
        13px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.loginInput:focus {

    background:
        #fff;

    border-color:
        #D998A4;

    box-shadow:
        0 0 0 4px
        rgba(217,144,155,.10);
}


.loginInput::placeholder {

    color:
        #A0A0A5;
}


.loginMessage {

    display: block;

    min-height:
        20px;

    margin:
        5px 0 8px;

    text-align: center;

    color:
        #D05A68;

    font-size:
        11px;

    line-height:
        1.8;
}


/* =========================================================
   LOGIN BUTTONS
   ========================================================= */

.loginPrimaryBtn,
.loginShopBtn {

    width: 100%;
    height: 49px;

    border-radius:
        11px;

    font-family:
        'Vazirmatn',
        Tahoma,
        sans-serif;

    font-size:
        13px;

    font-weight:
        600;

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.loginPrimaryBtn {

    border:
        1px solid #CF7F8D;

    background:
        linear-gradient(
            135deg,
            #D9909B,
            #C97786
        );

    color:
        #fff;

    box-shadow:
        0 6px 16px
        rgba(190,88,108,.18);
}


.loginPrimaryBtn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(190,88,108,.25);
}


.loginShopBtn {

    border:
        1px solid #E5C8CE;

    background:
        #FFF7F8;

    color:
        #B85F70;
}


.loginShopBtn:hover {

    background:
        #FFF0F2;

    transform:
        translateY(-2px);
}


.loginOr {

    position: relative;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        #B0B0B5;

    font-size:
        10px;
}


.loginOr::before {

    content: "";

    position: absolute;

    right: 0;
    left: 0;

    height: 1px;

    background:
        #F0E4E6;
}


.loginOr span {

    position: relative;

    z-index: 1;

    padding:
        0 13px;

    background:
        #fff;
}


/* =========================================================
   CONTACT INFORMATION
   ========================================================= */

.loginContactSection {

    margin-top:
        2px;
}


.loginContactTitle {

    margin-bottom:
        14px;

    text-align: center;

    color:
        #57575D;

    font-size:
        14px;

    font-weight:
        600;
}


.loginContactGrid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}


.loginContactItem {

    min-height: 64px;

    padding:
        10px 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    text-align: right;

    background:
        #FFFAFB;

    border:
        1px solid #F0E3E6;

    border-radius:
        12px;
}


.loginContactAddress {

    grid-column:
        span 2;
}


.loginContactIcon {

    width: 36px;
    height: 36px;

    min-width:
        36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        10px;

    background:
        #FFF0F3;

    color:
        #C46C7D;

    font-size:
        15px;
}


.loginContactText {

    min-width: 0;

    display: flex;

    flex-direction:
        column;

    gap: 2px;
}


.loginContactLabel {

    color:
        #A0A0A5;

    font-size:
        9px;
}


.loginContactValue {

    color:
        #55555B;

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.8;

    word-break:
        break-word;
}


/* =========================================================
   LOGIN MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

    .loginPage {

        padding:
            18px 8px 30px;
    }


    .loginCard {

        padding:
            24px 16px 25px;

        border-radius:
            18px;
    }


    .loginLogoBox,
    .loginLogoFallback {

        width: 76px;
        height: 76px;

        border-radius:
            20px;

        margin-bottom:
            12px;
    }


    .loginLogoFallback {

        font-size:
            30px;
    }


    .loginShopName {

        font-size:
            21px;
    }


    .loginShopDescription {

        font-size:
            11px;
    }


    .loginDivider {

        margin:
            19px 0;
    }


    .loginTitle {

        font-size:
            18px;
    }


    .loginSubtitle {

        margin-bottom:
            16px;
    }


    .loginField,
    .loginInput {

        height:
            50px;
    }


    .loginPrimaryBtn,
    .loginShopBtn {

        height:
            50px;
    }


    .loginContactGrid {

        grid-template-columns:
            1fr;
    }


    .loginContactAddress {

        grid-column:
            auto;
    }


    .loginContactItem {

        min-height:
            60px;
    }

}
/* =========================================================
   CART — SINGLE BENEFITS PANEL + FINAL AMOUNT (2026)
   Scoped to .cartPage; does not change Payment.aspx styling.
   ========================================================= */
.cartPage { max-width: 1000px; margin: 0 auto; }
.cartPage .cartFooter { padding: 24px; text-align: right; }
.cartPage .cartGrossRow, .cartPage .cartBenefitRow, .cartPage .cartWalletHeading {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cartPage .cartGrossRow { font-weight: 700; padding-bottom: 16px; border-bottom: 1px solid #f0e5e8; }
.cartPage .cartGrossRow > span:last-child { color: #bb6475; font-size: 19px; }
.cartPage .cartBenefits { margin-top: 16px; padding: 0 0 6px; }
.cartPage .cartBenefitsTitle { font-size: 17px; margin: 0 0 18px; color: #48434a; }
.cartPage .cartCouponLabel { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.cartPage .cartCouponInputRow { display: flex; gap: 8px; align-items: stretch; }
.cartPage .cartCouponInput {
    flex: 1; min-width: 0; height: 45px; padding: 0 13px; border: 1px solid #e9d9dd;
    background: #fff; border-radius: 11px; outline: none; direction: ltr; text-align: left;
}
.cartPage .cartCouponInput:focus { border-color: #d9909b; box-shadow: 0 0 0 3px rgba(217,144,155,.11); }
.cartPage .cartCouponCheck, .cartPage .cartCouponRemove {
    flex: 0 0 auto; height: 45px; padding: 0 15px; border: 0; border-radius: 11px;
    background: #d9909b; color: white; cursor: pointer; font-weight: 600;
}
.cartPage .cartCouponRemove { color: #af6574; background: #fff0f2; }
.cartPage .cartCouponMessage { display: block; font-size: 12px; line-height: 1.9; margin-top: 7px; color: #af6574; }
.cartPage .cartBenefitRow { padding: 14px 0; border-bottom: 1px solid #f3e8eb; font-size: 14px; }
.cartPage .cartBenefitAmount { font-weight: 700; color: #ba6377; white-space: nowrap; }
.cartPage .cartWalletLine { padding: 16px 0 6px; font-size: 14px; }
.cartPage .cartWalletHeading { font-weight: 600; margin-bottom: 12px; }
.cartPage .cartWalletLine input[type="checkbox"] { accent-color: #d9909b; margin-left: 7px; width: 17px; height: 17px; vertical-align: middle; }
.cartPage .cartWalletLine label { cursor: pointer; }
.cartPage .cartWalletUsed { font-size: 12px; color: #7a7377; margin-top: 9px; }
.cartPage .cartPayableBox {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin: 21px 0 17px; padding: 20px 18px; background: #fff4f6;
    border: 1px solid #edcfd6; border-radius: 14px; font-weight: 700;
}
.cartPage .cartPayableBox strong { font-size: 25px; color: #bb5f73; white-space: nowrap; }
.cartPage .cartPayableBox small { font-size: 13px; }
.cartPage .cartInfoMessage { display: block; color: #b05267; line-height: 1.9; margin: 10px 0; }
.cartPage .cartFinalizeButton { margin-top: 5px; }
.cartPage .cartFinalizeButton:disabled { opacity: .55; cursor: not-allowed; }
.cartPage .cartFooterLinks { display: flex; gap: 10px; margin-top: 13px; }
.cartPage .cartSecondaryButton {
    flex: 1; min-width: 0; border: 1px solid #ead9dd; color: #a75c6e;
    background: #fff; border-radius: 10px; padding: 11px; cursor: pointer; font-weight: 600;
}
@media (max-width: 600px) {
    .cartPage .cartFooter { padding: 16px; }
    .cartPage .cartCouponInputRow { flex-wrap: wrap; }
    .cartPage .cartCouponInput { flex-basis: 100%; }
    .cartPage .cartCouponCheck { flex: 1; }
    .cartPage .cartPayableBox { padding: 15px 12px; font-size: 13px; }
    .cartPage .cartPayableBox strong { font-size: 20px; }
    .cartPage .cartFooterLinks { flex-direction: column; }
}

/* =========================================================
   PROFESSIONAL SITE HEADER
   ========================================================= */

.proHeader {
    background:#fff;
    border-bottom:1px solid #eee5e7;
    box-shadow:0 3px 18px rgba(70,45,52,.045);
}

.proHeaderInner {
    max-width:1400px;
    min-height:72px;
    margin:0 auto;
    padding:0 22px;
    display:flex;
    align-items:center;
    gap:25px;
}


/* =========================================================
   BRAND
   ========================================================= */

.proBrand {
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    color:#3e3739;
    text-decoration:none !important;
}

.proBrand:hover {
    color:#3e3739;
}

.proBrandLogo {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:linear-gradient(145deg,#d88898,#c96f80);
    color:#fff;
    font-size:18px;
    font-weight:900;
    box-shadow:0 5px 14px rgba(201,111,128,.22);
}

.proBrandInfo {
    line-height:1.5;
}

.proBrandTitle {
    color:#443a3d;
    font-size:15px;
    font-weight:800;
}

.proBrandSubtitle {
    margin-top:1px;
    color:#a09497;
    font-size:9px;
}


/* =========================================================
   MAIN NAV
   ========================================================= */

.proNav {
    display:flex;
    align-items:center;
    gap:5px;
    flex:1;
}

.proNavItem {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px;
    border-radius:9px;
    color:#665c5f !important;
    font-size:11px;
    font-weight:700;
    text-decoration:none !important;
    transition:all .15s ease;
}

.proNavItem:hover {
    background:#faf2f4;
    color:#bd6577 !important;
}

.proNavSamsari:before {
    content:"";
    width:6px;
    height:6px;
    margin-left:6px;
    border-radius:50%;
    background:#d17a8b;
}


/* =========================================================
   USER AREA
   ========================================================= */

.proUserArea {
    display:flex;
    align-items:center;
    gap:7px;
    flex-shrink:0;
}


/* =========================================================
   WALLET
   ========================================================= */

.proWallet {
    min-width:auto !important;
    height:44px;
    box-sizing:border-box;
    display:flex !important;
    align-items:center;
    gap:8px;
    padding:5px 10px !important;
    border:1px solid #eee2e5 !important;
    border-radius:11px !important;
    background:#fdfafb !important;
    box-shadow:none !important;
    cursor:pointer;
    transition:all .15s ease;
}

.proWallet:hover {
    border-color:#dfc6cc !important;
    background:#fff6f8 !important;
}

.proWalletMedal {
    width:29px !important;
    height:29px !important;
    min-width:29px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 !important;
    font-size:17px !important;
}

.proWalletInfo {
    min-width:0;
    display:block;
}

.proWalletLabel {
    display:block;
    margin:0;
    color:#9b8e92;
    font-size:8px !important;
    line-height:1.4;
    white-space:nowrap;
}

.proWalletAmount {
    display:block;
    margin:1px 0 0;
    color:#51474a;
    font-size:10px !important;
    font-weight:800;
    line-height:1.4;
    white-space:nowrap;
}


/* =========================================================
   ICON ACTIONS
   ========================================================= */

.proIconAction {
    position:relative;
    height:42px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 10px;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    color:#655b5e !important;
    font-family:Tahoma;
    font-size:10px;
    font-weight:700;
    text-decoration:none !important;
    transition:all .15s ease;
}

.proIconAction:hover {
    background:#faf5f6;
    border-color:#eee1e4;
    color:#b95f71 !important;
}

.proActionIcon {
    font-size:15px;
    line-height:1;
}

.proActionText {
    white-space:nowrap;
}


/* =========================================================
   CART BADGE
   ========================================================= */

.proCartAction {
    padding-left:16px;
}

.proCartBadge {
    position:absolute;
    top:-5px;
    left:-4px;
    min-width:19px;
    height:19px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    border:2px solid #fff;
    border-radius:999px;
    background:#cc6477;
    color:#fff;
    font-size:8px;
    font-weight:900;
    line-height:15px;
}

.proCartBadgeEmpty {
    background:#b9b0b2 !important;
}


/* =========================================================
   LOGOUT
   ========================================================= */

.proLogout {
    height:38px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-right:3px;
    padding:0 9px;
    border-radius:9px;
    color:#a55b68 !important;
    font-family:Tahoma;
    font-size:9px;
    font-weight:700;
    text-decoration:none !important;
    transition:all .15s ease;
}

.proLogout:hover {
    background:#fff1f3;
    color:#9b4051 !important;
}

.proLogoutIcon {
    font-size:15px;
}

.proLogoutText {
    white-space:nowrap;
}


/* =========================================================
   MOBILE NAV
   ========================================================= */

.proMobileNav {
    display:none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px) {

    .proHeaderInner {
        padding:0 14px;
        gap:12px;
    }

    .proBrandSubtitle {
        display:none;
    }

    .proNav {
        gap:1px;
    }

    .proNavItem {
        padding:0 9px;
    }

    .proActionText {
        display:none;
    }

    .proIconAction {
        width:40px;
        padding:0;
    }

    .proLogoutText {
        display:none;
    }

    .proLogout {
        width:37px;
        padding:0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px) {

    body {
        padding-bottom:64px;
    }

    .proHeaderInner {
        min-height:62px;
        padding:0 12px;
    }

    .proBrand {
        flex:1;
    }

    .proBrandLogo {
        width:36px;
        height:36px;
        border-radius:10px;
        font-size:16px;
    }

    .proBrandTitle {
        font-size:13px;
    }

    .proNav {
        display:none;
    }

    .proUserArea {
        gap:4px;
    }

    .proWallet {
        height:38px;
        padding:4px 7px !important;
    }

    .proWalletMedal {
        width:26px !important;
        height:26px !important;
        min-width:26px;
        font-size:15px !important;
    }

    .proWalletLabel {
        display:none;
    }

    .proWalletAmount {
        font-size:9px !important;
    }

    .proIconAction {
        display:none;
    }

    .proLogout {
        width:35px;
        height:35px;
    }


    /* -----------------------------------------
       BOTTOM NAV
       ----------------------------------------- */

    .proMobileNav {
        position:fixed;
        right:0;
        bottom:0;
        left:0;
        z-index:9000;
        height:58px;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        background:rgba(255,255,255,.97);
        border-top:1px solid #eadfe2;
        box-shadow:0 -4px 18px rgba(70,45,52,.07);
        backdrop-filter:blur(8px);
    }

    .proMobileNavItem {
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        color:#706568 !important;
        font-size:8px;
        font-weight:700;
        text-decoration:none !important;
    }

    .proMobileNavItem span:first-child {
        font-size:17px;
        line-height:20px;
    }

    .proMobileNavItem:hover {
        background:#fff6f8;
        color:#bd6577 !important;
    }

    .proMobileCartBadge {
        position:absolute;
        top:4px;
        right:calc(50% + 4px);
        min-width:17px;
        height:17px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 4px;
        border:2px solid #fff;
        border-radius:999px;
        background:#cc6477;
        color:#fff;
        font-size:7px !important;
        font-weight:900;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media(max-width:420px) {

    .proWalletAmount {
        max-width:90px;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .proBrandInfo {
        display:none;
    }

}

/* =========================================================
   BIOTECH PREMIUM HEADER V2
   ========================================================= */

.luxHeader {
    position:relative;
    z-index:5000;
    width:100%;
    overflow:visible;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,249,250,.98) 52%,
            rgba(255,245,247,.98) 100%
        );
    border-bottom:1px solid rgba(180,100,120,.13);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9),
        0 12px 40px rgba(91,47,60,.07);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.luxHeader:after {
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:2px;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(215,132,148,.18) 18%,
            rgba(202,105,124,.62) 50%,
            rgba(215,132,148,.18) 82%,
            transparent 100%
        );
}

.luxHeaderGlow {
    position:absolute;
    pointer-events:none;
    border-radius:999px;
    filter:blur(45px);
    opacity:.25;
}

.luxGlow1 {
    width:230px;
    height:70px;
    right:12%;
    top:-50px;
    background:#e99aa9;
}

.luxGlow2 {
    width:180px;
    height:60px;
    left:8%;
    top:-45px;
    background:#ffdce3;
}


/* =========================================================
   HEADER INNER
   ========================================================= */

.luxHeaderInner {
    position:relative;
    z-index:2;
    width:94%;
    max-width:1440px;
    height:82px;
    margin:0 auto;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:34px;
}


/* =========================================================
   BRAND
   ========================================================= */

.luxBrand {
    min-width:190px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#342d2f !important;
    text-decoration:none !important;
}

.luxLogoShell {
    position:relative;
    width:50px;
    height:50px;
    flex:0 0 50px;
    padding:3px;
    overflow:hidden;
    border-radius:16px;
    background:
        linear-gradient(
            145deg,
            #fff,
            #f6dbe0
        );
    box-shadow:
        0 8px 24px rgba(183,95,112,.16),
        inset 0 0 0 1px rgba(207,113,132,.12);
}

.luxLogoShell:after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);
    pointer-events:none;
}

.luxLogo {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:13px;
}

.luxBrandText {
    display:flex;
    flex-direction:column;
    gap:1px;
}

.luxBrandTitle {
    color:#342e30;
    font-size:17px;
    font-weight:800;
    letter-spacing:-.25px;
}

.luxBrandSub {
    color:#a19598;
    font-size:9px;
    font-weight:500;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.luxNav {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
}

.luxNavLink {
    position:relative;
    height:42px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 15px;
    border-radius:12px;
    color:#62595c !important;
    font-size:11px;
    font-weight:700;
    text-decoration:none !important;
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.luxNavLink:hover {
    background:rgba(207,113,132,.075);
    color:#b45a6c !important;
    transform:translateY(-1px);
}

.luxNavIcon {
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.luxNavIcon svg {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.luxNavSamsari {
    margin-right:3px;
    color:#ac5365 !important;
    background:
        linear-gradient(
            135deg,
            rgba(250,231,235,.72),
            rgba(255,246,248,.78)
        );
    border:1px solid rgba(207,113,132,.14);
}

.luxNewBadge {
    height:16px;
    display:inline-flex;
    align-items:center;
    padding:0 5px;
    border-radius:999px;
    background:#c86679;
    color:#fff;
    font-size:6px;
    font-weight:800;
    letter-spacing:.6px;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.luxActions {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
}

.luxDivider {
    width:1px;
    height:28px;
    margin:0 3px;
    background:
        linear-gradient(
            180deg,
            transparent,
            #eadcdf,
            transparent
        );
}


/* =========================================================
   WALLET
   ========================================================= */

.luxWallet {
    position:relative;
    min-width:190px;
    height:50px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:5px 10px 5px 8px;
    border:1px solid rgba(207,113,132,.14);
    border-radius:15px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96),
            rgba(255,244,247,.94)
        );
    box-shadow:
        0 5px 18px rgba(93,45,57,.055),
        inset 0 1px 0 #fff;
    cursor:pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.luxWallet:hover {
    transform:translateY(-1px);
    border-color:rgba(197,92,113,.28);
    box-shadow:
        0 9px 24px rgba(93,45,57,.085),
        inset 0 1px 0 #fff;
}

.luxMedal {
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:
        linear-gradient(
            145deg,
            #fff,
            #f9edf0
        );
    box-shadow:
        inset 0 0 0 1px rgba(203,112,130,.1),
        0 3px 10px rgba(85,43,54,.07);
    font-size:19px;
}

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

.luxWalletLabel {
    display:block;
    color:#9b8e91;
    font-size:8px;
    font-weight:500;
    line-height:1.4;
    white-space:nowrap;
}

.luxWalletValue {
    display:block;
    color:#3f3639;
    font-size:11px;
    font-weight:800;
    line-height:1.5;
    white-space:nowrap;
}

.luxWalletArrow {
    width:17px;
    height:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#b99da3;
}

.luxWalletArrow svg {
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   ACTION ICONS
   ========================================================= */

.luxAction {
    position:relative;
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid transparent;
    border-radius:13px;
    background:transparent;
    color:#716669 !important;
    text-decoration:none !important;
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.luxAction svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.luxAction:hover {
    transform:translateY(-1px);
    background:#fff5f7;
    border-color:#efdee2;
    color:#b45669 !important;
}

.luxLogout {
    color:#ae6975 !important;
}

.luxLogout:hover {
    background:#fff1f3;
    border-color:#efd3d8;
    color:#a44758 !important;
}


/* =========================================================
   CART BADGE
   ========================================================= */

.luxCartBadge {
    position:absolute;
    top:-3px;
    left:-4px;
    min-width:19px;
    height:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding:0 4px;
    border:2px solid #fff;
    border-radius:999px;
    background:
        linear-gradient(
            145deg,
            #d56f83,
            #b94f65
        );
    color:#fff;
    box-shadow:0 3px 8px rgba(180,70,90,.25);
    font-size:8px;
    font-weight:900;
    line-height:15px;
}


/* =========================================================
   MOBILE NAV DEFAULT
   ========================================================= */

.luxMobileNav {
    display:none;
}


/* =========================================================
   WALLET POPUP UPGRADE
   ========================================================= */

.walletLevelModal {
    width:330px !important;
    padding:24px !important;
    border:1px solid rgba(204,111,129,.16) !important;
    border-radius:21px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(255,247,249,.99)
        ) !important;
    box-shadow:
        0 22px 70px rgba(70,34,45,.17),
        inset 0 1px 0 #fff !important;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width:1050px) {

    .luxHeaderInner {
        width:96%;
        gap:15px;
    }

    .luxBrand {
        min-width:auto;
    }

    .luxBrandSub {
        display:none;
    }

    .luxNavLink {
        padding:0 10px;
    }

    .luxWallet {
        min-width:150px;
    }

    .luxWalletLabel {
        display:none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width:700px) {

    body {
        padding-bottom:69px !important;
    }

    .luxHeaderInner {
        width:94%;
        height:67px;
        display:flex;
        justify-content:space-between;
        gap:8px;
    }

    .luxHeader {
        position:sticky;
        top:0;
        z-index:8000;
    }

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

    .luxLogoShell {
        width:42px;
        height:42px;
        flex-basis:42px;
        border-radius:13px;
    }

    .luxLogo {
        border-radius:10px;
    }

    .luxBrandTitle {
        font-size:14px;
    }

    .luxBrandSub {
        display:block;
        font-size:7px;
    }

    .luxNav {
        display:none;
    }

    .luxActions {
        gap:4px;
    }

    .luxDivider,
    .luxCart,
    .luxActions > a:not(.luxLogout) {
        display:none;
    }

    .luxWallet {
        min-width:0;
        width:auto;
        height:42px;
        padding:4px 7px;
        border-radius:13px;
    }

    .luxMedal {
        width:31px;
        height:31px;
        flex-basis:31px;
        border-radius:10px;
        font-size:16px;
    }

    .luxWalletText {
        display:none;
    }

    .luxWalletArrow {
        display:none;
    }

    .luxLogout {
        width:39px;
        height:39px;
        flex-basis:39px;
    }


    /* =====================================================
       PREMIUM BOTTOM BAR
       ===================================================== */

    .luxMobileNav {
        position:fixed;
        right:10px;
        bottom:9px;
        left:10px;
        z-index:9000;
        height:58px;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        overflow:hidden;
        border:1px solid rgba(204,111,129,.14);
        border-radius:19px;
        background:rgba(255,255,255,.94);
        box-shadow:
            0 12px 40px rgba(65,32,42,.16),
            inset 0 1px 0 rgba(255,255,255,.95);
        backdrop-filter:blur(22px);
        -webkit-backdrop-filter:blur(22px);
    }

    .luxMobileItem {
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        color:#817477 !important;
        font-size:7px;
        font-weight:700;
        text-decoration:none !important;
        transition:
            background .15s ease,
            color .15s ease;
    }

    .luxMobileItem svg {
        width:19px;
        height:19px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.75;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .luxMobileItem:hover {
        background:#fff5f7;
        color:#b45669 !important;
    }

    .luxMobileSamsari {
        color:#b55769 !important;
    }

    .luxMobileSamsari:before {
        content:"";
        position:absolute;
        top:6px;
        width:4px;
        height:4px;
        border-radius:50%;
        background:#ce687b;
    }

    .luxMobileBadge {
        position:absolute;
        top:4px;
        right:calc(50% + 5px);
        min-width:17px;
        height:17px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 4px;
        border:2px solid #fff;
        border-radius:999px;
        background:#ca6075;
        color:#fff;
        font-size:7px !important;
        font-weight:900;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width:390px) {

    .luxBrandSub {
        display:none;
    }

    .luxBrandTitle {
        font-size:13px;
    }

}