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

.buy-modal{
    position:fixed;
    inset:0;

    z-index:2000;

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

    padding:32px;
}

.buy-modal.is-open{
    display:flex;
}

.video-modal__backdrop{
    position:absolute;
    inset:0;

    background:rgba(23,23,23,.72);

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

    cursor:pointer;
}

.video-modal__close{
    position:absolute;
    top: 0;
    right: -12px;
    transform: translateX(100%);
    z-index:1;
    width:40px;
    height:40px;
    margin:0;
    padding:0;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFFFFF;
    color:#171717;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    transition:opacity .2s ease;
}

.video-modal__close:hover{
    opacity:.88;
}

@media(max-width: 1560px) {

    .photo-modal .video-modal__close {
        right: 0;
        top: -12px;
        transform: translateY(-100%);
    }
}

@media(max-width: 991px) {

    .photo-modal .video-modal__close {
        right: 16px;
        top: 16px;
        transform: none;
        background: rgba(107, 114, 128, 0.12);
    }
}

.buy-modal__box{
    position:relative;

    width:100%;
    max-width:400px;

    background:#FFFFFF;

    padding:24px;
}

.buy-modal__box .video-modal__close{
    transform: none;
    right: 24px;
    top: 24px;
    background: rgba(107, 114, 128, .12);
    transition: .3s ease;
}

.buy-modal__box .video-modal__close:hover{
    background: rgba(82, 82, 82, .12);
}

.buy-modal__title{
    margin:0 0 4px;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:700;
    font-size:24px;
    line-height:28px;
    letter-spacing:-.8px;

    color:#171717;
}

.buy-modal__subtitle{
    margin:0 0 28px;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size:14px;
    line-height:18px;

    color:#737373;
}

.buy-modal__box form{
    display:flex;
    flex-direction:column;

    gap:8px;
    margin: 0;
}

.buy-modal .pm-cart-field .pm-cart-label{
    position:absolute;
    left:12px;
    top:50%;

    transform:translateY(-50%);

    opacity:1;
    visibility:visible;

    font-size:16px;
    line-height:20px;

    color:#A3A3A3;

    transition:
        font-size .15s ease,
        top .15s ease,
        transform .15s ease;
}

.buy-modal .pm-cart-input:focus ~ .pm-cart-label,
.buy-modal .pm-cart-input:not(:placeholder-shown) ~ .pm-cart-label{
    top:10px;
    transform:translateY(0);

    font-size:12px;
    line-height:14px;
}

.buy-modal__box form .pm-cart-field{
    border-radius: 0;
}

.buy-modal__box form .pm-phone-prefix{
    border-radius: 0;
}

.buy-modal__box form .pm-cart-policy__label{
    margin: 8px 0;
}

.pm-required-mark{
    color:#EF4444;

    transition:color .15s ease;
}

.buy-modal .pm-cart-input:focus ~ .pm-cart-label .pm-required-mark,
.buy-modal .pm-cart-input:not(:placeholder-shown) ~ .pm-cart-label .pm-required-mark{
    color:inherit;
}

.buy-modal__phone-field{
    position:relative;

    flex:1;
    height:100%;
}

.buy-modal__phone-field .pm-phone-input{
    position:relative;
    z-index:1;

    width:100%;
    height:100%;

    background:transparent;
}

.buy-modal__phone-placeholder{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;

    padding:0 12px;

    font-family:Gilroy,sans-serif;
    font-size:16px;
    font-weight:500;
    line-height:20px;

    color:#737373;

    pointer-events:none;
}

.buy-modal__phone-placeholder.is-hidden{
    display:none;
}

.buy-modal__phone-placeholder .pm-required-mark{
    margin-left:1px;
}

.buy-modal__submit{
    width:100%;
    height:56px;

    margin:20px 0 0;
    padding:0 24px;

    border:0;

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

    background:#C2EB00;

    font-family:"Roboto Flex Custom",sans-serif;
    font-style:italic;
    font-weight:700;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;
    text-transform:uppercase;

    color:#171717;

    cursor:pointer;

    transition:background-color .2s ease;
}

.buy-modal__submit:hover{
    background:#B4DB00;
}

.buy-modal__submit:disabled{
    opacity:.6;
    cursor:wait;
}

/*
 * Чекбокс согласия в этой модалке - свой цвет/галочка (лайм + чёрная
 * галочка), а не синий/белый вариант из cart.css.
 */
.buy-modal .pm-cart-policy input:checked + .pm-cart-policy__check{
    background-color:#D2FF00;
    border-color:#D2FF00;
}

.buy-modal .pm-cart-policy input:checked + .pm-cart-policy__check::after{
    content:"";

    width:100%;
    height:100%;

    background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.57929 12C7.37919 12 7.18909 11.9219 7.04902 11.7851L4.21761 9.02128C3.92746 8.73805 3.92746 8.26927 4.21761 7.98605C4.50775 7.70283 4.98799 7.70283 5.27814 7.98605L7.57929 10.2323L12.7219 5.21242C13.012 4.92919 13.4922 4.92919 13.7824 5.21242C14.0725 5.49564 14.0725 5.96442 13.7824 6.24765L8.10955 11.7851C7.96948 11.9219 7.77939 12 7.57929 12Z' fill='black'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:14px 14px;

    font-size:0;
}

.buy-modal__success-step[hidden]{
    display:none;
}

.buy-modal__success-step{
    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
    margin-top: 80px;
}

.buy-modal__success-icon{
    width:64px;
    height:64px;

    margin-bottom:16px;
}

.buy-modal__success-title{
    margin-bottom:8px;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:700;
    font-size:18px;
    line-height:24px;

    color:#171717;
}

.buy-modal__success-text{
    margin-bottom:59px;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size:16px;
    line-height:22px;

    color:#737373;
}

@media(max-width:991px){

    .buy-modal{
        display:flex;
        align-items:flex-end;

        padding:0;

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }

    .buy-modal.is-open{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .buy-modal__box{
        width:100%;
        max-width:100%;
        max-height:88vh;

        overflow-y:auto;

        transform:translateY(100%);
        transition:transform .3s ease;
    }

    .buy-modal.is-open .buy-modal__box{
        transform:translateY(0);
    }

}

.pm-cart-field-wrap--readonly .pm-cart-field{
    cursor:default;
}

.pm-cart-field-wrap--readonly .pm-cart-field:hover{
    background:rgba(107,114,128,.12);
}

.pm-cart-field-wrap--readonly .pm-cart-input:disabled{
    cursor:default;

    color:#525252;
    -webkit-text-fill-color:#525252;
    opacity:1;

    padding-top:14px;
}

.pm-cart-field-wrap--readonly {
    opacity: 0.4;
}

.pm-cart-field-wrap--readonly .pm-cart-label{
    top:10px;
    transform:translateY(0);

    font-size:12px;
    line-height:14px;
}


/* ==========================================================================
   Счётчик количества
   ========================================================================== */

.buy-modal__qty{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:56px;
    padding:0 12px;
    background:rgba(82, 82, 82, .08);
}

.buy-modal__qty-btn{
    width:24px;
    height:24px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:none;
    font-size:16px;
    line-height: 22px;
    font-weight: 400;
    color:#171717;
    cursor:pointer;
    padding: 0;
}

.buy-modal__qty-center{
    display:flex;
    align-items:baseline;
    justify-content:center;

    gap:4px;
}

.buy-modal__qty-value{
    font-size:16px;
    font-weight:500;
    line-height:20px;

    color:#171717;
}

.buy-modal__qty-suffix{
    font-size:16px;
    font-weight:500;
    line-height:20px;

    color:#171717;
}