@font-face {
    font-family: 'shazde';
    src: url('./font/Shazde VF.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'shazde', sans-serif;
}
::selection {
    background-color: var(--brand-400); 
    color: var(--gray-800);               
}
a{
    text-decoration: none;
}
html{
    scroll-behavior: smooth;
}
body{
    background-color: var(--gray-0);
    color: var(--gray-900);
    overflow-x:hidden;
}
body::-webkit-scrollbar {
    width: 6px;
}
body::-webkit-scrollbar-track {
    background-color: var(--gray-25);
}
body::-webkit-scrollbar-thumb {
    background-color: var(--brand-700);
}


:root {
    --font-display-2xl: clamp(3rem, 2rem + 2.5vw, 4.5rem);   /* 36px → 72px */
    --line-display-2xl: 1.25;
    --letter-display-2xl: -0.02em;

    --font-display-xl: clamp(2rem, 1.1rem + 2.5vw, 3.75rem);    /* 32px → 60px */
    --line-display-xl: 1.2;
    --letter-display-xl: -0.02em;

    --font-display-lg: clamp(1.75rem, 1rem + 2vw, 3rem);        /* 28px → 48px */
    --line-display-lg: 1.25;
    --letter-display-lg: -0.02em;

    --font-display-md: clamp(1.5rem, 0.9rem + 1.5vw, 2.25rem);  /* 24px → 36px */
    --line-display-md: 1.22;
    --letter-display-md: -0.02em;

    --font-display-xs: clamp(1rem, 0.7rem + 0.7vw, 1.25rem);    /* 16px → 20px */
    --line-display-xs: 1.5;
    --letter-display-xs: -0.02em;

    --font-text-xl: clamp(1rem, 0.8rem + 0.5vw, 1.125rem);      /* 16px → 18px */
    --line-text-xl: 1.56;
    --letter-text-xl: -0.02em;

    --font-text-lg: clamp(0.875rem, 0.7rem + 0.5vw, 1rem);      /* 14px → 16px */
    --line-text-lg: 1.5;
    --letter-text-lg: -0.02em;

    --font-text-md: clamp(0.75rem, 0.6rem + 0.4vw, 0.875rem);   /* 12px → 14px */
    --line-text-md: 1.43;
    --letter-text-md: -0.02em;

    --font-text-sm: clamp(0.6875rem, 0.5rem + 0.3vw, 0.75rem);  /* 11px → 12px */
    --line-text-sm: 1.5;
    --letter-text-sm: -0.02em;

    --font-text-xs: clamp(0.7rem, 0.5rem + 0.35vw, 0.8rem);   /* 10px → 12px */
    --line-text-xs: 1.5;
    --letter-text-xs: -0.02em;

    --font-text-2xs: clamp(0.5625rem, 0.45rem + 0.2vw, 0.625rem); /* 8px → 10px */
    --line-text-2xs: 1.5;
    --letter-text-2xs: -0.02em;

    --font-text-3xs: clamp(0.4375rem, 0.35rem + 0.2vw, 0.5rem);   /* 6px → 8px */
    --line-text-3xs: 1.5;
    --letter-text-3xs: -0.02em;

    



    
    /* Gray */
    --gray-0:   #FFFFFF;
    --gray-25:  #FDFDFD;
    --gray-50:  #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #E9EAEB;
    --gray-300: #D5D7DA;
    --gray-400: #A4A7AE;
    --gray-500: #717680;
    --gray-600: #535862;
    --gray-700: #414651;
    --gray-800: #252B37;
    --gray-900: #101828;
    --gray-1000: #000000;

    /* Brand */
    --brand-25:  #FCFAFF;
    --brand-50:  #F9F5FF;
    --brand-100: #F4EBFF;
    --brand-200: #E9D7FE;
    --brand-300: #D6BBFB;
    --brand-400: #B692F6;
    --brand-500: #9E77ED;
    --brand-600: #7F56D9;
    --brand-700: #6941C6;
    --brand-800: #53389E;
    --brand-900: #42307D;

    /* Error */
    --error-25:  #FFFBFA;
    --error-50:  #FEF3F2;
    --error-100: #FEE4E2;
    --error-200: #FECDCA;
    --error-300: #FDA29B;
    --error-400: #F97066;
    --error-500: #F04438;
    --error-600: #D92D20;
    --error-700: #B42318;
    --error-800: #912018;
    --error-900: #7A271A;

    /* Warning */
    --warning-25:  #FFFCF5;
    --warning-50:  #FFFAEB;
    --warning-100: #FEF0C7;
    --warning-200: #FEDF89;
    --warning-300: #FEC84B;
    --warning-400: #FDB022;
    --warning-500: #F79009;
    --warning-600: #DC6803;
    --warning-700: #B54708;
    --warning-800: #93370D;
    --warning-900: #7A2E0E;

    /* Success */
    --success-25:  #F6FEF9;
    --success-50:  #ECFDF3;
    --success-100: #D1FADF;
    --success-200: #A6F4C5;
    --success-300: #6CE9A6;
    --success-400: #32D583;
    --success-500: #12B76A;
    --success-600: #039855;
    --success-700: #027A48;
    --success-800: #05603A;
    --success-900: #054F31;
    

}


/* FONT SIZE, LINE HEIGHT, LETTER SPACING */
.text-display-2xl { font-size: var(--font-display-2xl); line-height: var(--line-display-2xl); letter-spacing: var(--letter-display-2xl); }
.text-display-xl  { font-size: var(--font-display-xl); line-height: var(--line-display-xl); letter-spacing: var(--letter-display-xl); }
.text-display-lg  { font-size: var(--font-display-lg); line-height: var(--line-display-lg); letter-spacing: var(--letter-display-lg); }
.text-display-md  { font-size: var(--font-display-md); line-height: var(--line-display-md); letter-spacing: var(--letter-display-md); }
.text-display-xs  { font-size: var(--font-display-xs); line-height: var(--line-display-xs); letter-spacing: var(--letter-display-xs); }
.text-xl { font-size: var(--font-text-xl); line-height: var(--line-text-xl); letter-spacing: var(--letter-text-xl); }
.text-lg { font-size: var(--font-text-lg); line-height: var(--line-text-lg); letter-spacing: var(--letter-text-lg); }
.text-md { font-size: var(--font-text-md); line-height: var(--line-text-md); letter-spacing: var(--letter-text-md); }
.text-sm { font-size: var(--font-text-sm); line-height: var(--line-text-sm); letter-spacing: var(--letter-text-sm); }
.text-xs { font-size: var(--font-text-xs); line-height: var(--line-text-xs); letter-spacing: var(--letter-text-xs); }
.text-2xs { font-size: var(--font-text-2xs); line-height: var(--line-text-2xs); letter-spacing: var(--letter-text-2xs); }
.text-3xs { font-size: var(--font-text-3xs); line-height: var(--line-text-3xs); letter-spacing: var(--letter-text-3xs); }


/* FONT WEIGHTS */
.font-400 { font-weight: 400; } /* Regular */
.font-500 { font-weight: 500; } /* Medium */
.font-600 { font-weight: 600; } /* SemiBold */
.font-700 { font-weight: 700; } /* Bold */



/* ===============================
   TEXT COLORS
=============================== */
.text-gray-0   { color: var(--gray-0); }
.text-gray-25   { color: var(--gray-25); }
.text-gray-50   { color: var(--gray-50); }
.text-gray-100  { color: var(--gray-100); }
.text-gray-200  { color: var(--gray-200); }
.text-gray-300  { color: var(--gray-300); }
.text-gray-400  { color: var(--gray-400); }
.text-gray-500  { color: var(--gray-500); }
.text-gray-600  { color: var(--gray-600); }
.text-gray-700  { color: var(--gray-700); }
.text-gray-800  { color: var(--gray-800); }
.text-gray-900  { color: var(--gray-900); }
.text-gray-1000  { color: var(--gray-1000); }

.text-brand-25  { color: var(--brand-25); }
.text-brand-50  { color: var(--brand-50); }
.text-brand-100 { color: var(--brand-100); }
.text-brand-200 { color: var(--brand-200); }
.text-brand-300 { color: var(--brand-300); }
.text-brand-400 { color: var(--brand-400); }
.text-brand-500 { color: var(--brand-500); }
.text-brand-600 { color: var(--brand-600); }
.text-brand-700 { color: var(--brand-700); }
.text-brand-800 { color: var(--brand-800); }
.text-brand-900 { color: var(--brand-900); }

.text-error-25  { color: var(--error-25); }
.text-error-50  { color: var(--error-50); }
.text-error-100 { color: var(--error-100); }
.text-error-200 { color: var(--error-200); }
.text-error-300 { color: var(--error-300); }
.text-error-400 { color: var(--error-400); }
.text-error-500 { color: var(--error-500); }
.text-error-600 { color: var(--error-600); }
.text-error-700 { color: var(--error-700); }
.text-error-800 { color: var(--error-800); }
.text-error-900 { color: var(--error-900); }

.text-warning-25  { color: var(--warning-25); }
.text-warning-50  { color: var(--warning-50); }
.text-warning-100 { color: var(--warning-100); }
.text-warning-200 { color: var(--warning-200); }
.text-warning-300 { color: var(--warning-300); }
.text-warning-400 { color: var(--warning-400); }
.text-warning-500 { color: var(--warning-500); }
.text-warning-600 { color: var(--warning-600); }
.text-warning-700 { color: var(--warning-700); }
.text-warning-800 { color: var(--warning-800); }
.text-warning-900 { color: var(--warning-900); }

.text-success-25  { color: var(--success-25); }
.text-success-50  { color: var(--success-50); }
.text-success-100 { color: var(--success-100); }
.text-success-200 { color: var(--success-200); }
.text-success-300 { color: var(--success-300); }
.text-success-400 { color: var(--success-400); }
.text-success-500 { color: var(--success-500); }
.text-success-600 { color: var(--success-600); }
.text-success-700 { color: var(--success-700); }
.text-success-800 { color: var(--success-800); }
.text-success-900 { color: var(--success-900); }


/* ===============================
   BACKGROUND COLORS
=============================== */
.bg-gray-0   { background-color: var(--gray-0); }
.bg-gray-25   { background-color: var(--gray-25); }
.bg-gray-50   { background-color: var(--gray-50); }
.bg-gray-100  { background-color: var(--gray-100); }
.bg-gray-200  { background-color: var(--gray-200); }
.bg-gray-300  { background-color: var(--gray-300); }
.bg-gray-400  { background-color: var(--gray-400); }
.bg-gray-600  { background-color: var(--gray-600); }
.bg-gray-700  { background-color: var(--gray-700); }
.bg-gray-800  { background-color: var(--gray-800); }
.bg-gray-900  { background-color: var(--gray-900); }

.bg-brand-25  { background-color: var(--brand-25); }
.bg-brand-50  { background-color: var(--brand-50); }
.bg-brand-100 { background-color: var(--brand-100); }
.bg-brand-200 { background-color: var(--brand-200); }
.bg-brand-300 { background-color: var(--brand-300); }
.bg-brand-400 { background-color: var(--brand-400); }
.bg-brand-500 { background-color: var(--brand-500); }
.bg-brand-600 { background-color: var(--brand-600); }
.bg-brand-700 { background-color: var(--brand-700); }
.bg-brand-800 { background-color: var(--brand-800); }
.bg-brand-900 { background-color: var(--brand-900); }

.bg-error-25  { background-color: var(--error-25); }
.bg-error-50  { background-color: var(--error-50); }
.bg-error-100 { background-color: var(--error-100); }
.bg-error-200 { background-color: var(--error-200); }
.bg-error-300 { background-color: var(--error-300); }
.bg-error-400 { background-color: var(--error-400); }
.bg-error-500 { background-color: var(--error-500); }
.bg-error-600 { background-color: var(--error-600); }
.bg-error-700 { background-color: var(--error-700); }
.bg-error-800 { background-color: var(--error-800); }
.bg-error-900 { background-color: var(--error-900); }

.bg-warning-25  { background-color: var(--warning-25); }
.bg-warning-50  { background-color: var(--warning-50); }
.bg-warning-100 { background-color: var(--warning-100); }
.bg-warning-200 { background-color: var(--warning-200); }
.bg-warning-300 { background-color: var(--warning-300); }
.bg-warning-400 { background-color: var(--warning-400); }
.bg-warning-500 { background-color: var(--warning-500); }
.bg-warning-600 { background-color: var(--warning-600); }
.bg-warning-700 { background-color: var(--warning-700); }
.bg-warning-800 { background-color: var(--warning-800); }
.bg-warning-900 { background-color: var(--warning-900); }

.bg-success-25  { background-color: var(--success-25); }
.bg-success-50  { background-color: var(--success-50); }
.bg-success-100 { background-color: var(--success-100); }
.bg-success-200 { background-color: var(--success-200); }
.bg-success-300 { background-color: var(--success-300); }
.bg-success-400 { background-color: var(--success-400); }
.bg-success-500 { background-color: var(--success-500); }
.bg-success-600 { background-color: var(--success-600); }
.bg-success-700 { background-color: var(--success-700); }
.bg-success-800 { background-color: var(--success-800); }
.bg-success-900 { background-color: var(--success-900); }


/* ===============================
   BORDER COLORS
=============================== */
.border-gray-0   { border-color: var(--gray-0); }
.border-gray-25   { border-color: var(--gray-25); }
.border-gray-50   { border-color: var(--gray-50); }
.border-gray-100  { border-color: var(--gray-100); }
.border-gray-200  { border-color: var(--gray-200); }
.border-gray-300  { border-color: var(--gray-300); }
.border-gray-400  { border-color: var(--gray-400); }
.border-gray-600  { border-color: var(--gray-600); }
.border-gray-700  { border-color: var(--gray-700); }
.border-gray-800  { border-color: var(--gray-800); }
.border-gray-900  { border-color: var(--gray-900); }

.border-brand-25  { border-color: var(--brand-25); }
.border-brand-50  { border-color: var(--brand-50); }
.border-brand-100 { border-color: var(--brand-100); }
.border-brand-200 { border-color: var(--brand-200); }
.border-brand-300 { border-color: var(--brand-300); }
.border-brand-400 { border-color: var(--brand-400); }
.border-brand-500 { border-color: var(--brand-500); }
.border-brand-600 { border-color: var(--brand-600); }
.border-brand-700 { border-color: var(--brand-700); }
.border-brand-800 { border-color: var(--brand-800); }
.border-brand-900 { border-color: var(--brand-900); }

.border-error-25  { border-color: var(--error-25); }
.border-error-50  { border-color: var(--error-50); }
.border-error-100 { border-color: var(--error-100); }
.border-error-200 { border-color: var(--error-200); }
.border-error-300 { border-color: var(--error-300); }
.border-error-400 { border-color: var(--error-400); }
.border-error-500 { border-color: var(--error-500); }
.border-error-600 { border-color: var(--error-600); }
.border-error-700 { border-color: var(--error-700); }
.border-error-800 { border-color: var(--error-800); }
.border-error-900 { border-color: var(--error-900); }

.border-warning-25  { border-color: var(--warning-25); }
.border-warning-50  { border-color: var(--warning-50); }
.border-warning-100 { border-color: var(--warning-100); }
.border-warning-200 { border-color: var(--warning-200); }
.border-warning-300 { border-color: var(--warning-300); }
.border-warning-400 { border-color: var(--warning-400); }
.border-warning-500 { border-color: var(--warning-500); }
.border-warning-600 { border-color: var(--warning-600); }
.border-warning-700 { border-color: var(--warning-700); }
.border-warning-800 { border-color: var(--warning-800); }
.border-warning-900 { border-color: var(--warning-900); }

.border-success-25  { border-color: var(--success-25); }
.border-success-50  { border-color: var(--success-50); }
.border-success-100 { border-color: var(--success-100); }
.border-success-200 { border-color: var(--success-200); }
.border-success-300 { border-color: var(--success-300); }
.border-success-400 { border-color: var(--success-400); }
.border-success-500 { border-color: var(--success-500); }
.border-success-600 { border-color: var(--success-600); }
.border-success-700 { border-color: var(--success-700); }
.border-success-800 { border-color: var(--success-800); }
.border-success-900 { border-color: var(--success-900); }


a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

a:focus,
a:active {
    outline: none;
    background-color: transparent;
}
.header-navigation{
    width: 100%;
    direction: rtl;
    background-color: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-inline: 16px;
    gap: 8px;
    padding-block: 24px;
}
.header-navigation a{
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="checkbox"], input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--gray-200);
    background-color: var(--gray-0);
    position: relative;
    cursor: pointer;
}

