/* Shared billing toggle + price block (includes/billing_ui.php + assets/js/billing.js).
   Pages tune size with --bp-size (price digits) on the card or page. */

/* ---- monthly / yearly toggle ---- */
.bl-toggle{display:inline-flex;background:#f4f1e8;border:1px solid #e9e4d6;border-radius:999px;padding:5px;gap:4px}
.bl-toggle button{display:inline-flex;align-items:center;gap:7px;border:none;background:transparent;font-family:inherit;
    font-weight:800;font-size:14.5px;color:#77767f;padding:9px 20px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.bl-toggle button:hover{color:#292934}
.bl-toggle button.on{background:#fff;color:#292934;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.bl-toggle button:focus-visible{outline:2px solid #d6a928;outline-offset:2px}
.bl-save{background:#16a34a;color:#fff;font-size:11.5px;font-weight:900;padding:2px 8px;border-radius:999px;line-height:1.5;white-space:nowrap;
    animation:blSavePulse 1.8s ease-in-out infinite}
.bl-toggle button.on .bl-save{animation:none}
@keyframes blSavePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (max-width:420px){.bl-toggle button{padding:8px 14px;font-size:14px}}

/* ---- price block ---- */
.bp{line-height:1.35}
.bp-main{display:inline-flex;align-items:baseline;gap:3px;font-weight:900;color:#292934}
.bp-amt{font-size:var(--bp-size,40px);line-height:1;letter-spacing:-.5px}
.bp-cur{font-size:calc(var(--bp-size,40px) * .45);color:#a17a10;font-weight:800}
.bp-per{font-size:14px;color:#77767f;font-weight:700;margin-inline-start:4px}
.bp-before{font-size:calc(var(--bp-size,40px) * .45);color:#a6a3ab;font-weight:700;margin-inline-end:6px;align-self:center}
.bp-sub{font-size:13px;color:#77767f;font-weight:600;margin-top:6px}
.bp-sub s{color:#a6a3ab;margin-inline-end:2px}
.bp-save{display:inline-block;margin-top:8px;background:#16a34a14;color:#15803d;font-size:12.5px;font-weight:800;
    padding:4px 10px;border-radius:10px;line-height:1.5}
.bp-hint{display:inline-block;margin-top:8px;background:none;border:1px dashed #d6a928;color:#a17a10;font-family:inherit;
    font-size:12.5px;font-weight:800;padding:5px 10px;border-radius:10px;cursor:pointer;line-height:1.5;transition:background .15s}
.bp-hint:hover{background:#d6a92814}
.bp-free .bp-amt{color:#16a34a}
.bp-cur-first .bp-cur{order:-1}
.bp-cur-first .bp-before{order:-2}

/* ---- trust line ---- */
.bl-reassure{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:20px;font-size:13px;color:#5f5e68;font-weight:600}
.bl-reassure span{white-space:nowrap}

/* ---- "switch to yearly?" popup ---- */
.bl-cf-back{position:fixed;inset:0;z-index:9800;background:rgba(20,20,28,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;padding:16px;animation:blFade .2s ease}
@keyframes blFade{from{opacity:0}to{opacity:1}}
.bl-cf{background:#fff;color:#292934;width:100%;max-width:400px;border-radius:20px;text-align:center;padding:28px 22px 16px;
    border-top:6px solid #d6a928;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:blUp .28s cubic-bezier(.2,.9,.3,1.15);font-family:inherit}
@keyframes blUp{from{transform:translateY(18px);opacity:.5}to{transform:none;opacity:1}}
.bl-cf-icon{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:#16a34a14;display:flex;align-items:center;justify-content:center;font-size:26px}
.bl-cf h3{font-size:19px;font-weight:900;margin:0 0 8px}
.bl-cf p{font-size:14px;color:#5f5e68;line-height:1.8;margin:0 0 16px}
.bl-cf-yes{display:block;width:100%;background:#16a34a;color:#fff;border:none;border-radius:12px;padding:13px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer}
.bl-cf-yes:hover{background:#15803d}
.bl-cf-no{display:block;width:100%;background:none;border:none;color:#8a8994;font-family:inherit;font-size:13.5px;font-weight:700;padding:11px;cursor:pointer}
.bl-cf-no:hover{color:#292934}

@media (prefers-reduced-motion:reduce){.bl-save,.bl-cf-back,.bl-cf{animation:none}}