/* style.css */

:root {
    /* More vibrant Spotify-inspired theme */
   --spotify-green: #1DB954;
   --spotify-green-dark: #168239;
   --spotify-green-light: #2de06d; /* Lighter green for interactive elements */
   --spotify-black: #191414;
   --spotify-dark-gray: #282828; /* Darker gray for some backgrounds */
   --text-primary: #FFFFFF;
   --text-secondary: #B3B3B3;
   --bg-gray: #121212;  /* Even darker gray for a deeper contrast */
   --bg-light-gray: #212121;  /*  */
   --border-color: #3E3E3E; /* A bit lighter border for subtle separation */
   --highlight-color: #4CAF50;
   --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.4); /* Stronger shadows */
   --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.5);
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: 'Inter', sans-serif;
   line-height: 1.6;
   color: var(--text-primary);
   background-color: var(--spotify-black);
   overflow-x: hidden;
   position: relative; /* Needed for wave positioning */
}

.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
}

/* Header */
.header {
    background: rgba(25, 20, 20, 0.9);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   position: sticky;
   top: 0;
   z-index: 100;
   padding: 1rem 0;
   border-bottom: 1px solid var(--border-color);
}

.header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   text-decoration: none;
   color: var(--text-primary);
   font-weight: 700;
   font-size: 1.25rem;
}

.logo img {
   border-radius: 50%;
}

.nav {
   display: none; /* Hidden on mobile */
}

.nav a {
   text-decoration: none;
   color: var(--text-secondary);
   font-weight: 500;
   transition: color 0.3s ease;
   padding: 0.5rem 1rem;
   display: inline-block;
}

.nav a:hover {
   color: var(--spotify-green);
}

.mobile-nav a:hover {
   color: var(--spotify-green);
}

.button {
   display: inline-block;
   padding: 0.75rem 1.5rem;
   border-radius: 25px;
   font-weight: 600;
   text-decoration: none;
   transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; /* Add box-shadow transition */
}

.button-primary {
   background-color: var(--spotify-green);
   color: white;
}

.button-primary:hover {
   background-color: var(--spotify-green-dark);
   transform: scale(1.05);
    box-shadow: 0 0 10px var(--spotify-green-light); /* Interactive glow */
}

.button-secondary {
   background-color: transparent;
   border: 2px solid var(--spotify-green);
   color: var(--spotify-green);
}

.button-secondary:hover {
   background-color: var(--spotify-green);
   color: white;
   transform: scale(1.05);
   box-shadow: 0 0 10px var(--spotify-green-light);
}

/* Mobile Menu Button */
.mobile-menu-button {
   background: none;
   border: none;
   cursor: pointer;
   color: var(--text-primary);
   display: block; /* Show on mobile */
}

.mobile-menu-button svg {
   width: 24px;
   height: 24px;
}

/* Mobile Navigation */
.mobile-nav {
   display: none; /* Hidden by default */
   position: fixed;
   top: 60px;
   left: 0;
   width: 100%;
  background-color: rgba(25, 20, 20, 0.95);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   padding: 1rem;
   z-index: 99;
}

.mobile-nav.open {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.mobile-nav a {
   display: block;
   padding: 0.75rem;
   text-decoration: none;
   color: var(--text-secondary);
   font-weight: 500;
   transition: color 0.3s ease;
   width: 100%;
   text-align: center;
}

/* Hero Section */
.hero {
   padding: 6rem 0;
   text-align: center;
}

.hero-container {
   display: grid;
   grid-template-columns: 1fr;
   gap: 3rem;
   align-items: center;
}

.hero-content {
   order: 2;
}

.hero-title {
   font-size: 3.5rem;
   font-weight: 800;
   margin-bottom: 1.5rem;
   line-height: 1.2;
}

.hero-subtitle {
   font-size: 1.25rem;
   color: var(--text-secondary);
   margin-bottom: 2rem;
}

.hero-buttons {
   display: flex;
   justify-content: center;
   gap: 1rem;
   flex-wrap: wrap;
}

.hero-image {
   order: 1;
   justify-content: center;
   align-items: center;
}

.hero-image svg {
   color: var(--spotify-green);
}

/* Features Section */
.features {
   padding: 5rem 0;
    background-color: var(--bg-gray);
}

.section-title {
   text-align: center;
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 3rem;
}

.features-grid {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: 2rem;
}

.feature {
   text-align: center;
   padding: 2rem;
   background-color: var(--bg-light-gray);
   border-radius: 10px;
   box-shadow: var(--shadow-small);
   transition: transform 0.3s ease;
}

.feature:hover {
   transform: translateY(-5px);
}

.feature-icon {
   margin-bottom: 1.5rem;
   color: var(--spotify-green);
}

.feature h3 {
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 1rem;
}

.feature p {
   color: var(--text-secondary);
   line-height: 1.7;
}

/* Merch Section */
.merch {
   padding: 5rem 0;
}

.merch-grid {
   display: grid;
   grid-template-columns: repeat(1, 1fr); /* Start with one column */
   gap: 2rem;
}

.merch-item {
    background-color: var(--bg-light-gray);
   border-radius: 10px;
   padding: 1.5rem;
   text-align: center;
   box-shadow: var(--shadow-small);
   transition: transform 0.3s ease;
}

.merch-item:hover {
   transform: translateY(-5px);
}

.merch-image {
   max-width: 100%;
   height: auto;
   margin-bottom: 1rem;
   border-radius: 8px; /* Slightly rounded corners */
}

.merch-price {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--spotify-green);
   margin-bottom: 1rem;
}

