/* =========================================
   GLOBAL RESET
========================================= */

@font-face { font-family: 'Yekan Bakh'; src: url('../assets/fonts/YekanBakh/YekanBakh_Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Yekan Bakh'; src: url('../assets/fonts/YekanBakh/Yekan Bakh.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Yekan Bakh'; src: url('../assets/fonts/YekanBakh/YekanBakh-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Yekan Bakh'; src: url('../assets/fonts/YekanBakh/YekanBakh-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Yekan Bakh'; src: url('../assets/fonts/YekanBakh/YekanBakh-Heavy.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    min-height: 100dvh;

    background-color: var(--color-background);
    color: var(--color-text);

    font-family: 'Yekan Bakh', Tahoma, Arial, sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    direction: rtl;
    text-align: right;
}


/* =========================================
   BOX SIZING
========================================= */

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


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

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================
   BUTTONS
========================================= */

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

button {
    cursor: pointer;
}


/* =========================================
   IMAGES
========================================= */

img {
    display: block;
    max-width: 100%;
}


/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #B9C9E3;
    border-radius: var(--radius-pill);
}


/* =========================================
   SELECTION
========================================= */

::selection {
    background: var(--color-primary);
    color: #ffffff;
}

/* =========================================
   PAGE TRANSITION
========================================= */

.page-transition-overlay {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    visibility: hidden;
    background: rgba(255, 255, 255, .78);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    backdrop-filter: blur(3px);
}

.page-transition-overlay.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.page-transition-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(15, 90, 255, .18);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: page-transition-spin .75s linear infinite;
}

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


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    body {
        overflow-x: hidden;
    }
}