@use "../base/vars";

.payment_method_wc-koin-billet,
.wc-block-components-radio-control-accordion-content {
    label {
        img {
            max-width: 60px !important;
            bottom: 3px;
        }
    }

    .koin-checkout-fields {
        margin-top: 10px;

        .form-row.select {
            transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
            overflow: hidden;
            max-height: 200px;
            opacity: 1;
        }

        .koin-chekout-barcode {
            background-color: #fff;
            border-radius: 10px;

            position: relative;
            text-align: center;

            div {
                border: solid 8px #737373;
                border-radius: 10px;
            }

            svg {
                fill: #737373;
                width: 40%;
            }
        }

        .koin-checkout-message {
            margin-top: 15px;
            vertical-align: middle;

            svg {
                fill: vars.$primary;
                width: 20px;
            }

            a {
                position: relative;
                left: 5px;
                bottom: 5px;
                color: #000;
                font-size: 16px;
                text-decoration: none;
                outline: none;

                &:hover {
                    cursor: pointer;
                }

                span {
                    text-decoration: underline vars.$primary;
                }

                i {
                    margin-left: 5px;
                    font-style: italic;
                    color: vars.$primary;
                    text-decoration: underline #000;
                }
            }
        }
    }
}

.koin-popup-about {
    display: none;

    >div {
        position: relative;
        width: 100%;
        max-width: 700px;
        margin: auto;
    }

    &-active {
        display: flex;
        flex-direction: column;
        align-items: center;

        position: fixed;
        z-index: 9998;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.7);

        @media only screen and (max-width: 700px) {
            padding: 100px 15px;
        }

        img {
            padding-top: 60px;
            position: relative;
            width: 100%;
            max-width: 900px !important;

            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        .close {
            color: #000;
            z-index: 9999;
            font-size: 40px;
            font-weight: 700;
            transition: all .3s;
            position: absolute;
            top: 10px;
            right: 25px;
            opacity: 40%;

            &:hover,
            &:focus {
                color: #bbb;
                text-decoration: none;
                cursor: pointer;
            }
        }
    }
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

.wp-block-woocommerce-checkout-fields-block {
    .wc-block-components-text-input[id*="document-type-br"] {
        .wc-block-components-radio-control {
            display: flex;
            flex-direction: row;
            gap: 15px;
            align-items: center;

            .wc-block-components-radio-control__option {
                margin: 0;
            }
        }
    }
}

#wc_koin_document_type_br_field {
    .woocommerce-input-wrapper {
        display: flex;
        gap: 8px;
        align-items: center;

        label.radio {
            margin: 0;
        }
    }
}
