/* ============================================================
   دعوتنامه با سوپرایز 💕🐼 — Design tokens
   پالت: صورتی گرم + قلب‌های شناور + کاراکتر پاندا
   تایپوگرافی: Lalezar (نمایشی) + Vazirmatn (متن)
   ============================================================ */

:root{
  --pink-bg:     #FFD9E6;
  --pink-bg-2:   #FFC6DA;
  --pink-deep:   #FF6F91;
  --pink-dark:   #E14D71;
  --pink-soft:   #FFEFF3;
  --card-cream:  #FFF6F8;
  --panda-black: #2E2A2E;
  --panda-white: #FFFFFF;
  --heart-red:   #FF4D6D;
  --sparkle-gold:#FFD166;
  --ink-text:    #3B2430;
  --paper-text:  #4A2E38;
  --radius-lg: 26px;
  --radius-md: 16px;
  --shadow-deep: 0 22px 55px -18px rgba(225, 77, 113, 0.45);
  --font-display: 'Lalezar', 'Vazirmatn', sans-serif;
  --font-body: 'Vazirmatn', Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink-text);
  background: linear-gradient(180deg, var(--pink-bg) 0%, var(--pink-bg-2) 100%);
  background-attachment: fixed;
  direction: rtl;
  position: relative;
  overflow-x: hidden;
}

/* الگوی ظریف قلب در پس‌زمینه، بسیار کم‌رنگ */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M45 70 C20 52 8 38 8 24 C8 12 17 4 27 4 C35 4 42 9 45 16 C48 9 55 4 63 4 C73 4 82 12 82 24 C82 38 70 52 45 70 Z' fill='%23FF6F91'/%3E%3C/svg%3E");
  background-size: 90px 90px;
}

.container{
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 18px 60px;
  position: relative;
  z-index: 1;
}

/* ---------------- قلب‌ها و درخشش‌های شناور (تزئینی) ---------------- */
.floating-decor{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.floating-decor span{
  position: absolute;
  font-size: 22px;
  opacity: 0.55;
  animation: float-up linear infinite;
}
@keyframes float-up{
  0%   { transform: translateY(10vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-110vh) rotate(25deg); opacity: 0; }
}

/* ---------------- تایپوگرافی ---------------- */
h1, h2, .display{
  font-family: var(--font-display);
  color: var(--pink-dark);
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.4;
  text-shadow: 0 2px 0 rgba(255,255,255,0.6);
}
h1 { font-size: clamp(28px, 6.5vw, 44px); text-align: center; margin: 8px 0 4px; }
h2 { font-size: clamp(20px, 4vw, 26px); }
p  { line-height: 1.9; font-size: 15.5px; }
.eyebrow{
  display: inline-block;
  font-size: 13px;
  color: var(--pink-dark);
  opacity: 0.85;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

/* ---------------- کارت شیشه‌ای عمومی ---------------- */
.glass-card{
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,111,145,0.35);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  box-shadow: var(--shadow-deep);
  backdrop-filter: blur(6px);
}
.glass-card p, .glass-card label { color: var(--paper-text); }

/* ---------------- پاندای مهمان ---------------- */
.panda-mascot{ display:block; filter: drop-shadow(0 8px 14px rgba(46,42,46,0.25)); }
.panda-wrap{ display:flex; justify-content:center; margin-bottom: 6px; }
.panda-wrap.bounce .panda-mascot{ animation: panda-bounce 3.2s ease-in-out infinite; }
@keyframes panda-bounce{
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

/* ---------------- فرم‌ها ---------------- */
.field { margin-bottom: 18px; }
.field label{
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--pink-dark);
  font-weight: 700;
}
input[type="text"], input[type="tel"], input[type="number"], input[type="password"], select, textarea{
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  font-family: var(--font-body);
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(255,111,145,0.4);
  background: rgba(255,255,255,0.95);
  color: var(--ink-text);
  outline: none;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--pink-dark);
  box-shadow: 0 0 0 4px rgba(225,77,113,0.2);
}
textarea{ resize: vertical; min-height: 84px; }
.hint { font-size: 12.5px; color: rgba(74,46,56,0.75); margin-top: 6px; }
.error-text { color: #C23B57; font-weight:600; margin-top: 6px; }

/* ---------------- دکمه‌ها ---------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 20px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary{
  background: linear-gradient(135deg, var(--pink-deep), var(--pink-dark));
  color: #fff;
  box-shadow: 0 12px 26px -8px rgba(225,77,113,0.55);
}
.btn-primary:hover { box-shadow: 0 16px 32px -8px rgba(225,77,113,0.7); }
.btn-ghost{
  background: transparent;
  color: var(--pink-dark);
  border: 1.5px solid rgba(255,111,145,0.5);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-copy{
  background: var(--panda-white);
  color: var(--pink-dark);
  border: 1.5px solid rgba(255,111,145,0.5);
  width:auto;
}
.btn-copy.copied{ background: var(--pink-deep); color:#fff; border-color: var(--pink-deep); }

/* ---------------- پاکت‌نامه (المان امضادار) ---------------- */
.envelope-stage{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 10px;
  perspective: 1200px;
}
.envelope{
  position: relative;
  width: min(320px, 82vw);
  aspect-ratio: 3 / 2;
  cursor: pointer;
  transform-style: preserve-3d;
}
.envelope-body{
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--card-cream), var(--pink-soft));
  border-radius: 10px;
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.envelope-flap{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 62%;
  background: linear-gradient(160deg, var(--pink-deep), var(--pink-dark));
  clip-path: polygon(0 0, 100% 0, 50% 78%);
  transform-origin: top center;
  transition: transform .9s cubic-bezier(.34,1.56,.64,1);
  z-index: 3;
}
.envelope.is-open .envelope-flap{
  transform: rotateX(150deg);
}
.wax-seal{
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px; height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FF95AC, var(--heart-red) 65%, #B23B52 100%);
  box-shadow: 0 6px 14px rgba(178,59,82,0.5), inset 0 2px 4px rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  z-index: 4;
  animation: seal-breathe 2.6s ease-in-out infinite;
}
.envelope.is-open .wax-seal{ opacity: 0; transition: opacity .3s; animation: none; }
@keyframes seal-breathe{
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.08); }
}
.envelope-hint{
  margin-top: 18px;
  color: var(--pink-dark);
  font-size: 14px;
  text-align: center;
  opacity: 0.9;
  font-weight: 600;
}
.envelope.is-open ~ .envelope-hint { opacity: 0; height: 0; margin: 0; overflow: hidden; }

