/* Existing styles (keep these) */
body {
  font-family: "rift", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000000;
    background-image: url("./assets/bg_eurovision.png");
    background-position: top;
    background-size: auto;
    min-height: 100vh;
   
    color: #333;
}

header {
    background-color: #000000;
    overflow: hidden;
    color: white;
    font-family: "rift", sans-serif;
    text-align: center;
    position: relative; /* Needed for absolute positioning of the nav */
}
/*Style the tab buttons in the header*/
#tab-nav {
    display: flex; /*Use flex to arrange the buttons horizontally */
    justify-content: space-around; /*Center the buttons */
    /*position: absolute;   Remove the absolute positioning */
    /*bottom: 0;   Remove the bottom positioning */
    /*left: 0;   Remove the left positioning */
    width: 100%;
    /* max-width: calc(100vw - 20px); */
    background-color: #FF2FA5; /*Optional background for visibility*/
    padding: 8px 10px;
    gap: 5px;
    font-family: "rift", sans-serif;
  }
  
  .tab-nav-button {
    background-color: transparent;
    color: white;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 100px;
    text-transform: uppercase;
    font-size: 13px;
    font-family: "rift", sans-serif;
    line-height: 14px;
  }

  .tab-nav-button.extra{
    background-color: #00aeff!important;
  }
  
  .tab-nav-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
  }
  
  .tab-nav-button.active {
    background-color: rgba(255, 255, 255, 0.2);
  }

 
  #table_owner {
color: #FF2FA5;
text-align: center;
padding-bottom: 0px;
padding-top: 20px;
margin: 0;
font-size: 20px;
font-style: italic;
  }

  .table_owner {
    color: #FF2FA5;
    text-align: center;
    padding-bottom: 0px;
    padding-top: 20px;
    margin: 0;
    font-size: 20px;
    font-style: italic;
      }

  .leaderboard_title{
color: white;
text-align: center;
padding-bottom: 0px;
padding-top: 0px;
margin: 0;
font-size: 32px;
  }

main {
    padding: 20px;
    padding-top: 0px;
}

#act-container {
    display: grid; /* Use Grid for the layout */
    grid-template-columns: repeat(2, 1fr); /* Explicitly create two columns */
    gap: 5px /* Space between act divs */
}

.act {
    display: flex; /* Use Flexbox for horizontal layout */
    align-items: center; /* Vertically align items in the center */
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #ddd;
    background-color: white;
    border-radius: 5px;
    text-align: left; /* Align text to the left within the act card */
    justify-content: space-between;
}

/* Flags */
.act img.flag {
    width: 50px; /* Adjust the flag size as needed */
    height: 50px;
    border: solid 1px #f9f9f9;
    object-fit: cover; /* Ensures the whole flag is visible */
    border-radius: 50%; /* Make the flag round */
    margin-right: 10px; /* Space between the flag and text */
}

.act .song-artist {
    display: flex;
    flex-direction: column; /* Stack song and artist names */
    margin-right: 10px; /* Space between song/artist and the form */
}

.act .song-artist p {
    margin: 0; /* Remove default paragraph margins */
}
.score_form{
    display: flex;
    flex-direction: row; /* Keep this row direction */
    gap: 10px; /* Add some space between score items*/
}

.score-item {
    display: flex;          /* Make each item a flex container */
    flex-direction: column;   /* Stack label and input vertically */
    align-items: center;   /* Horizontally center the contents */
    font-size: 12px;
}

.score-item label {
    text-align: center;  /* Center the label text */
    margin-bottom: 2px;  /* Space between label and input */
}

.score-item input[type="number"] {
  width: 50px;
  padding: 5px;
  margin-bottom: 0px; /*remove margin to make it neater */
}

.act_div_left{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="number"] {
    width: 50px;
    padding: 5px;
    margin-bottom: 10px;
}

button {
    background-color: #FF2FA5;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #FF2FA5;
    color: white;
}

#username-input {
    margin-bottom: 20px;
}

/* Style for the tab content (hide by default) */
.tab-content {
    display: none;
}

