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

    body {
      font-family: "jua", sans-serif;
      background-color: #FFCCD8;

      color: #FB6F92;
    }
    /* HEADER */
    #arrow {
      position: absolute;
      width: 15%;
      height: auto;
      top: 3.5%;   
      left: 8%;  
      z-index: 5;
      transition: transform 0.1s linear;
    }


    /* Header full-screen */
    header {
      position: relative;
      height: 100vh;/* full viewport height */
      width: 100%;
      overflow: hidden;        
    }

  nav {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5rem;
  }

  nav a {
    font-size: 2rem;
    color: #FB6F92;
    text-decoration: none;
    white-space: nowrap;

    /* Button look */
    padding: 0.4rem 1rem;
    background-color: #FFB3C6;
    border-radius: 1rem;       
    transition: all 0.3s ease; 
  }
    nav a:hover {
      color: #FFE5EC;
      background-color: #FB6F92;
    }

    /* clouds */
    .cloud {
      position: absolute;
      width: 17%;
      height: auto;
    }


    #cloud2 {
      top: 75%;
      right: 7%;
    }

    #cloud3 {
      bottom: 10%;
      left: 9%;
    }

    #cloud4 {
      top: 30%;
      left: 55%;
    }

    #cloud5 {
      top: 15% ;
      left: 1%;
    }

    #cloud6 {
      top: 2%;
      left: 82%;
    }

    /* hearts */
    .heart {
      position: absolute;
      width: 5%;
      height: auto;
    }

    .heart:hover {
      transform: scale(1.2);
      transition: transform 0.3s;
    }

    #heart1 {
      top: 55%;
      right: 5%;
    }

    #heart2 {
      bottom: 2%;
      left: 9%;
    }

    #heart3 {
      top: 33%;
      left: 47%;
    }

    #heart4 {
      top: 45%;
      left: 4%;
    }

    #heart5 {
      top: 20%;
      left: 75%
    }

    #heart6 {
      bottom: 14%;
      left: 60%;
    }

    #heart7 {
      top: 10%;
      left: 25%;
    }


    #header-img {
      position: absolute;
      width: 15%;
      height: auto;
      top: 15%;
      left: 15%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }

    /* Main title centered */
    h1 {
      position: absolute;
      white-space: nowrap;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: "Jua", sans-serif;
      font-size: 7rem;
      font-weight: 400;
      color: #FFCCD8;
      text-align: center;
      text-shadow: 0 0 0.3em #ff527d, 0 0 0.6em #ff527d;
      z-index: 3;  
    }

    /* Tagline below h1 */
    #tagline {
      position: absolute;
      top: 57%; 
      left: 50%;
      font-family: "jua", sans-serif;
      transform: translateX(-50%);
      font-weight: 300;
      font-size: 2rem;
      color: #FB6F92;
      text-align: center;
      z-index: 1;
    }

/* Ensure the main container is relative */
main {
    position: relative;
}

.main-cloud {
    position: absolute;
    width: 17%; 
    height: auto;
    z-index: -1;   
    pointer-events: none;
}


  /* HOW TO SECTION*/
    #guide {
      margin: 0;
      text-align: center;
       position: relative;
      padding-top: 10rem;
      font-size: 3rem;
      font-weight: 400;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 4;

    }

    .steps {
      display: flex;            
      justify-content: center;  
      gap: 16rem;              
      flex-wrap: wrap;         
      margin: 0;                
      font-size: 2rem;  
      flex-direction: row; 
    }


    #how-it-works {
        width: 90%;
        height: auto;
      }

    .food-section {
    padding-top: 10rem;
  }

  /* MENU */
  #menu {
    position: relative;
    padding-top: 5.5rem;
    font-size: 5rem;
    text-align: center;
    padding-bottom: 2rem;
    z-index: 3;
  }

  .food-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding-top: 1rem;
  }

  .food-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #FFB3C6;
    padding: 1rem;
    border-radius: 1.3rem;
    width: 90%;    
    max-width: 20rem;
    height: auto;   
    transition: transform 0.3s, background-color 0.3s, border 0.3s;
  }

  .food-item:hover {
    background-color: #FFD7E2;
    border: .8rem solid #FE84A2;
  }

  .food {
    width: 95%;
    height: auto;
    margin-bottom: 1rem;
  }

  .food-item h3 {
    font-size: 2rem;
    color: #FB6F92;
    margin: 0.5rem 0 0.3rem 0;
  }

  .food-item p {
    padding-top: 2rem;
    font-size: 1.2rem;
    color: #FB6F92;
  }

  .food-item em {
    display: block;  
    padding-top: 1rem;
  }


