/* =========================================================
   WhatsApp Channel Invitation Popup
   Self-contained: relies on CSS variables and fonts already defined
   globally by style.css (--navy, --gold, --ivory, --font-display,
   --font-body). No variables are redefined here, so there is zero
   risk of conflicting with the main stylesheet.
   ========================================================= */

.wa-popup-backdrop{
  position:fixed; inset:0; z-index:300; background:rgba(8,27,48,.62);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
.wa-popup-backdrop.open{ opacity:1; visibility:visible; }

/* ---- Envelope ---- */
.wa-envelope-wrap{ position:absolute; width:300px; opacity:0; }
.wa-popup-backdrop.open .wa-envelope-wrap{ animation: waEnvelopeFade 1.6s ease forwards .3s; }

.wa-envelope-body{
  width:300px; height:185px; border-radius:8px; position:relative;
  background: linear-gradient(160deg, var(--ivory), #e8dfc8);
  box-shadow:0 25px 50px rgba(0,0,0,.3);
}
.wa-envelope-body::before{
  content:''; position:absolute; inset:0; border-radius:8px;
  background: linear-gradient(135deg, transparent 49%, rgba(14,42,71,.06) 50%, transparent 51%);
}
.wa-envelope-flap{
  position:absolute; top:0; left:0; width:300px; height:118px;
  background: linear-gradient(160deg, #fffdf8, var(--ivory));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center; transform-style:preserve-3d;
  box-shadow: 0 2px 0 rgba(14,42,71,.06);
}
.wa-popup-backdrop.open .wa-envelope-flap{ animation: waFlapOpen .7s ease-in forwards .3s; }

.wa-envelope-seal{
  position:absolute; top:72px; left:50%; transform:translateX(-50%);
  width:54px; height:54px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center; z-index:2;
  box-shadow:0 6px 14px rgba(14,42,71,.25);
}
.wa-envelope-seal svg{ width:26px; height:28px; }
.wa-envelope-seal .sail-main{ fill:var(--navy); }
.wa-envelope-seal .sail-small{ fill:var(--navy-deep, #081b30); }
.wa-envelope-seal .hull{ fill:var(--navy); }
.wa-envelope-seal .flag{ fill:var(--ivory); }

@keyframes waFlapOpen{ 0%{ transform:rotateX(0deg); } 100%{ transform:rotateX(-175deg); } }
@keyframes waEnvelopeFade{ 0%,55%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(.9); } }

/* ---- Invitation card (luxury frame treatment) ---- */
.wa-invitation{
  position:relative; width:100%; max-width:480px; background:var(--ivory); border-radius:4px;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
  opacity:0; transform:scale(.7) translateY(30px);
  border:1px solid rgba(217,164,65,.6);
}
.wa-popup-backdrop.open .wa-invitation{ animation: waCardReveal 1s cubic-bezier(.2,.9,.3,1.2) forwards .75s; }
.wa-invitation::before{
  content:''; position:absolute; inset:8px; border:1px solid rgba(217,164,65,.35); pointer-events:none;
}
@keyframes waCardReveal{ 0%{ opacity:0; transform:scale(.7) translateY(30px); } 100%{ opacity:1; transform:scale(1) translateY(0); } }

.wa-inv-close{
  position:absolute; top:16px; right:18px; width:30px; height:30px; border-radius:50%;
  background:rgba(14,42,71,.08); border:none; color:var(--navy); font-size:17px; cursor:pointer; z-index:3;
  font-family: var(--font-body);
}
[dir="rtl"] .wa-inv-close{ right:auto; left:18px; }

.wa-inv-top{ padding:44px 40px 26px; text-align:center; }
.wa-sail-mark{ width:52px; margin:0 auto 4px; animation: waSailSway 3s ease-in-out infinite; transform-origin:bottom center; }
.wa-sail-mark .sail-main{ fill:var(--navy); }
.wa-sail-mark .sail-small{ fill:var(--gold); }
.wa-sail-mark .hull{ fill:var(--navy); }
.wa-sail-mark .flag{ fill:var(--gold); }
@keyframes waSailSway{ 0%,100%{ transform:rotate(-4deg) translateY(0); } 50%{ transform:rotate(4deg) translateY(-3px); } }

.wa-inv-eyebrow{
  font-family:var(--font-body); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin:0 0 14px;
}
.wa-inv-top h2{ font-family:var(--font-display); color:var(--navy); font-size:23px; font-weight:700; margin:0; line-height:1.55; }

.wa-inv-divider{ width:64px; height:1px; background:rgba(217,164,65,.6); margin:18px auto 20px; position:relative; }
.wa-inv-divider::after{
  content:'◆'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--gold); font-size:9px; background:var(--ivory); padding:0 8px;
}

.wa-inv-bottom{ padding:0 42px 42px; text-align:center; }
.wa-inv-bottom p{ font-family:var(--font-body); color:#3c5470; font-size:14.5px; line-height:1.85; margin:0 0 30px; }

.wa-btn{
  display:inline-flex; align-items:center; gap:9px; background:transparent; color:#1a7a4a;
  text-decoration:none; font-weight:600; font-size:14px; letter-spacing:.02em;
  padding:13px 32px; border-radius:2px; border:1.5px solid #25D366; font-family:var(--font-body);
  transition:background .2s;
}
.wa-btn:hover{ background:rgba(37,211,102,.08); }
.wa-btn svg{ width:17px; height:17px; fill:#1a7a4a; flex-shrink:0; }

@media (max-width:480px){
  .wa-envelope-wrap, .wa-envelope-body, .wa-envelope-flap{ width:250px; }
  .wa-envelope-body{ height:155px; }
  .wa-envelope-flap{ height:98px; }
  .wa-envelope-seal{ top:58px; }
  .wa-inv-top{ padding:36px 26px 22px; }
  .wa-inv-bottom{ padding:0 26px 32px; }
}