body {
    background-color: var(--brand-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
@font-face {
    font-family: "Lahzeh";
    src:
        url("./fonts/Lahzeh-FamilyVF.woff2") format("woff2"),
        url("./fonts/Lahzeh-FamilyVF.woff") format("woff");
    font-style: normal;
    font-display: swap;
    font-variation-settings: "wght" var(--font-weight, 400);
}
@font-face {
    font-family: "Vazir";
    src: url("./fonts/Vazirmatn.ttf") format("truetype");
}

* {
    font-family: "Vazir", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --font-display-2xl: clamp(3rem, 1.6rem + 2vw, 3.75rem); /* 48px → 60px */
    --line-display-2xl: 1.25;
    --letter-display-2xl: -0.02em;

    --font-display-xl: clamp(2.5rem, 1.4rem + 1.8vw, 3rem); /* 40px → 48px */
    --line-display-xl: 1.25;
    --letter-display-xl: -0.02em;

    --font-display-lg: clamp(1.875rem, 1.2rem + 1.5vw, 2.5rem); /* 30px → 40px */
    --line-display-lg: 1.22;
    --letter-display-lg: -0.02em;

    --font-display-md: clamp(1.625rem, 0.8rem + 1.2vw, 1.875rem); /* 26px → 30px */
    --line-display-md: 1.22;
    --letter-display-md: -0.02em;

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

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

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

    --font-text-lg: clamp(0.875rem, 0.7rem + 0.4vw, 0.9375rem); /* 14px → 15px */
    --line-text-lg: 1.56;
    --letter-text-lg: -0.02em;

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

    --font-text-sm: clamp(0.625rem, 0.5rem + 0.35vw, 0.75rem); /* 10px → 12px */
    --line-text-sm: 1.43;
    --letter-text-sm: -0.02em;

    --font-text-xs: clamp(0.6rem, 0.45rem + 0.3vw, 0.6875rem); /* 8px → 11px */
    --line-text-xs: 1.5;
    --letter-text-xs: -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: #f5fbff;
    --brand-50: #f0f9ff;
    --brand-100: #e0f2fe;
    --brand-200: #b9e6fe;
    --brand-300: #7cd4fd;
    --brand-400: #36bffa;
    --brand-500: #0ba5ec;
    --brand-600: #0086c9;
    --brand-700: #026aa2;
    --brand-800: #065986;
    --brand-900: #0b4a6f;

    /* 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;
}

.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);
}

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

.color-500 {
    color: var(--gray-500);
}
.color-600 {
    color: var(--gray-600);
}
.color-700 {
    color: var(--gray-700);
}
.color-800 {
    color: var(--gray-800);
}
.color-900 {
    color: var(--gray-900);
}
.color-1000 {
    color: var(--gray-1000);
}

.color-blue-500 {
    color: var(--brand-500);
}
.color-blue-600 {
    color: var(--brand-600);
}
.color-blue-700 {
    color: var(--brand-700);
}
.color-blue-800 {
    color: var(--brand-800);
}
.color-blue-900 {
    color: var(--brand-900);
}
.color-blue-1000 {
    color: var(--brand-1000);
}

body {
    background-color: var(--brand-25);
    direction: rtl;
}
a {
    text-decoration: none;
}
body::-webkit-scrollbar {
    width: 6px;
}
body::-webkit-scrollbar-track {
    background-color: var(--gray-0);
}
body::-webkit-scrollbar-thumb {
    background-color: var(--brand-500);
}
.wrapper {
    margin-inline: 10%;
    width: 80%;
    max-width: 1440px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.navbar-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-0);
}
.navbar {
    margin-inline: 10%;
    width: 80%;
    max-width: 1440px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--gray-100);
    padding-block: 16px;
}
.navbar-link-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}
.navbar-link:nth-child(2) {
    padding-right: 12px;
}
.navbar-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
}
.dropdown-menu {
    position: absolute;
    top: 24px;
    right: 0px;
    z-index: 10;
    background-color: var(--gray-0);
    width: 350px;
    padding-inline: 24px;
    padding-block: 24px;
    border: 2px solid var(--gray-200);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    border-radius: 12px;
}
.dropdown-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.phone-navbar {
    display: none;
}
.phone-navbar-menu {
    display: none;
}
.show-dropdown {
    display: flex;
}
.navbar-account-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: var(--gray-200);
    padding-inline: 12px;
    padding-block: 6px;
    border-radius: 12px;
}
.navbar-account-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.navbar-account-container {
    margin-block: 12px;
}
.time-choice-container {
    width: fit-content;
    background-color: var(--brand-100);
    padding-inline: 16px;
    padding-block: 6px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
}
.time-choice-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.time-choice-start input {
    background-color: var(--brand-200);
    border-radius: 16px;
    border: none;
    padding-inline: 12px;
    width: 100px;
    height: 24px;
}

.text-input-container {
    width: 400px;
    display: flex;
    align-items: center;
}
.text-input-container input {
    flex-grow: 1;
    border: 1px solid var(--gray-200);
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    padding-inline: 12px;
    padding-block: 9px;
}
.text-input-container p {
    border: 1px solid var(--gray-200);
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    width: 70px;
    padding-block: 9px;
    text-align: center;
}
.filter-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-inline: 16px;
    padding-block: 8px;
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    background-color: var(--gray-0);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
}
.filter-menu {
    width: 450px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 20px));
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    background-color: var(--gray-0);
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    z-index: 9;
    padding: 24px;
    transition:
        transform 0.4s ease,
        opacity 0.4s ease,
        visibility 0s 0.4s;
}
.opened-filter-menu {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform 0.4s ease,
        opacity 0.4s ease,
        visibility 0s 0s;
}
.filter-menu-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-200);
}
.filter-menu-row-body {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}
.unit-selection {
    width: 100%;
    padding-inline: 12px;
    padding-block: 4px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
}
.notification-type-selection-wrapper {
    padding-inline: 16px;
    padding-block: 6px;
    border-radius: 50px;
    background-color: var(--gray-200);
    color: var(--gray-700);
    cursor: pointer;
}
.notification-type-selection-wrapper input[type="radio"] {
    display: none;
}
.notification-type-selection-wrapper:has(input[type="radio"]:checked) {
    background-color: var(--brand-100);
    color: var(--brand-500);
}
.time-choice-container {
    background-color: var(--gray-100);
}
.time-choice-start input {
    background-color: var(--gray-200);
}

@media (max-width: 768px) {
    .filter-menu {
        width: 96%;
        background-color: var(--gray-25);
    }
    .time-choice-container {
        gap: 12px;
        margin-right: 0;
    }
    .time-choice-container input {
        width: 100px;
        padding-block: 2px;
    }
    .time-choice-start {
        gap: 4px;
    }
    .wrapper {
        width: 100%;
        padding-inline: 16px;
    }
    .phone-navbar {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline: 20px;
        padding-block: 24px;
    }
    .phone-navbar-menu {
        display: none;
    }
    .navbar {
        display: none;
    }
    .phone-navbar-menu {
        position: fixed;
        width: 100%;
        background-color: var(--gray-0);
        top: 0;
        right: -100%;
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
        padding-block: 24px;
        padding-inline: 20px;
        height: 100vh;
        transition: all ease 0.4s;
    }
    .phone-navbar-header {
        width: 100%;
    }
    .phone-navbar-body {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .phone-navbar-body-link {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .device-menu-button {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
    }
    #device-menu-rotator {
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%) rotate(0deg);
        transition: transform 0.3s ease;
    }
    #device-menu-rotator.rotated {
        transform: translateY(-50%) rotate(180deg);
    }
    .device-menu {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background-color: var(--gray-100);
        padding: 12px;
        border-radius: 12px;
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        transition:
            max-height 0.35s ease,
            padding 0.35s ease;
    }
    .device-menu.open {
        max-height: 500px;
        padding: 12px;
    }
}