/**
 * Infoplakat Player - Player Styles
 */

/* Reset and base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #fff;
}

/* Player container */
#player-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
}

/* Slide frames */
.slide-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 8vh); /* Account for footer */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
}

.slide-frame.active {
    opacity: 1;
    z-index: 2;
}

.slide-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #000;
}

/* Loading overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #000;
    z-index: 100;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
}

/* Offline banner */
.offline-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    background-color: #f39c12;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 200;
    font-weight: 600;
}

.offline-icon {
    font-size: 1.2rem;
}

/* Placeholder for unsupported slides */
.slide-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 8vh);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    z-index: 50;
}

.placeholder-content {
    text-align: center;
    padding: 40px;
}

.placeholder-icon {
    font-size: 5rem;
    margin-bottom: 20px;
}

.placeholder-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.placeholder-info {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
}

/* =================================
   Footer - Unified Settings Approach
   Height: normal (8%) or large (12%)
   NewsMode: scroll (marquee) or fade (ticker)
   ================================= */
.player-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    color: #333;
    z-index: 500; /* Above sidebar (which has no z-index) */
}

/* Height variants */
.player-footer.height-normal {
    height: 8vh;
    --footer-height: 8vh;
}

.player-footer.height-large {
    height: 12vh;
    --footer-height: 12vh;
    padding-top: 0.5%;  /* Slight offset to push content lower */
    align-items: center;
}

/* Legacy v1/v2/v3 support (deprecated - use height-* classes) */
.player-footer.v2 {
    height: 12vh;
}

.player-footer.v3,
.player-footer.v1 {
    height: 8vh;
}

/* Marquee - hidden by default, shown in scroll mode */
.footer-marquee {
    display: none;
    position: absolute;
    right: 0;
    width: 88%; /* Leave room for clock on left */
    height: 100%;
    overflow: hidden;
    align-items: center;
}

.marquee-track {
    display: flex;
    align-items: center;
    animation: marquee-scroll linear infinite;
    white-space: nowrap;
    padding-left: 100%;
}

/* Footer in scroll mode - adjust clock to be smaller */
.player-footer.scroll-mode .footer-clock {
    flex-basis: 12%;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    padding-right: 4vmax;
}

.marquee-provider {
    font-weight: bold;
    margin-right: 0.5vmax;
    font-size: 1.3vmax;
}

.marquee-title {
    font-weight: 600;
    margin-right: 0.5vmax;
    font-size: 1.3vmax;
}

