/*
 * The family look, shared by every site (3QR, PrețCompar, LOVUS, VA, Flow,
 * Broker, Fonduri, Cere): four styles (LOVUS, Night, Lună albastră and the
 * futuristic Viitor) and the strip at the top.
 *
 * Master copy: shared/family/family.css. `php shared/family/sync.php` copies it
 * next to each site's own CSS; edit it here, not in the copies.
 *
 * The style is chosen in the strip and kept in the site_theme cookie. Cookies
 * are shared by every port of the same host, so all the local sites follow it.
 * Each site writes it on <html data-site-theme="lovus|night|moon|future">; without
 * that attribute (lovus.md live) nothing here applies.
 *
 * The palettes set the colour variables the sites already use: the same names
 * in VA, Flow, Broker, Fonduri and Cere, plus 3QR's own. PrețCompar (Tailwind)
 * and Lovus map them in their own small adapter files.
 */

html:root[data-site-theme="lovus"] {
  --bg: #f6efe2; --surface: #fffaf2; --surface-2: #f1e7d6; --text: #2b2118; --muted: #6b5a47; --border: #e3d5bd;
  --primary: #7c2233; --primary-hover: #5c1826; --primary-soft: #f4e2df; --primary-text: #fff8ef;
  --accent: #9a6b1f; --accent-soft: #f6ead0; --ok: #3d7a3a; --ok-soft: #e5eed8; --danger: #a3302a; --danger-soft: #f7e1db;
  --info: #2d5f7d; --info-soft: #e1ecf2; --warn: #98650f; --lovus: #8a5a14;
  --shadow: 0 1px 2px rgba(58, 42, 30, .06), 0 6px 20px rgba(58, 42, 30, .08);
  /* 3QR's names */
  --card-bg: #fffaf2; --primary-dark: #5c1826; --danger-dark: #7f231e;
  --success-bg: #e5eed8; --success-text: #3d7a3a; --error-bg: #f7e1db; --error-text: #a3302a;
  /* the strip */
  --fb-bg: #2a1d14; --fb-text: #e3d3b8; --fb-strong: #fff8ec; --fb-hover: rgba(255, 248, 236, .08);
  --fb-current: #5c1826; --fb-accent: #e4c780; --fb-border: #3a2a1e;
  --heading-font: "Playfair Display", Georgia, "Times New Roman", serif;
  color-scheme: light;
}

html:root[data-site-theme="night"] {
  --bg: #0e0f12; --surface: #16181d; --surface-2: #1d2027; --text: #eceef2; --muted: #9aa1ad; --border: #2a2e37;
  --primary: #f3b23e; --primary-hover: #f6c464; --primary-soft: #2c2314; --primary-text: #1a1204;
  --accent: #f3b23e; --accent-soft: #2c2314; --ok: #4ade80; --ok-soft: #12291b; --danger: #f87171; --danger-soft: #3a1b1b;
  --info: #7dd3fc; --info-soft: #0f2833; --warn: #fbbf24; --lovus: #d8b4fe;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 8px 24px rgba(0, 0, 0, .35);
  --card-bg: #16181d; --primary-dark: #f6c464; --danger-dark: #ef4444;
  --success-bg: #12291b; --success-text: #4ade80; --error-bg: #3a1b1b; --error-text: #f87171;
  --fb-bg: #050608; --fb-text: #b8bec9; --fb-strong: #ffffff; --fb-hover: rgba(255, 255, 255, .07);
  --fb-current: #262a33; --fb-accent: #f3b23e; --fb-border: #1c1f26;
  --heading-font: inherit;
  color-scheme: dark;
}

html:root[data-site-theme="moon"] {
  --bg: #0a1024; --surface: #111a35; --surface-2: #17224a; --text: #e6ecff; --muted: #9aa9d3; --border: #26335f;
  --primary: #8ab4ff; --primary-hover: #a8c7ff; --primary-soft: #18264f; --primary-text: #07102a;
  --accent: #c9d6ff; --accent-soft: #1b2754; --ok: #6ee7b7; --ok-soft: #0e2c2a; --danger: #fca5a5; --danger-soft: #3a1d2e;
  --info: #93c5fd; --info-soft: #132850; --warn: #fcd34d; --lovus: #c4b5fd;
  --shadow: 0 1px 0 rgba(200, 214, 255, .04), 0 10px 30px rgba(2, 6, 23, .45);
  --card-bg: #111a35; --primary-dark: #a8c7ff; --danger-dark: #f87171;
  --success-bg: #0e2c2a; --success-text: #6ee7b7; --error-bg: #3a1d2e; --error-text: #fca5a5;
  --fb-bg: #060b1c; --fb-text: #aebbe0; --fb-strong: #f0f4ff; --fb-hover: rgba(138, 180, 255, .10);
  --fb-current: #1a2a55; --fb-accent: #8ab4ff; --fb-border: #1b2750;
  --heading-font: inherit;
  color-scheme: dark;
}

