html {
  font-size: 16px; /* Or 62.5% for a 10px base (10/16 = 0.625) */
}
/* Prevent horizontal scrolling globally */
html, body {
  overflow-x: hidden;
}

/* Styles de base pour le rond indicateur */
#connection-circle-indicator {
    position: fixed; /* Position fixe par rapport à la fenêtre de visualisation */
    top: 20px;       /* 20px depuis le haut */
    right: 20px;     /* 20px depuis la droite */
    width: 15px;     /* Largeur du rond */
    height: 15px;    /* Hauteur du rond */
    border-radius: 50%; /* Pour faire un cercle parfait */
    background-color: var(--color-accent); /* Couleur rouge par défaut (déconnecté) */
    z-index: 1000;   /* S'assurer qu'il est au-dessus des autres éléments */
    border: 2px solid rgba(255, 255, 255, 0.5); /* Bordure blanche légère */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Ombre discrète */
    transition: background-color 0.3s ease; /* Transition douce pour le changement de couleur */
}

/* Style lorsque l'utilisateur est connecté (classe ajoutée par JS) */
#connection-circle-indicator.connected {
    background-color: var(--color-connected); /* Passe au vert */
}

/* Style lorsque l'utilisateur est déconnecté (classe ajoutée par JS) */
#connection-circle-indicator.disconnected {
    background-color: var(--color-accent); /* Reste rouge */
}

 .signup-promo {
     padding: 0.5rem; /* Reduced padding */
      margin: bottom 0rem; /* Reduced margin */
      text-align: center;
      line-height: 1.7;
      font-style: italic;
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .signup-promo p {
      font-family: 'SFFlorence', 'Roboto', sans-serif;
  font-size: 0.85rem;
    }


/*
 * General styles for the website
 */
@font-face {
  font-family: 'SFFlorence';
  /* The browser will try the more efficient WOFF2 format first. */
  src: url('../assets/font/SFFlorencesans.woff2') format('woff2'),
       url('../assets/font/SFFlorencesans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFFlorence';
  src: url('../assets/font/SFFlorencesans-Bold.woff2') format('woff2'),
       url('../assets/font/SFFlorencesans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'SFFlorence', 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #121212;
}

:root {
  --color-bg: rgba(18, 18, 18, 1);
  --color-bg80: rgba(18, 18, 18, 0.8);
  --color-bg-rgb: 18, 18, 18; 
  --color-text: #FAF9F6;
  --color-transwhite: rgba(250, 249, 246, 0.2);
  --color-accent: #8B0000;
  --color-accent-rgb: 139, 0, 0;
  --color-link: #B22222;
  --color-connected: #4CAF50; /* Vert pour l'état connecté */
}
/* New style for making specific links look like buttons */
.button-as-link {
    display: inline-block;
    width: fit-content;
    margin: 1rem auto 0 auto;
    font-size: 0.6rem;     
    padding: 0.3rem 0.6rem;
    text-align: center;
    background-color: var(--color-accent);
    color: var(--color-bg);
    border: none;
    font-weight: normal;
    text-decoration: none;
    border-radius: none;
    transition: background-color 0.2s ease;
}

.button-as-link:hover {
    background-color: var(--color-link);
    color: var(--color-bg);
}
.align-right {
    margin-left: auto;
    margin-right: 0;
}
/* Sticky Header Transparent Overlay */
#main-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* Background appears on scroll */
#main-header.scrolled {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Nav Layout */
.main-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 15px 0;
}

.nav-link {
  color: #8b0000;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: bolder;
  transition: color 0.3s ease;
  text-transform: uppercase;
}

.nav-link:hover {
  color: #8b0000;
  text-shadow: 0px 0px 5px #8b0000;
}
/* --- Navigation Dropdown Styles (Matched to Filter) --- */

/* The <li> container for the dropdown menu */
.dropdown {
    position: relative;
    display: inline-block;
}

/* The nested <ul> that acts as the dropdown menu. */
.dropdown-menu {
    display: none; /* Hidden by default. JS will toggle this. */
    position: absolute;
    background-color: rgba(var(--color-bg-rgb), 0.9);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 100;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    left: 50%; /* Center the dropdown below the button */
    transform: translateX(-50%); /* Adjust to truly center */
    top: calc(100% + 5px); /* Position it slightly below the button */
    text-align: left;
}

/* Links inside the dropdown */
.dropdown-menu a {
    color: var(--color-text);
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.8rem;
    font-family: 'Roboto', sans-serif;
    text-transform: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Change color of dropdown links on hover */
.dropdown-menu a:hover {
    background-color: var(--color-accent);
    color: var(--color-text);
}

/* This class is added by JavaScript to show the dropdown on click */
.dropdown-menu.show {
    display: block;
}

/* --- Responsive adjustments for mobile menu --- */
@media (max-width: 768px) {
    .dropdown {
        display: block;
        width: 100%;
        text-align: center;
    }

    .dropdown > a.nav-link {
      display: block;
      width: 100%;
      padding: 10px 0;
    }

    .dropdown-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        border: none;
        background-color: #333;
        transform: none;
        top: auto;
        left: auto;
    }
}
/* Hamburger & Navigation */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 10px;
  margin-right: 15px;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

.nav-links li {
  margin: 0;
  padding: 0;
}
/*
==============================================
Search Bar Styling
==============================================
*/

.search-container {
    display: flex;
    align-items: center;
}

#search-input {
    background-color: var(--color-bg);;
    border: 1px solid rgba(var(--color-accent-rgb), 0.5); 
    color: var(--color-text);
    padding: 6px 10px;
    border-radius: 4px;
    width: 200px;
    transition: all 0.2s ease;
    font-family: inherit; /* Use the main font */
}

#search-input::placeholder {
    color: rgba(var(--color-accent-rgb), 1); /* Use 0.7 for 70% opacity */
    font-style: italic; /* Optional: adds a nice touch */
}

