/* dashboard_slideshow.css - Slideshow preview styles for dashboard */
/* Uses fixed 1920x1080 base resolution that scales 1:1 with container */
/* Scale is applied via JavaScript using CSS custom property --slideshow-scale */

/* ==================== CSS Custom Properties ==================== */
:root {
    --slide-width: 1920px;
    --slide-height: 1080px;
    --slide-canvas-height: 970px;
    --ticker-height: 110px;
    
    /* Glass panel styles */
    --glass-bg: rgba(50, 50, 50, 0.55);
    --glass-bg-dark: rgba(40, 40, 40, 0.6);
    --glass-border: 2px solid rgb(255 255 255 / 46%);
    --glass-radius: 25px;
    --glass-radius-lg: 30px;
    --glass-radius-xl: 32px;
    
    /* Overlay styles */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --overlay-bg-custom: rgba(0, 0, 0, 0.75); /* Darker overlay for custom backgrounds */
    --overlay-blur: 15px;
    
    /* Text colors */
    --text-primary: #fff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-tertiary: rgba(255, 255, 255, 0.65);
    --text-muted: rgba(255, 255, 255, 0.5);
    
    /* Common spacing */
    --header-padding: 35px 60px 0 60px;
    --content-padding: 50px 60px 200px 60px;
}

/* ==================== Slideshow Container ==================== */
.slideshow-preview-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    aspect-ratio: 16 / 9;
}

/* Initial loader shown before JS kicks in */
.slideshow-initial-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    gap: 16px;
    z-index: 5;
}

.slideshow-initial-loader i {
    font-size: 48px;
    opacity: 0.7;
    animation: slideshow-pulse 1.5s ease-in-out infinite;
}

.slideshow-initial-loader span {
    font-size: 16px;
    opacity: 0.6;
}

@keyframes slideshow-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.slideshow-container {
    position: absolute;
    top: var(--slideshow-offset-y, 0px);
    left: var(--slideshow-offset-x, 0px);
    width: var(--slide-width);
    height: var(--slide-height);
    background: transparent;
    transform-origin: top left;
    transform: scale(var(--slideshow-scale, 0.5));
    /* Rendering isolation: style/layout changes inside the TV (slide swaps,
       ticker, clock) must never invalidate the host page's layout — and page
       scrolling must never force slideshow layout. Everything in here is
       absolutely positioned in the fixed 1920x1080 stage.
       NB: no `paint` containment — it blacks out the scaled canvas (clips
       against the pre-transform box); layout+style is the isolation we need. */
    contain: layout style;
    /* Improve image quality when scaling down */
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.slideshow-preview-wrapper.slideshow-ready .slideshow-container {
    opacity: 1;
}

.slideshow-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--slide-width);
    height: var(--slide-canvas-height);
    /* The canvas is a fixed 1920x1080 stage scaled with transform — host-page
       responsive styles must never restyle its content. The hero centers its
       text on smaller viewports and that text-align INHERITS into every slide;
       pin it here so slides render identically at every viewport width. */
    text-align: left;
}

/* Slide titles are <h1>s without their own font-size, so they picked up the
   host page's responsive h1 sizing (2.8rem desktop shrinking per breakpoint).
   Pin them to the desktop value the demo was designed against; slide classes
   with an explicit size (e.g. .lukker-snart-content .lukker-snart-title)
   still win on specificity. */
.slideshow-canvas h1 {
    font-size: 44.8px;
    line-height: 1.15;
}

/* ==================== Slides ==================== */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--slide-width);
    height: var(--slide-height);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    /* Per-slide isolation (page flips re-render inside) + a stable compositor
       layer so the crossfade doesn't trigger a promote/re-raster burst right
       when the visitor starts scrolling. At most two slides exist at a time.
       (No `paint` containment — see .slideshow-container.) */
    contain: layout style;
    will-change: opacity;
}

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

.slide.previous {
    z-index: 1;
}

.slide img,
.slide video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
}

.slide img {
    object-fit: cover;
}

.slide video {
    object-fit: contain;
    background: #000;
}

/* ==================== Mood Video Player ==================== */
.mood-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

/* Mood Video End Overlay (shown 3 seconds before video ends) */
.mood-video-end-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 80px); /* Exclude news ticker height */
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, background 0.5s ease-in-out;
    z-index: 5;
}

.mood-video-end-overlay.visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
}

.mood-video-end-logo {
    max-width: 60%!important;
    max-height: 60%!important;
    object-fit: contain!important;
    opacity: 0!important;
    transform: scale(0.9)!important;
    transition: opacity 0.4s ease-in-out 0.1s, transform 0.4s ease-in-out 0.1s!important;
}

.mood-video-end-overlay.visible .mood-video-end-logo {
    opacity: 1!important;
    transform: scale(1)!important;
}

/* ==================== Special Slide Placeholder ==================== */
.special-slide-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: var(--text-primary);
    text-align: center;
    padding: 40px;
}

.special-slide-placeholder i {
    font-size: 120px;
    margin-bottom: 40px;
    opacity: 0.9;
}

.special-slide-placeholder .slide-label {
    font-size: 56px;
    font-weight: 600;
    margin-bottom: 16px;
}

.special-slide-placeholder .slide-hint {
    font-size: 32px;
    opacity: 0.7;
    max-width: 800px;
}

