/* =====================================================================
   forever.css  —  "Will you be my forever?" (runaway No button)
   ===================================================================== */

.q-wrap {
  max-width: 640px;
  animation: fadeUp 0.9s both;
}
.q-wrap.fade-out { animation: qOut 0.5s ease forwards; }
@keyframes qOut { to { opacity: 0; transform: scale(0.9); visibility: hidden; } }

.q-text {
  font-family: "Fredoka", sans-serif;      /* easy to read */
  font-weight: 600;
  font-size: clamp(1.6rem, 6.5vw, 2.8rem);
  line-height: 1.3;
  background: linear-gradient(135deg, var(--gold), var(--pink-soft), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 40px;
}
.q-text .q-name {
  font-family: "Pacifico", cursive;         /* stylish par readable */
  font-size: 1.1em;
  -webkit-text-fill-color: #ffdbe8;         /* solid, saaf */
  color: #ffdbe8;
}

.q-buttons {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn-yes, .btn-no {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 16px 40px;
  border-radius: 999px;
  white-space: nowrap;           /* "No 🔪" ek hi line mein */
  -webkit-tap-highlight-color: transparent;
}
.btn-yes {
  background: linear-gradient(135deg, var(--pink), #c3379b);
  box-shadow: 0 8px 26px rgba(255, 92, 138, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.btn-yes:hover  { transform: scale(1.06); filter: brightness(1.08); }
.btn-yes:active { transform: scale(0.97); }

.btn-no {
  background: linear-gradient(135deg, #ff5a5a, #c62020);   /* red danger */
  box-shadow: 0 6px 20px rgba(220, 40, 40, 0.5);
  transition: transform 0.12s ease;
  z-index: 40;
}

/* ---- After Yes ---- */
.q-done {
  max-width: 640px;
  animation: fadeUp 0.8s both;
}
.q-done-title {
  font-family: "Fredoka", sans-serif;      /* easy to read */
  font-weight: 600;
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height: 1.2;
  background: linear-gradient(135deg, var(--gold), var(--pink-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
}
.q-done-sub {
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  color: var(--pink-soft);
  margin-bottom: 8px;
}