/**
 * Portrait phone / tablet: ask user to rotate to landscape.
 * Shared by Admin, Clinic Admin, and Doctor portals.
 */

.rotate-to-landscape-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    background: #ffffff;
    color: #000000;
    box-sizing: border-box;
    /* Reset native <dialog> defaults */
    border: none;
    margin: 0;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
}

.rotate-to-landscape-overlay__icon {
    width: 72px;
    height: 72px;
    margin-bottom: 1.25rem;
    color: #94a3b8;
    animation: rotate-to-landscape-tilt 1.6s ease-in-out infinite;
}

.rotate-to-landscape-overlay__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.rotate-to-landscape-overlay__text {
    margin: 0;
    max-width: 16rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #000000;
}

@keyframes rotate-to-landscape-tilt {
    0%,
    100% {
        transform: rotate(0deg);
    }
    40%,
    60% {
        transform: rotate(90deg);
    }
}

@media screen and (max-width: 991.98px) and (orientation: portrait) {
    .rotate-to-landscape-overlay {
        display: flex;
    }

    html:has(.rotate-to-landscape-overlay),
    body:has(.rotate-to-landscape-overlay) {
        overflow: hidden !important;
        height: 100% !important;
    }
}