@import url(reset.css);
:root {
    /* Padding */
    --padding-xs: 4px;
    --padding-sm: 8px;
    --padding-md: 12px;
    --padding-lg: 16px;
    --padding-xl: 24px;
    --padding-2xl: 32px;
    --padding-3xl: 40px;
    /* Spacing */
    --spacing-0: 0px;
    --spacing-2: 2:0px;
    --spacing-4: 4:0px;
    --spacing-8: 8:0px;
    --spacing-12: 12:0px;
    --spacing-16: 16:0px;
    --spacing-20: 20:0px;
    --spacing-24: 24:0px;
    --spacing-28: 28:0px;
    --spacing-32: 32:0px;
    --spacing-36: 36:0px;
    --spacing-40: 40:0px;
    --spacing-48: 48:0px;
    --spacing-56: 56:0px;
    --spacing-64: 64:0px;
    --spacing-72: 72:0px;
    --spacing-80: 80:0px;
    --spacing-88: 88:0px;
    --spacing-96: 96:0px;
    /* Font Weight */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    /* Font Sizes */
    --font-size-2xs: 10px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    /* Gaps */
    --gap-2xs: 0px;
    --gap-xs: 4px;
    --gap-md: 12px;
    --gap-lg: 16px;
    --gap-xl: 24px;
    --gap-2xl: 32px;
    --gap-3xl: 40px;
    --gap-4xl: 48px;
    /* Radius ----- */
    --radius-2xs: 0px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 96px;
    /* ----- ----- ----- */
    /* Neutral Colors */
    --color-text: #1d3557;
    --color-background: #f8f9fa;
    --color-border: #ced4da;
    --color-neutral-gray-100: #f0f0f0;
    --color-neutral-gray-200: #d6d6d6;
    --color-neutral-gray-300: #a5a5a5;
    --color-neutral-gray-400: #828282;
    --color-neutral-gray-500: #4e4e4e;
    --color-neutral-gray-600: #2b2b2b;
    /* Base Color Palette ---------- */
    --color-base-100: #47606C;
    --color-base-200: #263238;
    --color-base-300: #18242A;
    --color-base-white: #ffffff;
    /* Background ---------- */
    --background-color-light: var(--color-base-100);
    --background-color-medium: var(--color-base-200);
    --background-color-dark: var(--color-base-300);
    --background-color-100: #47606C;
    --background-color-200: #263238;
    --background-color-300: #18242A;
    /* Text ---------- */
    --text-color-primary: var(--color-base-white);
    --text-color-secondary: var(--color-neutral-gray-200);
    --text-color-tertiary: #A5A5A5;
    --text-color-body-secondary: #D6D6D6;
    /* Primary Color Palette ---------- */
    --color-primary-100: #E6FFFD;
    --color-primary-200: #B6EEEE;
    --color-primary-300: #18BAAC;
    --color-primary-400: #498A8A;
    --color-primary-500: #345758;
    --color-primary-600: #2D7E51;
    --color-secondary: #9b2226;
    --color-accent: #ffb703;
    /* Accent Color Palette ---------- */
    --color-accent-100: #FCE0D8;
    --color-accent-200: #F8B29D;
    --color-accent-300: #F0653B;
    --color-accent-400: #B24B2C;
    --color-accent-500: #5D2E20;
    /* Static Red */
    --color-red-100: #FFEBEC;
    --color-red-200: #FFA8A8;
    --color-red-300: #E63946;
    --color-red-400: #A40D12;
    --color-red-500: #73090D;
    /* Static Green */
    --color-green-100: #F5FFEA;
    --color-green-200: #D3FAAC;
    --color-green-300: #71CC16;
    --color-green-400: #447A0D;
    --color-green-500: #264507;
    /* Static Orange */
    --color-orange-100: #FFF3E0;
    --color-orange-200: #FFD180;
    --color-orange-300: #FFAB40;
    --color-orange-400: #F26700;
    --color-orange-500: #CA5600;
    /* Static Blue */
    --color-blue-100: #DEEAFD;
    --color-blue-200: #95BEFF;
    --color-blue-300: #326DF6;
    --color-blue-400: #2149A4;
    --color-blue-500: #112452;
    /* Background*/
    --color-bg-100: #47606C;
    --color-bg-200: #263238;
    --color-bg-300: #31393c;
    /* Font Family */
    --font-family-base: IRANSansX;
    /* Layout Dimensions ---------- */
    --header-height: 60px;
    --footer-height: 50px;
    /* Buttons */
    --button-height: 60px;
    --button-padding-left: 32px;
    --button-padding-right: 32px;
    --button-border-width: 0px;
    --button-color: var(--color-base-white);
    --button-border-color: var(--color-border);
    --button-background-color: var(--color-primary-300);
    --button-border-radius: 4px;
    /* Links */
    --link-height: 40px;
    --link-color: var(--color-primary-300);
    /* Transitions ---------- */
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    /* Borders ---------- */
    --border-width: 1px;
    --border-radius: 5px;
    --border-color: var(--color-border);
    /* Radius ---------- */
    --radius-sm: 4px;
    /* text Input */
    --input-height: 40px;
    --input-text-background-color: var(--background-color-dark);
    --input-text-color: var(--text-color-primary);
    /* BottomSheet ----- */
    --bottomSheet--bg: var(--background-color-dark);
    --bottomSheet-border-radius: var(--radius-xl) var(--radius-xl) 0px 0px;
    --bottomSheet-background-color: var(--background-color-dark);
}