/* Show the active tab content */
.tab-content.active {
    display: block;
}

#leaderboard-table {

    max-width: 400px;

}

/* Authentication UI */
#auth-status {
    text-align: right;
    padding: 0.5rem;
    display: flex; /* Use flexbox to align items horizontally */
    align-items: center; /* Vertically align items */
    justify-content: flex-end; /* Push items to the right */
    display: none;
  }
  
  #auth-status button {
    margin-left: 0.5rem;
    cursor: pointer;
  }
  
  #username-display {
    margin-right: 1rem;
    font-weight: bold;
  }
  
  #auth-forms {
    margin-top: 20px;
    padding: 1rem;
    padding-top: 0;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    color: #000000;
    display: flex;
    justify-content: right;
    position: relative;
  }
  
  #auth-forms form {
    display: flex;
    flex-direction: column;
    align-items:flex-end;
    justify-content: right;
    gap: opx;
    margin: 0 auto;
  }
  
  #auth-forms label {
    margin-top: 0.5rem;
  }
  
  #auth-forms input {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  #auth-forms-close-btn {
    position: absolute;
    top: 20px;
    left: 20px;
  }

  .flex_form{
    display: flex;
    flex-direction: row!important;
    gap: 8px;
  }

  #login-required-submit{
    color: white;
  }

  .not_logged_in_text{
    color: white;
    margin: auto;
    margin-bottom: 20px;
    text-align: center;
  }

  #myScoresTableBody{
    max-width: 500px;
    width: 100%;
    margin: auto;
    margin-top: 20px;
  } 

  .get_access_button{
    margin: auto;
    font-style: italic;
    font-family: "rift", sans-serif;
  }

  #login-required-my-leaderboard{
    display: flex;
    flex-direction: column;
  }

  #loading_gif{
    height: 35px;
    width: 35px;
    margin-left: 12px;
    display: none;
  }

  /* General container for each score entry */