input[type="checkbox"] {
    border-radius: 4px;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: var(--brand-100);
    border-color: var(--brand-700);
}

input[type="checkbox"]:checked::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--brand-700);
    font-size: 14px;
    font-weight: bold;
}

input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--brand-700);
    border-radius: 50%;
}

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea {
    border: 1px solid var(--brand-600);
    background-color: var(--gray-50);
    padding-inline: 12px;
    padding-block: 8px;
    border-radius: 8px;
    font-family: inherit;
    
}

input[type="text"].error, input[type="email"].error, input[type="password"].error, input[type="tel"].error, input[type="number"].error, textarea.error {
    border-color: var(--error-500);
    color: var(--error-500);
}
.verify-button{
    direction: rtl;
    width: calc(100% - 32px);
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50% , 0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 14px;
    padding-inline: 18px;
    background-color: var(--brand-600);
    min-height: 40px;
    z-index: 99;
    max-width: 600px;
    border: none;
    outline: none;
    cursor: pointer;
    color: var(--gray-0);
}

.page-underbar{
    width: 94%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding-block: 6px;
    padding-inline: 36px;
    position: fixed;
    bottom: 10px;
    left: 50%;
    max-width: 600px;
    transform: translate(-50% , 0);
    direction: rtl;
    background-color: var(--brand-50);
    /* background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0px 1px 8px 0px #0000004D inset; */
    border-radius: 50px;
}


