/* ============================================
           فونت اصلی: YekanBakh (فارسی + اعداد فارسی)
           مسیر: public_html/assets/fonts/YekanBakh/
           ============================================ */

        @font-face {
            font-family: 'YekanBakh';
            src: url('/assets/fonts/YekanBakh/YekanBakhFaNum-Thin.woff2') format('woff2');
            font-weight: 100; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'YekanBakh';
            src: url('/assets/fonts/YekanBakh/YekanBakhFaNum-Light.woff2') format('woff2');
            font-weight: 300; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'YekanBakh';
            src: url('/assets/fonts/YekanBakh/YekanBakhFaNum-Regular.woff2') format('woff2');
            font-weight: 400; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'YekanBakh';
            src: url('/assets/fonts/YekanBakh/YekanBakhFaNum-SemiBold.woff2') format('woff2');
            font-weight: 600; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'YekanBakh';
            src: url('/assets/fonts/YekanBakh/YekanBakhFaNum-Bold.woff2') format('woff2');
            font-weight: 700; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'YekanBakh';
            src: url('/assets/fonts/YekanBakh/YekanBakhFaNum-ExtraBold.woff2') format('woff2');
            font-weight: 800; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'YekanBakh';
            src: url('/assets/fonts/YekanBakh/YekanBakhFaNum-Black.woff2') format('woff2');
            font-weight: 900; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'YekanBakh';
            src: url('/assets/fonts/YekanBakh/YekanBakhFaNum-ExtraBlack.woff2') format('woff2');
            font-weight: 950; font-style: normal; font-display: swap;
        }

        /* ============================================
           فونت دوم: Dana (فارسی + اعداد فارسی)
           مسیر: public_html/assets/fonts/dana/
           ============================================ */

        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-Hairline.woff2') format('woff2');
            font-weight: 10; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-Thin.woff2') format('woff2');
            font-weight: 100; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-UltraLight.woff2') format('woff2');
            font-weight: 200; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-Light.woff2') format('woff2');
            font-weight: 300; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-Regular.woff2') format('woff2');
            font-weight: 400; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-Medium.woff2') format('woff2');
            font-weight: 500; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-DemiBold.woff2') format('woff2');
            font-weight: 600; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-Bold.woff2') format('woff2');
            font-weight: 700; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-ExtraBold.woff2') format('woff2');
            font-weight: 800; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-Black.woff2') format('woff2');
            font-weight: 850; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-ExtraBlack.woff2') format('woff2');
            font-weight: 900; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-Heavy.woff2') format('woff2');
            font-weight: 950; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'dana';
            src: url('/assets/fonts/dana/Dana-Fat.woff2') format('woff2');
            font-weight: 1000; font-style: normal; font-display: swap;
        }

/* _root.css */
html {
    font-size: 62.5%; /* 10px base */
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--main-bg-color);
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-800);
    font-size: 1.6rem;
    font-family: 'Dana', Tahoma, sans-serif;
    transition: opacity ease-in 0.2s;
}


@media (max-width: 767.98px) {
    body {
        font-size: 1.4rem;
    }
}

input,
button,
textarea,
select {
    font: inherit;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}


img, svg {
    vertical-align: middle;
    border-style: none;
}

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

a {
    color: var(--primary);
    text-decoration: none;
    background-color: transparent;

}


a:hover {
    color: var(--color-primary-600);

}

/* فقط روی دستگاه های لمسی hover رو حذف کن */
@media (hover: none) and (pointer: coarse) {
    a:hover {
        color: var(--primary);
        text-decoration: none;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =========================
   سیستم اسکرول‌بار پیشرفته (قابل استفاده مجدد)
   ========================= */

/* لیست سلکتورهای هدف */
:is(
    .hdbuy-scrollable,
    .hdbuy-modal--internal-scroll .hdbuy-modal__body,
    .hdbuy-popover__content .hdbuy-dropdown__options--popover,

    .hdbuy-birth-date-dropdown-options
)::-webkit-scrollbar {
    width: 20px;

}

:is(
    .hdbuy-scrollable,
    .hdbuy-modal--internal-scroll .hdbuy-modal__body,
    .hdbuy-popover__content .hdbuy-dropdown__options--popover,

    .hdbuy-birth-date-dropdown-options
)::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}

:is(
    .hdbuy-scrollable,
    .hdbuy-modal--internal-scroll .hdbuy-modal__body,
    .hdbuy-popover__content .hdbuy-dropdown__options--popover,

    .hdbuy-birth-date-dropdown-options
)::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color, #cbd5e1);
    border-radius: 999px;
    border: 8px solid transparent;
    background-clip: content-box;
    min-height: 30px; /* ✅ حداقل ارتفاع */
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    :is(
        .hdbuy-scrollable,
        .hdbuy-modal--internal-scroll .hdbuy-modal__body,
        .hdbuy-popover__content .hdbuy-dropdown__options--popover,

        .hdbuy-birth-date-dropdown-options
    )::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-thumb-hover-color, #94a3b8);
        background-clip: content-box;
    }
}

:is(
    .hdbuy-scrollable,
    .hdbuy-modal--internal-scroll .hdbuy-modal__body,
    .hdbuy-popover__content .hdbuy-dropdown__options--popover,

    .hdbuy-birth-date-dropdown-options
)::-webkit-scrollbar-corner {
    background: transparent;
}

/* ✅ اسکرول‌بار نازک برای موبایل */
@media (max-width: 575.98px) {
    :is(
        .hdbuy-scrollable,
        .hdbuy-modal--internal-scroll .hdbuy-modal__body,
        .hdbuy-popover__content .hdbuy-dropdown__options--popover,

        .hdbuy-birth-date-dropdown-options
    )::-webkit-scrollbar {
        width: 4px;
    }

    :is(
        .hdbuy-scrollable,
        .hdbuy-modal--internal-scroll .hdbuy-modal__body,
        .hdbuy-popover__content .hdbuy-dropdown__options--popover,

        .hdbuy-birth-date-dropdown-options
    )::-webkit-scrollbar-thumb {
        border: none;
        border-radius: 999px;
    }

    :is(
        .hdbuy-scrollable,
        .hdbuy-modal--internal-scroll .hdbuy-modal__body,
        .hdbuy-popover__content .hdbuy-dropdown__options--popover,

        .hdbuy-birth-date-dropdown-options
    )::-webkit-scrollbar-track {
        background: transparent;
    }
}

.hdbuy-scrollable {
    overflow: auto;
}

/* =========================
   اسکرول‌بار افقی (hdbuy-scrollable-x)
   ========================= */
.hdbuy-tabs,
.hdbuy-scrollable-x {
    overflow-x: auto;
    overflow-y: hidden;
}

hdbuy-tabs::-webkit-scrollbar,
.hdbuy-scrollable-x::-webkit-scrollbar {
    height: 3px;
}

.hdbuy-tabs::-webkit-scrollbar-track,
.hdbuy-scrollable-x::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}

.hdbuy-tabs::-webkit-scrollbar-thumb,
.hdbuy-scrollable-x::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color, #cbd5e1);
    border-radius: 999px;
    border: 8px solid transparent;
    background-clip: content-box;
    min-width: 30px;
}

.hdbuy-tabs::-webkit-scrollbar-corner,
.hdbuy-scrollable-x::-webkit-scrollbar-corner {
    background: transparent;
}

/* ✅ hover فقط برای دستگاه‌های با موس */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-tabs::-webkit-scrollbar-thumb:hover,
    .hdbuy-scrollable-x::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-thumb-hover-color, #94a3b8);
        background-clip: content-box;
    }
}

