:root {
    --primary-color: #003399; /* EU Blue */
    --primary-dark: #002266;
    --primary-light: #4a7bc8;
    --secondary-color: #FFD700; /* Gold */
    --accent-color: #C8102E; /* EU Red */
    --success-color: #008000;
    --warning-color: #FF8C00;
    --error-color: #C8102E;
    --background-color: #f8f9fa;
    --lumo-base-color: var(--background-color);
    --card-bg: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-light: #ffffff;
    --border-radius: 12px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 8px 12px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Dark mode variables */
html[theme="dark"] {
    --background-color: #1a1a1a;
    --lumo-base-color: var(--background-color);
    --card-bg: #2d2d2d;
    --text-primary: #f0f0f0;
    --text-secondary: #b0b0b0;
    --text-light: #ffffff;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --box-shadow-hover: 0 8px 12px rgba(0, 0, 0, 0.4);
}

/* Base styles */
body {
    background-color: var(--background-color);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Header styles */
.header {
    background-color: var(--card-bg);
}

/* Sister-site banner. The :hover selector is not cosmetic: Lumo underlines
   links on hover via `a:where(:any-link):hover` (specificity 0,1,1), which
   beats a class-only text-decoration:none and draws the line across the
   banner's text and icon. 0,2,0 wins it back. */
.sister-site-banner,
.sister-site-banner:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.4rem 1rem;
    /* Full-bleed bar: contain the padding, or the content-box default renders
       the bar 2rem wider than the viewport and every page scrolls sideways */
    box-sizing: border-box;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    color: var(--text-light);
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition);
}

.sister-site-banner-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.sister-site-banner-close {
    margin-left: 0.75rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.75;
}

.sister-site-banner-close:hover {
    opacity: 1;
}

.sister-site-banner-name {
    font-weight: 700;
}

html[theme="dark"] .sister-site-banner {
    background: linear-gradient(90deg, var(--primary-dark), #001a44);
}

@media (max-width: 800px) {
    .sister-site-banner {
        font-size: 0.8rem;
        padding: 0.35rem 0.75rem;
    }
}

.vaadin-horizontal-layout {
    gap: 0.5rem;
}

/* Logo and title */
h1.logo-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: -0.5px;
}

html[theme="dark"] h1.logo-title {
    color: var(--primary-light);
}

/* Button styles */
.vaadin-button {
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
    border: 1px solid transparent;
}

.vaadin-button:focus {
    box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.2);
}

.vaadin-button.lumo-primary {
    background-color: var(--primary-color);
    color: white;
}

.vaadin-button.lumo-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--box-shadow-hover);
}

.vaadin-button.lumo-tertiary {
    color: var(--primary-color);
    background-color: transparent;
    border-color: transparent;
}

.vaadin-button.lumo-tertiary:hover {
    background-color: rgba(0, 51, 153, 0.05);
    color: var(--primary-dark);
}

html[theme="dark"] .vaadin-button.lumo-tertiary {
    color: var(--primary-light);
}

html[theme="dark"] .vaadin-button.lumo-tertiary:hover {
    background-color: rgba(255, 215, 0, 0.1);
    color: var(--secondary-color);
}

/* Search bar styles */
.expand-search-btn {
    display: none !important;
}

.search-bar.expanded {
    display: flex !important;
}

