:root {
    --modal-background: #fff; /* цвет фона модального окна */
    --modal-text-color: #000; /* цвет текста модального окна */
    --modal-border: solid 2px #bbb; /* вид бордера модального окна (0 если не нужно) */
    --modal-radius: 1rem; /* радиус скругления модального окна (0 если не нужно) */
    --modal-height: 90%;  /* максимальная высота модального окна */
    --modal-width: 100%;  /* максимальная ширина модального окна */
    --modal-gap: 3vmin;  /* размер отступов от края модального окна и кнопки */
    --modal-shadow: 0 0 1rem rgba(0,0,0,.25);  /* тень модального окна (0 если не нужно) */

    --modal-after: rgba(0,0,0,.5); /* Фон позади модального окна */
    --modal-after-gap: 3vmin; /* Отступ до границ модальныого окна и  */

    --close-size: 2.5rem; /* размер крестика закрытия окна */
    --close-color: red;  /* цвет крестика закрытия окна */
    --close-background: #ccc;  /* цвет подложки крестика закрытия окна */
    --close-radius: 50%;  /* радиус скругления подложки крестика закрытия окна */
    --close-position: 0; /* смещения крестика закрытия окна сверху-вниз справа-навлево на одинаковое расстояние (один параметр, по умолчанию 0). Можно указать отрицательное значение */

    --loader-backgtound: #0008;
    --loader-color: #60a0d7;
    --loader-size: 2rem;

}

.invisible {
    display: none!important;
}

a.modal-launcher + div {
    display: none;
}

.modal {
    align-items: center;
    background: var(--modal-after);
    box-sizing: border-box;
    display: none;
    height: 100%;
    left: 0;
    justify-content: center;
    top: 0;
    padding: var(--modal-after-gap);
    position: fixed;
    width: 100%;
    z-index: 100;
}

.modal .modal-card {
    background: var(--modal-background);
    border: var(--modal-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    display: flex;
    flex-flow: column;
    gap: var(--modal-gap);
    height: var(--modal-height);
    padding: var(--modal-gap);
    position: relative;
    width: var(--modal-width);
}

.modal .modal-card:not(.tnc) {
    max-height: fit-content;
}

.modal .modal-card .content {
    overflow-y: scroll;
    overflow-wrap: break-word;
    scrollbar-width: none;
    color: var(--modal-text-color);
}

.modal .modal-card .content span {
    display: block;
}

.modal .modal-card .content::-webkit-scrollbar {
    display: none;
}

.modal iframe {
    border: none;
    height: 100%;
    width: 100%;
}

.modal .action {
    display: flex;
    text-align: center;
    width: 100%;
}

.modal .action .btn {
    margin: auto;
}

.modal .content *:not(span) {
    text-align: left;
    padding: var(--modal-gap);
}

.arabic .modal .content * {
    text-align: right;
}

.modal .content strong {
    font-size: 1rem;
    font-weight: bold;
    padding: 1rem 0
}

.modal .content span {
    font-size: 1rem;
    font-weight: bold;
    color: var(--highlight-color, inherit);
}


.btn-close-cross .modal-card {
    gap: 0;
}

.btn-close-cross .action .btn {
    align-items: center;
    aspect-ratio: 1;
    background: transparent;
    border: 0;
    color: transparent;
    display: flex;
    font-size: 0;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    transform: translateX(calc(-1 * var(--close-position))) translateY(var(--close-position));
    width: var(--close-size);
}

.btn-close-cross .action .btn::before {
    aspect-ratio: 1;
    color: var(--close-color);
    content: "\00d7";
    background: var(--close-background);
    border-radius: var(--close-radius);
    font-size: var(--close-size);
    font-family: sans-serif;
    font-weight: lighter;
    line-height: .85;
    position: absolute;
    width: var(--close-size);
}

/* -- */


.modal-bottom {
    align-items: flex-end;
}


body:has(.modal-open) {
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}


.modal-open {
    animation: openModal .5s ease-in-out forwards;
    display: flex;
}

.modal-open .modal-card {
    animation: showCenter .5s ease-in-out forwards;
}


.modal-close .modal-card {
    animation: hideCenter .5s ease-in-out forwards;
}

.modal-close {
    animation: removeModal .5s ease-in-out forwards;
}

@keyframes openModal {
    0% { visibility: hidden; }
    1% { visibility: visible; }
}

@keyframes removeModal {
    99% { visibility: visible; }
    100% { visibility: hidden; }
}

@keyframes showCenter {
    0% { height: 0; transform: scale(0); }
    25% { transform: scale(0); }
    100% { height: var(--modal-height); transform: scale(1); }
}

@keyframes hideCenter {
    0% { height: var(--modal-height); transform: scale(1); }
    25% { transform: scale(0); }
    100% { height: 0; transform: scale(0); }
}


body:has(.modal-open, .loading:not(.invisible)) .btn:not(.modal-close-button) {
    filter: grayscale(1);
    opacity: 0.3;
}

body:has(.modal-open) section,
body:has(.modal-open) footer {
    display: none;
}

.align_to_finger {
    align-self: flex-end;
    margin-bottom: 8rem;
}

.modal .content h2 {
    color: var(--main-color, #000);
    font-weight: normal;
}

.modal .content h2 span {
    font-size: 1.5rem;
    color: var(--highlight-color, #FC0);
}

/* scroller */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgb(255 255 255/20%);
    box-shadow: inset 0 0 2px rgb(255 255 255/0.7);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgb(255 255 255/0.7);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #500;
}

/* loader */



.loading {
    align-items: center;
    justify-content: center;
    background: var(--loader-backgtound);
    display: flex;
    min-height: 100%;
    min-width: 100%;
    position: fixed;
}

.loader {
    position: relative;
    border: var(--loader-size) solid var(--loader-color);
    border-radius: 50%;
    box-sizing: border-box;
    animation: loader-eat .5s linear infinite;
    z-index: 1000;
}
.loader::after , .loader::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--loader-color);
    width: calc(var(--loader-size)/1.6);
    height: calc(var(--loader-size)/1.6);
    border-radius: 50%;
    box-sizing: border-box;
    opacity: 0;
    animation: loader-move 1s linear infinite;
}

.loader::before {
    animation-delay: .5s;
}

@keyframes loader-eat {
    0% , 49% { border-right-color:  var(--loader-color) }
    50% , 100% { border-right-color: #0000 }
}

@keyframes loader-move {
    0% { left: calc(var(--loader-size) * 3); opacity: 1}
    50% { opacity: 1 }
    52%, 100% { left: 0; opacity: 0; }
}