#score_wrapper {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Distribute space evenly between the two main wrappers */
    align-items: center; /* Vertically align the inner wrappers */
    width: 100%; /* Adjust as needed, likely to take up the full width of its parent */
    margin-bottom: 5px; /* Add space below each entry */
    border-bottom: 1px solid #eee; /*  Optional:  Add a separator line */
    padding-bottom: 5px;
  }
  
  /* Wrapper for position, country icon, and text (country name and song) */
  .score_inner_wrapper1 {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align the elements */
    gap: 5px;
  }
  
  /* Wrapper for vertical text (country and song) */
  .vert_wrapper_leaderboard {
    display: flex;
    flex-direction: column; /* Stack the text vertically */
    margin-left: 10px; /*  Space between icon and text */
  }
  
  /* Style for the country name */
  .vert_wrapper_leaderboard p:first-child { /*  First <p> element (Country Name) */
    font-weight: bold; /* Make the country name bold */
    margin: 0; /* Remove default margins */
    font-size: 1.3em; /*  Slightly larger font */
    margin-top: 1px;
    text-transform: uppercase;

  }
  
  /* Style for the song name */
  .vert_wrapper_leaderboard p:last-child { /* Second <p> element (Song Name) */
    margin: 0; /* Remove default margins */
    font-size: 1.1em; /*  Slightly smaller font */
    color: #ffffff; /*  Slightly muted color */
    font-weight: 300;
    text-transform: uppercase;

  }

  
  /* Style for the position */

  .score_wrapper {
    background: #000000;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(255, 46, 165, 1) 100%);
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    margin: 0;
    border-radius: 5px;
    margin-bottom: 5px;
  }

  .gold{
    background: linear-gradient(90deg, #AE8030 0%, #FAECA3 100%)!important;
  }

  .silver{
    background: linear-gradient(90deg, #939297 0%, #E8E8E8 100%)!important;
  }

  .bronze{
    background: linear-gradient(90deg, #9A5739 0%, #E19266 100%)!important;
  }


  .position {
    width: 28px;
    text-align: center;
font-size: 24px;
    margin: 0;
    /* Add styling for the position icon/number here */
    /*  e.g., background-image: url('position_icon.png');  */
    /* Or:   text-align: center; font-weight: bold; */
  }
  
  /* Style for the country icon */
  .country_icon {
    width: 28px;
    height: 28px;
    /* Add styling for the country icon here */
    /*  e.g., background-image: url('czech_flag.png');  */
    background-image: url("./assets/Flag_of_Belgium.png");
    background-size: contain; /*  Important to fit the image */
    background-repeat: no-repeat;
    background-position: center;
  }
  
  
  /* Wrapper for the score */
  .score_inner_wrapper2 {
    /* Add styling for the score wrapper if needed */
  }
  
  /* Style for the score text */
  .score {
    font-size: 1.2em;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    padding-right: 12px;
    /* Add styling for the score text */
  }

  #leaderboardTableBody{
    max-width: 500px;
    width: 100%;
    margin: auto;
  }


  .expando_scorecard_wrapper{
    background: #00C2EF;
   
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    margin: 0;
    border-radius: 5px;
    margin-bottom: 5px;
  }

  .expand_score_card_button{
    width: 28px;
    height: 28px;
    background-image: url('./assets/expando_div.svg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
cursor: pointer;
  }

  /* --- Container for all act cards --- */
#act-container {
  max-width: calc(100vw - 80px); /* Or your desired max width */
  width: 100%;
  margin: 20px auto; /* Centering and spacing */
}

/* --- Main wrapper for each individual act entry --- */
.act-entry-card {
  background: #00C2EF; /* Example gradient, adjust to your preference for acts */
  color: white;
  border-radius: 5px;
  margin-bottom: 0px; /* Space between cards */
  overflow: hidden; /* Important for the slide down effect to not show tray early */
}

/* --- The always visible header part of the card --- */
.act-visible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px; /* Padding inside the visible part */
  cursor: pointer; /* Indicate the whole header can be clicked to expand */
}

/* --- Left block containing flag and text details --- */
.act-info-block {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between elements in this block */
}

/* --- Act country flag --- */
.act-country-flag {
  width: 32px; /* Adjust size */
  height: 32px; /* Adjust size */
  border-radius: 3px; /* Slightly rounded corners for the flag */
  object-fit: cover; /* Ensure flag image covers the area */
}

/* --- Vertical text details (country, song/artist) --- */
.act-text-details {
  display: flex;
  flex-direction: column;
}

.act-text-details p {
  margin: 0;
  line-height: 1.3;
}

.act-country-name {
  font-weight: bold;
  font-size: 1.3em;
  text-transform: uppercase;
  color: #ffffff; /* Bright white for country */
}

.act-song-artist-details {
  font-size: 1.1em;
  font-weight: 300;
  text-transform: uppercase;
  color: #ffffff; /* Slightly dimmer white for song/artist */
}

/* --- Expand/Collapse Button --- */
.act-expand-button {
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent white button */
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 5px 8px; /* Smaller padding */
  border-radius: 50%; /* Make it circular */
  cursor: pointer;
  background-image: url("./assets/down_arrow.svg");
  background-position: center;
  background-size: 15px;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; /* Fixed width */
  height: 30px; /* Fixed height */
  transition: background-color 0.2s ease, transform 0.3s ease-out;
}



.act-expand-arrow {
  font-size: 1em; /* Arrow size */
  display: inline-block;
  transition: transform 0.3s ease-out;
}

/* --- Styling for the expandable scoring tray --- */
.act-scoring-tray {
  background-color: rgba(0, 0, 0, 0.2); /* Slightly darker, semi-transparent background for the tray */
  padding: 0 10px; /* Horizontal padding, vertical padding applied on expand */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding-top 0.4s ease-out, padding-bottom 0.4s ease-out;
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle top border for separation */
}

/* --- State when the card is expanded --- */
.act-entry-card.is-expanded .act-scoring-tray {
 
  max-height: 400px; /* Adjust to fit form content */
  padding-top: 20px;
  padding-bottom: 20px;
}

.act-entry-card.is-expanded .act-expand-arrow {
  /* transform: rotate(180deg); Point arrow up */
}
.act-entry-card.is-expanded .act-expand-button {
  /* Optional: change button style when expanded */
  /* background: rgba(255, 255, 255, 0.25); */
  transform: rotate(180deg); /* Point arrow up */
}


/* --- Form styling within the tray --- */
.act-score-input-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.criterion_total_wrapper{
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.act-score-criterion {
  display: flex;
  align-items: left;
  flex-direction: column;
  width: 100%;
  gap: 2px;
  color: #f0f0f0; /* Light text for labels */
}

.act-score-criterion label {
 
  text-align: left;
  font-size: 0.9em;
  text-transform: uppercase;
}

.act-score-criterion input[type="number"] {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgb(255, 255, 255);
  color: rgb(38, 38, 38);
  border-radius: 0px;
  flex-grow: 1; 
  text-align: center;
  width: calc(100% - 20px);
  margin-bottom: 0;
}
.act-score-criterion input[type="number"]::placeholder {
  color: #bbb;
}

/* --- Submit Button --- */
.act-submit-button {
  background: #FF2EA5; /* Your pink gradient accent color */
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(255, 46, 165, 1) 100%);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 20px;
  min-height: 40px;
  width: 100%;
  font-weight: bold;
  text-transform: uppercase;
  font-style: italic;
  align-self: flex-start; /* Or center, or stretch */
  margin-top: 0px; /* Space above the button */
  transition: filter 0.2s ease;
}

.act-submit-button:hover {
  filter: brightness(1.1); /* Make it slightly brighter on hover */
}

  #score_container{
    max-width: 500px;
    margin: auto;
  }

  .leamington-leaderboard-background{
width: calc(100% + 40px);
height: 340px;
top: -40px;
left: -20px;
position: absolute;
background-image: url('./assets/Group22.jpeg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
}

.leaderboard-grad{
  background: linear-gradient(180deg,rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 100%);
  width: 100%;
  height: 100%;
}

  #leamington-leaderboard{
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .leam_score_logo{
    min-width: 180px;
    width: 50%;
    max-width: 225px;
    height: auto;
    margin: auto;
    display: block;
    margin-top: 40px;
  }

  .holding_div{
    color: black;
    background-color: #FF2FA5;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-width: 300px;
    margin: auto;
  }
  
/* --- Keep your existing CSS for .act-score-criterion, labels, etc. --- */

/* --- Wrapper for the select and custom arrow --- */
.custom-select-wrapper {
  position: relative; /* For positioning the custom arrow absolutely */
  display: inline-block; /* Or block, depending on layout needs */
  /* Adjust width as needed, or let it be determined by the select element */
  /* width: 80px; */
  width: 100%;
}

/* --- Style the native select element --- */
.custom-select-wrapper select {
  /* Appearance is key to hiding the native arrow (works in WebKit/Blink) */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "rift", sans-serif;
  font-weight: 900;
  /* Your existing input styling, adapted for select */
  padding: 8px 40px 8px 8px; /* Add padding-right for custom arrow space */
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgb(255, 255, 255);
  color: white;
  border-radius: 0px;
  text-transform: uppercase;
  min-height: 50px;
  width: 100%; /* Or a fixed width, e.g., 70px, or let it auto-size */
  text-align: left;
  
  cursor: pointer;
  font-size: 0.9em; /* Match other inputs if needed */

  /* Remove focus outline if you have custom focus styles */
  /* outline: none; */
}

/* For Firefox, -moz-appearance:none might not fully hide the arrow.
   Sometimes a very wide border-right with the same color as the background
   or a very large padding-right is used as a workaround, but it's hacky.
   The most reliable way for FF is a fully custom JS dropdown.
   This CSS will at least overlay our custom arrow.
*/
.custom-select-wrapper select::-ms-expand {
  display: none; /* Hide arrow in IE/Edge */
}


/* --- Style the custom arrow --- */
.custom-arrow {
  /* position: absolute;
  top: 50%;
  right: 10px; /* Position from the right edge of the wrapper */
  /* transform: translateY(-50%);
  pointer-events: none; /* So clicks pass through to the select */
  /* width: 0;
  height: 0; */ 
  /* Create a triangle arrow using borders */
  /* border-left: 5px solid transparent;   /* Adjust size for thicker/thinner arrow */
  /* border-right: 5px solid transparent; */
  /* border-top: 6px solid #000000;      Color of the arrow (white in this case) */
  /* transition: transform 0.2s ease-in-out; For open/close animation if possible */
}

.custom-arrow {
  position: absolute;
  top: 0%;
  right: 0px; /* Position from the right edge of the wrapper */

  pointer-events: none; /* So clicks pass through to the select */
  width: 40px;
  height: 100%;
  background-color: #000000;
  background-image: url("./assets/down_arrow.svg");
  background-position: center;
  background-size: 30%;
  background-repeat: no-repeat;
  
  transition: transform 0.2s ease-in-out; /* For open/close animation if possible */
}

/* Optional: Change arrow direction when select is focused (pseudo :active or :focus)
   This is tricky because the :focus is on the select, not the wrapper or arrow directly
   in a way that's easy to style the arrow without JS.
   For a visual cue on open, JS would be needed to add a class to the wrapper.
*/
/*
.custom-select-wrapper select:focus + .custom-arrow,
.custom-select-wrapper.is-open .custom-arrow { // if using JS to add .is-open
  transform: translateY(-50%) rotate(180deg);
}
*/

/* Style the options if needed (limited styling possible) */
.custom-select-wrapper select option {
  background-color: #333; /* Dark background for options */
  color: white;
  
}

/* --- Adjust .act-score-criterion if necessary --- */
.act-score-criterion {
  display: flex;
  align-items: left;

  color: #f0f0f0;
}

.act-score-criterion label {
 
  text-align: left;
  font-size: 1.1em;
  flex-shrink: 0; /* Prevent label from shrinking */
}

/* --- Keep your existing CSS --- */

/* Style the placeholder option itself within the dropdown list */
.custom-select-wrapper select option.placeholder-option {
  text-align: left;
  color: #999; /* Lighter color for the placeholder text in the list */
  /* font-style: italic; /* Optional: italicize */
}

/* Style the select element when its placeholder option is selected */
.custom-select-wrapper select.placeholder-active {
  text-align: left;
  color: #7B7B7B /* Lighter text color for the displayed placeholder */
  /* font-style: italic; /* Optional */
}

/* Ensure normal options and selected value have the desired color */
.custom-select-wrapper select {
  text-align: left;
  font-weight: 300;
  font-style: italic;
  /* ... your existing select styles ... */
  color: #7B7B7B/* Default color for selected actual values */
}

/* If you want the select to look different when a real value is selected vs placeholder */
.custom-select-wrapper select:not(.placeholder-active) {
  font-style:normal;
  font-weight: 900;
  font-size: 24px;
  text-align: left;
  color: #000000; /* Or your desired color for actual selected values */
  /* font-style: normal; */
}
/* --- Styling for Submit Score Categories --- */
#act-container {
  display: flex; /* Changed from grid to flex for overall layout */
  flex-direction: row;
  gap: 30px; /* Space between "Scored" and "To Score" sections */
  /* max-width: 600px; remove or adjust as new containers will manage width */
  /* width: 100%; */
  /* margin: 20px auto; */
}