.search-bar {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.discover-menu {
    --lumo-contrast-5pct: transparent;
    padding: 0;
}

@media (max-width: 1450px) and (min-width: 801px) {
    .expand-search-btn {
        display: flex !important;
    }

    .desktop-header .search-bar {
        position: absolute;
        right: 80px;
        top: 70px;
        background: var(--card-bg);
        border: 1px solid var(--lumo-contrast-20pct);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        z-index: 100;
        display: none;
        margin-top: 0;
    }

    .desktop-header .search-bar.expanded {
        display: flex !important;
    }
}

/* Same collapsed-search treatment as the band above, but dense nav rows keep
   it up to 1600px (their row + inline search would overflow 1450px) and slim
   their nav buttons to fit inside 1201px */
@media (max-width: 1600px) and (min-width: 1201px) {
    .dense-nav .expand-search-btn {
        display: flex !important;
    }

    .dense-nav .desktop-header .search-bar {
        position: absolute;
        right: 80px;
        top: 70px;
        background: var(--card-bg);
        border: 1px solid var(--lumo-contrast-20pct);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        z-index: 100;
        display: none;
        margin-top: 0;
    }

    .dense-nav .desktop-header .search-bar.expanded {
        display: flex !important;
    }

    .dense-nav .desktop-header .nav-button,
    .dense-nav .desktop-header vaadin-menu-bar.nav-button vaadin-menu-bar-button {
        padding: 0 0.6rem;
    }
}

html[theme="dark"] .search-bar {
    background-color: rgba(45, 45, 45, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.vaadin-text-field {
    border-radius: 6px;
    border: 1px solid #ccc;
    transition: var(--transition);
}

.vaadin-text-field:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.1);
}

html[theme="dark"] .vaadin-text-field {
    border-color: #666;
    background-color: #3a3a3a;
    color: var(--text-primary);
}

html[theme="dark"] .vaadin-text-field:focus-within {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(74, 123, 199, 0.2);
}

/* Spotlight hero section */
.spotlight-hero {
    background-size: cover;
    background-position: center;
    color: white;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    margin: 1.5rem 0;
    min-height: 450px;
    display: flex;
    padding: 2rem;
}

.spotlight-hero > * {
    position: relative;
    z-index: 2;
}

.spotlight-badge {
    background-color: var(--primary-color);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spotlight-title {
    color: white;
    font-size: 3rem;
    font-weight: 800;
    margin: 0.5rem 0 1rem 0;
    line-height: 1.2;
}

.spotlight-description {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 500px;
    opacity: 0.95;
}

.spotlight-button {
    margin-top: 1.5rem;
}

/* Spotlight rotator: swaps a fresh element into the host on every change,
   which is what replays the fade-in animation. The fade deliberately starts
   from a partially-visible opacity instead of 0: browsers freeze animation
   clocks in occluded/background tabs, and a from-0 fade frozen at its start
   would leave the spotlight invisible until the next swap. Starting visible
   (with a whisper of zoom) degrades to a slightly dim hero in that case. */
.spotlight-slide-host > * {
    animation: spotlight-fade-in 0.8s ease;
}

@keyframes spotlight-fade-in {
    from { opacity: 0.35; transform: scale(1.01); }
    to { opacity: 1; transform: none; }
}

/* Dots row in normal flow below the hero (Lumo variables adapt to dark mode) */
.spotlight-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: -6px; /* sits snug under the hero's bottom margin */
}

.spotlight-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lumo-contrast-30pct);
    cursor: pointer;
    transition: background 0.2s;
}

.spotlight-dot:hover {
    background: var(--lumo-contrast-50pct);
}

.spotlight-dot.active {
    background: var(--lumo-primary-color);
}

/* Section titles */
h2.section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1rem 0 0 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
}

html[theme="dark"] h2.section-title {
    border-bottom-color: var(--primary-light);
}

/* Media cards */
.media-card {
    width: 200px;
    min-width: 180px; /* Prevents cards from becoming illegibly small */
    height: 390px;
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: visible;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative; /* Needed for absolute positioning of badge */
    text-decoration: none;
    color: inherit;
}

.media-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
    z-index: 10;
}

.media-card-poster {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.media-card-info {
    padding: 0.25rem 1rem 1rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.media-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: auto;
}

.media-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
    width: 100%;
    margin-top: 0.5rem;
}

.media-card-flags {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.media-card-year {
    margin-left: auto;
}

/* Media Card Scroll on Homepage */
.scrollable-section {
    position: relative;
    padding: 0.3rem 0;
}

.scrollable-wrapper {
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 1rem 0;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--background-color);
}

.scrollable-wrapper::-webkit-scrollbar {
    height: 8px;
}

.scrollable-wrapper::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 10px;
}

.scrollable-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
}