/* ✅ اسکرول‌بار نازک‌تر و ظریف‌تر برای موبایل */
@media (max-width: 575.98px) {
    .hdbuy-tabs::-webkit-scrollbar,
    .hdbuy-scrollable-x::-webkit-scrollbar {
        height: 3px;
    }

    .hdbuy-tabs::-webkit-scrollbar-thumb,
    .hdbuy-scrollable-x::-webkit-scrollbar-thumb {
        border: none;
        border-radius: 999px;
        background-color: var(--scrollbar-thumb-color, #cbd5e1);
    }

    .hdbuy-tabs::-webkit-scrollbar-track,
    .hdbuy-scrollable-x::-webkit-scrollbar-track {
        background: transparent;
    }
}


@media (max-width: 575.98px) {
    .hdbuy-scrollable {
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    .hdbuy-scrollable.hdbuy-scrolling {
        scrollbar-color: var(--scrollbar-thumb-color, #cbd5e1) transparent;
    }

    .hdbuy-scrollable::-webkit-scrollbar {
        width: 4px;
    }

    .hdbuy-scrollable::-webkit-scrollbar-thumb {
        border: none;
        border-radius: 999px;
        background-color: transparent;
        transition: background-color 0.5s ease 1s;
    }

    .hdbuy-scrollable.hdbuy-scrolling::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb-color, #cbd5e1);
        transition: background-color 0.2s ease 0s;
    }

    .hdbuy-scrollable::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* ==============================
   BORDERS & RADIUS - حاشیه و گردی
   ============================== */

:root {
    /* Borders */
    --border-0: 0;
    --border-1: 1px;
    --border-2: 2px;
    --border-3: 3px;
    --border-4: 4px;

    /* Radius (full name) */
    --radius-1: 1px;
    --radius-3: 3px;
    --radius-4: 4px;
    --radius-5: 5px;
    --radius-6: 6px;
    --radius-7: 7px;
    --radius-8: 8px;
    --radius-9: 9px;
    --radius-10: 10px;
    --radius-11: 11px;
    --radius-12: 12px;
    --radius-14: 14px;
    --radius-16: 16px;

    /* Radius (short name) */
    --r-4: 4px;
    --r-6: 6px;
    --r-8: 8px;
    --r-10: 10px;
    --r-12: 12px;
    --r-16: 16px;
    --r-20: 20px;
    --r-24: 24px;
    --r-full: 9999px;
    --r-circle: 50%;
}

/* ==============================
   BREAKPOINTS - نقاط شکست
   ============================== */

:root {
    /* Header */
    --header-mobile-height: 58px;

}

/* ==============================
   COLOR SYSTEM - تمام رنگ‌ها
   ============================== */

:root {
    /* ========================= */
    /* COLOR: PRIMARY - BLUE     */
    /* ========================= */
    --primary: #0b3d8a; /* base - 100% */
    --primary-rgb: 11, 61, 138;

    /* --- 100 (4% پرایمری) | کاربرد: پس‌زمینه info card، hover ردیف جدول، badge خنثی --- */
    --color-primary-100: #e7eaf6;
    --color-primary-100-rgb: 231, 234, 246;

    /* --- 200 (8% پرایمری) | کاربرد: border و box-shadow فوکوس، selected item لیست، active sidebar --- */
    --color-primary-200: #c8cfec;
    --color-primary-200-rgb: 200, 207, 236;

    /* --- 300 (22% پرایمری) | کاربرد: border المان interactive، آیکون accent، progress bar --- */
    --color-primary-300: #8b99d9;
    --color-primary-300-rgb: 139, 153, 217;

    /* --- 400 (44% پرایمری) | کاربرد: hover دکمه outline، toggle on، switch active، link hover --- */
    --color-primary-400: #4e63c6;
    --color-primary-400-rgb: 78, 99, 198;

    /* --- 500 (70% پرایمری) | کاربرد: دکمه fill primary، link اصلی، متن accent قوی --- */
    --color-primary-500: #1f3ab3;
    --color-primary-500-rgb: 31, 58, 179;

    /* --- 600 (ترکیب با مشکی) | کاربرد: hover دکمه fill، active/pressed state، عنوان‌های مهم --- */
    --color-primary-600: #142872;
    --color-primary-600-rgb: 20, 40, 114;

    /* --- 700 (ترکیب با مشکی) | کاربرد: متن‌های بسیار مهم، آیکون navigation active، فوتر لینک‌ها --- */
    --color-primary-700: #0d1a4d;
    --color-primary-700-rgb: 13, 26, 77;

    /* --- 800 (ترکیب با مشکی) | کاربرد: پس‌زمینه header تاریک، متن روی پس‌زمینه روشن با کنتراست بالا --- */
    --color-primary-800: #060d29;
    --color-primary-800-rgb: 6, 13, 41;

    /* --- 900 (نزدیک به مشکی) | کاربرد: متن‌های خیلی تاریک، پس‌زمینه فوتر، حالت dark mode --- */
    --color-primary-900: #02040d;
    --color-primary-900-rgb: 2, 4, 13;


    /* ========================= */
    /* COLOR: SECONDARY - TEAL   */
    /* ========================= */
    --color-secondary-025: #f0f8fa;
    --color-secondary-025-rgb: 240, 248, 250;

    --color-secondary-050: #e5f2f6;
    --color-secondary-050-rgb: 229, 242, 246;

    --color-secondary-100: #e0f2f5;
    --color-secondary-100-rgb: 224, 242, 245;

    --color-secondary-200: #a2ddea;
    --color-secondary-200-rgb: 162, 221, 234;

    --color-secondary-300: #64c8df;
    --color-secondary-300-rgb: 100, 200, 223;

    --color-secondary-400: #26b3d4;
    --color-secondary-400-rgb: 38, 179, 212;

    --color-secondary-500: #00a0c9;
    --color-secondary-500-rgb: 0, 160, 201;

    --color-secondary-600: #0083a6;
    --color-secondary-600-rgb: 0, 131, 166;

    --color-secondary-700: #006783;
    --color-secondary-700-rgb: 0, 103, 131;

    --color-secondary-800: #004b60;
    --color-secondary-800-rgb: 0, 75, 96;

    --color-secondary-900: #002f3d;
    --color-secondary-900-rgb: 0, 47, 61;


    /* ========================= */
    /* COLOR: ACCENT - ORANGE    */
    /* ========================= */
    --color-accent-100: #fff3e6;
    --color-accent-100-rgb: 255, 243, 230;

    --color-accent-200: #ffdbb3;
    --color-accent-200-rgb: 255, 219, 179;

    --color-accent-300: #ffc380;
    --color-accent-300-rgb: 255, 195, 128;

    --color-accent-400: #ffa94d;
    --color-accent-400-rgb: 255, 169, 77;

    --color-accent-500: #ff8c1a;
    --color-accent-500-rgb: 255, 140, 26;

    --color-accent-600: #e07300;
    --color-accent-600-rgb: 224, 115, 0;

    --color-accent-700: #ad5900;
    --color-accent-700-rgb: 173, 89, 0;

    --color-accent-800: #7a3f00;
    --color-accent-800-rgb: 122, 63, 0;

    --color-accent-900: #472500;
    --color-accent-900-rgb: 71, 37, 0;

    /* Aliases */
    --color-accent: #ff8c1a;
    --color-accent-rgb: 255, 140, 26;

    --color-button-accent: #ff8c1a;
    --color-icon-accent: #ff8c1a;


    /* ========================= */
    /* COLOR: SUCCESS - GREEN    */
    /* ========================= */
    --success: #348409;
    --success-100: #ebf3e6;
    --success-200: #d6e6ce;
    --success-300: #d6e6ce;
    --success-400: #71a953;
    --success-500: #5d9d3a;
    --success-600: #489022;
    --success-700: #265f06;
    --success-800: #1e4c05;
    --success-900: #183d04;


    /* ========================= */
    /* COLOR: WARNING - YELLOW   */
    /* ========================= */
    --warning: #fbb30e;
    --warning-100: #fff7e7;
    --warning-200: #fef0cf;
    --warning-300: #fdd987;
    --warning-400: #fcca56;
    --warning-500: #e2a10d;
    --warning-600: #b5810a;
    --warning-700: #916708;
    --warning-800: #745206;
    --warning-900: #5d4205;


    /* ========================= */
    /* COLOR: DANGER - RED       */
    /* ========================= */
    --danger: #ba132e;
    --danger-100: #faeff1;
    --danger-200: #f8e7ea;
    --danger-300: #f1d0d5;
    --danger-400: #dc8997;
    --danger-500: #cf5a6d;
    --danger-600: #c84258;
    --danger-700: #c12b43;
    --danger-800: #6b0b1a;
    --danger-900: #560915;


    /* ========================= */
    /* COLOR: BLUE - INFO        */
    /* ========================= */
    --blue: #3086d1;
    --blue-100: #eaf3fa;
    --blue-200: #d6e7f6;
    --blue-300: #97c3e8;
    --blue-400: #6eaadf;
    --blue-500: #599eda;
    --blue-600: #4592d6;
    --blue-700: #226196;
    --blue-800: #1b4e78;
    --blue-900: #163e60;


    /* ========================= */
    /* COLOR: NEUTRAL - GRAYS    */
    /* ========================= */
    --white: #ffffff;
    --black: #0d0c22;
    --gray-025: #fafafb;
    --gray-050: #f3f3f4;
    --gray-100: #e7e7e9;
    --gray-200: #cfced3;
    --gray-300: #b6b6bd;
    --gray-400: #9e9ea7;
    --gray-500: #868590;
    --gray-600: #6e6d7a;
    --gray-700: #565564;
    --gray-800: #3d3d4e;
    --gray-900: #252438;


    /* ========================= */
    /* COLOR: ACTIVE ITEM        */
    /* ========================= */
    --color-active-item: #0b3d8a;
    --color-activ-aitem: #0b3d8a;
    --color-active-item-hover: #0b3d8a;


    /* ========================= */
    /* COLOR: MISC                */
    /* ========================= */
    --main-bg-color: #f0f0f0;
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --attention-card-border: #e2e8f0;
    --scrollbar-track-color: #f8fafc;
    --scrollbar-thumb-color: #cbd5e1;
    --scrollbar-thumb-hover-color: #94a3b8;
}


/* ==============================
   SHADOWS - سایه‌ها
   ============================== */

:root {
    --hdbuy-shadow-1: 0 1px 2px rgba(37, 36, 56, 0.08), 0 1px 3px rgba(37, 36, 56, 0.04);
    --hdbuy-shadow-2: 0 2px 6px rgba(37, 36, 56, 0.1), 0 1px 4px rgba(37, 36, 56, 0.06);
    --hdbuy-shadow-3: 0 6px 16px rgba(37, 36, 56, 0.12), 0 2px 6px rgba(37, 36, 56, 0.08);
}


/* ==============================
   SPACING - اندازه‌ها و فواصل
   ============================== */

:root {
    /* Sizes */
    --size-2: 2px;
    --size-3: 3px;
    --size-4: 4px;
    --size-6: 6px;
    --size-8: 8px;
    --size-10: 10px;
    --size-12: 12px;
    --size-14: 14px;
    --size-16: 16px;
    --size-18: 18px;
    --size-20: 20px;
    --size-22: 22px;
    --size-24: 24px;
    --size-26: 26px;
    --size-28: 28px;
    --size-32: 32px;
    --size-36: 36px;
    --size-40: 40px;
    --size-44: 44px;
    --size-48: 48px;
    --size-52: 52px;
    --size-56: 56px;
    --size-60: 60px;
    --size-64: 64px;
    --size-72: 72px;
    --size-80: 80px;
    --size-96: 96px;

    /* Gaps */
    --gap-0: 0;
    --gap-1: 0.1rem; /* 1px */
    --gap-2: 0.2rem; /* 2px */
    --gap-3: 0.3rem; /* 3px */
    --gap-4: 0.4rem; /* 4px */
    --gap-5: 0.5rem; /* 5px */
    --gap-6: 0.6rem; /* 6px */
    --gap-7: 0.7rem; /* 7px */
    --gap-8: 0.8rem; /* 8px */
    --gap-9: 0.9rem; /* 9px */
    --gap-10: 1rem; /* 10px */
    --gap-12: 1.2rem; /* 12px */
    --gap-14: 1.4rem; /* 14px */
    --gap-16: 1.6rem; /* 16px */
    --gap-18: 1.8rem; /* 18px */
    --gap-20: 2rem; /* 20px */
    --gap-24: 2.4rem; /* 24px */
    --gap-28: 2.8rem; /* 28px */
    --gap-32: 3.2rem; /* 32px */
    --gap-36: 3.6rem; /* 36px */
    --gap-40: 4rem; /* 40px */
    --gap-48: 4.8rem; /* 48px */
    --gap-56: 5.6rem; /* 56px */
    --gap-64: 6.4rem; /* 64px */
    --gap-72: 7.2rem; /* 72px */
    --gap-80: 8rem; /* 80px */
    --gap-96: 9.6rem; /* 96px */
    --gap-112: 11.2rem; /* 112px */
    --gap-128: 12.8rem; /* 128px */

    /* Scrollbar */
    --scrollbar-width: 15px;
}


/* ==============================
   TYPOGRAPHY - فونت و وزن قلم
   ============================== */

:root {
    /* Font sizes */
    --font-10: 10px;
    --font-12: 12px;
    --font-14: 14px;
    --font-16: 16px;
    --font-18: 18px;
    --font-20: 20px;
    --font-22: 22px;
    --font-24: 24px;
    --font-28: 28px;
    --font-32: 32px;
    --font-48: 48px;
    --font-64: 64px;

    /* Font weights */
    --hdbuy-fw-thin: 100;
    --hdbuy-fw-extralight: 200;
    --hdbuy-fw-light: 300;
    --hdbuy-fw-regular: 400;
    --hdbuy-fw-medium: 500;
    --hdbuy-fw-semibold: 600;
    --hdbuy-fw-bold: 700;
    --hdbuy-fw-extrabold: 800;
    --hdbuy-fw-black: 900;
}


/* آواتار عمومی */
.hdbuy-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}


.hdbuy-avatar-4 {
    width: 4px;
    height: 4px;
    min-width: 4px;
    min-height: 4px;
}

.hdbuy-avatar-8 {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
}

.hdbuy-avatar-12 {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
}

.hdbuy-avatar-16 {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
}

.hdbuy-avatar-20 {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}

.hdbuy-avatar-24 {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.hdbuy-avatar-28 {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}

.hdbuy-avatar-32 {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}

.hdbuy-avatar-36 {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
}

.hdbuy-avatar-40 {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

.hdbuy-avatar-44 {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

.hdbuy-avatar-48 {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

.hdbuy-avatar-52 {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
}

.hdbuy-avatar-56 {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
}

.hdbuy-avatar-60 {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
}

.hdbuy-avatar-64 {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
}

.hdbuy-avatar-68 {
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
}

.hdbuy-avatar-72 {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
}

.hdbuy-avatar-76 {
    width: 76px;
    height: 76px;
    min-width: 76px;
    min-height: 76px;
}

.hdbuy-avatar-80 {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
}

.hdbuy-avatar-84 {
    width: 84px;
    height: 84px;
    min-width: 84px;
    min-height: 84px;
}

.hdbuy-avatar-88 {
    width: 88px;
    height: 88px;
    min-width: 88px;
    min-height: 88px;
}

.hdbuy-avatar-92 {
    width: 92px;
    height: 92px;
    min-width: 92px;
    min-height: 92px;
}

.hdbuy-avatar-96 {
    width: 96px;
    height: 96px;
    min-width: 96px;
    min-height: 96px;
}

.hdbuy-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.avatar-glass__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    opacity: 0.25;
    transition: opacity 0.25s ease;
}

.avatar-glass__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.avatar-glass__icon svg {
    color: white;
}

.avatar__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.avatar-upload {
    display: inline-block;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .hdbuy-avatar:hover .avatar-glass__content {
        opacity: 0.4;
    }
}



.hdbuy-avatar__icon-bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    overflow: hidden;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-050)
}

.hdbuy-avatar__icon {
    color: var(--gray-700);
    font-size: inherit;
}
.hdbuy-avatar__badge {
    left: 0;
    bottom: 0;
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.hdbuy-avatar__badge-bullet {
    display: block;
    border-radius: 50%;
    position: relative;
}

.hdbuy-avatar__badge-bullet:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--success-500);
}

.hdbuy-avatar__badge-bullet--recently:after {
    border: solid 4px var(--success-500);
    background: var(--white);
}



/* ============================================================ */
/* HDBUY AVATAR SIZE VARIANTS                                   */
/* ============================================================ */

.hdbuy-avatar--28 {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}

.hdbuy-avatar--28 .hdbuy-avatar__icon {
    font-size: var(--font-16);
}

.hdbuy-avatar--28 .hdbuy-avatar__add-story-button {
    font-size: var(--font-12);
}

.hdbuy-avatar--28 .hdbuy-avatar__badge-bullet {
    width: 12px;
    height: 12px;
    border: solid 2px var(--white);
}

.hdbuy-avatar--28 .hdbuy-avatar__badge-bullet--recently:after {
    border: solid 2px var(--success-500);
    background: var(--white);
}

.hdbuy-avatar--28 .hdbuy-avatar__pro-label {
    top: 18px;
}

.hdbuy-avatar--28.hdbuy-avatar--seen .hdbuy-avatar__pro-label,
.hdbuy-avatar--28.hdbuy-avatar--unseen .hdbuy-avatar__pro-label {
    top: 10px;
}

.hdbuy-avatar--28 .hdbuy-avatar__pro-icon {
    font-size: var(--font-10);
}

.hdbuy-avatar--32 {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}

.hdbuy-avatar--32 .hdbuy-avatar__icon {
    font-size: var(--font-18);
}

.hdbuy-avatar--32 .hdbuy-avatar__add-story-button {
    font-size: var(--font-12);
}

.hdbuy-avatar--32 .hdbuy-avatar__badge-bullet {
    width: 12px;
    height: 12px;
    border: solid 2px var(--white);
}

.hdbuy-avatar--32 .hdbuy-avatar__badge-bullet--recently:after {
    border: solid 2px var(--success-500);
    background: var(--white);
}

.hdbuy-avatar--32 .hdbuy-avatar__pro-label {
    top: 20px;
}

.hdbuy-avatar--32.hdbuy-avatar--seen .hdbuy-avatar__pro-label,
.hdbuy-avatar--32.hdbuy-avatar--unseen .hdbuy-avatar__pro-label {
    top: 12px;
}

.hdbuy-avatar--32 .hdbuy-avatar__pro-icon {
    font-size: var(--font-12);
}

.hdbuy-avatar--40 {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

.hdbuy-avatar--40 .hdbuy-avatar__icon {
    font-size: var(--font-24);
}

.hdbuy-avatar--40 .hdbuy-avatar__add-story-button {
    font-size: var(--font-14);
}

.hdbuy-avatar--40 .hdbuy-avatar__badge-bullet {
    width: 12px;
    height: 12px;
    border: solid 2px var(--white);
}

.hdbuy-avatar--40 .hdbuy-avatar__badge-bullet--recently:after {
    border: solid 2px var(--success-500);
    background: var(--white);
}

.hdbuy-avatar--40 .hdbuy-avatar__pro-label {
    top: 28px;
}

.hdbuy-avatar--40.hdbuy-avatar--seen .hdbuy-avatar__pro-label,
.hdbuy-avatar--40.hdbuy-avatar--unseen .hdbuy-avatar__pro-label {
    top: 20px;
}

.hdbuy-avatar--40 .hdbuy-avatar__pro-icon {
    font-size: var(--font-12);
}

.hdbuy-avatar--44 {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

.hdbuy-avatar--44 .hdbuy-avatar__icon {
    font-size: var(--font-28);
}

.hdbuy-avatar--44 .hdbuy-avatar__add-story-button {
    font-size: var(--font-14);
}

.hdbuy-avatar--44 .hdbuy-avatar__badge-bullet {
    width: 14px;
    height: 14px;
    border: solid 2px var(--white);
}

.hdbuy-avatar--44 .hdbuy-avatar__badge-bullet--recently:after {
    border: solid 2px var(--success-500);
    background: var(--white);
}

.hdbuy-avatar--44 .hdbuy-avatar__pro-label {
    top: 30px;
}

.hdbuy-avatar--44.hdbuy-avatar--seen .hdbuy-avatar__pro-label,
.hdbuy-avatar--44.hdbuy-avatar--unseen .hdbuy-avatar__pro-label {
    top: 22px;
}

.hdbuy-avatar--44 .hdbuy-avatar__pro-icon {
    font-size: var(--font-14);
}

.hdbuy-avatar--48 {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

.hdbuy-avatar--48 .hdbuy-avatar__icon {
    font-size: var(--font-28);
}

.hdbuy-avatar--48 .hdbuy-avatar__add-story-button {
    font-size: var(--font-16);
}

.hdbuy-avatar--48 .hdbuy-avatar__badge-bullet {
    width: 16px;
    height: 16px;
    border: solid 2px var(--white);
}

.hdbuy-avatar--48 .hdbuy-avatar__badge-bullet--recently:after {
    border: solid 2.5px var(--success-500);
    background: var(--white);
}

.hdbuy-avatar--48 .hdbuy-avatar__pro-label {
    top: 32px;
}

.hdbuy-avatar--48.hdbuy-avatar--seen .hdbuy-avatar__pro-label,
.hdbuy-avatar--48.hdbuy-avatar--unseen .hdbuy-avatar__pro-label {
    top: 24px;
}

.hdbuy-avatar--48 .hdbuy-avatar__pro-icon {
    font-size: var(--font-16);
}

.hdbuy-avatar--56 {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
}

.hdbuy-avatar--56 .hdbuy-avatar__icon {
    font-size: var(--font-32);
}

.hdbuy-avatar--56 .hdbuy-avatar__add-story-button {
    font-size: var(--font-18);
}

.hdbuy-avatar--56 .hdbuy-avatar__badge-bullet {
    width: 18px;
    height: 18px;
    border: solid 2px var(--white);
}

.hdbuy-avatar--56 .hdbuy-avatar__badge-bullet--recently:after {
    border: solid 3px var(--success-500);
    background: var(--white);
}

.hdbuy-avatar--56 .hdbuy-avatar__pro-label {
    top: 40px;
}

.hdbuy-avatar--56.hdbuy-avatar--seen .hdbuy-avatar__pro-label,
.hdbuy-avatar--56.hdbuy-avatar--unseen .hdbuy-avatar__pro-label {
    top: 32px;
}

.hdbuy-avatar--56 .hdbuy-avatar__pro-icon {
    font-size: var(--font-16);
}

.hdbuy-avatar--64 {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
}

.hdbuy-avatar--64 .hdbuy-avatar__icon {
    font-size: 36px;
}

.hdbuy-avatar--64 .hdbuy-avatar__add-story-button {
    font-size: var(--font-20);
}

.hdbuy-avatar--64 .hdbuy-avatar__badge-bullet {
    width: 20px;
    height: 20px;
    border: solid 2.5px var(--white);
}

.hdbuy-avatar--64 .hdbuy-avatar__badge-bullet--recently:after {
    border: solid 3px var(--success-500);
    background: var(--white);
}

.hdbuy-avatar--64 .hdbuy-avatar__pro-label {
    top: 46px;
}

.hdbuy-avatar--64.hdbuy-avatar--seen .hdbuy-avatar__pro-label,
.hdbuy-avatar--64.hdbuy-avatar--unseen .hdbuy-avatar__pro-label {
    top: 38px;
}

.hdbuy-avatar--64 .hdbuy-avatar__pro-icon {
    font-size: var(--font-18);
}

.hdbuy-avatar--72 {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
}

.hdbuy-avatar--72 .hdbuy-avatar__icon {
    font-size: 40px;
}

.hdbuy-avatar--72 .hdbuy-avatar__add-story-button {
    font-size: var(--font-24);
}

.hdbuy-avatar--72 .hdbuy-avatar__badge-bullet {
    width: 24px;
    height: 24px;
    border: solid 3px var(--white);
}

.hdbuy-avatar--72 .hdbuy-avatar__badge-bullet--recently:after {
    border: solid 4px var(--success-500);
    background: var(--white);
}

.hdbuy-avatar--72 .hdbuy-avatar__pro-label {
    top: 52px;
}

.hdbuy-avatar--72.hdbuy-avatar--seen .hdbuy-avatar__pro-label,
.hdbuy-avatar--72.hdbuy-avatar--unseen .hdbuy-avatar__pro-label {
    top: 44px;
}

.hdbuy-avatar--72 .hdbuy-avatar__pro-icon {
    font-size: var(--font-20);
}

.hdbuy-avatar--96 {
    width: 96px;
    height: 96px;
    min-width: 96px;
    min-height: 96px;
}

.hdbuy-avatar--96 .hdbuy-avatar__icon {
    font-size: var(--font-48);
}

.hdbuy-avatar--96 .hdbuy-avatar__add-story-button {
    font-size: var(--font-32);
}

.hdbuy-avatar--96 .hdbuy-avatar__badge-bullet {
    width: 28px;
    height: 28px;
    border: solid 3px var(--white);
}

.hdbuy-avatar--96 .hdbuy-avatar__badge-bullet--recently:after {
    border: solid 4px var(--success-500);
    background: var(--white);
}

.hdbuy-avatar--96 .hdbuy-avatar__pro-label {
    top: 72px;
}

.hdbuy-avatar--96.hdbuy-avatar--seen .hdbuy-avatar__pro-label,
.hdbuy-avatar--96.hdbuy-avatar--unseen .hdbuy-avatar__pro-label {
    top: 64px;
}

.hdbuy-avatar--96 .hdbuy-avatar__pro-icon {
    font-size: var(--font-24);
}

/* XXS */
.hdbuy-btn-xxs .hdbuy-btn__icon {
    font-size: var(--size-14);
}
.hdbuy-btn-xxs .hdbuy-btn__icon--center-start {
    margin-left: var(--size-6);
}
.hdbuy-btn-xxs .hdbuy-btn__icon--center-end {
    margin-right: var(--size-6);
    order: 2;
}
.hdbuy-btn-xxs .hdbuy-btn__icon--start {
    position: absolute;
    right: var(--size-8);
}
.hdbuy-btn-xxs .hdbuy-btn__icon--end {
    position: absolute;
    left: var(--size-8);
}

/* XS */
.hdbuy-btn-xs .hdbuy-btn__icon {
    font-size: var(--size-16);
}
.hdbuy-btn-xs .hdbuy-btn__icon--center-start {
    margin-left: var(--size-6);
}
.hdbuy-btn-xs .hdbuy-btn__icon--center-end {
    margin-right: var(--size-6);
    order: 2;
}
.hdbuy-btn-xs .hdbuy-btn__icon--start {
    position: absolute;
    right: var(--size-6);
}
.hdbuy-btn-xs .hdbuy-btn__icon--end {
    position: absolute;
    left: var(--size-6);
}

/* SM */
.hdbuy-btn-sm .hdbuy-btn__icon {
    font-size: var(--size-20);
}
.hdbuy-btn-sm .hdbuy-btn__icon--center-start {
    margin-left: var(--size-6);
}
.hdbuy-btn-sm .hdbuy-btn__icon--center-end {
    margin-right: var(--size-6);
    order: 2;
}
.hdbuy-btn-sm .hdbuy-btn__icon--start {
    position: absolute;
    right: var(--size-8);
}
.hdbuy-btn-sm .hdbuy-btn__icon--end {
    position: absolute;
    left: var(--size-8);
}

/* MD */
.hdbuy-btn-md .hdbuy-btn__icon {
    font-size: var(--size-24);
}
.hdbuy-btn-md .hdbuy-btn__icon--center-start {
    margin-left: var(--size-8);
}
.hdbuy-btn-md .hdbuy-btn__icon--center-end {
    margin-right: var(--size-8);
    order: 2;
}
.hdbuy-btn-md .hdbuy-btn__icon--start {
    position: absolute;
    right: var(--size-10);
}
.hdbuy-btn-md .hdbuy-btn__icon--end {
    position: absolute;
    left: var(--size-10);
}

/* LG */
.hdbuy-btn-lg .hdbuy-btn__icon {
    font-size: var(--size-28);
}
.hdbuy-btn-lg .hdbuy-btn__icon--center-start {
    margin-left: var(--size-8);
}
.hdbuy-btn-lg .hdbuy-btn__icon--center-end {
    margin-right: var(--size-8);
    order: 2;
}
.hdbuy-btn-lg .hdbuy-btn__icon--start {
    position: absolute;
    right: var(--size-12);
}
.hdbuy-btn-lg .hdbuy-btn__icon--end {
    position: absolute;
    left: var(--size-12);
}

/* XL */
.hdbuy-btn-xl .hdbuy-btn__icon {
    font-size: var(--size-24);
}
.hdbuy-btn-xl .hdbuy-btn__icon--center-start {
    margin-left: var(--size-8);
}
.hdbuy-btn-xl .hdbuy-btn__icon--center-end {
    margin-right: var(--size-8);
    order: 2;
}
.hdbuy-btn-xl .hdbuy-btn__icon--start {
    position: absolute;
    right: var(--size-14);
}
.hdbuy-btn-xl .hdbuy-btn__icon--end {
    position: absolute;
    left: var(--size-14);
}

/* Only icon */
.hdbuy-btn__icon.hdbuy-button__icon--only {
    position: relative;
    margin: 0;
    right: unset;
    left: unset;
}

.hdbuy-button__icon--center-start {
    margin-left: var(--size-8);
}

/* Loading */
.hdbuy-btn--loading,
.hdbuy-btn--loading:disabled {
    color: transparent !important;
    cursor: progress !important;
    position: relative;
}

.hdbuy-btn--loading .hdbuy-btn__spinner {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--size-20);
    height: var(--size-20);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: hdbuy-spin 0.6s linear infinite;
}

.hdbuy-btn-fill-primary.hdbuy-btn--loading {
    background-color: var(--color-primary-600) !important;
}

.hdbuy-btn__spinner {
    display: none;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-btn--loading:hover {
        color: transparent !important;
    }
}

@keyframes hdbuy-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Demo loading */
.hdbuy-btn--loading-demo .hdbuy-btn__spinner {
    display: block !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--size-20);
    height: var(--size-20);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: hdbuy-spin 0.6s linear infinite;
}

.hdbuy-btn--loading-demo {
    color: transparent !important;
}
/* Fill */
.hdbuy-btn-fill {
    border: none;
    color: white;
}

.hdbuy-btn-fill-primary {
    background-color: var(--color-active-item);
}

.hdbuy-btn-fill:disabled {
    color: var(--gray-200);
    background-color: var(--gray-050);
}

/* Outline */
.hdbuy-btn-outline {
    background-color: unset;
    border: var(--border-2) solid;
}

.hdbuy-outline-gray {
    color: var(--gray-600);
    border-color: var(--gray-200);
}

.hdbuy-outline-primary {
    color: var(--color-active-item);
    border-color: var(--color-active-item);
}

.hdbuy-btn-outline:disabled {
    color: var(--gray-200);
    border-color: var(--gray-050);
}

.hdbuy-btn-outline-secondary {
    color: var(--gray-900);
    border-color: var(--gray-100);
}

.hdbuy-btn-text-secondary {
    color: var(--gray-900);
}

/* Text button */
.hdbuy-button--text {
    border: 0;
    background-color: unset !important;
}

.hdbuy-button--text:disabled {
    color: var(--gray-300);
}

.hdbuy-button--text--primary {
    color: var(--primary);
}

/* Hover states — Desktop only */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-btn-fill-primary:not(:disabled):hover {
        background-color: var(--color-primary-600);
    }

    .hdbuy-outline-primary:not(:disabled):hover {
        background-color: var(--color-primary-100);
    }

    .hdbuy-outline-gray:not(:disabled):hover {
        background-color: var(--gray-025);
    }

    .hdbuy-btn-outline-secondary:not(:disabled):hover {
        background-color: var(--gray-025);
    }

    .hdbuy-btn-text-secondary:not(:disabled):hover {
        color: var(--gray-700);
    }

    .hdbuy-button--text--primary:not(:disabled):hover {
        color: var(--color-primary-600);
    }

    .hdbuy-button:not(.hdbuy-button--disabled):hover {
        cursor: pointer;
    }
}

/* دکمه های عمومی */
.hdbuy-btn {
    display: flex;
    font-weight: 700;
    position: relative;
    align-items: center;
    outline: 0 !important;
    justify-content: center;
    transition: all .3s ease, transform 0s;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.hdbuy-btn:not(:disabled) {
    cursor: pointer;
}

.hdbuy-btn:not(:disabled):active {
    transform: scale(0.965);
    transition-duration: 0.06s;
}

/* Sizes */
.hdbuy-btn-xxs {
    height: var(--size-32);
    padding: 0 var(--size-8);
    font-size: var(--font-12);
    line-height: 19.2px;
    border-radius: var(--radius-3);
    font-weight: 700;
}

.hdbuy-btn-xs {
    height: var(--size-36);
    padding: 0 var(--size-8);
    font-size: var(--font-12);
    line-height: 19.2px;
    border-radius: var(--radius-6);
    font-weight: 700;
}

.hdbuy-btn-sm {
    height: var(--size-40);
    padding: 0 var(--size-10);
    font-size: var(--font-14);
    line-height: 22.4px;
    border-radius: var(--radius-6);
    font-weight: 700;
}

.hdbuy-btn-md {
    height: var(--size-44);
    padding: 0 var(--size-12);
    font-size: var(--font-14);
    line-height: 22.4px;
    border-radius: var(--radius-7);
    font-weight: 700;
}

.hdbuy-btn-lg {
    height: var(--size-48);
    padding: 0 var(--size-12);
    font-size: var(--font-16);
    line-height: 25.6px;
    border-radius: var(--radius-8);
    font-weight: 700;
}

.hdbuy-btn-xl {
    height: var(--size-52);
    padding: 0 var(--size-14);
    font-size: var(--font-16);
    line-height: 25.6px;
    border-radius: var(--radius-8);
    font-weight: 700;
}

/* Shapes */
.hdbuy-btn-xs.hdbuy-btn--circle,
.hdbuy-btn--square {
    padding: 0;
}

.hdbuy-btn-xs.hdbuy-btn--circle,
.hdbuy-btn-xs.hdbuy-btn--square {
    width: var(--size-36);
    min-width: var(--size-36);
}

.hdbuy-btn-xxs.hdbuy-btn--circle,
.hdbuy-btn-xxs.hdbuy-btn--square {
    width: var(--size-32);
    min-width: var(--size-32);
}

.hdbuy-btn-sm.hdbuy-btn--circle,
.hdbuy-btn-sm.hdbuy-btn--square {
    width: var(--size-40);
    min-width: var(--size-40);
}

.hdbuy-btn-md.hdbuy-btn--circle,
.hdbuy-btn-md.hdbuy-btn--square {
    width: var(--size-44);
    min-width: var(--size-44);
}

.hdbuy-btn-lg.hdbuy-btn--circle,
.hdbuy-btn-lg.hdbuy-btn--square {
    width: var(--size-48);
    min-width: var(--size-48);
}

.hdbuy-btn-xl.hdbuy-btn--circle,
.hdbuy-btn-xl.hdbuy-btn--square {
    width: var(--size-52);
    min-width: var(--size-52);
}

.hdbuy-btn.hdbuy-btn--plain {
    padding: 0;
    margin: 0;
    width: unset;
    height: unset;
    min-height: unset;
    outline: none;
    border: none;
    color: inherit;
    background: none;
    font-size: inherit;
    line-height: inherit;
}

/* Preset stable */
.hdbuy-preset--stable {
    border: var(--border-2) solid transparent;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .hdbuy-preset--stable {
        flex: 1;
    }
}

.hdbuy-preset--stable.hdbuy-btn-outline {
    border: var(--border-2) solid var(--gray-200);
}

.hdbuy-preset--stable.hdbuy-btn-outline.hdbuy-outline-primary {
    border: var(--border-2) solid var(--color-active-item);
}

.hdbuy-preset--stable.hdbuy-btn-fill {
    border: var(--border-2) solid transparent;
    color: var(--white);
}

.hdbuy-preset--stable:not(:disabled):active {
    transform: none;
}

/* ============================================================ */
/* HDBUY CALCULATOR COUNTER — شمارنده افزایش/کاهش عدد           */
/* ============================================================ */

/* ---- کانتینر اصلی ---- */
.hdbuy-calculator__counter {
    width: 100%;
    border-radius: var(--radius-8);
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ---- دکمه‌های افزایش/کاهش (مشترک) ---- */
.hdbuy-calculator__counter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
    border: var(--border-2) solid var(--gray-200);
    background-color: var(--gray-050);
    color: var(--gray-700);
    flex-shrink: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.hdbuy-calculator__counter-btn:hover {
    background-color: var(--gray-100);
}


.hdbuy-calculator__counter-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    background-color: var(--gray-050);
}

/* ---- دکمه بزرگ (48px) ---6 */
.hdbuy-calculator__counter-btn--lg {
    min-width: 56px;
    min-height: 56px;
    font-size: var(--font-24);
}

.hdbuy-calculator__counter-btn--lg:first-child {
    border-left: none;
    border-radius: 0 var(--radius-8) var(--radius-8) 0;
}

.hdbuy-calculator__counter-btn--lg:last-child {
    border-right: none;
    border-radius: var(--radius-8) 0 0 var(--radius-8);
}

/* ---- دکمه متوسط (40px) ---- */
.hdbuy-calculator__counter-btn--md {
    min-width: 48px;
    min-height: 48px;
    font-size: var(--font-20);
}

.hdbuy-calculator__counter-btn--md:first-child {
    border-left: none;
    border-radius: 0 var(--radius-6) var(--radius-6) 0;
}

.hdbuy-calculator__counter-btn--md:last-child {
    border-right: none;
    border-radius: var(--radius-6) 0 0 var(--radius-6);
}

/* ---- دکمه کوچک (32px) ---- */
.hdbuy-calculator__counter-btn--sm {
    min-width: 40px;
    min-height: 40px;
    font-size: var(--font-16);
}

.hdbuy-calculator__counter-btn--sm:first-child {
    border-left: none;
    border-radius: 0 var(--radius-4) var(--radius-4) 0;
}

.hdbuy-calculator__counter-btn--sm:last-child {
    border-right: none;
    border-radius: var(--radius-4) 0 0 var(--radius-4);
}

/* ---- input وسط ---- */
.hdbuy-calculator__counter-input {
    flex: 1;
    min-width: 0;
}

.hdbuy-calculator__counter-input .hdbuy-input__container {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: unset !important;
}

.hdbuy-calculator__counter-input .hdbuy-input__input {
    text-align: center;
    font-weight: var(--hdbuy-fw-bold);
}

.hdbuy-calculator__counter:has(.hdbuy-input--is-error-float) .hdbuy-calculator__counter-btn {
    margin-bottom: var(--size-32);
}

.hdbuy-calculator__counter:has(.hdbuy-input--has-error) .hdbuy-calculator__counter-btn {
    margin-bottom: var(--size-40);
}

@media (max-width: 1023.98px) {
    .hdbuy-calculator__counter:has(.hdbuy-input--has-error) .hdbuy-calculator__counter-btn {
        margin-bottom: var(--size-32);
    }
}

/* ============================
   HDBUY CHECKBOX COMPONENT
   ============================ */

/* ============================
   ROOT
   ============================ */

.hdbuy-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: right;
    vertical-align: middle;
    user-select: none;
}

.hdbuy-checkbox:not(.hdbuy-checkbox--disabled) {
    cursor: pointer;
}

.hdbuy-checkbox__input {
    display: none;
}

.hdbuy-checkbox__label {
    font-size: var(--font-14);
    color: var(--gray-900);
}

/* ============================
   BOX
   ============================ */
.hdbuy-checkbox__el {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--size-8);
    border-radius: var(--radius-4);
    border: 1px solid var(--gray-700); /* پیش‌فرض برای موبایل و تبلت */
    background-color: transparent;
    color: var(--white);
    transition: background-color .25s ease, border-color .25s ease, transform .2s ease, opacity .2s ease;
}

@media (min-width: 1024px) {
    .hdbuy-checkbox__el {
        border-width: 2px; /* 2px برای دسکتاپ (بالای 1024px) */
    }
}
.hdbuy-checkbox__el--hidden {
    display: none !important;
}

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

.hdbuy-checkbox__icon,
.hdbuy-checkbox__indeterminate {
    opacity: 0;

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

/* ============================
   SIZE : SM
   ============================ */

.hdbuy-checkbox--sm .hdbuy-checkbox__el {
    width: 18px;
    height: 18px;

    min-width: 18px;
    min-height: 18px;
}

.hdbuy-checkbox--sm .hdbuy-checkbox__label {
    font-size: var(--font-14);
}

/* ============================
   SIZE : MD
   ============================ */

.hdbuy-checkbox--md .hdbuy-checkbox__el {
    width: 24px;
    height: 24px;

    min-width: 24px;
    min-height: 24px;

    border-width: 2.5px;
}

.hdbuy-checkbox--md .hdbuy-checkbox__label {
    font-size: var(--font-16);
}

/* ============================
   STATE : UNCHECKED
   ============================ */

.hdbuy-checkbox--unchecked .hdbuy-checkbox__el {
    background-color: transparent;
    border-color: var(--gray-700);
}

.hdbuy-checkbox--unchecked .hdbuy-checkbox__icon {
    opacity: 0;
    transform: scale(.7);
}

.hdbuy-checkbox--unchecked .hdbuy-checkbox__indeterminate {
    opacity: 0;
}

/* ============================
   STATE : CHECKED
   ============================ */

.hdbuy-checkbox--checked .hdbuy-checkbox__el {
    background-color: var(--primary);
    border-color: var(--primary);
}

.hdbuy-checkbox--checked .hdbuy-checkbox__icon {
    opacity: 1;
    transform: scale(1);
}

.hdbuy-checkbox--checked .hdbuy-checkbox__indeterminate {
    opacity: 0;
}

/* ============================
   STATE : INDETERMINATE
   ============================ */

.hdbuy-checkbox--indeterminate .hdbuy-checkbox__el {
    background-color: var(--primary);
    border-color: var(--primary);
}

.hdbuy-checkbox--indeterminate .hdbuy-checkbox__icon {
    opacity: 0;
    transform: scale(.7);
}

.hdbuy-checkbox--indeterminate .hdbuy-checkbox__indeterminate {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 8px;
    height: 2px;

    background-color: var(--white);

    opacity: 1;

    transform: translate(-50%, -50%);
}

/* ============================
   STATE : DISABLED
   ============================ */

.hdbuy-checkbox--disabled {
    pointer-events: none;
    opacity: .55;
}

.hdbuy-checkbox--disabled .hdbuy-checkbox__el {
    border-color: var(--gray-300);
}

.hdbuy-checkbox--disabled.hdbuy-checkbox--checked .hdbuy-checkbox__el,
.hdbuy-checkbox--disabled.hdbuy-checkbox--indeterminate .hdbuy-checkbox__el {
    background-color: var(--gray-300);
    border-color: var(--gray-300);
}

/* ============================
   HOVER — Desktop Only
   ============================ */

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-checkbox:not(.hdbuy-checkbox--disabled):hover .hdbuy-checkbox__el {
        border-color: var(--primary);
    }
}

/* ============================================================ */
/* HDBUY COLLAPSE COMPONENT                                      */
/* ============================================================ */

.hdbuy-collapse__wrapper {
    overflow: hidden;
}



.hdbuy-collapse__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: max-height;
    padding-left: 3px;
    padding-right: 3px;
}

.hdbuy-collapse__wrapper.is-open .hdbuy-collapse__content {
    max-height: none;
}

/* Chevron animation */
.hdbuy-collapse__chevron {
    max-width: 24px;
    max-height: 24px;
    color: var(--gray-900);
    font-size: var(--font-22);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 1023.98px) {
    .hdbuy-collapse__chevron {
        max-width: 22px;
        max-height: 22px;
        font-size: var(--font-20);
    }

}

.hdbuy-collapse__wrapper.is-open .hdbuy-collapse__chevron {
    transform: rotate(180deg);
}

.hdbuy-collapse__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top:  var(--size-14);
    padding-bottom: var(--size-14) ;
    line-height: 22px;
    color: var(--black);
    font-weight: 500;
    cursor: pointer;
}



/* Chrome, Edge, Safari */
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* hides clear button in some browsers */
input[type="date"]::-webkit-clear-button {
    display: none;
}

/* hides spin button */
input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

/* hides outer spin button */
input[type="date"]::-webkit-outer-spin-button {
    display: none;
}

/* Firefox */
input[type="date"] {
    -moz-appearance: textfield;
}

/* General reset for consistency */
input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
}



.hdbuy-dropdown__options,
.hdbuy-dropdown__options ul {
    margin: 0;
    list-style-type: none
}

.hdbuy-dropdown__options ul {
    padding: 0
}

.hdbuy-dropdown__options .hdbuy-dropdown--item {
    color: #0d0c22;
    color: var(--black);
    cursor: pointer;
    font-size: 16px;
    font-size: var(--font-16);
    padding: 10px 12px;
    padding: var(--size-10) var(--size-12);
    display: flex;
    align-items: center;
    line-height: 24px;
    font-weight: 500;
    transition: all .3s;
    min-height: 50px
}

@media (max-width: 1023.98px) {
    .hdbuy-dropdown__options .hdbuy-dropdown--item {
        min-height: 44px
    }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-dropdown__options .hdbuy-dropdown--item:hover {
        background-color: #e7e7e9;
        background-color: var(--gray-100)
    }
}

.hdbuy-dropdown__options .hdbuy-dropdown--item .icon {
    margin-left: 16px;
    margin-left: var(--size-16)
}

.hdbuy-dropdown__options .hdbuy-dropdown--item svg {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #565564;
    color: var(--gray-700);
    margin-left: 16px;
    margin-left: var(--size-16);
    font-size: 24px;
    font-size: var(--font-24)
}

.hdbuy-dropdown__options .hdbuy-dropdown--item a {
    color: #0d0c22;
    color: var(--black)
}

.hdbuy-dropdown__options--modal {
    position: relative;
    background-color: initial;
    border-radius: 0;
    padding: 0 0 4px;
    padding: 0 0 var(--size-4)
}

.hdbuy-dropdown__options--modal .hdbuy-dropdown--item {
    font-size: 14px;
    font-size: var(--font-14);
    padding: 14px 2px;
    padding: var(--size-14) var(--size-2);
    min-height: 52px
}

.hdbuy-dropdown__options--modal .hdbuy-dropdown--item svg {
    margin-left: 12px;
    margin-left: var(--size-12)
}

.hdbuy-dropdown__options--modal li + li {
    margin-top: 12px;
    margin-top: var(--size-12)
}



/* -------------------------
   دکمه‌ی دراپ‌داون (اختیاری)
   ------------------------- */
.hdbuy-dropdown__btn {
    border: none;
    padding: 0;
    outline: none !important;
    background-color: transparent;
    min-height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font-20);
}


