/* IMPORTING FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Lilita+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Lilita+One&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_forward");

/* -------------------------------------------------- */
/* PAGE CONTAINER                                     */
/* -------------------------------------------------- */

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

body {
  background-color: #f8dfe6;
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
}

.DESKTOP-reservation {
  overflow-x: hidden;
  overflow-y: visible;
  background: linear-gradient(
    180deg,
    rgba(255, 246, 246, 1) 0%,
    rgba(255, 208, 208, 1) 100%
  );
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 260px; /* space so bundok doesn’t cover footer */
}

/* -------------------------------------------------- */
/* BACKGROUND DECOR IMAGES                            */
/* -------------------------------------------------- */

/* Mountain – bottom centered, scales with screen */
.DESKTOP-reservation .bundok {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1500px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

/* Petals RIGHT – slightly below top cherry blossom, stuck right */
.DESKTOP-reservation .petals-right {
  position: absolute;
  top: 14vh;                       /* responsive vertical position */
  right: 2vw;                      /* keeps it near right edge */
  width: clamp(260px, 30vw, 650px);
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* Petals LEFT – below top-left cherry blossom */
.DESKTOP-reservation .petals-left {
  position: absolute;
  top: 40vh;
  left: 1vw;
  width: clamp(180px, 18vw, 304px);
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* Top cherry blossom – pinned top-left */
.DESKTOP-reservation .cherry-blossom-top {
  position: absolute;
  top: 4vh;
  left: 0;
  width: clamp(260px, 30vw, 500px);
  height: auto;
  pointer-events: none;
  z-index: 2;
}

/* Bottom-right cherry blossom – pinned bottom-right */
.DESKTOP-reservation .cherry-blossom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: clamp(280px, 32vw, 600px);
  height: auto;
  pointer-events: none;
  z-index: 2;
}

.reservation-wrapper {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.reservation-bg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    /* Center vertically behind the box */
    top: 50%;
    transform: translate(-50%, -50%);

    width: calc(100% + 120px);
    height: calc(100% + 160px);
    background: rgba(243, 243, 243, 0.35);
    border-radius: 45px;

    box-shadow:
        0px 40px 80px rgba(0, 0, 0, 0.15),
        0px 8px 22px rgba(255, 255, 255, 0.45) inset;
    z-index: 0;
    pointer-events: none;
}




/* -------------------------------------------------- */
/* RESERVATION BOX                                    */
/* -------------------------------------------------- */

.reservation-box {
  font-family: Arial, sans-serif;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(320px, 32vw, 460px);
  background: white;
  padding: 30px;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  z-index: 2 !important;

  /* ⭐ Added margins */
  margin-top: 160px;
  margin-bottom: 40px;
}


#step1, #step2 {
  min-height: 520px;   /* same height for both steps */
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* keeps spacing natural */
}


/* -------------------------------------------------- */
/* FORM FIELDS                                        */
/* -------------------------------------------------- */

.field {
  position: relative;
  width: 100%;
}


select,
input,
textarea {
  width: 100%;
  border: 1.3px solid #ccc;
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 16px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
}

/* hide default text until selected */
input[type="date"],
input[type="time"] {
  color: transparent;
}

/* custom placeholder */
.custom-placeholder {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  font-size: 16px;
}

/* show text when valid */
input[type="date"]:valid,
input[type="time"]:valid {
  color: black;
}

input[type="date"]:valid + .custom-placeholder,
input[type="time"]:valid + .custom-placeholder {
  display: none;
}

/* textarea update */
textarea {
  font-family: Arial, sans-serif;
  resize: none;
  height: 70px;
  border-radius: 16px;
  border: 1.3px solid #ccc;
  padding: 14px 18px;
  font-size: 16px;
  background: #fff;
}

/* hide browser icons */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

/* Step 2 container smaller */
#step2 {
  width: 75%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Time field */
#step2 .field:first-child {
  width: 100%;
  max-width: 450px;        /* keeps consistent box width */

}

/* Special Request always full width */
#step2 .field textarea {
  width: 100%;
  height: 100px;
  resize: none;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1.3px solid #ccc;
  font-size: 16px;
}

/* ------------------------------ */
/* TIME SECTION (matches sample)  */
/* ------------------------------ */

/* Label */
#step2 .field label {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    display: block;
}

/* Time tabs (Breakfast | Lunch | Dinner) */
.time-tabs {
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
}

/* Each tab button */
.time-tab {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 0;
    color: #333;
    border-bottom: 2px solid transparent;
}

.time-tab:hover {
    color: #000;
}

/* Active tab has underline */
.time-tab.active {
    border-bottom: 2px solid #000;
    font-weight: 600;
    color: #000;
}

/* Time grid container */
.time-grid {
  
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    min-height: 180px;
    align-items: start !important;
    min-height: 150px;
    padding-top: 10px;  
    

    /* keep items from stretching */
    align-items: start;

    /* OPTIONAL: tiny minimum space so Breakfast/Dinner don't look too empty */
    min-height: 140px;   
    row-gap: 14px;        
    column-gap: 18px;

}