.scroll-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.scroll-nav-button:hover {
    background-color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.scroll-nav-button.left {
    left: 0;
}

.scroll-nav-button.right {
    right: 0;
}

/* Footer styles */
.footer {
    background-color: var(--card-bg);
    border-top: 1px solid #eee;
    padding: 2rem 0;
    margin-top: 3rem;
}

html[theme="dark"] .footer {
    border-top-color: #444;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-copyright {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.footer-links {
    display: flex;
    gap: 1rem;
}

.footer-links .vaadin-button {
    font-size: 0.9rem;
}

/* Production badge */
.production-badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: default;
    transition: var(--transition);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Inside poster cards the badge anchors to the card's top-right corner —
   must survive badge swaps (refreshFromCache), so it lives on the class,
   not an inline style. Everywhere else (section headers, legends, the
   spotlight row) it renders inline. */
.media-card .production-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

.production-badge:hover {
    transform: scale(1.1);
    z-index: 20;
}

/* Base state for the text label */
.production-badge .badge-text {
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    transition: max-width 0.3s ease-in-out, margin 0.3s;
    white-space: nowrap;
}

/* 150px so the longest label on either site (PlayFrom.EU's "Foreign
   Co-Production", ~132px at the badge font) fits without clipping */
@media (hover: hover) {
    .production-badge:hover .badge-text {
        max-width: 150px;
        margin-left: 4px;
    }
}

/* Mobile/Click State: Triggered when we manually add the 'expanded' class */
.production-badge.expanded .badge-text {
    max-width: 150px;
    margin-left: 4px;
}

/* Pending badge: classification not cached yet, will be replaced once it resolves */
.production-badge.pending vaadin-icon {
    animation: badge-spin 1.2s linear infinite;
}

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

html[theme="dark"] .production-badge {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Dark mode adjustments for various components */
html[theme="dark"] .media-card {
    background-color: var(--card-bg);
}

html[theme="dark"] .media-card-title {
    color: var(--text-primary);
}

html[theme="dark"] .media-card-meta {
    color: var(--text-secondary);
}
/* Desktop header styles */
.desktop-header .nav-button {
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 6px;
    padding: 0 1.2rem;
}

.desktop-header .nav-button:hover {
    background-color: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
    transform: translateY(-1px);
}

/* Specific style for the Discover Dropdown */
/* Needed because its a different component (MenuBar) with its own highlight on hover */
.desktop-header vaadin-menu-bar.nav-button {
    padding: 0;
    background: transparent;
}

/* Move the styles to the actual clickable internal button */
.desktop-header vaadin-menu-bar.nav-button vaadin-menu-bar-button {
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 6px;
    padding: 0 1.2rem; /* The padding lives here now */
    cursor: pointer;
    background: transparent;
}

/* Remove the default Lumo focus ring/background if it persists */
.desktop-header vaadin-menu-bar.nav-button vaadin-menu-bar-button::before,
.desktop-header vaadin-menu-bar.nav-button vaadin-menu-bar-button::after {
    display: none;
}
vaadin-menu-bar-submenu vaadin-icon {
    margin-inline-end: var(--lumo-space-s);
    color: var(--lumo-primary-text-color);
}

/* Mobile header styles */
.mobile-header {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.mobile-menu {
    display: none;
    background-color: var(--card-bg);
    padding: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--box-shadow);
}

html[theme="dark"] .mobile-menu {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Sidebar Drawer */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%; /* Leaves space on the right like an app */
    max-width: 300px;
    height: 100vh;
    background-color: var(--lumo-base-color);
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: var(--lumo-box-shadow-xl);
    display: flex;
    flex-direction: column;
}

/* Slides in animation */
.mobile-sidebar.open {
    transform: translateX(0);
}

/* Make navigation items (nav) stretch to the horizontal end */
.mobile-sidebar vaadin-side-nav {
    width: 100%;
    flex-grow: 1;
    overflow-y: auto;
}

/* --- Mobile Sidebar Item Styling --- */
.mobile-sidebar vaadin-side-nav-item {
    padding: 4px 12px;
    margin: 4px 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

/* Styling the internal link part of the SideNavItem */
.mobile-sidebar vaadin-side-nav-item::part(link) {
    font-weight: 500;
    font-size: var(--lumo-font-size-m);
    color: var(--lumo-body-text-color);
}

/* Hover/Active state for mobile items */
.mobile-sidebar vaadin-side-nav-item:hover,
.mobile-sidebar vaadin-side-nav-item[active] {
    background-color: var(--lumo-primary-color-10pct);
}

.mobile-sidebar vaadin-side-nav-item[active]::part(link) {
    color: var(--lumo-primary-text-color);
}

/* Add a little pop to the icons */
.mobile-sidebar vaadin-side-nav-item vaadin-icon {
    color: var(--lumo-primary-color);
    margin-right: 12px;
}

/* Backdrop to dim the background when menu is open */
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* Darkens the background */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.sidebar-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* Ensure Nav takes remaining space to push footer down */
.mobile-sidebar .nav-container {
    flex-grow: 1;
    overflow-y: auto;
}

.sidebar-footer {
    padding: var(--lumo-space-m);
    border-top: 1px solid var(--lumo-contrast-10pct);
    background-color: var(--lumo-contrast-5pct);
}

/* Dense desktop nav rows stop fitting the desktop layout around 1200px, so
   they hand over to the mobile header earlier than the global 1040px switch
   (Header adds .dense-nav when a brand renders more than 4 desktop controls) */
@media (max-width: 1200px) {
    .dense-nav .desktop-header {
        display: none !important;
    }

    .dense-nav .mobile-header {
        display: flex !important;
    }
}

/* Responsive design */
@media (max-width: 1040px) {
    .desktop-header {
        display: none !important;
    }

    .mobile-header {
        display: flex !important;
    }

    .spotlight-title {
        font-size: 2rem;
    }

    .footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .media-card {
        width: 160px;
        height: 320px;
    }

    .media-card-poster {
        height: 240px;
    }
}

/* Discover page */
@media (max-width: 800px) {
    .desktop-sidebar {
        display: none !important; /* Hide the fixed 300px sidebar */
    }

    .mobile-filter-btn {
        display: flex !important; /* Show the Filter button */
    }

    .sort-select {
        width: 100%; /* Make sort full width on small screens if title takes space */
    }
}
@media (min-width: 801px) {
    .mobile-filter-btn {
        display: none !important; /* Hide Filter button on desktop */
    }
}
.discovery-grid {
    display: grid;
    justify-content: center; /* Centers the grid tracks horizontally within the container */
    justify-items: center; /* Centers the cards within their individual grid cells */
    width: 100%;
    margin: 0 auto;
}

/* Ensure cards take full width of their grid cell */
.discovery-grid > * {
    width: 100%;
    max-width: 100%;
}

/* Specific adjustments for mobile (2 columns) */
@media (max-width: 600px) {
    .discovery-grid {
        gap: var(--lumo-space-s) !important; /* Smaller gap between cards */
        padding: var(--lumo-space-s);
    }
}
/* Allows the container to use more of the screen width when over 1080p */
@media (min-width: 1920px) {
    .discovery-container {
        max-width: 80% !important;
    }
}

@media (max-width: 480px) {
    .spotlight-title {
        font-size: 1.8rem;
    }

    .spotlight-description {
        font-size: 1rem;
    }

    .media-card {
        width: 140px;
        height: 280px;
    }

    .media-card-poster {
        height: 210px;
    }
}

/* Media Details Page on smaller displays */
@media (max-width: 768px) {
    /* Drop text below image */
    .main-info-header {
        flex-direction: column;
        padding-top: 2rem;
    }
    /* centers image when above text */
    .main-info-header img {
        align-self: center;
    }
}
/* Responsive watch provider rows */
.responsive-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Storefront logos in the Available at pills — the bundled brand glyphs are
   dark, so dark mode renders them white to stay visible on the dark pill */
.store-logo {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

html[theme="dark"] .store-logo {
    filter: brightness(0) invert(1);
}

/* Available-at store pills: the pill carries its own affordances, so Lumo's
   link-hover decoration (a:where(:any-link):hover, 0,1,1) must not draw an
   underline across pill text and logo */
.store-link,
.store-link:hover {
    text-decoration: none;
}