.hdbuy-dropdown__options--popover {
    border-radius: 0 !important;
    min-width: 200px;
    background-color: #f3f3f4 !important;
    background-color: var(--gray-050) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hdbuy-dropdown__options, .hdbuy-dropdown__options ul {
    margin: 0;
    list-style-type: none;
}


@media (min-width: 1024px) {
    .hdbuy-date-picker__dropdown-popover {
        height: 220px;
        overflow: hidden scroll;
        direction: rtl;
        min-width: 120px !important;
    }
}


.hdbuy-date-picker__dropdown-item {
    font-weight: 500;
    text-align: right;
    padding: 10px 0;
    padding: var(--size-10) 0;
    font-size: 14px;
    font-size: var(--font-14);
    transition: background-color .3s;
}


@media (min-width: 1024px) {
    .hdbuy-date-picker__dropdown-item {
        cursor: pointer;
        padding: 10px 12px;
        padding: var(--size-10) var(--size-12);
    }
}

@media (min-width: 1024px) {
    .hdbuy-popover-manage {
        min-width: 180px;
        background-color: #f3f3f4;
        background-color: var(--gray-050);
    }
}


.hdbuy-popover-manage {
    position: relative;
}



.hdbuy-popover-manage__item {
    width: calc(100% + 48px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 24px;
    padding: var(--size-14) var(--size-24);
    margin: 0 -24px;
    background: unset;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: all .15s ease;
}
@media (min-width: 1024px) {
    .hdbuy-popover-manage__item {
        width: 100%;
        margin: 0;
    }
}


@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-popover-manage__item:hover {
        background-color: #e7e7e9;
        background-color: var(--gray-100);
    }
}

.hdbuy-popover-manage__label {
    margin-right: 12px;
    margin-right: var(--size-12);
    font-size: 14px;
    font-size: var(--font-14);
    color: #0d0c22;
    color: var(--black);
}


@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-date-picker__dropdown-item:hover {
        background-color: #e7e7e9;
        background-color: var(--gray-100);
    }
}

@media (min-width: 1024px) {
    .hdbuy-date-picker__dropdown-item {
        cursor: pointer;
        padding: 10px 12px;
        padding: var(--size-10) var(--size-12);
    }
}


/* Dropdown */
.hdbuy-dropdown {
    display: inline-block;
    position: relative;
    z-index: 5;
}


@media (min-width: 1024px) {
    .hdbuy-popover--time-picker {
        height: 220px;
        overflow: hidden scroll;
        direction: rtl;
        min-width: 120px !important;
    }
}


/* ==================== FILTER TAG ==================== */
.hdbuy-filter-tag {
    display: inline-flex;
    align-items: center;
    border: 1.4px solid var(--gray-200);
    border-radius: var(--radius-6);
    padding: var(--size-6) var(--size-12);
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    max-width: 264px;
    white-space: nowrap;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* ==================== WRAPPER ==================== */
.hdbuy-filter-tag__wrapper {
    display: flex;
    align-items: center;
    gap: var(--size-4);
    flex-shrink: 0;
}

/* ==================== LABEL ==================== */
.hdbuy-filter-tag__label {
    font-size: var(--font-14);
    color: var(--gray-700);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================== ICON ==================== */
.hdbuy-filter-tag__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gray-500);
    transition: background-color 0.2s;
    border-radius: var(--radius-4);
    padding: var(--size-4);
}

/* ==================== HOVER — Desktop Only ==================== */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-filter-tag:hover {
        border-color: var(--gray-300);
        background-color: var(--gray-025);
    }
}

/* ==================== COUNT ==================== */
.hdbuy-filter-tag__count {
    font-size: var(--font-12);
    font-weight: 700;
    color: var(--primary);
    background: var(--color-primary-100);
    border-radius: var(--r-full);
    padding: var(--size-2) var(--size-8);
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* ==================== SIZE: SM ==================== */
.hdbuy-filter-tag--sm {
    max-width: 224px;
    border-width:  var(--border-1);
    border-radius: var(--radius-5);
    padding: var(--size-3) var(--size-8);
}

.hdbuy-filter-tag--sm .hdbuy-filter-tag__label {
    font-size: var(--font-12);
    margin-right: var(--size-4);
}

.hdbuy-filter-tag--sm .hdbuy-filter-tag__count,
.hdbuy-filter-tag--sm .hdbuy-filter-tag__icon {
    margin-right: var(--size-4);
}

/* ==================== SIZE: MD ==================== */
.hdbuy-filter-tag--md {
    max-width: 264px;
    border-width: var(--border-1);
    border-radius: var(--radius-6);
    padding: var(--size-6) var(--size-12);
}

.hdbuy-filter-tag--md .hdbuy-filter-tag__label {
    font-size: var(--font-14);
    margin-right: var(--size-8);
}

.hdbuy-filter-tag--md .hdbuy-filter-tag__count,
.hdbuy-filter-tag--md .hdbuy-filter-tag__icon {
    margin-left: var(--size-8);
}


/* ============================
   HDBUY HINT BOX (GLOBAL)
   ============================ */

/* ---- BASE ---- */
.hdbuy-hint {
    padding: var(--size-12);
    border-radius: var(--radius-8);
}

@media (min-width: 1024px) {
    .hdbuy-hint {
        border-radius: var(--radius-8);
        padding: var(--size-14) var(--size-16);
    }
}

/* ---- VARIANTS ---- */
.hdbuy-hint--info {
    background-color: var(--blue-100);
}

.hdbuy-hint--warning {
    background-color: var(--warning-100);
}

.hdbuy-hint--success {
    background-color: var(--success-100);
}

.hdbuy-hint--danger {
    background-color: var(--danger-100);
}

/* ---- COLLAPSE MODIFIER ---- */
.hdbuy-hint--collapse {
    background-color: transparent !important;
}

.hdbuy-hint--collapse .hdbuy-hint__header {
    padding: 0 !important;
}

.hdbuy-hint--collapse .hdbuy-hint__body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

.hdbuy-hint--collapse .hdbuy-hint__header + .hdbuy-hint__body {
    padding-top: var(--size-12);
}

/* ---- HEADER ---- */
.hdbuy-hint__header {
    display: flex;
    align-items: center;
}

.hdbuy-hint__icon {
    color: var(--gray-700);
    transform: translateY(-2px);
}

.hdbuy-hint__title {
    display: block;
    margin-right: var(--size-4);
    color: var(--black);
    font-weight: 700;
}

@media (max-width: 1023.98px) {
    .hdbuy-hint__title {
        font-size: var(--font-14);
        font-weight: 700;
    }
}

/* ---- BODY ---- */
.hdbuy-hint__body {
    font-size: var(--font-14);
}

@media (max-width: 1023.98px) {
    .hdbuy-hint__body {
        font-weight: 500;
        font-size: var(--font-12);
    }
}

.hdbuy-hint__header + .hdbuy-hint__body {
    margin-top: var(--size-12);
}


/* ---- متن پیش‌فرض hint (تک‌خطی) ---- */
.hdbuy-hint__text {
    font-weight: 500;
    text-align: justify;
    white-space: normal;
    color: var(--gray-800);
    font-size: var(--font-12);
}

/* ---- modifier: متن چندخطی (pre-line) ---- */
.hdbuy-hint__text--multiline {
    white-space: pre-line;
}

@media (min-width: 1024px) {
    .hdbuy-hint__text {
        font-size: var(--font-14);
    }
}


.hdbuy-hint__close-icon{
    cursor: pointer;
}
.hdbuy-hint--normal {
    background-color: var(--gray-050);
}


/* ============================================================ */
/* HDBUY ICON BADGE — نشانگر وضعیت روی آیکون                    */
/* ============================================================ */

/* ---- آیکونی که badge می‌گیرد ---- */
.hdbuy-icon-badge {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* ---- نقطه اعلان (پیش‌فرض مخفی) ---- */
.hdbuy-icon-badge::after {
    content: "";
    display: none;
    position: absolute;
    top: -1px;
    right: -1px;
    width: var(--size-10);
    height: var(--size-10);
    border: 2px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    z-index: 1;
    pointer-events: none; /* روی کلیک تأثیر نذاره */
}

/* ---- حالت فعال ---- */
.hdbuy-icon-badge--active::after {
    display: block;
    animation: hdbuy-badge-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- انیمیشن ---- */
@keyframes hdbuy-badge-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---- رنگ‌های مختلف ---- */
.hdbuy-icon-badge--danger::after  { background-color: var(--danger); }
.hdbuy-icon-badge--primary::after { background-color: var(--primary); }
.hdbuy-icon-badge--warning::after { background-color: var(--warning); }
.hdbuy-icon-badge--success::after { background-color: var(--success); }

/* ---- اندازه‌های مختلف (اختیاری) ---- */
.hdbuy-icon-badge--sm::after {
    width: var(--size-8);
    height: var(--size-8);
    top: 0px;
    right: 0px;
}

.hdbuy-icon-badge--lg::after {
    width: var(--size-12);
    height: var(--size-12);
    top: -2px;
    right: -2px;
}


/* ==================== IMAGE PICKER ==================== */
.hdbuy-image-picker {

}

.hdbuy-image-picker__title {
    display: block;
    margin-bottom: var(--size-12);
    color: var(--gray-800);
    font-size: var(--font-14);
}

/* ==================== LIST ==================== */
.hdbuy-image-picker__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-12);
    overflow-x: auto;
    max-width: 85vw;
}

@media (min-width: 768px) {
    .hdbuy-image-picker__list {
        max-width: initial;
    }
}

/* ==================== ITEM BASE ==================== */
.hdbuy-image-picker__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--size-8);
    border-radius: var(--radius-8);
    background-color: var(--white);
    border: var(--border-2) dashed var(--gray-200);
    transition: background-color 0.2s ease;
    text-align: center;
}

.hdbuy-image-picker__item:hover {
    background-color: var(--gray-050);
}

/* ==================== SIZE MODIFIERS ==================== */
.hdbuy-image-picker__item--sm {
    width: var(--size-80);
    height: var(--size-80);
    min-width: var(--size-80);
    min-height: var(--size-80);
}

.hdbuy-image-picker__item--md {
    width: var(--size-96);
    height: var(--size-96);
    min-width: var(--size-96);
    min-height: var(--size-96);
}

.hdbuy-image-picker__item--lg {
    width: 102px;
    height: 102px;
    min-width: 102px;
    min-height: 102px;
}

/* ==================== UPLOAD ICON ==================== */
.hdbuy-image-picker__upload-icon {
    width: var(--size-24);
    height: var(--size-24);
    color: var(--gray-600);
    stroke-width: 2;
    flex-shrink: 0;
}

.hdbuy-image-picker__item--sm .hdbuy-image-picker__upload-icon {
    width: var(--size-20);
    height: var(--size-20);
}

/* ==================== UPLOAD TEXT ==================== */
.hdbuy-image-picker__upload-text {
    font-size: var(--font-12);
    font-weight: 600;
    color: var(--gray-600);
}

.hdbuy-image-picker__item--md .hdbuy-image-picker__upload-text {
    font-size: var(--font-14);
}

/* ==================== INPUT ==================== */
.hdbuy-image-picker__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ==================== IMAGE PICKER - PREVIEW ==================== */
.hdbuy-image-picker__item--preview {
    overflow: hidden;
    border: var(--border-2) solid var(--gray-100);
    border-style: solid;
}

.hdbuy-image-picker__preview-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hdbuy-image-picker__remove-btn {
    position: absolute;
    top: var(--size-4);
    left: var(--size-6);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--size-8);
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--danger);
    cursor: pointer;
    transition: background-color, opacity 0.3s ease;
    opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
    .hdbuy-image-picker__remove-btn:hover {
        background-color: var(--white);
        opacity: 1;
    }
}

.hdbuy-image-picker__item--sm .hdbuy-image-picker__remove-btn {
    width: var(--size-24);
    height: var(--size-24);
    border-radius: var(--size-4);
    top: var(--size-2);
    left: var(--size-4);
}

.hdbuy-image-picker__item--md .hdbuy-image-picker__remove-btn {
    width: var(--size-28);
    height: var(--size-28);
    border-radius: var(--size-6);
}

.hdbuy-image-picker__item--lg .hdbuy-image-picker__remove-btn {
    width: var(--size-32);
    height: var(--size-32);
    border-radius: var(--size-8);
}

@media (hover: hover) and (pointer: fine) {
    .hdbuy-image-picker__remove-btn:hover {
        background-color: var(--white);
        opacity: 1;
    }
}

@media (max-width: 1023.98px) {
    .hdbuy-image-picker__remove-btn {
        opacity: 1;
    }
}

.hdbuy-image-picker__preview-image-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hdbuy-shared-previews {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--size-12);
}

/* لیبل‌های عمومی */
.hdbuy-label {
    display: inline-block;
    text-align: center;
}

/* Label Sizes */
.hdbuy-label--sm {
    font-size: var(--font-10);
    padding: 0 var(--size-2);
    border-radius: var(--radius-4);
    font-weight: 400;
}

.hdbuy-label--md {
    font-size: var(--font-12);
    border-radius: var(--radius-4);
    padding: var(--size-2) var(--size-4);
    font-weight: 500;
}

.hdbuy-label--lg {
    border-radius: var(--radius-4);
    padding: var(--size-4) var(--size-8);
    font-weight: 700;
}

/* Black Variants */
.hdbuy-label--black-text {
    background-color: #f3f3f4;
    background-color: var(--gray-050);
    color: #3d3d4e;
    color: var(--gray-800);
}

.hdbuy-label--black-text svg {
    color: #6e6d7a;
    color: var(--gray-600);
}

.hdbuy-label--black-fill {
    background-color: #565564;
    background-color: var(--gray-700);
    color: #ffffff;
    color: var(--white);
}

.hdbuy-label--black-fill svg {
    color: #ffffff;
    color: var(--white);
}

/* Green Variants */
.hdbuy-label--green-text {
    background-color: #f3f3f4;
    background-color: var(--gray-050);
    color: #348409;
    color: var(--success);
}

.hdbuy-label--green-text svg {
    color: #348409;
    color: var(--success);
}

.hdbuy-label--green-fill {
    background-color: #348409;
    background-color: var(--success);
    color: #ffffff;
    color: var(--white);
}

.hdbuy-label--green-fill svg {
    color: #ffffff;
    color: var(--white);
}

/* Blue Variants */
.hdbuy-label--blue-text {
    background-color: #f3f3f4;
    background-color: var(--gray-050);
    color: #3086d1;
    color: var(--blue);
}

.hdbuy-label--blue-text svg {
    color: #3086d1;
    color: var(--blue);
}

.hdbuy-label--blue-fill {
    background-color: #3086d1;
    background-color: var(--blue);
    color: #ffffff;
    color: var(--white);
}

.hdbuy-label--blue-fill svg {
    color: #ffffff;
    color: var(--white);
}

/* Dark Blue Variants */
.hdbuy-label--dark-blue-text {
    background-color: #f3f3f4;
    background-color: var(--gray-050);
    color: #226196;
    color: var(--blue-700);
}

.hdbuy-label--dark-blue-text svg {
    color: #226196;
    color: var(--blue-700);
}

.hdbuy-label--dark-blue-fill {
    background-color: #226196;
    background-color: var(--blue-700);
    color: #ffffff;
    color: var(--white);
}

.hdbuy-label--dark-blue-fill svg {
    color: #ffffff;
    color: var(--white);
}

/* Red Variants */
.hdbuy-label--red-text {
    background-color: #f3f3f4;
    background-color: var(--gray-050);
    color: #ba132e;
    color: var(--danger);
}

.hdbuy-label--red-text svg {
    color: #ba132e;
    color: var(--danger);
}

.hdbuy-label--red-fill {
    background-color: #ba132e;
    background-color: var(--danger);
    color: #ffffff;
    color: var(--white);
}

.hdbuy-label--red-fill svg {
    color: #ffffff;
    color: var(--white);
}

/* Yellow Variants */
.hdbuy-label--yellow-text {
    background-color: #f3f3f4;
    background-color: var(--gray-050);
    color: #e2a10d;
    color: var(--warning-500);
}

.hdbuy-label--yellow-text svg {
    color: #e2a10d;
    color: var(--warning-500);
}

.hdbuy-label--yellow-fill {
    background-color: #e2a10d;
    background-color: var(--warning-500);
    color: #ffffff;
    color: var(--white);
}

.hdbuy-label--yellow-fill svg {
    color: #ffffff;
    color: var(--white);
}

/* Primary Variants */
.hdbuy-label--primary-text {
    background-color: #f3f3f4;
    background-color: var(--gray-050);
    color: #0d47a1;
    color: var(--primary);
}

.hdbuy-label--primary-text svg {
    color: #0d47a1;
    color: var(--primary);
}

.hdbuy-label--primary-fill {
    background-color: #0d47a1;
    background-color: var(--primary);
    color: #ffffff;
    color: var(--white);
}

.hdbuy-label--primary-fill svg {
    color: #ffffff;
    color: var(--white);
}

.hdbuy-link-btn {
    color: var(--blue);
    cursor: pointer;
    border: none;
    border-bottom: 1px dashed var(--blue);
    background: none;
    padding: 0;
    margin: 0 var(--size-2);
    display: inline;
    vertical-align: baseline;
    -webkit-tap-highlight-color: transparent;
}

.hdbuy-link-btn--sm {
    font-weight: 400;
    font-size: var(--font-12);
    line-height: var(--size-20);
}

.hdbuy-link-btn--md {
    font-weight: 500;
    font-size: var(--font-14);
    line-height: var(--size-20);
}

.hdbuy-link-btn--lg {
    font-weight: 600;
    font-size: var(--font-16);
    line-height: var(--size-24);
}

.hdbuy-link-btn:focus-visible {
    outline: 2px solid var(--blue-300);
    outline-offset: 2px;
    border-radius: 2px;
}

.hdbuy-link-btn--standalone {
    border-bottom: none;
}

/* Hover — Desktop Only */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-link-btn:hover {
        color: var(--blue-700);
        border-bottom-color: var(--blue-700);
    }

    .hdbuy-link-btn--standalone:hover {
        border-bottom: none;
        text-decoration: none;
    }
}


/* ============================
   HDBUY LIST - CUSTOM BULLETS (GLOBAL)
   ============================ */

.hdbuy-list--custom-bullet {
    list-style: none;
    padding-right: 0;
}

.hdbuy-list--custom-bullet li {
    position: relative;
    padding-right: var(--size-16);
}

.hdbuy-list--custom-bullet li::before {
    content: "•";
    position: absolute;
    right: 0;
    top: 0;
    color: var(--gray-600);
}


.hdbuy-list--no-bullet {
    list-style: none;
    padding-right: 0;
}

/* ============================
   HDBUY MEDIA PICKER MODAL (GLOBAL)
   ============================ */

/* ---- DIALOG OVERRIDE ---- */
@media (min-width: 1024px) {
    .hdbuy-media-picker .hdbuy-modal__dialog {
        max-width: unset !important;
        flex-grow: unset !important;
    }
}

/* ---- HEADER ---- */
.hdbuy-media-picker__header {
    padding: var(--size-16) var(--size-24) !important;
    border-bottom: 2px solid var(--gray-100);
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__header {
        padding: var(--size-24) var(--size-32) !important;
        border: none;
    }
}

/* ---- BODY ---- */
.hdbuy-media-picker__body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

@media (max-width: 1023.98px) {
    .hdbuy-media-picker__body {
        padding: 0 !important;
    }
}

.hdbuy-media-picker__body-loading {
    width: 100%;
    text-align: center;
}

.hdbuy-media-picker__body-medias {
    width: 100%;
    height: 100%;
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__body-medias {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
}

/* ---- THUMBNAILS ---- */
.hdbuy-media-picker__thumbnails {
    width: 100vw;
    min-height: 72px;
    padding: 0 var(--size-24);
    margin-top: var(--size-24);
    margin-bottom: var(--size-20);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__thumbnails {
        width: unset;
        padding: 0;
        max-height: calc(100vh - 334px);
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        overflow: hidden auto;
        margin: 0;
        margin-right: var(--size-24);
    }
}

.hdbuy-media-picker__thumbnails::-webkit-scrollbar {
    display: none;
}

/* ---- THUMBNAIL ITEM ---- */
.hdbuy-media-picker__thumb-item {
    position: relative;
    width: 72px;
    min-width: 72px;
    height: 72px;
    min-height: 72px;
    margin-left: var(--size-8);
    border-radius: var(--radius-9);
    overflow: hidden;
    border: 2px solid var(--white);
    background-color: var(--black);
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__thumb-item {
        width: 80px;
        min-width: 80px;
        height: 80px;
        min-height: 80px;
        border-radius: var(--radius-12);
        margin-left: 0;
        margin-bottom: var(--size-16);
    }
}

.hdbuy-media-picker__thumb-item--active {
    border-color: var(--primary);
}

.hdbuy-media-picker__thumb-item--disabled {
    pointer-events: none;
}

.hdbuy-media-picker__thumb-item--disabled::before {
    opacity: 0.7 !important;
}

.hdbuy-media-picker__thumb-item:last-child {
    margin-left: 0;
}

.hdbuy-media-picker__thumb-item::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--white);
    opacity: 0;
    transition: all 0.25s;
}

.hdbuy-media-picker__thumb-label {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-4);
    color: var(--white);
    background: rgba(var(--black), 0.7);
}

.hdbuy-media-picker__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* ---- THUMBNAIL ADD ---- */
.hdbuy-media-picker__thumb-add {
    position: relative;
}

.hdbuy-media-picker__thumb-add button {
    cursor: pointer;
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__thumb-add button {
        width: 80px !important;
        height: 80px;
        border-radius: var(--radius-12) !important;
    }
}

.hdbuy-media-picker__thumb-add svg {
    margin: 0 !important;
}

.hdbuy-media-picker__thumb-add-label {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

.hdbuy-media-picker__thumb-add-input {
    display: none;
}

/* ---- PREVIEW ---- */
.hdbuy-media-picker__preview {
    width: 100%;
    height: calc(100% - 170px);
    max-height: 100vw;
    position: relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__preview {
        width: 500px;
        height: 500px;
        max-width: calc(100vh - 334px);
        max-height: calc(100vh - 334px);
        order: -1;
    }
}

.hdbuy-media-picker__preview::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    background: var(--white);
    z-index: 0;
}

.hdbuy-media-picker__preview-img,
.hdbuy-media-picker__preview-video {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
}

/* ---- EDIT PHOTO / VIDEO ---- */
.hdbuy-media-picker__edit-photo,
.hdbuy-media-picker__edit-video {
    width: 100%;
    height: calc(100% - 170px);
    max-height: 100vw;
    position: relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
    border-bottom: 1px solid var(--gray-100);
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__edit-photo,
    .hdbuy-media-picker__edit-video {
        width: 500px;
        height: 500px;
        max-width: calc(100vh - 334px);
        max-height: calc(100vh - 334px);
        order: -1;
    }
}

.hdbuy-media-picker__edit-photo::before,
.hdbuy-media-picker__edit-video::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    background: var(--white);
    z-index: 0;
}

.hdbuy-media-picker__edit-photo-img,
.hdbuy-media-picker__edit-video-video {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
}

/* ---- CROP ---- */
.hdbuy-media-picker__crop {
    width: 100%;
    height: 100%;
    max-height: 100vw;
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__crop {
        order: -1;
    }
}

/* ---- CROPPER ---- */
.hdbuy-media-picker__cropper {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid var(--gray-100);
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__cropper {
        width: 500px !important;
        height: 500px;
        max-width: calc(100vh - 334px);
        max-height: calc(100vh - 334px);
        order: -1;
    }
}

.hdbuy-media-picker__cropper::before {
    background: var(--white) !important;
    opacity: 0.7 !important;
}

/* ---- ROTATE ---- */
.hdbuy-media-picker__rotate {
    width: 100%;
    height: 100%;
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__rotate {
        order: -1;
    }
}

.hdbuy-media-picker__rotate-view {
    width: 100%;
    height: calc(100% - 170px);
    max-height: 100vw;
    position: relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
    border-bottom: 1px solid var(--gray-100);
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__rotate-view {
        width: 500px;
        height: 500px;
        max-width: calc(100vh - 334px);
        max-height: calc(100vh - 334px);
        order: -1;
    }
}

.hdbuy-media-picker__rotate-view::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    background: var(--white);
    z-index: 0;
}

.hdbuy-media-picker__rotate-view-img {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
}

/* ---- ACTIONS ---- */
.hdbuy-media-picker__actions {
    width: 100%;
    padding: var(--size-8) var(--size-24);
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__actions {
        padding: var(--size-12) var(--size-24) 0 var(--size-24);
        width: calc(100% - 104px);
    }
}

.hdbuy-media-picker__action-btn {
    background: none;
    border: none;
    text-align: center;
    padding: var(--size-8) var(--size-20);
    transition: all 0.25s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-left: var(--size-40);
}

.hdbuy-media-picker__action-btn:last-child {
    margin-left: 0;
}

.hdbuy-media-picker__action-btn:active {
    transform: scale(0.96);
}

.hdbuy-media-picker__action-icon {
    display: block;
    font-size: var(--font-18);
    color: var(--gray-600);
    justify-self: center;
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__action-icon {
        font-size: var(--font-20);
    }
}

.hdbuy-media-picker__action-title {
    display: block;
    color: var(--gray-600);
    font-size: var(--font-12);
    margin-top: var(--size-2);
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__action-title {
        font-size: var(--font-14);
        margin-top: var(--size-4);
    }
}

.hdbuy-media-picker__action-btn--disabled:active {
    transform: none !important;
}

.hdbuy-media-picker__action-btn--disabled .hdbuy-media-picker__action-icon,
.hdbuy-media-picker__action-btn--disabled .hdbuy-media-picker__action-title {
    color: var(--gray-200) !important;
}

/* ---- FOOTER ---- */
.hdbuy-media-picker__footer {
    padding: var(--size-12) var(--size-24) !important;
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__footer {
        padding: var(--size-12) var(--size-32) var(--size-24) var(--size-32) !important;
    }
}

.hdbuy-media-picker__footer button {
    min-width: 100px;
}

.hdbuy-media-picker__footer-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__footer-buttons {
        justify-content: flex-end;
    }
}

.hdbuy-media-picker__footer-buttons > div {
    width: 100%;
}

@media (min-width: 1024px) {
    .hdbuy-media-picker__footer-buttons > div {
        width: auto;
    }
}



/* ============================
   HDBUY MEDIA PREVIEW MODAL
   ============================ */

/* ---- BACKDROP (مشکی کامل، opacity بالاتر) ---- */
.hdbuy-media-preview__backdrop {
    background: rgba(0, 0, 0, 0.95) !important;
}

/* ---- DIALOG (بدون پس‌زمینه، بدون border-radius، تمام صفحه) ---- */
.hdbuy-media-preview__dialog {
    background: transparent !important;
    border-radius: 0 !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    width: 100vw !important;
    height: 100dvh !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* ---- CONTENT ---- */
.hdbuy-media-preview__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ---- CLOSE BUTTON (شیشه‌ای) ---- */
.hdbuy-media-preview__close {
    position: absolute;
    top: var(--size-16);
    left: var(--size-16);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--r-full);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--white);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-media-preview__close:hover {
        background: rgba(0, 0, 0, 0.6);
    }
}

.hdbuy-media-preview__close:active {
    transform: scale(0.94);
}

/* ---- BODY ---- */
.hdbuy-media-preview__body {
    padding: 0 !important;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ---- IMAGE WRAPPER (zoom origin) ---- */
.hdbuy-media-preview__image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 90dvh;
    transition: transform 0.15s ease-out;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
}

.hdbuy-media-preview__image-wrapper--zoomed {
    cursor: grab;
}

.hdbuy-media-preview__image-wrapper--zoomed:active {
    cursor: grabbing;
}

/* ---- IMAGE ---- */
.hdbuy-media-preview__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}


.hdbuy-modal-media-picker-preview .hdbuy-modal__body {
    padding-top: 0 !important;
}


/* ============================
   HDBUY MEDIA UPLOAD (GLOBAL)
   ============================ */

/* ---- BASE ITEM ---- */
.hdbuy-media-upload__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius-8);
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    color: var(--gray-700);
    background-color: var(--gray-050);
    border: 2px solid var(--gray-100);
    margin-bottom: var(--size-16);
}

@media (min-width: 1024px) {
    .hdbuy-media-upload__item {
        cursor: zoom-in;
    }
}

/* ---- ITEM VARIANTS ---- */
.hdbuy-media-upload__item--border {
    border: 2px dashed var(--gray-200);
    background-color: var(--white);
    cursor: pointer;
}

