/* Chatzilla.ca identity, shared by the existing WebVideo theme layout.
 * Presentation only: keep routes, controls, media geometry and JS hooks intact.
 * This is the theme's native custom.css entry point, not a global server override.
 */
:root {
  --cz-night: #070a22;
  --cz-ink: #11142f;
  --cz-paper: #f5f6fc;
  --cz-cyan: #5de1ff;
  --cz-violet: #7d62ff;
  --cz-coral: #ff7f91;
  --cz-line: #e4e7f2;
}
body[class*="theme-"] {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--cz-ink);
  background: var(--cz-paper);
  --cz-surface: #fff;
  --cz-text: #11142f;
  --cz-muted: #62677d;
  --cz-border: #e4e7f2;
  --cz-field: #fff;
  --cz-link: #4932a3;
  --body-bg-color: var(--cz-paper);
  --general-border: 1px solid var(--cz-border);
  --block-shadow: 0 12px 36px rgba(20,23,67,.08);
  --event-block-bg-color: var(--cz-surface);
  --event-block-color: var(--cz-text);
  --event-border-color: var(--cz-border);
  --event-heading-bg-color: #ebe9ff;
  --event-heading-color: var(--cz-ink);
  --primary-gradient: linear-gradient(135deg, #5de1ff, #b8efff);
  --color-highlight: #6245cc;
  --chat-background: var(--cz-surface);
  --chat-color: var(--cz-text);
  --chat-border-color: var(--cz-border);
  --chat-input-bg: var(--cz-field);
  --chat-btn-bg: var(--cz-cyan);
  --chat-btn-color: var(--cz-night);
  --chat-dialog-title-bg: var(--cz-night);
  --videostore-item-btn-bg: var(--cz-cyan);
  --videostore-item-btn-color: var(--cz-night);
  --fc-item-background-color: var(--cz-surface);
}
body.theme-black {
  --cz-surface: #141936;
  --cz-text: #f3f5ff;
  --cz-muted: #b8bfd8;
  --cz-border: #343b64;
  --cz-field: #0c112c;
  --cz-link: #8ceaff;
  --body-bg-color: #0b1029;
  --event-heading-bg-color: #26214a;
  --event-heading-color: #f3f5ff;
  color: var(--cz-text);
  background: var(--body-bg-color);
}
body #wrapper { background-color: var(--body-bg-color); background-image: none; }
body #content { color: var(--cz-text); }
body #content a:not(.btn):not(.button):not(.badge) { color: var(--cz-link); }
body #content h1, body #content h2, body #content h3 { letter-spacing: -.025em; }
body #header, body .main-nav-header {
  color: #fff;
  background: var(--cz-night);
  border-color: #34385b;
  box-shadow: 0 6px 26px rgba(7,10,34,.18);
}
body #header .navbar-brand, body #header .navbar-toggler,
body #header .nav-link, body #header .btn-languages { color: #f3f5ff; }
body #header .navbar-brand.logo-link-img img {
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 42px;
  object-fit: contain;
}
body .navbar-footer .img-logo img { width: auto; height: auto; max-width: 220px; max-height: 48px; object-fit: contain; }
body .navbar-brand.logo-link-text, body .navbar-footer .text-logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  letter-spacing: -.035em;
}
body .navbar-brand.logo-link-text::before, body .navbar-footer .text-logo::before {
  content: "";
  flex: 0 0 2.15rem;
  width: 2.15rem;
  height: 2.15rem;
  background: url('../images/chatzilla-brand.svg') center / contain no-repeat;
}
body .main-offcanvas-nav {
  background: #0e1432;
  color: #eef1ff;
  border-color: #34385b;
}
body .main-offcanvas-nav a { color: #dce3ff; }
body .main-offcanvas-nav a:hover, body .main-offcanvas-nav a.active {
  color: var(--cz-cyan);
  background-color: #25214a;
}
body .header-two, body .navbar-filter {
  background: var(--cz-surface);
  color: var(--cz-text);
  border-color: var(--cz-border);
}
body #page-title {
  color: #fff;
  background: linear-gradient(90deg,rgba(7,10,34,.96),rgba(7,10,34,.77)),
    url('../images/chatzilla-community.png') center 40% / cover no-repeat;
  border: 1px solid #34385b;
  border-radius: 1rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
body #page-title h1, body #page-title h2 { color: #fff; margin-bottom: 0; }
body .card, body .modal-content, body .filter-flex, body .block,
body .dropdown-menu, body .list-group-item, body .accordion-item {
  color: var(--cz-text);
  background-color: var(--cz-surface);
  border-color: var(--cz-border);
}
body .card, body .modal-content, body .filter-flex {
  border-radius: 1rem;
  box-shadow: var(--block-shadow);
}
body .card-header, body .modal-header, body .card-footer, body .modal-footer {
  color: var(--cz-text);
  background-color: var(--cz-surface);
  border-color: var(--cz-border);
}
body .dropdown-item { color: var(--cz-text); }
body .dropdown-item:hover, body .dropdown-item:focus {
  color: var(--cz-ink);
  background: #eae7ff;
}
body .btn-primary, body .btn-join {
  color: var(--cz-night);
  background: linear-gradient(135deg,#5de1ff,#b8efff);
  border-color: #5de1ff;
  border-radius: 999px;
  font-weight: 750;
}
body .btn-primary:hover, body .btn-primary:focus, body .btn-join:hover {
  color: var(--cz-night);
  background: #b8efff;
  border-color: #b8efff;
}
body .btn-outline-primary { color: var(--cz-link); border-color: #7d62ff; border-radius: 999px; }
body .btn-outline-primary:hover { color: #fff; background: #6245cc; }
body .nav-pills .nav-link.active { color: #fff; background: #6245cc; }
body .form-control, body .form-select, body input.text,
body input.password, body textarea:not(.mce-textbox) {
  color: var(--cz-text);
  background-color: var(--cz-field);
  border-color: var(--cz-border);
  border-radius: .65rem;
}
body .form-control::placeholder, body textarea::placeholder { color: var(--cz-muted); opacity: 1; }
body .form-control:focus, body .form-select:focus {
  border-color: #7d62ff;
  box-shadow: 0 0 0 .2rem rgba(125,98,255,.18);
}
body a:focus-visible, body button:focus-visible, body input:focus-visible,
body select:focus-visible, body textarea:focus-visible {
  outline: 3px solid #7d62ff;
  outline-offset: 3px;
}
body .table { color: var(--cz-text); --bs-table-striped-color: var(--cz-text); --bs-table-hover-color: var(--cz-text); }
body .table > :not(caption) > * > * { border-color: var(--cz-border); }
body .mbox { background: var(--cz-surface); color: var(--cz-text); border-radius: 1rem; box-shadow: var(--block-shadow); }
body .promo-landing {
  color: #fff;
  background: linear-gradient(90deg,rgba(7,10,34,.94),rgba(7,10,34,.64)),
    url('../images/chatzilla-community.png') center / cover no-repeat;
  border-radius: 1.25rem;
}
body .promo-title { color: #fff; letter-spacing: -.035em; }
body .promo-description, body .promo-features { color: #e1e6f7; }
body .promo-badge { color: #5de1ff; background: #151c40; }
body .cz-community-hero {
  margin: 1.25rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid #34385b;
  border-radius: 1.25rem;
  color: #f3f5ff;
  background: linear-gradient(90deg,rgba(7,10,34,.97),rgba(7,10,34,.83) 45%,rgba(7,10,34,.25)), url('../images/chatzilla-community.png') center 40% / cover no-repeat;
}
body .cz-community-copy { max-width: 40rem; }
body .cz-community-hero h1 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: 1.12; }
body .cz-eyebrow { color: #8ceaff; font-size: .8rem; font-weight: 750; letter-spacing: .12em; }
body .cz-community-note { color: #d6daeb; font-size: .9rem; margin-bottom: 0; }
body #footer, body #wp-footer, body .site-footer {
  color: #d6daeb;
  background-color: var(--cz-night);
  border-color: #34385b;
}
body #footer a, body #wp-footer a { color: #d6daeb; }
body #footer a:hover, body #wp-footer a:hover { color: var(--cz-cyan); }
body #footer a.btn-primary, body #wp-footer a.btn-primary { color: var(--cz-night); }
/* Preserve video/chat sizing and offcanvas behavior supplied by WebVideo. */
@media (max-width: 767.98px) {
  body #header .navbar-brand.logo-link-img img { max-width: 145px; max-height: 32px; }
  body #page-title { border-radius: .8rem; padding: 1rem; }
  body .form-control, body .form-select, body input.text, body input.password { font-size: 1rem; }
  body .modal-dialog { max-width: calc(100% - 1rem); margin: .5rem auto; }
  body .modal-body { overflow-wrap: anywhere; }
  body .filter-flex .filter-field { min-width: 0; flex-wrap: wrap; gap: .4rem; }
  body .filter-flex input, body .filter-flex select { max-width: 100%; }
  body .navbar-brand.logo-link-text { font-size: 1rem; }
  body .navbar-brand.logo-link-text::before { flex-basis: 1.8rem; width: 1.8rem; height: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  body #wrapper, body #wp-content { transition: none; }
}