/* Viitor: the fourth style, futuristic. Deep space, neon cyan and magenta, a faint grid. */
html:root[data-site-theme="future"] {
  --bg: #04060d; --surface: #0a0f1f; --surface-2: #0e1530; --text: #e8f6ff; --muted: #8ea6c8; --border: #1c2c52;
  --primary: #22e1ff; --primary-hover: #74efff; --primary-soft: #08263a; --primary-text: #021219;
  --accent: #ff3df2; --accent-soft: #2a0b33; --ok: #2dffa8; --ok-soft: #052a20; --danger: #ff4d6d; --danger-soft: #33101b;
  --info: #7aa7ff; --info-soft: #0c1c42; --warn: #ffd23d; --lovus: #c48bff;
  --shadow: 0 0 0 1px rgba(34, 225, 255, .07), 0 12px 40px rgba(0, 0, 0, .6), 0 0 28px rgba(34, 225, 255, .05);
  --card-bg: #0a0f1f; --primary-dark: #74efff; --danger-dark: #ff4d6d;
  --success-bg: #052a20; --success-text: #2dffa8; --error-bg: #33101b; --error-text: #ff4d6d;
  --fb-bg: #020309; --fb-text: #8ea6c8; --fb-strong: #e8f6ff; --fb-hover: rgba(34, 225, 255, .09);
  --fb-current: #0b2c3d; --fb-accent: #22e1ff; --fb-border: #10203f;
  --heading-font: inherit;
  color-scheme: dark;
}
html[data-site-theme="future"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 560px at 85% -12%, rgba(255, 61, 242, .12), transparent 62%),
    radial-gradient(900px 520px at -5% -5%, rgba(34, 225, 255, .12), transparent 60%),
    linear-gradient(rgba(34, 225, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 225, 255, .035) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
  background-attachment: fixed;
}
html[data-site-theme="future"] :is(h1, h2) { letter-spacing: .02em; text-shadow: 0 0 22px rgba(34, 225, 255, .22); }
html[data-site-theme="future"] .card { background-color: rgba(10, 15, 31, .86); }
html[data-site-theme="future"] .btn-primary { box-shadow: 0 0 18px rgba(34, 225, 255, .32); }
html[data-site-theme="future"] .btn-primary:hover { box-shadow: 0 0 26px rgba(34, 225, 255, .5); }
html[data-site-theme="future"] :focus-visible { outline-color: rgba(255, 61, 242, .7); }

/* LOVUS: serif headings, as on lovus.md. */
html[data-site-theme="lovus"] :is(h1, h2, h3, .brand) { font-family: var(--heading-font); letter-spacing: 0; }
/* Blue moon: a faint moonlight in the top corner. */
html[data-site-theme="moon"] body {
  background-image: radial-gradient(900px 520px at 90% -10%, rgba(138, 180, 255, .16), transparent 62%);
  background-attachment: fixed;
}

/* ─── The strip ─────────────────────────────────────────────────────────── */