#search-input:focus {
    outline: none;
    border-color: var(--color-accent);
    background-color: var(--color-bg);
}
/* --- Style the Search Input Clear Button (the 'X') --- */

/* Targets the 'X' button in WebKit browsers (Chrome, Safari, Edge) */
#search-input::-webkit-search-cancel-button {
    /* This filter converts the default icon color to your specific red (#8B0000) */
    filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4811%) hue-rotate(346deg) brightness(93%) contrast(101%);
    
    /* Makes the cursor a pointer on hover for better UX */
    cursor: pointer;
}
/*
==============================================
Filter Reset Button
==============================================
*/
#reset-filter-container {
    /* Aligns this container with your gallery titles */
    width: 94%;
    max-width: calc(8 * 200px + 7 * 20px);
    margin: 2rem auto -1rem auto; /* Position it above the gallery title */
    text-align: right;
}

.reset-btn {
    background-color: var(--color-bg);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reset-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-bg);
}
.cta-link a {
  text-decoration: none;
  color: #8B0000;
  font-weight: 800;
}

.cta-link a:hover {
  background-color: #8B0000;
  color: #121212;
  text-decoration: none;
}
a.cta-link {
  color: #8B0000; /* or whatever your call-to-action color is */
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s ease;
}

a.cta-link:hover {
  background-color: #8B0000;
  color: #121212;
  text-decoration: none;
}
.social-links-container-manual {
        position: fixed;
        bottom: 15px;
        right: 20px;
        z-index: 1000; /* Keeps it on top of other content */
    }

    .social-links-container-manual a {
        display: inline-block;
        margin-left: 10px;
        font-size: 24px; /* Adjust icon size if needed */
        color: #333; /* Icon color */
        text-decoration: none;
        transition: transform 0.2s ease-in-out;
    }

    .social-links-container-manual a:hover {
        color: #000; /* Darker color on hover */
        transform: scale(1.1); /* Slightly enlarge on hover */
    }
/* Mobile Nav */
@media (max-width: 768px) {
  .main-nav {
    justify-content: space-between;
    padding: 10px 20px;
  }

  .hamburger-btn {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    margin: 10px 0;
  }

  .nav-link {
    padding: 10px 15px;
    display: block;
  }
}

/* Banner styles (UPDATED FOR STATIC IMG BACKGROUND & NO HOVER IMAGE) */
.banner-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 30px auto; /* Adjust as needed */
}

/* Styles for the main banner image (logoSKREAN_03.webp) */
.banner-container > img { /* This targets the <img> directly inside banner-container */
  width: 100%;
  height: auto; /* Ensures aspect ratio is maintained */
  display: block; /* Removes extra space below image */
  z-index: 1; /* Ensures it's behind the overlay */
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Default overlay darkness */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers content vertically */
  align-items: center; /* Centers content horizontally */
  padding: 20px;
  text-align: center;
  z-index: 2; /* Ensures overlay is above the main image */

  /* --- HIDING/SHOWING OVERLAY RULES --- */
  opacity: 0; /* Hidden by default */
  visibility: hidden; /* Ensures it's not clickable when hidden */
  transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease; /* Smooth fade-in/out */
}