.hdbuy-media-upload__item--main::after {
    content: "تصویر اصلی";
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: var(--size-4) 0;
    text-align: center;
    font-weight: 500;
    font-size: var(--font-12);
    background: rgba(255, 255, 255, 0.8);
}

/* ---- CONTENT ---- */
.hdbuy-media-upload__content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--size-8);
    text-align: center;
}

/* ---- MAXIMIZE ICON ---- */
.hdbuy-media-upload__maximize {
    position: absolute;
    top: var(--size-4);
    right: var(--size-4);
    color: var(--white);
    font-size: var(--font-24);
    transform: scale(0);
    transition: transform 0.2s ease;
    pointer-events: none;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-media-upload__item:hover .hdbuy-media-upload__maximize {
        transform: scale(1);
    }
}

/* ---- ICON & LABEL ---- */
.hdbuy-media-upload__icon {
    font-size: var(--font-24);
}

.hdbuy-media-upload__label {
    display: block;
    font-size: var(--font-12);
    margin-top: var(--size-4);
}

@media (min-width: 1024px) {
    .hdbuy-media-upload__label {
        font-size: var(--font-14);
    }
}

/* ---- PHOTO ---- */
.hdbuy-media-upload__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- DELETE & TYPE BUTTON ---- */
.hdbuy-media-upload__delete,
.hdbuy-media-upload__type {
    position: absolute;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: var(--size-4);
    bottom: var(--size-4);
    background: var(--white);
    border: none;
    font-size: var(--font-24);
    border-radius: var(--radius-4);
}

.hdbuy-media-upload__delete svg,
.hdbuy-media-upload__type svg {
    display: block;
    position: relative;
}

.hdbuy-media-upload__delete {
    cursor: pointer;
    left: var(--size-4);
    bottom: var(--size-4);
}

.hdbuy-media-upload__type {
    bottom: var(--size-4);
    right: var(--size-4);
    color: var(--gray-500);
}

/* ---- UPLOADING / UPLOADED ---- */
.hdbuy-media-upload__uploaded,
.hdbuy-media-upload__uploading {
    position: absolute;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: var(--size-4);
    bottom: var(--size-4);
    background: var(--white);
    font-size: var(--font-24);
    border-radius: var(--radius-4);
}

.hdbuy-media-upload__uploaded {
    cursor: pointer;
}

/* ---- ANIMATIONS ---- */
@keyframes hdbuy-media-upload-hide-tick {
    to {
        opacity: 0;
        width: 0;
        height: 0;
    }
}

@keyframes hdbuy-media-upload-show-delete {
    to {
        opacity: 1;
        width: auto;
        height: auto;
    }
}

.hdbuy-media-upload__uploaded-tick {
    opacity: 1;
    animation: hdbuy-media-upload-hide-tick 0s 2s forwards;
}

.hdbuy-media-upload__uploaded-delete {
    opacity: 0;
    width: 0;
    height: 0;
    animation: hdbuy-media-upload-show-delete 0s 2s forwards;
}

/* ---- VIDEO ICON ---- */
.hdbuy-media-upload__video-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: var(--size-4);
    transform: translate(-50%, -50%);
    font-size: var(--font-20);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}

/* ---- PREVIEW ---- */
.hdbuy-media-upload__preview-wrapper {
    width: 100%;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hdbuy-media-upload__preview-image {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ---- PREVIEW FOOTER ---- */
.hdbuy-media-upload__preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--size-12);
    margin-top: var(--size-12);
    border-top: 1px solid var(--gray-050);
}

.hdbuy-media-upload__preview-footer button:nth-child(2) {
    width: 120px !important;
    margin-right: var(--size-12);
}

/* ---- PREVIEW MODAL FOOTER ---- */
.hdbuy-media-upload__preview-modal-footer {
    padding: var(--size-12) var(--size-24) !important;
}


/* =========================
   پاپ‌اور یکپارچه – نهایی
   ========================= */

/* کلید اصلی مخفی/آشکار */
.hdbuy-popover {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.15s; /* تأخیر برای پنهان‌سازی */
}

.hdbuy-popover--visible {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}

/* پوشش شفاف برای بستن با کلیک بیرون */
.hdbuy-popover__overlay {
    position: absolute;
    inset: 0;
    background: transparent;
}

/* محتوای شناور */
.hdbuy-popover__content {
    width: fit-content;
    height: fit-content;
    position: absolute;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* عرض و ارتفاع: auto (متناسب با محتوا) – هیچ min-width/height اجباری وجود ندارد */
}

.hdbuy-popover--visible .hdbuy-popover__content {
    opacity: 1;
    transform: scale(1);
}

/* -------------------------
   استایل‌های محتوا
   ------------------------- */

.hdbuy-popover__menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.hdbuy-popover__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--black, #0d0c22);
    font-size: var(--font-16, 16px);
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    transition: background-color 0.2s;
    min-height: 48px;          /* ارتفاع یکنواخت و بهینه */
    white-space: nowrap;       /* جلوگیری از شکستن متن‌های کوتاه */
}

.hdbuy-popover__item svg {
    color: var(--gray-700, #565564);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-popover__item:hover {
        background-color: var(--gray-100, #e7e7e9);
    }
}

/* مخفی‌سازی سورس‌های اصلی */
.hdbuy-popover-source {
    display: none;
}
/* فعال‌سازی: وقتی wrapper دارای کلاس active باشه، فرزندان دارای کلاس display می‌گیرن */
.hdbuy-popover-source--active .hdbuy-popover-source {
    display: block!important;       /* برای منوها و لیست‌های معمولی */
}

/* کلاس کمکی برای نمایش محتوای کلون‌شده (در JS استفاده می‌شود) */
.hdbuy-popover-source--active {
    display: block;
}

/* -------------------------
   اسکرول‌بار پیشرفته (۴px)
   ------------------------- */
.hdbuy-popover__content::-webkit-scrollbar {
    width: 4px;
}
.hdbuy-popover__content::-webkit-scrollbar-track {
    background: transparent;
}
.hdbuy-popover__content::-webkit-scrollbar-thumb {
    background: var(--gray-300, #cbd5e1);
    border-radius: 2px;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-popover__content::-webkit-scrollbar-thumb:hover {
        background: var(--gray-400, #94a3b8);
    }
}



.hdbuy-popover-container{
    display: none;
}


/* ============================
   HDBUY RADIO COMPONENT
   ============================ */

.hdbuy-radio {
    display: flex;
    align-items: center;
    justify-content: right;
    user-select: none;
    background: none;
    border: none;
    outline: none;
}

.hdbuy-radio__input {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.hdbuy-radio__el {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--size-8);
    border-radius: 50%;
    transition: all 0.3s;
    color: var(--white);
    background-color: var(--white);
    border: 2px solid var(--gray-600);
}

.hdbuy-radio__el:after {
    top: 0;
    left: 0;
    content: "";
    display: block;
    position: relative;
    border-radius: 50%;
}

/* ---- SIZE: MD ---- */
.hdbuy-radio--md .hdbuy-radio__el:after {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    border: 2px solid var(--white);
}

.hdbuy-radio--md .hdbuy-radio-label {
    font-size: var(--font-16);
}
.hdbuy-radio--md .hdbuy-radio-label--sm {
    font-size: var(--font-14);
}

/* ---- SIZE: LG ---- */
.hdbuy-radio--lg .hdbuy-radio__el:after {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border: 3px solid var(--white);
}

.hdbuy-radio--lg .hdbuy-radio-label {
    font-size: var(--font-18);
}

.hdbuy-radio--lg .hdbuy-radio-label--md {
    font-size: var(--font-16);
}

/* ---- CURSOR ---- */
.hdbuy-radio:not(.hdbuy-radio--disabled) {
    cursor: pointer;
}

/* ---- STATE: ENABLED ---- */
.hdbuy-radio--enabled .hdbuy-radio__el {
    border-color: var(--gray-600);
    background-color: var(--white);
}

.hdbuy-radio--enabled .hdbuy-radio__input:checked + .hdbuy-radio__el {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* ---- STATE: DISABLED ---- */
.hdbuy-radio--disabled .hdbuy-radio__el {
    border-color: var(--gray-100);
    background-color: var(--white);
}

.hdbuy-radio--disabled .hdbuy-radio-label {
    color: var(--gray-100);
}

.hdbuy-radio--disabled .hdbuy-radio__input:checked + .hdbuy-radio__el {
    background-color: var(--gray-100);
    border-color: var(--gray-100);
}

/* امتیازدهی عمومی */
.hdbuy-rating {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hdbuy-rating__wrapper {
    display: flex;
    align-items: center;
    direction: ltr;
}

.hdbuy-rating__star {
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.hdbuy-rating__star + .hdbuy-rating__star {
    padding-left: 8px;
}

.hdbuy-rating__star.active .star-fill {
    opacity: 1;
    color: var(--warning);
}

.hdbuy-rating__star.active .star-stroke {
    opacity: 0;
}

.hdbuy-rating__button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-8);
    border: var(--border-1) solid var(--gray-100);
    transition: background-color 0.2s ease;
}



.hdbuy-rating__button.active {
    background-color: var(--gray-050);
}



.hdbuy-rating__button.active .star-fill {
    opacity: 1;
    color: var(--warning);
}

.hdbuy-rating__button.active .star-stroke {
    opacity: 0;
}

.hdbuy-rating__star-index {
    display: block;
    font-size: var(--font-14);
    color: var(--gray-800);
    font-weight: 700;
}

/* Rating Sizes */
.hdbuy-rating--sm .hdbuy-rating__button {
    width: 36px;
    height: 36px;
}

.hdbuy-rating--md .hdbuy-rating__button {
    width: 40px;
    height: 40px;
}

.hdbuy-rating--lg .hdbuy-rating__button {
    width: 48px;
    height: 48px;
}

.hdbuy-rating--lg .hdbuy-rating__button .hdbuy-icon {

    font-size: 32px;
}

.hdbuy-rating--md .hdbuy-rating__button .hdbuy-icon {

    font-size: 28px;
}


.hdbuy-rating--sm .hdbuy-rating__button .hdbuy-icon {

    font-size: 24px;
}


.hdbuy-rating--xs .hdbuy-rating__button .hdbuy-icon {

    font-size: 20px;
}




/* Star Icons */
.hdbuy-rating__icon {
    color: var(--gray-400);
}

.hdbuy-rating__icon--readonly {
    cursor: unset;
}

.hdbuy-rating__icon use {
    transition: opacity 0.2s ease, color 0.2s ease;
}

.star-fill {
    opacity: 0;
}

.star-stroke {
    opacity: 1;
}

/* Hover Effects — Desktop Only */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-rating__star:hover .star-fill {
        opacity: 1;
        color: var(--warning);
    }

    .hdbuy-rating__star:hover .star-stroke {
        opacity: 0;
    }

    .hdbuy-rating__star:has(~ .hdbuy-rating__star:hover) .star-fill {
        opacity: 1;
        color: var(--warning);
    }

    .hdbuy-rating__star:has(~ .hdbuy-rating__star:hover) .star-stroke {
        opacity: 0;
    }

    .hdbuy-rating__star:hover .hdbuy-rating__button,
    .hdbuy-rating__star:has(~ .hdbuy-rating__star:hover) .hdbuy-rating__button {
        background-color: var(--gray-050);
    }
}



/* آیکون‌های عمومی */
[class^="hdb-"],
[class*=" hdb-"] {
    font-family: 'hdbuy-icons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Icon Classes */
.hdb-loading .path1:before {
    content: "\e90c";
    color: rgb(0, 0, 0);
    opacity: 0.2;
}

.hdb-loading .path2:before {
    content: "\e90e";
    margin-left: -1em;
    color: rgb(0, 0, 0);
    opacity: 0.2;
}

.hdb-loading .path3:before {
    content: "\e90f";
    margin-left: -1em;
    color: rgb(0, 0, 0);
}



/* Icon System */
.hdbuy-icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    color: currentColor;
    fill: currentColor;
    vertical-align: middle;
    flex-shrink: 0;
}
.hdbuy-icon--outline {
    fill: none !important;
}
.hdbuy-btn .hdbuy-icon {
    color: inherit;
}

/* Icon Colors */
.hdbuy-icon-default {
    color: var(--gray-600);
}

/* Icon Stroke Weights */
.hdbuy-icon-zero {
    stroke-width: 0;
}

.hdbuy-icon-extra-thin {
    stroke-width: 1;
}

.hdbuy-icon-thin {
    stroke-width: 1.5;
}

.hdbuy-icon-regular {
    stroke-width: 2;
}

.hdbuy-icon-bold {
    stroke-width: 2.5;
}
.hdbuy-icon-x-bold {
    stroke-width: 3;
}


/* Icon Sizes */
.hdbuy-icon-xs {
    font-size: 12px;
}

.hdbuy-icon-sm {
    font-size: 16px;
}

.hdbuy-icon-md {
    font-size: 20px;
}

.hdbuy-icon-lg {
    font-size: 24px;
}


.hdbuy-icon-xl {
    font-size: 28px;
}


.hdbuy-icon-2xl {
    font-size: 32px;
}

.hdbuy-icon-3xl {
    font-size: 40px;
}

.hdbuy-icon-4xl {
    font-size: 48px;
}

.hdbuy-icon-5xl {
    font-size: 56px;
}

.hdbuy-icon-6xl {
    font-size: 64px;
}

.hdbuy-icon--raised {
    margin-bottom: 0.15em;
}

/* ========================= */
/* BASE SEARCH COMPONENT     */
/* ========================= */

.hdbuy-search {
    width: 100%;
}

/* استایل پایه کانتینر */
.hdbuy-search .hdbuy-input__container {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    transition: all 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .hdbuy-search .hdbuy-input__container:hover {
        background-color: var(--gray-025);
        border-color: var(--gray-300);
    }
}

.hdbuy-search .hdbuy-input__container:focus-within {
    background-color: var(--white);
    border-color: var(--color-active-item);
    box-shadow: 0 0 0 3px var(--primary);
}

.hdbuy-search .hdbuy-input__search-icon {
    color: var(--gray-400);
    flex-shrink: 0;
    transition: color 0.3s ease;
}
/* استایل پایه فیلد ورودی */
.hdbuy-search .hdbuy-input__input {
    border: none !important;
    outline: none !important;
    background: transparent;
    flex: 1;
    min-width: 0;
    color: var(--black);
    caret-color: var(--color-active-item);
}

.hdbuy-search .hdbuy-input__input::placeholder {
    color: var(--gray-400);
}

/* ========================= */
/* SIZE VARIANTS             */
/* ========================= */

/*
 * SM = 40px
 * MD = 48px
 * LG = 56px
 */

/* SM (40px) */
.hdbuy-search--size-sm .hdbuy-input__container {
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-6);
}

.hdbuy-search--size-sm .hdbuy-input__search-icon {
    width: 20px;
    height: 20px;
}

.hdbuy-search--size-sm .hdbuy-input__input {
    padding: 0 8px;
    line-height: 24px;
}

.hdbuy-search--size-sm .hdbuy-input__input::placeholder {
    font-weight: 400;
}

/* MD (48px) */
.hdbuy-search--size-md .hdbuy-input__container {
    height: 48px;
    padding: 0 16px;
    border-radius: var(--radius-8);
}

.hdbuy-search--size-md .hdbuy-input__search-icon {
    width: 24px;
    height: 24px;
}

.hdbuy-search--size-md .hdbuy-input__input {
    padding: 0 8px;
    line-height: 28px;
}

.hdbuy-search--size-md .hdbuy-input__input::placeholder {
    font-weight: 400;
}

/* LG (56px) */
.hdbuy-search--size-lg .hdbuy-input__container {
    height: 56px;
    padding: 0 20px;
    border-radius: var(--radius-10);
}

.hdbuy-search--size-lg .hdbuy-input__search-icon {
    width: 28px;
    height: 28px;
}

.hdbuy-search--size-lg .hdbuy-input__input {
    padding: 0 12px;
    line-height: 32px;
}

.hdbuy-search--size-lg .hdbuy-input__input::placeholder {
    font-weight: 400;
}

/* ========================= */
/* ROUNDED VARIANTS          */
/* ========================= */

.hdbuy-search--rounded-full .hdbuy-input__container {
    border-radius: var(--r-full, 9999px);
}

.hdbuy-search--rounded-lg .hdbuy-input__container {
    border-radius: var(--radius-16, 16px);
}

.hdbuy-search--rounded-md .hdbuy-input__container {
    border-radius: var(--radius-8, 8px);
}

.hdbuy-search--rounded-sm .hdbuy-input__container {
    border-radius: var(--radius-4, 4px);
}

.hdbuy-search--rounded-none .hdbuy-input__container {
    border-radius: 0;
}

/* ========================= */
/* STATES                    */
/* ========================= */

/* خطا */
.hdbuy-search--has-error .hdbuy-input__container {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-200);
}

.hdbuy-search--has-error .hdbuy-input__search-icon {
    color: var(--danger);
}

.hdbuy-search--has-error .hdbuy-input__input {
    color: var(--danger);
}

.hdbuy-search--has-error .hdbuy-search__error-caption {
    display: flex;
}

/* غیرفعال */
.hdbuy-search--is-disabled {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.hdbuy-search--is-disabled .hdbuy-input__container {
    background-color: var(--gray-050);
    border-color: var(--gray-200);
}

/* ========================= */
/* CLEAR BUTTON              */
/* ========================= */

.hdbuy-search__clear-btn {
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--gray-400);
    padding: 0;
    flex-shrink: 0;
    border-radius: 50%;
    transition: all 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
    .hdbuy-search__clear-btn:hover {
        background-color: var(--gray-100);
        color: var(--gray-600);
    }
}
.hdbuy-search__clear-btn:focus-visible {
    outline: 2px solid var(--color-active-item);
    outline-offset: 2px;
}

.hdbuy-search--has-value .hdbuy-search__clear-btn {
    display: flex;
}

/* ========================= */
/* CAPTIONS                  */
/* ========================= */

.hdbuy-search--with-caption .hdbuy-input__container {
    margin-bottom: 28px;
}

.hdbuy-search__error-caption {
    display: none;
    align-items: center;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    color: var(--danger);
    font-size: var(--font-12);
    font-weight: 500;
    line-height: 20px;
}

.hdbuy-search__help-caption {
    display: flex;
    align-items: center;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    color: var(--gray-400);
    font-size: var(--font-12);
    font-weight: 500;
    line-height: 20px;
}

.hdbuy-search--has-error .hdbuy-search__help-caption {
    display: none;
}

/* ========================= */
/* LOADING SPINNER           */
/* ========================= */

.hdbuy-search--is-loading .hdbuy-input__search-icon {
    animation: spin 0.8s linear infinite;
}

.hdbuy-search--is-loading .hdbuy-input__container {
    background-color: var(--gray-025);
}

.hdbuy-search__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-200);
    border-top-color: var(--color-active-item);
    border-radius: 50%;
    flex-shrink: 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================= */
/* INTERACTIVE ICON COLORS   */
/* ========================= */

.hdbuy-search .hdbuy-input__container:hover .hdbuy-input__search-icon {
    color: var(--gray-500);
}

.hdbuy-search .hdbuy-input__container:focus-within .hdbuy-input__search-icon {
    color: var(--color-active-item);
}

/* ========================= */
/* HIDE NATIVE SEARCH ICONS  */
/* ========================= */

/* حذف آیکون ضربدر (clear) در WebKit */
.hdbuy-search .hdbuy-input__input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* حذف آیکون ذره‌بین (search) در WebKit */
.hdbuy-search .hdbuy-input__input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* حذف دکمه نتایج جستجو در WebKit */
.hdbuy-search .hdbuy-input__input[type="search"]::-webkit-search-results-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* حذف دکمه نتایج جستجو در WebKit */
.hdbuy-search .hdbuy-input__input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Firefox: حذف آیکون‌های پیشفرض */
.hdbuy-search .hdbuy-input__input[type="search"] {
    -moz-appearance: textfield;
}

/* Edge/IE */
.hdbuy-search .hdbuy-input__input[type="search"]::-ms-clear,
.hdbuy-search .hdbuy-input__input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.hdbuy-search--size-md .hdbuy-search__clear-btn svg {
    font-size: 16px;
}

.hdbuy-search--with-clear .hdbuy-search__clear-btn {
    stroke-width: 2.5;
}

/* ========================= */
/* MUTED VARIANT             */
/* ========================= */

.hdbuy-search--muted .hdbuy-input__container {
    background-color: var(--gray-050);
    border: none;
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .hdbuy-search--muted .hdbuy-input__container:hover {
        background-color: var(--gray-050);
        border: none;
    }
}

.hdbuy-search--muted .hdbuy-input__container:focus-within {
    background-color: var(--gray-050);
    border: none;
    box-shadow: none;
    outline: none;
}

.hdbuy-search--muted .hdbuy-input__input:focus {
    outline: none;
    box-shadow: none;
}

.hdbuy-search--muted .hdbuy-input__search-icon {
    color: var(--gray-400);
}

.hdbuy-sticky-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--white);
}

/*
 * بخش محتوای قابل اسکرول
 */
.hdbuy-sticky-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/*
 * بخش دکمه (action)
 */
.hdbuy-sticky-action {
    margin-top: auto;
}

/* ========== استایل موبایل (زیر 1024px) ========== */
@media (max-width: 1023.98px) {

    .hdbuy-sticky-wrapper {
        min-height: 100vh;
    }

    .hdbuy-sticky-content {
        padding: var(--size-24);
        scrollbar-width: thin;
    }

    .hdbuy-sticky-content::-webkit-scrollbar {
        width: 4px;
    }

    .hdbuy-sticky-content::-webkit-scrollbar-track {
        background: var(--gray-050);
    }

    .hdbuy-sticky-content::-webkit-scrollbar-thumb {
        background: var(--gray-300);
        border-radius: var(--radius-4);
    }

    .hdbuy-sticky-action {
        bottom: 0;
        width: 100%;

        position: sticky;
        background-color: #fff;
        background-color: var(--white);
        border-top: 1px solid #e7e7e9;
        border-top: 1px solid var(--gray-100);
        padding: 16px 24px;
        padding: var(--size-16) var(--size-24);
        padding-bottom: calc(var(--size-12) + env(safe-area-inset-bottom));
        animation: hdbuy-sticky-slide-up 0.3s ease-out;
    }

    @keyframes hdbuy-sticky-slide-up {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}
/* ========== استایل دسکتاپ (1024px به بالا) ========== */
@media (min-width: 1024px) {

    .hdbuy-sticky-wrapper {
        min-height: auto;
        padding: var(--size-40);
    }

    .hdbuy-sticky-content {
        overflow-y: visible;
    }

    .hdbuy-sticky-action {
        position: static;
        background: transparent;
        border-top: none;
        box-shadow: none;
        padding: 0;
        margin-top: var(--size-32);
        animation: none;
    }
}

/* دکمه در حالت موبایل */
@media (max-width: 1023.98px) {


    /* افکت لمسی در موبایل */
    .hdbuy-sticky-action .hdbuy-btn:active,
    .hdbuy-sticky-action [class*="hdbuy-btn"]:active {
        transform: scale(0.98);
    }
}

/* دکمه در حالت دسکتاپ */
@media (min-width: 1024px) {
    .hdbuy-sticky-action .hdbuy-btn,
    .hdbuy-sticky-action [class*="hdbuy-btn"] {
        border-radius: var(--radius-8);
        box-shadow: none;
    }
}

/* حذف سایه دکمه sticky */
.hdbuy-sticky-action--no-shadow {
    box-shadow: none !important;
}

/* حذف border-top دکمه sticky */
.hdbuy-sticky-action--no-border {
    border-top: none !important;
}

/* پس زمینه سفارشی برای دکمه sticky */
.hdbuy-sticky-action--dark {
    background: var(--gray-900) !important;
}

/* فاصله سفارشی دکمه sticky */
.hdbuy-sticky-action--compact {
    padding: var(--size-8) var(--size-12) !important;
}

.hdbuy-sticky-action--spacious {
    padding: var(--size-16) var(--size-24) !important;
}

/* وقتی دکمه در دسکتاپ هم sticky باشد (اختیاری) */
.hdbuy-sticky-action--always-sticky {
    position: sticky !important;
    bottom: 0;
}

/* وقتی محتوا کوتاه است و دکمه معمولی می‌شود */
.hdbuy-sticky-wrapper--short-content {
    min-height: auto;
}

.hdbuy-sticky-wrapper--short-content .hdbuy-sticky-action {
    position: static;
}

.hdbuy-support-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--size-6);
    font-size: var(--font-14);
    font-weight: 500;
    color: var(--blue-700);
    cursor: pointer;
    padding: var(--size-24) var(--size-8);
    transition: color 0.2s ease;
    user-select: none;
    width: 100%;

}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-support-trigger:hover {
        color: var(--blue-500);
    }
}

.hdbuy-support-trigger:active {
    color: var(--blue-800);
}

@media (max-width: 1023.98px) {
    .hdbuy-support-trigger {
        font-size: var(--font-12);
        margin-top: 0;
    }
}



.hdbuy-tab-panel {
    padding: 0;
    outline: none;
}

