/* ==== reactapp.css (база) ==== */
    html {
        overflow: hidden;
    }
    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; }
    button { border: none; }
    .fullscreen-img { width:100%; }
    .button-small.button-main {
        font-size: 34px;
        padding: 21px 80px 29px;
        font-size: 3.2vw;
        padding: 2vw 7.54vw 2.73vw;
    }
.payqr img {
    width: 100%!important;
}
    /* ==== App.css (контуры приложения) ==== */
    * { box-sizing: border-box; }
    body { font-family: 'grandis-extended', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto'; }
    .App { text-align: center; }
    .screen-body {
        width: 100vw;
        height: 100vh;
        background: linear-gradient(#5273E6, #0025E7);
        display: flex;
        flex-direction: column; align-items: center; justify-content: center; position: relative;
    }
    .screen-body.loading { background: #fff; }

.maintenance {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 72px;
    font-weight: 800;
    letter-spacing: .5px;

    font-size: 6.79vw;
}

#screen-actions {
    align-items: center;
    background: linear-gradient(#5273e6, #0025e7);
    /* Для активации этого нужен флекс */
    /* display: flex; */
    flex-direction: column;
    /* height: 100vh; */
    /* height:fit-content; */
    justify-content: center;
    width: 100vw;

}
@media screen and (min-height:1400px) {
    #screen-actions {
        height: 100vh;
    }
}

.page-body {
    flex: 1 1;
    overflow: hidden;
    padding: 70px 55px;
    padding: 6.6vw 5.2vw;
    width: 100%;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* padding: 31px 0 35px; */
    padding: 3vw 0 3.4vw;
    line-height: 50px;
    line-height: 5vw;

    background-color: #F74F4F;
    /* border-radius: 30px; */
    border-radius: 2.5vw;
    /* font-size: 47px; */
    font-size: 4.5vw;
    color: #fff;
    /* width: 455px; */
    width: 43vw;

}
    .button-small {
        width: auto;
        /* font-size: 50px; */
                font-size: 4.7vw;

        /* padding: 21px 100px 29px; */
         padding: 1.98vw 9.43vw 2.73vw;
    }
    .modal-wrapper { position: absolute; inset: 0;
        /* display: flex; */
                display: none;

        align-items: center; justify-content: center; backdrop-filter: blur(20px); }
    .modal {
        background: #fff;
        border-radius: 20px;
        border-radius: 1.88vw;
        padding: 100px;
        padding: 9.43vw;
        width: 840px;
        width: 79.24vw;
        min-height: 700px;
        min-height: 66.03vw;
    }
    .modal-wrapper .preloader-wrapper {
        width: 182px;
        height: 182px;
        margin: 122px auto 0;
    
        width: 17.17vw;
        height: 17.17vw;
        margin: 11.5vw auto 0;
    }

    /* ==== Общие вспомогательные классы ==== */
    .hidden{ display:none !important; }
.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
}
.screen.active{
  opacity:1; pointer-events:auto;
}

    /* ==== START ==== */
    :root{
      --bg-start: url('./images/Заставка.png');
      --img-logo-small: url('./images/logoSmall.png');
      --img-banner: url('./images/Здесь может быть ваша реклама.png');
    }
    .start-screen {
        /* background-image: var(--bg-start); */
        background-size: cover;
        background-repeat: no-repeat;
         width: 100%;
         /* height: 100%; */
         height:fit-content;
        position: relative;

        /* overflow:scroll; */
    }
    .start-img {
        /* height:100%; */
        aspect-ratio: 1 / 1.9;
    }

@media screen and (min-height:1400px) {
    .start-img {
        height:100vh;
    }
}


.logo-image {
    width: 55%;
}
    .start-button {
        position: absolute;
        /* top: 1019px; */
        top: 54%;

        width: 100%;
        text-align: center;
    }
    .start-button .button {
        /* padding-left: 175px;
        padding-right: 175px; */
        padding-left: 16.5vw;
        padding-right: 16.5vw;
    }
    .price {
        position: absolute;
        /* top: 843px; */
        top: 46%;
        width: 100%;
        text-align: center;
        font-weight: 700;
        color: #fff;
        /* font-size: 90px; */

        font-size: 9vw;
    }

    /* ==== ACTIONS ==== */
.header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 40px 55px;
    padding: 3.77vw 5.18vw;

    width: 100%;
}

