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

.form-photo {
    width: 100%;

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

    .wrapper {
        display: flex;
        flex-wrap: wrap;

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

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

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

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

            .title {
                h3 {
                    color: var(--element1-title);
                }

                .icon {
                    figure {
                        img {
                            border-radius: var(--image-border-radius);
                        }
                    }
                }
            }

            p {
                color: var(--element1-text);
            }
        }
    }

    .foto {
        padding: 0;
        flex: 0 0 50%;

        figure.image {
            height: 100%;
            margin-top: 0;
            margin-bottom: 0;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .form {
        flex: 0 0 50%;
        display: flex;
        align-items: center;

        .checkbox-label {
            .checkbox-styled {
                background-color: var(--primary-bg);
                border-color: var(--dark-bg);

                span {
                    font-size: 22px;
                    font-weight: bold;
                }
            }
        }
    }

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

@media (max-width: 991.5px) {
    .form-photo {
        .foto {
            flex: 1 1 100%;
        }

        .form {
            flex: 1 1 100%;
        }
    }
}