html, body {
  margin: 0;
  padding: 0;
  height: 100%;        /* let body follow html */
  min-height: 100dvh;  /* dynamic viewport height */
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}


p {
  font-size: 18px;
}

body {
  font-family: Arial, sans-serif;
  overflow-x: hidden;  /* allow vertical scroll if needed */
  position: relative;
  display: flex;
  flex-direction: column;
}


/* Desktop layout */
@media (min-width: 1024px) {
  .sides {
    flex-direction: row; /* side by side */
  }
}

/* Mobile layout */
@media (max-width: 768px) {
  .sides {
    flex-direction: column; /* stack vertically */
  }
}

body::before {
  content: "";
  position: fixed;   /* fixed instead of absolute */
  top: 0; left: 0;
  width: 100vw;      /* full viewport width */
  height: 100dvh;    /* dynamic viewport height */
  background: url('assets/bg.jpg') center/cover no-repeat;
  filter: blur(4px);
  z-index: -1;
}

h1 {
  margin: 2px;
}

#gate {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  z-index: 9999;
  flex-direction: column;

  /* Frosted glass effect */
  background: rgba(77, 1, 31, 0.747);       /* semi-transparent dark tint */
  backdrop-filter: blur(8px);        /* blur whatever is behind */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
  color: white;
}

#g_btn {
  background-image: url("assets/refresh.png");
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 30px; /* space for the icon */
  width: 50px;
  height: 50px;
  border-radius: 40px;
  margin: 20px;
  transition: transform 0.5s ease; /* smooth animation */
}

#g_btn.rotated {
  animation: spin 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.hparent {
  width: 100%;
  height: 15vh;
  gap: 20px;
  background: linear-gradient(to bottom, rgba(240, 113, 202, 0.274), rgba(255, 0, 0, 0));
  /*position: fixed;*/
  display: flex;
}