/* ---------------- کارت پیام داخل پاکت ---------------- */
.card-letter{
  max-width: 480px;
  margin: 0 auto;
  background: var(--card-cream);
  color: var(--paper-text);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  box-shadow: var(--shadow-deep);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.card-letter.is-visible{ opacity: 1; transform: translateY(0); }
.card-letter .to-name{
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 32px);
  color: var(--pink-dark);
  margin: 0 0 10px;
}
.card-letter .message{ font-size: 16.5px; line-height: 2; }
.card-letter .from-signature{
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--pink-deep);
  text-align: left;
}

/* ---------------- یادداشت شخصی (پیام اختصاصی فرستنده) ---------------- */
.personal-note{
  margin: 4px 0 22px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #FFF0F4, #FFE3EC);
  border: 1.5px dashed rgba(255,111,145,0.55);
  border-radius: var(--radius-md);
  position: relative;
}
.personal-note::before{
  content: "💌";
  position: absolute;
  top: -14px;
  right: 18px;
  font-size: 22px;
  background: var(--card-cream);
  padding: 2px 6px;
  border-radius: 50%;
}
.personal-note p{ margin: 4px 0 0; font-style: italic; color: var(--paper-text); }
.personal-note .note-label{
  font-size: 12px;
  color: var(--pink-dark);
  font-weight: 700;
  letter-spacing: 1px;
}

/* ---------------- ویزارد صفحه به صفحه (یک سوال در هر صفحه) ---------------- */
.wizard-dots{
  display: flex; gap: 7px; justify-content: center; margin-bottom: 20px;
}
.wizard-dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,111,145,0.3);
  transition: width .3s ease, background .3s ease;
}
.wizard-dot.is-active{ width: 30px; background: var(--pink-deep); }
.wizard-step.is-active{ animation: wizard-step-in .35s ease; }
body.js-wizard-ready .wizard-step:not(.is-active){ display: none; }
@keyframes wizard-step-in{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------------- سوال «قبول می‌کنی؟» بالای دکمه‌ها ---------------- */
.ask-question{
  text-align: center;
  font-weight: 700;
  color: var(--pink-dark);
  font-size: 17px;
  margin: 4px 0 14px;
}

/* ---------------- پاسخ (بله بزرگ‌تر می‌شه / نه کوچیک و محو می‌شه) ---------------- */
.answer-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  min-height: 56px;
}
.answer-row .btn-primary{
  flex: 2;
  transition: font-size .3s ease, padding .3s ease, box-shadow .3s ease;
}
.btn-decline{
  flex: 1;
  background: rgba(74,46,56,0.08);
  color: var(--paper-text);
  border: 1.5px solid rgba(74,46,56,0.18);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  padding: 15px 20px;
  transition: font-size .3s ease, opacity .3s ease, padding .3s ease, flex .3s ease, transform .25s ease;
}
.btn-decline.is-vanished{
  opacity: 0;
  pointer-events: none;
  flex: 0;
  padding: 0;
  margin: 0;
  width: 0;
  overflow: hidden;
}
.decline-note{
  text-align: center;
  font-size: 13px;
  color: var(--pink-dark);
  font-weight: 700;
  margin-top: 12px;
  min-height: 18px;
}

