/* #region Page globals */
h1 {margin-top:0;}
p {margin-top:0;}
:root {color-scheme: dark;}


.yogart {
  display: inline-block;
  max-width: calc(90%);
  max-height: calc(100%);
  width: 800;
  height: auto;
  margin-top: 0.5%;
  margin-bottom: 1%;
}

body 
  {
    background-color: #091057;
    color: white;
    text-align: center;
    width: 97%;
    max-width: 1148px;
    margin:auto;
    font-family: "Merriweather", serif;
    font-weight: 500;
    font-style: normal;
  }
main {display: block;}

.left-align {text-align: left;}
.faq-width {max-width: 720px;}

h4 
  {
    margin: 5px;
  }

/* Scroll bar */
::-webkit-scrollbar {width: 20px;}
::-webkit-scrollbar-track {background-color: transparent;}
::-webkit-scrollbar-thumb 
    {
      background-color: #d6dee1;
      border-radius: 20px;
      border: 6px solid transparent;
      background-clip: content-box;
    }
::-webkit-scrollbar-thumb:hover {background-color: #a8bbbf;}

/* All links */
a:link {color:white; text-decoration: none; transition: 0.2s;}
a:visited {color:white; text-decoration: none;}
a:hover {color:#EC8305; text-decoration: none; transition: 0s;}
a:active {color:#EC8305; text-decoration: none;}

input[type=checkbox]:checked+label[for="ExclusiveCast"]
    {
      color:#04AA6D
    }
    
input[type=checkbox]:checked+label:not([for="ExclusiveCast"])
    {
      border: 6px solid #EC8305;
    }

input[type=submit] {
  background-color:#EC8305; 
  color: #091057;
  padding: 18px 32px;
  text-decoration: none;
  margin: 16px 2px 4px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #070b3f;
  font-size: 24px;
}
input[type=submit]:hover {background-color:rgb(255, 171, 45); color:#232a88;}
input[type=submit]:active {background-color:rgb(255, 171, 45); color:#232a88;}

.button {
  background-color:#EC8305; 
  color: #091057;
  padding: 0 0;
  text-decoration: none;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #070b3f;
  font-size: 24px;
  height: 30px;
  line-height: 0px;
  aspect-ratio: 1/1;
  text-align: center;
  vertical-align: middle;
}

#pvr { /* Duplicated for backend reasons */
  transform: rotate(45deg);
}

input[type=url] {
  vertical-align: middle;
}
/* #endregion Page globals */
/* #region Creator selector panel */
.hiddencb
  {
    position:absolute;
    visibility: hidden;
    opacity: 0;
  }

.noselect
  {
    user-select: none;
  }
.castcb
  {
    height: 64px;
    line-height: 160px;
    width: 64px;
    background-color: #ffffff;
    background: url(yogthumbs.webp);
    border-radius: 50%;
    border: 6px solid #091057;
    display: inline-block;
  }
.castcb-contribute {border-color:#232a88;}
/* #endregion Creator selector panel */
/*#region Castmembers Avatars */
.Lewis      { background-position-x: calc(-64px * 0); }
.Simon      { background-position-x: calc(-64px * 1); }
.Sips       { background-position-x: calc(-64px * 2); }
.Duncan     { background-position-x: calc(-64px * 3); }
.Rythian    { background-position-x: calc(-64px * 4); }
.Ben        { background-position-x: calc(-64px * 5); }
.Tom        { background-position-x: calc(-64px * 6); }
.Zylus      { background-position-x: calc(-64px * 7); }
.Zoey       { background-position-x: calc(-64px * 8); }
.Nilesy     { background-position-x: calc(-64px * 9); } /* 10 */
.Ravs       { background-position-x: calc(-64px * 10); }
.Harry      { background-position-x: calc(-64px * 11); }
.Lydia      { background-position-x: calc(-64px * 12); }
.Bouphe     { background-position-x: calc(-64px * 13); }
.Osie       { background-position-x: calc(-64px * 14); }
.Briony     { background-position-x: calc(-64px * 15); }
.Kirsty     { background-position-x: calc(-64px * 16); }
.Boba       { background-position-x: calc(-64px * 17); }
.Pedguin    { background-position-x: calc(-64px * 18); }
.Trott      { background-position-x: calc(-64px * 19); } /* 20 */
.Smith      { background-position-x: calc(-64px * 20); }
.Ross       { background-position-x: calc(-64px * 21); }
.Hulmes     { background-position-x: calc(-64px * 22); }
.Daf        { background-position-x: calc(-64px * 23); }
.Breeh      { background-position-x: calc(-64px * 24); }
.Pyrion     { background-position-x: calc(-64px * 25); }
.Daltos     { background-position-x: calc(-64px * 26); }
.Rambler    { background-position-x: calc(-64px * 27); }
.Spiff      { background-position-x: calc(-64px * 28); }
.Martyn     { background-position-x: calc(-64px * 29); } /* 30 */
.Kim        { background-position-x: calc(-64px * 30); }
.Gee        { background-position-x: calc(-64px * 31); }
.Wilsonator { background-position-x: calc(-64px * 32); }
.Ryan       { background-position-x: calc(-64px * 33); }
.Vadact     { background-position-x: calc(-64px * 34); }
.Bekki      { background-position-x: calc(-64px * 35); }
.Mousie     { background-position-x: calc(-64px * 36); }
.Fionn      { background-position-x: calc(-64px * 37); }
.Mango      { background-position-x: calc(-64px * 38); }
.Shadow     { background-position-x: calc(-64px * 39); } /* 40 */
.Lolip      { background-position-x: calc(-64px * 40); }
/*#endregion */

.Wilsonator {text-indent: -10px;} /* Long name; lazy fix */

/* #region Collapsible Filter Section */

.filter-details {
  /* Style like the old fieldset */
  border: 1px solid #232a88;
  border-radius: 15px;
  padding: 10px 15px 15px 15px; /* Adjusted padding (less top initially) */
  background-color: transparent; /* Or a subtle background */
  overflow: hidden; /* Helps contain content */
}

.filter-summary {
  /* Style like the old legend */
  display: block; /* Make it block level for better layout control */
  border: none;
  padding: 8px 12px;
  margin: -10px -15px 0 -15px; /* Negative margin to touch edges */
  color: #ffffff;
  background-color: #232a88; /* Use card blue for summary background */
  font-weight: bold;
  border-radius: 14px 14px 0 0; /* Round top corners */
  cursor: pointer;
  outline: none; /* Remove default focus outline */
  user-select: none; /* Prevent text selection */
  transition: background-color 0.2s; /* Smooth hover */
}

.filter-summary:hover {
    background-color: #2c349e; /* Slightly lighter blue on hover */
}

/* Hide the default triangle marker */
.filter-summary {
  list-style: none; /* For Firefox */
}
.filter-summary::-webkit-details-marker {
  display: none; /* For Chrome/Safari */
}

/* Add a custom marker (e.g., arrow) */
.filter-summary::before {
  content: '► '; /* Closed state: right-pointing triangle */
  color: #EC8305; /* Orange marker */
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.2s ease-in-out;
}

/* Rotate the marker when the details element is open */
.filter-details[open] > .filter-summary::before {
  transform: rotate(90deg);
}

/* Add space below summary ONLY when details is open */
.filter-details[open] > .filter-summary {
   margin-bottom: 15px; /* Space between summary and content */
   border-radius: 14px; /* Optional: make summary fully rounded when open */
}

/* --- Date Range Filter Styling --- */
.date-range-container {
  text-align: center;    /* Center the main label and input wrapper */
  margin-bottom: 20px; /* Spacing below the date section */
}

.date-range-label {
  display: block;        /* Make label take its own line */
  margin-bottom: 8px;
  color: #ffffff;       /* Orange main label */
  font-size: 1em;        /* Adjust size as needed */
}

.date-inputs-wrapper {
  display: inline-flex;  /* Use inline-flex to allow centering */
  align-items: flex-end; /* Align items based on their bottom edge */
  gap: 8px;              /* Space between From/Separator/To sections */
  flex-wrap: wrap;         /* Allow wrapping on smaller screens */
  justify-content: center; /* Center items if they wrap */
}

.date-input-group {
  text-align: left;      /* Align label/input left within their group */
}

.date-label {
  display: block;
  font-size: 0.85em;
  color: #cccccc;       /* Lighter text for "From" / "To" */
  margin-bottom: 3px;
}

.date-input {
  /* Style like other filter inputs */
  padding: 6px 8px;
  border-radius: 4px;
  background-color: #232a88; /* Card blue background */
  color: white;
  border: 1px solid #161D70; /* Darker blue border */
  color-scheme: dark;      /* Hint for dark mode date picker */
  /* width: auto; */      /* Let browser size, or set a specific width: */
   width: 145px;
}

/* Style the browser's date picker icon (WebKit browsers) */
input[type="date"]::-webkit-calendar-picker-indicator {
   background-color: #cccccc; /* Use a light color for the icon */
   padding: 2px;
   margin-left: 4px;
   border-radius: 2px;
   cursor: pointer;
   opacity: 0.8;
   transition: opacity 0.2s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Style for the optional separator */
.date-separator {
  color: #cccccc;
  font-size: 1.1em;
  padding-bottom: 5px; /* Align vertically with inputs */
  user-select: none;
}

/* --- Toggle Button Styles for Filters --- */

.filter-toggle-container {
  display: block; /* Make containers block level */
  text-align: center; /* Ensure labels inside are centered if needed */
  margin-bottom: 10px; /* Space below each toggle */
}

.filter-toggle-input {
  /* Hide the actual checkbox visually but keep it accessible */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.filter-toggle-label {
  /* Style the label as a button */
  display: inline-block; /* Allow padding and centering */
  padding: 6px 18px; /* Adjust padding */
  border-radius: 50px; /* Pill shape */
  background-color: #232a88; /* Default state: Card blue background */
  color: #cccccc; /* Default state: Light grey text */
  border: 1px solid #161D70; /* Default state: Darker blue border */
  cursor: pointer;
  user-select: none; /* Prevent text selection */
  transition: background-color 0.2s, color 0.2s, border-color 0.2s; /* Smooth transition */
  font-size: 0.9em; /* Slightly smaller font */
  font-weight: 500;
}

.filter-toggle-label:hover {
  /* Hover state (when unchecked) */
  background-color: #2c349e; /* Lighter blue */
  border-color: #373d92;
  color: #ffffff; /* White text on hover */
}

/* Styles for the label when its preceding checkbox is CHECKED */
.filter-toggle-input:checked + .filter-toggle-label {
  background-color: #EC8305; /* Checked state: Orange background */
  color: #091057; /* Checked state: Dark blue text */
  border-color: #be6b05; /* Checked state: Darker orange border */
  font-weight: bold;
}

.filter-toggle-input:checked + .filter-toggle-label:hover {
    background-color: rgb(255, 171, 45); /* Lighter orange on hover when checked */
    border-color: #EC8305;
    color: #091057;
}

/* Optional: Add focus styles for keyboard navigation */
.filter-toggle-input:focus + .filter-toggle-label {
    box-shadow: 0 0 0 2px #091057, 0 0 0 4px #EC8305; /* Example focus outline */
}

/* Add position relative to the element that will trigger the tooltip */
.tooltip-trigger {
  position: relative;
  /* border-bottom: 1px dotted #ccc; /* Optional: subtle indicator */
  /* cursor: help; /* Optional: change cursor */
}

/* Tooltip pseudo-element ::after */
.tooltip-trigger::after {
  content: attr(data-tooltip); /* Display the content of the data-tooltip attribute */

  /* Positioning */
  position: absolute;
  bottom: 115%; /* Position above the label */
  left: 50%;    /* Center horizontally */
  transform: translateX(-50%); /* Fine-tune centering */

  /* Appearance */
  background-color: #161D70; /* Dark blue background (like report card) */
  color: #ffffff;          /* White text */
  padding: 6px 12px;       /* Padding inside the tooltip */
  border-radius: 5px;      /* Slightly rounded corners */
  font-size: 0.9em;        /* Slightly smaller font */
  font-weight: normal;     /* Reset font weight */
  white-space: nowrap;     /* Prevent tooltip text from wrapping */
  z-index: 10;             /* Ensure tooltip is above other elements */

  /* Visibility & Animation */
  opacity: 0;              /* Hidden by default */
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  /* Add a delay before tooltip appears */
  transition-delay: 0s; /* Initially no delay */
}

/* Show the tooltip on hover */
.tooltip-trigger:hover::after {
  opacity: 1;
  visibility: visible;
  /* Delay when hovering */
  transition-delay: 0.4s; /* Wait 0.4s before showing */
}

/* #endregion */

/* #region Playlist export button */

.results-header {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: -15px;
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 30px;
  padding-left: 5px;
  padding-right: 5px;
}

.flex-spacer-results-header {
  flex-grow: 1;
}

.results-info-text {
  margin: 0 10px;
  text-align: center;
  flex-shrink: 0;
  position: relative;
  left: 3px;                         
}

.export-playlist-container {
  display: inline-flex;
  align-items: stretch;
  border-radius: 50px;
  overflow: hidden;
  border: 1px solid #161D70;
  font-size: 0.85em;
  position: absolute;
  right: 2.5%;
  top: 50%;
  transform: translateY(-50%);
}

.export-playlist-text {
  background-color: #2c349e;
  color: white;
  padding: 7px 10px 7px 15px;
  display: flex;
  align-items: center; 
  white-space: nowrap;
  border-right: 1px solid #1e2577;
}

.export-playlist-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EC8305; 
  color: #091057;  
  padding: 7px 12px 7px 10px; 
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  position: relative;
  top: 1px;
}

.export-playlist-icon-button .playlist-icon-char {
  font-size: 1.2em;
  line-height: 1;
  position: relative;
  top: -1px; 
  right: 1px;
}

.export-playlist-icon-button:hover,
.export-playlist-icon-button:focus {
  background-color: rgb(255, 171, 45);
  color: #091057; 
  text-decoration: none;
}

.export-playlist-icon-button:active {
  background-color: #d47504;
  color: #091057;
}

/* Add responsive styling for smaller screens */
@media (max-width: 900px) { 

  .results-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0;
    padding-bottom: 10px;
    min-height: 0;
  }

  .flex-spacer-results-header {
    display: none;
  }

  .results-info-text {
    margin: 0;
    text-align: center;
    width: 100%;
  }

  .export-playlist-container {
    position: static;
    transform: none; 
    align-self: flex-end;
  }
}
/* #endregion */

/* #region Search cards */
.searchresults {display:block; padding-bottom: 20px;} /* Search cards frame; Adds 20px between last card and footer/next element */
.card
  {
    display: inline-block;
    position: relative;
    scroll-snap-align: center;
    box-sizing: border-box;
    padding: 10px 10px;
    height: auto;
    max-height: 300px;
    width: calc(95%);
    background-color: #232a88;
    border-radius: 24px;
    text-align: left;
    margin-top: 20px !important;
    z-index: 1;
  }
.card-contribute
  {
    max-height: fit-content;
    width: auto;
    text-align: center;
  }


  
  .responsive-iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

 /* Style the .message, .success, .error, .warning classes for contribute.php. Add a flash to .success (maybe a time out 1 min too?) for clarity when submitting several videos in a row */

.TitleWidth
  { 
  display: inline-block;
  width: calc(100%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

.ytimg {
  display: inline-block;
  max-width: calc(100%);
  max-height: 320px; /* 244 */
  width: auto;
  height: auto;
  margin-bottom: 0px !important;
  border-radius: 8px;
  object-fit: cover;
  transition: 1s;
  overflow: hidden;
}
.ytimg img {
  display: inline-block;
  max-width: calc(100%);
  max-height: 320px; /* 244 */
  padding-top: 1%;
  margin: -11% 0;
  border-radius: 8px;
  object-fit: cover;
  transition: 1s;
}
.ytimg:hover { border-radius: 0px; transition: 1s;}

.cardReport {
  display: block;
  margin: -2px 8px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  font-stretch: condensed;
  font-size: 12px;
}
.cardReport:link {color:#8a8e91; text-decoration: none;}
.cardReport:visited {color:#8a8e91; text-decoration: none;}
.cardReport:hover {color:#be6b05; text-decoration: none;}
.cardReport:active {color:#be6b05; text-decoration: none;}

/*#endregion searchcards*/
/*#region Playlistcards*/
  .playlist-card {
      /* Inherits basic .card styles */
      background-color: #373d92; /* A slightly different blue */
      border-color: #535bcf; /* Match the textarea border */
      /* Adjust padding or margins if needed */
      margin-top: 20px !important; /* Ensure consistent spacing */
  }

  .playlist-card h4 a {
      color: #EC8305; /* Orange title for playlists */
  }

  .playlist-card .cardReport {
      color: #d6dee1; /* Lighter grey for the "Manage Playlist" link */
  }

  .playlist-card .cardReport:hover {
      color: #ffffff; /* White on hover */
  }

  /* Adjust thumbnail container if needed */
  .playlist-card .ytimg {
      border: 2px solid #161D70; /* Add a border to the thumbnail */
  }
/*#endregion*/
/*#region reportcard */
.repcard {
  background-color: #161D70;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  margin: -20px 0px 0px 0px !important;
  padding-top: 25px;
  z-index: 0 !important;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  margin-top: 2px;
  box-sizing: border-box;
  border: 2px solid #535bcf;
  border-radius: 12px;
  background-color: #373d9277;
  color: white;
  font-size: 16px;
  resize: none;
}
textarea::placeholder {
  color: rgb(191, 196, 236);
}

input[type=submit].RepInlineSubmit
{
  background-color:#2c349e; 
  color: white;
  padding: 3px 12px;
  text-decoration: none;
  margin: 10px 8px -4px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 16px;
}
input[type=submit].RepInlineSubmit:hover {background-color:#434cca;}
input[type=submit].RepInlineSubmit:active {background-color:#434cca;}

/* #endregion reportcard */

/*.answersframe {  //deprecated?
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 1;
  } */

/* #region footer */
footer {
  display: inline-block;
  height: 60px;
  padding-left: 20px;
  padding-right: 20px;
  color: #d6dee1;
  margin: 0 auto;
  margin-top: 2%;
  margin-bottom: 2%;
  border-radius: 24px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
}
.folinks:link {color:#d6dee1; text-decoration: none; transition: 2s;}
.folinks:visited {color:#d6dee1; text-decoration: none;}
.folinks:hover {color:#EC8305; text-decoration: none; transition: 0s;}
.folinks:active {color:#EC8305; text-decoration: none;}

.fodisc {
  margin-top: 4px;
  border-radius: 16px; 
  padding-left: 8px; 
  padding-right: 8px;
  background-color:#373d9277;
}

/* #endregion footer */