.submit-score-category {
/* Add any specific styling for the category wrapper if needed */
width: 100%; /* Make category take full width of its parent */
}

.submit-score-subheader {
color: white;
font-size: 24px;
text-align: center;
text-transform: uppercase;
margin-bottom: 15px;
padding-bottom: 5px;
font-weight: 300;
}

/* This class is now on the divs INSIDE #act-container */
.acts-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Your original grid for act cards */
  gap: 5px; /* Adjusted gap slightly, use your preferred value */
  max-width: 600px; /* Max width for the grid itself */
  margin: 0 auto; /* Center the grid */
}

/* --- Styling for act-entry-card when already scored --- */
.act-entry-card.already-scored-act {
/* Change background to indicate it's scored */
background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(255, 46, 165, 1) 100%);
/* Or a different gradient: */
/* background: linear-gradient(90deg, #e02691 0%, #b32075 100%); */
opacity: 0.9; /* Optional: slightly less emphasis */
}

/* Optional: Change expand button style for scored acts */
.act-entry-card.already-scored-act .act-expand-button {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.4);
background-image: url("./assets/tick.svg");
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}


.act-entry-card.is-expanded.already-scored-act .act-expand-button {
  transform: rotate(0deg); /* Point arrow up */

}


/* Optional: Change the text of the submit button if it's an update */
.act-entry-card.already-scored-act .act-submit-button {
/*background: linear-gradient(90deg, #00aeff 0%, #0076a3 100%); */
background: #00aeff;
}

