:root {
  --pink: #fe7da8;
  --pink-dark: #d94777;
  --pink-light: #fdeef3;
  --pink-pale: #fdf8f4;
  --cream: #fffaf5;
  --ink: #4a2c38;
  --ink-soft: #7a5c68;
  --green: #3e8f52;
  --green-bg: #eefaf0;
  --border: #f3d7e2;
  --radius: 20px;
  font-size: 100%;
}

* { box-sizing: border-box; }

a {
  color: var(--pink-dark);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}
a:hover { color: var(--pink); text-decoration-color: var(--pink); }

html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--pink-pale) 0%, var(--cream) 100%);
  color: var(--ink);
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.5;
}

.page {
  max-width: 700px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 3rem) clamp(1rem, 4vw, 2rem);
  position: relative;
  z-index: 1;
}

.card {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 5vw, 3rem);
  box-shadow: 0 10px 40px rgba(200, 90, 130, 0.14);
  overflow: hidden;
}

.balloon {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  filter: blur(0.5px);
  z-index: 0;
}
.balloon.b1 { width: 90px; height: 110px; background: #f3b8cf; top: -30px; left: -30px; }
.balloon.b2 { width: 60px; height: 74px; background: #bfe3e0; top: 40px; left: 40px; }
.balloon.b3 { width: 100px; height: 122px; background: #d9c7ec; top: -40px; right: -35px; }
.balloon.b4 { width: 55px; height: 68px; background: #f6cf9c; top: 55px; right: 30px; }

.card > * { position: relative; z-index: 1; }

.lang-toggle {
  text-align: right;
  margin-bottom: 0.75rem;
}
.lang-toggle a {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pink-dark);
  background: var(--pink-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  text-decoration: none;
}

.eyebrow {
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-size: clamp(0.85rem, 0.5vw + 0.75rem, 1rem);
  margin: 0 0 0.5rem;
}

.child-name {
  text-align: center;
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  color: var(--pink);
  font-size: clamp(2.6rem, 4vw + 1.5rem, 4.5rem);
  line-height: 1.1;
  margin: 0 0 0.15em;
}

.turning {
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: clamp(1.2rem, 1vw + 1rem, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}

.big-one {
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  color: var(--pink);
  font-size: clamp(25rem, 12vw + 2rem, 11rem);
  line-height: 0.9;
  margin: 0.05em 0 0.1em;
  text-shadow: 0.03em 0.03em 0 rgba(201, 72, 116, 0.15);
  animation: big-one-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes big-one-in {
  from {
    transform: scale(3);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.big-one-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.ada-photo {
  width: 271px;
  object-fit: cover;
  margin-bottom: -108px;
  margin-left: -20px;
  margin-right: -230px;
  opacity: 1;
  filter: brightness(1.2) saturate(1) hue-rotate(-16deg);
}

.cake-icon {
  width: clamp(59px, 40vw, 181px);
  height: auto;
  flex-shrink: 0;
  margin-left: -167px;
  margin-right: -38px;
  margin-bottom: -180px;
}

.details {
  position: relative;
  background: var(--pink-light);
  border-radius: 16px;
  padding: clamp(1rem, 3vw, 1.75rem);
  margin: auto;
  width: calc(100% - 45px);
}

.calendar-widget {
  position: absolute;
  top: -16px;
  right: -12px;
  z-index: 2;
}
.calendar-widget summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: var(--pink-dark);
  border: 2px solid var(--pink);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: clamp(0.85rem, 0.3vw + 0.8rem, 0.95rem);
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(232, 97, 143, 0.3);
}
.calendar-widget summary::-webkit-details-marker { display: none; }
.calendar-widget summary::marker { content: ""; }
.calendar-widget summary .material-symbols-outlined { font-size: 1.1rem; }
.calendar-widget[open] summary { background: var(--pink); color: #fff; }
.calendar-widget[open] summary .material-symbols-outlined { color: #fff; }
.calendar-menu a { display: flex; align-items: center; gap: 0.5rem; }
.calendar-menu a .material-symbols-outlined { font-size: 1.1rem; color: var(--pink-dark); }
.calendar-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: -21px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 195px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.4rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.calendar-menu a {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.calendar-menu a:hover { background: var(--pink-light); }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
}
.detail-row + .detail-row { border-top: 1px solid rgba(201, 72, 116, 0.15); }
.detail-icon { font-size: 1.4em; line-height: 1; flex-shrink: 0; color: var(--pink); }
.detail-label { font-weight: 600; color: var(--pink-dark); display: block; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.03em; }
.detail-value { color: var(--ink); }

.maps-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(232, 97, 143, 0.3);
}
.maps-btn:hover { background: var(--pink-dark); }
.maps-btn .material-symbols-outlined { font-size: 1.3rem; color: #fff; }
.detail-value a { color: var(--pink-dark); }

.deadline-note {
  text-align: center;
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem);
  color: var(--ink-soft);
  margin: 1.25rem 0;
}
.deadline-note strong { color: var(--pink-dark); }

.rsvp-question {
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 1vw + 1.1rem, 1.75rem);
  color: var(--ink);
  margin: 2rem 0 1.25rem;
}

.rsvp-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
.rsvp-buttons form { flex: 1 1 220px; max-width: 320px; display: flex; flex-direction: column; gap: 0.5rem; }

.party-size-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}
.party-size-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  text-align: center;
  color: var(--ink);
  background: #fff;
}
.party-size-input:focus { outline: none; border-color: var(--pink); }

.party-size-update {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.party-size-update .party-size-input { width: 4.5rem; flex: none; }
.party-size-icons {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  gap: 0.15rem;
}
.party-size-icon {
  height: 45px;
  width: auto;
  display: block;
}

.btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 1rem 1.5rem;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 0.5vw + 1rem, 1.3rem);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-yes { background: var(--pink); color: #fff; box-shadow: 0 8px 20px rgba(232, 97, 143, 0.35); }
.btn-yes:hover { background: var(--pink-dark); }
.btn-no { background: #fff; color: var(--ink-soft); border: 2px solid var(--border); }
.btn-no:hover { background: var(--pink-light); }
.btn-secondary { background: transparent; color: var(--pink-dark); border: 2px solid var(--pink-light); }

.status-banner {
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 0.6vw + 1rem, 1.4rem);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 1rem 1rem;
}
.status-yes { background: var(--green-bg); color: var(--green); }
.status-no { background: var(--pink-light); color: var(--pink-dark); }

.change-answer { text-align: center; margin-bottom: 1.5rem; }
.change-answer form { display: inline; }

.gifts-section { margin-top: 2rem; }
.gifts-intro {
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.2rem);
  text-align: center;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.gift-list { display: flex; flex-direction: column; gap: 0.9rem; }

.gift-card {
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.gift-card.picked-by-you { border-color: var(--pink); background: var(--pink-light); }
.gift-card.taken { opacity: 0.6; }

.gift-name { font-weight: 600; font-size: clamp(1.05rem, 0.4vw + 1rem, 1.2rem); }
.gift-name a { color: var(--pink-dark); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; display: inline-flex; align-items: center; gap: 0.25rem; }
.gift-name a:hover { color: var(--pink); text-decoration-color: var(--pink); }
.gift-name-external { font-size: 1rem; vertical-align: middle; }

.gift-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.gift-status { display: inline-block; font-size: 0.85em; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; }
.gift-status.open { background: var(--green-bg); color: var(--green); }
.gift-status.partly { background: #fff4e2; color: #a3721f; }
.gift-status.taken { background: #f1f1f1; color: #888; }
.gift-status.yours { background: var(--pink); color: #fff; }

.your_gift_thank_you{ 
  font-size: 0.8em;
  color: var(--pink-dark);
  margin-left: 5px;
}

.gift-action form { margin: 0; }
.btn-small {
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn-choose { background: var(--pink); color: #fff; border: 2px solid var(--pink);}
.btn-release { background: #fff; color: var(--pink-dark); border: 2px solid var(--pink); }
.btn-small:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  background: #fff;
  color: var(--ink-soft);
  border-color: var(--border);
}

.no-gift-needed {
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 1rem;
}

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li {
  background: #fdeceb;
  color: #a3392b;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  text-align: center;
}

.footer {
  text-align: center;
  margin-top: 2rem;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.05rem);
}
.footer a { color: var(--pink-dark); }

.closed-box {
  text-align: center;
  background: var(--pink-light);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.closed-box h2 { font-family: "Fredoka", sans-serif; color: var(--pink-dark); margin-top: 0; }

.home-message {
  text-align: center;
  font-size: 1.2rem;
  padding: 3rem 1rem;
}

@media (max-width: 480px) {
  .rsvp-buttons { flex-direction: column; align-items: stretch; }
  .rsvp-buttons form { max-width: none; }
  .gift-card { flex-direction: column; align-items: flex-start; }
  .gift-action { width: 100%; }
  .gift-action form, .gift-action .btn-small { width: 100%; }
  .deadline-note .deadline-time { display: none; }

  .big-one {
    font-weight: 700;
    font-size: clamp(14rem, 12vw + 2rem, 10rem);
    line-height: 0.9;
    margin: 0.05em 0 0.1em;
    text-shadow: 0.03em 0.03em 0 rgba(201, 72, 116, 0.15);
  }

  .ada-photo {
    width: 181px;
    margin-bottom: -108px;
    margin-left: -20px;
    margin-right: -230px;
  }

  .cake-icon {
    width: clamp(59px, 29vw, 171px);
    margin-left: -170px;
    margin-right: -26px;
    margin-bottom: -113px;
  }

  .details {
    width: 100%;
  }

}