.size-options {
   margin-bottom: 1rem;
}

.size-options label {
   margin-right: 0.5rem;
   color: var(--text-secondary);
}

.shirt-size {
  padding: 0.3rem;
   border-radius: 5px;
   border: 1px solid var(--border-color);
   background-color: var(--bg-light-gray);
   color: var(--text-secondary);
}

.add-to-cart {
   width: 100%; /* Full-width button */
   margin-top: 0.5rem;
}

/* Cart Icon */
.cart-icon-container {
   position: relative;
   cursor: pointer;
   margin-right: 1rem;
}

.cart-icon {
   font-size: 1.5rem;
   color: var(--text-primary);
    transition: color 0.2s ease; /* Smooth color transition */
}

.cart-icon:hover {
 color: var(--spotify-green-light); /* Interactive color on hover */
}

.cart-count {
   position: absolute;
   top: -8px;
   right: -8px;
   background-color: var(--spotify-green);
   color: white;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   text-align: center;
   font-size: 0.8rem;
   line-height: 20px;
}

/* Cart Modal */
.cart-modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   z-index: 1000;
   overflow-y: auto;
}

.cart-modal-content {
   background-color: var(--bg-light-gray);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 2rem;
   border-radius: 10px;
   box-shadow: var(--shadow-medium);
   max-width: 80%;
   width: 400px;
}

.close-modal {
   position: absolute;
   top: 10px;
   right: 15px;
   font-size: 1.5rem;
   cursor: pointer;
   color: var(--text-secondary);
}

.close-modal:hover {
   color: var(--text-primary);
}

.cart-items {
   list-style: none;
   padding: 0;
   margin: 0;
}

.cart-items li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}


.cart-items li:last-child {
   border-bottom: none;
}

.cart-item-details {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
}

.cart-item-name {
   font-weight: 600;
}

.cart-item-size {
   color: var(--text-secondary);
   font-size: 0.9em;
}
/* Style for quantity controls */
.quantity-controls {
    display: flex;
    align-items: center;
    margin-right: 1rem; /* Space out quantity controls */
}

.quantity-controls button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
}
.quantity-controls button:hover {
   color: var(--spotify-green)
}

.cart-item-quantity {
    margin: 0 0.5rem;
    font-size: 1em;
    min-width: 20px; /* Ensure quantity display area is wide enough */
    text-align: center; /* Center the quantity number */
}


.cart-item-price {
   font-weight: bold;
   font-size: 1em;
   margin-left: auto;
}
/* Remove Item Button */
.remove-item {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem; /* Add some padding for easier clicking */
    margin-left: 0.5rem; /* Add spacing between price and remove button */
}
.remove-item:hover{
   color: var(--spotify-green);
}

.cart-total {
   margin-top: 1rem;
   font-weight: bold;
   text-align: right;
}
/* Checkout Button */
.checkout-button {
   width: 100%;
   margin-top: 1rem;
}
.checkout-button:disabled{
  background-color: var(--spotify-dark-gray);
  border-color: var(--spotify-dark-gray);
  color: var(--text-secondary);
  cursor: not-allowed; /* Indicate it's not clickable */
}

