/**

* ============================================================
* banki.ru — execute.css
* Execute-модалка
* Картинка — фон внутри контейнера с отступом 2%
* ============================================================
  */

/* ============================================================
MODAL
============================================================ */

.banki-execute-modal {
position: fixed;
inset: 0;

z-index: 99999;

display: none;

align-items: center;
justify-content: center;

padding: 10px;

box-sizing: border-box;
isolation: isolate;

}

.banki-execute-modal.open {
display: flex;
}

/* ============================================================
BACKDROP
============================================================ */

.banki-execute-modal__backdrop {
position: absolute;
inset: 0;

background:
    radial-gradient(
        circle at 50% 25%,
        rgba(0, 217, 255, 0.12),
        transparent 45%
    ),
    rgba(2, 7, 15, 0.78);

backdrop-filter: blur(16px) saturate(125%);
-webkit-backdrop-filter: blur(16px) saturate(125%);

animation:
    bankiExecuteBackdropIn
    0.22s
    ease-out;

}

/* ============================================================
DIALOG
============================================================ */

.banki-execute-modal__dialog {
position: relative;

z-index: 2;

width: min(100%, 720px);
height: min(96dvh, 900px);

max-width: 720px;
max-height: 96dvh;

display: flex;
flex-direction: column;

overflow: hidden;

background: #071525;

border: 1px solid rgba(105, 229, 255, 0.28);

border-radius: 26px;

box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 0 45px rgba(0, 204, 255, 0.13),
    0 30px 90px rgba(0, 0, 0, 0.78);

box-sizing: border-box;

animation:
    bankiExecuteDialogIn
    0.28s
    cubic-bezier(0.2, 0.8, 0.2, 1);

transform-origin: center;

}

/* ============================================================
IMAGE WRAPPER
Отступ картинки ровно 2% со всех сторон
============================================================ */

.banki-execute-modal__image-wrap {
position: absolute;

top: 2%;
right: 2%;
bottom: 2%;
left: 2%;

z-index: 0;

width: auto;
height: auto;

overflow: hidden;

border-radius: 20px;

box-sizing: border-box;

background: #071525;

border: 1px solid rgba(105, 229, 255, 0.22);

box-shadow:
    0 0 25px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(0, 217, 255, 0.08);

}

/* ============================================================
IMAGE
Картинка красиво заполняет внутренний контейнер
============================================================ */

.banki-execute-modal__image {
position: absolute;

inset: 0;

display: block;

width: 100%;
height: 100%;

max-width: none;
max-height: none;

object-fit: cover;
object-position: center center;

border: 0;
border-radius: inherit;

background: #071525;

box-shadow: none;

user-select: none;
-webkit-user-drag: none;

}

/* ============================================================
ЗАТЕМНЕНИЕ КАРТИНКИ
============================================================ */

.banki-execute-modal__image-wrap::after {
content: "";

position: absolute;

inset: 0;

z-index: 1;

border-radius: inherit;

background:
    linear-gradient(
        180deg,
        rgba(3, 12, 24, 0.16) 0%,
        rgba(3, 12, 24, 0.22) 32%,
        rgba(3, 12, 24, 0.60) 68%,
        rgba(3, 12, 24, 0.90) 100%
    );

pointer-events: none;

}

/* ============================================================
ЛЁГКИЙ СТЕКЛЯННЫЙ СЛОЙ
============================================================ */

.banki-execute-modal__dialog::before {
content: "";

position: absolute;

inset: 0;

z-index: 1;

border-radius: inherit;

background:
    linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.035),
        transparent 30%,
        transparent 70%,
        rgba(0, 180, 255, 0.035)
    );

pointer-events: none;

}

/* ============================================================
TOP GLOW
============================================================ */

.banki-execute-modal__dialog::after {
content: "";

position: absolute;

top: 0;
left: 10%;
right: 10%;

height: 1px;

z-index: 5;

background:
    linear-gradient(
        90deg,
        transparent,
        rgba(105, 229, 255, 0.65),
        transparent
    );

pointer-events: none;

}

/* ============================================================
TEXT
============================================================ */

.banki-execute-modal__text {
position: relative;

z-index: 3;

width: 100%;

margin-top: auto;

padding:
    0
    28px
    8px;

text-align: center;

box-sizing: border-box;

text-shadow:
    0 2px 15px rgba(0, 0, 0, 0.55);

}

.banki-execute-modal__title {
margin: 0 0 10px;

color: #ffffff;

font-size: clamp(24px, 5vw, 32px);
font-weight: 750;

line-height: 1.2;

letter-spacing: -0.025em;

text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.72),
    0 0 24px rgba(0, 217, 255, 0.13);

}

.banki-execute-modal__description {
margin: 0 auto;

max-width: 590px;

color: rgba(239, 247, 255, 0.88);

font-size: 16px;
font-weight: 400;

line-height: 1.55;

letter-spacing: 0.005em;

text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.72);

}