/* Special slide icon colors */
.special-slide-placeholder.greeting i { color: #ffd700; }
.special-slide-placeholder.weather i { color: #87ceeb; }
.special-slide-placeholder.rules i { color: #ff6b6b; }
.special-slide-placeholder.issues i { color: #ff9f43; }
.special-slide-placeholder.members i { color: #54a0ff; }
.special-slide-placeholder.exercises i { color: #5f27cd; }
.special-slide-placeholder.suggestions i { color: #feca57; }
.special-slide-placeholder.opening_hours i { color: #48dbfb; }
.special-slide-placeholder.mood_video i { color: #ff6b81; }
.special-slide-placeholder.lodtraekning i { color: #a29bfe; }
.special-slide-placeholder.meningsmaling i { color: #00d2d3; }
.special-slide-placeholder.website_qr i { color: #1dd1a1; }
.special-slide-placeholder.quiz i { color: #ff9ff3; }
.special-slide-placeholder.facebook i { color: #1877f2; }
.special-slide-placeholder.instagram i { color: #e4405f; }
.special-slide-placeholder.calendar i { color: #10ac84; }
.special-slide-placeholder.countdown i { color: #ee5253; }

/* ==================== Greeting Slide ==================== */
/* "God morgen/dag/eftermiddag/aften" greeting slide with time-of-day background */
.greeting-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.greeting-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.greeting-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    margin-top: -160px;
}

.greeting-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 35%;
    margin-bottom: 10px;
}

.greeting-logo img {
    width: auto;
    max-width: none;
    max-height: none;
    height: 300px;
}

.greeting-org-name {
    font-size: 80px;
    font-weight: 700;
    margin-bottom: 10px;
}

.greeting-text {
    font-size: 88px;
    font-weight: 400;
    color: var(--text-primary);
}

/* ==================== Base Glassmorphism Slide ==================== */
/* Shared styles for members, suggestions, exercises, opening-hours slides */
.members-slide,
.suggestions-slide,
.exercises-slide,
.opening-hours-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    box-sizing: border-box;
}

.suggestions-slide,
.exercises-slide,
.opening-hours-slide {
    flex-direction: column;
}

/* Shared overlay for all glass slides */
.members-overlay,
.suggestions-overlay,
.exercises-overlay,
.opening-hours-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.members-overlay {
    background: rgba(0, 0, 0, 0.55);
}

/* Darker overlays when using custom backgrounds */
.has-custom-bg .members-overlay,
.has-custom-bg .suggestions-overlay,
.has-custom-bg .exercises-overlay,
.has-custom-bg .opening-hours-overlay,
.has-custom-bg .lodtraekning-overlay,
.has-custom-bg .meningsmaling-overlay,
.has-custom-bg .countdown-overlay,
.has-custom-bg .website-qr-overlay,
.has-custom-bg .issues-overlay,
.has-custom-bg .quiz-overlay,
.has-custom-bg .facebook-overlay,
.has-custom-bg .instagram-overlay,
.has-custom-bg .calendar-overlay,
.has-custom-bg .rules-overlay,
.has-custom-bg .upcoming-classes-overlay,
.has-custom-bg .ledige-tider-overlay,
.has-custom-bg .greeting-overlay {
    background: var(--overlay-bg-custom);
}

/* Shared header for glass slides */
.suggestions-header,
.exercises-header,
.opening-hours-header {
    text-align: center;
    padding: var(--header-padding);
    position: relative;
    z-index: 1;
}

.suggestions-org-name,
.exercises-org-name,
.opening-hours-org-name {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 0;
}

.suggestions-title,
.exercises-title,
.opening-hours-title {
    font-size: 64px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Shared content area */
.suggestions-content,
.exercises-content,
.opening-hours-content {
    display: flex;
    flex: 1;
    gap: 40px;
    min-height: 0;
    position: relative;
    z-index: 1;
}

/* ==================== Members Slide ==================== */
.members-slide {
    padding: 96px 77px 183px 77px;
    gap: 58px;
}

.members-photo-panel {
    flex: 0 0 40%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 0;
    position: relative;
    z-index: 1;
}

.members-photo-frame {
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, 0.5);
    border-radius: var(--glass-radius-xl);
    border: var(--glass-border);
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
}

.members-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    /* High-quality image scaling for photos */
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: bicubic;
    /* Force high-quality scaling with slight anti-aliasing */
    filter: blur(0);
    -webkit-filter: blur(0);
    /* GPU acceleration for smoother rendering */
    transform: translate3d(0, 0, 0);
    will-change: transform;
    /* Prevent pixelation on transform */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.members-info-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--glass-bg-dark);
    border-radius: var(--glass-radius-xl);
    border: var(--glass-border);
    padding: 48px;
    box-sizing: border-box;
    max-height: 75%;
    margin: auto 0;
    position: relative;
    z-index: 1;
}

.members-label {
    display: inline-block;
    padding: 12px 36px;
    border-radius: 999px;
    font-size: 28px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 32px;
    width: fit-content;
}

.members-name {
    font-size: 72px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.2;
}

.members-name-dot {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-left: -4px;
    margin-bottom: 11px;
    vertical-align: bottom;
}

.members-rolle {
    font-size: 40px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.members-description {
    font-size: 28px;
    color: var(--text-tertiary);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

/* ==================== Suggestions Slide ==================== */
.suggestions-content {
    padding: 54px 60px 200px 60px;
}

.suggestions-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.suggestions-description-panel {
    background: var(--glass-bg);
    border-radius: var(--glass-radius-lg);
    border: var(--glass-border);
    padding: 50px;
    display: flex;
    align-items: center;
    flex: 1;
}

.suggestions-description {
    font-size: 32px;
    color: rgba(220, 220, 220, 1);
    line-height: 1.5;
}

.suggestions-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.suggestions-logo img {
    max-width: 100%;
    max-height: 250px;
    height: auto;
    object-fit: contain;
}

.suggestions-qr-panel {
    flex: 1;
    background: var(--glass-bg);
    border-radius: var(--glass-radius-lg);
    border: var(--glass-border);
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.suggestions-qr-wrapper {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggestions-qr-wrapper img {
    width: 380px;
    height: 380px;
    display: block;
}

.suggestions-qr-caption {
    font-size: 57px;
    color: var(--text-primary);
    margin-top: 30px;
    text-align: center;
}

/* ==================== Lodtrækning Slide ==================== */
.lodtraekning-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    box-sizing: border-box;
}

.lodtraekning-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.lodtraekning-content {
    display: flex;
    flex: 1;
    gap: 40px;
    padding: 80px 60px 200px 60px;
    min-height: 0;
    position: relative;
    z-index: 1;
    align-items: stretch;
}

.lodtraekning-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    border-radius: var(--glass-radius-lg);
    border: var(--glass-border);
    padding: 50px;
    box-sizing: border-box;
    justify-content: flex-start;
}

.lodtraekning-title {
    font-size: 64px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px 0;
}

.lodtraekning-name {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.3;
}

.lodtraekning-description {
    font-size: 32px;
    color: rgba(220, 220, 220, 1);
    line-height: 1.5;
}

.lodtraekning-qr-panel {
    flex: 1;
    background: var(--glass-bg);
    border-radius: var(--glass-radius-lg);
    border: var(--glass-border);
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.lodtraekning-qr-wrapper {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lodtraekning-qr-wrapper img {
    width: 380px;
    height: 380px;
    display: block;
}

.lodtraekning-qr-caption {
    font-size: 55px;
    color: var(--text-primary);
    margin-top: 30px;
    text-align: center;
}

/* ==================== Meningsmåling Slide ==================== */
.meningsmaling-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.meningsmaling-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.meningsmaling-header {
    text-align: center;
    padding: var(--header-padding);
    position: relative;
    z-index: 1;
}

.meningsmaling-org-name {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 0;
}

.meningsmaling-title {
    font-size: 64px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.meningsmaling-content {
    display: flex;
    flex: 1;
    gap: 40px;
    padding: 30px 60px 200px 60px;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.meningsmaling-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    height: 100%;
}

.meningsmaling-left-panel.no-logo .meningsmaling-question-panel {
    /* When no logo, question panel fills the entire height */
    flex: 1;
}

.meningsmaling-left-panel.no-logo .meningsmaling-options {
    /* When no logo, options can grow to fill space */
    flex: 1;
}

/* When there IS a logo: question panel takes ~60%, logo takes ~40% */
.meningsmaling-left-panel:not(.no-logo) .meningsmaling-question-panel {
    flex: 0 0 60%;
    overflow: hidden;
}

.meningsmaling-left-panel:not(.no-logo) .meningsmaling-logo {
    flex: 0 0 auto;
    min-height: 0;
}

.meningsmaling-qr-panel {
    flex: 1;
    height: 100%;
}

.meningsmaling-question-panel {
    background: var(--glass-bg);
    border-radius: var(--glass-radius-lg);
    border: var(--glass-border);
    padding: 40px 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Default: no flex-grow, only takes content height */
}

.meningsmaling-question {
    font-size: 36px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 15px;
}

.meningsmaling-divider {
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    margin-bottom: 15px;
    flex-shrink: 0;
}

.meningsmaling-options {
    display: flex;
    gap: 20px;
    /* Default: no flex-grow, only takes content height */
}

.meningsmaling-options-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.meningsmaling-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.meningsmaling-option-bullet {
    width: 12px;
    height: 12px;
    min-width: 12px;
    border-radius: 50%;
    margin-top: 13px;
    flex-shrink: 0;
}

.meningsmaling-option-text {
    font-size: 28px;
    color: rgba(220, 220, 220, 1);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

.meningsmaling-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    flex: 1;
    min-height: 0;
}

.meningsmaling-logo img {
    max-width: 75%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.meningsmaling-qr-panel {
    flex: 1;
    background: var(--glass-bg);
    border-radius: var(--glass-radius-lg);
    border: var(--glass-border);
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.meningsmaling-qr-wrapper {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meningsmaling-qr-wrapper img {
    width: 380px;
    height: 380px;
    display: block;
}

.meningsmaling-qr-caption {
    font-size: 48px;
    color: var(--text-primary);
    margin-top: 30px;
    text-align: center;
}

/* ==================== Loading & Empty States ==================== */
.slideshow-loading,
.slideshow-empty {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--slide-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.slideshow-loading {
    height: var(--slide-height);
    background: #000;
    z-index: 10;
}

.slideshow-empty {
    height: var(--slide-canvas-height);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    text-align: center;
    padding: 64px;
    box-sizing: border-box;
}

.slideshow-loading i {
    font-size: 96px;
    margin-bottom: 32px;
    animation: pulse 1.5s ease-in-out infinite;
}

.slideshow-loading span {
    font-size: 36px;
    opacity: 0.8;
}

.slideshow-empty i {
    font-size: 128px;
    margin-bottom: 48px;
    opacity: 0.6;
}

.slideshow-empty h3 {
    font-size: 48px;
    margin-bottom: 24px;
    font-weight: 600;
}

.slideshow-empty p {
    font-size: 32px;
    opacity: 0.7;
    max-width: 1000px;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* ==================== Controls Overlay ==================== */
.slideshow-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--slide-width);
    height: var(--slide-canvas-height);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 32px 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 30%);
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 5;
    box-sizing: border-box;
}

.slideshow-preview-wrapper:hover .slideshow-controls {
    opacity: 1;
}

.slideshow-controls-left,
.slideshow-controls-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.slideshow-controls-center {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Demo Info (between navigation and caption) */
.slideshow-controls-info {
    display: flex;
    align-items: center;
    flex: 1;
    text-align: center;
    justify-content: center;
}

.slideshow-controls-info .demo-info {
    color: var(--text-primary);
    font-size: 38px;
    font-weight: 500;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 40px;
}

/* Control Buttons */
.slideshow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* The container is shrunk by transform: scale(--slideshow-scale), so the
       86px design size can render below the 24px WCAG touch-target minimum in
       the small preview TVs. Dividing by the scale pins the RENDERED size to
       at least 28px; max() keeps the 86px design size when scale is large. */
    width: max(86px, calc(28px / var(--slideshow-scale, 0.5)));
    height: max(86px, calc(28px / var(--slideshow-scale, 0.5)));
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    font-size: max(38px, calc(12px / var(--slideshow-scale, 0.5)));
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.slideshow-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

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

.slideshow-btn.active {
    background: rgba(255, 255, 255, 0.4);
}

/* Slide Counter */
.slide-counter {
    color: var(--text-primary);
    font-size: 38px;
    font-weight: 500;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 40px;
    white-space: nowrap;
    min-width: 750px;
    text-align: center;
}

/* Slide Settings Link */
.slide-settings-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    font-size: 18px;
}

.slide-settings-link.hidden {
    display: none;
}

.slide-settings-link:hover {
    background: rgba(59, 130, 246, 0.7);
    transform: scale(1.1);
}

.slide-settings-link:active {
    transform: scale(0.95);
}

/* Progress Bar */
.slideshow-progress {
    position: absolute;
    top: 964px;
    left: 0;
    width: var(--slide-width);
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 6;
}

.slideshow-progress-bar {
    height: 100%;
    background: #3bb4c4;
    width: 0%;
    transition: width 0.1s linear;
}

/* ==================== Transition Animations ==================== */
.slide-transition-left .slide.active { animation: slideInLeft 0.5s ease-out; }
.slide-transition-left .slide.previous { animation: slideOutLeft 0.5s ease-out; }
.slide-transition-right .slide.active { animation: slideInRight 0.5s ease-out; }
.slide-transition-right .slide.previous { animation: slideOutRight 0.5s ease-out; }
.slide-transition-fade .slide.active { animation: fadeIn 0.5s ease-out; }
.slide-transition-fade .slide.previous { animation: fadeOut 0.5s ease-out; }

@keyframes slideInLeft {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slideInRight {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ==================== News Ticker Bar ==================== */
.news-ticker-bar {
    position: absolute;
    top: var(--slide-canvas-height);
    left: 0;
    width: var(--slide-width);
    height: var(--ticker-height);
    background: #000;
    display: flex;
    z-index: 10;
}

.news-ticker-clock {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    padding: 0 32px;
    background: #4a4a4a;
    color: var(--text-primary);
    font-size: 48px;
    font-weight: 700;
    font-family: 'Segoe UI', system-ui, sans-serif;
    letter-spacing: 1px;
}

.news-ticker-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.news-ticker-scroll {
    position: absolute;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 42px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    will-change: transform;
}

.news-ticker-no-news {
    color: var(--text-muted);
    font-style: italic;
    padding-left: 32px;
}

/* ==================== Exercises Slide ==================== */
.exercises-content {
    padding: 60px 80px 250px 80px;
    gap: 30px;
}

.exercises-left-panel {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    border-radius: var(--glass-radius);
    border: var(--glass-border);
    padding: 25px;
    box-sizing: border-box;
}

.exercises-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.95);
    margin-bottom: 15px;
}

.exercises-animation {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 15px;
}

.exercises-tags {
    display: flex;
    gap: 10px;
}

.exercises-tag {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 22px;
    color: var(--text-primary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exercises-tag-label {
    font-weight: 700;
}

.exercises-center-panel {
    flex: 0 0 12%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--glass-bg-dark);
    border-radius: var(--glass-radius);
    border: var(--glass-border);
    padding: 25px;
    box-sizing: border-box;
}

.exercises-muscle-front,
.exercises-muscle-back {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.exercises-muscle-front img,
.exercises-muscle-back img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
}

.exercises-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg-dark);
    border-radius: var(--glass-radius);
    border: var(--glass-border);
    padding: 35px 40px;
    box-sizing: border-box;
    overflow: hidden;
}

.exercises-name {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.2;
}

.exercises-divider {
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    margin-bottom: 25px;
}

.exercises-instructions {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

.exercises-instruction {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.exercises-instruction-num {
    font-size: 26px;
    font-weight: 700;
    min-width: 35px;
    margin-top: 6px;
}

.exercises-instruction-text {
    font-size: 30px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

/* ==================== Opening Hours Slide ==================== */
.opening-hours-content {
    padding: var(--content-padding);
    justify-content: center;
    align-items: stretch;
    padding-top: 20px;
}

.opening-hours-content.centered {
    justify-content: center;
}

.opening-hours-content.centered .opening-hours-card {
    max-width: 600px;
}

.opening-hours-card {
    background: var(--glass-bg);
    border-radius: var(--glass-radius);
    border: var(--glass-border);
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.opening-hours-regular-card,
.opening-hours-special-card {
    width: 666px;
}

/* Hours rows */
.opening-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px;
    position: relative;
}

.opening-hours-row.today {
    background: var(--primary-color-faded, rgba(100, 100, 100, 0.15));
    border-radius: 18px;
    border: 1px solid var(--primary-color-border, rgba(255, 255, 255, 0.3));
    margin: 3px 0;
    padding-left: 25px;
}

.opening-hours-today-label {
    position: absolute;
    top: 10px;
    left: 28px;
    font-size: 22px;
    font-weight: 500;
}

.opening-hours-today-bar {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 4px;
}

.opening-hours-row.today .opening-hours-day,
.opening-hours-row.today .opening-hours-time {
    margin-top: 18px;
}

.opening-hours-day,
.opening-hours-time {
    font-size: 40px;
    color: white;
}

.opening-hours-day {
    font-weight: 500;
}

.opening-hours-time {
    font-weight: 400;
}

.opening-hours-time.closed,
.opening-hours-special-time.closed {
    color: #dc5050;
}

/* Divider line between regular rows (except around today) */
.opening-hours-row:not(.today) + .opening-hours-row:not(.today)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

/* Special hours */
.opening-hours-special-header {
    font-size: 38px;
    font-weight: 600;
    color: white;
    padding: 0 15px;
}

.opening-hours-special-divider {
    flex-shrink: 0;
    align-self: stretch;
    height: 1px;
    min-height: 1px;
    background-color: rgba(255, 255, 255, 0.7);
    margin: 20px 15px;
}

.opening-hours-special-entries {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
}

.opening-hours-special-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 20px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.opening-hours-special-entry:last-child {
    margin-bottom: 0;
}

.opening-hours-special-entry.active {
    background: var(--primary-color-faded, rgba(100, 100, 100, 0.15));
}

.opening-hours-special-left,
.opening-hours-special-right {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.opening-hours-special-left {
    flex: 1;
    min-width: 0;
    max-width: 250px;
}

.opening-hours-special-right {
    flex-shrink: 0;
    align-items: flex-end;
}

.opening-hours-special-title,
.opening-hours-special-time {
    font-size: 40px;
    color: white;
}

.opening-hours-special-title {
    font-weight: 500;
}

.opening-hours-special-time {
    font-weight: 400;
}

.opening-hours-special-date {
    font-size: 26px;
    color: rgb(205 205 205);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.opening-hours-active-indicator {
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 3px;
}

.opening-hours-active-dot {
    color: #50c878;
}

.opening-hours-active-text {
    font-weight: 500;
}

/* ==================== Countdown Slide ==================== */
.countdown-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.countdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.countdown-header {
    text-align: center;
    padding: 95px 80px 30px 60px;
    position: relative;
    z-index: 1;
}

.countdown-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.countdown-logo img {
    max-width: 25%;
    max-height: 150px;
    height: auto;
    object-fit: contain;
}

.countdown-org-name {
    font-size: 64px;
    font-weight: 700;
}

.countdown-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 30px;
    position: relative;
    z-index: 1;
}

/* Countdown panel - solid dark grey like Python version */
.countdown-panel {
    background: rgb(60, 60, 60);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 70px 90px 70px 90px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.countdown-units {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 130px;
    padding: 0 15px;
}

.countdown-number {
    font-size: 138px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.countdown-label {
    font-size: 24px;
    font-weight: 500;
    color: #b4b4b4; /* Light grey - matches Python */
    margin-top: 10px;
    letter-spacing: 2px;
}

.countdown-separator {
    font-size: 115px;
    font-weight: 400;
    color: #fff;
    line-height: 1;
    padding: 0px 30px;
    margin-top: 4px;
    margin-left: -4px;
    align-self: flex-start;
}

.countdown-reason {
    font-size: 64px;
    font-weight: 700;
    margin-top: 55px;
    text-align: center;
}

/* ==================== Website QR Slide ==================== */
.website-qr-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.website-qr-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.website-qr-header {
    text-align: center;
    padding: 35px 60px 0 60px;
    position: relative;
    z-index: 1;
}

.website-qr-org-name {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 0;
}

.website-qr-title {
    font-size: 64px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.website-qr-content {
    display: flex;
    flex: 1;
    gap: 40px;
    padding: 60px 60px 200px 60px;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.website-qr-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.website-qr-description-panel {
    background: rgba(50, 50, 50, 0.55);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 50px;
    display: flex;
    align-items: center;
    flex: 1;
}

.website-qr-description {
    font-size: 32px;
    color: rgba(220, 220, 220, 1);
    line-height: 1.5;
}

.website-qr-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.website-qr-logo img {
    max-width: 100%;
    max-height: 250px;
    height: auto;
    object-fit: contain;
}

.website-qr-qr-panel {
    flex: 1;
    background: rgba(50, 50, 50, 0.55);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.website-qr-wrapper {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.website-qr-wrapper img {
    width: 380px;
    height: 380px;
    display: block;
}

.website-qr-caption {
    font-size: 48px;
    color: var(--text-primary);
    margin-top: 30px;
    text-align: center;
}

/* ==================== Issues (Problem Reporting) Slide ==================== */
/* Layout: Two glass panels with description + logo (left) and QR code (right) */
.issues-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.issues-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.issues-header {
    text-align: center;
    padding: 35px 60px 0 60px;
    position: relative;
    z-index: 1;
}

.issues-org-name {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 0;
}

.issues-title {
    font-size: 64px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.issues-content {
    display: flex;
    flex: 1;
    gap: 40px;
    padding: 60px 60px 200px 60px;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.issues-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.issues-description-panel {
    background: rgba(50, 50, 50, 0.55);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 50px;
    display: flex;
    align-items: center;
    flex: 1;
}

.issues-description {
    font-size: 32px;
    color: rgba(220, 220, 220, 1);
    line-height: 1.5;
}

.issues-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.issues-logo img {
    max-width: 100%;
    max-height: 250px;
    height: auto;
    object-fit: contain;
}

.issues-qr-panel {
    flex: 1;
    background: rgba(50, 50, 50, 0.55);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.issues-qr-wrapper {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.issues-qr-wrapper img {
    width: 380px;
    height: 380px;
    display: block;
}

.issues-caption {
    font-size: 48px;
    color: var(--text-primary);
    margin-top: 30px;
    text-align: center;
}

/* ==================== Quiz Slide ==================== */
.quiz-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.quiz-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.quiz-content {
    display: flex;
    flex: 1;
    gap: 40px;
    padding: 100px 70px 200px 70px;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.quiz-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(50, 50, 50, 0.55);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 40px;
    box-sizing: border-box;
}

.quiz-title {
    font-size: 75px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 23px 0;
}

.quiz-name {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.3;
}

.quiz-description {
    font-size: 28px;
    color: rgba(220, 220, 220, 1);
    line-height: 1.5;
    margin-bottom: 0px;
    text-align: left;
}

.quiz-qr-panel {
    flex: 1;
    background: rgba(50, 50, 50, 0.55);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quiz-qr-wrapper {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-qr-wrapper img {
    width: 450px;
    height: 450px;
    display: block;
}

.quiz-qr-caption {
    font-size: 58px;
    color: var(--text-primary);
    margin-top: 30px;
    text-align: center;
}

/* ==================== Facebook Slide ==================== */
.facebook-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.facebook-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.facebook-header {
    text-align: center;
    padding: 35px 60px 0 60px;
    position: relative;
    z-index: 1;
}

.facebook-org-name {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 0;
}

.facebook-content {
    display: flex;
    flex: 1;
    gap: 40px;
    padding: 30px 60px 200px 60px;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.facebook-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(50, 50, 50, 0.55);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 50px;
    box-sizing: border-box;
}

.facebook-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.facebook-title {
    font-size: 55px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    flex: 1;
}

.facebook-qr-wrapper {
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    flex-shrink: 0;
}

.facebook-qr-wrapper img {
    width: 250px;
    height: 250px;
    display: block;
}

.facebook-divider {
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.4) 20%, 
        rgba(255,255,255,0.4) 80%, 
        rgba(255,255,255,0) 100%);
    margin: 30px 0;
}

.facebook-description {
    font-size: 35px;
    color: rgba(200, 200, 200, 1);
    line-height: 1.5;
}

.facebook-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    overflow: hidden;
    box-sizing: border-box;
}

.facebook-post-image {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 28px 28px 0 0;
    margin: 48px 48px 10px 48px;
}

.facebook-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.facebook-post-text {
    padding: 10px 48px 30px 48px;
    font-size: 32px;
    color: #333;
    line-height: 1.4;
}

.facebook-post-divider {
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0.15) 20%, 
        rgba(0,0,0,0.15) 80%, 
        rgba(0,0,0,0) 100%);
    margin: 0 30px;
}

.facebook-post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 48px 30px 48px;
}

.facebook-post-date {
    font-size: 28px;
    color: #888;
}

.facebook-post-engagement {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 28px;
    color: #888;
}

.facebook-icon {
    width: 24px!important;
    height: 24px!important;
    opacity: 0.7;
}

.facebook-post-engagement span {
    margin-right: 12px;
}

.facebook-post-engagement span:last-child {
    margin-right: 0;
}

/* Facebook Loading State */
.facebook-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 20px;
}

.facebook-loading i {
    font-size: 64px;
    color: #1877f2;
}

.facebook-loading-text {
    font-size: 24px;
    color: rgba(200, 200, 200, 0.8);
}

.facebook-loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #1877f2;
    border-radius: 50%;
    animation: facebook-spin 1s linear infinite;
}

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

/* Facebook Error State */
.facebook-error-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(50, 50, 50, 0.55);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 50px;
    gap: 20px;
    width: 100%;
}

.facebook-error-panel i {
    font-size: 64px;
    color: #1877f2;
    opacity: 0.5;
}

.facebook-error-text {
    font-size: 24px;
    color: rgba(200, 200, 200, 0.8);
    text-align: center;
}

/* ==================== Instagram Slide ==================== */

.instagram-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.instagram-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.instagram-header {
    text-align: center;
    padding: 35px 60px 0 60px;
    position: relative;
    z-index: 1;
}

.instagram-org-name {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 0;
}

.instagram-content {
    display: flex;
    flex: 1;
    gap: 40px;
    padding: 30px 60px 200px 60px;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.instagram-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(50, 50, 50, 0.55);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 50px;
    box-sizing: border-box;
}

.instagram-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.instagram-title {
    font-size: 55px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    flex: 1;
}

.instagram-qr-wrapper {
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    flex-shrink: 0;
}

.instagram-qr-wrapper img {
    width: 250px;
    height: 250px;
    display: block;
}

.instagram-divider {
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.4) 20%, 
        rgba(255,255,255,0.4) 80%, 
        rgba(255,255,255,0) 100%);
    margin: 30px 0;
}

.instagram-description {
    font-size: 35px;
    color: rgba(200, 200, 200, 1);
    line-height: 1.5;
}

.instagram-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    overflow: hidden;
    box-sizing: border-box;
}

.instagram-post-image {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 28px 28px 0 0;
    margin: 48px 48px 10px 48px;
}

.instagram-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instagram-post-text {
    padding: 10px 48px 30px 48px;
    font-size: 32px;
    color: #333;
    line-height: 1.4;
}

.instagram-post-divider {
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0.15) 20%, 
        rgba(0,0,0,0.15) 80%, 
        rgba(0,0,0,0) 100%);
    margin: 0 30px;
}

.instagram-post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 48px 30px 48px;
}

.instagram-post-date {
    font-size: 28px;
    color: #888;
}

.instagram-post-engagement {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 28px;
    color: #888;
}

.instagram-icon {
    width: 24px!important;
    height: 24px!important;
    opacity: 0.7;
}

.instagram-post-engagement span {
    margin-right: 12px;
}

.instagram-post-engagement span:last-child {
    margin-right: 0;
}

/* Instagram Loading State */
.instagram-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 20px;
}

.instagram-loading i {
    font-size: 64px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.instagram-loading-text {
    font-size: 24px;
    color: rgba(200, 200, 200, 0.8);
}

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

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

/* Instagram Error State */
.instagram-error-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(50, 50, 50, 0.55);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 50px;
    gap: 20px;
    width: 100%;
}

.instagram-error-panel i {
    font-size: 64px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.5;
}

.instagram-error-text {
    font-size: 24px;
    color: rgba(200, 200, 200, 0.8);
    text-align: center;
}

/* ==================== Calendar (Holdkalender) Slide ==================== */

.calendar-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: var(--calendar-bg-url);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.calendar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.calendar-title {
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 35px 0 35px 0;
    position: relative;
    z-index: 1;
}

.calendar-content {
    flex: 1;
    display: flex;
    padding: 0 30px 140px 30px;
    position: relative;
    z-index: 1;
    min-height: 0;
}

.calendar-grid {
    display: flex;
    gap: 12px;
    width: 100%;
    height: 100%;
}

.calendar-day-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.calendar-day-header {
    background: rgba(50, 50, 50, 0.7);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.calendar-day-today {
    /* Use primary blue color for today highlight */
    background-color: rgba(59, 180, 196, 0.3);
    border-color: rgba(59, 180, 196, 0.5);
}

.calendar-classes-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    min-height: 0;
    padding-right: 2px;
}

/* Custom scrollbar for classes container */
.calendar-classes-container::-webkit-scrollbar {
    width: 4px;
}

.calendar-classes-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.calendar-classes-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.calendar-class-card {
    background: rgba(50, 50, 50, 0.75);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Colored class card - uses faded hold color as background */
.calendar-class-card-colored {
    /* Faded hold color applied via CSS custom property */
    background: var(--card-color-faded, rgba(50, 50, 50, 0.75));
}

.calendar-class-time {
    font-size: 17px;
    color: rgba(170, 170, 170, 1);
}

.calendar-class-name {
    font-size: 19px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
}

/* Status dot for availability */
.calendar-status-dot {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.calendar-status-available {
    background: rgb(76, 175, 80);
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.6);
}

.calendar-status-few_spots {
    background: rgb(255, 193, 7);
    box-shadow: 0 0 6px rgba(255, 193, 7, 0.6);
}

.calendar-status-full {
    background: rgb(244, 67, 54);
    box-shadow: 0 0 6px rgba(244, 67, 54, 0.6);
}

.calendar-no-classes {
    text-align: center;
    font-size: 14px;
    color: rgba(150, 150, 150, 0.8);
    padding: 15px 10px;
    background: rgba(30, 30, 30, 0.4);
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
}

/* Page indicator for days with multiple pages */
.calendar-page-indicator {
    text-align: center;
    font-size: 19px;
    color: rgba(120, 120, 120, 1);
    padding-top: 4px;
    margin-top: auto;
}

/* Calendar Loading State */
.calendar-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 20px;
}

.calendar-loading i {
    font-size: 64px;
    color: #fff;
}

.calendar-loading-text {
    font-size: 24px;
    color: rgba(200, 200, 200, 0.8);
}

/* Calendar Error State */
.calendar-error-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 20px;
}

.calendar-error-panel i {
    font-size: 64px;
    color: rgba(200, 200, 200, 0.5);
}

.calendar-error-text {
    font-size: 24px;
    color: rgba(200, 200, 200, 0.8);
    text-align: center;
    max-width: 80%;
}

/* ==================== Rules (Foreningsregler) Slide ==================== */
/* House rules slide with two-column glass panels */
.rules-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 50px 60px;
    padding-bottom: calc(50px + var(--ticker-height));
}

.rules-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.rules-header {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.rules-org-name {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 5px;
}

.rules-title {
    font-size: 72px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
}

.rules-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rules-panels {
    display: flex;
    gap: 40px;
    flex: 1;
}

.rules-panels.single-panel {
    gap: 0;
}

.rules-panel {
    flex: 1;
    background: rgba(40, 40, 40, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 30px;
    overflow: hidden;
}

.rules-panel-full {
    flex: 1;
}

.rules-rule {
    display: flex;
    align-items: center; /* Single line: centered with icon */
    gap: 25px;
    padding: 27px 0;
}

/* Multiline rules: align text top with icon top */
.rules-rule-multiline {
    align-items: flex-start;
}

.rules-rule-icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rules-rule-icon i {
    font-size: 54px;
    color: var(--text-primary);
    opacity: 0.9;
}

.rules-rule-text {
    flex: 1;
    font-size: 32px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Multiline text: small top padding to align with icon top accounting for font metrics */
.rules-rule-multiline .rules-rule-text {
    margin-top: -5px;
}

.rules-rule-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 8px 0;
}

/* ==================== Weather Slide ==================== */
/* DMI weather slide with frosted glass panel, forecast cards */
.weather-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 60px;
    padding-bottom: calc(60px + var(--ticker-height));
}

/* Override generic slide img rules for weather icons */
.weather-slide .weather-main-icon {
    width: auto;
    height: auto;
    max-width: 550px;
    max-height: 550px;
    object-fit: contain;
}

.weather-glass-panel {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(40, 40, 40, 0.62);
    border-radius: var(--glass-radius-lg);
    border: var(--glass-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.weather-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35px 50px 25px 50px;
}

.weather-title {
    font-size: 72px;
    font-weight: 300;
    color: var(--text-primary);
}

.weather-area {
    font-size: 56px;
    font-weight: 400;
    color: var(--text-primary);
}

.weather-separator {
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    margin: 0 50px;
}

.weather-main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.weather-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-main-icon {
    max-width: 500px;
    max-height: 400px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.weather-bottom-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 50px 50px 50px;
}

.weather-current {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.weather-temperature {
    font-size: 215px;
    font-weight: 200;
    color: var(--text-primary);
    line-height: 1;
}

.weather-temp-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    margin: 20px 0;
    width: 820px;
}

.weather-info-row {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-secondary);
    font-size: 32px;
}

.weather-date {
    color: var(--text-secondary);
}

.weather-info-separator {
    color: rgba(255, 255, 255, 0.25);
}

.weather-slide .weather-info-icon {
    width: 30px;
    height: 30px;
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
}

.weather-wind,
.weather-humidity {
    color: var(--text-secondary);
}

.weather-forecast {
    display: flex;
    gap: 15px;
}

.weather-forecast-card {
    background: rgba(80, 80, 80, 0.7);
    border-radius: 18px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 31px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 106px;
}

.weather-forecast-day {
    font-size: 28px;
    font-weight: 500;
    color: var(--text-primary);
}

.weather-slide .weather-forecast-icon {
    width: 68px;
    height: 68px;
    max-width: 68px;
    max-height: 68px;
    object-fit: contain;
    margin-bottom: 5px;
}

.weather-forecast-temp {
    font-size: 26px;
    color: var(--text-secondary);
}

/* ==================== Upcoming Classes Override Slide ==================== */
/* Override slide shown when classes start within the configured timeframe */

.upcoming-classes-override {
    z-index: 100 !important;
    height: var(--slide-canvas-height) !important;
}

.upcoming-classes-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Background image with dark fallback */
    background: rgb(20, 25, 35) url('../img/god-dag/dag.jpg') center center / cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.upcoming-classes-overlay {
    /* Dark transparent overlay for better text readability */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

.upcoming-classes-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 50px 60px 60px 60px;
    box-sizing: border-box;
}

.upcoming-classes-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px;
}

.upcoming-classes-logo {
    max-width: 400px !important;
    max-height: 400px !important;
    object-fit: contain !important;
}

.upcoming-classes-org-name {
    font-size: 60px;
    font-weight: 500;
    color: var(--primary-color, #ffd700);
    text-align: center;
    margin-bottom: 25px;
    margin-top: 25px;
}

.upcoming-classes-title {
    font-size: 80px;
    font-weight: 700;
    color: var(--text-primary);
    /* Breathing room down to the class cards - without it the title sits
       directly on the card at the demo TV's scaled-down size */
    margin: 0 0 28px 0;
}

.upcoming-classes-card {
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--glass-radius-xl);
    padding: 40px;
    max-width: 1600px;
    width: auto;
    min-width: 500px;
}

.upcoming-classes-grid {
    display: flex;
    gap: 30px;
}

.upcoming-classes-grid.single-column {
    justify-content: center;
}

.upcoming-classes-grid.single-column .upcoming-class-card {
    width: 800px;
}

.upcoming-classes-grid.two-columns {
    justify-content: center;
}

.upcoming-classes-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.upcoming-class-card {
    /* Uses faded primary color as background */
    background: var(--primary-color-faded, rgba(100, 100, 100, 0.4));
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 720px;
    min-height: 130px;
    box-sizing: border-box;
}

.upcoming-class-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.upcoming-class-name {
    font-size: 34px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-class-instructor {
    font-size: 28px;
    color: rgba(200, 200, 200, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-class-location {
    font-size: 28px;
    color: rgba(150, 150, 150, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-class-time {
    font-size: 48px;
    font-weight: 700;
    /* Uses primary color for the time */
    color: var(--primary-color, #ffd700);
    white-space: nowrap;
    margin-left: 20px;
    flex-shrink: 0;
}

/* ==================== Ledige Tider (Available Spots) Slide ==================== */
/* Shows classes with available spots that the user has selected */

.ledige-tider-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Background image is set dynamically via JS, fallback to dark background */
    background: rgb(20, 25, 35);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.ledige-tider-overlay {
    /* Dark transparent overlay for better text readability */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ledige-tider-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 50px 60px 60px 60px;
    box-sizing: border-box;
}

.ledige-tider-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}

.ledige-tider-logo {
    width: 300px!important;
    max-width: none!important;
    max-height: none!important;
}

.ledige-tider-org-name {
    font-size: 36px;
    font-weight: 500;
    color: var(--primary-color, #ffd700);
    text-align: center;
    margin-bottom: 10px;
    margin-top: 25px;
}

.ledige-tider-title {
    font-size: 80px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.ledige-tider-card {
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--glass-radius-xl);
    padding: 40px;
    max-width: 1600px;
    width: auto;
    min-width: 500px;
}

.ledige-tider-grid {
    display: flex;
    gap: 30px;
}

.ledige-tider-grid.single-column {
    justify-content: center;
}

.ledige-tider-grid.single-column .ledige-tider-class-card {
    width: 800px;
}

.ledige-tider-grid.two-columns {
    justify-content: center;
}

.ledige-tider-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ledige-tider-class-card {
    /* Uses faded primary color as background */
    background: var(--primary-color-faded, rgba(100, 100, 100, 0.4));
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 720px;
    min-height: 130px;
    box-sizing: border-box;
}

.ledige-tider-class-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.ledige-tider-class-name {
    font-size: 34px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ledige-tider-class-instructor {
    font-size: 28px;
    color: rgba(200, 200, 200, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ledige-tider-class-location {
    font-size: 28px;
    color: rgba(150, 150, 150, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ledige-tider-class-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 20px;
}

.ledige-tider-class-spots {
    font-size: 36px;
    font-weight: 700;
    /* Uses primary color for the spots count */
    color: var(--primary-color, #ffd700);
    white-space: nowrap;
}

.ledige-tider-class-time {
    font-size: 24px;
    color: rgba(180, 180, 180, 1);
    white-space: nowrap;
}

.ledige-tider-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 400px;
}

.ledige-tider-loading i {
    font-size: 64px;
    color: var(--primary-color, #ffd700);
    opacity: 0.8;
}

.ledige-tider-loading-text {
    font-size: 24px;
    color: rgba(200, 200, 200, 0.8);
}

/* Page indicator for pagination */
.ledige-tider-page-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 15px;
}

.ledige-tider-page-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ledige-tider-page-dot.active {
    background: var(--primary-color, #ffd700);
    transform: scale(1.2);
}

/* ==================== Responsive Adjustments ==================== */
@media (max-width: 480px) {
    .slideshow-initial-loader i {
        font-size: 32px;
    }
    
    .slideshow-initial-loader span {
        font-size: 12px;
    }
}

@media (max-width: 320px) {
    .slideshow-initial-loader i {
        font-size: 24px;
    }
    
    .slideshow-initial-loader span {
        font-size: 10px;
    }
    
    .slideshow-preview-wrapper {
        border-radius: 6px;
    }
}
/* ==================== Fullscreen ==================== */

/* Toggle button — sits OUTSIDE the scaled canvas so it keeps a normal,
   tappable size even when the preview is small (e.g. on mobile) */
.slideshow-fullscreen-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    min-height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    z-index: 20;
    opacity: 0.85;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.slideshow-fullscreen-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.05);
}

/* Fullscreen button is hidden on mobile — signage fullscreen isn't useful on
   a phone, and it clutters the small preview. */
@media (max-width: 768px) {
    .slideshow-fullscreen-btn {
        display: none;
    }
}

/* Shared fullscreen state (native and iOS fallback) — !important is needed
   to beat the hero wrapper's !important positioning in styles.css */
.slideshow-preview-wrapper.slideshow-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    background: #000 !important;
    box-shadow: none !important;
}

/* iOS Safari fallback: emulated fullscreen via fixed positioning */
.slideshow-preview-wrapper.slideshow-fullscreen-fallback {
    height: 100dvh !important;
    z-index: 4000 !important;
}

body.slideshow-fullscreen-open {
    overflow: hidden;
}

/* In fullscreen the label is always visible and the button slightly larger */
.slideshow-preview-wrapper.slideshow-fullscreen .slideshow-fullscreen-btn {
    top: 16px;
    right: 16px;
    padding: 10px 18px;
}

.slideshow-preview-wrapper.slideshow-fullscreen .slideshow-fullscreen-label {
    display: inline;
}

/* =====================================================
   "Lukker snart" demo slide (website demo only)
   Mirrors the automatic closing-soon override on real screens.
   ===================================================== */
.lukker-snart-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The news ticker covers the bottom of the canvas; reserve that space so
       the content centers in the visible area instead of sitting low. */
    padding-bottom: 150px;
    box-sizing: border-box;
}

.lukker-snart-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.lukker-snart-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    padding: 0 40px;
}

.lukker-snart-icon {
    font-size: 90px;
    margin-bottom: 20px;
}

/* Scoped like .lukker-snart-message below: the title is an <h1>, and the
   host page's ".hero h1" sizing (incl. its mobile/tablet breakpoints) would
   otherwise out-specify a bare class and resize it per viewport. */
.lukker-snart-content .lukker-snart-title {
    font-size: 58px;
    font-weight: 700;
    margin: 0 0 28px;
    line-height: 1.15;
}

.lukker-snart-minutes {
    font-size: 140px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 28px;
}

/* Scoped under .lukker-snart-content so host-page prose rules (e.g. a section's
   ".section p" / ".stories-highlights p") can't override the message to a small
   grey paragraph when the slide is embedded in the website's live preview. */
.lukker-snart-content .lukker-snart-message {
    font-size: 34px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    margin: 0;
}

/* The "Eksempel pa en infoskaerm fra KlubKlar" label crowds the TV's control
   bar on narrow screens - the slide counter beside it carries the context.
   With the label gone there is room to grow the counter (values are in the
   TV's virtual coordinate space, so ~60px lands at readable real-pixel size
   after the preview scales down). */
@media (max-width: 580px) {
    .slideshow-controls-info .demo-info {
        display: none;
    }

    .slideshow-controls-center .slide-counter {
        font-size: 60px;
        padding: 14px 28px;
    }
}

/* ==================== Mobile GPU relief ====================
   The 1920x1080 stage is scaled to ~0.2-0.35x on phones/tablets, so the
   glass slides' 4-10px backdrop blurs render at well under a device pixel —
   invisible. But every backdrop-filter still forces the compositor to read
   back and re-blur its backdrop whenever ANYTHING on screen changes (ticker,
   progress bar, cross-fades), and mobile GPUs pay dearly for that on every
   frame. Drop them below the tablet breakpoint; the semi-transparent rgba
   panel backgrounds carry the glass look on their own at that size. */
@media (max-width: 1024px) {
    .slideshow-container *,
    .slideshow-container *::before,
    .slideshow-container *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}