/* Time slot buttons */
.time-btn {
    padding: 12px 0;
    border-radius: 6px;
    border: 1.5px solid #999;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    transition: 0.2s;
    text-align: center;
}

.time-btn:hover {
    background: #ffd6e2 !important;
}

.time-btn.selected {
    background: #ff94b3;
    color: white;
    font-weight: bold;
    border-color: #ff94b3;
}

#time-options div {
  padding: 12px 18px;
  cursor: pointer;
}

#time-options div:hover {
  background: #ffe3ee;
}

/* -------------------------------------------------- */
/* BUTTONS                                            */
/* -------------------------------------------------- */

.step-buttons {
  font-family: "Lilita One-Regular", Helvetica;
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.step-buttons button {
  padding: 12px 28px;
  border: none;
  border-radius: 40px;
  background: #ff94b3;
  color: white;
  font-size: 15px;
  cursor: pointer;
}

.step-buttons button:hover {
  background: #ff7ca2;
}

/* -------------------------------------------------- */
/* CALENDAR                                           */
/* -------------------------------------------------- */

#calendar {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  border: 1.3px solid #ccc;
  box-sizing: border-box;
}

#calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

#calendar-header button {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 5px 10px;
}

#month-year {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}

#calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 12px;
  font-weight: bold;
  color: #666;
  font-size: 14px;
}

#calendar-days div {
  padding: 8px 0;
}

#calendar-dates {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, 1fr);
}

#calendar-dates button {
  padding: 10px;
  border: none;
  background: #f3f3f3;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}

#calendar-dates button:disabled {
  background: #eaeaea;
  color: #aaa;
  cursor: not-allowed;
}

#calendar-dates button.selected {
  background: #ff94b3;
  color: white;
  font-weight: bold;
}

#calendar-dates button:not(:disabled):hover {
  background: #ffd6e2;
}

/* -------------------------------------------------- */
/* POPUP (DO NOT TOUCH)                               */
/* -------------------------------------------------- */

.popup-overlay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    /* Position ABOVE the bundok */
    bottom: -280px;  /* ← Move popup UP relative to the mountain */

    width: auto;
    height: auto;

    z-index: 9999;

    pointer-events: none;
}


.popup-overlay.hidden {
  display: none;
}

.popup-box {
  pointer-events: auto;   /* popup itself is clickable */
  width: 850px;                 /* FIXED size — never shrinks */
  height: auto;                 /* stays natural height */
  padding: 30px 40px;           /* your original spacing */
  border-radius: 35px;
  background: rgb(248, 223, 223);
  box-shadow: 0px 8px 25px rgba(0,0,0,0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;

  z-index: 2000;
}

.popup-text {
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000;
  font-size: 16px;
}

.popup-btn {
  padding: 16px 55px;
  background: #ff94b3;
  color: white;
  border-radius: 50px;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.popup-btn:hover {
  background: #ff7ca2;
}

/* -------------------------------------------------- */
/* RESPONSIVE TWEAKS                                  */
/* -------------------------------------------------- */

/* Laptops / small desktops */
@media (max-width: 1200px) {
  .reservation-box {
    top: 16vh;
  }

  .img {
    top: 10vh;
  }

  #step1,
  #step2 {
    min-height: 380px;
  }
}

/* Tablets / medium screens */
@media (max-width: 992px) {
  .reservation-box {
    top: 14vh;
    width: clamp(320px, 50vw, 460px);
    padding: 24px;
  }

  .img {
    top: 10vh;
  }

  .DESKTOP-reservation {
    padding-bottom: 220px;
  }
}

/* Small tablets / large phones (landscape) */
@media (max-width: 768px) {
  .reservation-box {
    top: 12vh;
    width: 80%;
  }

  .img {
    width: 85%;
  }

  .DESKTOP-reservation .petals-right {
    top: 16vh;
    width: clamp(220px, 38vw, 480px);
  }

  .DESKTOP-reservation .petals-left {
    top: 45vh;
  }
}

/* Phones (portrait) – still same layout, just tighter */
@media (max-width: 576px) {
  .reservation-box {
    top: 10vh;
    width: 88%;
    padding: 20px;
  }

  .img {
    top: 11vh;
    width: 90%;
  }

  .DESKTOP-reservation .cherry-blossom-top {
    width: clamp(220px, 55vw, 420px);
  }

  .DESKTOP-reservation .petals-right {
    top: 18vh;
    right: -4vw; /* let it bleed a little to the side like in design */
  }

  .DESKTOP-reservation .petals-left {
    top: 46vh;
  }

  .DESKTOP-reservation {
    padding-bottom: 200px;
  }
}
/* -------------------------------------------------- */
/* END OF FILE                                        */
/* -------------------------------------------------- */