/* ============================================
   IPAD — ONEPRIMETV Redesign 2026
   ============================================ */

/* iPad Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1366px)
  and (orientation: landscape) {

    body, html, .app-layout {
        height: 100dvh !important;
        flex-direction: row !important;
    }

    .player-area {
        height: 100% !important;
        flex: 1 !important;
    }

    .sidebar {
        width: 320px !important;
        height: 100% !important;
        padding-top: env(safe-area-inset-top) !important;
    }

    .custom-controls {
        padding-top: calc(env(safe-area-inset-top) + 20px) !important;
    }

    #epg-grid-overlay {
        position: fixed !important;
        left: 16px !important;
        right: 336px !important;
        bottom: 100px !important;
        height: 58vh !important;
        width: auto !important;
        display: none;
        z-index: 9999;
    }

    #epg-grid-overlay.show {
        display: flex !important;
    }

    .epg-preview-popup {
        max-height: 150px !important;
        pointer-events: auto !important;
    }

    #preview-desc {
        max-height: 70px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* iPad Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1366px)
  and (orientation: portrait) {

    body, html, .app-layout {
        height: 100dvh !important;
        flex-direction: column !important;
    }

    .player-area {
        height: 42vh !important;
        width: 100vw !important;
        flex-shrink: 0;
        z-index: 100 !important;
        padding-top: env(safe-area-inset-top) !important;
    }

    .sidebar {
        height: 58vh !important;
        width: 100vw !important;
        padding-top: 10px !important;
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .sidebar::before { display: none; }

    .custom-controls {
        padding-top: calc(env(safe-area-inset-top) + 10px) !important;
    }

    #epg-grid-overlay {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 52vh !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        border-bottom: none !important;
        display: none;
        z-index: 999999 !important;
    }

    #epg-grid-overlay.show {
        display: flex !important;
    }

    .epg-preview-popup {
        position: absolute !important;
        top: auto !important;
        bottom: -10px !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(100%) !important;
        width: 100% !important;
        pointer-events: auto !important;
        display: none;
    }

    .epg-preview-popup.show {
        display: block !important;
    }

    #video-wrapper {
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    body.epg-open #video-wrapper {
        overflow: visible !important;
    }
}