.fbar {
  position: relative; z-index: 60;
  background: var(--fb-bg, #111827); color: var(--fb-text, #d1d5db);
  border-bottom: 1px solid var(--fb-border, transparent);
  font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: left;
}
.fbar-in { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px; }
.fbar a, .fbar a:hover { text-decoration: none; }
.fbar :focus-visible { outline: 2px solid var(--fb-accent, #fbbf24); outline-offset: 1px; }
.fbar-label {
  flex-shrink: 0; white-space: nowrap; color: var(--fb-accent, #fbbf24);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.fbar-links { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fbar-links::-webkit-scrollbar { display: none; }
.fbar-links a { color: inherit; padding: 5px 9px; border-radius: 7px; white-space: nowrap; }
.fbar-links a:hover { background: var(--fb-hover); color: var(--fb-strong, #fff); }
.fbar-links a[aria-current="page"] { background: var(--fb-current, #374151); color: var(--fb-strong, #fff); font-weight: 700; }
.fbar-end { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.fbar-themes { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--fb-hover, rgba(255, 255, 255, .06)); }
.fbar-themes button {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; border: 0; border-radius: 999px;
  padding: 4px 9px; background: transparent; color: inherit; font: inherit; font-size: 12px; line-height: 1.2;
  cursor: pointer; white-space: nowrap; box-shadow: none; min-height: 0; width: auto;
}
.fbar-themes button:hover { color: var(--fb-strong, #fff); }
.fbar-themes button[aria-pressed="true"] { background: var(--fb-current, #374151); color: var(--fb-strong, #fff); font-weight: 700; }
.fbar-swatch { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.fbar-swatch-lovus { background: linear-gradient(135deg, #7c2233 50%, #e4c780 50%); }
.fbar-swatch-night { background: linear-gradient(135deg, #0e0f12 50%, #f3b23e 50%); }
.fbar-swatch-moon { background: radial-gradient(circle at 38% 38%, #eef3ff 0 32%, #8ab4ff 34% 58%, #0a1024 60%); }
.fbar-swatch-future { background: conic-gradient(from 200deg, #22e1ff, #ff3df2, #2dffa8, #22e1ff); box-shadow: 0 0 6px rgba(34, 225, 255, .7), 0 0 0 1px rgba(255, 255, 255, .35); }

.fbar-auth {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: var(--fb-accent, #fbbf24); color: var(--fb-bg, #111827); font-weight: 700; white-space: nowrap;
}
.fbar-auth:hover { filter: brightness(1.08); color: var(--fb-bg, #111827); }
.fbar-auth-mark {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--fb-bg, #111827); color: var(--fb-accent, #fbbf24); font-size: 9.5px; font-weight: 800; letter-spacing: -.02em;
}
.fbar-auth.is-in { background: transparent; color: var(--fb-strong, #fff); box-shadow: inset 0 0 0 1px var(--fb-border, #374151); }
.fbar-auth.is-in:hover { background: var(--fb-hover); color: var(--fb-strong, #fff); }
.fbar-auth.is-in .fbar-auth-mark { background: var(--fb-accent, #fbbf24); color: var(--fb-bg, #111827); font-size: 11px; }
.fbar-auth-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

/* ─── The bell: notifications from every site (family.js) ───────────────── */
.fbar-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fbar-bell { position: relative; }
.fbar-bell-btn {
  position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; box-shadow: none; min-height: 0;
}
.fbar-bell-btn:hover, .fbar-bell-btn[aria-expanded="true"] { background: var(--fb-hover, rgba(255, 255, 255, .08)); color: var(--fb-strong, #fff); }
.fbar-bell-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fbar-bell-count {
  position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #e5484d; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
.fbar-bell-panel {
  position: absolute; right: 0; top: calc(100% + 6px); width: min(360px, calc(100vw - 20px)); max-height: 70vh; overflow-y: auto;
  background: var(--fb-bg, #111827); color: var(--fb-text, #d1d5db); border: 1px solid var(--fb-border, #374151);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .35); z-index: 80; text-align: left;
}
.fbar-bell-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--fb-border, #374151); color: var(--fb-strong, #fff); }
.fbar-bell-all { margin: 0; padding: 3px 8px; border: 0; border-radius: 7px; background: var(--fb-hover, rgba(255, 255, 255, .08)); color: var(--fb-accent, #fbbf24); font: inherit; font-size: 12px; cursor: pointer; box-shadow: none; min-height: 0; width: auto; }
.fbar-bell-item { display: grid; gap: 2px; padding: 9px 12px; border-bottom: 1px solid var(--fb-border, #374151); color: inherit; }
.fbar-bell-item:last-child { border-bottom: 0; }
a.fbar-bell-item:hover { background: var(--fb-hover, rgba(255, 255, 255, .06)); }
.fbar-bell-item.is-new { box-shadow: inset 3px 0 0 var(--fb-accent, #fbbf24); }
.fbar-bell-item.is-new .fbar-bell-title { color: var(--fb-strong, #fff); font-weight: 700; }
.fbar-bell-site { font-size: 11px; color: var(--fb-accent, #fbbf24); }
.fbar-bell-title { overflow-wrap: anywhere; }
.fbar-bell-body { font-size: 12px; opacity: .8; overflow-wrap: anywhere; }
.fbar-bell-empty { margin: 0; padding: 14px 12px; font-size: 12.5px; opacity: .8; }

@media (max-width: 720px) {
  .fbar-in { gap: 8px; padding: 0 10px; }
  .fbar-label { display: none; }
  .fbar-theme-name { display: none; }
  .fbar-themes button { padding: 5px 6px; }
  .fbar-auth-name { max-width: 84px; }
}