.marquee-description {
    font-weight: 400;
    font-size: 1.1vmax;
    opacity: 0.85;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Hidden footer */
.player-footer.hidden {
    display: none !important;
}

/* When footer is hidden, slides should use full height */
body:has(.player-footer.hidden) .slide-frame,
body:has(.player-footer.hidden) .slide-placeholder {
    height: 100%;
}

/* Clock section */
.footer-clock {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding-left: 2%;
    flex-basis: 8%;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-time {
    display: block;
    font-size: 2vmax;
    font-weight: 600;
    line-height: 1.1;
}

.footer-date {
    display: block;
    font-size: 0.9vmax;
    margin-top: 0.3vmax;
    opacity: 0.8;
}

/* Larger height has bigger text */
.player-footer.height-large .footer-time {
    font-size: 2.4vmax;
}

.player-footer.height-large .footer-date {
    font-size: 1.1vmax;
}

/* Separator */
.footer-separator {
    display: inline-block;
    height: 100%;
    flex-basis: 3vmax;
    flex-shrink: 0;
    flex-grow: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 100"><line x1="45" y1="0" x2="15" y2="100" stroke="%23ddd" stroke-width="2"/></svg>');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.player-footer.v2 .footer-separator {
    flex-basis: 4vmax;
}

/* No separator variant */
.footer-separator.none {
    flex-basis: 1.5vmax;
    background: none;
}

/* Weather section */
.footer-weather {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.8vmax;
    height: 100%;
    text-align: center;
    flex-basis: 10%;
    flex-shrink: 0;
    flex-grow: 0;
}

.weather-icon {
    font-size: 2vmax;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-icon img {
    height: 3vmax;
    width: auto;
}

.weather-temp {
    font-size: 1.8vmax;
    font-weight: 500;
}

/* Larger height footer has bigger weather */
.player-footer.height-large .weather-icon {
    font-size: 2.5vmax;
}

.player-footer.height-large .weather-icon img {
    height: 4vmax;
}

.player-footer.height-large .weather-temp {
    font-size: 2.2vmax;
}

/* RSS Ticker section */
.footer-ticker {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch; /* Fill parent height */
    padding-left: 1.5%;
    padding-right: 2%;
    flex: 1 1 0;
    min-width: 0; /* Critical for text-overflow to work in flex */
    overflow: hidden;
}

.ticker-wrapper {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    /* Slightly above center - looks more natural */
    margin: auto 0;
    padding-bottom: 0.5vmax;
}

.ticker-title {
    display: block;
    max-width: 100%;
    font-weight: 500;
    font-size: 1.4vmax;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticker-description {
    display: block;
    max-width: 100%;
    font-weight: 400;
    font-size: 1.1vmax;
    line-height: 1.3;
    margin-top: 0.3vmax;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
}

/* Larger height footer has bigger ticker text */
.player-footer.height-large .ticker-title {
    font-size: 1.8vmax;
}

.player-footer.height-large .ticker-description {
    font-size: 1.4vmax;
}

/* Legacy v2 support */
.player-footer.v2 .ticker-title {
    font-size: 1.8vmax;
}

.player-footer.v2 .ticker-description {
    font-size: 1.4vmax;
}

/* Legacy support */
.ticker-content {
    font-size: 1.1vmax;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s ease;
}

/* Debug panel */
.debug-panel {
    position: absolute;
    top: 70px;
    right: 15px;
    width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #333;
    border-radius: 8px;
    font-size: 0.85rem;
    z-index: 1000;
}

.debug-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #333;
    font-weight: 600;
}

.debug-header button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}

.debug-content {
    padding: 15px;
}

.debug-content div {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}

.debug-content span {
    color: #4ecdc4;
}

.debug-actions {
    padding: 10px 15px;
    border-top: 1px solid #333;
}

.debug-btn {
    width: 100%;
    padding: 8px 12px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.debug-btn:hover {
    background: #c0392b;
}

.debug-btn.danger {
    background: #e74c3c;
}

.debug-btn.danger:hover {
    background: #c0392b;
}

/* =================================
   Stats Overlay (like YouTube stats for nerds)
   ================================= */
.stats-overlay {
    position: fixed;
    top: 70px;
    left: 15px;
    width: 380px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid #333;
    border-radius: 8px;
    font-size: 0.8rem;
    font-family: 'Consolas', 'Monaco', monospace;
    z-index: 1000;
    color: #e0e0e0;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #333;
    font-weight: 600;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    position: sticky;
    top: 0;
}

.stats-header button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.7;
}

.stats-header button:hover {
    opacity: 1;
}

.stats-section {
    padding: 12px 15px;
    border-bottom: 1px solid #222;
}

.stats-section:last-child {
    border-bottom: none;
}

.stats-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #4ecdc4;
    font-size: 0.85rem;
}

.stats-title small {
    font-weight: normal;
    color: #666;
    font-size: 0.75rem;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    padding: 2px 0;
}

.stats-row span:first-child {
    color: #888;
    flex-shrink: 0;
}

.stats-row span:last-child {
    color: #fff;
    text-align: right;
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Settings subsections in stats overlay */
.stats-settings {
    /* No separate scrollbar - use parent stats-overlay scroll */
}

.stats-subsection {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}

.stats-subsection:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.stats-subtitle {
    font-weight: 600;
    font-size: 0.75rem;
    color: #ff6b6b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Slide list in stats overlay */
.stats-slide-list {
    /* No separate scrollbar - use parent stats-overlay scroll */
}

.stats-slide-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.stats-slide-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.stats-slide-item.current {
    background: rgba(78, 205, 196, 0.2);
    border-left: 3px solid #4ecdc4;
}

.stats-slide-item .slide-index {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.stats-slide-item.current .slide-index {
    background: #4ecdc4;
    color: #000;
}

.stats-slide-item .slide-type {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    color: #888;
    flex-shrink: 0;
}

.stats-slide-item .slide-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ccc;
}

.stats-slide-item .slide-playing {
    color: #4ecdc4;
    font-size: 0.8rem;
}

/* Scrollbar styling for stats overlay */
/* Single scrollbar for entire stats overlay */
.stats-overlay::-webkit-scrollbar {
    width: 6px;
}

.stats-overlay::-webkit-scrollbar-track {
    background: transparent;
}

.stats-overlay::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.stats-overlay::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* =================================
   Control Panel (top right)
   ================================= */
.control-panel {
    position: fixed;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 999;
    opacity: 0.3;
    transition: opacity 0.2s;
}

.control-panel:hover {
    opacity: 1;
}

.control-btn {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn:hover {
    background: rgba(60, 60, 60, 0.9);
    transform: scale(1.05);
}

.control-btn:active {
    transform: scale(0.95);
}

.control-btn.play-pause {
    width: 50px;
    font-size: 1.2rem;
}

.control-btn.settings {
    margin-left: 8px;
}

/* =================================
   Direct render slide types
   ================================= */

/* Error message in slides */
.slide-error {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    font-size: 2rem;
    font-weight: 300;
}

/* Screenshot slide (for iframe fallback when site blocks embedding) */
.slide-screenshot {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Infopage slides */
.infopage-slide {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 5%;
    background-color: #1a1a2e;
}

.infopage-title {
    font-size: 3vmax;
    font-weight: 600;
    margin-bottom: 3%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.infopage-content {
    font-size: 2vmax;
    line-height: 1.6;
    flex: 1;
    overflow: hidden;
}

/* Image slides */
.image-slide {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5%;
}

.image-title {
    font-size: 3vmax;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: 2% 3%;
    margin: -5%;
    margin-top: auto;
}

/* License expired page */
.license-expired {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2d1b1b 0%, #1a1a2e 100%);
    text-align: center;
    padding: 5%;
}

.license-expired-icon {
    font-size: 8rem;
    margin-bottom: 3%;
    opacity: 0.8;
}

.license-expired-title {
    font-size: 3vmax;
    font-weight: 600;
    margin-bottom: 2%;
    color: #e74c3c;
}

.license-expired-message {
    font-size: 1.5vmax;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    line-height: 1.6;
}

/* Password prompt page */
.password-prompt {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    text-align: center;
    padding: 5%;
}

.password-prompt-icon {
    font-size: 6rem;
    margin-bottom: 2%;
    opacity: 0.9;
}

.password-prompt-title {
    font-size: 2.5vmax;
    font-weight: 600;
    margin-bottom: 1%;
    color: #fff;
}

.password-prompt-message {
    font-size: 1.2vmax;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3%;
}

.password-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5vmax;
    width: 100%;
    max-width: 400px;
}

.password-input {
    width: 100%;
    padding: 1vmax 1.5vmax;
    font-size: 1.3vmax;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}

.password-input:focus {
    border-color: #3498db;
}

.password-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.password-submit {
    padding: 1vmax 3vmax;
    font-size: 1.2vmax;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: #3498db;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.password-submit:hover {
    background: #2980b9;
}

.password-submit:active {
    transform: scale(0.98);
}

.password-error {
    font-size: 1.1vmax;
    color: #e74c3c;
    margin-top: 1%;
}

/* IP error page */
.ip-error {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2d1b1b 0%, #1a1a2e 100%);
    text-align: center;
    padding: 5%;
}

.ip-error-icon {
    font-size: 6rem;
    margin-bottom: 2%;
    opacity: 0.9;
}

.ip-error-title {
    font-size: 2.5vmax;
    font-weight: 600;
    margin-bottom: 1%;
    color: #e74c3c;
}

.ip-error-message {
    font-size: 1.2vmax;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2%;
    line-height: 1.6;
}

.ip-error-ip {
    font-size: 1.1vmax;
    color: rgba(255, 255, 255, 0.5);
    font-family: monospace;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5vmax 1.5vmax;
    border-radius: 4px;
    margin-bottom: 2%;
}

.ip-error-hint {
    font-size: 1vmax;
    color: rgba(255, 255, 255, 0.4);
}

/* =================================
   Logo Overlay
   Uses vmin for proportional scaling across all screen sizes (8" to 98")
   ================================= */
.logo-overlay {
    position: fixed;
    z-index: 100;
    pointer-events: none;
}

.logo-overlay.hidden {
    display: none;
}

/* Position classes - margins use CSS custom properties set from JS */
.logo-overlay.topleft {
    top: var(--logo-margin-tb, 2vmin);
    left: var(--logo-margin-lr, 2vmin);
}

.logo-overlay.topright {
    top: var(--logo-margin-tb, 2vmin);
    right: var(--logo-margin-lr, 2vmin);
}

.logo-overlay.bottomleft {
    bottom: var(--logo-margin-tb, 2vmin);
    left: var(--logo-margin-lr, 2vmin);
}

.logo-overlay.bottomright {
    bottom: var(--logo-margin-tb, 2vmin);
    right: var(--logo-margin-lr, 2vmin);
}

/* Logo image - size uses vmin for proportional scaling */
.logo-overlay img {
    width: var(--logo-size, 10vmin);
    height: auto;
    max-width: 20vw;  /* Never exceed 20% of viewport width */
    max-height: 15vh; /* Never exceed 15% of viewport height */
}

/* =================================
   Sidebar - Modern Floating Design
   Uses vw/vh/vmin for proportional scaling across all screen sizes
   Floats over background with rounded corners
   ================================= */

/* CSS variables for sidebar dimensions */
:root {
    --sidebar-width: 22vw;
    --sidebar-margin: 1.5vmin;
    --sidebar-radius: 2vmin;
    --sidebar-total: calc(var(--sidebar-width) + var(--sidebar-margin) * 2);
}

.sidebar {
    position: fixed;
    left: var(--sidebar-margin);
    top: var(--sidebar-margin);
    bottom: var(--sidebar-margin);
    width: var(--sidebar-width);
    min-width: 180px;
    max-width: 400px;

    /* Modern floating appearance */
    background: rgba(30, 30, 30, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 2vmin;
    box-shadow:
        0 0.5vmin 2vmin rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);

    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 2.5vmin;
    z-index: 50;

    /* Smooth show/hide transition */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.sidebar.hidden {
    transform: translateX(calc(-100% - var(--sidebar-margin)));
    opacity: 0;
    pointer-events: none;
}

.sidebar-section {
    position: relative;
}

.sidebar-section.hidden {
    display: none;
}

/* Divider between sections */
.sidebar-section:not(:last-child)::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    margin: 1.5vmin 0;
}

/* Datetime section */
.sidebar-datetime {
    text-align: center;
    padding: 1vmin 0;
}

.sidebar-time {
    font-size: 6vmin;
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1;
}

.sidebar-date {
    font-size: 2vmin;
    opacity: 0.7;
    margin-top: 1vmin;
    text-transform: capitalize;
}

/* Weather section */
.sidebar-weather {
    text-align: center;
    padding: 1.5vmin 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8vmin;
}

.sidebar-weather-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5vmin;
}

.sidebar-weather-icon {
    font-size: 6vmin;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-weather-icon img {
    height: 6vmin;
    width: auto;
}

.sidebar-weather-temp {
    font-size: 5vmin;
    font-weight: 300;
    letter-spacing: -0.02em;
}

.sidebar-weather-desc {
    font-size: 1.8vmin;
    opacity: 0.7;
    text-transform: capitalize;
}

/* News section */
.sidebar-news {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5vmin 0;
    gap: 0.8vmin;
}

.sidebar-news-title {
    font-size: 2.4vmin;
    line-height: 1.4;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    text-align: center;
    width: 100%;
}

.sidebar-news-desc {
    font-size: 1.8vmin;
    line-height: 1.4;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    text-align: center;
    width: 100%;
}

.sidebar-news-source {
    font-size: 1.4vmin;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    margin-top: 1vmin;
}

/* =================================
   Adjust main content when sidebar is visible
   Content slides to the right, sidebar floats over background
   ================================= */
body.has-sidebar #player-container {
    /* Push content to make room for sidebar */
    padding-left: var(--sidebar-total);
    transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-sidebar .slide-frame,
body.has-sidebar .slide-placeholder {
    /* Slides start after sidebar area - matching floating design */
    /* Use same positioning as sidebar: top/bottom with margin */
    width: calc(100vw - var(--sidebar-total) - var(--sidebar-margin));
    left: var(--sidebar-total);
    top: var(--sidebar-margin) !important;
    bottom: var(--sidebar-margin) !important;
    height: calc(100vh - var(--sidebar-margin) * 2) !important; /* Match sidebar exactly */
    /* Matching rounded corners for content box - same as sidebar */
    border-radius: var(--sidebar-radius);
    overflow: hidden;
    /* Subtle shadow to match sidebar floating style */
    box-shadow: 0 0.5vmin 2vmin rgba(0, 0, 0, 0.2);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.3s ease;
}

/* Adjust iframe inside slide-frame for rounded corners */
body.has-sidebar .slide-frame iframe {
    border-radius: var(--sidebar-radius);
}

/* Footer always spans full width - covers sidebar too */
/* No sidebar-specific adjustments needed */

/* Logo also shifts when sidebar is active */
body.has-sidebar .logo-overlay.topleft,
body.has-sidebar .logo-overlay.bottomleft {
    left: calc(var(--sidebar-total) + var(--logo-margin-lr, 2vmin));
}

/* =================================
   Footer Push Content
   Adjusts slide container to not overlap footer
   ================================= */
.footer-push .slide-frame,
.footer-push .slide-placeholder {
    height: calc(100% - var(--footer-height, 8vh)) !important;
}

/* Sidebar respects footer-push mode */
body.footer-push .sidebar {
    bottom: calc(var(--sidebar-margin) + var(--footer-height, 8vh));
}

/* When both sidebar and footer-push are active */
body.has-sidebar.footer-push .slide-frame,
body.has-sidebar.footer-push .slide-placeholder {
    height: calc(100vh - var(--sidebar-margin) * 2 - var(--footer-height, 8vh)) !important;
}

/* Footer height CSS variables based on version */
#player-footer.v1 {
    --footer-height: 8vh;
}

#player-footer.v2 {
    --footer-height: 12vh;
}

#player-footer.v3 {
    --footer-height: 8vh;
}

/* =================================
   Slide Navigation Arrows
   Shows prev/next buttons when "Bla i sider" is enabled
   ================================= */

.slide-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;

    /* Appearance */
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 4vmin;
    height: 8vmin;
    min-width: 40px;
    min-height: 60px;
    max-width: 60px;
    max-height: 100px;
    font-size: 2.5vmin;
    cursor: pointer;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background 0.2s ease;
}

.slide-nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

.slide-nav:active {
    background: rgba(0, 0, 0, 0.9);
}

.slide-nav.visible {
    opacity: 1;
    visibility: visible;
}

.slide-nav-prev {
    left: 1vmin;
    border-radius: 0 1vmin 1vmin 0;
}

.slide-nav-next {
    right: 1vmin;
    border-radius: 1vmin 0 0 1vmin;
}