.c-gray-600 {
    color: var(--color-neutral-gray-600);
}

.border-radius-sm {
    border-radius: var(--radius-sm)
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: var(--button-height);
    zzzzzpadding-left: var(--button-padding-left);
    zzzzzpadding-right: var(--button-padding-right);
    color: var(--button-color);
    background-color: var(--button-background-color);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    transition: background-color var(--transition-medium);
    white-space: nowrap;
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    cursor: pointer;
}
    .btn:hover {
        background-color: var(--color-primary-400);
    }

.btn-content {
}

.btn-large {
    font-size: 16px !important;
    height: 48px;
}

.btn-medium {
    height: 40px;
    font-size: 14px !important;
}

.btn-small {
    height: 32px;
    font-size: 14px !important;
}

.btn-primary {
    color:var(--color-base-white);
    background-color: var(--color-primary-300);
}
    .btn-primary:hover {
        color: var(--color-base-white);
        background-color: var(--color-primary-400);
    }
    .btn-primary:disabled {
        color: var(--color-base-white);
        opacity: 0.25;
        background-color: var(--color-primary-500);
    }

.btn-secondary {
    color: var(--color-base-white);
    background-color: transparent;
    border: 1px solid var(--color-base-white);
}
    .btn-secondary:hover {
        color: var(--color-base-white);
        background-color: var(--color-neutral-gray-300);
        border-color: var(--color-neutral-gray-200);
    }
    .btn-secondary:disabled {
        color: var(--color-base-white);
        opacity: 0.25;
        border-color: var(--color-neutral-gray-400);
    }

.btn-tertiary {
    color: var(--color-primary-300);
    background-color: transparent;
    stroke: var(--color-primary-300);
}
    .btn-tertiary:hover {
        color: var(--color-primary-300);
        background-color: var(--color-primary-500);
    }
    .btn-tertiary:disabled {
        color: var(--color-primary-500);
        background-color: var(--color-neutral-gray-400);
    }

.btn-tertiary-reverse {
    color: var(--color-neutral-gray-400);
    background-color: transparent;
    stroke: var(--color-neutral-gray-400);
}

    .btn-tertiary-reverse:hover {
        color: var(--color-neutral-gray-400);
        background-color: var(--color-neutral-gray-100);
    }

    .btn-tertiary-reverse:disabled {
        color: var(--color-neutral-gray-200);
    }

.font-thin {
    font-weight: 100;
}
.font-ultraLight {
    font-weight: 200;
}
.font-light {
    font-weight: 300;
}
.font-regular {
    font-weight: 400;
}
.font-medium {
    font-weight: 500;
}
.font-demiBold {
    font-weight: 600;
}
.font-bold {
    font-weight: var(--font-weight-bold);
}
.font-extraBold {
    font-weight: 800;
}
.font-black {
    font-weight: 900;
}

.font-caption-1 {
    font-size: var(--font-size-xs);
    line-height: 18px;
}
.font-caption-2 {
    font-size: 10px;
    line-height: 16px;
}
.font-body-1 {
    font-size: var(--font-size-xs);
    line-height: 18px;
}
.font-body-2 {
    font-size: 14px;
    line-height: 24px;
}
.font-heading-1 {
    font-size: 32px;
    line-height: 50px;
}
.font-heading-2 {
    font-size: 24px;
    line-height: 38px;
}
.font-heading-3 {
    font-size: 18px;
    line-height: 30px;
}
.font-heading-4 {
    font-size: var(--font-size-md);
    line-height: 26px;
}
.font-heading-5 {
    font-size: 14px;
    line-height: 22px;
}

.farsi-digit {
    font-family: 'IRANSansX FD';
}
.padding-medium {
    padding: var(--spacing-4);
}

.margin-medium {
    padding: var(--spacing-12);
}

.loader {
    width: 24px;
    aspect-ratio: 2;
    --_g1: no-repeat radial-gradient(circle closest-side, #CBF5F5 90%, #0000);
    --_g2: no-repeat radial-gradient(circle closest-side, white 90%, #0000);
    --_g3: no-repeat radial-gradient(circle closest-side, #CBF5F5 90%, #0000);
    background: var(--_g1) 0% 50%, var(--_g2) 50% 50%, var(--_g3) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: l3 1s infinite linear;
}
@keyframes l3 {
    20% { background-position: 0% 0%, 50% 50%,100% 50% }
    40% { background-position: 0% 100%, 50% 0%,100% 50% }
    60% { background-position: 0% 50%, 50% 100%,100% 0% }
    80% { background-position: 0% 50%, 50% 50%,100% 100% }
}


.link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: var(--link-height);
    color: var(--link-color);
    white-space: nowrap;
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    cursor: pointer;
    stroke: var(--color-primary-300);
    align-self: flex-start;
}
    .link:hover {
        text-decoration: underline;
    }
    .link.disabled {
        color: var(--color-primary-500);
        text-decoration: none;
        pointer-events: none;
    }
.link-large {
    font-size: 16px;
    line-height: 26px;
}
.link-medium {
    font-size: 14px;
    line-height: 22px;
}
.link-small {
    font-size: 14px;
    line-height: 22px;
}

.input-text {
 
}
    .input-text input {
        color: var(--input-text-color);
        background-color: var(--input-text-background-color);
    }

.btn-padding-lg {
    padding-left: var(--padding-lg);
    padding-right: var(--padding-lg);
}
.btn-padding-2xl {
    padding-left: var(--padding-2xl);
    padding-right: var(--padding-2xl);
}