.hdbuy-tab-panel:focus-visible {
    outline: 2px solid var(--color-active-item, var(--primary, #0b3d8a));
    outline-offset: -2px;
    border-radius: 4px;
}


/* ============================================================ */
/* HDBUY TAB - WEB COMPONENT                                     */
/* ============================================================ */

hdbuy-tab {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    padding: var(--size-12, 12px) var(--size-16, 16px);
    text-align: center;
    cursor: pointer;
    min-height: 48px;
    white-space: nowrap;
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    color: var(--gray-700, #373d3f);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

hdbuy-tab:focus-visible {
    outline: 2px solid var(--color-active-item, var(--primary));
    outline-offset: -2px;
    border-radius: 4px;
}

/* ============================================================ */
/* TITLE                                                        */
/* ============================================================ */
.hdbuy-tab__title {
    font-weight: 600;
    color: var(--gray-700);
    transition: color .3s;
    font-size: 14px;
    line-height: 1.5;
}

/* ============================================================ */
/* ICON                                                         */
/* ============================================================ */
.hdbuy-tab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* ============================================================ */
/* BADGE                                                        */
/* ============================================================ */
.hdbuy-tab__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background-color: var(--gray-600);
    color: var(--white);
    border-radius: 8px;
    font-size: var(--font-12, 12px);
    font-weight: 600;
    line-height: 1;
    margin-right: var(--size-8, 8px);
    transition: background-color .3s;
    flex-shrink: 0;
}

/* ============================================================ */
/* INDICATOR                                                    */
/* ============================================================ */
.hdbuy-tab__indicator {
    position: absolute;
    height: 4px;
    bottom: 0;
    right: 8px;
    left: 8px;
    opacity: 0;
    transition: opacity .3s, background-color .3s;
    background-color: var(--color-active-item, var(--primary));
    z-index: 2;
    border-radius: var(--radius-4) var(--radius-4) 0 0;
}

/* ============================================================ */
/* ACTIVE STATE                                                 */
/* ============================================================ */
hdbuy-tab[active] .hdbuy-tab__title {
    color: var(--color-active-item, var(--primary));
}

hdbuy-tab[active] .hdbuy-tab__indicator {
    opacity: 1;
}

hdbuy-tab[active] .hdbuy-tab__badge {
    background-color: var(--primary);
}

/* ============================================================ */
/* DISABLED STATE                                               */
/* ============================================================ */
hdbuy-tab[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================ */
/* RESPONSIVE                                                   */
/* ============================================================ */

/* ============================================================ */
/* HOVER (DESKTOP ONLY)                                         */
/* ============================================================ */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    hdbuy-tab:not([active]):not([disabled]):hover .hdbuy-tab__title {
        color: var(--gray-600);
    }

    hdbuy-tab[active]:hover .hdbuy-tab__title {
        color: var(--color-primary-600);
    }

    hdbuy-tab[active]:hover .hdbuy-tab__indicator {
        background-color: var(--color-primary-600);
    }

    hdbuy-tab[active]:hover .hdbuy-tab__badge {
        background-color: var(--color-primary-600);
    }
}


/* ============================================================ */
/* HDBUY TABS - GLOBAL                                           */
/* ============================================================ */

/* Container */
hdbuy-tabs {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: min-content;
    border-bottom: solid var(--border-1, 1px) var(--gray-100, #f5f5f5);
    background-color: var(--white, #fff);
}

/* Panel */
hdbuy-tab-panel {
    outline: none;
    border: none;
    display: none;
}

hdbuy-tab-panel:not([hidden]) {
    display: block;
}



hdbuy-tab:focus-visible {
    outline: 2px solid var(--color-active-item, var(--primary));
    outline-offset: -2px;
    border-radius: 4px;
}

/* ============================================================ */
/* TAB TITLE                                                     */
/* ============================================================ */
.hdbuy-tabs__tab-title {
    font-weight: 500;
    color: var(--gray-700);
    transition: color .3s;
}

hdbuy-tab[active] .hdbuy-tabs__tab-title {
    color: var(--color-active-item, var(--primary));
}

/* ============================================================ */
/* TAB INDICATOR (خط فعال)                                       */
/* ============================================================ */
hdbuy-tab::after {
    content: "";
    position: absolute;
    height: 4px;
    bottom: 0;
    right: 8px;
    left: 8px;
    opacity: 0;
    transition: opacity .3s, background-color .3s;
    background-color: var(--color-active-item, var(--primary));
    z-index: 2;
    border-radius: var(--radius-4) var(--radius-4) 0 0;
}

hdbuy-tab[active]::after {
    opacity: 1;
}

/* ============================================================ */
/* TAB BADGE (تعداد)                                             */
/* ============================================================ */
.hdbuy-tabs__tab-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    background-color: var(--gray-600);
    color: var(--white);
    line-height: normal;
    font-size: var(--font-12);
    margin-right: var(--size-8);
    transition: background-color .3s;
    border-radius: 8px;
    padding: 0 4px;
}

hdbuy-tab[active] .hdbuy-tabs__tab-count {
    background-color: var(--primary);
}

/* ============================================================ */
/* PRIMARY VARIANT                                               */
/* ============================================================ */

.hdbuy-tabs--primary hdbuy-tab[active]::after {
    background-color: var(--primary);
}

.hdbuy-tabs--primary hdbuy-tab[active] .hdbuy-tabs__tab-count {
    background-color: var(--primary);
}

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */
/* ============================================================ */
/* RESPONSIVE — پیش‌فرض full-width، کلاس fit برای فیت           */
/* ============================================================ */
@media (max-width: 1023.98px) {
    hdbuy-tab {
        flex: 1;
        max-width: none;
    }

}

.hdbuy-tabs--fit-width hdbuy-tab {
    flex: 0 1 auto;
    max-width: fit-content;
}
/* ============================================================ */
/* HOVER (DESKTOP ONLY)                                          */
/* ============================================================ */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    hdbuy-tab:not([active]):not([disabled]):hover .hdbuy-tabs__tab-title {
        color: var(--gray-600);
    }

    hdbuy-tab[active]:hover .hdbuy-tabs__tab-title {
        color: var(--color-primary-600);
    }

    hdbuy-tab[active]:hover::after {
        background-color: var(--color-primary-600);
    }

    hdbuy-tab[active]:hover .hdbuy-tabs__tab-count {
        background-color: var(--color-primary-600);
    }
}


/* ==================== TOAST WRAPPER ==================== */
.hdbuy-toast-wrapper {
    position: fixed;
    z-index: 10009;
    pointer-events: none;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1024px) {
    .hdbuy-toast-wrapper {
        right: auto;
        left: 16px;
        align-items: flex-end;
    }
}

/* ==================== TOAST CONTAINER ==================== */
.hdbuy-toast-container {
    transition: transform 230ms cubic-bezier(0.21, 1.02, 0.73, 1);
}

/* ==================== TOAST ==================== */
.hdbuy-toast {
    min-width: 100%;
    box-shadow: none !important;
    border-radius: var(--size-4) !important;
    animation: hdbuy-toast-in 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

@media (min-width: 1024px) {
    .hdbuy-toast {
        min-width: 300px;
    }
}


/* ==================== TOAST VARIANTS ==================== */
.hdbuy-toast--success {
    background: var(--success) !important;
    color: var(--white) !important;
}

.hdbuy-toast--error {
    background: var(--danger) !important;
    color: var(--white) !important;
}

.hdbuy-toast--warning {
    background: var(--warning-500) !important;
    color: var(--white) !important;
}

.hdbuy-toast--info {
    background: var(--blue) !important;
    color: var(--white) !important;
}

/* ==================== TOAST BODY ==================== */
.hdbuy-toast__body {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--size-12) var(--size-16);
    gap: var(--size-8);
    font-size: var(--font-14);

}

/* ==================== TOAST ICON ==================== */
.hdbuy-toast__icon {
    flex-shrink: 0;
    width: var(--size-20);
    height: var(--size-20);
}

/* ==================== TOAST MESSAGE ==================== */
.hdbuy-toast__message {
    flex: 1;
    line-height: 1.5;
}

/* ==================== TOAST CLOSE ==================== */
.hdbuy-toast__close {
    flex-shrink: 0;
    cursor: pointer;
    padding: var(--size-4);
    border-radius: var(--size-4);
    transition: background-color 0.2s;
}

.hdbuy-toast__close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}



.hdbuy-toast--out {
    animation: hdbuy-toast-out 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==================== ANIMATIONS ==================== */
@keyframes hdbuy-toast-in {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hdbuy-toast-out {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(12px) scale(0.92);
    }
}

/* ============================================================ */
/* HDBUY TOGGLE COMPONENT                                       */
/* ============================================================ */

.hdbuy-toggle {
    display: flex;
    align-items: center;

    user-select: none;
    cursor: pointer;
}

:where(.hdbuy-toggle) {
    justify-content: right;
}

.hdbuy-toggle__input {
    display: none;
}

/* ---- TRACK ---- */
.hdbuy-toggle__track {
    position: relative;
    width: 40px;
    height: 20px;
    border-radius: 800px;
    cursor: pointer;
    margin-left: var(--size-8);
    transition: background-color .3s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
    flex-shrink: 0;
}

@media (max-width: 1023.98px) {
    .hdbuy-toggle__track {
        border-radius: 700px;
    }
}

/* ---- THUMB ---- */
.hdbuy-toggle__thumb {
    position: absolute;
    top: 3px;
    right: 3px;
    display: block;
    width: 14px;
    height: 14px;
    background-color: var(--white);
    border-radius: 50%;
    transition: right .3s ease, box-shadow .3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* ============================================================ */
/* STATE: ENABLED (OFF)                                         */
/* ============================================================ */
.hdbuy-toggle--enabled .hdbuy-toggle__track {
    background-color: var(--gray-200);
}

.hdbuy-toggle--enabled .hdbuy-toggle__thumb {
    right: 23px;
}

/* ============================================================ */
/* STATE: ENABLED + CHECKED (ON)                                */
/* ============================================================ */
.hdbuy-toggle--enabled .hdbuy-toggle__input:checked + .hdbuy-toggle__track {
    background-color: var(--primary);
}

.hdbuy-toggle--enabled .hdbuy-toggle__input:checked + .hdbuy-toggle__track .hdbuy-toggle__thumb {
    right: 3px;
}

/* ============================================================ */
/* STATE: DISABLED (OFF) - شبیه enabled off                     */
/* ============================================================ */


.hdbuy-toggle--disabled .hdbuy-toggle__thumb {
    right: 23px;
}

/* ============================================================ */
/* STATE: DISABLED + CHECKED (ON) - رنگ آبی                     */
/* ============================================================ */
.hdbuy-toggle--disabled .hdbuy-toggle__input:checked + .hdbuy-toggle__track {
    background-color: var(--primary);
}

.hdbuy-toggle--disabled .hdbuy-toggle__input:checked + .hdbuy-toggle__track .hdbuy-toggle__thumb {
    right: 3px;
}

/* ============================================================ */
/* LABEL                                                         */
/* ============================================================ */
.hdbuy-toggle--disabled .hdbuy-toggle-label {
    color: var(--gray-800);
    cursor: pointer;
}

.hdbuy-toggle-label{
    cursor: pointer;
}

/* ==================== TOGGLE DISABLED ==================== */
.hdbuy-toggle--disabled {
    pointer-events: none;
    user-select: none;
}

.hdbuy-toggle--disabled .hdbuy-toggle__track {
    background-color: var(--gray-050);
}

.hdbuy-toggle--disabled .hdbuy-toggle__thumb {
    background-color: var(--gray-200);
}

.hdbuy-toggle--disabled .hdbuy-toggle-label {
    color: var(--gray-400);
}

/* فونت تومان */
.hdb-toman:before {
    content: "\F06C\00FE0E";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    letter-spacing: normal;
    line-height: 1.5;
    font-family: Hotdbuy-Toman;
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    text-decoration: none;
    text-transform: none;
    line-height: 1;
    box-sizing: inherit;
}

/* ============================
   HDBUY TOOLTIP (GLOBAL)
   ============================ */

/* ---- WRAPPER ---- */
.hdbuy-tooltip-wrapper {
    display: inline-block;
    cursor: help;
}

.hdbuy-tooltip-wrapper--disabled {
    cursor: auto;
}

/* ---- TOOLTIP ---- */
.hdbuy-tooltip {
    position: fixed;
    z-index: 999999;
    display: block;
    word-wrap: break-word;
}

/* ---- INNER ---- */
.hdbuy-tooltip__inner {
    color: var(--white);
    padding: var(--size-10) var(--size-12);
    background-color: var(--gray-600);
    line-height: 24px;
    max-width: 300px;
    text-align: center;
    border-radius: var(--radius-4);
}

@media (max-width: 1023.98px) {
    .hdbuy-tooltip__inner {
        max-width: 262px;
    }
}

/* ---- ARROW ---- */
.hdbuy-tooltip__arrow {
    position: absolute;
    display: block;
    top: 100%;
    right: 50%;
    border: solid 8px transparent;
    border-bottom: none;
    border-top-color: var(--gray-600);
}

.hdbuy-tooltip:not(.hdbuy-tooltip--top) .hdbuy-tooltip__arrow {
    top: auto;
    bottom: 100%;
    transform: rotateX(180deg);
}

/* ---- SIZES ---- */
.hdbuy-tooltip--sm .hdbuy-tooltip__inner {
    padding: var(--size-2) var(--size-4);
    font-size: var(--font-10);
}

.hdbuy-tooltip--sm .hdbuy-tooltip__arrow {
    margin-right: -4px;
    border-width: 4px;
}

.hdbuy-tooltip--md .hdbuy-tooltip__inner {
    padding: var(--size-4) var(--size-8);
    font-size: var(--font-12);
}

.hdbuy-tooltip--md .hdbuy-tooltip__arrow {
    margin-right: -6px;
    border-width: 6px;
}

.hdbuy-tooltip--lg .hdbuy-tooltip__inner {
    padding: var(--size-10) var(--size-12);
    font-size: var(--font-16);
}

.hdbuy-tooltip--lg .hdbuy-tooltip__arrow {
    margin-right: -8px;
    border-width: 8px;
}

/* ============================================================ */
/* HDBUY TOOLTIP VARIANTS                                       */
/* ============================================================ */

/* ---- VARIANT: SUCCESS (GREEN) ---- */
.hdbuy-tooltip--success .hdbuy-tooltip__inner {
    background-color: var(--success-500);
}

.hdbuy-tooltip--success .hdbuy-tooltip__arrow {
    border-top-color: var(--success-500);
}

/* ---- VARIANT: SUCCESS LIGHT ---- */
.hdbuy-tooltip--success-light .hdbuy-tooltip__inner {
    background-color: var(--success-400);

}

.hdbuy-tooltip--success-light .hdbuy-tooltip__arrow {
    border-top-color: var(--success-400);
}

/* ---- VARIANT: SUCCESS DARK ---- */
.hdbuy-tooltip--success-dark .hdbuy-tooltip__inner {
    background-color: var(--success-700);
}

.hdbuy-tooltip--success-dark .hdbuy-tooltip__arrow {
    border-top-color: var(--success-700);
}

/* ---- VARIANT: WARNING (YELLOW/ORANGE) ---- */
.hdbuy-tooltip--warning .hdbuy-tooltip__inner {
    background-color: var(--warning-500);

}

.hdbuy-tooltip--warning .hdbuy-tooltip__arrow {
    border-top-color: var(--warning-500);
}

/* ---- VARIANT: WARNING LIGHT ---- */
.hdbuy-tooltip--warning-light .hdbuy-tooltip__inner {
    background-color: var(--warning-400);

}

.hdbuy-tooltip--warning-light .hdbuy-tooltip__arrow {
    border-top-color: var(--warning-400);
}

/* ---- VARIANT: WARNING DARK ---- */
.hdbuy-tooltip--warning-dark .hdbuy-tooltip__inner {
    background-color: var(--warning-700);
}

.hdbuy-tooltip--warning-dark .hdbuy-tooltip__arrow {
    border-top-color: var(--warning-700);
}

/* ---- VARIANT: DANGER (RED) ---- */
.hdbuy-tooltip--danger .hdbuy-tooltip__inner {
    background-color: var(--danger-500);
}

.hdbuy-tooltip--danger .hdbuy-tooltip__arrow {
    border-top-color: var(--danger-500);
}

/* ---- VARIANT: DANGER LIGHT ---- */
.hdbuy-tooltip--danger-light .hdbuy-tooltip__inner {
    background-color: var(--danger-400);

}

.hdbuy-tooltip--danger-light .hdbuy-tooltip__arrow {
    border-top-color: var(--danger-400);
}

/* ---- VARIANT: DANGER DARK ---- */
.hdbuy-tooltip--danger-dark .hdbuy-tooltip__inner {
    background-color: var(--danger-700);
}

.hdbuy-tooltip--danger-dark .hdbuy-tooltip__arrow {
    border-top-color: var(--danger-700);
}

/* ---- VARIANT: BLUE ---- */
.hdbuy-tooltip--blue .hdbuy-tooltip__inner {
    background-color: var(--blue-500);
}

.hdbuy-tooltip--blue .hdbuy-tooltip__arrow {
    border-top-color: var(--blue-500);
}

/* ---- VARIANT: BLUE LIGHT ---- */
.hdbuy-tooltip--blue-light .hdbuy-tooltip__inner {
    background-color: var(--blue-400);

}

.hdbuy-tooltip--blue-light .hdbuy-tooltip__arrow {
    border-top-color: var(--blue-400);
}

/* ---- VARIANT: BLUE DARK ---- */
.hdbuy-tooltip--blue-dark .hdbuy-tooltip__inner {
    background-color: var(--blue-700);
}

.hdbuy-tooltip--blue-dark .hdbuy-tooltip__arrow {
    border-top-color: var(--blue-700);
}

/* ---- VARIANT: GRAY (DEFAULT) ---- */
.hdbuy-tooltip--gray .hdbuy-tooltip__inner {
    background-color: var(--gray-600);
}

.hdbuy-tooltip--gray .hdbuy-tooltip__arrow {
    border-top-color: var(--gray-600);
}

/* ---- VARIANT: GRAY DARK ---- */
.hdbuy-tooltip--gray-dark .hdbuy-tooltip__inner {
    background-color: var(--gray-800);
}

.hdbuy-tooltip--gray-dark .hdbuy-tooltip__arrow {
    border-top-color: var(--gray-800);
}

/* ---- VARIANT: WHITE ---- */
.hdbuy-tooltip--white .hdbuy-tooltip__inner {
    background-color: var(--white);
    color: var(--gray-900);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.hdbuy-tooltip--white .hdbuy-tooltip__arrow {
    border-top-color: var(--white);
}

/* ---- VARIANT: BLACK ---- */
.hdbuy-tooltip--black .hdbuy-tooltip__inner {
    background-color: #000000;
}

.hdbuy-tooltip--black .hdbuy-tooltip__arrow {
    border-top-color: #000000;
}

/* ---- ANIMATIONS ---- */
.hdbuy-tooltip-show-enter-active,
.hdbuy-tooltip-show-leave-active {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.hdbuy-tooltip-show-enter,
.hdbuy-tooltip-show-leave-to {
    transform: translateY(8px);
    opacity: 0;
}

@media (max-width: 1023.98px) {
    .hdbuy-tooltip-show-enter,
    .hdbuy-tooltip-show-leave-to {
        transform: translateY(4px);
    }
}
/* ==================== VIDEO PICKER ==================== */
.hdbuy-video-picker {

}

.hdbuy-video-picker__title {
    display: block;
    margin-bottom: var(--size-12);
    color: var(--gray-800);
    font-size: var(--font-14);
}

/* ==================== LIST ==================== */
.hdbuy-video-picker__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-12);
    overflow-x: auto;
    max-width: 85vw;
}

@media (min-width: 768px) {
    .hdbuy-video-picker__list {
        max-width: initial;
    }
}

/* ==================== ITEM BASE ==================== */
.hdbuy-video-picker__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--size-8);
    border-radius: var(--radius-8);
    background-color: var(--white);
    border: var(--border-2) dashed var(--gray-200);
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
}

.hdbuy-video-picker__item:hover {
    background-color: var(--gray-050);
}

/* ==================== SIZE MODIFIERS ==================== */
.hdbuy-video-picker__item--sm {
    width: var(--size-80);
    height: var(--size-80);
    min-width: var(--size-80);
    min-height: var(--size-80);
}

.hdbuy-video-picker__item--md {
    width: var(--size-96);
    height: var(--size-96);
    min-width: var(--size-96);
    min-height: var(--size-96);
}

.hdbuy-video-picker__item--lg {
    width: 102px;
    height: 102px;
    min-width: 102px;
    min-height: 102px;
}

/* ==================== UPLOAD ICON ==================== */
.hdbuy-video-picker__upload-icon {
    width: var(--size-24);
    height: var(--size-24);
    color: var(--gray-600);
    stroke-width: 2;
    flex-shrink: 0;
}

.hdbuy-video-picker__item--sm .hdbuy-video-picker__upload-icon {
    width: var(--size-20);
    height: var(--size-20);
}

/* ==================== UPLOAD TEXT ==================== */
.hdbuy-video-picker__upload-text {
    font-size: var(--font-12);
    font-weight: 600;
    color: var(--gray-600);
}

.hdbuy-video-picker__item--md .hdbuy-video-picker__upload-text {
    font-size: var(--font-14);
}

/* ==================== INPUT ==================== */
.hdbuy-video-picker__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ==================== VIDEO PICKER - PREVIEW ==================== */
.hdbuy-video-picker__item--preview {
    overflow: hidden;
    border: var(--border-2) solid var(--gray-100);
    border-style: solid;
}

.hdbuy-video-picker__preview-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hdbuy-video-picker__remove-btn {
    position: absolute;
    top: var(--size-4);
    left: var(--size-6);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--size-8);
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--danger);
    cursor: pointer;
    transition: background-color, opacity 0.3s ease;
    opacity: 0.6;
}

.hdbuy-video-picker__item--sm .hdbuy-video-picker__remove-btn {
    width: var(--size-24);
    height: var(--size-24);
    border-radius: var(--size-4);
    top: var(--size-2);
    left: var(--size-4);
}

.hdbuy-video-picker__item--md .hdbuy-video-picker__remove-btn {
    width: var(--size-28);
    height: var(--size-28);
    border-radius: var(--size-6);
}

.hdbuy-video-picker__item--lg .hdbuy-video-picker__remove-btn {
    width: var(--size-32);
    height: var(--size-32);
    border-radius: var(--size-8);
}

@media (hover: hover) and (pointer: fine) {
    .hdbuy-video-picker__remove-btn:hover {
        background-color: var(--white);
        opacity: 1;
    }
}

@media (max-width: 1024.98px) {
    .hdbuy-video-picker__remove-btn {
        opacity: 1;
    }
}

/* ==================== VIDEO PLAYER (گلوبال) ==================== */
.hdbuy-video__player {
    display: block;
    width: 100%;
    height: 100%;
}


.hdbuy-calculator__counter {
    width: 100%;
    border-radius: var(--radius-8);
    overflow: hidden;
}

.hdbuy-calculator__counter-btn-lg {
    min-width: 32px;
    border: var(--border-2) solid var(--gray-200);
    min-height: 48px;
    background-color: var(--gray-050);
    display: flex;
}

.hdbuy-calculator__counter-btn-md {
    min-width: 32px;
    min-height: 40px;
    border: var(--border-2) solid var(--gray-200);
    background-color: var(--gray-050);
    display: flex;
}

.hdbuy-calculator__counter-btn-lg:first-child,
.hdbuy-calculator__counter-btn-md:first-child {
    border-left: none;
}

.hdbuy-calculator__counter-btn-lg:last-child,
.hdbuy-calculator__counter-btn-md:last-child {
    border-right: none;
}

.hdbuy-calculator__counter-input {
    width: 100%;
    padding: 0;
}

.hdbuy-calculator__counter-input div {
    border-radius: 0 !important;
}

.hdbuy-checkbox-label {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    background: none;
    border: none;
    outline: none;
}

.hdbuy-checkbox-label input[type="checkbox"],
.hdbuy-checkbox-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
}

.hdbuy-custom-checkbox-mark {
    width: 22px;
    height: 22px;
    border: var(--border-2) solid var(--gray-600);
    border-radius: 50%;
    margin-left: var(--size-8);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.hdbuy-checkbox-label input[type="checkbox"]:checked ~ .hdbuy-custom-checkbox-mark,
.hdbuy-checkbox-label input[type="radio"]:checked ~ .hdbuy-custom-checkbox-mark {
    border: var(--border-2) solid var(--color-active-item);
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--color-active-item);
}


.hdbuy-date-picker {
    display: flex;
    flex-direction: column;
}

.hdbuy-date-picker__date {
    display: flex;
    justify-content: space-between;
}

.hdbuy-date-picker__date .hdbuy-input__input {
    width: 100%;
    min-width: unset;
}

.hdbuy-date-picker__date .hdbuy-input__title {
    font-size: var(--font-14);
}

.hdbuy-date-picker-input {
    padding-bottom: 0 !important;
}

.hdbuy-date-picker-input * {
    cursor: pointer;
}

.hdbuy-date-picker__time-inputs {
    display: flex;
}

.hdbuy-date-picker__time-inputs > *:nth-child(2n) {
    padding-right: var(--size-16);
}

.hdbuy-date-picker__input {
    padding-bottom: 0 !important;
}

.hdbuy-date-picker__input .hdbuy-input__input {
    width: 42px;
    min-width: 42px;
    padding: 0 !important;
}

@media (max-width: 1023.98px) {
    .hdbuy-date-picker__input .hdbuy-input__input {
        width: 37px;
        min-width: 37px;
    }
}

@media (min-width: 1024px) {
    .hdbuy-date-picker__input .hdbuy-input__input {
        width: 66px;
        min-width: 66px;
    }
}

.hdbuy-date-picker__input .hdbuy-input__title {
    font-size: var(--font-14);
}


.hdbuy-image-upload__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* المان‌های فرم عمومی */
.hdbuy-fieldset {
    border: none;
    padding: 0;
    min-inline-size: auto;
}

.hdbuy-legend {
    margin: 0;
    padding: 0;
}

/* Input Containers */
.hdbuy-input-basic {
    padding-bottom: 28px;
    width: 100%;
}

/* استایل پایه کانتینر اینپوت */
.hdbuy-input-basic .hdbuy-input__container {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;
    background-color: var(--white);
    padding: 0 12px;
    padding: 0 var(--size-12);
    height: 48px;
    border-radius: 8px;
    border-radius: var(--radius-8);
    border: 2px solid #cfced3;
    border: 2px solid var(--gray-200);
    transition: all .1s ease-in-out;
}

.hdbuy-input-basic .hdbuy-input__container:focus-within {
    border-color: var(--color-activ-aitem);
    box-shadow: 0 0 0 3px var(--color-primary-200);
}

/* استایل پایه فیلد ورودی */
.hdbuy-input-basic .hdbuy-input__input {
    border: none !important;
    outline: none !important;
    padding: 0 8px !important;
    padding: 0 var(--size-8) !important;
    margin: 0 !important;
    background-color: initial;
    border-radius: inherit;
    height: auto;
    line-height: 28px;
    caret-color: var(--primary);
    font-weight: 600;
    font-size: 16px;
    font-size: var(--font-16);
    color: #0d0c22;
    color: var(--black);
    min-width: 80px;
    max-width: unset;
    flex-grow: 1;
    width: 0;
    resize: none;
}

.hdbuy-input-basic .hdbuy-input__input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.hdbuy-input-basic .hdbuy-input__input::placeholder {
    font-weight: 500;
    color: var(--gray-400);
    font-weight: 400;
}

.hdbuy-input__label {
    color: var(--gray-400);
    line-height: 48px;
    white-space: nowrap;
    overflow: hidden;
}

/* Input Header & Title */
.hdbuy-input-header {
    display: flex;
    align-items: center;
}

.hdbuy-input__title {
    font-weight: 500;
    color: #0d0c22;
    color: var(--black);
    line-height: 22px;
    margin: 0 0 8px;
    margin: 0 0 var(--size-8);
}

.hdbuy-input-has-title + .hdbuy-input-has-title {
    margin-top: 24px;
}

.hdbuy-input-is-required .hdbuy-input__title::after {
    content: "*";
    color: var(--color-active-item);
    display: inline-block;
}

/* Input Captions */
.hdbuy-input__caption {
    display: flex;
    align-items: center;
    color: #9e9ea7;
    color: var(--gray-400);
    margin: 8px 0 0;
    margin: var(--size-8) 0 0;
    line-height: 20px;
    font-size: 12px;
    font-size: var(--font-12);
}

.hdbuy-input__caption--reserve {
    position: absolute;
    top: 100%;
    right: 0;
}

@media (max-width: 1023.98px) {
    .hdbuy-input__caption {
        line-height: 18px;
    }
}

.hdbuy-input-counter {
    color: var(--gray-400);
    margin: 0 auto 8px 0;
    line-height: 20px;
    font-size: var(--font-12);
    font-weight: 500;
    min-height: 20px;
}

@media (max-width: 1023.98px) {
    .hdbuy-input-counter {
        line-height: 18px;
    }
}

/* Reserve caption height */
.hdbuy-input--reserve-caption-height {
    padding-bottom: var(--size-28);
}

.hdbuy-input--no-reserve {
    padding-bottom: 0;
}

/* Suffix */
.hdbuy-input-suffix {
    color: var(--gray-400);
    white-space: nowrap;
}

.hdbuy-input-suffix i,
.hdbuy-input-suffix svg {
    font-size: 24px;
    vertical-align: middle;
    line-height: 48px;
    cursor: pointer;
}

@media (max-width: 1023.98px) {
    .hdbuy-input-suffix i,
    .hdbuy-input-suffix svg {
        font-size: var(--font-22);
        line-height: 48px;
    }
}

.hdbuy-input--size-lg .hdbuy-input-suffix i,
.hdbuy-input--size-lg .hdbuy-input-suffix svg {
    line-height: 56px;
}

.hdbuy-input--size-md .hdbuy-input-suffix i,
.hdbuy-input--size-md .hdbuy-input-suffix svg {
    line-height: 48px;
}

/* Action Button */
.hdbuy-input-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: var(--size-4);
    cursor: pointer;
    color: var(--color-primary-500);
    border-radius: var(--radius-6);
    flex-shrink: 0;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.35s ease;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-input-action-btn:hover {
        color: var(--primary);
        background-color: var(--color-primary-100);
    }
}

