/* CSS variable for album card top spacing */
:root {
  --album-card-top-spacing: 20px;
  --album-card-gap: 40px; /* Space between each album card */
}

body {
  font-family: Arial, sans-serif;
  margin: 0px;
  background-color: #f0f0f0;
  overflow-x: hidden;
}

/* Card container and layout */
.page-container {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 90%; /* don’t exceed viewport width */
  box-sizing: border-box; /* Allow wrapping on small screens */
}

.card-section {
  flex: 1 1 400px; /* Grow and shrink, base width 400px */
  max-width: 450px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

h2 {
  color: #64B337;
  text-align: center; /* Center the titles */
  font-size: 32px;
  margin-top: 50px;
}

.cards-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

/* Card faces and flipping */
.card {
  width: 300px;
  height: 500px;
  position: relative;
  perspective: 1000px;
  padding-bottom: 60px;
}

.card-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s;
  position: relative;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card .card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
  box-sizing: border-box;
  font-size: 1em;
  border-radius: 10px;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: opacity 0.3s ease;
}

.card-front {
  z-index: 2;
}

.card-back {
  transform: rotateY(180deg);
  background-color: #eaeaea;
  color: #333;
}

.card-back .back-image {
  width: 50%; /* Make the image span the full width of the card */
  height: auto; /* Maintain the aspect ratio */
  border-radius: 8px; /* Match the card's rounded corners */
  margin-bottom: 10px; /* Add spacing below the image */
  object-fit: cover; /* Ensure the image fits nicely */
  display: block; /* Ensure proper alignment */
}

/* Buttons */
.buttons {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

button {
  flex: 1;
  margin: 0 5px;
  font-size: 1em;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  background-color: #0057b7;
  color: white;
  transition: background-color 0.3s;
  padding: 2px 2px; /* reduce height slightly */
}

button:hover {
  background-color: #003f8a;
}

/* Shared button padding */
.flip-btn, .download-btn, .spotify-btn {
  padding: 4px 5px;
}

/* Download button: black background */
.download-btn {
  background-color: #000000;
}

.spotify-btn {
  background-color: #1db954;
  border-radius: 6px; /* Match the border-radius of other buttons */
  display: inline-flex; /* Ensure proper alignment for the icon */
  align-items: center; /* Center the icon vertically */
  justify-content: center; /* Center the icon horizontally */
}

/* Responsive design */
@media (max-width: 768px) {
  .page-container {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .card-section {
    max-width: 100%;
    width: 100%;
  }
}

/* Custom content styles for the card (title, subtitle, user, etc.) */
.top-row {
  display: flex;
  align-items: center; /* Vertically align items */
  justify-content: space-between; /* Evenly space items */
  gap: 10px; /* Add spacing between elements */
  font-size: 0.8rem;
  font-weight: bold;
  color: #999;
}

.brand {
  font-weight: bold;
  color: #888;
  text-transform: uppercase;
  flex: 1; /* Allow the brand to take up available space */
}

.user-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 8px;
  flex-shrink: 0; /* Prevent the image from shrinking */
}

.user-handle {
  color: #aaa;
  flex: 1; /* Allow the handle to take up available space */
  text-align: right; /* Align the handle to the right */
}

.main-title {
  font-size: 2em;
  font-weight: bold;
  margin: 10px 0 5px;
  color: #000;
}

.subtitle {
  font-size: 1.2em;
  font-weight: bold;
  color: #64B337;
  margin-bottom: 10px;
}

.track-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 100px;
}

.track-title {
  font-weight: bold;
  font-size: 1.1em;
  color: #111;
}

.artist-name {
  font-size: 1em;
  color: #555;
}

.qr-code {
  width: 64px;
  height: 64px;
}

.cover-img img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 3px;
}

.footer-note {
  font-size: 0.85em;
  color: #555;
  margin-top: 0px;
}

.artist-info {
  font-size: 0.85em; /* Slightly smaller font size for better fit */
  line-height: 1.4; /* Adjust line height for readability */
  color: #333; /* Neutral text color */
  text-align: left; /* Align text to the left */
  margin-top: 10px; /* Add spacing at the top */
  overflow-y: auto; /* Enable scrolling if content overflows */
  max-height: 70%; /* Limit the height to fit within the card */
  padding-right: 10px; /* Add padding for better spacing */
}

.artist-info p {
  margin-bottom: 8px; /* Reduce spacing between paragraphs */
}

