/* =============================================
   ACADEMY PREP — whatsapp-fab.css
   Floating WhatsApp button with two options
   (Apply for Admission / Chat with Front Desk).
   Position: bottom-LEFT — the right edge is already used by the
   back-to-top button, the hero "scroll" hint and the editor button.
   ============================================= */

.wa-fab{
  position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:996;               /* under the header (1000) and mobile nav (999) */
  font-family:var(--font,'Poppins',sans-serif);
}

/* ── Button ── */
.wa-fab__btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:#25D366;color:#fff;
  box-shadow:0 8px 22px rgba(18,140,70,.42),0 2px 6px rgba(0,0,0,.18);
  transition:transform .25s var(--ease,ease),box-shadow .25s var(--ease,ease),background .25s;
  -webkit-tap-highlight-color:transparent;
}
.wa-fab__btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 28px rgba(18,140,70,.5),0 2px 8px rgba(0,0,0,.2)}
.wa-fab__btn:active{transform:scale(.96)}
.wa-fab__btn:focus-visible{outline:3px solid var(--primary,#fcbe15);outline-offset:3px}
.wa-fab__icon{width:32px;height:32px;display:block;transition:opacity .2s,transform .3s var(--ease,ease)}
.wa-fab__icon--close{position:absolute;width:24px;height:24px;opacity:0;transform:rotate(-90deg) scale(.6)}
.wa-fab.is-open .wa-fab__btn{background:#128C7E}
.wa-fab.is-open .wa-fab__icon--wa{opacity:0;transform:rotate(90deg) scale(.6)}
.wa-fab.is-open .wa-fab__icon--close{opacity:1;transform:none}

/* soft attention pulse (stops once opened or if reduced motion) */
.wa-fab__btn::before{
  content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;
  animation:waPulse 2.8s ease-out 2s 3;
}
.wa-fab.is-open .wa-fab__btn::before{animation:none}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.7);opacity:0}}

/* ── Options card ── */
.wa-fab__menu{
  position:absolute;left:0;bottom:calc(100% + 14px);
  width:min(300px,calc(100vw - 36px));
  background:#fff;border-radius:var(--radius,16px);padding:14px 12px 12px;
  box-shadow:0 18px 48px rgba(40,12,30,.28),0 2px 8px rgba(0,0,0,.08);
  transform-origin:bottom left;
  animation:waMenuIn .22s var(--ease,ease) both;
}
.wa-fab__menu[hidden]{display:none}
.wa-fab__menu::after{            /* pointer towards the button */
  content:'';position:absolute;left:22px;top:100%;
  border:8px solid transparent;border-top-color:#fff;
}
@keyframes waMenuIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

.wa-fab__title{margin:0 0 8px 6px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light,#888)}
.wa-fab__item{
  display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;
  text-decoration:none;color:var(--text,#2b2b2b);transition:background .2s,transform .2s;
}
.wa-fab__item + .wa-fab__item{margin-top:4px}
.wa-fab__item:hover,.wa-fab__item:focus-visible{background:rgba(135,70,103,.08);transform:translateX(2px);outline:none}
.wa-fab__item:focus-visible{box-shadow:inset 0 0 0 2px var(--primary,#fcbe15)}
.wa-fab__item-icon{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;
}
.wa-fab__item-icon--admit{background:var(--primary,#fcbe15)}
.wa-fab__item-icon--desk{background:#25D366}
.wa-fab__item-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.wa-fab__item-text strong{font-size:.9rem;font-weight:700;color:var(--secondary-dark,#3a1428)}
.wa-fab__item-text small{font-size:.74rem;font-weight:500;color:var(--text-light,#777);margin-top:2px}

@media (max-width:768px){
  .wa-fab{left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .wa-fab__btn{width:54px;height:54px}
}
@media (prefers-reduced-motion:reduce){
  .wa-fab__btn,.wa-fab__icon,.wa-fab__item{transition:none}
  .wa-fab__btn::before{animation:none}
  .wa-fab__menu{animation:none}
}
@media print{.wa-fab{display:none}}
