.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    z-index: -1;
    border-radius: 0;
}

header {
    position: fixed;
    z-index: 1000;
}

body {
    background-color: var(--background-color);
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

html {
    -ms-overflow-style: none;  /* IE, Edge */
    scrollbar-width: none;     /* Firefox */
}

html, body {
    overscroll-behavior: none;
    /*overscroll-behavior: none;*/
}

::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

main {
    min-height: 100vh;
    padding-bottom: 90px; /* height: 104px; - footer height  TODO: везде привести к этому числу(104\112)*/
    max-width: 530px;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

.carousel.swiper-wrapper {
    max-width: 100%;
}

footer {
    position: fixed;
    padding: 0px 4px;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 61px;
    background-color: var(--footer-color);
    backdrop-filter: blur(5px) saturate(160%);
    -webkit-backdrop-filter: blur(5px) saturate(160%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 42px;

    gap: 4px;
}

@media (max-height: 450px) {
    footer {
        bottom: -50px !important;
        transform: translateX(-50%) translateY(100%);
    }
}

@media (max-height: 300px) {
    footer {
        bottom: -70px !important;
        transform: translateX(-50%) translateY(100%);
    }
}

.footer::before,
.footer::after {
    content: "";
    position: absolute;
    inset: -10px;
    background: inherit;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

.footer::before {
    filter: blur(12px);
    opacity: 0.35;
    transform: translate(3px, 3px);
}

.footer::after {
    filter: blur(8px);
    opacity: 0.25;
    transform: translate(-3px, -3px);
}

/*
footer {
    position: fixed;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 104px;
    background-color: rgba(23, 26, 36, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 51.5px;
    padding: 0 20px;
    z-index: 1000;
    border-radius: 30px;
    border: 1px solid rgba(52, 133, 255, 1);
}
*/

* {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

img {
  user-drag: none;
  pointer-events: none;
}

.hidden {
   display: none !important;
}

.show-page {
    display: flex !important;
}

:root {
    /* === SCROLLBAR === */
    --swiper-scrollbar-bg-color: rgba(21, 24, 34, 1);
    --swiper-scrollbar-drag-bg-color: rgba(33, 144, 255, 1);
    --swiper-scrollbar-size: 6px;

    /* === PAGINATION DOTS === */
    --swiper-pagination-color: #2190ff;
    --swiper-pagination-bullet-inactive-color: #4a4a4a;
    --swiper-pagination-bullet-inactive-opacity: 0.5;

    /* === ARROWS === */
    --swiper-navigation-color: #fff;
    --swiper-navigation-size: 24px;

    /* THEME */
    --background-color: #0e0e0e;
    --input-background-color: rgba(23, 26, 36, 1); 
    --footer-color: rgba(14, 14, 14, 0.48);
    --dropdown-color: rgba(25, 29, 43, 0.7);
    --notification-color: rgba(23, 26, 36, 0.7);
    --border-color: rgba(32, 35, 44, 1);
    --payment-shadow-color: rgba(23, 26, 36, 0.4);
    --main-text-color: rgba(255, 255, 255, 1);
    --footer-indicator: rgba(255, 255, 255, 0.22);
    --progress-bar-color: rgba(94, 95, 100, 1);
    --faq-text-color: rgba(196, 196, 196, 1);
    --cryptomus-img: url("/static/image/payment/cryptomus.webp");
    --sbp-img: url("/static/image/payment/sbp.webp");
    --copy-wallet-svg: white;
    --wait-pay-background: rgba(25, 25, 25, 0.95);
}

body.light-theme {
    --background-color: rgba(255, 255, 255, 1);
    --input-background-color: rgba(241, 245, 249, 1);
    --footer-color: rgba(255, 255, 255, 0.48);
    --dropdown-color: rgba(241, 245, 249, 0.7);
    --notification-color: rgba(230, 230, 230, 0.7);
    --border-color: rgba(96, 96, 96, 0.12);
    --payment-shadow-color: rgba(255, 255, 255, 0.4);
    --main-text-color: rgba(0, 0, 0, 1);
    --footer-indicator: rgba(158, 158, 158, 0.22);
    --progress-bar-color: rgba(241, 245, 249, 1);
    --faq-text-color: rgb(75, 75, 75);
    --swiper-scrollbar-bg-color: rgba(241, 245, 249, 1);
    --cryptomus-img: url("/static/image/payment/cryptomus-dark.webp");
    --sbp-img: url("/static/image/payment/sbp-dark.webp");
    --copy-wallet-svg: #3485FF;
    --wait-pay-background: rgba(241, 245, 249, 0.90);
}

.swiper-scrollbar {
    position: absolute !important;
    bottom: -13px !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--swiper-scrollbar-size) !important;
    border-radius: 100px !important;
}


.litepicker {
    background: rgba(25, 29, 43, 0.95);
    border-radius: 16px;
    color: white;
    font-family: 'Onest', sans-serif;
}

.litepicker .month-item-header {
    color: #fff;
}
.litepicker .is-start-date,
.litepicker .is-end-date,
.litepicker .is-in-range {
    background: rgba(52, 133, 255, 0.4);
    border-radius: 12px;
}