.toast {
  visibility: hidden;
  min-width: 240px;
  background-color: #1DB954; /* Spotify green */
  background-image: url('assets/spotify-icon.svg');
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 20px;
  padding-left: 48px;
  color: #fff;
  font-weight: bold;
  font-family: sans-serif;
  text-align: center;
  padding: 16px 24px;
  border-radius: 8px;
  position: fixed;
  z-index: 9999;
  bottom: 30px;
  right: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.3s ease-in-out;
  transform: translateY(20px);
}

.toast.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.spotify-icon {
  width: 45px; /* Ensure the width is set */
  height: auto; /* Maintain aspect ratio */
  display: inline-block; /* Ensure the image is displayed */
}

#week-card-2 .track-title {
  font-size: 1em; /* Example: Adjust font size */
  color: black; /* Example: Change color */
}

#week-card-2 .artist-name {
  font-size: .75em; /* Example: Adjust font size */
  color: #555; /* Example: Change color */
}

#week-card-2 .track-row {
  display: flex;
  justify-content: flex-start; /* Align items to the left */
  align-items: center; /* Vertically align items */
  gap: 10px; /* Add spacing between the text and the QR code */
}

#week-card-2 .track-title,
#week-card-2 .artist-name {
  white-space: nowrap; /* Prevent text from wrapping */
/* overflow: hidden; Hide overflowing text */ 
  /* text-overflow: ellipsis; Add ellipsis (...) for overflowing text */
  max-width: calc(100% - 80px); /* Ensure text doesn't overlap the QR code */
}

#week-card-2 .qr-code {
  padding: 0px;
  margin-left: 10px; /* Add space to move the QR code to the right */
}

#week-card-1 .track-title {
  font-size: 1em; /* Match Week Card 2 styling */
  color: black; /* Match Week Card 2 styling */
}

#week-card-1 .artist-name {
  font-size: 0.75em; /* Match Week Card 2 styling */
  color: #555; /* Match Week Card 2 styling */
}

#week-card-1 .track-row {
  display: flex;
  justify-content: flex-start; /* Align items to the left */
  align-items: center; /* Vertically align items */
  gap: 10px; /* Add spacing between the text and the QR code */
}

#week-card-1 .track-title,
#week-card-1 .artist-name {
  white-space: nowrap; /* Prevent text from wrapping */
  max-width: calc(100% - 80px); /* Ensure text doesn't overlap the QR code */
}

#week-card-1 .qr-code {
  padding: 0px;
  margin-left: 10px; /* Add space to move the QR code to the right */
}

#week-card-3 .track-title {
  font-size: 1.1em; /* Match Week Card 2 styling */
  color: black; /* Match Week Card 2 styling */
}

#week-card-3 .artist-name {
  font-size: .8em; /* Match Week Card 2 styling */
  color: #555; /* Match Week Card 2 styling */
}

#week-card-3 .track-row { 
  display: flex;
  justify-content: flex-start; /* Align items to the left */
  align-items: center; /* Vertically align items */
  gap: 10px; /* Add spacing between the text and the QR code */
}

#week-card-3 .track-title,
#week-card-3 .artist-name {
  white-space: nowrap; /* Prevent text from wrapping */
  max-width: calc(100% - 80px); /* Ensure text doesn't overlap the QR code */
}

#week-card-3 .qr-code {
  padding: 0px;
  margin-left: 10px; /* Add space to move the QR code to the right */
}

#week-card-4 .qr-code {
  width: 48px; /* smaller than default 64px */
  height: 48px; /* maintain square aspect */
  padding: 0px;
  margin-left: 0px;
}

#week-card-4 .track-title {
  font-size: .8em;
  color: black;
  white-space: nowrap;
  max-width: calc(100% - 80px);
}

#week-card-4 .artist-name {
  font-size: 0.8em;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 80px);
}

#week-card-4 .track-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

#month-card-2 .track-row {
  display: flex;
  justify-content: flex-start; /* line up text + QR neatly */
  align-items: center;
  gap: 10px; /* space between text and QR */
}

#month-card-2 .qr-code {
  margin-left: 0;  /* remove the -50px override */
  padding: 0;
}

#month-card-2 .track-title {
  font-size: 1.1em; /* Example: Adjust font size */
  color: #111; /* Example: Change color */
}
#month-card-2 .artist-name {
  font-size: 1em; /* Example: Adjust font size */
  color: #555; /* Example: Change color */
}

