/* Sticky financial disclaimer bar and its acknowledgement dialog.
 *
 * Layer 14 of the stylesheet. ORDER IS SIGNIFICANT: this file's rules
 * are overridden by every later layer and override every earlier one, exactly as
 * when they were one file. See docs/frontend-architecture.md. */

/* ── Sticky financial disclaimer (visible on every screen, no scrolling) ──── */
.fp-disclaimer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: rgba(7, 16, 23, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #d7e2e9;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.fp-disclaimer-bar strong { color: #ffcc33; font-weight: 700; }
.fp-disclaimer-bar svg { width: 16px; height: 16px; flex: none; color: #ffcc33; }
body { padding-bottom: 44px; }

/* Mobile: the bottom navbar owns bottom:0, so the disclaimer sits on top of it
   and body padding clears both bars. This MUST come after the two rules above —
   they are the base declarations, and a media query carries no extra
   specificity, so declaring this earlier in the file silently lost. That is
   exactly what happened on 23 July: the disclaimer rendered at bottom:0 under
   the navbar (z-index 420 vs 400) and was invisible on phones, which is a
   compliance problem, not just a layout one. */
@media (max-width: 1024px) {
  .fp-disclaimer-bar {
    /* --fp-navbar-h is measured from the real element by syncBottomBarOffsets().
       A hardcoded 56px could not stay accurate: the navbar also carries the
       safe-area inset, the raised search button, and whatever height the user's
       text-size setting gives the labels — which is why the disclaimer ended up
       half-overlapping the buttons. The literal here is only a pre-measurement
       fallback. */
    bottom: var(--fp-navbar-h, 56px);
    padding-bottom: 8px; /* the navbar below already covers the safe-area inset */
  }
  body {
    /* Clear both fixed bars, plus a little breathing room. */
    padding-bottom: calc(var(--fp-navbar-h, 56px) + var(--fp-disclaimer-h, 44px) + 24px);
  }
}

/* Opt-out (Settings → Risk disclaimer bar). Deliberate and acknowledged — the
   only rule allowed to hide this bar, and checkLayout.js knows about it. */
body.fp-disclaimer-off .fp-disclaimer-bar { display: none; }
body.fp-disclaimer-off { padding-bottom: 8px; }
@media (max-width: 1024px) {
  body.fp-disclaimer-off { padding-bottom: calc(var(--fp-navbar-h, 56px) + 24px); }
}

/* ── Disclaimer acknowledgement dialog ────────────────────────────────────── */
#disclaimerAckOverlay {
  position: fixed;
  inset: 0;
  z-index: 9700;
  background: rgba(3, 7, 10, .78);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#disclaimerAckOverlay.open { display: flex !important; }
#disclaimerAckBox {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, #0b1117, #070b10);
  border: 1px solid rgba(255, 204, 51, .35);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
#disclaimerAckBox h3 { margin: 0 0 12px; color: #ffcc33; font-size: 18px; }
#disclaimerAckBox p { margin: 0 0 12px; color: #d7e2e9; font-size: 14px; line-height: 1.6; }
#disclaimerAckBox strong { color: #ffffff; }
.ack-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 20px;
  cursor: pointer;
  user-select: none;
  color: #d7e2e9;
  font-size: 14px;
  line-height: 1.5;
}
.ack-check input { margin-top: 3px; flex-shrink: 0; }
.ack-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ack-actions button { flex: 1; min-width: 140px; padding: 12px !important; border-radius: 10px !important; font-weight: 700; cursor: pointer; }
.ack-cancel { background: transparent !important; border: 1px solid rgba(255,255,255,.16) !important; color: #d7e2e9 !important; }
.ack-confirm { background: #ffcc33 !important; border: 1px solid #ffcc33 !important; color: #241c00 !important; }
.ack-confirm:disabled { opacity: .45; cursor: not-allowed; }
.ack-actions button:hover { transform: none !important; }