body {
  background-color: #fff7f1;
}

.message-container {
  position: absolute;
  top: 90vh; /* Near bottom of the viewport */
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
  transform: translateY(-50%);
}

#customMessageInput {
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 8px;
  border: 2px solid #272761;
  outline: none;
  width: 60%;
  max-width: 400px;
  pointer-events: auto;
  margin-top: 0;
}

#setMessageBtn {
  padding: 8px 16px;
  margin-left: 8px;
  font-size: 16px;
  border-radius: 8px;
  background-color: #fff7f1;
  border: 2px solid #272761;
  color: #383878;
  cursor: pointer;
  pointer-events: auto;
}

#setMessageBtn:hover {
  background-color: #fff;
}

#customMessageDisplay {
  position: absolute;
  top: 25vh; /* Message stays near the top-middle */
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #383878;
  pointer-events: none;
}


#flavorSelect {
  
  appearance: none;
  background-color: #fff7f1;  /* Match your UI (e.g., soft pink/lavender) */
  color: #4b2354;              /* Deep purple text (adjust as needed) */
  border: 2px solid #4b2354;   /* Border to match buttons/icing */
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Optional hover/focus effects */
#flavorSelect:hover,
#flavorSelect:focus {
  background-color: #f1d8ff;
  border-color: #ba7cf4;
}

/* Remove arrow and add custom one (optional for advanced styling) */
#flavorSelect {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234b2354' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
}

#candleColorSelect {
  appearance: none;
  background-color: #fff7f1;   /* same as flavor select */
  color: #4b2354;
  border: 2px solid #4b2354;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  /* Add the custom arrow */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234b2354' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
}

/* Optional hover/focus to match flavor select */
#candleColorSelect:hover,
#candleColorSelect:focus {
  background-color: #f1d8ff;
  border-color: #ba7cf4;
}

.candle-count-display {
  position: fixed;
  top: 16px;
  left: 16px;
  font-family: 'Arial', sans-serif;
  font-size: clamp(14px, 4vw, 18px); /* Responsive font size */
  color: #383878;
  background-color: #fff7f1;
  padding: 6px 10px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid #272761;
  max-width: 50vw;              /* Prevents it from overflowing */
  white-space: nowrap;          /* Keeps it on one line */
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1000;
}

.candle-count-display span {
  font-weight: bold;
  color: orange;
  top: 10px;
  left: 10px;
}

.cake {
  position: absolute;
  width: 250px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -70px;
  margin-left: -125px;
}

.plate {
  width: 270px;
  height: 110px;
  position: absolute;
  bottom: -10px;
  left: -10px;
  background-color: #ccc;
  border-radius: 50%;
  box-shadow: 0 2px 0 #b3b3b3, 0 4px 0 #b3b3b3, 0 5px 40px rgba(0, 0, 0, 0.5);
}

.cake > * {
  position: absolute;
}

.layer {
  position: absolute;
  display: block;
  width: 250px;
  height: 100px;
  border-radius: 50%;
  background-color: #553c13;
  box-shadow: 0 2px 0px #684b26, 0 4px 0px #4a320f, 0 6px 0px #4a320f, 0 8px 0px #49310f,
              0 10px 0px #49310e, 0 12px 0px #482f0e, 0 14px 0px #472e0e, 0 16px 0px #462d0e,
              0 18px 0px #452c0d, 0 20px 0px #442b0d, 0 22px 0px #432a0d, 0 24px 0px #42290c,
              0 26px 0px #41280c, 0 28px 0px #40270c, 0 30px 0px #3f260c;
}
.cake.vanilla .layer {
    background-color: #f0e4d0;
  box-shadow:
    0 2px 0px #f2e8d8,
    0 4px 0px #ddccb2,
    0 6px 0px #ddccb2,
    0 8px 0px #dbcaaf,
    0 10px 0px #dac9ad,
    0 12px 0px #d8c7aa,
    0 14px 0px #d7c5a8,
    0 16px 0px #d5c3a5,
    0 18px 0px #d3c1a3,
    0 20px 0px #d2bfa0,
    0 22px 0px #d0bd9e,
    0 24px 0px #cebb9b,
    0 26px 0px #cdb998,
    0 28px 0px #cbb795,
    0 30px 0px #c9b592;;
}

.layer-top {
  top: 0px;
}

.layer-middle {
  top: 33px;
}

.layer-bottom {
  top: 66px;
}

.icing {
  top: 2px;
  left: 5px;
  background-color: #3b2a14; /* chocolate frosting base */
  width: 240px;
  height: 90px;
  border-radius: 50%;
  position: relative;
}

