/* ================================================================
   הזמנה לבר מצווה — עיצוב (זהב על נייר שנהב)
   ================================================================ */
:root{
  --paper:#FBF6EA;
  --paper-2:#F3E9D2;
  --cream:#F7EFDD;
  --gold:#C49A45;
  --gold-d:#9A7833;
  --gold-l:#E3CF9B;
  --gold-soft:#B89B5E;
  --ink:#4A3F2E;
  --ink-soft:#7a6c52;
  --font-serif:'Frank Ruhl Libre', 'David Libre', serif;
  --font-sans:'Heebo', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-serif);
  color:var(--ink);
  background:
    radial-gradient(circle at 50% 0%, #FCF9F0 0%, #EFE3C9 55%, #E6D7B6 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

/* גוון זהב מודגש לטקסטים מסוימים */
.gold-text{color:var(--gold-d)}

/* ================================================================
   המסגרת (הכרטיס)
   ================================================================ */
.sheet{
  max-width:680px;
  margin:0 auto;
  padding:40px 18px 70px;
}

.card{
  position:relative;
  background:
    linear-gradient(180deg,#FCF8EE 0%, #F7EEDA 100%);
  border-radius:6px;
  box-shadow:0 30px 70px rgba(74,60,30,.28), 0 4px 14px rgba(74,60,30,.12);
  overflow:hidden;
}
/* מסגרת זהב כפולה */
.card-frame{
  position:relative;
  margin:14px;
  padding:54px 30px 60px;
  border:2px solid var(--gold);
  border-radius:3px;
  text-align:center;
}
.card-frame::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid var(--gold-soft);
  border-radius:2px;
  pointer-events:none;
  opacity:.7;
}

/* קישוטי פינות */
.corner{
  position:absolute;
  width:78px;height:78px;
  color:var(--gold);
  opacity:.92;
  z-index:2;
}
.corner svg{width:100%;height:100%;display:block}
.c-tl{top:2px;right:2px}                              /* RTL: "top-leading" = ימין */
.c-tr{top:2px;left:2px;transform:scaleX(-1)}
.c-bl{bottom:2px;right:2px;transform:scaleY(-1)}
.c-br{bottom:2px;left:2px;transform:scale(-1,-1)}

/* ================================================================
   טקסטים של ההזמנה
   ================================================================ */
.bsd{
  font-size:.8rem;
  letter-spacing:.05em;
  color:var(--gold-d);
  margin:0 0 26px;
}

.verset{
  margin:0;
  font-size:1.18rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.7;
}
.verset + .verset{margin-top:2px}

.invite-line{
  margin:0;
  font-size:1.12rem;
  font-weight:400;
  color:var(--ink);
}
.invite-line + .invite-line{margin-top:2px}

/* שם הילד — גדול, זהוב, "מובלט" */
.enfant-name{
  margin:18px 0 2px;
  font-size:clamp(3.4rem, 13vw, 5.4rem);
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  background:linear-gradient(175deg,#F2DC9A 0%, #D9B45E 30%, #B8893A 62%, #8C6526 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 2px 1px rgba(255,255,255,.35);
  filter:drop-shadow(0 3px 5px rgba(120,90,30,.35));
}
.famille-name{
  margin:0 0 6px;
  font-size:clamp(1.7rem, 6vw, 2.5rem);
  font-weight:700;
  background:linear-gradient(175deg,#E7CE84 0%, #C39B4B 55%, #9A7833 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 3px rgba(120,90,30,.28));
}

.sous-titre{
  margin:6px 0 22px;
  font-size:1.1rem;
  color:var(--ink);
}

.date-hebrew{
  margin:0;
  font-size:1.12rem;
  font-weight:500;
  color:var(--gold-d);
}
.date-civile{
  margin:4px 0 24px;
  font-size:1.05rem;
  color:var(--ink);
}
.date-civile .sep{color:var(--gold);margin:0 6px}

.lieu-nom{
  margin:0;
  font-size:1.3rem;
  font-weight:700;
  color:var(--gold-d);
}
.lieu-addr{
  margin:3px 0 26px;
  font-size:1rem;
  color:var(--ink-soft);
}

.closing{
  margin:0;
  font-size:1.02rem;
  color:var(--ink);
}
.closing + .closing{margin-top:2px}

.signataire{
  margin:30px 0 0;
  font-size:1.18rem;
  font-weight:700;
  color:var(--gold-d);
}
.memoriam-intro{
  margin:18px 0 0;
  font-size:.92rem;
  color:var(--ink-soft);
}
.memoriam-nom{
  margin:2px 0 0;
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
}

/* חותם בפינת הכרטיס */
.card-seal{
  position:absolute;
  bottom:18px;left:22px;
  width:74px;height:74px;
  opacity:.96;
  filter:drop-shadow(0 6px 10px rgba(120,90,30,.35));
  z-index:3;
}
.card-seal svg{width:100%;height:100%}

/* ================================================================
   מפריד מעוטר
   ================================================================ */
.divider{
  display:flex;
  justify-content:center;
  margin:22px 0;
  color:var(--gold);
}
.div-svg{width:min(72%,300px);height:auto}

/* ================================================================
   טופס אישור הגעה (RSVP)
   ================================================================ */
.rsvp{
  margin-top:44px;
  text-align:center;
}
.rsvp-eyebrow{
  margin:0;
  font-size:.95rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-d);
  font-family:var(--font-sans);
  font-weight:500;
}
.rsvp-card{
  background:linear-gradient(180deg,#FCF8EE 0%, #F6EDD8 100%);
  border:1px solid var(--gold-l);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(74,60,30,.16);
  padding:30px 24px 34px;
  max-width:440px;
  margin:6px auto 0;
}
.rsvp-intro{
  margin:0 0 20px;
  color:var(--ink-soft);
  font-size:1rem;
}

.form{text-align:right}
.field{margin-bottom:18px}
.field label,.field .lbl{
  display:block;
  margin-bottom:7px;
  font-size:.92rem;
  font-weight:500;
  color:var(--ink);
  font-family:var(--font-sans);
}
.field input[type=text],
.field select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--gold-l);
  border-radius:10px;
  background:#fff;
  font-size:1rem;
  font-family:var(--font-sans);
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.field input[type=text]:focus,
.field select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(196,154,69,.18);
}

.presence{display:flex;gap:12px}
.presence label{
  flex:1;
  position:relative;
  cursor:pointer;
}
.presence input{position:absolute;opacity:0;inset:0;cursor:pointer}
.presence .opt{
  display:block;
  text-align:center;
  padding:12px 8px;
  border:1px solid var(--gold-l);
  border-radius:10px;
  font-family:var(--font-sans);
  font-size:.95rem;
  color:var(--ink-soft);
  background:#fff;
  transition:all .2s;
}
.presence input:checked + .opt{
  border-color:var(--gold);
  background:linear-gradient(135deg,#F4E6C2,#E9D29A);
  color:var(--gold-d);
  font-weight:600;
}

.btn{
  width:100%;
  margin-top:6px;
  padding:14px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold) 0%, var(--gold-d) 100%);
  color:#fff;
  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:500;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(154,120,51,.3);
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(154,120,51,.36)}
.btn:active{transform:translateY(0)}

