@import url('main-product-card.combine.css');
@import url('main-cart.combine.css');
@import url('main-order-card.combine.css');
:root{    
    --font-primary: Inter, 'Quinoa Bold', system-ui, sans-serif;
    --font-secondary: var(--font-primary);

    /* Colors */
    --primary: #f75b06;
    --primary-rgb: 247, 91, 6;
    --primary-hover: hsl(21, 95%, 55%);

    --secondary: rgb(255, 126, 13); /* 14b8a6 a2e773 */
    --secondary-rgb: 255, 126, 13;
    --secondary-hover: rgb(255, 171, 26);

    --accent: #06B6D4; /**/

    --dark: #483838;
    --dark-light: hsl(60 2.6% 9%);
    --dark-dark: hsl(60 2.6% 5%);

    --light: #f2f3f4;

    --light-light: #fef4ea;
    --light-dark: #fcead7;
    --light-gray: #eaf0f6;

    --success: #10B981; /*#10B981*/
    --danger: #EF4444;
    --warning: #F59E0B; /*#F59E0B*/
    --info: #23c2f2; /*#3B82F6*/


    /* Main Body */
    --wrap: 1280px;

    --body-bg: #fbfbfb; /* #F8FAFC mist white*/
    --body-bg-2: #F8FAFC;
    --code-bg: #F1F5F9;
    --section-bg: #fff;

    
    

    /* text color */
    --text-primary: #222;
    --text-secondary: #333;
    --text-muted: #6b7280;
    --text-muted-opacity: 1;
    --text-gradient: linear-gradient(135deg, var(--primary), var(--secondary) 90%);

    

    --a: #3371E3;
    --a-hover: var(--primary);
    --i-color: var(--a-hover); /* icon in links & headings */

    
    /* Gradient BGs */
    /* --primary-grade: linear-gradient(-90deg,#8100d8b3 2.16%,#eb31fba1 132.3%), #1cb67e; */
    --primary-grade: linear-gradient(223deg, rgb(255, 45, 13) 0%, rgb(255, 94, 26) 25%, rgb(255, 100, 0) 50%, rgb(255, 126, 13) 75%, rgb(255, 171, 26) 100%);
    --primary-grade-h: linear-gradient(-223deg, rgb(255, 45, 13) 0%, rgb(255, 94, 26) 25%, rgb(255, 100, 0) 50%, rgb(255, 126, 13) 75%, rgb(255, 171, 26) 100%);

    --secondary-grade: linear-gradient(135deg, var(--primary), var(--secondary));
    --radial-gradient: radial-gradient(400px 180px at 51.47% 0.07%, #2b3953, #0b1525);
    

    /* border-radius */
    --radius: 10px;
    --radius-sm: 4px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    

    /* spacing */
    --padding: 1.25rem;

    /* font */    
    /* --font-primary: Poppins, Changa, Tahoma, system-ui, sans-serif;
    --font-secondary: Poppins, Tahoma, system-ui, sans-serif; */
    --font-size: 17px;
    --line-height: 1.6;   

    /* header & header panels */
    --header-height: 122px;
    --header-bg: #fff;
    --h-menu-margin: 30px;
    --header-logo-h: 45px;
    --header-logo-w: 100px;

    --h-panel: #fff;
    --h-panel-radius: var(--radius);
        
    --app-menu-bg: #fff;
    
    --border: 1px solid rgb(229 231 235);
    
    /* box shadows */
    --box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    --box-shadow-lg: 0 2px 4px -1px rgba(29,29,32,.16),0 4px 5px rgba(29,29,32,.05),0 1px 10px rgba(29,29,32,.08);
    --box-shadow-lg: 0 0 10px 5px rgba(29,29,32,.09);
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

    --inset: inset 0 -2px 4px rgba(var(--primary-rgb), .04);


    /* Forms */
    --input-bg: var(--light);
    --input-disabled-bg: #eee;
    --input-radius: var(--radius);
    --input-border: 1px solid rgb(0 0 0 / 7%);
    --input-shadow: none;
    --input-height: 50px;
    --input-padding: 12px 16px;
    --input-margin: 10px;
    /* --input-focus-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(10 132 255 / 60%) 0px 0px 0px 4px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(60 66 87 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 3px 9px 0px, rgb(60 66 87 / 12%) 0px 2px 5px 0px; */
    --input-focus-shadow: 0 0 0 3px rgba(var(--primary-rgb), .2);
    --input-focus-border: 1px solid var(--primary);    

    /* open box */
    --ob-footerBg: var(--light);

    --aside-nav-width: 250px;

    --swiper-navigation-color: var(--text-primary);

}
.darkMode{
    /*--success: #34D399;
    --warning: #FBBF24;
    --danger: #F87171;

    --body-bg: #0F172A;
    --section-bg: #334155;

    --text-primary: #fff;
    --text-secondary: #F8FAFC;
    --text-muted: #c9d1d9;
    
    --border: 1px solid #334155;*/

    /* ── Brand colors (kept vivid, slightly softened for dark bg) */
    --primary: #ff6a1f;
    --primary-rgb: 255, 106, 31;
    --primary-hover: hsl(21, 100%, 62%);

    --secondary: rgb(255, 145, 40);
    --secondary-rgb: 255, 145, 40;
    --secondary-hover: rgb(255, 185, 60);

    --accent: #22d3ee;

    /* ── Dark scale (inverted roles) */
    --dark: #e8dede;                     /* was near-black → now near-white for contrast */
    --dark-light: hsl(60, 4%, 92%);
    --dark-dark: hsl(60, 4%, 96%);

    /* ── Light scale → becomes "dark" surfaces */
    --light: #1e1e24;                    /* replaces #f2f3f4 */
    --light-light: #2a1f18;             /* warm-dark tint (was warm-light) */
    --light-dark: #332214;              /* deeper warm-dark */
    --light-gray: #1a2130;              /* cool-dark tint (was light-gray) */

    /* ── Status colors (slightly brightened for dark bg readability) */
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --info: #38bdf8;


    /* ── Main body surfaces */
    --body-bg: #0f0f13;                 /* deepest background */
    --body-bg-2: #13131a;
    --code-bg: #1a1a24;
    --section-bg: #18181f;             /* card / section surface */


    /* ── Text */
    --text-primary: #f0f0f2;
    --text-secondary: #d1d1d8;
    --text-muted: #8b92a5;
    --text-muted-opacity: 0.85;
    --text-gradient: linear-gradient(135deg, var(--primary), var(--secondary) 90%);


    /* ── Links */
    --a: #60a5fa;
    --a-hover: var(--primary);
    --i-color: var(--a-hover);


    /* ── Gradient backgrounds (brand gradients stay vivid) */
    --primary-grade: linear-gradient(223deg, rgb(220, 38, 10) 0%, rgb(240, 80, 20) 25%, rgb(245, 90, 0) 50%, rgb(255, 120, 10) 75%, rgb(255, 165, 20) 100%);
    --primary-grade-h: linear-gradient(-223deg, rgb(220, 38, 10) 0%, rgb(240, 80, 20) 25%, rgb(245, 90, 0) 50%, rgb(255, 120, 10) 75%, rgb(255, 165, 20) 100%);
    --secondary-grade: linear-gradient(135deg, var(--primary), var(--secondary));
    --radial-gradient: radial-gradient(400px 180px at 51.47% 0.07%, #0d1526, #05090f);


    /* ── Border */
    --border: 1px solid rgb(255 255 255 / 8%);


    /* ── Box shadows (deeper & darker for layering on dark bg) */
    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --box-shadow-lg: 0 0 14px 6px rgba(0, 0, 0, 0.35);
    --box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --inset: inset 0 -2px 4px rgba(var(--primary-rgb), 0.07);


    /* ── Header */
    --header-bg: #13131a;
    --h-panel: #18181f;
    --app-menu-bg: #18181f;


    /* ── Forms */
    --input-bg: #1e1e28;
    --input-disabled-bg: #2a2a35;
    --input-border: 1px solid rgb(255 255 255 / 10%);
    --input-shadow: none;
    --input-focus-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.28);
    --input-focus-border: 1px solid var(--primary);


    /* ── Open box */
    --ob-footerBg: #1e1e28;

    /* ── Swiper */
    --swiper-navigation-color: var(--text-primary);
}




.err404 img{
    height: 200px;
    margin: 0;
    opacity: .85;
}

.input i{
    --size: 24px;
}
.input .ico{
    top: 1px;
    right: 10px;
}

.btn{
    padding-block: 7px;
}
.input.phone > i:not(.ico){
    display: none;
}
.input.phone input{
    padding-left: 1rem !important;
}

.card{
    border: var(--border);
}


.walletBallance > div{
    border-radius: var(--radius-lg);
    padding: 1rem;
    background-color: #F18F0127;
    box-shadow: inset 0px 0px 5px rgb(0 0 0 / 5%);
    margin-bottom: 1rem;
    font-size: 1.7rem;
    font-weight: 700;
}
.cashRevDiff.minus{
    background-color: #db162f27;
}
.cashRevDiff.plus{
    background-color: #12745527;
}

:is(span, a).status {
    background-color: var(--primary) !important;
    color: #fff !important;
    --color: var(--secondary) !important;
}

[class^="counter-"]:not([data-count="0"]) + i{
    animation: none;
}

label.switch:has(input:checked) .togglemark{
    background: var(--primary-grade);
}
label.switch .on{
    color: var(--primary);
}

.qsearch-wrapper :is(.dropdown-footer, .result-arrow, .result-count) {
    display: none;
}