.no-scores-message { /* Style for messages in empty containers */
color: #ccc;
text-align: center;
padding: 10px;
font-style: italic;
grid-column: 1 / -1; /* Make message span all columns if parent is grid */
}

.auth-forms-close-btn{
  font-size: 22px;
}

#login-pswrdless-btn{
  margin-right: 12px;
}


/* --- Styles for .act-visible-header and its children --- */
.act-visible-header {
  display: flex;
  justify-content: space-between; /* Pushes .act-info-block left, .act-header-right-controls right */
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
}

/* New wrapper for the right side controls */
.act-header-right-controls {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between score display (if present) and expand button */
}

/* Styling for the score displayed on the card (when scored) */
.act-score-display-on-card {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between score text and pencil icon */
  background-color: rgba(0, 0, 0, 0.2); /* Optional: subtle background for the score display */
  padding: 4px 8px;
  border-radius: 4px;
}

.user-total-score {
  font-family: "rift", sans-serif; /* Assuming you want rift font */
  font-weight: 700; /* Bold score */
  font-size: 1.1em; /* Make score prominent */
  color: #ffffff; /* White score text */
}

.edit-score-icon-header {
  width: 12px; /* Adjust size of pencil icon */
  height: 12px;

}

.signup-popup-container {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.signup-popup-content {
  background-color: #FF2EA5;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 40px;
  border-radius: 5px;
  width: 80%; /* Could be more or less, depending on screen size */
  position: relative; /* For positioning the close button */
  max-width: 600px;
  display: flex;
}

.signup_popup_wrapper{
  display: flex;
  flex-direction: column;
}

.signup_popup_wrapper ol{
padding-top: 0px;
margin-top: 0;
}


#signup-pswrdless-form{
  width: 45%;
  margin-left: 40px;
}