/* Make the overlay (with text and links) visible on hover */
.banner-container:hover .banner-overlay {
    opacity: 1; /* Visible on hover */
    visibility: visible; /* Make it interactive on hover */
    background: rgba(0, 0, 0, 0.4); /* Slightly less dark on hover */
}

/* REMOVED: .banner-hover-image styles */
/* All CSS related to .banner-hover-image goes here */


.banner-text {
  color: var(--color-text);
  font-size: 0.8em;
  margin-bottom: 15px;
  font-weight: bold;
}
.banner-text h1 {
  font-size: 1.3em;
  font-weight: bold;
}
.banner-text h2, .banner-text h3 {
  font-size: 0.8em;
}
.banner-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.banner-link {
    background-color: var(--color-accent);
    color: var(--color-text);
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: center;
    width: fit-content;
    /* --- NEW STYLES --- */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40px; /* Ensures both buttons have the same height */
}
/*
==============================================
Banner Button Text Styling
==============================================
*/

/* Style for the main, larger text */
.main-link-text {
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase; /* Keeps the main text uppercase */
}

/* Style for the smaller, explanatory text */
.sub-link-text {
    font-size: 0.55em;
    font-weight: normal;
    text-transform: none; /* Allows for lowercase sub-text */
    opacity: 0.8;
    margin-top: 3px; /* Adds a little space between the two text lines */
}
.banner-link:hover {
  background-color: var(--color-link);
}

/* Gallery styles */
.gallery-title {
  font-family: 'SFFlorence', sans-serif;
  font-size: 1.3rem;
  text-align: left;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
  padding-left: 3%;
  padding-right: 3%;
  
  /* NEW: Align with custom-gallery */
  width: 94%; /* Consistent content area width based on 3% padding */
  /* Max-width to prevent stretching on very large screens */
  max-width: calc(8 * 200px + 7 * 20px); /* Match custom-gallery's max-width */
  margin-left: auto; /* Center the title horizontally */
  margin-right: auto; /* Center the title horizontally */
}

.gallery-title h2 {
  background-color: #8B0000; /* This background will now 'hug' the text */
  color: #121212; /* Text color */
  padding-top: 5px;    /* Vertical padding around the text */
  padding-bottom: 5px; /* Vertical padding around the text */
  padding-left: 8px;   /* Add some small horizontal padding directly to the h5 */
  padding-right: 8px;  /* Add some small horizontal padding directly to the h5 */
  display: inline-block; /* Crucial: Makes the element only as wide as its content */
  margin: 0; /* Remove any default browser margins on the h5 */
  font-size: 0.8em;
}
.custom-gallery {
  display: grid;
  /* CHANGED: Using auto-fill to always create columns, even if empty */
  /* This ensures the grid structure remains consistent regardless of the number of items */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Use 200px as the base min for desktop */
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 50px; 
  padding-left: 3%;
  padding-right: 3%;
  
  width: 94%; /* Consistent content area width based on 3% padding */
  /* Max-width to prevent stretching on very large screens for the 8-column layout */
  max-width: calc(8 * 200px + 7 * 20px); /* (8 items * min-width) + (7 gaps * gap-width) */
  margin-left: auto; /* Center the gallery horizontally */
  margin-right: auto; /* Center the gallery horizontally */
}

/* Ensure individual gallery items maintain their intended width */
.gallery-item {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease-in-out;
  /* NEW: Add a max-width to the item itself to prevent it from growing too large */
  /* This prevents the single item from taking up the entire 1fr when auto-fill creates many empty tracks */
  max-width: 200px; /* Limit the max width of each individual poster */
  width: 100%; /* Ensures it fills its grid cell up to max-width */
}

.gallery-item:hover {
  transform: scale(1.02);
}

.gallery-item img {
  width: 100%;
  display: block;
}

/* Overlay styles */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;

  pointer-events: none;
}

