/* ==========================================================================
   4 Savings Solutions — shared styles
   Accessibility, cookie consent (LGPD / privacy) and the WhatsApp chat.
   ========================================================================== */

:root {
  --ss-ink: #0d0d0d;
  --ss-paper: #ffffff;
  --ss-accent: #FFD600;
  --ss-wa: #25D366;
  --ss-wa-dark: #128C7E;
  --ss-focus: #1d4ed8;
  --ss-muted: #4a4a4a;
}

/* ---------- Base accessibility ---------- */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

:focus-visible {
  outline: 3px solid var(--ss-focus) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

.ss-skip {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  background: var(--ss-ink); color: #fff !important;
  padding: 12px 18px; border-radius: 8px; font-weight: 700; text-decoration: none;
}
.ss-skip:focus { top: 12px; }

.ss-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Accessibility preferences (set by the a11y panel) ---------- */
html.ss-noanim, html.ss-noanim * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
html.ss-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.ss-readable body, html.ss-readable body * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.02em !important; }
html.ss-readable p, html.ss-readable li { line-height: 1.8 !important; }

html.ss-contrast body, html.ss-contrast body *:not(svg):not(svg *) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
}
html.ss-contrast a, html.ss-contrast a * { color: #ffff00 !important; }
html.ss-contrast button, html.ss-contrast input, html.ss-contrast select, html.ss-contrast textarea { border: 2px solid #fff !important; }
html.ss-contrast img { filter: grayscale(1) contrast(1.2); }

/* ---------- Floating buttons ---------- */
.ss-fab {
  position: fixed; bottom: 20px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.ss-fab svg { width: 30px; height: 30px; }
.ss-fab--wa { right: 20px; background: var(--ss-wa); color: var(--ss-ink); }
.ss-fab--a11y { left: 20px; width: 52px; height: 52px; background: var(--ss-focus); color: #fff; }
.ss-fab--a11y svg { width: 28px; height: 28px; }
.ss-fab__badge {
  position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%;
  background: #e11d48; border: 2px solid #fff;
}

/* ---------- Panels (shared) ---------- */
.ss-panel {
  position: fixed; bottom: 92px; z-index: 950;
  width: min(380px, calc(100vw - 32px));
  background: var(--ss-paper); color: var(--ss-ink);
  border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  font-family: Manrope, system-ui, sans-serif;
  overflow: hidden;
}
.ss-panel[hidden] { display: none; }
.ss-panel--wa { right: 16px; display: flex; flex-direction: column; max-height: min(620px, calc(100vh - 120px)); }
.ss-panel--a11y { left: 16px; padding: 20px; }

.ss-panel__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.ss-panel__title { margin: 0; font-size: 17px; font-weight: 800; }
.ss-panel__sub { margin: 2px 0 0; font-size: 13px; }
.ss-close {
  margin-left: auto; width: 44px; height: 44px; flex-shrink: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ss-close:hover { background: rgba(0, 0, 0, 0.08); }

/* ---------- WhatsApp chat ---------- */
.ss-panel--wa .ss-panel__head { background: var(--ss-wa-dark); color: #fff; }
.ss-panel--wa .ss-close:hover { background: rgba(255, 255, 255, 0.15); }
.ss-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ss-wa-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; flex-shrink: 0;
}
.ss-chat__log {
  flex: 1 1 auto; overflow-y: auto; padding: 18px 16px; background: #efeae2;
  display: flex; flex-direction: column; gap: 10px; min-height: 220px;
}
.ss-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; white-space: pre-line; }
.ss-msg--bot { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.ss-msg--user { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 4px; }
.ss-chat__foot { padding: 12px; background: #f0f2f5; border-top: 1px solid #d9d9d9; }
.ss-chat__row { display: flex; gap: 8px; }
.ss-chat__input {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 10px 14px;
  border: 1px solid #b9b9b9; border-radius: 999px; font: inherit; font-size: 15px; background: #fff; color: var(--ss-ink);
}
.ss-chat__send {
  width: 46px; height: 46px; flex-shrink: 0; border: 0; border-radius: 50%;
  background: var(--ss-wa-dark); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ss-chat__send svg { width: 20px; height: 20px; }
.ss-chat__error { margin: 8px 4px 0; font-size: 13px; color: #b42318; }
.ss-chat__error:empty { display: none; }
.ss-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-chip {
  min-height: 44px; padding: 10px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ss-wa-dark); background: #fff; color: #075e54; font: inherit; font-size: 14px; font-weight: 700;
}
.ss-chip:hover { background: #e7f6ef; }
.ss-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ss-muted); }
.ss-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--ss-wa-dark); }
.ss-consent a { color: #075e54; }
.ss-btn-wa {
  width: 100%; min-height: 48px; margin-top: 12px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--ss-wa); color: var(--ss-ink); font: inherit; font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.ss-btn-wa[disabled] { opacity: 0.5; cursor: not-allowed; }
.ss-btn-wa svg { width: 20px; height: 20px; }

/* ---------- Accessibility panel ---------- */
.ss-panel--a11y .ss-panel__head { padding: 0 0 12px; }
.ss-a11y__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ss-a11y__btn {
  min-height: 56px; padding: 10px; border-radius: 12px; cursor: pointer;
  border: 2px solid #d6d6d6; background: #fff; color: var(--ss-ink);
  font: inherit; font-size: 14px; font-weight: 700; text-align: left;
}
.ss-a11y__btn[aria-pressed="true"] { border-color: var(--ss-focus); background: #e8efff; }
.ss-a11y__size { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.ss-a11y__size .ss-a11y__btn { flex: 0 0 56px; text-align: center; font-size: 18px; }
.ss-a11y__size output { flex: 1 1 auto; text-align: center; font-weight: 800; }
.ss-a11y__reset { grid-column: 1 / -1; text-align: center; }
.ss-a11y__note { margin: 14px 0 0; font-size: 13px; color: var(--ss-muted); }
.ss-a11y__note a { color: var(--ss-focus); }

/* ---------- Cookie / privacy banner ---------- */
.ss-cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  max-width: 760px; margin: 0 auto; padding: 22px;
  background: var(--ss-ink); color: #fff; border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  font-family: Manrope, system-ui, sans-serif;
}
.ss-cookie[hidden] { display: none; }
.ss-cookie h2 { margin: 0; font-family: Anybody, sans-serif; font-size: 20px; font-weight: 800; }
.ss-cookie p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #d6d6d6; }
.ss-cookie a { color: #fff; }
.ss-cookie__opts { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ss-cookie__opts[hidden] { display: none; }
.ss-cookie__opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.ss-cookie__opt input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--ss-accent); }
.ss-cookie__opt span { color: #d6d6d6; }
.ss-cookie__opt strong { color: #fff; }
.ss-cookie__actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.ss-cookie__actions button {
  min-height: 46px; padding: 12px 18px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700;
}
.ss-cookie__primary { background: var(--ss-accent); color: var(--ss-ink); border: 0; }
.ss-cookie__secondary { background: transparent; color: #fff; border: 1px solid #fff; }

/* ---------- Footer legal links ---------- */
.ss-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: 14px; }
.ss-legal a, .ss-legal button {
  color: #e6e6e6; text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}

/* ---------- Form consent ---------- */
.ss-form-consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #333; font-weight: 500; }
.ss-form-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: #0d0d0d; }
.ss-form-consent a { color: #0d0d0d; }
.ss-form-status { grid-column: 1 / -1; margin: 0; font-size: 15px; font-weight: 700; }
.ss-form-status:empty { display: none; }
.ss-form-status--error { color: #b42318; }
.ss-form-status--ok { color: #166534; }

/* On phones the header wraps to several lines, so it should not stay fixed over the content */
@media (max-width: 760px) {
  body > div > header { position: static !important; }
}

@media (max-width: 480px) {
  .ss-fab { bottom: 14px; }
  .ss-fab--wa { right: 14px; }
  .ss-fab--a11y { left: 14px; }
  .ss-panel { bottom: 84px; }
  .ss-cookie { left: 8px; right: 8px; bottom: 8px; padding: 18px; }
}