/* Individual album card adjustments */
#month-card-1 .track-row,
#month-card-2 .track-row,
#month-card-3 .track-row,
#month-card-4 .track-row,
#month-card-5 .track-row,
#month-card-6 .track-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#month-card-1 .qr-code,
#month-card-2 .qr-code,
#month-card-3 .qr-code,
#month-card-4 .qr-code,
#month-card-5 .qr-code,
#month-card-6 .qr-code {
  margin-left: -50px;
  padding: 0;
}

#month-card-1 .track-title,
#month-card-2 .track-title,
#month-card-3 .track-title,
#month-card-4 .track-title,
#month-card-5 .track-title,
#month-card-6 .track-title {
  font-size: 1.1em;
  color: #111;
  white-space: nowrap;
  max-width: calc(100% - 80px);
}
#month-card-2 .track-title,
{  font-size: 1em; /* Example: Adjust font size */}

#month-card-1 .artist-name,
#month-card-2 .artist-name,
#month-card-3 .artist-name,
#month-card-4 .artist-name,
#month-card-5 .artist-name,
#month-card-6 .artist-name {
  font-size: 1em;
  color: #555;
  white-space: nowrap;
  max-width: calc(100% - 80px);
}
#month-card-2 .artist-name,
{  font-size: 1em; /* Example: Adjust font size */
}


/* Styles for week-group and week-label */
.week-group {
  position: relative;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  background-color: white; /* Ensure background is solid */
}

.week-label {
  position: absolute;
  top: -12px; /* Move above the border */
  left: 20px;
  background-color: white; /* Match week-group background */
  padding: 0 8px;
  font-size: 0.9em;
  font-weight: bold;
  color: #64B337; /* Accent color */
}

/* Styles for album-group and album-label */
.album-group {
  position: relative;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  background-color: white; /* Ensure background is solid */
}

.album-label {
  position: absolute;
  top: -12px; /* Move above the border */
  left: 20px;
  background-color: white; /* Match album-group background */
  padding: 0 8px;
  font-size: 0.9em;
  font-weight: bold;
  color: #64B337; /* Accent color */
}

.album-group .cards-list {
  margin-top: var(--album-card-top-spacing);
  display: flex;
  flex-direction: column;
  gap: 40px; /* Fixed value for consistent spacing between album cards */
  align-items: center;
}

.album-group .cards-list .card {
  padding-bottom: 40px; /* Increase space below buttons to prevent overlap */
}


/* General rule for track title and artist name to prevent unnecessary wrapping and ensure max horizontal space */
.track-title,
.artist-name {
  white-space: nowrap;
  max-width: calc(100% - 80px); /* leaves room for QR code */
}

.track-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Week 30 group */
.week30-group,
.week31-group,
.week32-group,
.week33-group,
.week34-group,
.week35-group,
.week36-group
 {
  position: relative;
  border: 2px solid #64B337;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Adjust this value to control spacing between cards */
  width: 100%; /* full width for visible border */
  box-sizing: border-box; /* include padding in width */
}

.week30-group .week-label,
.week31-group .week-label,
.week32-group .week-label,
.week33-group .week-label,
.week34-group .week-label,
.week35-group .week-label,
.week36-group .week-label 
{
  position: absolute;
  top: -12px;
  left: 20px;
  background-color: white;
  padding: 0 8px;
  font-size: 0.9em;
  font-weight: bold;
  color: #64B337;
}

.week34-group {
  position: relative;
  border: 2px solid #64B337;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Spacing between cards */
  width: 100%; /* Full width for visible border */
  box-sizing: border-box; /* Include padding in width */
}

.week34-group .week-label {
  position: absolute;
  top: -12px;
  left: 20px;
  background-color: white;
  padding: 0 8px;
  font-size: 0.9em;
  font-weight: bold;
  color: #64B337;
}

.week-card:nth-child(-n+3) {
  position: relative;
  border: 2px solid #64B337;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: white;
}

/* Remove overlapping borders for a continuous look */
.week-card:nth-child(2),
.week-card:nth-child(3) {
  border-top: none;
}

/* Optional: spacing inside the wrapper */
.week-card:nth-child(-n+3) .card-inner {
  margin-bottom: 10px;
}

.week30-container {
  border: 2px solid #64B337; /* Add a border around the group */
  border-radius: 8px; /* Round the corners */
  padding: 16px; /* Add padding inside the box */
  margin: 20px 0; /* Add spacing above and below the box */
  position: relative; /* Position for the label */
}

.week-label {
  position: absolute;
  top: -12px; /* Position the label above the box */
  left: 16px; /* Align the label with the box padding */
  background-color: #fff; /* Match the background color */
  padding: 0 8px; /* Add padding around the text */
  font-weight: bold; /* Make the text bold */
  font-size: 1em; /* Adjust the font size */
  color: #333; /* Text color */
}

