/**
 * CiMovie - 10-Foot Spatial Navigation & Focus Styles for LG webOS TV
 * Guarantees 3:1 WCAG contrast on focused items, predictable elevation,
 * no row clipping, and smooth hardware-accelerated transitions.
 */

[data-focusable="true"] {
    position: relative;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1),
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                background-color 0.2s ease,
                color 0.2s ease;
    will-change: transform, box-shadow;
}

/* Base Universal Focus Rule for 10-Foot TV Display */
[data-focusable="true"].focused,
[data-focusable="true"]:focus-visible {
    border-color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.65), 0 12px 32px rgba(0, 0, 0, 0.9) !important;
    z-index: 45 !important;
}

/* 1. Navigation Rail Icon Focus */
.rail-icon-btn.focused {
    background: rgba(229, 9, 20, 0.28) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.7), 0 8px 24px rgba(0, 0, 0, 0.75) !important;
}

.rail-icon-btn.focused .nav-svg {
    transform: scale(1.08);
    color: #ffffff !important;
}

/* 2. Media Cards Focus (Smooth 1.05 scale, no vertical clipping in rail) */
.media-card.focused {
    transform: scale(1.06) translateY(-4px);
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.6), 0 16px 40px rgba(0, 0, 0, 0.9) !important;
}

.media-card.focused .media-card-poster img {
    transform: scale(1.04);
}

.media-card.focused .media-card-info {
    background: #1c2438 !important;
}

.media-card.is-series.focused .series-stack-layer.layer-back {
    transform: translateX(-50%) translateY(-3px);
    opacity: 0.52;
}

.media-card.is-series.focused .series-stack-layer.layer-mid {
    transform: translateX(-50%) translateY(-1.5px);
    opacity: 0.82;
}

/* 3. Hero Action Buttons */
.btn-primary.focused {
    background: var(--accent-primary-focus) !important;
    border-color: #ffffff !important;
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 8px 28px rgba(229, 9, 20, 0.7) !important;
}

.btn-secondary.focused {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: #ffffff !important;
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.6), 0 8px 24px rgba(0, 0, 0, 0.7) !important;
}

/* 4. Slider Thumbnail Strip Focus */
.slider-thumb-card.focused {
    border-color: #ffffff !important;
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.65), 0 10px 24px rgba(0, 0, 0, 0.85) !important;
}

/* 5. Virtual Keyboard (OSK) Key Focus */
.osk-key.focused {
    background: #ffffff !important;
    color: #080b11 !important;
    border-color: #ffffff !important;
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.7), 0 8px 24px rgba(0, 0, 0, 0.8) !important;
    font-weight: 900;
}

/* 6. Season Tabs and Episode Cards */
.season-tab-btn.focused {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.6), 0 8px 20px rgba(0, 0, 0, 0.7) !important;
}

.episode-card.focused {
    border-color: #ffffff !important;
    background: #1c2438 !important;
    transform: scale(1.03);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.5), 0 12px 30px rgba(0, 0, 0, 0.8) !important;
}

.episode-card.focused .ep-num {
    color: #ffffff !important;
}

/* 7. Modal List Items (Quality Modal) */
.modal-list-item.focused {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: #ffffff !important;
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.6), 0 8px 24px rgba(0, 0, 0, 0.7) !important;
}

/* 8. Search Input Field Focus */
.search-input-field.focused {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.5), 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

/* 9. Player Transport & Icon Controls Focus */
.player-ctrl-btn.focused,
.player-icon-btn.focused {
    border-color: #ffffff !important;
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.75), 0 10px 28px rgba(0, 0, 0, 0.9) !important;
}

.player-ctrl-btn.primary.focused {
    background: var(--accent-primary-focus) !important;
    box-shadow: 0 0 0 4px #ffffff, 0 12px 36px rgba(229, 9, 20, 0.8) !important;
}

/* 10. Player Error Overlay Actions Focus */
.player-error-box .error-actions button.focused {
    border-color: #ffffff !important;
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.65), 0 8px 24px rgba(0, 0, 0, 0.8) !important;
}