.hdbuy-input-action-btn:active {
    transform: scale(0.9);
}

.hdbuy-input-action-btn.is-spinning svg {
    animation: hdbuy-spin 0.5s ease-in-out;
}

@keyframes hdbuy-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Input icons (sizes) */
.hdbuy-input__container-xs .hdbuy-inp__icon {
    font-size: 12px;
}
.hdbuy-input__container-sm .hdbuy-inp__icon {
    font-size: 16px;
}
.hdbuy-input__container-md .hdbuy-inp__icon {
    font-size: 20px;
}
.hdbuy-input__container-lg .hdbuy-inp__icon {
    font-size: 24px;
}

/* SM */
.hdbuy-input--size-sm .hdbuy-input__container {
    height: 40px;
    border-radius: var(--radius-6);
}

.hdbuy-input--size-sm .hdbuy-input__input {
    line-height: 24px;
}

.hdbuy-input--size-sm .hdbuy-input__caption {
    font-size: var(--font-10);
    line-height: 18px;
    margin-top: 6px;
}

/* MD */
.hdbuy-input--size-md .hdbuy-input__container {
    height: 48px;
    border-radius: var(--radius-6);
}

/* LG */
.hdbuy-input--size-lg .hdbuy-input__container {
    height: 56px;
    border-radius: var(--radius-8);
}

.hdbuy-input--size-lg .hdbuy-input__input {
    line-height: 32px;
}

.hdbuy-input--size-lg .hdbuy-input__caption {
    font-size: var(--font-12);
    line-height: 20px;
}

.hdbuy-input--size-lg .hdbuy-input__title {
    font-size: var(--font-16);
    line-height: 26px;
}

/* Error States */
.hdbuy-input--has-error .hdbuy-input__caption {
    color: var(--danger);
}

.hdbuy-input--has-error .hdbuy-input__input {
    color: var(--danger);
}

.hdbuy-input--has-error .hdbuy-input__title {
    color: var(--danger);
}

.hdbuy-input--has-error .hdbuy-input__title::after {
    color: var(--danger);
}

.hdbuy-input--has-error .hdbuy-input__container {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px var(--danger-200) !important;
}

.hdbuy-input--has-error .hdbuy-input-action-btn {
    color: var(--danger);
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hdbuy-input--has-error .hdbuy-input-action-btn:hover {
        color: var(--danger-700);
        background-color: var(--danger-100);
    }
}

.hdbuy-input--has-error .hdbuy-input-action-btn:active {
    color: var(--danger-800);
}

.hdbuy-input--is-error-float {
    padding-bottom: var(--size-32);
}

.hdbuy-input--is-error-float.hdbuy-input--has-error {
    padding-bottom: var(--size-52);
}

.hdbuy-input--is-error-float--compact.hdbuy-input--has-error {
    padding-bottom: 40px;
}

@media (max-width: 1023.98px) {
    .hdbuy-input--is-error-float--compact.hdbuy-input--has-error {
        padding-bottom: 32px;
    }
}

/* کپشن راهنما: فقط وقتی خطا وجود ندارد */
.hdbuy-input-basic:not(.hdbuy-input--has-error) .help-caption {
    display: block;
}

/* کپشن خطا: فقط وقتی خطا وجود دارد */
.hdbuy-input-basic.hdbuy-input--has-error .error-caption {
    display: block !important;
}

/* کپشن راهنما در حالت خطا مخفی شود */
.hdbuy-input-basic.hdbuy-input--has-error .help-caption {
    display: none !important;
}

