html { height: 100%; }

body {
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    font-family: 'Aptos', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

main .container {
    padding: 0.5rem;
    border-radius: var(--bs-border-radius);
    background-color: #fff;
    filter: drop-shadow(0 0 0.5rem var(--bs-border-color));
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.without-loader {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

.loader {
    display: none;
    pointer-events: none;
    touch-action: none;
}

.ratio {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    --bs-aspect-ratio: 80%;
    overflow: hidden;
}

/* Em telas estreitas o index.js escala o iframe (width fixa + transform) e ajusta --bs-aspect-ratio */
.ratio > iframe.escalado {
    width: auto;
    height: auto;
    transform-origin: 0 0;
}

@media (min-width: 768px) {
    .ratio { --bs-aspect-ratio: 30%; }
}