/* Simple, non-intrusive orientation lock for mobile */

/* Only apply on actual mobile devices */
@media screen and (max-width: 768px) {
    /* Show a message overlay when rotated to landscape */
    @media screen and (orientation: landscape) {
        /* Create a full-screen overlay */
        body::before {
            content: "🔄 Please rotate your device to portrait mode";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #1a73e8;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 500;
            z-index: 999999;
            text-align: center;
            padding: 2rem;
        }

        /* Hide the main app content when in landscape */
        #app {
            display: none;
        }
    }
}

/* Prevent zooming on mobile (but allow all other interactions) */
@media screen and (max-width: 768px) {
    /* Prevent double-tap zoom */
    * {
        touch-action: manipulation;
    }

    /* Prevent input zoom on iOS */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px; /* This prevents zoom on iOS */
    }
}