.actions-screen .screen-inner {
    background: #fff3;
    /* border-radius: 50px; */
    border-radius: 5vw;

    display: flex;
    flex-direction: column;
    gap: 50px;
    gap: 4.71vw;
    height: 100%;
    justify-content: space-between;
    overflow: hidden;
    /* padding: 143px 80px 80px; */
    padding: 13.5vw 7.55vw 7.55vw;

}
.actions-screen .screen-inner .top-part { display: flex; flex-direction: column; gap: 51px; }
    .actions-screen .screen-inner .bottom-part { display: flex; flex-direction: column; gap: 95px; }
    .actions-screen .screen-inner .top-part .button, .actions-screen .screen-inner .bottom-part .button { width: 100%; }
    .banner { border-radius: 20px; }

    /* ==== actionTemplate ==== */
.action-template-screen .templates-wrapper {
    background: #fff3;
    border-radius: 50px;
    border-radius: 4.71vw;
    display: flex;
    flex-direction: column;
    gap: 50px;
    gap:  4.71vw;
    height: 100%;
    overflow: hidden;
    padding: 35px 35px 80px;
    padding: 3.3vw 3.3vw 7.54vw;
}
.action-template-screen .templates-wrapper .templates-inner {
    grid-gap: 36px;
    grid-gap: 3.39vw;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: auto;
}
    .action-template-screen .template {
        display: table-cell;
        /* border: 1px solid #fff; */
        border-radius: 20px;
        border-radius: 1.88vw;
        background-size: cover; background-repeat: no-repeat; background-color: #fff; word-break: break-word;
        /* width: 409px; */
        height: 290px;
        
        max-width: 100%;
        height: 27.35vw;
    }

    .template {
        background-image:none;
        font-size: 40px;
        padding: 20px;
        
        font-size: 3.77vw;
        padding: 1.98vw;
    }
    .action-template-screen .template-active {
        background-color: #0126E7;
        color: #fff!important;
    }
    .action-template-screen .button-print { width: 100%; display: flex; justify-content: center; }
    .action-template-screen .button-print.disabled { opacity: 0.8; }
    .scroll-wrapper { display: flex; overflow: hidden; }
    .custom-scrollbars__content { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .custom-scrollbars__content::-webkit-scrollbar { display: none; }

.custom-scrollbars__scrollbar {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
    margin-left: -64px;
     margin-left: -6.03vw;
    padding: 70px 0;
    padding: 6.6vw 0;
    width: 110px;
    width: 10.37vw;
    width: 12vw;
}
.custom-scrollbars__button {
    background-color: initial;
    border: none;
    margin: 0;
    outline: none;
}
.custom-scrollbars__button > svg {
    width: 8vw;
    height:auto;
}
.custom-scrollbars__track-and-thumb {
    display: block;
    flex: 1 1;
    margin: 52px 0;
    /* margin: 4.9vw 0; */
     margin: 2vw 0;
    position: relative;
    width: 46px;
    width: 4.34vw;
}
.custom-scrollbars__track {
    background-color: #fff;
    border-radius: 8px;
    border-radius: 4.75vw;
    bottom: 0;
    cursor: pointer;
    opacity: .5;
    position: absolute;
    right: 11px;
    right: 1.03vw;
    top: 0;
    width: 24px;
    width: 2.26vw;
}

.custom-scrollbars__thumb {
    align-items: center;
    background: #fff;
    border-radius: 50px;
    border-radius: 4.71vw;
    box-shadow: 0 4px 10px 0 #001aa480;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 46px;
    width: 4.34vw;
}
    .custom-scrollbars__thumb-lines {
        display: flex; flex-direction: column;
        gap: 10px;
        gap: 1vw;
    }
    .custom-scrollbars__thumb-line {
        background-color: #2A4DE7;
        height: 2px;
        width: 21px;
        width: 1.98vw;
        border-radius: 100%;
    }

    /* ==== actionText ==== */
    .action-text-screen .text-area-wrapper {
        overflow: hidden;
        border-radius: 50px;
        border-radius: 4.71vw;
        background-color: #fff;
        /* background-size: contain; */
        background-size: cover;
        background-repeat: no-repeat;
        width: 970px;
        height: 688px;
        padding: 80px 60px;
        width: 91.5vw;
        height: 64.9vw;
        padding: 7.54vw 5.66vw;
        margin: 0 auto;
    }
    .action-text-screen .text-area {
        border-radius: 50px;
        font-size: 100px;
        resize: none;
        outline: none;
        overflow: hidden;
        font-weight: 500;
        vertical-align: middle;
        display: table-cell;
        word-break: break-word;
        width: 850px;
        height: 528px;

        border-radius: 4.71vw;
        font-size: 9.43vw;
        width: 80.18vw;
        height: 49.8vw;
    }
    .action-text-screen .button-print {
        margin-top: 150px;
        margin-top: 14.5vw;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* ==== Advertisement ==== */
    .advertisement-screen .screen-inner {
        display: flex;
        flex-direction:column;
        gap: 50px;
        height: 1102px;
        position: relative;
        padding: 80px;
        border-radius: 50px;
        gap: 4.71vw;
        height: 103.77vw;
        padding: 7.54vw;
        border-radius: 4.71vw;
        background: #ffffff33;
    }
    .advertisement-screen .title {
        color: #fff; font-weight: 500;
        font-size: 60px;
        line-height: 60px;
        font-size: 5.66vw;
        line-height: 5.66vw;
        text-align: left;
    }
    .advertisement-screen .text {
        color: #fff;
        font-size: 40px;
        line-height: 51.2px;
        font-size: 3.77vw;
        line-height: 4.83vw;
        text-align: left;
    }
    .advertisement-screen .screen-inner img {
        position: fixed;
        bottom: -51px;
        left: 58px;
        width: 785px;
        bottom: -4.83vw;
        left: 5.47vw;
        width: 74.05vw;
    }

    /* ==== Get Receipt ==== */
    .button-problem {
        font-size: 25px;
        line-height: 32px;
        font-weight: 500;
        padding: 34px;
        margin-left: 35px;

        font-size: 2.36vw;
        line-height: 3.12vw;
        padding: 3.12vw;
        margin-left: 3.12vw;
    }
    .get-receipt-screen .screen-inner {
        padding-top: 110px;
        padding-top: 10.37vw;
    }
    .get-receipt-screen .title {
        font-size: 60px;
        font-weight: 400;
        line-height: 60px;
        text-align: left;
        color: #fff;

        font-size: 5.66vw;
        line-height: 5.66vw;
    }
    .get-receipt-screen .text {
        font-size: 40px;
        font-weight: 400;
        line-height: 51.2px;
        text-align: left;
        margin-top: 80px;
        color: #CED7FF;

        font-size: 3.77vw;
        line-height: 4.83vw;
        margin-top: 7.54vw;
    }
    .get-receipt-screen input {
        width: 100%;
        border-radius: 200px;
        font-size: 68px;
        padding: 21px 52px;
        margin-top: 20px;

        font-size: 6.41vw;
        padding: 2vw 4.9vw;
        margin-top: 1.98vw;
    }
    .get-receipt-screen .button {
        margin-top: 120px;

        margin-top: 11.32vw;
    }
    .button-small .button-problem { font-size:36px; line-height: 44px; padding: 21px 50px 29px; }

    /* ==== Overlays: Inactive Warning / Pay Error / Pay Wait / Print Wait / Problem QR ==== */
    .inactive-warning .modal .title {
        /* font-size: 70px; */
        font-size: 6.6vw;
        font-weight: 600;
        color: #0227E7;
    }
    .inactive-warning .modal .description {
        font-size: 50px;
        font-weight: 600;
        margin-top: 40px;
        font-family: 'grandis-extended';


        font-size: 4.7vw;
        margin-top: 3.77vw;
    }
    .inactive-warning.modal-wrapper .button {
        margin-top: 7.55vw;
    }
    .button.button-inv {
        margin-top: 20px!important;
        padding: 20px 0 20px;
         margin-top: 1.88vw!important;
        padding: 1.88vw 0 1.88vw;
        line-height: 40px;
        line-height: 3.77vw;
        background-color: #ffffff;
        font-size: 40px;
         font-size: 3.77vw;
        color: #000000;
        /* width: 455px; */
        width: 42.92vw;
        text-decoration: underline;
    }

    .pay-error .modal .title {
        font-size: 70px;
        font-weight: 600;
        color: #e7028c;

        font-size: 6.6vw;
    }
    .pay-error .modal .description {
        font-size: 50px;
        font-weight: 600;
        margin-top: 40px;

        font-size: 4.71vw;
        margin-top: 3.77vw;
    }
    .pay-error.modal-wrapper .button { margin-top: 80px; }

    .qr-wrapper .modal .title {
        font-size: 70px;
        font-weight: 600;
        color: #0227E7;
        margin-top: 20px;
        font-family: grandis-extended;

        font-size: 6.6vw;
        margin-top: 1.98vw;
    }
    .qr-wrapper .modal .description {
        font-size: 50px;
        font-weight: 600;
        font-family: grandis-extended;

        font-size: 4.71vw;
    }
    .qr-wrapper .button {
        margin-top: 80px;
        font-family: grandis-extended;

        margin-top: 7.54vw;
    }

    .payqr {
        width:360px;
        height:360px;
        margin:0 auto;
        background:#eee;
        border-radius:10px;

        margin-top:4vw;
        width: 35vw;
        height: 35vw;
    }

    .pay-wait .modal .title {
        font-size: 70px;
        font-weight: 600;
        color: #0227E7;

        font-size: 6.6vw;
    }
    .pay-wait .modal .description {
        font-size: 50px;
        font-weight: 600;
        margin-top: 40px;
    
        font-size: 4.71vw;
        margin-top: 3.77vw;
    }
    .pay-wait.modal-wrapper .preloader-wrapper {
        margin-top: 80px;

        margin-top: 7.55vw;
    }

    .print-wait .modal .title {
        font-size: 70px;
        font-weight: 600;
        color: #0227E7;

        font-size: 6.6vw;
    }

    .problem-qr .modal .title {
        font-size: 70px;
        line-height: 70px;
        font-weight: 600;
        text-align: left;
        color: #0227E7;

        font-size: 6.6vw;
        line-height: 6.6vw;
    }
    .problem-qr .modal .description {
        font-size: 35px;
        line-height: 44.8px;
        text-align: left;
        color: #0227E7;
        margin-top: 47px;

        font-size: 3.3vw;
        line-height: 4.24vw;
        margin-top: 4.24vw;
    }


    .problem-qr .modal img {
        margin: 62px auto;
        width:100%;

        margin: 5.85vw auto;
    }
    .problem-qr .modal .button {
        font-size: 55px;
        font-weight: 400;
        line-height: 70.4px;
        width: 100%;

        font-size: 5.19vw;
        line-height: 6.6vw;
    }

    /* ==== Pay / Receipt статичные экраны ==== */
    .paySuccess-screen {
        background-image: url('./images/PaySuccess.png');
        background-repeat: no-repeat;
        background-size: cover;
        /* background-size: contain; */
        height: 100%;
        width: 100%;
    }

    .pay-success-screen .title { color: #fff; font-weight: 500; font-size: 80px; line-height: 80px; text-align: center; }
    .pay-success-screen .text { color: #fff; font-size: 60px; line-height: 60px; text-align: center; margin-top: 50px; }
    .pay-success-screen .sub-text {
        position: relative;
        color: #fff;
        font-size: 40px;
        line-height: 40px;
        text-align: center;
        text-decoration: underline;
        margin-top: 310px;

        font-size: 3.77vw;
        line-height: 3.77vw;
        margin-top: 0;
    }
    .pay-success-screen .screen-inner {
            padding-top: 37.6vw;
    }
    .pay-success-screen .screen-inner img { position: fixed; inset: 0; }
    .pay-success-screen .screen-inner .button { margin-top: 90px; position: relative; }

    .receiptSend-screen {
        background-image: url('./images/ReceiptSent.png');
        background-repeat: no-repeat;
        background-size: cover;
        /* background-size: contain; */
        height: 100%; width: 100%;
    }
    .button-receipt-sent { white-space: nowrap; padding: 21px 50px 29px; font-size: 40px; }
    .receipt-sent-screen .screen-inner { padding-top: 70px; }
    .receipt-sent-screen .title { color: #fff; font-weight: 500; font-size: 80px; line-height: 80px; text-align: center; }
    .receipt-sent-screen .text { color: #fff; font-size: 60px; line-height: 60px; text-align: center; margin-top: 50px; }
    .receipt-sent-screen .sub-text { position: relative; color: #fff; font-size: 40px; line-height: 40px; text-align: center; text-decoration: underline; margin-top: 80px; }

    /* ==== техпанель навигации (для проверки) ==== */
    #nav { position: fixed; z-index: 9999; top: 8px; left: 8px; display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: rgba(0,0,0,.35); color: #fff; border-radius: 10px; font: 14px/1.2 system-ui, sans-serif; }
    #nav select, #nav button { font-size: 14px; border-radius: 6px; padding: 4px 6px; }
    #nav label{ opacity:.9 }


    /* debug footer */
#dbg-footer{
  position:static;
  z-index:10050;
  padding:0.5em 0.8em;
  background: rgba(0,0,0,.6);
  color:#fff;
  font-size: 4vw;
  display:flex;
  align-items:center; flex-wrap:wrap;
  border-radius: 2vw 0 0 0;
}
#dbg-footer .group{ display:flex; align-items:center; gap:.65em; font-size:3vw;}
#dbg-footer select, #dbg-footer input{
    font-size:1em; padding:.4em .6em; border-radius:.5em; border:0;
pointer-events: all;
}
#dbg-footer label{ opacity:.9; user-select:none; }

/* debug timer — отдельный элемент, выше, чтобы не перекрывались */
#dbg-timer{
  position:static;
  right:0;
  bottom:5.8em;
  z-index:10040;
  /* background:rgba(0,0,0,.6); */
  color:#fff;
  padding:.5em .7em;
  border-top-left-radius:8px;
  font-size: 2.5vw;
}

/* удобство для grab-to-scroll */
.custom-scrollbars__content.is-grabbing{ cursor:grabbing; user-select:none; }


 .descrmini {
   margin-top: 1vw;
    font-size: 2vw;
}

/* === DEBUG: панель и таймер === */
.dbg {
  position: fixed;
  left: 0; right: 0; bottom: 0; z-index: 10050;
  color: #fff;
  font: 1.05em/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.dbg-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: right;
    justify-content: flex-end;
}
.dbg-cell { display:flex; gap:.65em; align-items:center; }
.dbg-label { opacity:.95; user-select:none; }
.dbg-inline { display:inline-flex; margin-left:.5em; }
.dbg-hint {
    opacity: .8;
    font-size: 3vw;
    margin-top: 2vw;
}

.dbg select, .dbg input[type="checkbox"] {
  font-size: 1em; padding: .4em .6em; border-radius: .5em; border: 0;
}

/* таймер — отдельный элемент, чтобы не перекрывать панель */
.dbg-timer{
  position: fixed; right: 0; bottom: 4.8em; z-index: 10040;
  background: rgba(0,0,0,.6); color:#fff; padding: .5em .7em;
  font: 16px/1.1 system-ui, sans-serif; border-top-left-radius: 8px;
  display: flex; gap: .35em; align-items: baseline;
}
.dbg-timer__label { opacity:.85; }
.dbg-timer__value { font-weight:700; }
.dbg-sep { opacity:.6; margin: 0 .25em; }

/* для экрана шаблонов — удобство перетяжки (grab-to-scroll) */
.custom-scrollbars__content.is-grabbing{ cursor:grabbing; user-select:none; }