@import url('https://fonts.googleapis.com/css2?family=Signika:ital,wght@0,600;0,700;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100..900&display=swap');

.registration-form-5:not(.application-success) .main-body {
    background-image: url("https://lsv.fi/wp-content/uploads/2026/04/lsv-tpm2021-banner-1-1920x768.jpg");
    background-repeat: no-repeat;
    padding-top: 150px;
    background-size: auto 150px;
    background-position: top right;
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    color: #18183A;
    border-color: #297B9E;

    >.container {
        border-radius: 10px 10px 0 0;
        background-color: #ffffff;
    }

    .row:has(> .col-sm-12 > .logo) {
        grid-column: 1 / -1;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Signika", sans-serif;
        font-weight: 600;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    p {
        font-size: 1rem;
    }

    a {
        color: #297B9E;

        &:hover {
            color: #18183A;
        }
    }

    label {
        font-size: 1rem;
        font-weight: 700;
    }

    .hint-block,
    .invalid-feedback {
        font-size: 0.875rem;
    }


    input:not(.is-invalid):not(.is-valid),
    textarea:not(.is-invalid):not(.is-valid),
    select:not(.is-invalid):not(.is-valid) {
        border-color: #297B9E;
    }

    input:not(.is-invalid):not(.is-valid):focus,
    textarea:not(.is-invalid):not(.is-valid):focus,
    select:not(.is-invalid):not(.is-valid):focus {
        outline: none;
        border-color: #297B9E;
        box-shadow: 0 0 0 4px rgba(41, 123, 158, 0.12);
    }

    .suggested-amounts .btn,
    .payment-methods .btn {
        font-family: "Signika", sans-serif;
        border-color: #297B9E;
        background-color: #ffffff;
        color: #18183A;
    }

    .payment-methods>.btn:first-child,
    .payment-methods .btn:first-of-type,
    .payment-methods label.btn:first-of-type,
    .payment-methods .btn-group>.btn:first-child {
        border-top-left-radius: 0.625rem;
        border-bottom-left-radius: 0.625rem;
    }

    .payment-methods>.btn:last-child,
    .payment-methods .btn:last-of-type,
    .payment-methods label.btn:last-of-type,
    .payment-methods .btn-group>.btn:last-child {
        border-top-right-radius: 0.625rem;
        border-bottom-right-radius: 0.625rem;
    }

    .suggested-amounts .btn.active,
    .suggested-amounts .btn:hover,
    .suggested-amounts .btn:active,
    .suggested-amounts .btn:focus,
    .payment-methods .btn:hover,
    .payment-methods input[type="radio"]:checked+label,
    .payment-methods input[type="radio"]:checked+.btn {
        background-color: #297B9E;
        color: #ffffff;
    }

    .btn-primary {
        font-family: "Signika", sans-serif;
        color: #ffffff;
        background-color: #297B9E;
        padding: 0.5rem 1rem;
        border-radius: 0.625rem;
        border: none;
    }

    .btn-primary:hover {
        background-color: #175a72;
        color: #ffffff;
    }

    .input-group-text {
        background-color: #297B9E;
        color: #ffffff;
    }

    .lead {
        font-weight: 400;
    }

    #registration-composition-form {
        padding-top: 25px;
    }

    @media(min-width: 500px) {
        background-size: contain;
        padding-top: 22vw;
    }

    .langbox {
        padding-top: 12px;
    }

    @media(min-width: 992px) {
        .langbox {
            right: 0;
        }
    }

    @media(min-width: 1500px) {
        #registration-composition-form {
            display: grid;
            grid-template-columns: 1fr 1fr;

            p,
            .logo,
            div:last-child {
                grid-column: span 2
            }
        }
    }
}