.page-ref {
    padding-top: 80px;
    padding-bottom: 60px;
}

.header--ref {
    padding-bottom: 16px;
    border-bottom: 1px solid #C0C8D2;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
    width: 100%;
}

.header--ref .header__logo img {
    width: auto;
}

.pr-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.pr-header__back {
    width: 24px;
    height: 24px;
}

.pr-header__back svg {
    width: 100%;
    height: 100%;
}

.pr-header__title {
    font-family: Inter;
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
    color: #16181E;
}

.pr-header__description {
    font-family: Inter;
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
    color: #16181E;
}

.ref-form .form {
    padding: 0;
    gap: 20px;
    max-width: 480px;
}

.form__label {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 14px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #707070;
}

.form__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ref-form .form__input {
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 24px;
    letter-spacing: 0px;
    color: #16181E;
    border-color: #ADADAD;
}

.ref-form .form__input::placeholder {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 24px;
    letter-spacing: 0px;
    color: #ADADAD;
}

.has-register-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.has-register-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0px;
    color: #484848;
}

.has-register-checkbox:checked + .checkmark {
    background: var(--blue);
    border-color: var(--blue);
}

.has-register-checkbox:checked + .checkmark::after {
    display: block;
}

.ref-form .form__btn {
    background-color: #1928F0;
    padding: 14px 24px;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
}

.ref-form .form__btn.loading {
    color: #1928F0;
}

.page-ref .container {
    max-width: 1320px;
}

.footer .container {
    max-width: 1320px;
}

.pr-header__actions {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.pr-header__link {
    font-family: Inter;
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
    color: #1928F0;
    cursor: pointer;
}

.pr-header__copy {
    font-family: Inter;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    leading-trim: NONE;
    padding: 14px;
    border-radius: 50px;
    border: 1px solid #1928F0;
    cursor: pointer;
    background-color: #fff;
    line-height: 16px;
    letter-spacing: 0%;
    color: #1928F0;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
}

.pr-header__copy::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.52344 12.4727C1.83984 11.7891 1.5 10.9609 1.5 9.99609C1.5 9.07031 1.87109 8.18359 2.52344 7.52734C3.20703 6.84375 4.03125 6.50391 5 6.50391H8.5C8.91406 6.50391 9.25 6.16797 9.25 5.75391C9.25 5.33984 8.91406 5.00391 8.5 5.00391H5C3.61719 5.00391 2.4375 5.49219 1.46094 6.46484C0.484375 7.4375 0 8.61719 0 10C0 11.3828 0.488281 12.5625 1.46094 13.5391C2.43359 14.5156 3.61719 15 5 15H8.5C8.91406 15 9.25 14.6641 9.25 14.25C9.25 13.8359 8.91406 13.5 8.5 13.5H5.03125C4.08984 13.5039 3.1875 13.1328 2.52344 12.4727Z' fill='%231928F0'/%3E%3Cpath d='M6.875 9.25H13.125C13.5391 9.25 13.875 9.58594 13.875 10C13.875 10.4141 13.5391 10.75 13.125 10.75H6.875C6.46094 10.75 6.125 10.4141 6.125 10C6.125 9.58594 6.46094 9.25 6.875 9.25Z' fill='%231928F0'/%3E%3Cpath d='M18.5391 6.46094C17.5625 5.48437 16.3867 5 15 5H11.5C11.0859 5 10.75 5.33594 10.75 5.75C10.75 6.16406 11.0859 6.5 11.5 6.5H14.9688C15.9063 6.49609 16.8086 6.86719 17.4766 7.52734C18.1602 8.21094 18.5 9.03906 18.5 10.0039C18.5 10.9297 18.1289 11.8164 17.4766 12.4727C16.793 13.1562 15.9688 13.4961 15 13.4961H11.5C11.0859 13.4961 10.75 13.832 10.75 14.2461C10.75 14.6602 11.0859 14.9961 11.5 14.9961H15C16.3828 14.9961 17.5625 14.5078 18.5391 13.5352C19.5156 12.5586 20 11.3828 20 9.99609C20 8.61719 19.5117 7.4375 18.5391 6.46094Z' fill='%231928F0'/%3E%3C/svg%3E%0A");
    background-size: 20px;
    width: 20px;
    height: 20px;
}