/* ============================================================
BUTTON
============================================================ */

.banki-execute-modal__button {
position: relative;

z-index: 4;

width: calc(100% - 56px);

min-height: 58px;

margin:
    18px
    28px
    28px;

padding: 0 20px;

border: 1px solid rgba(150, 245, 255, 0.38);

border-radius: 17px;

background:
    linear-gradient(
        135deg,
        rgba(22, 221, 255, 0.86) 0%,
        rgba(0, 189, 232, 0.86) 55%,
        rgba(0, 158, 199, 0.88) 100%
    );

color: #03131c;

font-size: 17px;
font-weight: 750;

letter-spacing: 0.01em;

cursor: pointer;

box-sizing: border-box;

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

box-shadow:
    0 10px 30px rgba(0, 195, 235, 0.24),
    0 0 28px rgba(0, 217, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);

transition:
    transform 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease;

}

.banki-execute-modal__button::before {
content: "";

position: absolute;

inset: 1px;

border-radius: 16px;

background:
    linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.18),
        transparent 48%
    );

pointer-events: none;

}

.banki-execute-modal__button:hover {
filter: brightness(1.06);

box-shadow:
    0 12px 34px rgba(0, 195, 235, 0.30),
    0 0 34px rgba(0, 217, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

}

.banki-execute-modal__button:active {
transform: scale(0.975);

box-shadow:
    0 6px 18px rgba(0, 195, 235, 0.20);

}

/* ============================================================
BODY LOCK
============================================================ */

body.banki-execute-modal-open {
overflow: hidden;
}

/* ============================================================
ANIMATIONS
============================================================ */

@keyframes bankiExecuteBackdropIn {

from {
    opacity: 0;
}

to {
    opacity: 1;
}

}

@keyframes bankiExecuteDialogIn {

from {
    opacity: 0;

    transform:
        translateY(18px)
        scale(0.97);
}

to {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

}

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

@media (max-width: 600px) {

.banki-execute-modal {
    padding: 8px;
}


.banki-execute-modal__dialog {
    width: 100%;
    max-width: 100%;

    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);

    border-radius: 22px;
}


/*
 * На мобильном сохраняем те же 2%,
 * поэтому картинка имеет одинаковый воздух
 * сверху, снизу, слева и справа.
 */

.banki-execute-modal__image-wrap {
    top: 2%;
    right: 2%;
    bottom: 2%;
    left: 2%;

    border-radius: 17px;
}


.banki-execute-modal__text {
    padding:
        0
        18px
        5px;
}


.banki-execute-modal__title {
    font-size: 24px;

    margin-bottom: 9px;
}


.banki-execute-modal__description {
    font-size: 14px;

    line-height: 1.5;
}


.banki-execute-modal__button {
    width: calc(100% - 36px);

    min-height: 54px;

    margin:
        16px
        18px
        18px;

    border-radius: 15px;

    font-size: 16px;
}

}

/* ============================================================
SMALL PHONES
============================================================ */

@media (max-width: 380px) {

.banki-execute-modal__dialog {
    border-radius: 20px;
}


.banki-execute-modal__image-wrap {
    top: 2%;
    right: 2%;
    bottom: 2%;
    left: 2%;

    border-radius: 15px;
}


.banki-execute-modal__text {
    padding:
        0
        15px
        4px;
}


.banki-execute-modal__title {
    font-size: 22px;

    margin-bottom: 7px;
}


.banki-execute-modal__description {
    font-size: 13px;

    line-height: 1.45;
}


.banki-execute-modal__button {
    width: calc(100% - 30px);

    min-height: 51px;

    margin:
        13px
        15px
        15px;

    border-radius: 14px;

    font-size: 15px;
}

}

/* ============================================================
VERY SMALL HEIGHT
============================================================ */

@media (max-height: 650px) {

.banki-execute-modal {
    padding: 5px;
}


.banki-execute-modal__dialog {
    height: calc(100dvh - 10px);
    max-height: calc(100dvh - 10px);

    border-radius: 18px;
}


.banki-execute-modal__image-wrap {
    top: 2%;
    right: 2%;
    bottom: 2%;
    left: 2%;

    border-radius: 14px;
}


.banki-execute-modal__text {
    padding:
        0
        12px
        3px;
}


.banki-execute-modal__title {
    font-size: 20px;

    margin-bottom: 5px;
}


.banki-execute-modal__description {
    font-size: 12.5px;

    line-height: 1.4;
}


.banki-execute-modal__button {
    min-height: 46px;

    margin:
        9px
        12px
        12px;

    border-radius: 12px;

    font-size: 14px;
}

}

/* ============================================================
REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

.banki-execute-modal__backdrop,
.banki-execute-modal__dialog {
    animation: none;
}


.banki-execute-modal__button {
    transition: none;
}

}