/* Sekcja: contact_form - pełny CSS sekcji (zapis zagnieżdżony). */

.contact-form {
    width: 100%;
    padding-bottom: 20px;
    background-color: var(--section-bg);

    .container-block.left {
        h2,
        h3 {
            color: var(--element1-title);

            span {
                color: var(--element1-highlighted-title);
            }
        }

        p,
        ul li,
        ol li,
        span {
            color: var(--element1-highlighted-title);
        }

        a {
            color: var(--element1-link);

            &:hover {
                color: var(--element1-link-hover);
            }
        }
    }

    .container-block.right {
        h2,
        h3 {
            color: var(--element2-title);

            span {
                color: var(--element2-highlighted-title);
            }
        }

        p,
        ul li,
        ol li,
        span,
        label {
            color: var(--element2-text);

            span {
                color: var(--element2-highlighted-title);
            }
        }

        a {
            color: var(--element2-link);

            &:hover {
                color: var(--element2-link-hover);
            }
        }
    }

    h3 {
        margin: 0;
        font-family: 'Lato', sans-serif;
        font-size: 1.4375rem;
    }

    .title {
        margin-bottom: 15px;

        p {
            margin-bottom: 0;
            margin-top: 5px;
            font-weight: 500;
        }
    }

    .content {
        margin-top: 30px;
        padding: 25px;

        strong {
            color: inherit;
        }

        p {
            margin-bottom: 10px;
        }
    }

    &.reverse {
        .text {
            padding-left: 50px;
            padding-right: 0;
        }

        .wrapper {
            flex-direction: row-reverse;
        }
    }

    .linki {
        margin-top: 25px;

        .link {
            display: flex;
            align-items: center;
            margin-bottom: 15px;

            span {
                transition: 0.3s;
                -webkit-transition: 0.3s;
            }

            &:hover {
                .link-photo {
                    background-color: var(--element1-content-bg-hover);
                    border-color: var(--element1-content-border-hover);
                }

                span {
                    color: var(--element1-link-hover);
                }
            }

            &.email {
                .link-photo {
                    background-image: url('/img/email.svg');
                }
            }

            &.address {
                .link-photo {
                    background-image: url('/img/mark.svg');
                }
            }

            &.telephone {
                .link-photo {
                    background-image: url('/img/tel.svg');
                }
            }
        }

        .link-photo {
            background-size: 45%;
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 15px;
            min-width: 48px;
            width: 48px;
            height: 48px;
            border-radius: var(--content-border-radius);
            border-style: solid;
            border-width: var(--content-border-width);
            border-color: var(--element1-content-border);
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--element1-content-bg);
            transition: 0.3s;
            -webkit-transition: 0.3s;
        }

        .link-text {
            strong {
                display: block;
                margin-top: 5px;
                font-weight: 500;
                color: var(--element1-title);
            }
        }
    }

    .wrapper {
        display: flex;
        flex-wrap: wrap;
        padding: 45px;
    }

    .text {
        padding-right: 50px;
        flex: 1 1 50%;
        background-color: var(--element1-bg);
    }

    .form {
        flex: 1 1 50%;
        display: flex;
        align-items: center;
        background-color: var(--element2-bg);

        .form-control {
            background-color: var(--element2-content-bg);
            border-style: solid;
            border-width: var(--content-border-width) !important;
            border-color: var(--element2-content-border) !important;
            border-radius: var(--content-border-radius) !important;
            color: var(--element2-text);

            &::placeholder {
                color: var(--element2-text);
            }

            &:focus {
                border-color: var(--element2-content-border-hover);
            }
        }

        .checkbox-styled {
            background-color: var(--element2-content-bg);
            border-style: solid;
            border-width: var(--content-border-width);
            border-color: var(--element2-content-border);
            border-radius: var(--content-border-radius);
        }

        .btn {
            width: 100%;
            border-width: var(--button-border-width);
            border-radius: var(--button-border-radius);

            &:after {
                display: none;
            }

            &:before {
                display: block;
                content: "";
                width: 16px;
                height: 16px;
                background-image: url('/img/send2.svg');
                background-size: 16px;
                margin-right: 12px;
            }
        }

        .btn-primary {
            background-color: var(--element2-btn1-bg);
            color: var(--element2-btn1-text);
            border-color: var(--element2-btn1-border);

            &:hover {
                background-color: var(--element2-btn1-bg-hover) !important;
                color: var(--element2-btn1-text-hover) !important;
                border-color: var(--element2-btn1-border-hover) !important;
            }
        }

        .btn-secondary {
            background-color: var(--element2-btn2-bg);
            color: var(--element2-btn2-text);
            border-color: var(--element2-btn2-border);

            &:hover {
                background-color: var(--element2-btn2-bg-hover) !important;
                color: var(--element2-btn2-text-hover) !important;
                border-color: var(--element2-btn2-border-hover) !important;
            }
        }
    }

    .form-inner {
        padding-left: 110px;
        max-width: 735px;
        padding-top: 20px;
    }
}

@media (max-width: 575.5px) {
    .contact-form {
        &.reverse {
            .wrapper {
                .text {
                    padding-left: 0;
                    padding-right: 0;
                    padding-bottom: 30px;
                }
            }
        }

        .linki {
            margin-top: 15px;
        }

        .wrapper {
            flex-direction: column !important;
            padding: 20px;

            .text {
                padding-left: 0;
                padding-right: 0;
            }
        }
    }
}

@media (min-width: 576px) and (max-width: 767.5px) {
    .contact-form {
        &.reverse {
            .wrapper {
                .text {
                    padding-left: 0;
                    padding-right: 0;
                    padding-bottom: 20px;
                }
            }
        }

        .content {
            margin-top: 20px;
            padding: 15px;
        }

        .wrapper {
            flex-direction: column !important;
            padding: 35px;

            .text {
                padding-left: 0;
                padding-right: 0;
                padding-bottom: 20px;
            }
        }
    }
}

@media (min-width: 768px) and (max-width: 991.5px) {
    .contact-form {
        &.reverse {
            .wrapper {
                .text {
                    padding-left: 0;
                    padding-right: 0;
                }
            }
        }

        .wrapper {
            flex-direction: column !important;
            padding: 35px;

            .text {
                padding-left: 0;
                padding-right: 0;
                padding-bottom: 30px;
            }
        }
    }
}

@media (min-width: 992px) and (max-width: 1579.5px) {
    .contact-form {
        .wrapper {
            padding: 35px;
        }
    }
}