.pr-header__copy:hover {
    background-color: #1928F0;
    color: #fff;
}

.pr-header__copy:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.52344 12.4727C1.83984 11.7891 1.5 10.9609 1.5 9.99609C1.5 9.07031 1.87109 8.18359 2.52344 7.52734C3.20703 6.84375 4.03125 6.50391 5 6.50391H8.5C8.91406 6.50391 9.25 6.16797 9.25 5.75391C9.25 5.33984 8.91406 5.00391 8.5 5.00391H5C3.61719 5.00391 2.4375 5.49219 1.46094 6.46484C0.484375 7.4375 0 8.61719 0 10C0 11.3828 0.488281 12.5625 1.46094 13.5391C2.43359 14.5156 3.61719 15 5 15H8.5C8.91406 15 9.25 14.6641 9.25 14.25C9.25 13.8359 8.91406 13.5 8.5 13.5H5.03125C4.08984 13.5039 3.1875 13.1328 2.52344 12.4727Z' fill='%23ffffff'/%3E%3Cpath d='M6.875 9.25H13.125C13.5391 9.25 13.875 9.58594 13.875 10C13.875 10.4141 13.5391 10.75 13.125 10.75H6.875C6.46094 10.75 6.125 10.4141 6.125 10C6.125 9.58594 6.46094 9.25 6.875 9.25Z' fill='%23ffffff'/%3E%3Cpath d='M18.5391 6.46094C17.5625 5.48437 16.3867 5 15 5H11.5C11.0859 5 10.75 5.33594 10.75 5.75C10.75 6.16406 11.0859 6.5 11.5 6.5H14.9688C15.9063 6.49609 16.8086 6.86719 17.4766 7.52734C18.1602 8.21094 18.5 9.03906 18.5 10.0039C18.5 10.9297 18.1289 11.8164 17.4766 12.4727C16.793 13.1562 15.9688 13.4961 15 13.4961H11.5C11.0859 13.4961 10.75 13.832 10.75 14.2461C10.75 14.6602 11.0859 14.9961 11.5 14.9961H15C16.3828 14.9961 17.5625 14.5078 18.5391 13.5352C19.5156 12.5586 20 11.3828 20 9.99609C20 8.61719 19.5117 7.4375 18.5391 6.46094Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}

.pr-header__description span {
    text-decoration: underline;
}

.pr-header__description--ref {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
}

.form__input.loading {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%231928F0" stroke-width="8" stroke-dasharray="200" stroke-dashoffset="100"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatCount="indefinite"/></circle></svg>');
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.form__input.success {
    border-color: #46b450;
}

.form__input.error {
    border-color: #dc3232;
}

.error-message {
    color: #dc3232;
    font-size: 12px;
    display: block;
    margin-top: 5px;
}

.success-message {
    text-align: center;
    padding: 40px;
    color: #46b450;
}

button.loading {
    position: relative;
    color: transparent;
}

button.loading:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ref-inn-find {
    align-items: center;
    color: #2f333f;
    display: flex;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
}

.ref-inn-find span {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2349_19459)'%3E%3Cpath d='M15.6282 2.61385C15.1332 2.11814 14.3293 2.11846 13.8336 2.61385L5.75659 10.6912L2.1667 7.10132C1.671 6.60562 0.867479 6.60562 0.371777 7.10132C-0.123926 7.59702 -0.123926 8.40055 0.371777 8.89625L4.85894 13.3834C5.10664 13.6311 5.43143 13.7553 5.75625 13.7553C6.08107 13.7553 6.40617 13.6314 6.65387 13.3834L15.6282 4.40874C16.1239 3.91339 16.1239 3.10952 15.6282 2.61385Z' fill='%231928F0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2349_19459'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 16px;
    color: transparent;
    font-size: 0;
    height: 16px;
    margin-right: 8px;
    width: 16px;
}