.month-group-1,
.month-group-2,
.month-group-3 {
  position: relative;
  border: 2px solid #64B337; /* Add green border */
  border-radius: 8px; /* Round the corners */
  padding: 20px; /* Add padding inside the box */
  margin: 20px 0; /* Add spacing above and below the box */
  background-color: white; /* Ensure background is solid */
  display: flex;
  flex-direction: column;
  gap: 20px; /* Spacing between cards */
  width: 100%; /* Full width for visible border */
  box-sizing: border-box; /* Include padding in width */
}

.month-group-1 .cards-list,
.month-group-2 .cards-list,
.month-group-3 .cards-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px; /* Adjust this value to control spacing between month cards */
}

.month-group-1 .month-label,
.month-group-2 .month-label,
.month-group-3 .month-label {
  position: absolute;
  top: -12px; /* Position the label above the box */
  left: 20px; /* Align the label with the box padding */
  background-color: white; /* Match the background color */
  padding: 0 8px; /* Add padding around the text */
  font-size: 0.9em; /* Adjust the font size */
  font-weight: bold; /* Make the text bold */
  color: #64B337; /* Green text color */
}

.anchor-link {
  display: inline-block;
  margin-top: 8px;
  color: #1DB954; /* Spotify green */
  text-decoration: none;
  font-weight: bold;
}

.anchor-link:hover {
  text-decoration: underline;
}

.anchor-link.button-style {
  display: inline-block;
  background-color: #1DB954; /* Spotify green */
  color: white;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 6px; /* Rounded corners */
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.anchor-link.button-style:hover {
  background-color: #159441; /* Darker green on hover */
}

.share-btn {
  background-color: white; /* Spotify green */
  color: #1DB954;
  border: #1DB954 2px solid;
  padding: 4px 5px; /* Match the padding of other buttons */
  border-radius: 6px; /* Keep the rounded corners consistent */
  cursor: pointer;
  font-size: 1em; /* Match the font size of other buttons */
  margin: 0 5px; /* Add consistent spacing between buttons */
  height: 54px; /* Set a fixed height to match other buttons */
  display: flex;
  align-items: center; /* Center the text vertically */
  justify-content: center; /* Center the text horizontally */
}

.share-btn:hover {
  background-color: #e7e7e7; /* Darker green on hover */
}

/* Hamburger Menu */
.hamburger-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #1DB954; /* Spotify green */
  color: white;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.menu-icon {
  font-size: 1.5em;
  cursor: pointer;
}

.close-icon {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: white;
  cursor: pointer;
  z-index: 1000;
}

.close-icon::before,
.close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: white;
  transform-origin: center;
}

.close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg); /* First diagonal line */
}

.close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg); /* Second diagonal line */
}

.menu-content {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-x: hidden;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Dark overlay */
  color: white;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.menu-content.active {
  display: flex;
}

.menu-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.menu-content ul li {
  margin: 15px 0;
}

.menu-content ul li a {
  color: white; /* Default color for menu items */
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
}

.menu-content ul li a:hover {
  text-decoration: underline;
}

/* Submenu hidden by default */
.submenu {
  display: none;
  list-style: none;
  padding-left: 20px; /* Indent submenu items */
  margin: 0;
}

/* Submenu visible when active */
.submenu.active {
  display: block;
}

/* Style for submenu items */
.submenu li {
  margin: 10px 0;
}

.submenu li a {
  color: white; /* Default submenu item color */
  text-decoration: none;
  font-size: 0.9em;
}

.submenu li a:hover {
  text-decoration: underline;
}

#menu-music {
  font-size: 1.5em; /* Make the font larger */
  color: #1DB954; /* Spotify green */
  font-weight: bold; /* Make the text bold */
  text-transform: uppercase; /* Optional: Make the text uppercase */
}

#weeks-menu,#months-menu {
  font-size: 1.3em; /* Slightly smaller than "Music" */
  color: whitesmoke; /* Default color for other menu items */
  font-weight: bolder; /* Make the text bold */
}

#weeks-menu:hover,#months-menu:hover {
  color: #FFC107; /* Change color on hover */
  text-decoration: underline; /* Optional: Make the text uppercase on hover */
}

.banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #1db954;
  color: #000;
  text-align: center;
  padding: 10px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.banner.hidden {
  display: none;
}

.banner p {
  margin: 0;
}

.banner a {
  color: #000;
  font-weight: bold;
  text-decoration: underline;
}

.banner button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}