/* =====================================================================
 * patch.css — підключати ОСТАННІМ, після всіх інших стилів кіоску
 *
 * Дві задачі:
 *   1. video-mode — гасимо все зайве, поки грає відео
 *   2. .grid-empty — стилі для порожньої сітки (нова render.js більше
 *      не вбудовує style="" прямо в HTML)
 * ===================================================================== */

/* =====================================================================
 * 1. РЕЖИМ ВІДЕО
 * ---------------------------------------------------------------------
 * Поки відкритий iframe, паралельно працюють: годинник, віджет погоди,
 * SVG-спінер тривоги, hover-анімації кнопок. Кожна CSS-анімація на SVG
 * зі stroke-dasharray — це перемальовування, яке НЕ йде на GPU і б'є
 * прямо по кадровому бюджету відеодекодера.
 * ===================================================================== */

body.video-mode .header-top-strip {
    visibility: hidden;          /* погода + годинник */
}

body.video-mode #alarm-widget circle,
body.video-mode .spinner,
body.video-mode .button,
body.video-mode .slider-hint-icon,
body.video-mode .loading-overlay {
    animation-play-state: paused !important;
    transition: none !important;
}

/* Поки відео — футер не клікабельний (щоб випадковий дотик не відкрив
   модалку поверх плеєра) */
body.video-mode .footer-links {
    pointer-events: none;
    opacity: .4;
}

/* =====================================================================
 * 2. ГАРАНТОВАНЕ ПРИХОВУВАННЯ
 * ---------------------------------------------------------------------
 * КРИТИЧНО: якщо прихований контейнер лишається в дереві композитора
 * (opacity:0 / visibility:hidden), браузер продовжує його обробляти.
 * display:none прибирає його повністю.
 *
 * ⚠️ Якщо у вашому kiosk.css/grid.css поява сітки анімована через
 * opacity — ці правила приберуть плавність переходу. Тоді просто
 * видаліть цей блок і переконайтесь, що .iframe-container без .active
 * має display:none самостійно.
 * ===================================================================== */

.iframe-container:not(.active) {
    display: none !important;
}

#grid.hidden {
    display: none !important;
}

/* =====================================================================
 * 3. ПОРОЖНЯ СІТКА
 * ===================================================================== */

.grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #fff;
    padding: 80px 20px;
    font-size: 24px;
}

.grid-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.grid-empty-title {
    font-weight: 700;
    margin-bottom: 10px;
}

.grid-empty-hint {
    font-size: 16px;
    opacity: .8;
}

/* =====================================================================
 * 4. IFRAME
 * ---------------------------------------------------------------------
 * will-change: transform створює окремий композиторський шар для
 * відео — менше перемальовувань сусідніх елементів.
 * ===================================================================== */

#iframeContent {
    border: 0;
    width: 100%;
    height: 100%;
    display: block;
    will-change: transform;
}

/* =====================================================================
 * 5. ПРИМУСОВО НИЗЬКА РОЗДІЛЬНА ЗДАТНІСТЬ (опційно)
 * ---------------------------------------------------------------------
 * Якщо chrome://gpu показує Video Decode: Software only — плеєр сам
 * обере низький потік під фізичний розмір фрейму. Додайте клас
 * yt-lowres на .iframe-container у openIframe(), коли isYoutubeUrl().
 * ===================================================================== */

.iframe-container.yt-lowres #iframeContent {
    width: 640px;
    height: 360px;
    transform: scale(3);
    transform-origin: top left;
}