.page-ref__pseudo-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 480px;
}

.pr-header__description--bottom {
    margin-top: 20px;
}

.page-ref__pseudo-form .form__input {
    background-color: #F8F7FA;
    border-color: #ADADAD;
    border-radius: 12px;
}

.pr-button-ref {
    margin-top: 20px;
    padding: 20px;
    background-color: #1928F0;
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 16px;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: center;
    width: 100%;
    display: flex;
    transition: background-color 0.3s ease;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.pr-button-ref:hover {
    background-color: #3341fe;
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #1928f0;
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1000;
    font-family: sans-serif;
    font-size: 14px;
    pointer-events: none;
}

.notification.show {
    opacity: 1;
    transform: translateY(0);
}

.page-ref__success {
    margin-top: 90px;
    margin-bottom: 96px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-shadow: 0px 2px 12px 0px #0000001F;
    border-radius: 16px;
    background-color: #fff;
    padding: 32px 16px 40px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 603px;
}

.pr-success__title {
    font-family: Inter;
    font-weight: 600;
    font-style: Semi Bold;
    font-size: 22px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0px;
    text-align: center;
    color: #16181E;
    margin-bottom: 12px;
}

.pr-success__description {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    color: #484848;
    margin-bottom: 20px;
}

.pr-success__link {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 20px;
    letter-spacing: 0%;
    color: #fff;
    background-color: #1928F0;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border-radius: 16px;
    padding: 20px 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.pr-success__link:hover {
    background-color: #3341fe;
}

.ref-form .privacy-row {
    font-size: 14px;
}

.page-template-page-ref .footer .logo__img {
    height: 27px;
    width: auto;
}

@media (min-width:768px){
    .pr-header__back {
        width: 28px;
        height: 28px;
    }

    .header--ref {
        width: calc(100% - 40px);
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        top: 16px;
        left: 20px;
        right: 20px;
        max-width: 1320px;
        margin: 0 auto;
    }

    .page-ref {
        padding-top: 100px;
        padding-bottom: 80px;
    }

    .pr-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 24px 16px;
    }

    .pr-header__title {
        font-size: 28px;
    }

    .pr-header__description {
        font-size: 18px;
    }

    .ref-form .form__btn {
        padding: 20px;
    }

    .pr-header__actions {
        width: 100%;
        flex-direction: row;
        gap: 20px;
        align-items: center;
    }

    .pr-header__copy {
        padding: 16px;
        width: fit-content;
    }

    .pr-header__link {
        font-size: 18px;
    }

    .pr-button-ref {
        max-width: 232px;
    }

    .pr-header__description--ref {
        font-size: 16px;
    }

    .page-ref__success {
        margin-top: 100px;
        padding: 48px 32px;
        margin-bottom: 100px;
    }

    .pr-success__title {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .pr-success__description {
        font-size: 18px;
        margin-bottom: 36px;
    }

    .header--ref .header__logo img {
        height: 28px;
    }

}

@media (min-width: 1280px){
    .pr-header {
        max-width: 650px;
    }

    .ref-form .form, .page-ref__pseudo-form {
        max-width: 650px;
        width: 100%;
    }

    .privacy-label {
        align-items: center;
    }

    .pr-header__copy {
        padding: 14px 16px;
        min-width: 208px;
    }

    .pr-header__description--bottom {
        max-width: 650px;
    }

    .page-ref {
        padding-bottom: 100px;
        min-height: calc(100dvh - 256px);
    }

    .ref-form .form__btn {
        max-width: 482px;
    }

    .ref-form .privacy-row {
        max-width: 482px;
    }

    .page-ref__success {
        max-width: 680px;
    }
}