.page-underbar-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}




.page-underbar-item-active p{
    display: block;
}

#cart-popup{
    width: fit-content;
    display:none;
    position:absolute;
    position-anchor: --cart-container;
    top: anchor(bottom);
    left: 16px;
    background:var(--brand-400);
    padding-block:10px;
    padding-inline: 16px;
    border-radius:16px;
    z-index:1000;
    white-space:nowrap;
}

.pop-up-section{
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 8px;
    padding-inline: 12px;
    border-radius: 8px;
    z-index: 999;
    transition: top 0.4s ease;
    text-align: right;
    direction: rtl;
}
.pop-up-section.show{
    top: 20px;
}
.pop-up-section-success{
    background-color: var(--success-100);
    border: 1px solid var(--success-500);
    color: var(--success-500);
}
.pop-up-section-error{
    background-color: var(--error-100);
    border: 1px solid var(--error-500);
    color: var(--error-500);
}
.pop-up-section-info{
    background-color: var(--warning-100);
    border: 1px solid var(--warning-500);
    color: var(--warning-500);
}


@media(max-width: 600px){
    .pop-up-section{
        width: fit-content;
        padding-inline: 32px;
        white-space: nowrap;
    }
    .page-underbar{
        padding-inline: 24px;
        border-radius: 24px;
    }
}
@media(max-width: 450px){
    .page-underbar{
        padding-inline: 12px;
    }
}