/* =========================================================================
   assets/help-widget.css — PHASE 11.2K
   Styles for (1) the Help launcher + panel and (2) the statistics consent bar.
   Uses the site's existing colour tokens (with fallbacks), logical properties
   (so Arabic RTL and English LTR both work) and safe-area insets.
   ========================================================================= */
:root{ --hbdi-bottom-ui:0px; }

/* ---------- launcher ---------- */
.hbdi-help-root{ font-family:inherit; }
.hbdi-help-launcher{
  position:fixed; z-index:900;
  inset-inline-end:max(16px, env(safe-area-inset-right), env(safe-area-inset-left));
  inset-block-end:calc(16px + env(safe-area-inset-bottom) + var(--hbdi-bottom-ui, 0px));
  display:inline-flex; align-items:center; gap:8px;
  min-height:48px; min-width:48px; padding:0 16px; justify-content:center;
  border:1px solid var(--accent,#A78BFA); border-radius:999px; cursor:pointer;
  background:var(--surface-2,#211641); color:var(--ink,#F5F3FF);
  font:inherit; font-size:15px; font-weight:600; line-height:1;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.8);
  transition:opacity .15s ease;
}
.hbdi-help-launcher svg{ width:20px; height:20px; flex:0 0 auto; }
.hbdi-help-launcher:hover{ background:var(--surface,#1A1233); }
.hbdi-help-launcher:focus-visible,
.hbdi-help-root button:focus-visible,
.hbdi-help-root a:focus-visible,
.hbdi-help-root input:focus-visible,
.hbdi-help-root [tabindex="-1"]:focus-visible{
  outline:3px solid var(--accent,#A78BFA); outline-offset:2px; box-shadow:none;
}
/* The launcher steps aside (invisible, not clickable) while it would sit on top of a button,
   link or field — e.g. a purchase button scrolling past. It reappears on keyboard focus. */
.hbdi-help-launcher[data-avoid="1"]:not(:focus):not(:focus-visible){ opacity:0; pointer-events:none; }
.hbdi-help-launcher[aria-expanded="true"]{ opacity:0; pointer-events:none; }

/* ---------- panel ---------- */
.hbdi-help-backdrop{ position:fixed; inset:0; z-index:910; background:rgba(8,5,18,.55); }
.hbdi-help-backdrop[hidden]{ display:none; }
.hbdi-help-panel{
  position:fixed; z-index:920; display:flex; flex-direction:column; padding:0; margin:0; box-sizing:border-box;
  inset-inline-end:max(20px, env(safe-area-inset-right), env(safe-area-inset-left));
  inset-block-end:calc(20px + env(safe-area-inset-bottom) + var(--hbdi-bottom-ui, 0px));
  width:min(400px, calc(100vw - 40px));
  max-height:min(660px, calc(100vh - 40px - var(--hbdi-bottom-ui, 0px)));
  max-height:min(660px, calc(100dvh - 40px - var(--hbdi-bottom-ui, 0px)));
  background:var(--bg-2,#140D28); color:var(--ink,#F5F3FF);
  border:1px solid var(--line,#2E2150); border-radius:18px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
  overflow:hidden; line-height:1.7; font-size:15px;
}
.hbdi-help-panel[hidden]{ display:none; }
@media (max-width:560px){
  .hbdi-help-panel{
    inset-inline:max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
    width:auto;
    inset-block-end:calc(8px + env(safe-area-inset-bottom) + var(--hbdi-bottom-ui, 0px));
    max-height:calc(100vh - 16px - env(safe-area-inset-bottom) - var(--hbdi-bottom-ui, 0px));
    max-height:calc(100dvh - 16px - env(safe-area-inset-bottom) - var(--hbdi-bottom-ui, 0px));
    border-radius:16px;
  }
}
/* Short screens (landscape phones, very high zoom): the bottom bar would leave the panel only a few lines,
   so while the panel is open it may cover the consent bar (the bar sits under the backdrop and returns on close). */
html.hbdi-help-open .hbdi-consent-bar{ z-index:905; }
@media (max-height:640px){
  .hbdi-help-panel{
    inset-block-end:calc(8px + env(safe-area-inset-bottom));
    max-height:calc(100vh - 16px - env(safe-area-inset-bottom));
    max-height:calc(100dvh - 16px - env(safe-area-inset-bottom));
  }
}
.hbdi-help-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px 10px; border-bottom:1px solid var(--line,#2E2150); flex:0 0 auto;
}
.hbdi-help-title{ margin:0; font-size:18px; font-weight:700; line-height:1.4; }
.hbdi-help-title:focus{ outline:none; }
.hbdi-help-close{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line,#2E2150); background:transparent; color:var(--ink,#F5F3FF);
  font:inherit; font-size:22px; line-height:1; display:grid; place-items:center;
}
.hbdi-help-close:hover{ background:var(--surface,#1A1233); }
.hbdi-help-body{ overflow-y:auto; overscroll-behavior:contain; padding:12px 16px 16px; flex:1 1 auto; -webkit-overflow-scrolling:touch; }
.hbdi-help-auto{
  margin:0 0 12px; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.6;
  background:var(--surface,#1A1233); color:var(--muted,#C4B5FD); border:1px solid var(--line,#2E2150);
}
.hbdi-help-label{ display:block; font-size:14px; font-weight:600; margin:0 0 6px; }
.hbdi-help-search{
  width:100%; min-height:44px; padding:0 12px; border-radius:12px;
  border:1px solid var(--line,#2E2150); background:var(--surface,#1A1233); color:var(--ink,#F5F3FF);
  font:inherit; font-size:16px;    /* 16px: no zoom-on-focus on iOS */
}
.hbdi-help-search::placeholder{ color:var(--muted-2,#8B7CB8); }
.hbdi-help-note{ margin:6px 0 0; font-size:12.5px; line-height:1.6; color:var(--muted-2,#8B7CB8); }
.hbdi-help-h{ margin:16px 0 8px; font-size:14px; font-weight:700; color:var(--muted,#C4B5FD); }
.hbdi-help-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.hbdi-help-q{
  width:100%; min-height:48px; padding:10px 14px; text-align:start; cursor:pointer;
  border:1px solid var(--line,#2E2150); border-radius:12px; background:var(--surface,#1A1233);
  color:var(--ink,#F5F3FF); font:inherit; font-size:15px; line-height:1.5;
}
.hbdi-help-q:hover{ border-color:var(--accent,#A78BFA); }
.hbdi-help-back{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; margin:0 0 8px;
  border:1px solid var(--line,#2E2150); border-radius:12px; background:transparent;
  color:var(--muted,#C4B5FD); font:inherit; font-size:14px; cursor:pointer;
}
.hbdi-help-qh{ margin:4px 0 10px; font-size:17px; line-height:1.5; font-weight:700; }
.hbdi-help-qh:focus{ outline:none; }
.hbdi-help-ans p{ margin:0 0 10px; }
.hbdi-help-ans ul{ margin:0 0 10px; padding-inline-start:20px; }
.hbdi-help-ans li{ margin-bottom:4px; }
.hbdi-help-rel{ margin:12px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.hbdi-help-rel a{ color:var(--accent,#A78BFA); text-decoration:underline; text-underline-offset:3px; }
.hbdi-help-mail{
  margin-top:16px; padding:12px; border-radius:14px; border:1px solid var(--line,#2E2150); background:var(--surface,#1A1233);
}
.hbdi-help-mail strong{ display:block; margin-bottom:8px; font-size:14.5px; }
.hbdi-help-mailbtn{
  display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 16px; border-radius:12px;
  background:var(--primary,#7C3AED); color:#fff; font:inherit; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer;
  border:1px solid transparent;
}
.hbdi-help-mailbtn:hover{ filter:brightness(1.1); }
.hbdi-help-addr{ margin:10px 0 0; font-size:13.5px; color:var(--muted,#C4B5FD); }
.hbdi-help-addr bdi{ display:block; margin-top:4px; direction:ltr; unicode-bidi:isolate; font-weight:700; color:var(--ink,#F5F3FF); user-select:all; overflow-wrap:anywhere; }
.hbdi-help-copy{
  margin-top:8px; min-height:44px; padding:0 14px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line,#2E2150); background:transparent; color:var(--ink,#F5F3FF); font:inherit; font-size:14px;
}
.hbdi-help-live{ margin:6px 0 0; min-height:1.4em; font-size:13px; color:var(--green,#2ECC71); }
.hbdi-help-prefs{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line,#2E2150); font-size:13px; color:var(--muted-2,#8B7CB8); }
.hbdi-help-prefs button{
  margin-inline-start:6px; min-height:44px; padding:0 10px; border:0; background:transparent; color:var(--accent,#A78BFA);
  font:inherit; font-size:13px; text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.hbdi-help-empty{ margin:10px 0 0; color:var(--muted,#C4B5FD); }

/* ---------- consent bar ---------- */
html.hbdi-consent-open body{ padding-bottom:var(--hbdi-bottom-ui, 0px); }
.hbdi-consent-bar{
  position:fixed; z-index:950; inset-inline:0; inset-block-end:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px;
  padding:12px max(16px, env(safe-area-inset-right), env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom));
  background:var(--bg-2,#140D28); color:var(--ink,#F5F3FF);
  border-top:1px solid var(--accent,#A78BFA); box-shadow:0 -14px 40px -16px rgba(0,0,0,.85);
  font-size:14px; line-height:1.6; max-height:50vh; overflow-y:auto;
}
.hbdi-consent-bar[hidden]{ display:none; }
.hbdi-cb-text{ flex:1 1 320px; min-width:0; }
.hbdi-cb-title{ display:block; font-size:15px; margin-bottom:2px; }
.hbdi-cb-body{ margin:0; color:var(--muted,#C4B5FD); }
.hbdi-cb-body a{ color:var(--accent,#A78BFA); text-decoration:underline; text-underline-offset:3px; }
.hbdi-cb-status{ margin:4px 0 0; color:var(--ink,#F5F3FF); font-weight:600; }
.hbdi-cb-actions{ display:flex; gap:8px; flex:0 0 auto; flex-wrap:wrap; }
.hbdi-cb-btn{
  min-height:44px; min-width:96px; padding:0 18px; border-radius:12px; cursor:pointer; font:inherit; font-size:15px; font-weight:700;
  border:1px solid var(--accent,#A78BFA); color:var(--ink,#F5F3FF); background:transparent;
}
.hbdi-cb-allow{ background:var(--primary,#7C3AED); border-color:transparent; color:#fff; }
.hbdi-consent-bar button:focus-visible, .hbdi-consent-bar a:focus-visible{ outline:3px solid var(--accent,#A78BFA); outline-offset:2px; }
@media (max-width:560px){
  .hbdi-consent-bar{ padding-top:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); gap:8px; font-size:13px; line-height:1.5; max-height:40vh; }
  .hbdi-cb-title{ font-size:14px; margin-bottom:0; }
  .hbdi-cb-actions{ width:100%; }
  .hbdi-cb-btn{ flex:1 1 0; }
}
@media (prefers-reduced-motion:reduce){ .hbdi-help-launcher{ transition:none; } }

/* ---------- 11.2M (P1-07): the Help launcher must not cover the last row of footer links ----------
   Scoped to small screens (where the 48px launcher sits over the footer's bottom links) and to the
   footers of pages that load this widget. Extra bottom padding only — no layout or colour change. */
@media (max-width:640px){
  body footer.site, body footer.site-footer{ padding-bottom:calc(48px + 40px + env(safe-area-inset-bottom)); }
}