/* Disabled */
.hdbuy-input--disabled {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.hdbuy-input--disabled .hdbuy-input__container {
    background-color: var(--gray-050);
    border-color: var(--gray-100);
}

.hdbuy-input--disabled .hdbuy-input__input {
    color: var(--gray-500);
    cursor: not-allowed;
}

.hdbuy-input--disabled .hdbuy-input__title {
    color: var(--gray-400);
}

.hdbuy-input--disabled .hdbuy-input__label {
    color: var(--gray-400);
}

.hdbuy-input--disabled .hdbuy-input-suffix {
    color: var(--gray-400);
}

/* Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected,
input:-internal-autofill-previewed {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s;
    background-color: transparent !important;
}

/* Password reveal hide */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-clear-button,
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-textfield-decoration-container,
input[type="password"]::-webkit-password-toggle {
    display: none !important;
}


/* Multiline */
.hdbuy-input--is-multiline .hdbuy-input__container {
    height: auto !important;
    align-items: stretch;
}

.hdbuy-input--is-multiline .hdbuy-input__input {
    line-height: 24px !important;
    padding-top: var(--size-12) !important;
    padding-bottom: var(--size-8) !important;
}

/* Fluid */
.hdbuy-input--fluid .hdbuy-input__input {
    min-width: 0;
}

/* Centered */
.hdbuy-container--txt-centered.hdbuy-input__input {
    text-align: center;
    letter-spacing: 0.5em;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 1023.98px) {
    .hdbuy-container--txt-centered.hdbuy-input__input {
        letter-spacing: 0.4em;
    }
}

.hdbuy-container--txt-centered::placeholder {
    text-align: right;
}

/* Align */
.hdbuy-input--align-right .hdbuy-input__input {
    text-align: right;
}

.hdbuy-input--align-left .hdbuy-input__input {
    text-align: left;
}

/* Direction */
.hdbuy-input--dir-ltr .hdbuy-input__input {
    direction: ltr;
}

.hdbuy-otp-timer {
    display: flex;
    align-items: center;
    color: var(--gray-400);
    padding-right: var(--size-8);
    border-right: 1px solid var(--gray-200);
    white-space: nowrap;
}

.hdbuy-otp-timer__digits {
    min-width: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.hdbuy-password-strength {
    margin-top: var(--size-16);
    margin-bottom: var(--size-16);
}

.hdbuy-password-strength__label {
    min-height: 20px;
    font-weight: 500;
    margin-bottom: var(--size-4);
}

.hdbuy-password-strength__label--weak { color: var(--danger); }
.hdbuy-password-strength__label--medium { color: var(--warning-500); }
.hdbuy-password-strength__label--strong { color: var(--success); }

.hdbuy-password-strength__lines {
    display: flex;
    gap: var(--size-4);
}

.hdbuy-password-strength__line {
    flex: 1;
    height: 4px;
    background-color: var(--gray-200);
    border-radius: var(--radius-3);
    transition: background-color 0.3s ease;
}

.hdbuy-password-strength__line--weak { background-color: var(--danger); }
.hdbuy-password-strength__line--medium { background-color: var(--warning-500); }
.hdbuy-password-strength__line--strong { background-color: var(--success); }

.hdbuy-password-strength__requirements {
    list-style: none;
    padding: 0;
    margin: var(--size-8) 0 0;
}

.hdbuy-password-strength__req {
    display: list-item;
    list-style: disc inside;
    color: var(--gray-500);
    transition: color 0.3s ease, opacity 0.3s ease;
    margin-bottom: var(--size-2);
}

.hdbuy-password-strength__req--met {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* ---- WRAPPER ---- */
.hdbuy-select {
    position: relative;
}

/* ---- TRIGGER ---- */
.hdbuy-select__trigger {
    cursor: pointer;
}

.hdbuy-select__trigger .hdbuy-input__input {
    cursor: pointer;
    caret-color: transparent;
}

.hdbuy-select--disabled .hdbuy-select__trigger {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.hdbuy-select__dropdown-item--checked .hdbuy-radio__label {
    color: var(--primary);
    font-weight: 700;
}

/* ---- STATE: LOADING ---- */
.hdbuy-select__loading {
    text-align: center;
    padding: var(--size-24) 0;
    font-size: var(--font-14);
    color: var(--gray-500);
}

.hdbuy-select__loading-text {
    margin-top: var(--size-16);
}

/* ---- STATE: EMPTY ---- */
.hdbuy-select__empty {
    text-align: center;
    padding: var(--size-52) 0;
    color: var(--gray-400);
    font-size: var(--font-14);
}

/* ---- FILTER INPUT ---- */
.hdbuy-select__filter {
    position: sticky;
    top: 0;
    background: var(--white);
    padding: var(--size-16) 0;
    z-index: 2;
}

/* ---- FOOTER ---- */
.hdbuy-select__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hdbuy-select__footer button + button {
    margin-right: var(--size-16);
}

/* ---- CHIPS ---- */
.hdbuy-select__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-4);
}

.hdbuy-select__chip {
    margin-left: 0;
}

.hdbuy-select__wrapper .hdbuy-input__container label,
.hdbuy-select__wrapper .hdbuy-input__container input {
    cursor: pointer;
}

.hdbuy-select__wrapper--disabled .hdbuy-input__container label,
.hdbuy-select__wrapper--disabled .hdbuy-input__container input {
    cursor: default;
}

/* =========================
   HDBUY GRID SYSTEM
   CSS Grid - Professional
   ========================= */

/* Container */
.hdbuy-layout {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
    box-sizing: border-box;
}

@media (min-width: 576px) {
    .hdbuy-layout {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .hdbuy-layout {
        max-width: 720px;
    }
}

@media (min-width: 1024px) {
    .hdbuy-layout {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .hdbuy-layout {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .hdbuy-layout {
        max-width: 1320px;
    }
}

/* =========================
   Grid Row - بهینه شده
   ========================= */

/* Row */
.hdbuy-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    box-sizing: border-box;
    min-width: 0;
    column-gap: 16px;
}

/* Gutter (padding-inline) */
.hdbuy-row--no-gutter   { padding-inline: 0; }
.hdbuy-row--gutter-8    { padding-inline: 8px; }
.hdbuy-row--gutter-16   { padding-inline: 16px; }
.hdbuy-row--gutter-24   { padding-inline: 24px; }

/* Column gap */
.hdbuy-row--col-gap-0   { column-gap: 0; }
.hdbuy-row--col-gap-8   { column-gap: 8px; }
.hdbuy-row--col-gap-16  { column-gap: 16px; }
.hdbuy-row--col-gap-24  { column-gap: 24px; }

/* Col - فقط span */
.hdbuy-col,
[class*="hdbuy-col-"] {
    box-sizing: border-box;
    min-width: 0;
}

/* Default: full width on mobile */
.hdbuy-col {
    grid-column: span 12;
}

/* Auto-fit helper */
.hdbuy-col-auto {
    grid-column: auto;
}
/* =========================
   Column span 1..12
   ========================= */

.hdbuy-col-1  { grid-column: span 1; }
.hdbuy-col-2  { grid-column: span 2; }
.hdbuy-col-3  { grid-column: span 3; }
.hdbuy-col-4  { grid-column: span 4; }
.hdbuy-col-5  { grid-column: span 5; }
.hdbuy-col-6  { grid-column: span 6; }
.hdbuy-col-7  { grid-column: span 7; }
.hdbuy-col-8  { grid-column: span 8; }
.hdbuy-col-9  { grid-column: span 9; }
.hdbuy-col-10 { grid-column: span 10; }
.hdbuy-col-11 { grid-column: span 11; }
.hdbuy-col-12 { grid-column: span 12; }

/* =========================
   Start positions
   ========================= */

.hdbuy-start-1  { grid-column-start: 1; }
.hdbuy-start-2  { grid-column-start: 2; }
.hdbuy-start-3  { grid-column-start: 3; }
.hdbuy-start-4  { grid-column-start: 4; }
.hdbuy-start-5  { grid-column-start: 5; }
.hdbuy-start-6  { grid-column-start: 6; }
.hdbuy-start-7  { grid-column-start: 7; }
.hdbuy-start-8  { grid-column-start: 8; }
.hdbuy-start-9  { grid-column-start: 9; }
.hdbuy-start-10 { grid-column-start: 10; }
.hdbuy-start-11 { grid-column-start: 11; }
.hdbuy-start-12 { grid-column-start: 12; }

/* =========================
   Row span
   ========================= */

.hdbuy-row-span-1 { grid-row: span 1; }
.hdbuy-row-span-2 { grid-row: span 2; }
.hdbuy-row-span-3 { grid-row: span 3; }
.hdbuy-row-span-4 { grid-row: span 4; }
.hdbuy-row-span-5 { grid-row: span 5; }
.hdbuy-row-span-6 { grid-row: span 6; }

/* =========================
   Responsive breakpoints
   sm: 480px
   sm_up: 576px
   md: 768px
   lg: 1024px
   xl: 1200px
   xxl: 1400px
   ========================= */

/* SM */
@media (min-width: 480px) {
    .hdbuy-col-sm-1  { grid-column: span 1; }
    .hdbuy-col-sm-2  { grid-column: span 2; }
    .hdbuy-col-sm-3  { grid-column: span 3; }
    .hdbuy-col-sm-4  { grid-column: span 4; }
    .hdbuy-col-sm-5  { grid-column: span 5; }
    .hdbuy-col-sm-6  { grid-column: span 6; }
    .hdbuy-col-sm-7  { grid-column: span 7; }
    .hdbuy-col-sm-8  { grid-column: span 8; }
    .hdbuy-col-sm-9  { grid-column: span 9; }
    .hdbuy-col-sm-10 { grid-column: span 10; }
    .hdbuy-col-sm-11 { grid-column: span 11; }
    .hdbuy-col-sm-12 { grid-column: span 12; }

    .hdbuy-start-sm-1  { grid-column-start: 1; }
    .hdbuy-start-sm-2  { grid-column-start: 2; }
    .hdbuy-start-sm-3  { grid-column-start: 3; }
    .hdbuy-start-sm-4  { grid-column-start: 4; }
    .hdbuy-start-sm-5  { grid-column-start: 5; }
    .hdbuy-start-sm-6  { grid-column-start: 6; }
    .hdbuy-start-sm-7  { grid-column-start: 7; }
    .hdbuy-start-sm-8  { grid-column-start: 8; }
    .hdbuy-start-sm-9  { grid-column-start: 9; }
    .hdbuy-start-sm-10 { grid-column-start: 10; }
    .hdbuy-start-sm-11 { grid-column-start: 11; }
    .hdbuy-start-sm-12 { grid-column-start: 12; }
}

/* SM_UP */
@media (min-width: 576px) {
    .hdbuy-col-sm_up-1  { grid-column: span 1; }
    .hdbuy-col-sm_up-2  { grid-column: span 2; }
    .hdbuy-col-sm_up-3  { grid-column: span 3; }
    .hdbuy-col-sm_up-4  { grid-column: span 4; }
    .hdbuy-col-sm_up-5  { grid-column: span 5; }
    .hdbuy-col-sm_up-6  { grid-column: span 6; }
    .hdbuy-col-sm_up-7  { grid-column: span 7; }
    .hdbuy-col-sm_up-8  { grid-column: span 8; }
    .hdbuy-col-sm_up-9  { grid-column: span 9; }
    .hdbuy-col-sm_up-10 { grid-column: span 10; }
    .hdbuy-col-sm_up-11 { grid-column: span 11; }
    .hdbuy-col-sm_up-12 { grid-column: span 12; }

    .hdbuy-start-sm_up-1  { grid-column-start: 1; }
    .hdbuy-start-sm_up-2  { grid-column-start: 2; }
    .hdbuy-start-sm_up-3  { grid-column-start: 3; }
    .hdbuy-start-sm_up-4  { grid-column-start: 4; }
    .hdbuy-start-sm_up-5  { grid-column-start: 5; }
    .hdbuy-start-sm_up-6  { grid-column-start: 6; }
    .hdbuy-start-sm_up-7  { grid-column-start: 7; }
    .hdbuy-start-sm_up-8  { grid-column-start: 8; }
    .hdbuy-start-sm_up-9  { grid-column-start: 9; }
    .hdbuy-start-sm_up-10 { grid-column-start: 10; }
    .hdbuy-start-sm_up-11 { grid-column-start: 11; }
    .hdbuy-start-sm_up-12 { grid-column-start: 12; }
}

/* MD */
@media (min-width: 768px) {
    .hdbuy-col-md-1  { grid-column: span 1; }
    .hdbuy-col-md-2  { grid-column: span 2; }
    .hdbuy-col-md-3  { grid-column: span 3; }
    .hdbuy-col-md-4  { grid-column: span 4; }
    .hdbuy-col-md-5  { grid-column: span 5; }
    .hdbuy-col-md-6  { grid-column: span 6; }
    .hdbuy-col-md-7  { grid-column: span 7; }
    .hdbuy-col-md-8  { grid-column: span 8; }
    .hdbuy-col-md-9  { grid-column: span 9; }
    .hdbuy-col-md-10 { grid-column: span 10; }
    .hdbuy-col-md-11 { grid-column: span 11; }
    .hdbuy-col-md-12 { grid-column: span 12; }

    .hdbuy-start-md-1  { grid-column-start: 1; }
    .hdbuy-start-md-2  { grid-column-start: 2; }
    .hdbuy-start-md-3  { grid-column-start: 3; }
    .hdbuy-start-md-4  { grid-column-start: 4; }
    .hdbuy-start-md-5  { grid-column-start: 5; }
    .hdbuy-start-md-6  { grid-column-start: 6; }
    .hdbuy-start-md-7  { grid-column-start: 7; }
    .hdbuy-start-md-8  { grid-column-start: 8; }
    .hdbuy-start-md-9  { grid-column-start: 9; }
    .hdbuy-start-md-10 { grid-column-start: 10; }
    .hdbuy-start-md-11 { grid-column-start: 11; }
    .hdbuy-start-md-12 { grid-column-start: 12; }
}

/* LG */
@media (min-width: 1024px) {
    .hdbuy-col-lg-1  { grid-column: span 1; }
    .hdbuy-col-lg-2  { grid-column: span 2; }
    .hdbuy-col-lg-3  { grid-column: span 3; }
    .hdbuy-col-lg-4  { grid-column: span 4; }
    .hdbuy-col-lg-5  { grid-column: span 5; }
    .hdbuy-col-lg-6  { grid-column: span 6; }
    .hdbuy-col-lg-7  { grid-column: span 7; }
    .hdbuy-col-lg-8  { grid-column: span 8; }
    .hdbuy-col-lg-9  { grid-column: span 9; }
    .hdbuy-col-lg-10 { grid-column: span 10; }
    .hdbuy-col-lg-11 { grid-column: span 11; }
    .hdbuy-col-lg-12 { grid-column: span 12; }

    .hdbuy-start-lg-1  { grid-column-start: 1; }
    .hdbuy-start-lg-2  { grid-column-start: 2; }
    .hdbuy-start-lg-3  { grid-column-start: 3; }
    .hdbuy-start-lg-4  { grid-column-start: 4; }
    .hdbuy-start-lg-5  { grid-column-start: 5; }
    .hdbuy-start-lg-6  { grid-column-start: 6; }
    .hdbuy-start-lg-7  { grid-column-start: 7; }
    .hdbuy-start-lg-8  { grid-column-start: 8; }
    .hdbuy-start-lg-9  { grid-column-start: 9; }
    .hdbuy-start-lg-10 { grid-column-start: 10; }
    .hdbuy-start-lg-11 { grid-column-start: 11; }
    .hdbuy-start-lg-12 { grid-column-start: 12; }
}

/* XL */
@media (min-width: 1200px) {
    .hdbuy-col-xl-1  { grid-column: span 1; }
    .hdbuy-col-xl-2  { grid-column: span 2; }
    .hdbuy-col-xl-3  { grid-column: span 3; }
    .hdbuy-col-xl-4  { grid-column: span 4; }
    .hdbuy-col-xl-5  { grid-column: span 5; }
    .hdbuy-col-xl-6  { grid-column: span 6; }
    .hdbuy-col-xl-7  { grid-column: span 7; }
    .hdbuy-col-xl-8  { grid-column: span 8; }
    .hdbuy-col-xl-9  { grid-column: span 9; }
    .hdbuy-col-xl-10 { grid-column: span 10; }
    .hdbuy-col-xl-11 { grid-column: span 11; }
    .hdbuy-col-xl-12 { grid-column: span 12; }

    .hdbuy-start-xl-1  { grid-column-start: 1; }
    .hdbuy-start-xl-2  { grid-column-start: 2; }
    .hdbuy-start-xl-3  { grid-column-start: 3; }
    .hdbuy-start-xl-4  { grid-column-start: 4; }
    .hdbuy-start-xl-5  { grid-column-start: 5; }
    .hdbuy-start-xl-6  { grid-column-start: 6; }
    .hdbuy-start-xl-7  { grid-column-start: 7; }
    .hdbuy-start-xl-8  { grid-column-start: 8; }
    .hdbuy-start-xl-9  { grid-column-start: 9; }
    .hdbuy-start-xl-10 { grid-column-start: 10; }
    .hdbuy-start-xl-11 { grid-column-start: 11; }
    .hdbuy-start-xl-12 { grid-column-start: 12; }
}

/* XXL */
@media (min-width: 1400px) {
    .hdbuy-col-xxl-1  { grid-column: span 1; }
    .hdbuy-col-xxl-2  { grid-column: span 2; }
    .hdbuy-col-xxl-3  { grid-column: span 3; }
    .hdbuy-col-xxl-4  { grid-column: span 4; }
    .hdbuy-col-xxl-5  { grid-column: span 5; }
    .hdbuy-col-xxl-6  { grid-column: span 6; }
    .hdbuy-col-xxl-7  { grid-column: span 7; }
    .hdbuy-col-xxl-8  { grid-column: span 8; }
    .hdbuy-col-xxl-9  { grid-column: span 9; }
    .hdbuy-col-xxl-10 { grid-column: span 10; }
    .hdbuy-col-xxl-11 { grid-column: span 11; }
    .hdbuy-col-xxl-12 { grid-column: span 12; }

    .hdbuy-start-xxl-1  { grid-column-start: 1; }
    .hdbuy-start-xxl-2  { grid-column-start: 2; }
    .hdbuy-start-xxl-3  { grid-column-start: 3; }
    .hdbuy-start-xxl-4  { grid-column-start: 4; }
    .hdbuy-start-xxl-5  { grid-column-start: 5; }
    .hdbuy-start-xxl-6  { grid-column-start: 6; }
    .hdbuy-start-xxl-7  { grid-column-start: 7; }
    .hdbuy-start-xxl-8  { grid-column-start: 8; }
    .hdbuy-start-xxl-9  { grid-column-start: 9; }
    .hdbuy-start-xxl-10 { grid-column-start: 10; }
    .hdbuy-start-xxl-11 { grid-column-start: 11; }
    .hdbuy-start-xxl-12 { grid-column-start: 12; }
}

/* =========================
   Gap Utilities
   ========================= */


/* Row gap */
.hdbuy-row-gap-0  { row-gap: 0; }
.hdbuy-row-gap-8  { row-gap: 8px; }
.hdbuy-row-gap-16 { row-gap: 16px; }
.hdbuy-row-gap-24 { row-gap: 24px; }

/* Column gap */
.hdbuy-col-gap-0  { column-gap: 0; }
.hdbuy-col-gap-8  { column-gap: 8px; }
.hdbuy-col-gap-16 { column-gap: 16px; }
.hdbuy-col-gap-24 { column-gap: 24px; }

/* =========================
   Alignment Utilities
   ========================= */

.hdbuy-items-start   { align-items: start; }
.hdbuy-items-center  { align-items: center; }
.hdbuy-items-end     { align-items: end; }
.hdbuy-items-stretch { align-items: stretch; }

.hdbuy-justify-start   { justify-items: start; }
.hdbuy-justify-center  { justify-items: center; }
.hdbuy-justify-end     { justify-items: end; }
.hdbuy-justify-stretch { justify-items: stretch; }

.hdbuy-content-start   { align-content: start; }
.hdbuy-content-center  { align-content: center; }
.hdbuy-content-end     { align-content: end; }
.hdbuy-content-between { align-content: space-between; }

.hdbuy-self-start   { align-self: start; }
.hdbuy-self-center  { align-self: center; }
.hdbuy-self-end     { align-self: end; }
.hdbuy-self-stretch { align-self: stretch; }

/* =========================
   Auto grid helpers
   ========================= */

.hdbuy-grid-auto-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hdbuy-grid-auto-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hdbuy-grid-auto-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hdbuy-grid-auto-fit-200 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.hdbuy-grid-auto-fit-250 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.hdbuy-grid-auto-fit-300 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


.hdbuy-sticky {
    position: sticky;
    transition: all .5s;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.hdbuy-sticky::-webkit-scrollbar {
    display: none
}
/* Dividers */
.hdbuy-divider-t { border-top: var(--border-1) solid var(--gray-100); }
.hdbuy-divider-t-2 { border-top: var(--border-2) solid var(--gray-100); }
.hdbuy-divider-b { border-bottom: var(--border-1) solid var(--gray-100); }
.hdbuy-divider-b-2 { border-bottom: var(--border-2) solid var(--gray-100); }
.hdbuy-divider-r { border-right: var(--border-1) solid var(--gray-100); }
.hdbuy-divider-l { border-left: var(--border-1) solid var(--gray-100); }
.hdbuy-divider-t-200 { border-top: var(--border-1) solid var(--gray-200); }
.hdbuy-divider-b-200 { border-bottom: var(--border-1) solid var(--gray-200); }
.hdbuy-divider-t-300 { border-top: var(--border-1) solid var(--gray-300); }
.hdbuy-divider-b-300 { border-bottom: var(--border-1) solid var(--gray-300); }

/* List Dividers */
.hdbuy-list-vertical-br-no-pad + .hdbuy-list-vertical-br-no-pad { border-top: 1px solid var(--gray-100); }
.hdbuy-list-vertical-br-no-pad-200 + .hdbuy-list-vertical-br-no-pad-200 { border-top: 1px solid var(--gray-200); }
.hdbuy-list-vertical-br-no-pad-300 + .hdbuy-list-vertical-br-no-pad-300 { border-top: 1px solid var(--gray-300); }

.hdbuy-list-vertical-br + .hdbuy-list-vertical-br { border-top: 1px solid var(--gray-100); padding-top: var(--size-8); margin-top: var(--size-8); }
.hdbuy-list-vertical-br-200 + .hdbuy-list-vertical-br-200 { border-top: 1px solid var(--gray-200); padding-top: var(--size-8); margin-top: var(--size-8); }
.hdbuy-list-vertical-br-300 + .hdbuy-list-vertical-br-300 { border-top: 1px solid var(--gray-300); padding-top: var(--size-8); margin-top: var(--size-8); }

.hdbuy-list-vertical-br-0 + .hdbuy-list-vertical-br-0 { border-top: 1px solid var(--gray-100); }
.hdbuy-list-vertical-br-0-200 + .hdbuy-list-vertical-br-0-200 { border-top: 1px solid var(--gray-200); }
.hdbuy-list-vertical-br-0-300 + .hdbuy-list-vertical-br-0-300 { border-top: 1px solid var(--gray-300); }

.hdbuy-list-horizontal-br + .hdbuy-list-horizontal-br { border-right: 1px solid var(--gray-100); padding-right: var(--size-8); margin-right: var(--size-8); }
.hdbuy-list-horizontal-br-200 + .hdbuy-list-horizontal-br-200 { border-right: 1px solid var(--gray-200); padding-right: var(--size-8); margin-right: var(--size-8); }
.hdbuy-list-horizontal-br-300 + .hdbuy-list-horizontal-br-300 { border-right: 1px solid var(--gray-300); padding-right: var(--size-8); margin-right: var(--size-8); }

.hdbuy-list-horizontal-br-0 + .hdbuy-list-horizontal-br-0 { border-right: 1px solid var(--gray-100); }
.hdbuy-list-horizontal-br-0-200 + .hdbuy-list-horizontal-br-0-200 { border-right: 1px solid var(--gray-200); }
.hdbuy-list-horizontal-br-0-300 + .hdbuy-list-horizontal-br-0-300 { border-right: 1px solid var(--gray-300); }

.hdbuy-bg-white { background-color: var(--white); }
.\!hdbuy-bg-white { background-color: var(--white) !important; }


/* Gray Text */
.gray-025 { color: var(--gray-025); }
.gray-050 { color: var(--gray-050); }
.gray-100 { color: var(--gray-100); }
.gray-200 { color: var(--gray-200); }
.gray-300 { color: var(--gray-300); }
.gray-400 { color: var(--gray-400); }
.gray-500 { color: var(--gray-500); }
.gray-600 { color: var(--gray-600); }
.gray-700 { color: var(--gray-700); }
.gray-800 { color: var(--gray-800); }
.gray-900 { color: var(--gray-900); }
.hdbuy-color-black { color: var(--black); }

.\!gray-025 { color: var(--gray-025) !important; }
.\!gray-050 { color: var(--gray-050) !important; }
.\!gray-100 { color: var(--gray-100) !important; }
.\!gray-200 { color: var(--gray-200) !important; }
.\!gray-300 { color: var(--gray-300) !important; }
.\!gray-400 { color: var(--gray-400) !important; }
.\!gray-500 { color: var(--gray-500) !important; }
.\!gray-600 { color: var(--gray-600) !important; }
.\!gray-700 { color: var(--gray-700) !important; }
.\!gray-800 { color: var(--gray-800) !important; }
.\!gray-900 { color: var(--gray-900) !important; }

/* Gray Background */
.bg-gray-025 { background-color: var(--gray-025) !important; }
.bg-gray-050 { background-color: var(--gray-050) !important; }
.bg-gray-100 { background-color: var(--gray-100) !important; }
.bg-gray-200 { background-color: var(--gray-200) !important; }
.bg-gray-300 { background-color: var(--gray-300) !important; }
.bg-gray-400 { background-color: var(--gray-400) !important; }
.bg-gray-500 { background-color: var(--gray-500) !important; }
.bg-gray-600 { background-color: var(--gray-600) !important; }
.bg-gray-700 { background-color: var(--gray-700) !important; }
.bg-gray-800 { background-color: var(--gray-800) !important; }
.bg-gray-900 { background-color: var(--gray-900) !important; }

/* Primary */
.color-primary-300 { color: var(--color-primary-300) !important; }
.color-primary-500 { color: var(--color-primary-500) !important; }
.color-primary-700 { color: var(--color-primary-700) !important; }
.color-primary { color: var(--primary) !important; }
.bg-primary-300 { background-color: var(--color-primary-300) !important; }
.bg-primary-500 { background-color: var(--color-primary-500) !important; }
.bg-primary-700 { background-color: var(--color-primary-700) !important; }
.bg-primary { background-color: var(--primary) !important; }
.border-primary-300 { border-color: var(--color-primary-300) !important; }
.border-primary-500 { border-color: var(--color-primary-500) !important; }
.border-primary-700 { border-color: var(--color-primary-700) !important; }
.border-primary { border-color: var(--primary) !important; }

/* Secondary */
.text-secondary-025 { color: var(--color-secondary-025) !important; }
.text-secondary-050 { color: var(--color-secondary-050) !important; }
.text-secondary-100 { color: var(--color-secondary-100) !important; }
.text-secondary-200 { color: var(--color-secondary-200) !important; }
.text-secondary-300 { color: var(--color-secondary-300) !important; }
.text-secondary-400 { color: var(--color-secondary-400) !important; }
.text-secondary-500 { color: var(--color-secondary-500) !important; }
.text-secondary-600 { color: var(--color-secondary-600) !important; }
.text-secondary-700 { color: var(--color-secondary-700) !important; }
.text-secondary-800 { color: var(--color-secondary-800) !important; }
.text-secondary-900 { color: var(--color-secondary-900) !important; }

.bg-secondary-025 { background-color: var(--color-secondary-025) !important; }
.bg-secondary-050 { background-color: var(--color-secondary-050) !important; }
.bg-secondary-100 { background-color: var(--color-secondary-100) !important; }
.bg-secondary-200 { background-color: var(--color-secondary-200) !important; }
.bg-secondary-300 { background-color: var(--color-secondary-300) !important; }
.bg-secondary-400 { background-color: var(--color-secondary-400) !important; }
.bg-secondary-500 { background-color: var(--color-secondary-500) !important; }
.bg-secondary-600 { background-color: var(--color-secondary-600) !important; }
.bg-secondary-700 { background-color: var(--color-secondary-700) !important; }
.bg-secondary-800 { background-color: var(--color-secondary-800) !important; }
.bg-secondary-900 { background-color: var(--color-secondary-900) !important; }

.border-secondary-025 { border-color: var(--color-secondary-025) !important; }
.border-secondary-050 { border-color: var(--color-secondary-050) !important; }
.border-secondary-100 { border-color: var(--color-secondary-100) !important; }
.border-secondary-200 { border-color: var(--color-secondary-200) !important; }
.border-secondary-300 { border-color: var(--color-secondary-300) !important; }
.border-secondary-400 { border-color: var(--color-secondary-400) !important; }
.border-secondary-500 { border-color: var(--color-secondary-500) !important; }
.border-secondary-600 { border-color: var(--color-secondary-600) !important; }
.border-secondary-700 { border-color: var(--color-secondary-700) !important; }
.border-secondary-800 { border-color: var(--color-secondary-800) !important; }
.border-secondary-900 { border-color: var(--color-secondary-900) !important; }

/* Hover variants — Desktop Only */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hover\:text-primary-500:hover { color: var(--color-primary-500) !important; }
    .hover\:text-primary-700:hover { color: var(--color-primary-700) !important; }
    .hover\:text-primary:hover { color: var(--primary) !important; }
    .hover\:bg-primary-300:hover { background-color: var(--color-primary-300) !important; }
    .hover\:bg-primary-500:hover { background-color: var(--color-primary-500) !important; }
    .hover\:bg-primary-700:hover { background-color: var(--color-primary-700) !important; }
    .hover\:bg-primary:hover { background-color: var(--primary) !important; }
    .hover\:border-primary-500:hover { border-color: var(--color-primary-500) !important; }
    .hover\:border-primary-700:hover { border-color: var(--color-primary-700) !important; }
    .hover\:border-primary:hover { border-color: var(--primary) !important; }

    .hover\:text-secondary-500:hover { color: var(--color-secondary-500) !important; }
    .hover\:text-secondary-700:hover { color: var(--color-secondary-700) !important; }
    .hover\:bg-secondary-025:hover { background-color: var(--color-secondary-025) !important; }
    .hover\:bg-secondary-050:hover { background-color: var(--color-secondary-050) !important; }
    .hover\:bg-secondary-100:hover { background-color: var(--color-secondary-100) !important; }
    .hover\:bg-secondary-500:hover { background-color: var(--color-secondary-500) !important; }
    .hover\:bg-secondary-700:hover { background-color: var(--color-secondary-700) !important; }
    .hover\:border-secondary-500:hover { border-color: var(--color-secondary-500) !important; }
}

.hdbuy-cur-pointer { cursor: pointer; }

.hdbuy-block { display: block; }
.hdbuy-hidden { display: none; }
.hdbuy-block\! { display: block !important; }
.hdbuy-hidden\! { display: none !important; }

.hdbuy-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Flexbox Utilities */
.hdbuy-box-flex {
    display: flex;
}

.\!hdbuy-box-flex {
    display: flex !important;
}

.hdbuy-box-ai-center {
    align-items: center;
}

/* Justify Content */
.hdbuy-box-jc-start { justify-content: start; }
.hdbuy-box-jc-end { justify-content: end; }
.hdbuy-box-jc-center { justify-content: center; }
.hdbuy-box-jc-space-between { justify-content: space-between; }
.hdbuy-box-jc-space-around { justify-content: space-around; }
.hdbuy-box-jc-space-evenly { justify-content: space-evenly; }
.hdbuy-box-jc-flex-start { justify-content: flex-start; }
.hdbuy-box-jc-flex-end { justify-content: flex-end; }
.hdbuy-box-jc-stretch { justify-content: stretch; }
.hdbuy-box-jc-normal { justify-content: normal; }

/* Flex Direction */
.hdbuy-box-fd-col { flex-direction: column; }
.hdbuy-box-fd-row-reverse { flex-direction: row-reverse; }

/* Flex Grow / Shrink */
.hdbuy-grow { flex-grow: 1; }
.hdbuy-shrink-0 { flex-shrink: 0; }

/* Flex Wrap */
.hdbuy-wrap { flex-wrap: wrap; }
.hdbuy-wrap-reverse { flex-wrap: wrap-reverse; }
.hdbuy-nowrap { flex-wrap: nowrap; }
.\!hdbuy-wrap { flex-wrap: wrap !important; }
.\!hdbuy-wrap-reverse { flex-wrap: wrap-reverse !important; }
.\!hdbuy-nowrap { flex-wrap: nowrap !important; }


.hdbuy-float-start { float: inline-start; }
.hdbuy-float-end { float: inline-end; }
.hdbuy-float-left { float: left; }
.hdbuy-float-right { float: right; }
.hdbuy-float-none { float: none; }


.gap-0 { gap: var(--gap-0); }
.gap-1 { gap: var(--gap-1); }
.gap-2 { gap: var(--gap-2); }
.gap-3 { gap: var(--gap-3); }
.gap-4 { gap: var(--gap-4); }
.gap-5 { gap: var(--gap-5); }
.gap-6 { gap: var(--gap-6); }
.gap-8 { gap: var(--gap-8); }
.gap-10 { gap: var(--gap-10); }
.gap-12 { gap: var(--gap-12); }
.gap-16 { gap: var(--gap-16); }
.gap-20 { gap: var(--gap-20); }
.gap-24 { gap: var(--gap-24); }
.gap-32 { gap: var(--gap-32); }
.gap-40 { gap: var(--gap-40); }
.gap-48 { gap: var(--gap-48); }

[class*="gap-x-"] { display: flex; }
.gap-x-0 { column-gap: var(--gap-0); }
.gap-x-1 { column-gap: var(--gap-1); }
.gap-x-2 { column-gap: var(--gap-2); }
.gap-x-3 { column-gap: var(--gap-3); }
.gap-x-4 { column-gap: var(--gap-4); }
.gap-x-5 { column-gap: var(--gap-5); }
.gap-x-6 { column-gap: var(--gap-6); }
.gap-x-8 { column-gap: var(--gap-8); }
.gap-x-10 { column-gap: var(--gap-10); }
.gap-x-12 { column-gap: var(--gap-12); }
.gap-x-16 { column-gap: var(--gap-16); }
.gap-x-20 { column-gap: var(--gap-20); }
.gap-x-24 { column-gap: var(--gap-24); }

[class*="gap-y-"] { display: flex; flex-direction: column; }
.gap-y-0 { row-gap: var(--gap-0); }
.gap-y-1 { row-gap: var(--gap-1); }
.gap-y-2 { row-gap: var(--gap-2); }
.gap-y-3 { row-gap: var(--gap-3); }
.gap-y-4 { row-gap: var(--gap-4); }
.gap-y-5 { row-gap: var(--gap-5); }
.gap-y-6 { row-gap: var(--gap-6); }
.gap-y-8 { row-gap: var(--gap-8); }
.gap-y-10 { row-gap: var(--gap-10); }


.hdbuy-opacity-0 { opacity: 0; }
.hdbuy-opacity-5 { opacity: 0.05; }
.hdbuy-opacity-10 { opacity: 0.1; }
.hdbuy-opacity-15 { opacity: 0.15; }
.hdbuy-opacity-20 { opacity: 0.2; }
.hdbuy-opacity-25 { opacity: 0.25; }
.hdbuy-opacity-30 { opacity: 0.3; }
.hdbuy-opacity-35 { opacity: 0.35; }
.hdbuy-opacity-40 { opacity: 0.4; }
.hdbuy-opacity-45 { opacity: 0.45; }
.hdbuy-opacity-50 { opacity: 0.5; }
.hdbuy-opacity-55 { opacity: 0.55; }
.hdbuy-opacity-60 { opacity: 0.6; }
.hdbuy-opacity-65 { opacity: 0.65; }
.hdbuy-opacity-70 { opacity: 0.7; }
.hdbuy-opacity-75 { opacity: 0.75; }
.hdbuy-opacity-80 { opacity: 0.8; }
.hdbuy-opacity-85 { opacity: 0.85; }
.hdbuy-opacity-90 { opacity: 0.9; }
.hdbuy-opacity-95 { opacity: 0.95; }
.hdbuy-opacity-100 { opacity: 1; }


.hdbuy-static { position: static; }
.hdbuy-fixed { position: fixed; }
.hdbuy-absolute { position: absolute; }
.hdbuy-relative { position: relative; }
.hdbuy-sticky { position: sticky; }



.rounded-0 { border-radius: 0 !important; }
.rounded-4 { border-radius: var(--r-4); }
.rounded-6 { border-radius: var(--r-6); }
.rounded-8 { border-radius: var(--r-8); }
.rounded-10 { border-radius: var(--r-10); }
.rounded-12 { border-radius: var(--r-12); }
.rounded-16 { border-radius: var(--r-16); }
.rounded-20 { border-radius: var(--r-20); }
.rounded-24 { border-radius: var(--r-24); }
.rounded-full { border-radius: var(--r-full); }
.rounded-circle { border-radius: var(--r-circle); }

/* Top */
.rounded-t-4 { border-radius: var(--r-4) var(--r-4) 0 0; }
.rounded-t-6 { border-radius: var(--r-6) var(--r-6) 0 0; }
.rounded-t-8 { border-radius: var(--r-8) var(--r-8) 0 0; }
.rounded-t-10 { border-radius: var(--r-10) var(--r-10) 0 0; }
.rounded-t-12 { border-radius: var(--r-12) var(--r-12) 0 0; }
.rounded-t-16 { border-radius: var(--r-16) var(--r-16) 0 0; }
.rounded-t-20 { border-radius: var(--r-20) var(--r-20) 0 0; }
.rounded-t-24 { border-radius: var(--r-24) var(--r-24) 0 0; }
.rounded-t-full { border-radius: var(--r-full) var(--r-full) 0 0; }

/* Right */
.rounded-r-4 { border-radius: 0 var(--r-4) var(--r-4) 0; }
.rounded-r-6 { border-radius: 0 var(--r-6) var(--r-6) 0; }
.rounded-r-8 { border-radius: 0 var(--r-8) var(--r-8) 0; }
.rounded-r-10 { border-radius: 0 var(--r-10) var(--r-10) 0; }
.rounded-r-12 { border-radius: 0 var(--r-12) var(--r-12) 0; }
.rounded-r-16 { border-radius: 0 var(--r-16) var(--r-16) 0; }
.rounded-r-20 { border-radius: 0 var(--r-20) var(--r-20) 0; }
.rounded-r-24 { border-radius: 0 var(--r-24) var(--r-24) 0; }
.rounded-r-full { border-radius: 0 var(--r-full) var(--r-full) 0; }

/* Bottom */
.rounded-b-4 { border-radius: 0 0 var(--r-4) var(--r-4); }
.rounded-b-6 { border-radius: 0 0 var(--r-6) var(--r-6); }
.rounded-b-8 { border-radius: 0 0 var(--r-8) var(--r-8); }
.rounded-b-10 { border-radius: 0 0 var(--r-10) var(--r-10); }
.rounded-b-12 { border-radius: 0 0 var(--r-12) var(--r-12); }
.rounded-b-16 { border-radius: 0 0 var(--r-16) var(--r-16); }
.rounded-b-20 { border-radius: 0 0 var(--r-20) var(--r-20); }
.rounded-b-24 { border-radius: 0 0 var(--r-24) var(--r-24); }
.rounded-b-full { border-radius: 0 0 var(--r-full) var(--r-full); }

/* Left */
.rounded-l-4 { border-radius: var(--r-4) 0 0 var(--r-4); }
.rounded-l-6 { border-radius: var(--r-6) 0 0 var(--r-6); }
.rounded-l-8 { border-radius: var(--r-8) 0 0 var(--r-8); }
.rounded-l-10 { border-radius: var(--r-10) 0 0 var(--r-10); }
.rounded-l-12 { border-radius: var(--r-12) 0 0 var(--r-12); }
.rounded-l-16 { border-radius: var(--r-16) 0 0 var(--r-16); }
.rounded-l-20 { border-radius: var(--r-20) 0 0 var(--r-20); }
.rounded-l-24 { border-radius: var(--r-24) 0 0 var(--r-24); }
.rounded-l-full { border-radius: var(--r-full) 0 0 var(--r-full); }

/* Single corners */
.rounded-tl-4 { border-top-left-radius: var(--r-4); }
.rounded-tl-6 { border-top-left-radius: var(--r-6); }
.rounded-tl-8 { border-top-left-radius: var(--r-8); }
.rounded-tl-10 { border-top-left-radius: var(--r-10); }
.rounded-tl-12 { border-top-left-radius: var(--r-12); }
.rounded-tl-16 { border-top-left-radius: var(--r-16); }
.rounded-tl-20 { border-top-left-radius: var(--r-20); }
.rounded-tl-24 { border-top-left-radius: var(--r-24); }
.rounded-tl-full { border-top-left-radius: var(--r-full); }

.rounded-tr-4 { border-top-right-radius: var(--r-4); }
.rounded-tr-6 { border-top-right-radius: var(--r-6); }
.rounded-tr-8 { border-top-right-radius: var(--r-8); }
.rounded-tr-10 { border-top-right-radius: var(--r-10); }
.rounded-tr-12 { border-top-right-radius: var(--r-12); }
.rounded-tr-16 { border-top-right-radius: var(--r-16); }
.rounded-tr-20 { border-top-right-radius: var(--r-20); }
.rounded-tr-24 { border-top-right-radius: var(--r-24); }
.rounded-tr-full { border-top-right-radius: var(--r-full); }

.rounded-br-4 { border-bottom-right-radius: var(--r-4); }
.rounded-br-6 { border-bottom-right-radius: var(--r-6); }
.rounded-br-8 { border-bottom-right-radius: var(--r-8); }
.rounded-br-10 { border-bottom-right-radius: var(--r-10); }
.rounded-br-12 { border-bottom-right-radius: var(--r-12); }
.rounded-br-16 { border-bottom-right-radius: var(--r-16); }
.rounded-br-20 { border-bottom-right-radius: var(--r-20); }
.rounded-br-24 { border-bottom-right-radius: var(--r-24); }
.rounded-br-full { border-bottom-right-radius: var(--r-full); }

.rounded-bl-4 { border-bottom-left-radius: var(--r-4); }
.rounded-bl-6 { border-bottom-left-radius: var(--r-6); }
.rounded-bl-8 { border-bottom-left-radius: var(--r-8); }
.rounded-bl-10 { border-bottom-left-radius: var(--r-10); }
.rounded-bl-12 { border-bottom-left-radius: var(--r-12); }
.rounded-bl-16 { border-bottom-left-radius: var(--r-16); }
.rounded-bl-20 { border-bottom-left-radius: var(--r-20); }
.rounded-bl-24 { border-bottom-left-radius: var(--r-24); }
.rounded-bl-full { border-bottom-left-radius: var(--r-full); }

/* Width */
.hdbuy-fit-width { width: fit-content !important; }
.hdbuy-full-width { width: 100% !important; }
.hdbuy-full-height { height: 100% !important; }

/* Min Width */
.min-w-0 { min-width: 0; }
.min-w-xs { min-width: 20rem; }
.min-w-sm { min-width: 24rem; }
.min-w-md { min-width: 28rem; }
.min-w-lg { min-width: 32rem; }
.min-w-xl { min-width: 36rem; }
.min-w-2xl { min-width: 42rem; }
.min-w-full { min-width: 100%; }
.min-w-screen { min-width: 100vw; }
.min-w-auto { min-width: auto; }

/* Max Width */
.max-w-0 { max-width: 0; }
.max-w-40 { max-width: 40px; }
.max-w-80 { max-width: 80px; }
.max-w-120 { max-width: 120px; }
.max-w-160 { max-width: 160px; }
.max-w-200 { max-width: 200px; }
.max-w-240 { max-width: 240px; }
.max-w-280 { max-width: 280px; }
.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 384px; }
.max-w-md { max-width: 448px; }
.max-w-lg { max-width: 512px; }
.max-w-xl { max-width: 576px; }
.max-w-2xl { max-width: 672px; }
.max-w-3xl { max-width: 768px; }
.max-w-4xl { max-width: 896px; }
.max-w-5xl { max-width: 1024px; }
.max-w-6xl { max-width: 1152px; }
.max-w-7xl { max-width: 1280px; }
.max-w-8xl { max-width: 1336px; }
.max-w-9xl { max-width: 1440px; }
.max-w-10xl { max-width: 1676px; }
.max-w-full { max-width: 100%; }
.max-w-screen { max-width: 100vw; }
.max-w-auto { max-width: unset; }

/* Containers */
.container-xs { width: 100%; max-width: 320px; }
.container-sm { width: 100%; max-width: 640px; }
.container-md { width: 100%; max-width: 768px; }
.container-lg { width: 100%; max-width: 1024px; }
.container-xl { width: 100%; max-width: 1280px; }
.container-2xl { width: 100%; max-width: 1336px; }
.container-3xl { width: 100%; max-width: 1440px; }
.container-4xl { width: 100%; max-width: 1676px; }
[class*="container-"] { margin-left: auto; margin-right: auto; }



/* =========================
   CONTAINER FLUID
   تمام‌عرض با padding واکنش‌گرا
   ========================= */

.container-fluid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--size-16);
    padding-right: var(--size-16);
    box-sizing: border-box;
}

@media (min-width: 576px) {
    .container-fluid {
        padding-left: var(--size-24);
        padding-right: var(--size-24);
    }
}

@media (min-width: 1024px) {
    .container-fluid {
        padding-left: var(--size-32);
        padding-right: var(--size-32);
    }
}

@media (min-width: 1400px) {
    .container-fluid {
        padding-left: var(--size-40);
        padding-right: var(--size-40);
    }
}

/* کلاس‌های یوتیلیتی - Margin Auto */
.hdbuy-m-auto {
    margin: auto;
}

.hdbuy-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.hdbuy-my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.hdbuy-ml-auto {
    margin-left: auto;
}

.hdbuy-mr-auto {
    margin-right: auto;
}

.hdbuy-mt-auto {
    margin-top: auto;
}

.hdbuy-mb-auto {
    margin-bottom: auto;
}
/* ==================== MARGIN X ==================== */
.hdbuy-mx-0  { margin-left: 0; }
.hdbuy-mx-0  { margin-right: 0; }

.hdbuy-mx-4  { margin-left: 4px; margin-left: var(--size-4); }
.hdbuy-mx-4  { margin-right: 4px; margin-right: var(--size-4); }

.hdbuy-mx-8  { margin-left: 8px; margin-left: var(--size-8); }
.hdbuy-mx-8  { margin-right: 8px; margin-right: var(--size-8); }

.hdbuy-mx-12 { margin-left: 12px; margin-left: var(--size-12); }
.hdbuy-mx-12 { margin-right: 12px; margin-right: var(--size-12); }

.hdbuy-mx-16 { margin-left: 16px; margin-left: var(--size-16); }
.hdbuy-mx-16 { margin-right: 16px; margin-right: var(--size-16); }

.hdbuy-mx-20 { margin-left: 20px; margin-left: var(--size-20); }
.hdbuy-mx-20 { margin-right: 20px; margin-right: var(--size-20); }

.hdbuy-mx-24 { margin-left: 24px; margin-left: var(--size-24); }
.hdbuy-mx-24 { margin-right: 24px; margin-right: var(--size-24); }

.hdbuy-mx-28 { margin-left: 28px; margin-left: var(--size-28); }
.hdbuy-mx-28 { margin-right: 28px; margin-right: var(--size-28); }

.hdbuy-mx-32 { margin-left: 32px; margin-left: var(--size-32); }
.hdbuy-mx-32 { margin-right: 32px; margin-right: var(--size-32); }

.hdbuy-mx-36 { margin-left: 36px; margin-left: var(--size-36); }
.hdbuy-mx-36 { margin-right: 36px; margin-right: var(--size-36); }

.hdbuy-mx-40 { margin-left: 40px; margin-left: var(--size-40); }
.hdbuy-mx-40 { margin-right: 40px; margin-right: var(--size-40); }

.hdbuy-mx-44 { margin-left: 44px; margin-left: var(--size-44); }
.hdbuy-mx-44 { margin-right: 44px; margin-right: var(--size-44); }

.hdbuy-mx-48 { margin-left: 48px; margin-left: var(--size-48); }
.hdbuy-mx-48 { margin-right: 48px; margin-right: var(--size-48); }

.hdbuy-mx-52 { margin-left: 52px; margin-left: var(--size-52); }
.hdbuy-mx-52 { margin-right: 52px; margin-right: var(--size-52); }

.hdbuy-mx-56 { margin-left: 56px; margin-left: var(--size-56); }
.hdbuy-mx-56 { margin-right: 56px; margin-right: var(--size-56); }

.hdbuy-mx-60 { margin-left: 60px; margin-left: var(--size-60); }
.hdbuy-mx-60 { margin-right: 60px; margin-right: var(--size-60); }

.hdbuy-mx-64 { margin-left: 64px; margin-left: var(--size-64); }
.hdbuy-mx-64 { margin-right: 64px; margin-right: var(--size-64); }

/* ==================== MARGIN Y ==================== */
.hdbuy-my-0  { margin-top: 0; }
.hdbuy-my-0  { margin-bottom: 0; }

.hdbuy-my-4  { margin-top: 4px; margin-top: var(--size-4); }
.hdbuy-my-4  { margin-bottom: 4px; margin-bottom: var(--size-4); }

.hdbuy-my-8  { margin-top: 8px; margin-top: var(--size-8); }
.hdbuy-my-8  { margin-bottom: 8px; margin-bottom: var(--size-8); }

.hdbuy-my-12 { margin-top: 12px; margin-top: var(--size-12); }
.hdbuy-my-12 { margin-bottom: 12px; margin-bottom: var(--size-12); }

.hdbuy-my-16 { margin-top: 16px; margin-top: var(--size-16); }
.hdbuy-my-16 { margin-bottom: 16px; margin-bottom: var(--size-16); }

.hdbuy-my-20 { margin-top: 20px; margin-top: var(--size-20); }
.hdbuy-my-20 { margin-bottom: 20px; margin-bottom: var(--size-20); }

.hdbuy-my-24 { margin-top: 24px; margin-top: var(--size-24); }
.hdbuy-my-24 { margin-bottom: 24px; margin-bottom: var(--size-24); }

.hdbuy-my-28 { margin-top: 28px; margin-top: var(--size-28); }
.hdbuy-my-28 { margin-bottom: 28px; margin-bottom: var(--size-28); }

.hdbuy-my-32 { margin-top: 32px; margin-top: var(--size-32); }
.hdbuy-my-32 { margin-bottom: 32px; margin-bottom: var(--size-32); }

.hdbuy-my-36 { margin-top: 36px; margin-top: var(--size-36); }
.hdbuy-my-36 { margin-bottom: 36px; margin-bottom: var(--size-36); }

.hdbuy-my-40 { margin-top: 40px; margin-top: var(--size-40); }
.hdbuy-my-40 { margin-bottom: 40px; margin-bottom: var(--size-40); }

.hdbuy-my-44 { margin-top: 44px; margin-top: var(--size-44); }
.hdbuy-my-44 { margin-bottom: 44px; margin-bottom: var(--size-44); }

.hdbuy-my-48 { margin-top: 48px; margin-top: var(--size-48); }
.hdbuy-my-48 { margin-bottom: 48px; margin-bottom: var(--size-48); }

.hdbuy-my-52 { margin-top: 52px; margin-top: var(--size-52); }
.hdbuy-my-52 { margin-bottom: 52px; margin-bottom: var(--size-52); }

.hdbuy-my-56 { margin-top: 56px; margin-top: var(--size-56); }
.hdbuy-my-56 { margin-bottom: 56px; margin-bottom: var(--size-56); }

.hdbuy-my-60 { margin-top: 60px; margin-top: var(--size-60); }
.hdbuy-my-60 { margin-bottom: 60px; margin-bottom: var(--size-60); }

.hdbuy-my-64 { margin-top: 64px; margin-top: var(--size-64); }
.hdbuy-my-64 { margin-bottom: 64px; margin-bottom: var(--size-64); }

/* Margin All */
.hdbuy-m-0 {
    margin: 0;
}

.hdbuy-m-4 {
    margin: 4px;
}

.hdbuy-m-8 {
    margin: 8px;
}

.hdbuy-m-12 {
    margin: 12px;
}

.hdbuy-m-16 {
    margin: 16px;
}

.hdbuy-m-20 {
    margin: 20px;
}

.hdbuy-m-24 {
    margin: 24px;
}

.hdbuy-m-28 {
    margin: 28px;
}

.hdbuy-m-32 {
    margin: 32px;
}

.hdbuy-m-36 {
    margin: 36px;
}

.hdbuy-m-40 {
    margin: 40px;
}

.hdbuy-m-44 {
    margin: 44px;
}

.hdbuy-m-48 {
    margin: 48px;
}

.hdbuy-m-52 {
    margin: 52px;
}

.hdbuy-m-56 {
    margin: 56px;
}

.hdbuy-m-60 {
    margin: 60px;
}

.hdbuy-m-64 {
    margin: 64px;
}

/* Margin Top */
.hdbuy-mt-0 {
    margin-top: 0;
}

.hdbuy-mt-4 {
    margin-top: 4px;
}

.hdbuy-mt-8 {
    margin-top: 8px;
}

.hdbuy-mt-12 {
    margin-top: 12px;
}

.hdbuy-mt-16 {
    margin-top: 16px;
}

.hdbuy-mt-20 {
    margin-top: 20px;
}

.hdbuy-mt-24 {
    margin-top: 24px;
}

.hdbuy-mt-28 {
    margin-top: 28px;
}

.hdbuy-mt-32 {
    margin-top: 32px;
}

.hdbuy-mt-36 {
    margin-top: 36px;
}

.hdbuy-mt-40 {
    margin-top: 40px;
}

.hdbuy-mt-44 {
    margin-top: 44px;
}

.hdbuy-mt-48 {
    margin-top: 48px;
}

.hdbuy-mt-52 {
    margin-top: 52px;
}

.hdbuy-mt-56 {
    margin-top: 56px;
}

.hdbuy-mt-60 {
    margin-top: 60px;
}

.hdbuy-mt-64 {
    margin-top: 64px;
}

/* Margin Bottom */
.hdbuy-mb-0 {
    margin-bottom: 0;
}

.hdbuy-mb-4 {
    margin-bottom: 4px;
}

.hdbuy-mb-8 {
    margin-bottom: 8px;
}

.hdbuy-mb-12 {
    margin-bottom: 12px;
}

.hdbuy-mb-16 {
    margin-bottom: 16px;
}

.hdbuy-mb-20 {
    margin-bottom: 20px;
}

.hdbuy-mb-24 {
    margin-bottom: 24px;
}

.hdbuy-mb-28 {
    margin-bottom: 28px;
}

.hdbuy-mb-32 {
    margin-bottom: 32px;
}

.hdbuy-mb-36 {
    margin-bottom: 36px;
}

.hdbuy-mb-40 {
    margin-bottom: 40px;
}

.hdbuy-mb-44 {
    margin-bottom: 44px;
}

.hdbuy-mb-48 {
    margin-bottom: 48px;
}

.hdbuy-mb-52 {
    margin-bottom: 52px;
}

.hdbuy-mb-56 {
    margin-bottom: 56px;
}

.hdbuy-mb-60 {
    margin-bottom: 60px;
}

.hdbuy-mb-64 {
    margin-bottom: 64px;
}

/* Margin Left */
.hdbuy-ml-0 {
    margin-left: 0;
}

.hdbuy-ml-4 {
    margin-left: 4px;
}

.hdbuy-ml-6 {
    margin-left: 6px;
}

.hdbuy-ml-8 {
    margin-left: 8px;
}

.hdbuy-ml-12 {
    margin-left: 12px;
}

.hdbuy-ml-16 {
    margin-left: 16px;
}

.hdbuy-ml-20 {
    margin-left: 20px;
}

.hdbuy-ml-24 {
    margin-left: 24px;
}

.hdbuy-ml-28 {
    margin-left: 28px;
}

.hdbuy-ml-32 {
    margin-left: 32px;
}

.hdbuy-ml-36 {
    margin-left: 36px;
}

.hdbuy-ml-40 {
    margin-left: 40px;
}

.hdbuy-ml-44 {
    margin-left: 44px;
}

.hdbuy-ml-48 {
    margin-left: 48px;
}

.hdbuy-ml-52 {
    margin-left: 52px;
}

.hdbuy-ml-56 {
    margin-left: 56px;
}

.hdbuy-ml-60 {
    margin-left: 60px;
}

.hdbuy-ml-64 {
    margin-left: 64px;
}

/* Margin Right */
.hdbuy-mr-0 {
    margin-right: 0;
}

.hdbuy-mr-4 {
    margin-right: 4px;
}

.hdbuy-mr-8 {
    margin-right: 8px;
}

.hdbuy-mr-12 {
    margin-right: 12px;
}

.hdbuy-mr-16 {
    margin-right: 16px;
}

.hdbuy-mr-20 {
    margin-right: 20px;
}

.hdbuy-mr-24 {
    margin-right: 24px;
}

.hdbuy-mr-28 {
    margin-right: 28px;
}

.hdbuy-mr-32 {
    margin-right: 32px;
}

.hdbuy-mr-36 {
    margin-right: 36px;
}

.hdbuy-mr-40 {
    margin-right: 40px;
}

.hdbuy-mr-44 {
    margin-right: 44px;
}

.hdbuy-mr-48 {
    margin-right: 48px;
}

.hdbuy-mr-52 {
    margin-right: 52px;
}

.hdbuy-mr-56 {
    margin-right: 56px;
}

.hdbuy-mr-60 {
    margin-right: 60px;
}

.hdbuy-mr-64 {
    margin-right: 64px;
}

/* Padding All */
.hdbuy-p-0 {
    padding: 0;
}

.hdbuy-p-4 {
    padding: 4px;
}

.hdbuy-p-8 {
    padding: 8px;
}

.hdbuy-p-12 {
    padding: 12px;
}

.hdbuy-p-16 {
    padding: 16px;
}

.hdbuy-p-20 {
    padding: 20px;
}

.hdbuy-p-24 {
    padding: 24px;
}

.hdbuy-p-28 {
    padding: 28px;
}

.hdbuy-p-32 {
    padding: 32px;
}

.hdbuy-p-36 {
    padding: 36px;
}

.hdbuy-p-40 {
    padding: 40px;
}

.hdbuy-p-44 {
    padding: 44px;
}

.hdbuy-p-48 {
    padding: 48px;
}

.hdbuy-p-52 {
    padding: 52px;
}

.hdbuy-p-56 {
    padding: 56px;
}

.hdbuy-p-60 {
    padding: 60px;
}

.hdbuy-p-64 {
    padding: 64px;
}

/* ==================== PADDING X ==================== */
.hdbuy-px-0  { padding-left: 0; }
.hdbuy-px-0  { padding-right: 0; }

.hdbuy-px-4  { padding-left: 4px; padding-left: var(--size-4); }
.hdbuy-px-4  { padding-right: 4px; padding-right: var(--size-4); }

.hdbuy-px-8  { padding-left: 8px; padding-left: var(--size-8); }
.hdbuy-px-8  { padding-right: 8px; padding-right: var(--size-8); }

.hdbuy-px-12 { padding-left: 12px; padding-left: var(--size-12); }
.hdbuy-px-12 { padding-right: 12px; padding-right: var(--size-12); }

.hdbuy-px-16 { padding-left: 16px; padding-left: var(--size-16); }
.hdbuy-px-16 { padding-right: 16px; padding-right: var(--size-16); }

.hdbuy-px-20 { padding-left: 20px; padding-left: var(--size-20); }
.hdbuy-px-20 { padding-right: 20px; padding-right: var(--size-20); }

.hdbuy-px-24 { padding-left: 24px; padding-left: var(--size-24); }
.hdbuy-px-24 { padding-right: 24px; padding-right: var(--size-24); }

.hdbuy-px-28 { padding-left: 28px; padding-left: var(--size-28); }
.hdbuy-px-28 { padding-right: 28px; padding-right: var(--size-28); }

.hdbuy-px-32 { padding-left: 32px; padding-left: var(--size-32); }
.hdbuy-px-32 { padding-right: 32px; padding-right: var(--size-32); }

.hdbuy-px-36 { padding-left: 36px; padding-left: var(--size-36); }
.hdbuy-px-36 { padding-right: 36px; padding-right: var(--size-36); }

.hdbuy-px-40 { padding-left: 40px; padding-left: var(--size-40); }
.hdbuy-px-40 { padding-right: 40px; padding-right: var(--size-40); }

.hdbuy-px-44 { padding-left: 44px; padding-left: var(--size-44); }
.hdbuy-px-44 { padding-right: 44px; padding-right: var(--size-44); }

.hdbuy-px-48 { padding-left: 48px; padding-left: var(--size-48); }
.hdbuy-px-48 { padding-right: 48px; padding-right: var(--size-48); }

.hdbuy-px-52 { padding-left: 52px; padding-left: var(--size-52); }
.hdbuy-px-52 { padding-right: 52px; padding-right: var(--size-52); }

.hdbuy-px-56 { padding-left: 56px; padding-left: var(--size-56); }
.hdbuy-px-56 { padding-right: 56px; padding-right: var(--size-56); }

.hdbuy-px-60 { padding-left: 60px; padding-left: var(--size-60); }
.hdbuy-px-60 { padding-right: 60px; padding-right: var(--size-60); }

.hdbuy-px-64 { padding-left: 64px; padding-left: var(--size-64); }
.hdbuy-px-64 { padding-right: 64px; padding-right: var(--size-64); }

/* ==================== PADDING Y ==================== */
.hdbuy-py-0  { padding-top: 0; }
.hdbuy-py-0  { padding-bottom: 0; }

.hdbuy-py-4  { padding-top: 4px; padding-top: var(--size-4); }
.hdbuy-py-4  { padding-bottom: 4px; padding-bottom: var(--size-4); }

.hdbuy-py-8  { padding-top: 8px; padding-top: var(--size-8); }
.hdbuy-py-8  { padding-bottom: 8px; padding-bottom: var(--size-8); }

.hdbuy-py-12 { padding-top: 12px; padding-top: var(--size-12); }
.hdbuy-py-12 { padding-bottom: 12px; padding-bottom: var(--size-12); }

.hdbuy-py-16 { padding-top: 16px; padding-top: var(--size-16); }
.hdbuy-py-16 { padding-bottom: 16px; padding-bottom: var(--size-16); }

.hdbuy-py-20 { padding-top: 20px; padding-top: var(--size-20); }
.hdbuy-py-20 { padding-bottom: 20px; padding-bottom: var(--size-20); }

.hdbuy-py-24 { padding-top: 24px; padding-top: var(--size-24); }
.hdbuy-py-24 { padding-bottom: 24px; padding-bottom: var(--size-24); }

.hdbuy-py-28 { padding-top: 28px; padding-top: var(--size-28); }
.hdbuy-py-28 { padding-bottom: 28px; padding-bottom: var(--size-28); }

.hdbuy-py-32 { padding-top: 32px; padding-top: var(--size-32); }
.hdbuy-py-32 { padding-bottom: 32px; padding-bottom: var(--size-32); }

.hdbuy-py-36 { padding-top: 36px; padding-top: var(--size-36); }
.hdbuy-py-36 { padding-bottom: 36px; padding-bottom: var(--size-36); }

.hdbuy-py-40 { padding-top: 40px; padding-top: var(--size-40); }
.hdbuy-py-40 { padding-bottom: 40px; padding-bottom: var(--size-40); }

.hdbuy-py-44 { padding-top: 44px; padding-top: var(--size-44); }
.hdbuy-py-44 { padding-bottom: 44px; padding-bottom: var(--size-44); }

.hdbuy-py-48 { padding-top: 48px; padding-top: var(--size-48); }
.hdbuy-py-48 { padding-bottom: 48px; padding-bottom: var(--size-48); }

.hdbuy-py-52 { padding-top: 52px; padding-top: var(--size-52); }
.hdbuy-py-52 { padding-bottom: 52px; padding-bottom: var(--size-52); }

.hdbuy-py-56 { padding-top: 56px; padding-top: var(--size-56); }
.hdbuy-py-56 { padding-bottom: 56px; padding-bottom: var(--size-56); }

.hdbuy-py-60 { padding-top: 60px; padding-top: var(--size-60); }
.hdbuy-py-60 { padding-bottom: 60px; padding-bottom: var(--size-60); }

.hdbuy-py-64 { padding-top: 64px; padding-top: var(--size-64); }
.hdbuy-py-64 { padding-bottom: 64px; padding-bottom: var(--size-64); }

/* Padding Top */
.hdbuy-pt-0 {
    padding-top: 0;
}

.hdbuy-pt-4 {
    padding-top: 4px;
}

.hdbuy-pt-8 {
    padding-top: 8px;
}

.hdbuy-pt-12 {
    padding-top: 12px;
}

.hdbuy-pt-16 {
    padding-top: 16px;
}

.hdbuy-pt-20 {
    padding-top: 20px;
}

.hdbuy-pt-24 {
    padding-top: 24px;
}

.hdbuy-pt-28 {
    padding-top: 28px;
}

.hdbuy-pt-32 {
    padding-top: 32px;
}

.hdbuy-pt-36 {
    padding-top: 36px;
}

.hdbuy-pt-40 {
    padding-top: 40px;
}

.hdbuy-pt-44 {
    padding-top: 44px;
}

.hdbuy-pt-48 {
    padding-top: 48px;
}

.hdbuy-pt-52 {
    padding-top: 52px;
}

.hdbuy-pt-56 {
    padding-top: 56px;
}

.hdbuy-pt-60 {
    padding-top: 60px;
}

.hdbuy-pt-64 {
    padding-top: 64px;
}

/* Padding Bottom */
.hdbuy-pb-0 {
    padding-bottom: 0;
}

.hdbuy-pb-4 {
    padding-bottom: 4px;
}

.hdbuy-pb-8 {
    padding-bottom: 8px;
}

.hdbuy-pb-12 {
    padding-bottom: 12px;
}

.hdbuy-pb-16 {
    padding-bottom: 16px;
}

.hdbuy-pb-20 {
    padding-bottom: 20px;
}

.hdbuy-pb-24 {
    padding-bottom: 24px;
}

.hdbuy-pb-28 {
    padding-bottom: 28px;
}

.hdbuy-pb-32 {
    padding-bottom: 32px;
}

.hdbuy-pb-36 {
    padding-bottom: 36px;
}

.hdbuy-pb-40 {
    padding-bottom: 40px;
}

.hdbuy-pb-44 {
    padding-bottom: 44px;
}

.hdbuy-pb-48 {
    padding-bottom: 48px;
}

.hdbuy-pb-52 {
    padding-bottom: 52px;
}

.hdbuy-pb-56 {
    padding-bottom: 56px;
}

.hdbuy-pb-60 {
    padding-bottom: 60px;
}

.hdbuy-pb-64 {
    padding-bottom: 64px;
}

/* Padding Left */
.hdbuy-pl-0 {
    padding-left: 0;
}


.hdbuy-pl-4 {
    padding-left: 4px;
}

.hdbuy-pl-8 {
    padding-left: 8px;
}

.hdbuy-pl-12 {
    padding-left: 12px;
}

.hdbuy-pl-16 {
    padding-left: 16px;
}

.hdbuy-pl-20 {
    padding-left: 20px;
}

.hdbuy-pl-24 {
    padding-left: 24px;
}

.hdbuy-pl-28 {
    padding-left: 28px;
}

.hdbuy-pl-32 {
    padding-left: 32px;
}

.hdbuy-pl-36 {
    padding-left: 36px;
}

.hdbuy-pl-40 {
    padding-left: 40px;
}

.hdbuy-pl-44 {
    padding-left: 44px;
}

.hdbuy-pl-48 {
    padding-left: 48px;
}

.hdbuy-pl-52 {
    padding-left: 52px;
}

.hdbuy-pl-56 {
    padding-left: 56px;
}

.hdbuy-pl-60 {
    padding-left: 60px;
}

.hdbuy-pl-64 {
    padding-left: 64px;
}

/* Padding Right */
.hdbuy-pr-0 {
    padding-right: 0;
}

.hdbuy-pr-4 {
    padding-right: 4px;
}

.hdbuy-pr-8 {
    padding-right: 8px;
}

.hdbuy-pr-12 {
    padding-right: 12px;
}

.hdbuy-pr-16 {
    padding-right: 16px;
}

.hdbuy-pr-20 {
    padding-right: 20px;
}

.hdbuy-pr-24 {
    padding-right: 24px;
}

.hdbuy-pr-28 {
    padding-right: 28px;
}

.hdbuy-pr-32 {
    padding-right: 32px;
}

.hdbuy-pr-36 {
    padding-right: 36px;
}

.hdbuy-pr-40 {
    padding-right: 40px;
}

.hdbuy-pr-44 {
    padding-right: 44px;
}

.hdbuy-pr-48 {
    padding-right: 48px;
}

.hdbuy-pr-52 {
    padding-right: 52px;
}

.hdbuy-pr-56 {
    padding-right: 56px;
}

.hdbuy-pr-60 {
    padding-right: 60px;
}

.hdbuy-pr-64 {
    padding-right: 64px;
}

/* Text Align */
.hdbuy-text-align-center { text-align: center; }
.hdbuy-text-align-right { text-align: right; }
.hdbuy-text-align-left { text-align: left; }
.hdbuy-text-align-justify { text-align: justify; }
.hdbuy-txt-align-left-plc-right { text-align: left; }
.hdbuy-txt-align-left-plc-right::placeholder { text-align: right; }


/* Base Text */
.hdbuy-text { margin: 0; display: block; line-height: 160%; }

/* Font Sizes */
.hdbuy-text--fs-10 { font-size: var(--font-10); }
.hdbuy-text--fs-11 { font-size: var(--font-11); }
.hdbuy-text--fs-12 { font-size: var(--font-12); }
.hdbuy-text--fs-13 { font-size: var(--font-13); }
.hdbuy-text--fs-14 { font-size: var(--font-14); }
.hdbuy-text--fs-15 { font-size: var(--font-15); }
.hdbuy-text--fs-16 { font-size: var(--font-16); }
.hdbuy-text--fs-17 { font-size: var(--font-17); }
.hdbuy-text--fs-18 { font-size: var(--font-18); }
.hdbuy-text--fs-20 { font-size: var(--font-20); }
.hdbuy-text--fs-22 { font-size: var(--font-22); }
.hdbuy-text--fs-24 { font-size: var(--font-24); }
.hdbuy-text--fs-26 { font-size: var(--font-26); }
.hdbuy-text--fs-28 { font-size: var(--font-28); }
.hdbuy-text--fs-30 { font-size: var(--font-30); }
.hdbuy-text--fs-32 { font-size: var(--font-32); }
.hdbuy-text--fs-36 { font-size: var(--font-36); }
.hdbuy-text--fs-40 { font-size: var(--font-40); }
.hdbuy-text--fs-48 { font-size: var(--font-48); }
.hdbuy-text--fs-56 { font-size: var(--font-56); }
.hdbuy-text--fs-64 { font-size: var(--font-64); }

/* Font Weights */
.hdbuy-text--fw-thin { font-weight: var(--hdbuy-fw-thin); }
.hdbuy-text--fw-light { font-weight: var(--hdbuy-fw-light); }
.hdbuy-text--fw-regular { font-weight: var(--hdbuy-fw-regular); }
.hdbuy-text--fw-medium { font-weight: var(--hdbuy-fw-medium); }
.hdbuy-text--fw-semibold { font-weight: var(--hdbuy-fw-semibold); }
.hdbuy-text--fw-bold { font-weight: var(--hdbuy-fw-bold); }
.hdbuy-text--fw-black { font-weight: var(--hdbuy-fw-black); }

.\!hdbuy-text--fw-thin { font-weight: var(--hdbuy-fw-thin) !important; }
.\!hdbuy-text--fw-light { font-weight: var(--hdbuy-fw-light) !important; }
.\!hdbuy-text--fw-regular { font-weight: var(--hdbuy-fw-regular) !important; }
.\!hdbuy-text--fw-medium { font-weight: var(--hdbuy-fw-medium) !important; }
.\!hdbuy-text--fw-semibold { font-weight: var(--hdbuy-fw-semibold) !important; }
.\!hdbuy-text--fw-bold { font-weight: var(--hdbuy-fw-bold) !important; }
.\!hdbuy-text--fw-black { font-weight: var(--hdbuy-fw-black) !important; }

/* Word Break */
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }

