/* =========================================================
   BLM Eventos — identidade compartilhada
   Tokens, marca e botões usados por login, construtor, checkout e painel.
   A home (home.css) segue os mesmos valores.
   ========================================================= */

:root {
  --blm-ink: #0b1f2e;
  --blm-ink-2: #23384a;
  --blm-muted: #5f7180;
  --blm-line: #e1ebee;
  --blm-line-strong: #cfdde2;
  --blm-soft: #f4faf9;
  --blm-surface: #ffffff;
  --blm-green: #10aa78;
  --blm-green-dark: #087b5b;
  --blm-teal: #08a99c;
  --blm-teal-dark: #067f75;
  --blm-cyan: #12b0d8;
  --blm-navy: #0b1f2e;
  --blm-navy-2: #0f2a3d;
  --blm-ok: #16a067;
  --blm-ok-bg: #e7f8ef;
  --blm-wait: #c98a0c;
  --blm-wait-bg: #fff6df;
  --blm-no: #e0465a;
  --blm-no-bg: #ffecef;
  --blm-wa: #25d366;
  --blm-grad: linear-gradient(135deg, #10aa78 0%, #08a99c 55%, #12b0d8 100%);
  --blm-focus: 0 0 0 4px rgba(8, 169, 156, .18);
  --blm-shadow: 0 24px 60px rgba(11, 31, 46, .12);
  --blm-shadow-soft: 0 10px 30px rgba(11, 31, 46, .06);
  --blm-radius: 22px;
  --blm-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Marca ---------- */
.blm-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--blm-ink);
  text-decoration: none;
}
.blm-brand img { width: 36px; height: 36px; flex: 0 0 36px; display: block; }
.blm-brand-copy { display: grid; gap: 2px; line-height: 1; }
.blm-brand-copy strong { font-size: 18px; font-weight: 900; letter-spacing: -.03em; white-space: nowrap; }
.blm-brand-copy strong em {
  font-style: normal;
  font-weight: 600;
  background: linear-gradient(90deg, #2bc04f, var(--blm-teal) 60%, var(--blm-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blm-brand-copy small { color: var(--blm-muted); font-size: 10px; font-weight: 600; white-space: nowrap; }
.blm-brand.is-light { color: #fff; }
.blm-brand.is-light .blm-brand-copy small { color: rgba(255, 255, 255, .62); }

/* ---------- Botões ---------- */
.blm-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 800 14px/1 var(--blm-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.blm-btn:hover { transform: translateY(-1px); }
.blm-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.blm-btn:focus-visible { outline: none; box-shadow: var(--blm-focus); }
.blm-btn-primary { color: #fff; background: var(--blm-grad); box-shadow: 0 12px 28px rgba(8, 169, 156, .26); }
.blm-btn-primary:hover { box-shadow: 0 16px 36px rgba(8, 169, 156, .34); }
.blm-btn-outline { color: var(--blm-ink); background: #fff; border-color: var(--blm-line-strong); }
.blm-btn-outline:hover { border-color: var(--blm-teal); }
.blm-btn-dark { color: #fff; background: var(--blm-navy); }
.blm-btn-dark:hover { background: var(--blm-navy-2); }

/* ---------- Botão de ajuda (support.js) ---------- */
.sup-fab {
  position: fixed; z-index: 70; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  min-height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px;
  border: 0; border-radius: 999px; color: #fff; background: var(--blm-navy);
  box-shadow: 0 12px 30px rgba(11, 31, 46, .28); font: 800 14px/1 var(--blm-font); cursor: pointer;
}
.sup-fab svg, .sup-sheet svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sup-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--blm-teal) 55%, transparent); outline-offset: 3px; }
/* No celular a ajuda fica no topo de cada tela ([data-support-open]); o botão flutuante cobriria conteúdo. */
@media (max-width: 960px) { .sup-fab { display: none; } }
.sup-top { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--blm-line); border-radius: 14px; color: var(--blm-ink-2); background: #fff; cursor: pointer; }
.sup-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sup-sheet { width: min(440px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 24px; background: transparent; }
.sup-sheet::backdrop { background: rgba(11, 31, 46, .5); backdrop-filter: blur(3px); }
.sup-card { position: relative; display: grid; gap: 12px; padding: 26px 22px 22px; border-radius: 24px; color: var(--blm-ink); background: #fff; font-family: var(--blm-font); }
.sup-card h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.sup-card p { margin: 0; color: var(--blm-muted); font-size: 15px; line-height: 1.5; }
.sup-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: var(--blm-grad); }
.sup-ico svg { width: 24px; height: 24px; }
.sup-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--blm-muted); background: var(--blm-soft); cursor: pointer; }
.sup-options { display: grid; gap: 10px; margin-top: 4px; }
.sup-opt { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 1px solid var(--blm-line); border-radius: 16px; color: var(--blm-ink); text-decoration: none; }
.sup-opt > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.sup-opt span { min-width: 0; display: grid; }
.sup-opt strong { font-size: 15px; }
.sup-opt small { overflow: hidden; color: var(--blm-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sup-wa { color: #fff; background: #1faa59; border-color: #1faa59; }
.sup-wa small { color: rgba(255, 255, 255, .85); }
.sup-mail svg { color: var(--blm-teal-dark); }
.sup-copy { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid var(--blm-line); border-radius: 12px; background: #fff; color: var(--blm-muted); cursor: pointer; }
.sup-copy.is-done { color: #fff; background: var(--blm-ok); border-color: var(--blm-ok); }
.sup-tip { font-size: 13px !important; }
@media (max-width: 560px) {
  .sup-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; }
  .sup-card { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; }
}