.gallery-item.show-overlay .overlay {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
    .gallery-item:hover .overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

.overlay-title {
  color: var(--color-text);
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 5px;
  padding: 0 10px;
  text-align: center;
  word-break: break-word;
}

.overlay button, .overlay a.play-btn {
  background-color: var(--color-accent);
  color: var(--color-text);
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.overlay button:hover {
  background-color: var(--color-link);
}
.modal-button-container {
  display: flex;
  gap: 15px; /* Adjust the space between buttons */
  margin-top: 20px; /* Space above the buttons */
}
/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background-color: rgba(var(--color-bg-rgb), 0.8);
  color: var(--color-text);
  padding: 20px;
  width: 90vw;
  max-width: 960px;
  max-height: 90vh;
  max-height: 90dvh; /* dynamic viewport height */
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
/* Style for clickable genre/vibe tags in the modal */
.tag-link {
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
}
.tag-link:hover {
    color: var(--color-bg);
    background-color: var(--color-accent);
}
.popup-inner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

#popup-poster {
  max-width: 40%;
  height: auto;
}

.popup-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}

.popup-text p {
  line-height: 1.6;
  color: #FAF9F6;
  font-family: 'SFFlorence', 'Roboto', sans-serif;
  font-size: 0.85rem;
  margin-bottom: 5px;
  margin-top: 5px;
}
#popup-meta-line-two {
  background-color: var(--color-transwhite);
  color: var(--color-bg);
  font-weight: 200;
  margin-top: 50px;
  padding: 2px 10px; /* Recommended: Adds space inside the background */
  display: inline-block; /* Recommended: Makes the background hug the text */
}
#popup-cast + #popup-release-year {
    margin-top: 15px;
}

#popup-available-subtitles + #popup-genres {
    margin-top: 15px;
}

#popup-description {
  margin-bottom: 10px;
}

  #popup-genres {
  color: var(--color-accent);
  font-size: 0.80rem;
  margin-top: 50px; /* Reduced margin to bring it closer to 'Vibes' */
  margin-bottom: 0px; /* Reduced margin to bring it closer to 'Vibes' */
}

#popup-vibes {
  color: var(--color-accent);
  font-size: 0.80rem;
  margin-top: 0px;
  margin-bottom: 50px; /* This keeps its original spacing below it */
}

.popup-play-btn {
  background-color: var(--color-accent);
  color: var(--color-text);
  padding: 10px 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: inline-block;
  text-align: center;
  width: fit-content;
}

.popup-play-btn:hover {
  background-color: var(--color-link);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 30px;
  height: 30px;
  background-color: none;
  color: var(--color-accent);
  border: none;
  border-radius: 50%;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.close-btn:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
}


/* Responsive adjustments */
@media (max-width: 1024px) {
  .banner-links {
    flex-direction: row;
  }
}

@media (max-width: 767px) {
  .popup-inner {
    flex-direction: column;
    align-items: center;
  }

  #popup-poster {
    max-width: 100% !important;
    height: auto;
  }

  .popup-text {
    width: 100%;
  }

  .modal-content {
    width: 95vw;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 15px;
  }

  .close-btn {
    font-size: 28px;
    top: 5px;
    right: 10px;
  }

  .banner-text {
    font-size: 1em;
  }

  .banner-links {
    flex-direction: column;
    gap: 10px;
  }
}

/* About page */
.about-container {
  margin: 5px auto;
  padding: 20px;
  max-width: 800px;
  color: #FAF9F6;
}
.no-top-space {
  margin-top: 0;
  padding-top: 0;
}  
.with-footer-space {
  padding-bottom: 8rem; /* adjust if needed */
}


.about-banner {
  text-align: center;
  margin-bottom: 40px;
}

.about-banner h1 {
  font-size: 1.8rem;
  color: #8b0000;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.about-banner p {
  font-size: 0.85rem;
  color: #FAF9F6;
  font-style: italic;
  font-family: 'Courier New', Courier, monospace;
}

.about-content h2 {
  margin-top: 30px;
  color: #8b0000;
  font-size: 0.8rem;
}

.about-content p, .about-content li {
  line-height: 1.7;
  color: #FAF9F6;
  font-family: 'SFFlorence', 'Roboto', sans-serif;
  font-size: 0.8rem;
}

.about-content ul {
  list-style: disc;
  margin-left: 20px;
  color: #FAF9F6;
}
.no-top-space {
  margin-top: 0;
  padding-top: 0;
}  
.with-footer-space {
  padding-bottom: 8rem; /* adjust if needed */
}

