@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
:root{font-family:Vazirmatn,Tahoma,sans-serif;color:#314d6c;background:#d3efff;font-synthesis:none;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}body{margin:0;min-width:300px;min-height:100vh;min-height:100dvh;overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:3px solid #2c85c8;outline-offset:3px}[hidden]{display:none!important}
.scene{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:linear-gradient(130deg,#a8dfff 0%,#c8eaff 37%,#e2f5ff 62%,#b1e0ff 100%)}
.scene:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 14% 25%,rgba(255,255,255,.58),transparent 32%),radial-gradient(circle at 85% 84%,rgba(255,208,235,.54),transparent 32%)}
.aura{position:absolute;border-radius:50%;filter:blur(25px);opacity:.54}.aura--one{width:480px;height:480px;background:#ffc4e3;top:-260px;right:-180px}.aura--two{width:510px;height:510px;background:#fff;bottom:-290px;left:-200px}
.floating{position:absolute;display:block;opacity:.75;animation:drift var(--duration,9s) ease-in-out infinite;animation-delay:var(--delay,0s);font-size:var(--sz,38px);filter:drop-shadow(0 8px 7px rgba(52,91,120,.12))}
.f1{left:7%;top:16%;--duration:8s;--sz:43px}.f2{left:21%;top:73%;--delay:-2s;--sz:45px}.f3{right:9%;top:20%;--delay:-5s;--sz:43px}.f4{right:19%;top:72%;--delay:-3s;--sz:44px}
.f5{left:4%;top:53%;--delay:-1s;--sz:28px}.f6{right:4%;top:51%;--delay:-6s;--sz:33px}.f7{right:34%;top:10%;--delay:-2s;--sz:26px}.f8{left:42%;bottom:7%;--delay:-3s;--sz:31px}
.f9{left:32%;top:26%;--delay:-7s;--sz:24px}.f10{right:32%;top:83%;--delay:-1s;--sz:29px}.f11{left:13%;bottom:15%;--delay:-4s;--sz:25px}.f12{right:13%;top:8%;--delay:-8s;--sz:25px}
.page{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:19px;padding:max(env(safe-area-inset-top),20px) 15px max(env(safe-area-inset-bottom),18px)}
.invite-card{background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.98);box-shadow:0 25px 75px rgba(46,103,143,.13),0 13px 35px rgba(221,95,154,.13);border-radius:33px;width:100%;max-width:530px;padding:35px clamp(18px,5vw,44px) 38px;text-align:center;backdrop-filter:blur(15px)}
.progress{display:flex;justify-content:center;gap:7px;direction:rtl;margin:0 auto 27px}.progress-dot{height:9px;width:9px;border-radius:50%;background:#d7e3ef;transition:width .25s,background .25s}.progress-dot.active{width:27px;border-radius:9px;background:linear-gradient(90deg,#ff70a8,#e24c91)}.progress-dot.past{background:#ffb4d1}
.screen.active{animation:appear .38s ease-out both}.feature-icon{margin:0 auto 19px;width:83px;height:83px;display:flex;justify-content:center;align-items:center;font-size:48px;border-radius:28px;background:linear-gradient(150deg,#fff3f9,#e9f7ff);box-shadow:0 10px 20px rgba(63,125,166,.09);transform:rotate(-4deg)}
.feature-icon img{max-width:100%;max-height:100%;width:100%;height:100%;border-radius:22px;object-fit:cover}
.person{display:inline-block;margin:0 0 9px;border-radius:99px;background:#e6f4ff;color:#3a81ae;padding:6px 14px;font-size:12px;font-weight:800}
.eyebrow{font-size:12px;font-weight:800;color:#e76aa5;margin:0 0 10px}h1{font-size:clamp(25px,5.7vw,34px);line-height:1.65;color:#344b65;margin:0;font-weight:900}
.description{font-size:14px;line-height:2;color:#7990a4;margin:12px auto 27px;max-width:420px}
.answers{display:flex;align-items:stretch;gap:10px;direction:rtl;width:100%;min-height:58px}
.primary-btn,.secondary-btn{border:0;border-radius:17px;min-height:56px;padding:11px 15px;white-space:nowrap;font-weight:850;transition:flex-basis .22s,flex-grow .22s,font-size .22s,min-height .22s,opacity .22s,transform .17s}
.primary-btn{background:linear-gradient(105deg,#f77eb3,#df4e96);color:white;box-shadow:0 11px 23px rgba(213,70,142,.23);font-size:16px}
.primary-btn:active,.secondary-btn:active,.food:active{transform:scale(.97)}.primary-btn:disabled{opacity:.56;cursor:wait}
.secondary-btn{background:#eaf4fc;color:#6e91af;border:1px solid #d5eaf8;font-size:15px}
#yes-btn{flex:1 1 0;min-width:0}#no-btn{flex:0 0 77px;overflow:hidden}
#no-btn.gone{flex:0 0 0!important;opacity:0;width:0;padding:0;border:0;pointer-events:none}
.helper{font-size:12px;color:#db6c9f;font-weight:700;min-height:20px;margin:15px 0 -14px}
.full-btn{width:100%;margin-top:13px}.calendar{text-align:center;background:#f4faff;border:1px solid #dbeefb;border-radius:20px;padding:13px 12px 15px;margin-bottom:20px}
.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;padding-bottom:13px;color:#427091;font-size:15px}
.month-btn{height:34px;width:36px;border:1px solid #d2e7f5;border-radius:11px;background:#fff;color:#648cab;font-size:25px;line-height:1}
.month-btn:disabled{opacity:.25;cursor:not-allowed}
.weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.weekdays{color:#93a9b7;font-size:12px;font-weight:800;margin-bottom:8px}
.calendar-days .day{border:0;border-radius:10px;min-width:0;min-height:34px;background:transparent;color:#50738f;font-size:13px}
.calendar-days .day:hover:not(:disabled){background:#ddecfc}.calendar-days .day:disabled{color:#b8cbd7;cursor:default}
.calendar-days .day.selected{background:linear-gradient(130deg,#f97db3,#e7519a);color:#fff;box-shadow:0 4px 10px rgba(220,70,143,.22)}
.time-label{display:block;text-align:right;font-size:13px;color:#517690;font-weight:800;margin:6px 1px 8px}
.time-input{width:100%;height:52px;border:1px solid #d8e9f5;border-radius:15px;padding:0 16px;font-size:17px;color:#3d6886;background:#f5fbff;direction:ltr;text-align:center;color-scheme:light}
.error{font-size:13px;color:#bb396e;margin:11px 0 0}.food-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:0 0 18px}
.food{border:2px solid #dfeefa;background:#f7fbff;color:#53728b;border-radius:18px;min-height:105px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;font-weight:850;font-size:15px;transition:transform .2s,background .2s,border .2s}
.food>span{font-size:33px;line-height:1.2}.food[aria-pressed=true]{border-color:#e979aa;background:#fff1f8;box-shadow:0 6px 18px rgba(221,82,144,.11)}
.date-highlight{font-size:15px;color:#e15596;font-weight:850;line-height:2;margin:19px 0}
.final-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin:0 auto 15px}
.final-summary span{border:1px solid #dcebf6;background:#f6fbff;border-radius:13px;padding:8px 12px;color:#4e7a98;font-size:13px}
.final-summary b{font-weight:750}.done-desc{margin:14px auto}.love-note{color:#9c7994;background:#fff2f8;border:1px dashed #f0bdd4;border-radius:16px;font-size:13px;line-height:2.1;padding:17px 14px}
.end-hearts{font-size:23px;margin-top:15px;letter-spacing:5px}
footer{color:#6a9bb9;font-size:12px;text-align:center}.heart-layer{position:fixed;inset:0;z-index:20;overflow:hidden;pointer-events:none}
.burst-heart{position:absolute;left:50%;top:50%;font-size:var(--size,24px);animation:fly var(--duration,1000ms) cubic-bezier(.16,.6,.25,1) forwards;will-change:transform,opacity}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) rotate(-10deg)}50%{transform:translate3d(18px,-31px,0) rotate(9deg)}}@keyframes appear{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fly{from{transform:translate(0,0) scale(.4) rotate(0);opacity:1}to{transform:translate(var(--x),var(--y)) scale(1.3) rotate(var(--r));opacity:0}}
@media(max-width:480px){.invite-card{padding:26px 19px 27px;border-radius:25px}.progress{margin-bottom:18px}.feature-icon{width:70px;height:70px;border-radius:22px;font-size:42px;margin-bottom:13px}.description{font-size:13px;margin:9px auto 20px}.eyebrow{font-size:11px}.answers{min-height:54px}.primary-btn,.secondary-btn{min-height:52px;border-radius:14px}#no-btn{flex-basis:67px}.calendar{padding:10px 8px}.calendar-days .day{min-height:33px}.food{min-height:98px}.page{gap:13px}}
@media(max-height:680px){.page{justify-content:flex-start}.invite-card{margin-top:auto}footer{margin-bottom:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}