﻿
.popup-form {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    A
}

.popup-form--visible {
    display: flex;
}

.popup-form__card {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02), 0 1px 6px -1px rgba(214, 91, 91, 0.02), 0 1px 2px rgba(0,0,0,0.03);
    box-sizing: border-box;
    /*    max-height: 90vh;
    overflow-y: auto;*/
}

.popup-form__close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02), 0 1px 6px -1px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.03);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: transform 0.2s;
    z-index: 10;
}

    .popup-form__close:hover {
        transform: scale(1.05);
    }

.popup-form__close-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.1401 1.82724C13.1405 1.82724 13.1409 1.8276 13.1416 1.82831L14.1718 2.85867C14.1725 2.85921 14.1726 2.85956 14.1728 2.8601C14.1729 2.86045 14.1729 2.86082 14.1728 2.86117C14.1728 2.86171 14.1725 2.86206 14.1718 2.86278L9.03425 8.00028L14.1718 13.1378C14.1725 13.1385 14.1726 13.1388 14.1728 13.1394C14.1729 13.1398 14.1729 13.1402 14.1728 13.1406C14.1728 13.141 14.1725 13.1413 14.1718 13.1421L13.1414 14.1722C13.1409 14.173 13.1405 14.1731 13.1401 14.1733C13.1397 14.1734 13.1393 14.1734 13.1389 14.1733C13.1384 14.1733 13.138 14.173 13.1373 14.1722L7.99979 9.03474L2.86229 14.1722C2.86157 14.173 2.86122 14.1731 2.86068 14.1733C2.86027 14.1734 2.85984 14.1734 2.85943 14.1733C2.85907 14.1733 2.85872 14.173 2.858 14.1722L1.82782 13.1419C1.82711 13.1413 1.82693 13.141 1.82675 13.1406C1.82663 13.1402 1.82663 13.1398 1.82675 13.1394C1.82675 13.1388 1.82711 13.1385 1.82782 13.1378L6.96533 8.00028L1.82782 2.86278C1.82711 2.86206 1.82693 2.86171 1.82675 2.86117C1.82663 2.86076 1.82663 2.86033 1.82675 2.85992C1.82675 2.85956 1.82711 2.85921 1.82782 2.85849L2.85818 1.82831C2.85872 1.8276 2.85907 1.82742 2.85943 1.82724C2.85984 1.82712 2.86027 1.82712 2.86068 1.82724C2.86122 1.82724 2.86157 1.8276 2.86229 1.82831L7.99979 6.96581L13.1373 1.82831C13.138 1.8276 13.1384 1.82742 13.1389 1.82724C13.1393 1.82712 13.1397 1.82712 13.1401 1.82724Z' fill='%23535353'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.popup-form__title {
    margin: 0 0 8px 0;
    font-size: 23.8px;
    font-weight: 600;
    line-height: 28px;
    color: #000;
    text-align: center;
}

.popup-form__subtitle {
    margin: 0 0 16px 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: rgba(0,0,0,0.25);
    text-align: center;
}

.popup-form__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.popup-form__input {
    padding: 11px 11px 11px 6px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: rgba(0,0,0,0.85);
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}

    .popup-form__input::placeholder {
        color: rgba(0,0,0,0.25);
    }

    .popup-form__input:focus {
        border-color: #E7317D;
    }

.popup-form__input--error {
    border-color: #dc3545;
}

.popup-form__error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.popup-form__consent {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.popup-form__checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.25);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}

    .popup-form__checkbox:checked {
        background: #E7317D;
        border-color: #E7317D;
    }

        .popup-form__checkbox:checked::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 4px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

.popup-form__consent-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: rgba(0,0,0,0.25);
    flex: 1;
}

    .popup-form__consent-text strong {
        color: rgba(0,0,0,0.25);
        text-decoration: underline;
        font-weight: 400;
    }

.popup-form__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.popup-form__submit {
    padding: 12px 36px;
    background: linear-gradient(197deg, #E7317D 0%, #D8242A 100%);
    border: none;
    border-radius: 1260px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    cursor: pointer;
    transition: opacity 0.2s;
    max-width: 300px;
    margin: 0 auto;
}

    .popup-form__submit:hover {
        opacity: 0.9;
    }

@media (max-width: 768px) {
    .popup-form {
        padding: 12px;
    }

    .popup-form__card {
        padding: 20px 16px;
    }

    .popup-form__close {
        top: -12px;
        right: -12px;
        width: 40px;
        height: 40px;
    }

    .popup-form__title {
        font-size: 20px;
        line-height: 24px;
    }

    .popup-form__subtitle {
        font-size: 11px;
        line-height: 18px;
    }

    .popup-form__input {
        font-size: 14px;
        padding: 10px 10px 10px 6px;
    }

    .popup-form__submit {
        max-width: 100%;
        padding: 12px 24px;
        font-size: 13px;
    }

    .popup-form__consent-text {
        font-size: 11px;
        line-height: 18px;
    }
}

@media (max-width: 480px) {
    .popup-form__card {
        padding: 16px 12px;
        border-radius: 16px;
    }

    .popup-form__close {
        top: -10px;
        right: -10px;
        width: 36px;
        height: 36px;
    }

    .popup-form__title {
        font-size: 18px;
        line-height: 22px;
    }

    .popup-form__fields {
        gap: 10px;
    }

    .popup-form__input {
        font-size: 13px;
        padding: 8px 8px 8px 4px;
    }

    .popup-form__submit {
        font-size: 12px;
        padding: 10px 16px;
    }

    .popup-form__consent {
        gap: 6px;
    }

    .popup-form__checkbox {
        width: 18px;
        height: 18px;
    }

    .popup-form__consent-text {
        font-size: 10px;
        line-height: 16px;
    }
}
