/* Phase 13 — PWA/system-state shell derived from the supplied BeauticiansHub States design. */
:root{
  --bh-state-bg:#F5F4F8;
  --bh-state-navy:#241C4E;
  --bh-state-pink:#F472B6;
  --bh-state-muted:#6E6B85;
  --bh-state-border:#E7E4EE;
  --bh-state-warn:#FFF9F1;
  --bh-state-warn-border:#FFE3C2;
  --bh-state-warn-text:#8B6B3D;
}
.bh-pwa-state[hidden]{display:none!important}
.bh-pwa-state{font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-sizing:border-box}
.bh-pwa-state *{box-sizing:border-box}
.bh-pwa-connectivity{
  position:fixed;left:50%;top:14px;z-index:100050;transform:translateX(-50%);
  width:min(760px,calc(100% - 28px));padding:11px 16px;border-radius:13px;
  box-shadow:0 14px 38px rgba(36,28,78,.16);font-size:12.5px;font-weight:700;line-height:1.45;
  display:flex;align-items:center;justify-content:center;gap:9px;text-align:center
}
.admin-bar .bh-pwa-connectivity{top:46px}
.bh-pwa-connectivity--offline{background:#241C4E;color:#FFF;border:1px solid #241C4E}
.bh-pwa-connectivity--online{background:#F2FBF6;color:#256B4A;border:1px solid #9FD9BE}
.bh-pwa-dot{width:8px;height:8px;border-radius:50%;background:#F472B6;box-shadow:0 0 0 4px rgba(244,114,182,.16);flex:0 0 auto}
.bh-pwa-connectivity--online .bh-pwa-dot{background:#2D9C6A;box-shadow:0 0 0 4px rgba(45,156,106,.14)}
.bh-pwa-card{
  position:fixed;right:22px;bottom:22px;z-index:100040;width:min(390px,calc(100% - 28px));
  background:#FFF;color:var(--bh-state-muted);border:1px solid var(--bh-state-border);border-radius:20px;
  box-shadow:0 22px 62px rgba(36,28,78,.18);overflow:hidden
}
.bh-pwa-card__accent{height:5px;background:linear-gradient(90deg,#F472B6,#C43C7E)}
.bh-pwa-card__body{padding:20px}
.bh-pwa-card__top{display:flex;align-items:flex-start;gap:13px}
.bh-pwa-card__icon{width:44px;height:44px;flex:0 0 44px;border-radius:14px;background:#FDE7F1;color:#B02A72;display:grid;place-items:center;font-size:20px;font-weight:800}
.bh-pwa-card h2{margin:0;font-family:Sora,Poppins,sans-serif;font-size:16.5px;line-height:1.25;color:var(--bh-state-navy);font-weight:700}
.bh-pwa-card p{margin:6px 0 0;font-size:12.5px;line-height:1.65;color:var(--bh-state-muted)}
.bh-pwa-card__actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.bh-pwa-btn{appearance:none;border:0;border-radius:11px;padding:11px 15px;font:700 12px/1.2 Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.bh-pwa-btn:hover{transform:translateY(-1px)}
.bh-pwa-btn:focus-visible{outline:3px solid rgba(244,114,182,.3);outline-offset:2px}
.bh-pwa-btn--primary{background:var(--bh-state-pink);color:#FFF;box-shadow:0 8px 18px rgba(244,114,182,.22)}
.bh-pwa-btn--dark{background:var(--bh-state-navy);color:#FFF}
.bh-pwa-btn--ghost{background:#FFF;color:var(--bh-state-navy);border:1px solid var(--bh-state-border)}
.bh-pwa-close{margin-left:auto;appearance:none;border:0;background:transparent;color:#8B879A;width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:18px;line-height:1}
.bh-pwa-close:hover{background:#F5F4F8;color:#241C4E}
html.bh-is-offline .bh-pwa-offline-sensitive{opacity:.64;pointer-events:none}
@media(max-width:620px){
  .bh-pwa-connectivity{top:8px;width:calc(100% - 16px);border-radius:11px;padding:10px 12px}
  .admin-bar .bh-pwa-connectivity{top:54px}
  .bh-pwa-card{left:10px;right:10px;bottom:10px;width:auto;border-radius:17px}
  .bh-pwa-card__body{padding:17px}
  .bh-pwa-card__actions{display:grid;grid-template-columns:1fr 1fr}
  .bh-pwa-btn{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .bh-pwa-state,.bh-pwa-state *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Manual Add to Home Screen guidance for browsers without a native install sheet. */
.bh-pwa-help{
  position:fixed;inset:0;z-index:100080;display:grid;place-items:center;padding:20px
}
.bh-pwa-help__backdrop{
  position:absolute;inset:0;border:0;background:rgba(24,18,49,.58);backdrop-filter:blur(5px);cursor:pointer
}
.bh-pwa-help__dialog{
  position:relative;z-index:1;width:min(520px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;
  padding:28px;border:1px solid rgba(36,28,78,.12);border-radius:22px;background:#FFF;color:var(--bh-state-muted);
  box-shadow:0 30px 90px rgba(26,20,55,.32)
}
.bh-pwa-help__close{position:absolute;top:16px;right:16px;margin:0}
.bh-pwa-help__icon{
  width:50px;height:50px;border-radius:16px;background:#FDE7F1;color:#B02A72;display:grid;place-items:center;
  font-size:22px;font-weight:800;margin-bottom:16px
}
.bh-pwa-help h2{margin:0 42px 8px 0;font-family:Sora,Poppins,sans-serif;font-size:22px;line-height:1.25;color:var(--bh-state-navy);font-weight:750}
.bh-pwa-help p{margin:0;font-size:13px;line-height:1.7;color:var(--bh-state-muted)}
.bh-pwa-help__steps{margin:20px 0 0;padding-left:22px;display:grid;gap:12px;color:var(--bh-state-navy)}
.bh-pwa-help__steps li{padding-left:4px;font-size:13px;line-height:1.6}
.bh-pwa-help__steps li::marker{color:var(--bh-state-pink);font-weight:800}
.bh-pwa-help__actions{display:flex;justify-content:flex-end;margin-top:22px}
html.bh-pwa-help-open{overflow:hidden}
@media(max-width:620px){
  .bh-pwa-help{padding:12px}
  .bh-pwa-help__dialog{padding:24px 20px;border-radius:19px;max-height:calc(100vh - 24px)}
  .bh-pwa-help h2{font-size:19px}
  .bh-pwa-help__actions .bh-pwa-btn{width:100%}
}