.auth-banner {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.auth-banner {
  text-align: center;
  margin-bottom: 40px;
}

.auth-banner h1 {
  font-size: 1.8rem;
  color: #8b0000;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.auth-banner p {
  font-size: 0.85rem;
  color: #FAF9F6;
  font-style: italic;
  font-family: 'Courier New', Courier, monospace;
}
/*
==============================================
Simplified Form & Button Styling
==============================================
/* Styles the input fields like "Current Password" */
.auth-form input[type="email"],
.auth-form input[type="password"] {
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid #444;
    padding: 0.75rem 1rem;      /* Increased padding slightly for better feel */
    margin-bottom: 0.2rem;
    margin-top: 0.1rem;
    font-size: 1rem;           /* Kept font-size for readability */
    font-weight: normal;
    border-radius: 4px;
    width: auto;
}
/*
==============================================
Password Form Enhancements
==============================================
*/
/* Add this to your styles.css file */

.password-inputs-container {
    display: flex; /* This is the key property to align items horizontally */
    gap: 1rem;     /* This creates a nice space between the two input fields */
  }

/* This makes sure each input takes up half of the available space */
.password-inputs-container input {
    flex: 1;
}
/* New container for horizontal password inputs */
.password-inputs-container {
    display: flex;
    gap: 1rem; /* This creates the space between the input fields */
    margin-bottom: 1rem; /* Adds space below the row of inputs */
}

/* Make sure inputs inside the container share the space */
.password-inputs-container input {
    flex: 1;
    width: auto;
}

/* This rule makes the placeholder text NOT bold */
.auth-form input::placeholder {
    background-color: var(--color-bg);
    font-weight: normal; 
}

/* Styles the placeholder text inside the inputs */
.auth-form input::placeholder {
    background-color: var(--color-bg);
    font-weight: normal;
}
.contact-form {
    text-align: left;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* Styles for the PayPal Donation Button */
.paypal-button-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* You can adjust this value to change the space between buttons */
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

.temp-paypal-button {
    background-color: var(--color-accent);
    color: var(--color-text);
    padding: 8px 18px; /* Reduced padding */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem; /* Reduced font size */
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-block;
    border-radius: 3px;
}

.temp-paypal-button:hover {
    background-color: var(--color-link);
    color: var(--color-text);
}
/* --- Film Page Specific Styles (Add/Modify in styles.css) --- */

.film-hero {
    display: flex;
    flex-direction: column; /* Default to column for small screens */
    align-items: center; /* Center items horizontally when stacked */
    gap: 30px; /* Space between the two main columns (left/right) when stacked */
    padding: 20px;
    max-width: var(--max-content-width); /* Inherit max-width from about-container */
    margin: 50px auto; /* Center the section, add vertical margin */
}

/* New: Styles for the left column (poster + button) */
.film-left-column {
    display: flex;
    flex-direction: column; /* Stack poster and button */
    align-items: center; /* Center them horizontally */
    gap: 20px; /* Space between poster and button */
    width: 100%; /* Take full width on small screens */
    max-width: 350px; /* Limit max width for the column content */
    flex-shrink: 0; /* Prevent this column from shrinking too much */
}

.film-poster-container {
    width: 100%; /* Take full width of its parent (.film-left-column) */
    position: relative; /* Not needed for button absolute positioning anymore, but good for potential overlays */
    /* Remove padding if you had it here, as it's handled by .film-left-column's gap */
}

.film-poster-container img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.popup-play-btn { /* This is the WATCH NOW button style */
    /* Remove position: absolute, bottom, left, transform, z-index as it's now block-level */
    /* It's now centered by align-items: center on .film-left-column */
    display: inline-block; /* Still useful for padding/sizing */
    text-decoration: none; /* Remove underline */
    margin-top: 0; /* Gap handles spacing now */
    /* Ensure other button styles like padding, background, etc. are defined elsewhere for .popup-play-btn */
}

/* New: Styles for the right column (all text) */
.film-right-column {
    width: 100%; /* Take full width on small screens */
    display: flex;
    flex-direction: column; /* Stack info and Skrean Says vertically */
    gap: 30px; /* Space between film info and Skrean Says section */
}

.film-info h1 {
    font-size: 2.5em;
    margin-bottom: 15px;
    text-align: center; /* Center title on small screens */
}

.film-meta,
.film-description {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: left;
}

/* New: Styles for the Skrean Says section */
.skrean-says {
    background-color: var(--color-background-secondary); /* A slightly different background */
    padding: 25px;
    border-left: 5px solid var(--color-accent); /* A distinctive border */
    border-radius: 5px; /* Optional: subtle rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.skrean-says h6 {
    font-size: 1.2em;
    color: var(--color-accent); /* Use your accent color for the heading */
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.skrean-says p {
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--color-text-light); /* Slightly lighter text for review */
    margin-bottom: 1em; /* Adjust this value for more or less space */
  /* You can also use padding-bottom if you prefer */
}


/* To avoid extra space after the very last paragraph, you might add: */
.skrean-says p:last-child {
  margin-bottom: 0;
}

/* --- Media Queries for Larger Screens (Update) --- */
@media (min-width: 768px) { /* Tablet and larger */
    .film-hero {
        flex-direction: row; /* Arrange items in a row (two columns) */
        align-items: flex-start; /* Align columns to the top */
        justify-content: center; /* Center the two columns horizontally */
        gap: 50px; /* Space between the left and right columns */
    }

    .film-left-column {
        width: 30%; /* Left column takes 30% of the space */
        max-width: 300px; /* Still limit the poster's width */
    }

    .film-right-column {
        width: 60%; /* Right column takes 60% of the space */
        flex-grow: 1; /* Allow it to grow and take available space */
        max-width: 700px; /* Max width for readability of long text */
    }

    .film-info h1 {
        font-size: 3em;
        text-align: left; /* Left align title on larger screens */
    }
}

@media (min-width: 1024px) { /* Desktop and larger */
    .film-hero {
        gap: 70px; /* More space on very large screens */
    }
}

/* Responsive adjustment for the button if needed on very small screens */
@media (max-width: 480px) {
    .temp-paypal-button {
        padding: 10px 20px;
        font-size: 1rem;
    }

  .popup-inner {
    flex-direction: column;
    align-items: center;
  }
  .custom-gallery {
    /* For smaller screens, we still want to maintain 2 columns visually */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Use 160px min for mobile */
    gap: 16px;
    justify-items: center; /* center each poster inside its grid cell */
    
    width: 94%;
    max-width: calc(2 * 160px + 1 * 16px); /* (2 items * min-width) + (1 gap * gap-width) */
  }

  .gallery-item {
    max-width: 160px; /* Limit poster width for mobile */
    width: 100%;
  }

  .gallery-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  /* NEW: Align gallery-title with custom-gallery for mobile */
    .gallery-title {
        /* Match custom-gallery's max-width for 2 columns on mobile */
        max-width: calc(2 * 160px + 1 * 16px); /* (2 items * min-width) + (1 gap * gap-width) */
    }
}

/* Sticky Footer */
.tiny-footer {
  font-family: 'SFFlorence', monospace, sans-serif;
  background-color: rgba(var(--color-bg-rgb), 0.85); 
  font-size: 0.70rem;
  font-weight: normal;
  font-style: normal;
  position: fixed;
  bottom: 5px;
  left: 50%;                     
  transform: translateX(-50%);
  color: #c2ac7e;
  margin-top: 4rem;
  z-index: 1000;
  padding: 0.25rem 1rem;
  max-width: 95vw;
}
.tiny-footer p {
  font-size: 0.70rem;
  font-weight: normal;
  font-style: normal;
}
.tiny-footer a {
  font-size: 0.7rem;
  text-decoration: none;
  color:#8B0000;
}

.tiny-footer a:hover {
  background-color: #8B0000;
  color: #121212;
  text-decoration: none;
}
.center-footer {
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  right: auto;
}



/* Landscape mobile fix */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .modal-content {
    width: 95vw;
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    padding: 10px;
  }

  .popup-inner {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  #popup-poster {
    max-width: 70%;
    max-height: 20vh;
    width: auto;
    object-fit: contain;
  }

  .popup-text {
    width: 100%;
    font-size: 0.8em;
  }

  .popup-text h4,
  .popup-text h5,
  .popup-text p {
    margin-bottom: 5px;
  }

  .popup-play-btn {
    padding: 8px 15px;
    font-size: 0.9em;
  }

  .close-btn {
    font-size: 24px;
    top: 5px;
    right: 5px;
  }  
  }
/* GDPR Cookie Banner — Ultra Slim */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-bg80);
  color: var(--color-text);
  font-family: 'SFFlorence', 'Roboto', sans-serif;
  padding: 0.5rem 0.75rem; /* very slim */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.5);
  z-index: 9998;
  font-size: 0.7rem;
  text-align: center;
  line-height: 1.3;
}

.cookie-actions {
  display: flex;
  gap: 0.5rem;
}

.cookie-actions button {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid #444;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease;
  font-family: 'SFFlorence', 'Roboto', sans-serif;
}

.cookie-actions button:hover {
  background-color: #222;
  border-color: #888;
}

.cookie-banner.hidden {
  display: none;
}