/* ---------------- سوپرایز قبول شدن (جرقه/برق/انفجار رنگی) ---------------- */
.celebration-flash{
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,111,145,0) 70%);
  animation: flash-fade .9s ease-out forwards;
}
@keyframes flash-fade{ 0%{ opacity:1; } 100%{ opacity:0; } }
.celebration-burst{ position: fixed; inset: 0; z-index: 61; pointer-events: none; overflow: hidden; }
.celebration-burst span{
  position: absolute; top: 50%; left: 50%;
  font-size: 28px;
  opacity: 0;
  animation: burst-particle 1.7s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes burst-particle{
  0%   { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.15) rotate(var(--rot)); opacity: 0; }
}
.celebration-result{
  background: var(--card-cream);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  box-shadow: var(--shadow-deep);
  max-width: 480px;
  margin: 0 auto;
}
.celebration-result .answer-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding: 12px 14px; border-radius: var(--radius-md);
  background: rgba(255,111,145,0.1); margin-bottom: 10px;
}

/* ---------------- سوال سفارشی ---------------- */
.question-block{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,111,145,0.35);
}
.question-title{ font-weight: 700; margin-bottom: 12px; color: var(--pink-dark); }
.option-list{ display: flex; flex-direction: column; gap: 10px; }
.option-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(255,111,145,0.25);
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.option-item.is-selected{
  border-color: var(--pink-deep);
  background: rgba(255,111,145,0.15);
}
.option-item .opt-link{
  font-size: 12px;
  color: var(--pink-dark);
  text-decoration: underline;
}
.preview-badge{
  display:inline-block; font-size:11.5px; background: var(--sparkle-gold); color:#5c4400;
  padding: 2px 10px; border-radius:999px; margin-inline-start:8px; font-weight:700;
}

/* ---------------- وضعیت نهایی (تشکر) ---------------- */
.result-hero{ text-align: center; padding: 40px 10px; }
.result-hero .emoji{ font-size: 56px; }

/* ---------------- OTP ورودی کد ---------------- */
.otp-inputs{
  display: flex;
  gap: 10px;
  justify-content: center;
  direction: ltr;
}
.otp-inputs input{
  width: 48px; height: 58px;
  text-align: center;
  font-size: 24px;
  padding: 0;
}

/* ---------------- صفحه‌ی فرود (پیش‌نمایش) ---------------- */
.hero-title-wrap{ text-align:center; margin-bottom: 10px; }
.landing-cta{ margin-top: 28px; }
.preview-frame{
  position: relative;
  border-radius: var(--radius-lg);
  padding: 4px;
  background: linear-gradient(135deg, var(--pink-deep), var(--sparkle-gold));
}
.preview-frame-inner{
  background: var(--pink-soft);
  border-radius: calc(var(--radius-lg) - 4px);
  padding: 20px 16px 26px;
}
.link-box{
  word-break: break-all;
  background: rgba(255,255,255,0.55);
  padding: 12px 16px;
  border-radius: 14px;
  font-family: monospace;
  direction: ltr;
  text-align: center;
  font-size: 15px;
  color: var(--pink-dark);
  font-weight: 700;
}

/* ---------------- ریسپانسیو ---------------- */
@media (max-width: 380px){
  .container{ padding: 16px 12px 40px; }
  .otp-inputs input{ width: 40px; height: 50px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible, .option-item:focus-visible{
  outline: 3px solid var(--pink-dark);
  outline-offset: 2px;
}

footer.tiny{
  text-align: center;
  color: rgba(74,46,56,0.55);
  font-size: 12px;
  margin-top: 40px;
}
footer.tiny a{ color: var(--pink-dark); text-decoration: none; font-weight: 700; }