/* ORDER SECTION*/
#order-section {
  position: relative;
  padding-top: 6rem; 
  text-align: center;
  z-index: 2;
}

#order-form {
  padding-top: 3rem;
  font-size: 4rem;  
}

form {
  margin: 3rem auto 0;       
  padding: 2rem;           
  width: 90%;               
  max-width: 55rem;             
  background-color: #FFB3C6; 
  border-radius: 1.3rem;      
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Common row for inputs */
.food-inputs-row {
  display: flex;
  gap: 2.5rem;             
  justify-content: center;  
  flex-wrap: wrap;          
  padding-top: 1.5rem;
  font-size: 1.2rem;
}




/* Name input */
#name-input {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  font-size: 2rem;
  padding-bottom: 1rem;
  width: 100%;     
  max-width: 60rem;  
}

#name-input input {
  flex: 1;          
  min-width: 25rem;  
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  background-color: #FFE5EC;
  border: 0.6rem solid #FFE5EC;
  font-size: 1.5rem;
  font-family: "Jua", sans-serif;
  color: #FB6F92;
  outline: none;
  text-align: center;
}

#name-input input::placeholder {
  font-display: center;
  color: #FB6F92;
  opacity: 0.6;
  text-align: center;
}

#name-input input:focus {
  background-color: #FFF0F5;
  border: 0.6rem solid #FB6F92;
}

/* Section headers */
#dishes-input h3, 
#drinks-input h3, 
#special-requests-input h3, 
#love-level-input h3, 
#name-input h3 {
  font-size: 3rem;
}

#dishes-input p, 
#drinks-input p,
#love-level-input p {
  font-size: 1.6rem;
}

#dishes-input label, #drinks-input label {
  font-size: 1.5rem;
}

/* Inputs */
#dishes-input input[type="number"]{
  width: 5rem;
  padding: 0.5rem 0.5rem;
  border-radius: 2rem;
  border: 0.3rem solid #FFE5EC;
  background-color: #FFE5EC;
  font-family: "Jua", sans-serif;
  font-size: 1rem;
  text-align:center;
  color: #FB6F92;
  outline: none;
}
#dishes-input input[type="number"]:focus {
  border: 0.3rem solid #FB6F92;
  background-color: #FFF0F5;
}

.drinks-inputs-row {
    padding-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 3rem;    /* spacing between each drink option */
}

.drinks-inputs-row label {
  display: flex;
  align-items: center;
  gap: 0.5rem;  /* space between radio and text */
  cursor: pointer;
}



input[type="radio"] {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 0.2rem solid #FB6F92;
  background-color: #FFE5EC;
  cursor: pointer;
}


input[type="radio"]:focus {
  border: 0.2rem solid #FFF0F5;
  background-color: #FB6F92;
}




/* Love level slider labels */
#love-level-labels {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
  margin-top: 0.5rem;
}
/* push smitten more right */
#smitten{
  padding-left: 4rem;
}

/* Love level slider container */
#love-level-slider-container {
 padding-top: 1rem;
}

/* Base slider */
.heart-slider {
  -webkit-appearance: none;
  width: 92%;
  height: 1.7rem;
  background: #FFE5EC;
  border-radius: 0.75rem;
  outline: none;
  margin: 1rem 0;
}

/* Track for Chrome/Safari */
.heart-slider::-webkit-slider-runnable-track {
  height: 1.5rem;
  background: #FFE5EC;
  border-radius: 0.75rem;
}

/* Track for Chrome/Safari */
.heart-slider::-webkit-slider-runnable-track {
  height: 1.5rem;
  background: #FFE5EC;
  border-radius: 0.75rem;
}

/* Thumb for Chrome/Safari */
.heart-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3rem;
  height: 3rem;
  background: url('heart.png') no-repeat center;
  background-size: contain;
  cursor: pointer;
  margin-top: -0.7rem; /* center thumb on track */
  border: none;
}

