/* BunnyHop — Welcome Popup | public/css/welcome-popup.css
   Mobile-first. Responsive. No emojis. */

@keyframes bh-popup-in   { from{opacity:0;transform:translateY(40px) scale(0.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes bh-popup-out  { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(24px) scale(0.96)} }
@keyframes bh-popup-bunny{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes bh-popup-spin { to{transform:rotate(360deg)} }

/* ── OVERLAY ───────────────────────────────────────────── */
.bh-popup-overlay{
    position:fixed;inset:0;z-index:99999;
    background:rgba(8,14,40,0.65);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    padding:16px;
    transition:opacity .3s ease;
}
.bh-popup-overlay[hidden]{ display:none; }

/* ── CARD ───────────────────────────────────────────────── */
.bh-popup-card{
    width:100%;
    max-width:400px;        /* mobile default */
    background:#ffffff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,0.35);
    animation:bh-popup-in .42s cubic-bezier(0.16,1,0.3,1) both;
    position:relative;
}
.bh-popup-card.closing{
    animation:bh-popup-out .28s ease forwards;
}

/* ── BANNER IMAGE ───────────────────────────────────────── */
.bh-popup-img{
    width:100%;
    height:180px;
    position:relative;
    background:#1A5CB0;
    overflow:hidden;
}
/* Fallback gradient header (no image uploaded) */
.bh-popup-img-gradient{
    width:100%;height:100%;
    background:linear-gradient(140deg,#0E3A78 0%,#1A5CB0 60%,#1249A0 100%);
    display:flex;align-items:center;justify-content:center;
    position:relative;
}
.bh-popup-deco1{position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,0.06);top:-60px;left:-50px;}
.bh-popup-deco2{position:absolute;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,0.04);bottom:-20px;right:10px;}
.bh-popup-deco3{position:absolute;width:60px;height:60px;border-radius:50%;background:rgba(255,140,0,0.14);bottom:20px;left:20px;}
.bh-popup-img-brand{text-align:center;position:relative;z-index:1;}
.bh-popup-school-name{
    font-family:Georgia,'Times New Roman',serif;
    font-size:32px;font-weight:700;color:#fff;line-height:1;letter-spacing:0.5px;
}
.bh-popup-school-sub{
    font-size:12px;color:rgba(255,255,255,0.65);
    font-family:Arial,Helvetica,sans-serif;
    margin-top:5px;letter-spacing:0.3px;
}

/* Close button */
.bh-popup-close{
    position:absolute;top:10px;right:10px;z-index:10;
    width:30px;height:30px;
    background:rgba(0,0,0,0.40);
    border:1.5px solid rgba(255,255,255,0.28);
    border-radius:50%;color:#fff;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:background .2s;
    -webkit-tap-highlight-color:transparent;
}
.bh-popup-close:hover{ background:rgba(0,0,0,0.60); }

/* Orange bar */
.bh-popup-orange-bar{ height:3px;background:#FF8C00; }

/* ── HEADING ────────────────────────────────────────────── */
.bh-popup-heading{
    padding:16px 18px 10px;
    text-align:center;
}
.bh-popup-badge{
    display:inline-block;
    background:#EBF3FF;color:#1A5CB0;
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;
    padding:4px 14px;border-radius:50px;
    border:1px solid rgba(26,92,176,0.18);
    margin-bottom:9px;
}
.bh-popup-title{
    font-family:Georgia,'Times New Roman',serif;
    font-size:21px;font-weight:700;color:#1C1C2E;
    line-height:1.2;margin-bottom:7px;
}
.bh-popup-programmes{
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;color:#6B7280;font-weight:600;line-height:1.6;
}
.bh-popup-programmes span{ color:#1A5CB0;font-weight:700; }

/* ── TIMER ───────────────────────────────────────────────── */
.bh-popup-timer-section{
    background:#F9FAFB;
    border-top:0.5px solid #F3F4F6;
    border-bottom:0.5px solid #F3F4F6;
    padding:12px 18px;
}
.bh-popup-timer-label{
    font-family:Arial,Helvetica,sans-serif;
    font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;
    color:#9CA3AF;text-align:center;margin-bottom:9px;
}
.bh-popup-timer-row{
    display:flex;gap:6px;justify-content:center;
}
.bh-popup-tbox{
    flex:1;max-width:72px;
    background:#fff;border-radius:10px;
    padding:9px 4px 7px;text-align:center;
    border:0.5px solid #E5E7EB;
}
.bh-popup-tnum{
    font-family:Georgia,'Times New Roman',serif;
    font-size:22px;font-weight:700;color:#1A5CB0;line-height:1;
    min-width:36px;display:block;
}
.bh-popup-tunit{
    font-family:Arial,Helvetica,sans-serif;
    font-size:8px;font-weight:700;color:#9CA3AF;
    text-transform:uppercase;letter-spacing:0.3px;margin-top:4px;
}
.bh-popup-tcolon{
    font-size:18px;color:#D1D5DB;
    display:flex;align-items:center;padding-top:4px;
}

/* ── CTA BUTTONS ────────────────────────────────────────── */
.bh-popup-cta{
    padding:13px 18px 0;
    display:flex;flex-direction:column;gap:9px;
}
.bh-popup-btn-primary{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:14px 16px;
    background:#1A5CB0;color:#fff;
    border-radius:12px;text-decoration:none;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;font-weight:700;
    transition:all .25s;
    -webkit-tap-highlight-color:transparent;
}
.bh-popup-btn-primary:hover{ background:#154D96;color:#fff;transform:translateY(-1px); }
.bh-popup-btn-wa{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:13px 16px;
    background:#25D366;color:#fff;
    border-radius:12px;text-decoration:none;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;font-weight:700;
    transition:all .25s;
    -webkit-tap-highlight-color:transparent;
}
.bh-popup-btn-wa:hover{ background:#22C55E;color:#fff;transform:translateY(-1px); }

/* ── BUNNY ROW ───────────────────────────────────────────── */
.bh-popup-bunny-row{
    display:flex;align-items:flex-end;gap:10px;
    padding:10px 18px 0;
}
.bh-popup-bunny-img{
    width:60px;height:auto;
    object-fit:contain;object-position:bottom;
    animation:bh-popup-bunny 3s ease-in-out infinite;
    flex-shrink:0;
}
.bh-popup-bunny-speech{
    flex:1;
    background:#EBF3FF;color:#1A5CB0;
    border-radius:12px 12px 12px 0;
    padding:9px 12px;margin-bottom:8px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;font-weight:700;line-height:1.5;
    border:0.5px solid rgba(26,92,176,0.15);
}

/* Privacy note */
.bh-popup-privacy{
    display:flex;align-items:center;justify-content:center;gap:5px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px;color:#9CA3AF;
    padding:8px 18px 14px;text-align:center;
}

/* ── DESKTOP — wider card ───────────────────────────────── */
@media(min-width:640px){
    .bh-popup-card{ max-width:460px; }
    .bh-popup-img{ height:200px; }
    .bh-popup-title{ font-size:24px; }
    .bh-popup-tnum{ font-size:24px; }
    .bh-popup-tbox{ max-width:84px; }
    .bh-popup-bunny-img{ width:70px; }
}