#signup-pswrdless-form h2 {
  margin-top: 0px;
}

/* Close button style */
.signup-popup-close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  color: #ffffff;
}

.signup-popup-close-button:hover,
.signup-popup-close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}



ol li {
  margin-bottom: 10px;
}

/* Signup form style */
.signup-form {
  margin-top: 20px;
}

.signup-popup-content ol {
  padding-left: 10px;
}

.signup-form label {
  display: block;
  margin-bottom: 5px;
}

.signup-form input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* Make sure padding and border are included in the width */
}

.signup-form button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
}

.signup-form button:hover {
  background-color: #3e8e41;
}

#signup-pswrdless-form button {

  background-color: #000000;

}

#signup-pswrdless-form input {

  min-height: 30px;
  width: 100%;
  max-width: 300px;


}





/* Media query for smaller screens (mobile) */
@media screen and (max-width: 600px) {
  .signup-popup-content {

    margin: 30% auto; /* Adjust margin as needed */
  }

  .signup-popup-content {
   padding: 40px 20px;
    flex-direction: column;
  }

  #signup-pswrdless-form {
    width: 95%!important;
    margin-left: 0!important;
  }
}

/* --- Mobile Styles (up to 767px) --- */
@media (max-width: 767px) {
  .acts-grid-container {
      grid-template-columns: 1fr; /* Stack acts into a single column */
  }
  /* Your other mobile styles for .act-entry-card elements will apply within this grid */
}