/* Pricing Section */
.pricing {
   padding: 5rem 0;
   background-color: var(--bg-gray);
}

.pricing-grid {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: 2rem;
   max-width: 900px;
   margin: 0 auto;
}

.pricing-plan {
   background: var(--bg-light-gray);
   padding: 2.5rem;
   border-radius: 10px;
   box-shadow: var(--shadow-medium);
   text-align: center;
   transition: transform 0.3s ease;
}

.pricing-plan:hover {
   transform: scale(1.03);
}

.pricing-plan-basic {
   border: 2px solid transparent;
}

.pricing-plan-premium {
   border: 2px solid var(--spotify-green);
}

.pricing-plan-title {
   font-size: 1.75rem;
   font-weight: 600;
   margin-bottom: 1rem;
}

.pricing-plan-price {
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 1.5rem;
   color: var(--spotify-green);
}

.pricing-plan-price span {
   font-size: 1rem;
   font-weight: 400;
   color: var(--text-secondary);
}

.pricing-plan-features {
   list-style: none;
   margin-bottom: 2rem;
   text-align: left;
}

.pricing-plan-features li {
   padding: 0.75rem 0;
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.checkmark {
   color: var(--spotify-green);
   font-weight: bold;
}

.pricing-button {
   margin-top: 1rem;
   width: 100%;
}

/* Footer */
.footer {
  background-color: var(--spotify-black);
   color: var(--text-secondary);
   padding: 4rem 0;
   text-align: center;
}

.footer-grid {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: 2rem;
   margin-bottom: 3rem;
}

.footer-section h4 {
   font-size: 1.25rem;
   font-weight: 600;
   margin-bottom: 1rem;
   color: var(--text-primary);
}

.footer-section ul {
   list-style: none;
   padding: 0;
}

.footer-section ul li {
   margin-bottom: 0.5rem;
}

.footer-section a {
   color: var(--text-secondary);
   text-decoration: none;
   transition: color 0.3s ease;
   display: inline-block;
   padding: 0.25rem 0;
}

.footer-section a:hover {
   color: var(--spotify-green);
}

.footer-logo {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--text-primary);
   margin-bottom: 1rem;
}

.social-links {
   display: flex;
   justify-content: center;
   gap: 1.5rem;
   font-size: 1.5rem
}

.social-links a {
    color: var(--text-primary);
    transition: color 0.3s ease;
 }
 
 .social-links a:hover {
    color: var(--spotify-green);
 }
 
 .footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
    font-size: 0.9rem;
 }
 
 /* Waves */
 .wave-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 150px; /* Adjust as needed */
     overflow: hidden;
     z-index: -1; /* Behind content */
 }
 
 .waves {
     position: relative;
     width: 100%;
     height: 100%;
     margin-bottom: -7px; /* Adjust for seamless connection */
     background-size: 1000px 100px;
 }
 
 .parallax > use {
     animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
 }
 .parallax > use:nth-child(1) {
     animation-delay: -2s;
     animation-duration: 7s;
 }
 .parallax > use:nth-child(2) {
     animation-delay: -3s;
     animation-duration: 10s;
 }
 .parallax > use:nth-child(3) {
     animation-delay: -4s;
     animation-duration: 13s;
 }
 .parallax > use:nth-child(4) {
     animation-delay: -5s;
     animation-duration: 20s;
 }
 @keyframes move-forever {
     0% {
      transform: translate3d(-90px,0,0);
     }
     100% {
       transform: translate3d(85px,0,0);
     }
 }
 
 /* New merch description class */
 .merch-description {
     text-align: center;
     margin-bottom: 2rem;
     color: var(--text-secondary);
     line-height: 1.6;
 }
 
 /* Responsive Adjustments (Larger Screens) */
 @media (min-width: 768px) {
    .nav {
        display: flex;
        gap: 2rem;
    }
 
    .mobile-menu-button {
        display: none;
    }
 
    .mobile-nav {
        display: none !important;
    }
 
    .hero-container {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }
 
    .hero-content {
        order: 1;
    }
 
    .hero-image {
        order: 2;
    }
 
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
 
    .merch-grid {
        grid-template-columns: repeat(2, 1fr);
    }
 
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
 
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
        text-align: left;
    }
 
    .social-links {
        justify-content: flex-start;
    }
 }
 
 @media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
 
    .hero-title {
        font-size: 4rem;
    }
 }