.icing::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 5px;
  bottom: 6px;
  left: 5px;
  background-color: #4b3610; /* darker chocolate */
  box-shadow:
    0 0 4px #4d3a11,
    0 0 4px #4d3a11,
    0 0 4px #4d3a11;
  border-radius: 50%;
  z-index: 1;
}

/* When vanilla cake is selected, switch to chocolate frosting */
.cake.vanilla .icing {
  background-color: #3b2a14; /* chocolate frosting */
}

.cake.vanilla .icing::before {
  background-color: #4b3610; /* darker chocolate */
  box-shadow:
    0 0 4px #4d3a11,
    0 0 4px #4d3a11,
    0 0 4px #4d3a11;
}

/* When chocolate cake is selected (no vanilla class), use vanilla frosting */
.cake:not(.vanilla) .icing {
  background-color: #f0e4d0; /* vanilla frosting */
}

.cake:not(.vanilla) .icing::before {
  background-color: #f4e9d9;
  box-shadow:
    0 0 4px #f6ebdc,
    0 0 4px #f6ebdc,
    0 0 4px #f6ebdc;
}

.drip {
 display: block;
  width: 50px;
  height: 60px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  background-color: #f0e4d0; 
}

.drip1 {
  top: 53px;
  left: 5px;
  transform: skewY(15deg);
  height: 48px;
  width: 40px;
}

.drip2 {
  top: 69px;
  left: 181px;
  transform: skewY(-15deg);
}

.drip3 {
  top: 54px;
  left: 90px;
  width: 80px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
.cake.vanilla .drip {
  background-color: #3b2a14;
  box-shadow:
    inset 0 -2px 4px #2a1e0b,
    0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Optional enhancement for a glossier look */
.cake.vanilla .drip::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 8px;
  width: 60%;
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  transform: rotate(-10deg);
  pointer-events: none;
}

/* Top controls container */
.top-controls {
  position: fixed;
  top: 0px;
  right: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 900;
}

/* Buttons */
.top-controls button {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #272761;
  background: #fff7f1;
  color: #383878;
  cursor: pointer;
}
.top-controls button:hover {
  background: #fff;
}

/* Reusable button style */
.sidebar-button,
.top-controls button {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #272761;
  background: #fff7f1;
  color: #383878;
  cursor: pointer;
  width: 100%;
  margin-top: 16px;
}

/* Hover effect */
.sidebar-button:hover,
.top-controls button:hover {
  background: #fff;
}

/* Hamburger */
.hamburger {
  width: 32px;
  height: 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger span {
  height: 4px;
  width: 100%;
  background: #272761;
  border-radius: 2px;
  transition: 0.3s;
}

/* Sidebar (more hidden) */
.sidebar {
  position: fixed;
  top: 0;
  right: -280px; /* fully off-screen */
  width: 260px;
  height: 100%;
  background: #fff7f1;
  box-shadow: -4px 0 10px rgba(0,0,0,0.25);
  padding: 20px;
  overflow-y: auto;           /* <- allow vertical scrolling if content is tall */
  box-sizing: border-box;     /* <- include padding in width calculation */
  transition: right 0.4s ease;
  z-index: 1200;
}
.sidebar.open {
  right: 0;
}

.candle {
  background-color: var(--candle-body, red); /* Use a single solid color */
  width: 12px;
  height: 35px;
  border-radius: 6px/3px;
  top: -20px;
  left: 50%;
  margin-left: -8px;
  z-index: 10;
  position: absolute;
}

.candle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--candle-top, red);
}

.candle.out .flame {
  display: none;
}

.flame {
  position: absolute;
  background-color: orange;
  width: 10px;
  height: 25px;
  border-radius: 8px 8px 8px 8px/20px 20px 8px 8px;
  top: -34px;
  left: 50%;
  margin-left: -7.5px;
  z-index: 10;
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5);
  transform-origin: 50% 90%;
  animation: flicker 1s ease-in-out alternate infinite;
}

@keyframes flicker {
  0% {
    transform: skewX(5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.2), 0 0 20px rgba(255, 165, 0, 0.2), 0 0 60px rgba(255, 165, 0, 0.2), 0 0 80px rgba(255, 165, 0, 0.2);
  }
  25% {
    transform: skewX(-5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5);
  }
  50% {
    transform: skewX(10deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.3), 0 0 20px rgba(255, 165, 0, 0.3), 0 0 60px rgba(255, 165, 0, 0.3), 0 0 80px rgba(255, 165, 0, 0.3);
  }
  75% {
    transform: skewX(-10deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.4), 0 0 20px rgba(255, 165, 0, 0.4), 0 0 60px rgba(255, 165, 0, 0.4), 0 0 80px rgba(255, 165, 0, 0.4);
  }
  100% {
    transform: skewX(5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5);
  }
  
}