.form-err{
  background:#fbe6e6;
  color:#b53b3b;
  border-radius:9px;
  padding:10px 12px;
  margin-bottom:16px;
  font-family:var(--font-sans);
  font-size:.9rem;
  text-align:center;
}

/* הודעת תודה */
.merci{padding:8px 4px}
.merci-mark{width:70px;height:70px;margin:0 auto 14px}
.merci-mark svg{width:100%;height:100%}
.merci h3{
  margin:0 0 8px;
  font-size:1.5rem;
  color:var(--gold-d);
}
.merci p{margin:0;color:var(--ink-soft)}
.btn-link{
  display:inline-block;
  padding:10px 22px;
  border:1px solid var(--gold);
  border-radius:999px;
  color:var(--gold-d);
  text-decoration:none;
  font-family:var(--font-sans);
  font-size:.92rem;
  transition:background .2s;
}
.btn-link:hover{background:rgba(196,154,69,.12)}

/* ================================================================
   מעטפה (דף פתיחה)
   ================================================================ */
html.cover-active,
body.cover-active{overflow:hidden;height:100%}

#cover{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:34px;
  padding:24px;
  background:radial-gradient(circle at 50% 38%, #FCF8EE 0%, #ECDFC0 60%, #E3D2A8 100%);
  transition:opacity .9s ease, transform .9s ease;
}
#cover.is-open{opacity:0;transform:scale(1.12);pointer-events:none}
#cover.is-gone{display:none}

.env{
  position:relative;
  width:320px;
  max-width:82vw;
  height:214px;
  perspective:1100px;
  cursor:pointer;
}
.env-body{
  position:absolute;
  inset:0;
  background:linear-gradient(160deg,#FAF3E3 0%, #ECDABA 100%);
  border:1px solid var(--gold-l);
  border-radius:8px;
  box-shadow:0 26px 54px rgba(74,60,30,.26);
  overflow:hidden;
}
.env-body::after{                 /* קו פנימי עדין */
  content:"";position:absolute;inset:10px;border:1px solid rgba(196,154,69,.4);border-radius:4px;
}
.env-flap{
  position:absolute;
  top:0;left:0;right:0;
  height:64%;
  background:linear-gradient(160deg,#F4EAD4 0%, #E4D0AA 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform 1s cubic-bezier(.5,.05,.3,1);
  z-index:5;
  box-shadow:0 2px 6px rgba(74,60,30,.12);
}
.env-seal{
  position:absolute;
  top:52%;left:50%;
  transform:translate(-50%,-50%);
  width:66px;height:66px;
  z-index:6;
  transition:opacity .5s ease, transform .6s ease;
  filter:drop-shadow(0 4px 8px rgba(120,90,30,.4));
}
.env-seal svg{width:100%;height:100%}
#cover.is-open .env-flap{transform:rotateX(-172deg)}
#cover.is-open .env-seal{opacity:0;transform:translate(-50%,-50%) scale(.6)}

.open-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 28px;
  font-family:var(--font-sans);
  font-size:.95rem;
  letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(135deg,var(--gold) 0%, var(--gold-d) 100%);
  border:none;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(154,120,51,.32);
  animation:pulse 2.4s ease-in-out infinite;
}
.open-btn svg{width:18px;height:18px}
@keyframes pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

@media(prefers-reduced-motion:reduce){
  #cover,.env-flap,.open-btn{transition:none;animation:none}
}

/* ================================================================
   רספונסיבי
   ================================================================ */
@media(max-width:480px){
  .card-frame{padding:42px 18px 50px}
  .corner{width:58px;height:58px}
  .card-seal{width:58px;height:58px;bottom:12px;left:14px}
}