/* assets/styles.css */

/* Global reset + base */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #000;
  color: #fff;
  transition: background-color 0.3s ease;
}

/* Banner */
.banner {
  text-align: center;
  padding: 1rem;
  background: #111;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Main site navigation */
.site-nav {
  background: #222;
  padding: 0.5rem;
  text-align: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.site-nav a {
  color: #0af;
  margin: 0 1rem;
  text-decoration: none;
  font-weight: bold;
}
.site-nav a:hover {
  text-decoration: underline;
}

/* Page content wrapper */
main {
  padding: 1rem;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Shared styles for sections on content pages if needed */
.content-section {
  background-color: #1a1a1a;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  border: 1px solid #333;
}
.content-section h2, .content-section h3 {
  color: #0cf;
  text-align: center;
  margin-top: 0;
}


/* =============================================== */
/* STYLES FOR racing.html (My Show, Videos, etc.)  */
/* =============================================== */

#my-show {
  margin-bottom: 2rem; padding: 1rem; background-color: #101010;
  border-radius: 8px; border: 1px solid #333; transition: all 0.3s ease-out;
}
#my-show .my-show-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 0.5rem;
}
#my-show .my-show-header h2 { margin: 0; color: #0cf; }

.video-size-controls {
  display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0;
  padding: 0.75rem 1rem; background-color: #181818; border-radius: 6px;
  justify-content: flex-start; flex-wrap: wrap;
  transition: opacity 0.3s ease, transform 0.3s ease; /* For hiding in maximized view */
}
.video-size-controls label { font-weight: normal; color: #eee; }
#videoSizeSlider { width: 200px; flex-grow: 1; max-width: 300px; }
#videoSizeValue { min-width: 55px; text-align: left; font-weight: bold; color: #0cf; }

.my-show-actions {
  display: flex; gap: 1rem; margin-bottom: 1rem;
  justify-content: center; align-items: center; flex-wrap: wrap;
}
.my-show-actions button {
  padding: 0.7em 1.5em; font-size: 1rem; font-weight: bold; color: #ffffff;
  border: none; border-radius: 5px; cursor: pointer;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease, box-shadow 0.2s ease;
}

#view-selected { background-color: #007bff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
#view-selected.update-mode { background-color: #ff8c00; }
#view-selected:hover:not([disabled]):not(.update-mode) { background-color: #0056b3; transform: translateY(-1px); }
#view-selected:hover:not([disabled]).update-mode { background-color: #cc7000; transform: translateY(-1px); }
#view-selected:active:not([disabled]):not(.update-mode) { background-color: #004085; transform: translateY(0px); }
#view-selected:active:not([disabled]).update-mode { background-color: #a55a00; transform: translateY(0px); }
#view-selected:disabled { background-color: #555; color: #aaa; cursor: not-allowed; box-shadow: none; transform: translateY(0px); }

#clear-my-show { background-color: #6c757d; }
#clear-my-show:hover { background-color: #545b62; }

#toggle-maximize-my-show { background: #444; color: #eee; padding: 0.6em 0.8em; line-height: 1; border: 1px solid #555; }
#toggle-maximize-my-show:hover { background-color: #555; border-color: #0cf; color: #0cf; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.video-wrapper { position: relative; width: 600px; max-width: 100%; aspect-ratio: 16 / 9; margin: 0.5rem auto; background-color: #080808; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 4px; }

#selected-streams { --my-show-video-width: 500px; margin-top: 1rem; width: 100%; overflow: auto; min-height: 200px; background-color: #0a0a0a; border-radius: 4px; padding: 5px; box-sizing: border-box;}
#selected-streams > .video-wrapper { width: var(--my-show-video-width); max-width: 100%; margin: 0; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--my-show-video-width, 200px), 1fr)); gap: 5px; align-items: start; justify-items: center; }
:root { --video-grid-min-col-width-browse: 550px; /* For browsing class/promoter lists */ }
#class-streams .video-grid, #promoter-streams-content { grid-template-columns: repeat(auto-fill, minmax(var(--video-grid-min-col-width-browse), 1fr)); gap: 0.75rem; }

.video-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; border-radius: 8px; background: #1a1a1a; border: 1px solid #333; }
.video-card .video-clickable-header { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; user-select: none; }
.video-card .video-clickable-header .video-select { margin-top: 0.2em; flex-shrink: 0; transform: scale(1.1); }
.video-card .video-clickable-header .video-text-details-wrapper { display: flex; flex-direction: column; flex-grow: 1; }
.video-card .video-clickable-header .video-title-text { color: #0cf; font-weight: bold; line-height: 1.3; font-size: 0.95rem; }
.video-card .video-clickable-header .video-additional-details { font-size: 0.8rem; color: #bbb; display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.4rem; }
.video-card .video-clickable-header .video-detail-item { line-height: 1.3; }
.video-card .video-clickable-header .video-detail-item strong { color: #ddd; margin-right: 0.4em; }
.video-card.selected { border: 2px solid #0cf; box-shadow: 0 0 10px rgba(0, 204, 255, 0.3); background-color: rgba(0, 170, 255, 0.05); }

.collapse { margin-bottom: 1.5rem; border: 1px solid #383838; border-radius: 8px; overflow: hidden; background-color: #111; }
.collapse > h3 { margin: 0; padding: 0.85rem 1.25rem; background: #222; color: #0cf; font-size: 1.1rem; cursor: pointer; border-bottom: 1px solid #383838; }
.collapse > h3:hover { background: #2a2a2a; }
.collapse .video-grid { display: none; padding: 1rem; background: #111; }

#promoter-streams-section { margin-bottom: 2rem; padding: 1rem; background-color: #101010; border-radius: 8px; border: 1px solid #333; }
#promoter-streams-section h2 { color: #0cf; margin-top: 0; margin-bottom: 1rem; text-align: center; }

/* MAXIMIZED "MY SHOW" VIEW STYLES */
body.my-show-maximized > header.banner,
body.my-show-maximized > nav.site-nav { transform: translateY(-100%); opacity: 0; pointer-events: none; }
body.my-show-maximized > main > *:not(#my-show) { display: none !important; }
body.my-show-maximized { overflow: hidden; }
body.my-show-maximized #my-show {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000;
  background-color: #000; padding: 0; margin: 0; border: none; border-radius: 0;
  overflow: hidden; display: flex; flex-direction: column;
}
body.my-show-maximized #my-show .my-show-header,
body.my-show-maximized #my-show > p,
body.my-show-maximized #my-show .video-size-controls { /* Slider also hidden in maximized */
    display: none !important;
}
body.my-show-maximized #my-show .my-show-actions {
  position: relative; z-index: 1001; background-color: rgba(10,10,10, 0.95);
  padding: 0.5rem 1rem; margin: 0; flex-shrink: 0; border-bottom: 1px solid #333;
  justify-content: flex-end;
}
body.my-show-maximized #selected-streams {
  flex-grow: 1; width: 100%; height: auto;
  max-height: calc(100% - var(--maximized-controls-height, 60px)); /* Adjusted default */
  background-color: #000; padding: 10px; box-sizing: border-box; overflow-y: auto;
  display: grid !important; gap: 10px; align-content: flex-start; justify-items: center;
  /* grid-template-columns is set by JS */
}
body.my-show-maximized #selected-streams .video-wrapper {
  width: var(--my-show-video-width); /* JS sets this */
  max-width: 100%; margin: 0 auto;
  max-height: calc(100vh - var(--maximized-controls-height, 60px) - 20px);
}

/* =============================================== */
/* STYLES FOR rentals.html                         */
/* =============================================== */
/* ... (All rentals.html styles from the previous complete CSS file) ... */
.rentals-page h2, .rentals-page h3, .rentals-page h4 { color: #0cf; }
.rental-hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://images.unsplash.com/photo-1541447271487-09612b3f4967?auto=format&fit=crop&w=1350&q=80');
  background-size: cover; background-position: center; padding: 4rem 1.5rem; text-align: center;
  border-radius: 8px; margin-bottom: 2.5rem; color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.rental-hero .hero-content { background-color: rgba(0,0,0,0.4); display: inline-block; padding: 2rem 2.5rem; border-radius: 6px; }
.rental-hero h2 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; }
.rental-hero .subtitle { font-size: clamp(1.1rem, 3vw, 1.3rem); font-weight: 300; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.rental-details, .coming-soon-cta { background-color: #181818; padding: 2rem 1.5rem; border-radius: 8px; margin-bottom: 2.5rem; border: 1px solid #282828; }
.rental-details h3, .coming-soon-cta h3 { text-align: center; margin-top: 0; font-size: clamp(1.5rem, 4vw, 1.8rem); margin-bottom: 1.5rem; }
.rental-details > p, .coming-soon-cta > p:not(.beta-testing-note):not(.stay-tuned) { line-height: 1.7; font-size: 1.05rem; color: #ccc; max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 1rem; }
.rental-details > p:last-child, .coming-soon-cta > p:not(.beta-testing-note):not(.stay-tuned):last-child { margin-bottom: 0; }
.whats-included-container { display: flex; justify-content: center; width: 100%; margin-top: 2.5rem; margin-bottom: 2.5rem; }
.whats-included { background-color: #202020; padding: 2rem 1.5rem; border-radius: 8px; width: 100%; max-width: 900px; box-sizing: border-box; }
.whats-included h4 { text-align: center; font-size: 1.6rem; margin-top: 1.5rem; margin-bottom: 1.5rem; color: #0df; }
.whats-included h4:first-of-type { margin-top: 0; }
.kit-items-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.kit-items-grid.text-based-list .kit-item { align-items: flex-start; text-align: left; }
.kit-items-grid.text-based-list .kit-item p strong { color: #0cf; font-size: 1.1em; margin-bottom: 0.3em; display: block; }
.kit-item { background-color: #282828; padding: 1.25rem; border-radius: 6px; border: 1px solid #383838; }
.kit-item p { margin: 0; color: #ddd; font-size: 1rem; line-height: 1.5; }
.kit-item p small { display: block; margin-top: 0.3em; font-size: 0.9em; color: #a0a0a0; font-style: italic; }
.camera-option .option-note { font-size: 0.85rem; color: #888; margin-top: 0.5rem; font-style: italic; display: block; }
.what-you-need { margin-top: 2.5rem; padding: 1.5rem; background-color: #111; border-radius: 6px; }
.what-you-need > p strong { color: #0cf; display: block; margin-bottom: 1rem; font-size: 1.3rem; text-align: center; }
.what-you-need ul.text-based-checklist { list-style: none; padding-left: 0; max-width: 100%; }
.what-you-need ul.text-based-checklist li { margin-bottom: 0.75rem; font-size: 1.05rem; color: #ddd; line-height: 1.6; position: relative; padding-left: 1.8em; }
.what-you-need ul.text-based-checklist li::before { content: "✓"; color: #0cf; font-weight: bold; position: absolute; left: 0; top: 0.05em; }
.coming-soon-cta .beta-testing-note { text-align: center; font-size: 1.1rem; color: #f0ad4e; font-weight: 500; margin-top: 1.5rem; margin-bottom: 1.5rem; padding: 0.75rem 1rem; background-color: rgba(40, 30, 15, 0.5); border: 1px solid #f0ad4e; border-radius: 6px; max-width: 700px; margin-left: auto; margin-right: auto; }
.coming-soon-cta .beta-testing-note strong { color: #f0ad4e; }
.coming-soon-cta .stay-tuned { text-align: center; font-size: clamp(1.3rem, 4vw, 1.6rem); font-weight: bold; color: #0cf; margin-top: 1.5rem; text-transform: uppercase; letter-spacing: 1px; }
.google-form-embed-container { margin-top: 3rem; padding: 1.5rem; background-color: #111; border-radius: 8px; border: 1px solid #333; max-width: 800px; margin-left: auto; margin-right: auto; }
.google-form-embed-container h4 { text-align: center; color: #0cf; margin-top: 0; margin-bottom: 1.5rem; font-size: 1.4rem; }
.google-form-embed-container iframe { display: block; border-radius: 6px; }

/* =============================================== */
/* COOKIE POPUP STYLES                             */
/* =============================================== */
.cookie-popup {
  position: fixed; bottom: 0; left: 0; width: 100%;
  background-color: rgba(20, 20, 20, 0.98); /* Slightly less transparent */
  color: #eee; padding: 20px; box-sizing: border-box;
  z-index: 2000; display: none; border-top: 3px solid #0cf;
  text-align: center; font-size: 0.95rem; box-shadow: 0 -2px 15px rgba(0,0,0,0.5);
}
.cookie-popup.show { display: block; animation: slideUp 0.5s ease-out forwards; }
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0%); opacity: 1; } }
.cookie-popup-content { max-width: 700px; margin: 0 auto; }
.cookie-popup .popup-title { font-size: 1.5em; font-weight: bold; color: #0cf; display: block; margin-bottom: 10px; }
.cookie-popup p { margin: 10px 0 15px; line-height: 1.6; color: #ccc; }
.cookie-popup .cookie-links { font-size: 0.85em; margin-bottom: 20px; }
.cookie-popup .cookie-links a { color: #0af; text-decoration: underline; }
.cookie-popup .cookie-links a:hover { color: #0cf; }
.cookie-popup .cookie-btn {
  background-color: #0af; color: white; border: none; padding: 12px 25px;
  text-align: center; text-decoration: none; display: inline-block;
  font-size: 1em; font-weight: bold; border-radius: 5px; cursor: pointer;
  transition: background-color 0.2s ease;
}
.cookie-popup .cookie-btn:hover { background-color: #008bcc; }