/* MedPlus Vitals Bar */
:root{--mvb-accent:#2bff9a;--mvb-heart:#ff3b5c;--mvb-beat:.833s;--mvb-h:66px}
body.mvb-on{padding-bottom:calc(var(--mvb-h) + 26px + env(safe-area-inset-bottom))}

.mvb,.mvb *{box-sizing:border-box}
.mvb{position:fixed;inset:auto 0 0 0;z-index:99990;pointer-events:none;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
.mvb>*{pointer-events:auto}

/* ---------- Bar ---------- */
.mvb-bar{
  position:relative;margin:0 auto calc(10px + env(safe-area-inset-bottom));width:calc(100% - 20px);max-width:520px;height:var(--mvb-h);
  display:grid;grid-template-columns:1fr 1fr 84px 1fr 1fr;align-items:center;
  background:linear-gradient(180deg,rgba(10,26,34,.92),rgba(4,12,17,.96));
  border:1px solid rgba(255,255,255,.07);border-radius:22px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s;
}
.mvb-bar::before{ /* faint monitor grid */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(43,255,154,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(43,255,154,.06) 1px,transparent 1px);
  background-size:12px 12px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 80%);mask:linear-gradient(180deg,#000,transparent 80%);
}
.mvb.is-hidden .mvb-bar{transform:translateY(calc(100% + 30px));opacity:0}

.mvb-ecg{position:absolute;left:0;top:-30px;width:100%;height:36px;pointer-events:none}

.mvb-item{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;
  color:rgba(214,234,240,.55);text-decoration:none!important;font-size:10.5px;font-weight:600;letter-spacing:.02em;
  transition:color .3s;
}
.mvb-item svg{width:23px;height:23px;transition:transform .35s cubic-bezier(.3,1.6,.5,1),filter .3s}
.mvb-item span{line-height:1;white-space:nowrap}
.mvb-item:active svg{transform:scale(.86)}
.mvb-item.is-active{color:var(--mvb-accent)}
.mvb-item.is-active svg{transform:translateY(-2px);filter:drop-shadow(0 0 6px var(--mvb-accent))}
.mvb-item.is-active::after{content:"";position:absolute;bottom:7px;width:4px;height:4px;border-radius:50%;background:var(--mvb-accent);box-shadow:0 0 8px var(--mvb-accent)}
.mvb-item:focus-visible,.mvb-heart:focus-visible,.mvb-act:focus-visible{outline:2px solid var(--mvb-accent);outline-offset:3px;border-radius:12px}

/* ---------- Heart ---------- */
.mvb-heart{
  position:relative;justify-self:center;width:64px;height:64px;margin-top:-34px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#1c2f38,#081319 70%);
  box-shadow:0 10px 26px -6px rgba(0,0,0,.7),0 0 0 6px rgba(4,12,17,.96),0 0 30px -4px color-mix(in srgb,var(--mvb-heart) 55%,transparent);
  color:var(--mvb-heart);transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}
.mvb-heart:active{transform:scale(.92)}
.mvb-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mvb-ring circle{fill:none;stroke-width:3}
.mvb-ring-bg{stroke:rgba(255,255,255,.08)}
.mvb-ring-fg{stroke:var(--mvb-accent);stroke-linecap:round;stroke-dasharray:182.2;stroke-dashoffset:182.2;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 3px var(--mvb-accent))}
.mvb-heart-ic{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;fill:currentColor;filter:drop-shadow(0 0 8px var(--mvb-heart));animation:mvb-beat var(--mvb-beat) infinite;transition:opacity .25s,transform .35s}
@keyframes mvb-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(.96)}36%{transform:scale(1.1)}55%{transform:scale(1)}}
.mvb-x{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:0;transform:rotate(-90deg) scale(.5);transition:.35s}
.mvb-x::before,.mvb-x::after{content:"";position:absolute;left:10px;top:0;width:2.5px;height:22px;border-radius:2px;background:#fff}
.mvb-x::before{transform:rotate(45deg)}.mvb-x::after{transform:rotate(-45deg)}
.mvb.is-open .mvb-heart-ic{opacity:0;transform:scale(.4)}
.mvb.is-open .mvb-x{opacity:1;transform:none}

/* ---------- Code cart ---------- */
.mvb-scrim{position:fixed;inset:0;background:radial-gradient(120% 70% at 50% 100%,rgba(2,8,12,.82),rgba(2,8,12,.55));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.35s}
.mvb.is-open .mvb-scrim{opacity:1;visibility:visible}
.mvb-cart{position:absolute;left:50%;bottom:calc(var(--mvb-h) + 10px + env(safe-area-inset-bottom));width:min(340px,calc(100vw - 32px));transform:translateX(-50%);visibility:hidden;pointer-events:none}
.mvb.is-open .mvb-cart{visibility:visible;pointer-events:auto}

.mvb-monitor{
  position:relative;margin-bottom:118px;padding:14px 16px 12px;border-radius:18px;color:#d8f7ea;
  background:linear-gradient(180deg,#0b1d24,#061217);border:1px solid color-mix(in srgb,var(--mvb-accent) 25%,transparent);
  box-shadow:0 20px 40px -14px rgba(0,0,0,.7),inset 0 0 30px -12px color-mix(in srgb,var(--mvb-accent) 40%,transparent);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  opacity:0;transform:translateY(20px) scale(.96);transition:.4s cubic-bezier(.2,.8,.2,1);
}
.mvb.is-open .mvb-monitor{opacity:1;transform:none;transition-delay:.05s}
.mvb-mon-top{display:flex;align-items:center;gap:10px;font-size:11px}
.mvb-live{display:inline-flex;align-items:center;gap:5px;color:var(--mvb-heart);font-weight:700;letter-spacing:.1em}
.mvb-live i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:mvb-blink var(--mvb-beat) infinite}
@keyframes mvb-blink{50%{opacity:.25}}
.mvb-mon-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9fc7bb}
.mvb-readings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.mvb-read{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.mvb-read small{display:block;font-size:9.5px;letter-spacing:.14em;opacity:.6}
.mvb-read b{font-size:30px;line-height:1.05;font-weight:700;font-variant-numeric:tabular-nums}
.mvb-read span{margin-left:3px;font-size:11px;opacity:.6}
.mvb-read--prog b{color:var(--mvb-accent);text-shadow:0 0 12px color-mix(in srgb,var(--mvb-accent) 60%,transparent)}
.mvb-read--streak b{color:#ffc94d;text-shadow:0 0 12px rgba(255,201,77,.5)}
.mvb-meter{height:4px;margin-top:10px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.mvb-meter i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--mvb-accent) 50%,transparent),var(--mvb-accent));box-shadow:0 0 10px var(--mvb-accent);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.mvb-mon-sub{margin:9px 0 0;font-size:11px;color:#86a9a0}
.mvb.is-guest .mvb-readings,.mvb.is-guest .mvb-meter{display:none}
.mvb.is-guest .mvb-mon-label{color:#d8f7ea;font-size:13px;font-weight:700;white-space:normal}

/* radial arc of actions around the heart */
.mvb-arc{position:absolute;left:50%;bottom:-6px;width:0;height:0}
.mvb-act{
  --span:calc((var(--n) - 1) * 42deg);
  --a:calc(-90deg - var(--span) / 2 + 42deg * var(--i));
  position:absolute;left:-29px;top:-29px;width:58px;height:58px;display:flex;flex-direction:column;align-items:center;text-decoration:none!important;
  transform:rotate(0) translateX(0) rotate(0) scale(.3);opacity:0;
  transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .3s;transition-delay:calc(var(--i) * 40ms);
}
.mvb.is-open .mvb-act{transform:rotate(var(--a)) translateX(104px) rotate(calc(var(--a) * -1)) scale(1);opacity:1}
.mvb-act-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#0a1a20;background:var(--mvb-accent);box-shadow:0 0 0 4px rgba(43,255,154,.12),0 8px 20px -6px color-mix(in srgb,var(--mvb-accent) 70%,transparent)}
.mvb-act-ic svg{width:22px;height:22px}
.mvb-act:nth-child(2) .mvb-act-ic{background:#ffc94d}
.mvb-act:nth-child(3) .mvb-act-ic{background:#58d4ff}
.mvb-act:nth-child(4) .mvb-act-ic{background:#25d366}
.mvb-act-lb{margin-top:6px;font-size:10.5px;font-weight:700;color:#e8fff6;white-space:nowrap;text-shadow:0 1px 4px #000}
.mvb-act:active .mvb-act-ic{transform:scale(.9)}

/* RTL keeps arc symmetric; nothing to flip except label margin */
[dir="rtl"] .mvb-read span{margin:0 3px 0 0}

@media (max-width:360px){.mvb-item span{font-size:9.5px}.mvb-bar{grid-template-columns:1fr 1fr 76px 1fr 1fr}}
@media (prefers-reduced-motion:reduce){.mvb-heart-ic,.mvb-live i{animation:none}.mvb *{transition-duration:.01s!important}}

/* Theme-proofing (WoodMart / Elementor button styles) */
#mvb .mvb-heart,#mvb .mvb-heart:hover,#mvb .mvb-heart:focus{
  border-radius:50%!important;padding:0!important;min-height:0!important;min-width:0!important;line-height:1!important;border:0!important;
  background:radial-gradient(circle at 35% 30%,#1c2f38,#081319 70%)!important;color:var(--mvb-heart)!important;text-transform:none!important;letter-spacing:0!important;
  box-shadow:0 10px 26px -6px rgba(0,0,0,.7),0 0 0 6px rgba(4,12,17,.96),0 0 30px -4px color-mix(in srgb,var(--mvb-heart) 55%,transparent)!important;
}
#mvb a,#mvb a:hover{text-decoration:none!important;box-shadow:none}
#mvb .mvb-item:hover{color:var(--mvb-accent)}
#mvb svg{max-width:none}