/* Thumb for Firefox */
.heart-slider::-moz-range-thumb {
  width: 3rem;
  height: 3rem;
  background: url('heart.png') no-repeat center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
/* Special Requests */
#special-requests-input textarea {
  width: 90%;
  min-height: 7rem;          /* flexible height */
  border-radius: 1.5rem;
  border: 0.6rem solid #FFE5EC;
  background-color: #FFE5EC;
  padding: 1rem;
  color: #FB6F92;
  font-family: "Jua", sans-serif;
  font-size: 1rem;
  outline: none;
}

#special-requests-input textarea::placeholder {
  font-display: left;
  color: #FB6F92;
  opacity: 0.6;
  text-align: left;
}

#special-requests-input textarea:focus {
  background-color: #FFF0F5;
  border: 0.6rem solid #FB6F92;
}

#text-area-padding{
  padding-top: 1.5rem;
}
/* Submit button */

#checkout-button {
  display: flex;          
  justify-content: center; 
  align-items: center;        
  padding-bottom:1rem;  
}

form input[type="button"] {
  font-family: "Jua", sans-serif;
  margin-top: 1.5rem;
  width: 20rem;
  padding: 0.8rem 2rem;
  border-radius: 2rem;
  background-color: #FB6F92;
  color: #FFE5EC;
  border: 0.2rem solid  #FB6F92;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

form input[type="button"]:hover {
   transform: scale(1.1);
}

.input-padding {
  padding: 1.5rem;
}
footer{
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2rem;
}

footer a{
  text-align: center;
  padding-bottom: 1.5rem;
  font-family: "Jua", sans-serif;

  color: #FB6F92;

}

#github-logo{
  width: 2rem;
  height: 2rem;

}



/* 📱 Mobile Styles */
@media (max-width: 600px) {
  /* General scaling */
  
  body {
    font-size: 14px; /* shrink base font */
  }

   
  /* Clouds */
  .cloud {
    width: 25vw; /* proportional to screen */
  }
  #cloud2 { top: 70vh; right: 5vw; }
  #cloud3 { bottom: 8vh; left: 5vw; }
  #cloud4 { top: 28vh; left: 48vw; }
  #cloud5 { top: 12vh; left: 2vw; }
  #cloud6 { top: 5vh; left: 75vw; }

  /* Header text */
  h1 {
    font-size: 3rem;
    white-space: normal; 
    text-align: center;
  }
  #tagline {
    font-size: 1rem;
    top: 60%; /* avoid overlap */
  }

  /* Navigation */
  nav {
    gap: 1rem;
    top: 1rem;
  }
  nav a {
    font-size: 1rem;
    padding: 0.3rem 0.7rem;
    border-radius: 0.6rem;
  }

  /* Arrow */
  #arrow {
    width: 20%;   
    top: 5%;
    left: 8%;
  }
  #header-img{ 
    width: 20%; 
    
  }

  /* Hearts */
  .heart {
    width: 8%;
  }

  .heart:active {
      transform: scale(1.5);
      transition: transform 0.3s;
    }

  /* How-to section */

  #guide{
    font-size: 2rem;
  }
  .steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 50%;
  }

  
  /* Order form */
  #order-form {
    font-size: 2rem; /* shrink heading */
  }
   #name-input {
    flex-direction: column;
    font-size: 1.5rem;
    gap: 0.5rem;
    width: 100%;
  }

  #name-input input {
    width: 100%;        /* fit container instead of fixed width */
    min-width: unset;   /* remove the 25rem min-width */
    max-width: 100%;    /* ensure it doesn't overflow */
    font-size: 1.2rem;
    padding: 0.5rem;
  }
  .food-inputs-row {
    flex-direction: column;
    gap: 1rem;
    font-size: 1rem;
  }
  .drinks-inputs-row {
    flex-direction: column;
    gap: 1rem;
  }
  form input[type="button"] {
    width: 100%; /* button fits screen */
    font-size: 1rem;
  }

  /* Food items */
  #menu{
    font-size: 3rem;
  }
  .food-item {
    width: 100%;
    max-width: 16rem;
    padding: 1rem;
  }
  .food-item h3 {
    font-size: 1.2rem;
  }
  .food-item p {
    font-size: 0.9rem;
  }

  /* Love level slider */
  #love-level-labels {
    font-size: 0.8rem;  
    flex-direction: row; 
    gap: 0.5rem;           
    justify-content: center; 
  }
  #smitten {
    padding-left: 0;
  }
}