/*
 * Callback request dialog skin (partials/callback-modal.php). Structure and
 * show/hide behaviour belong to Bootstrap's Modal component - `.modal`,
 * `.modal-dialog`, `.modal-content` are its own classes, and this file only
 * adds the visual layer Bootstrap doesn't give us (width, radius, close
 * button) under a dedicated `.callback-modal__*` BEM block, so nothing here
 * collides with or overrides Bootstrap's own `.modal` positioning/backdrop
 * rules.
 */

.callback-modal__dialog {
    --bs-modal-width: 28vw;
}

.callback-modal__content {
    position: relative;
    max-height: 92vh;
    overflow-y: auto;
    padding: 2.5vw;
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius);
}

.callback-modal__close {
    position: absolute;
    top: 1.04vw;
    right: 1.04vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.98vw;
    height: 1.98vw;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.callback-modal__close:hover {
    color: var(--color-text);
}

.callback-modal__close svg {
    width: 1.04vw;
    height: 1.04vw;
}

@media only screen and (max-width: 767.98px) {
    .callback-modal__dialog {
        --bs-modal-width: 100%;
    }

    .callback-modal__content {
        padding: 8vw 6.4vw;
    }

    .callback-modal__close {
        top: 4vw;
        right: 4vw;
        width: 11.73vw;
        height: 11.73vw;
    }

    .callback-modal__close svg {
        width: 4.27vw;
        height: 4.27vw;
    }
}