/* ========================= */
/* TYPOGRAPHY SCALE - HEADINGS */
/* ========================= */

/* ---- H1 ---- */
.text-h1 { font-size: 2.4rem; font-weight: 900; line-height: 1.3; }
@media (min-width: 1024px) { .text-h1 { font-size: 3.2rem; } }
.text-h1-regular { font-size: 2.4rem; font-weight: 600; line-height: 1.3; }
@media (min-width: 1024px) { .text-h1-regular { font-size: 3.2rem; } }
.text-h1-extra { font-size: 2.4rem; font-weight: 900; line-height: 1.3; }
@media (min-width: 1024px) { .text-h1-extra { font-size: 3.2rem; } }

/* ---- H2 ---- */
.text-h2 { font-size: 2rem; font-weight: 800; line-height: 1.4; }
@media (min-width: 1024px) { .text-h2 { font-size: 2.6rem; } }
.text-h2-regular { font-size: 2rem; font-weight: 500; line-height: 1.4; }
@media (min-width: 1024px) { .text-h2-regular { font-size: 2.6rem; } }
.text-h2-extra { font-size: 2rem; font-weight: 900; line-height: 1.4; }
@media (min-width: 1024px) { .text-h2-extra { font-size: 2.6rem; } }

/* ---- H3 ---- */
.text-h3 { font-size: 1.7rem; font-weight: 700; line-height: 1.5; }
@media (min-width: 1024px) { .text-h3 { font-size: 2.2rem; } }
.text-h3-regular { font-size: 1.7rem; font-weight: 500; line-height: 1.5; }
@media (min-width: 1024px) { .text-h3-regular { font-size: 2.2rem; } }
.text-h3-extra { font-size: 1.7rem; font-weight: 800; line-height: 1.5; }
@media (min-width: 1024px) { .text-h3-extra { font-size: 2.2rem; } }

/* ---- H4 ---- */
.text-h4 { font-size: 1.6rem; font-weight: 600; line-height: 2.1; }
@media (min-width: 1024px) { .text-h4 { font-size: 1.9rem; } }
.text-h4-regular { font-size: 1.6rem; font-weight: 500; line-height: 2.1; }
@media (min-width: 1024px) { .text-h4-regular { font-size: 1.9rem; } }
.text-h4-extra { font-size: 1.6rem; font-weight: 700; line-height: 2.1; }
@media (min-width: 1024px) { .text-h4-extra { font-size: 1.9rem; } }

/* ---- H5 ---- */
.text-h5 { font-size: 1.4rem; font-weight: 600; line-height: 2.1; }
@media (min-width: 1024px) { .text-h5 { font-size: 1.6rem; } }
.text-h5-regular { font-size: 1.4rem; font-weight: 500; line-height: 2.1; }
@media (min-width: 1024px) { .text-h5-regular { font-size: 1.6rem; } }
.text-h5-extra { font-size: 1.4rem; font-weight: 700; line-height: 2.1; }
@media (min-width: 1024px) { .text-h5-extra { font-size: 1.6rem; } }

/* ---- H6 ---- */
.text-h6 { font-size: 1.2rem; font-weight: 600; line-height: 1.8; }
@media (min-width: 1024px) { .text-h6 { font-size: 1.4rem; } }
.text-h6-regular { font-size: 1.2rem; font-weight: 400; line-height: 1.8; }
@media (min-width: 1024px) { .text-h6-regular { font-size: 1.4rem; } }
.text-h6-extra { font-size: 1.2rem; font-weight: 700; line-height: 1.8; }
@media (min-width: 1024px) { .text-h6-extra { font-size: 1.4rem; } }


/* ========================= */
/* BODY TYPOGRAPHY SCALE     */
/* ========================= */

/* ---- Body 1 ---- */
.text-body-1, .\!text-body-1 { font-size: 1.2rem; font-weight: 400; line-height: 2.15; }
.text-body1-regular, .\!text-body1-regular { font-size: 1.2rem; font-weight: 600; line-height: 2.15; }
.text-body1-strong, .\!text-body1-strong { font-size: 1.2rem; font-weight: 700; line-height: 2.15; }
.text-body1-extra, .\!text-body1-extra { font-size: 1.2rem; font-weight: 800; line-height: 2.15; }
@media (min-width: 1024px) {
    .text-body-1, .\!text-body-1,
    .text-body1-regular, .\!text-body1-regular,
    .text-body1-strong, .\!text-body1-strong,
    .text-body1-extra, .\!text-body1-extra { font-size: 1.4rem; }
}

/* ---- Body 2 ---- */
.text-body-2, .\!text-body-2 { font-size: 1.1rem; font-weight: 400; line-height: 2.17; }
.text-body2-regular, .\!text-body2-regular { font-size: 1.1rem; font-weight: 600; line-height: 2.17; }
.text-body2-strong, .\!text-body2-strong { font-size: 1.1rem; font-weight: 700; line-height: 2.17; }
.text-body2-extra, .\!text-body2-extra { font-size: 1.1rem; font-weight: 800; line-height: 2.17; }
@media (min-width: 1024px) {
    .text-body-2, .\!text-body-2,
    .text-body2-regular, .\!text-body2-regular,
    .text-body2-strong, .\!text-body2-strong,
    .text-body2-extra, .\!text-body2-extra { font-size: 1.2rem; }
}

/* ---- Subtitle ---- */
.text-subtitle { font-size: 1.3rem; font-weight: 400; line-height: 2.15; }
@media (min-width: 1024px) { .text-subtitle { font-size: 1.5rem; } }
.text-subtitle-strong { font-size: 1.3rem; font-weight: 600; line-height: 2.15; }
@media (min-width: 1024px) { .text-subtitle-strong { font-size: 1.5rem; } }
.text-subtitle-bold { font-size: 1.3rem; font-weight: 700; line-height: 2.15; }
@media (min-width: 1024px) { .text-subtitle-bold { font-size: 1.5rem; } }
.text-subtitle-extra { font-size: 1.3rem; font-weight: 800; line-height: 2.15; }
@media (min-width: 1024px) { .text-subtitle-extra { font-size: 1.5rem; } }

/* ---- Caption ---- */
.text-caption { font-size: 1rem; font-weight: 400; line-height: 2.17; }
@media (min-width: 1024px) { .text-caption { font-size: 1.1rem; } }
.text-caption-strong { font-size: 1rem; font-weight: 600; line-height: 2.17; }
@media (min-width: 1024px) { .text-caption-strong { font-size: 1.1rem; } }
.text-caption-bold { font-size: 1rem; font-weight: 700; line-height: 2.17; }
@media (min-width: 1024px) { .text-caption-bold { font-size: 1.1rem; } }
.text-caption-extra { font-size: 1rem; font-weight: 800; line-height: 2.17; }
@media (min-width: 1024px) { .text-caption-extra { font-size: 1.1rem; } }