.hcontainer {
  margin-left: 10%;
  margin-right: 10%;
  width: 100%;
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.hcontainer img {
  max-width: 10%;
}

.name {
  color: rgb(250, 99, 137);
  font-size: 4vw;
  cursor: default;
  white-space: nowrap;
  font-family: "Lobster Two", sans-serif;
  font-weight: 400;
  font-style: normal;
  display: flex;
  place-self: center;
  margin: 0px;
}

@media (max-width: 768px) {
  .name {
    font-size: 10vw;
  }
}


.sides {
  flex: 1;
  display: flex;       /* puts children side by side */
  height: 85vh;        /* remaining height after header */
  font-family: "Kameron", sans-serif;
  min-height: 0;
}

.overlay {
  position: absolute; /* takes it out of normal flow */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;       /* flexbox for centering */
  justify-content: center;
  align-items: center;
  z-index: 10;         /* sits above the base layer */
}

.overlay body {
  filter: blur(4px);
}

.o_fg {
  height: auto;
  background: linear-gradient(to bottom, rgb(253, 126, 158), rgb(250, 166, 232));
  border-radius: 20px;
  position: relative;
  display: none;
  grid-template-columns: 30% 70%;
  width: 100%;
  min-width: 50%;
  max-width: 80%;
  height: 100%;
  max-height: 80%;
}

.white_fg {
  width: 100%;
  background: white;
}

.white_fg p {
  margin: 0px;
}

.o_img {
  background: white;
  justify-content: center;
  display: flex;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.o_price {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 20px;
}

.o_text{
  font-size: 20px;
  margin: 40px;
}

.o_text h1 {
  margin: 0px;
}

.o_text h2 {
  margin: 0px;
}

.o_img img {
  place-self: center;
  width: 100;
  max-width: 50%;
  border-radius: 20px;
}

.rating span {
  font-size: 2rem;
  cursor: pointer;
  color: gray;
}
.rating span.active {
  color: gold;
}

.r_con {
  display: flex;
  flex-direction: row;
}

.side {
  border-radius: 20px;
  width: auto;
  flex: 1;                    /* each takes 50% width */
  overflow-y: auto;         /* independent vertical scroll */
  padding: 20px;
  box-sizing: border-box;
  max-height: 85%;
  position: relative;
  
}

.a_container {
  justify-content: center;
  flex: 1;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.b_container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.afg_container {
  position: relative;
  grid-template-rows: 20% 100%;
  width: 80vw;
  height: 100%;
}

.bfg_container {
  position: relative;
  grid-template-rows: 20% 100%;
  width: 80vw;
  height: 100%;
}

.nb_o {
  position: relative;
  top: 10px;
  padding: 0px;
  margin: 0 0 0 8px;
}

.nb {
  background: linear-gradient(to bottom, rgb(253, 126, 158), rgb(250, 166, 232));
  border-radius: 10px;
  padding-bottom: 20px;
  border: rgba(250, 166, 232, 0);
  transition: transform 0.3s ease;
}

.nb.active {
  transform: translateY(-8px);
  background: linear-gradient(to bottom, rgb(250, 166, 232), rgb(253, 126, 158));
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


.nb:hover {
  transform: translateY(-8px);
}

.fg {
  height: auto;
  background: linear-gradient(to bottom, rgb(253, 126, 158), rgb(250, 166, 232));
  border-radius: 20px;
  position: relative;
  padding-top: 10px;
  display: flex;
  width: 100%;
  min-width: 50%;
  max-width: 60%;
  padding-left: 7px;
  margin: 0 0 10px 0;
}

@media (max-width: 768px) {
  .fg {
    max-width: 100%; /* shrink to 40% on smaller screens */
  }
}

.inner_fg {
  width: 100%;
  height: auto;
  display: flex;
  margin: 20px 20px 20px 20px;
  justify-content: flex-start; /* centers vertically */
  align-items: center;     /* centers horizontally */
}

.inner_fg p {
  margin: 20px 20px 20px 0;
}

.search {
  border-radius: 10px;
  border: none;
  outline: none;
}

.b_fg {
  text-align: center;
  place-items: center;
  place-self: center;
  width: auto;
  height: auto;
  background: linear-gradient(to bottom, rgb(253, 126, 158), rgb(250, 166, 232));
  border-radius: 20px;
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 0 10px 0;
}

.section {
  text-align: center;
  place-items: center;
  width: auto;
  height: auto;
  background: linear-gradient(to bottom, rgb(253, 126, 158), rgb(250, 166, 232));
  border-radius: 20px;
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 0 10px 0;
}

.this_con {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* cleaner syntax */
  grid-template-rows: repeat(3, 1fr);
  text-align: center;
  place-items: center;
  place-self: center;
  width: 85%;
  aspect-ratio: 3 / 3;
  height: auto;
  position: relative;
  background: linear-gradient(to bottom, rgb(253, 126, 158), rgb(250, 166, 232));
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 10px;
}

.this_con img {
  width: 50%;
  height: 50%;
  object-fit: cover;
  border-radius: 20px;
  margin-top: 20px;
}

.this_con p {
  margin: 0;
  font-size: 14px;
}

.this_con h5 {
  margin: 0;
  font-size: 15px;
}

.flower_con {
  width: 100%;
  height: 100%;
}

.flower_con img {
  cursor: pointer;
}

.section {
  cursor: pointer;
  user-select: none;
}

.highlight {
  background: linear-gradient(to right, gold, orange);
  transition: background 0.5s ease; /* smooth effect */
}



.this_con {
  display: none;
}

.b_fg p {
  margin: 20px;
}

h4 {
  margin: 2px;
}

.ea_tab {
  /*place-self: center;
  display: flex;*/
  padding: 20px 0px 20px 0px;
  border-radius: 20px;
  place-items: center;
  height: auto;
  width: auto;
  background: linear-gradient(to bottom, rgb(253, 126, 158), rgb(250, 166, 232));
  border-radius: 20px;
  position: relative;
  max-width: 50%;
  place-items: center;
  margin: 0 0 10px 0;
}

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

.settings {
  width: 100%;
  place-items: flex-start;
}

.s_btn {
  margin: 7px;
}

ul {
  margin: 0px;
}

.ea_order {
  padding: 0px;
  margin: 0 40px 0 40px;
  place-self: center;
  place-items: center;
}

.ea_btn {
  background:rgb(255, 227, 249);
  border-radius: 10px;
  border: rgba(250, 166, 232, 0);
  cursor: pointer;
  margin: 0 0.5vw 0 0.5vw;
}

.ea_btn:hover {
  background: rgb(255, 130, 168);
}

.slideshow {
  padding: 20px;
  width: 100%;
  max-width: 50%;
  height: 150px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, rgb(253, 126, 158), rgb(250, 166, 232));
  border-radius: 20px;
  margin: 0 0 10px 0;
}

.slideshow p {
  font-size: 14px;;
}
.slideshow h2 {
  font-size: 17px;;
}

@media (max-width: 768px) {
  .slideshow {
    max-width: 80%;
  }

  .slideshow h2 {
    font-size: 18px;
  }

  .slideshow p {
    font-size: 14px;
  }
}


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

.slide {
  display: flex;
  margin-left: 20px;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}

.slide h2 {
  margin: 5px;
}

.slide p {
  margin: 5px;
}

.b_price {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.slide img {
  width: 100px;
  height: 100px;
  object-fit: cover; /* or contain if you prefer */
  border-radius: 20px;
  cursor: pointer;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
}


.accordion {
  font-size: 15px;
  cursor: pointer;
  padding: 10px;
  width: 90%;
  text-align: left;
  border: none;
  outline: none;
  background: linear-gradient(to bottom, rgb(255, 169, 210), rgb(252, 115, 167));
  border-radius: 6px;
  display: flex;
  margin: 10px;
  justify-content: space-between;
  align-items: center;
}

.accordion::after {
  content: "▶"; /* arrow */
  transition: transform 0.3s;
}

.accordion.active::after {
  transform: rotate(90deg); /* rotate arrow when open */
}

.panel {
  width: 90%;
  display: none;
  padding: 10px;
  background: #fddaec;
  border-radius: 6px;
}

.lower {
  background: linear-gradient(to bottom, rgba(255, 169, 211, 0), rgba(238, 26, 107, 0.349));
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  margin: 100px 0 0 0;
  align-self: flex-start;
  justify-self: flex-start;
}

.lower p {
  position: absolute;
  bottom: 0;
  place-self: center;
  margin: 4px;
  font-family: sans-serif;
  font-size: 14px;
  opacity: 0.5;
}

::-webkit-scrollbar {
  width: 10px;
  opacity: 0;
  transition: opacity 0.3;
}

.side.scrolling::-webkit-scrollbar {
  opacity: 1; /* visible while scrolling */
}


/* Track (background of scrollbar) */
::-webkit-scrollbar-track {
  background: #f0f0f000;
  border-radius: 6px;
}

/* Thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgb(253, 126, 158), rgb(250, 166, 232));
  border-radius: 6px;
}

/* Thumb hover effect */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgb(250, 166, 245), rgb(253, 126, 158));;
}