/* --- Tablet Styles (768px to 991px) --- */
@media (min-width: 768px) and (max-width: 991px) {
  .acts-grid-container {
      grid-template-columns: 1fr; /* Still single column for tablets, or repeat(2,1fr) if space allows */
  }
}
/* Media Queries for Responsiveness */

/* Mobile Styles (up to 767px) */
@media (max-width: 767px) {
    #act-container {
        grid-template-columns: 1fr;
        max-width: 600px;
        flex-direction: column; /* Stack acts into a single column */
    }

    .act {
        flex-direction: column; /* Stack flag, song/artist, and form vertically */
        align-items: center;
        text-align: center;
    }

    .act_div_left{
        flex-direction: column;
    }

    .act img.flag {
        margin-bottom: 10px;
        margin-right: 0; /* Reset margin */
    }

    .act .song-artist {
        margin-right: 0; /* Reset margin */
        margin-bottom: 10px;
    }

    .score_form {
        flex-direction: column; /* Stack score items vertically */
        align-items: center;
    }

    .score-item {
        margin-bottom: 10px;
    }

    .score-item input[type="number"] {
        width: 80px; /* Make input wider on mobile */
    }

    #auth-forms form {
        max-width: 100%; /* Let the form take the full width */
    }

    .auth-forms-close-btn {
      position: absolute;

  
  
      border: none;
      font-size: 24px;
      font-weight: bold;
 
      cursor: pointer;

      line-height: 1;
    }
    .auth-forms-close-btn:hover {
      color: #333;
    }

    #tab-nav{
        flex-direction: column;
    }
}

/* --- Custom Notification Styling --- */
.custom-notification {
  position: fixed; /* Fixed position so it stays on screen during scroll */
  /* --- For TOP placement --- */
  bottom: -100px; /* Start off-screen above */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  /* --- OR For BOTTOM placement --- */
  /* bottom: -100px; /* Start off-screen below */
  /* left: 50%; */
  /* transform: translateX(-50%); */

  background-color: #333; /* Default dark background */
  color: white;
  padding: 12px 25px;
  border-radius: 25px; /* Lozenge shape */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Ensure it's on top of other content */
  opacity: 0;
  transition: top 0.5s ease-in-out, bottom 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transitions */
  font-family: "rift", sans-serif; /* Use your desired font */
  font-size: 0.9em;
  text-align: center;
  min-width: 200px; /* Minimum width */
  max-width: 80%; /* Maximum width */
}

/* States for visibility */
.custom-notification.show {
  opacity: 1;
  /* --- For TOP placement --- */
  bottom: 20px; /* Slide down to this position */
  /* --- OR For BOTTOM placement --- */
  /* bottom: 20px; /* Slide up to this position */
}

/* Different types of notifications (optional) */
.custom-notification.success {
  background-color: #4CAF50; /* Green for success */
  color: white;
}

.custom-notification.error {
  background-color: #f44336; /* Red for error */
  color: white;
}

.custom-notification.info {
  background-color: #2196F3; /* Blue for info */
  color: white;
}


.custom-notification-close {
  position: absolute;
  top: 5px;
  right: 10px;
  background: none;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}


/* Tablet Styles (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #act-container {
        grid-template-columns: repeat(1, 1fr); /*Stack act into a single column */
    }

    .act {
        flex-direction: row; /* Keep acts in rows */
        align-items: center;
        text-align: left;
    }

    .score_form {
        flex-direction: row; /* Keep score items in rows */
    }

    #auth-forms form {
        max-width: 500px; /* Adjust width on tablet */
    }

    .score-item input[type="number"] {
        width: 50px; /* Set it smaller on tablets so all fits in the row */
    }

}


/* Tablet Styles (768px to 991px) */
@media (min-width: 250px) and (max-width: 768px) {

  #login-pswrdless-btn{
    margin-right: 0px;
    margin-bottom: 12px;
  }


    #tab-nav{
        flex-direction: row;
    }
}