/*
 * Roommatik Helpdesk — client portal overlay  (design-system rebuild)
 * Non-invasive skin for the osTicket client surface. Loaded after the core CSS,
 * only on client pages (never /scp/). No core file is modified.
 *
 * Look: Roommatik Classic / design-system — soft canvas, one floating content
 * sheet, restrained Signal Teal, Inter, soft two-layer shadows, 8px rhythm,
 * WCAG-AA contrast, visible focus, >=44px touch targets.
 */

/* ---- Self-hosted Inter ---- */
@font-face {
  font-family: 'InterRmk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/custom/fonts/inter-latin-var.woff2') format('woff2');
}

:root {
  --rmk-teal:        #55C3D2; /* heritage — accent art only */
  --rmk-primary:     #0BA5B7; /* Signal Teal — primary actions/links/focus */
  --rmk-deep:        #0E7C8A; /* hover/pressed, teal text on light (AA) */
  --rmk-pale:        #CFF2F6; /* tinted surfaces / chips */
  --rmk-ink:         #0F172A;
  --rmk-body:        #334155;
  --rmk-support:     #64748B;
  --rmk-border:      #CBD5E1;
  --rmk-card-border: #E2E8F0;
  --rmk-surface:     #FFFFFF;
  --rmk-soft:        #F8FAFC;
  --rmk-canvas:      #EDF1F5; /* cool canvas so white cards separate */
  --rmk-amber:       #F59E0B;
  --rmk-amber-bg:    #FEF6E7;
  --rmk-font: 'InterRmk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --rmk-r-sm: 8px;
  --rmk-r-md: 12px;
  --rmk-r-lg: 16px;
  --rmk-r-pill: 999px;
  --rmk-shadow: 0 1px 2px rgba(20,40,60,.04), 0 4px 16px rgba(20,40,60,.05);
  --rmk-shadow-lift: 0 2px 4px rgba(20,40,60,.05), 0 12px 28px rgba(14,124,138,.12);
}

/* ============================================================= *
 *  Base
 * ============================================================= */
/* Force Inter everywhere (osta ships Open Sans/Montserrat/Poppins with higher
   priority). Icon-safe: never re-fonts FontAwesome/material <i> glyphs. */
body.client-side,
body.client-side h1, body.client-side h2, body.client-side h3,
body.client-side h4, body.client-side h5, body.client-side h6,
body.client-side p, body.client-side a, body.client-side span,
body.client-side div, body.client-side li, body.client-side ul, body.client-side ol,
body.client-side label, body.client-side strong, body.client-side em,
body.client-side b, body.client-side small, body.client-side td, body.client-side th,
body.client-side input, body.client-side button, body.client-side select,
body.client-side textarea, body.client-side #header-title, body.client-side #header-subtitle {
  font-family: var(--rmk-font) !important;
}
/* Never touch icon fonts (keep FontAwesome / Material glyphs intact) */
body.client-side i[class*="icon-"],
body.client-side [class*="icon-"],
body.client-side .fa,
body.client-side .material-icons,
body.client-side .material-icons-outlined { font-family: revert !important; }

body.client-side {
  color: var(--rmk-body);
  background: var(--rmk-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.client-side a { color: var(--rmk-deep); text-decoration: none; }
body.client-side a:hover { color: var(--rmk-primary); text-decoration: underline; }
body.client-side ::selection { background: var(--rmk-pale); color: var(--rmk-ink); }

/* Visible keyboard focus everywhere */
body.client-side a:focus-visible,
body.client-side button:focus-visible,
body.client-side input:focus-visible,
body.client-side select:focus-visible,
body.client-side textarea:focus-visible,
body.client-side [tabindex]:focus-visible,
body.client-side .flag:focus-visible {
  outline: 3px solid var(--rmk-primary);
  outline-offset: 2px;
  border-radius: var(--rmk-r-sm);
}

/* ============================================================= *
 *  Header, nav strip, flags  (keep native osta geometry)
 * ============================================================= */
body.client-side #header { background: var(--rmk-surface); }
body.client-side #nav-wrapper {
  background: var(--rmk-surface);
  box-shadow: inset 0 -2px 0 var(--rmk-pale);
}
/* Give the nav strip real height so items aren't glued to the line */
body.client-side #nav-inner { height: auto !important; }
body.client-side ul#nav,
body.client-side ul#nav-mobile { height: auto !important; }
body.client-side ul#nav > li { display: inline-flex; align-items: center; }
body.client-side ul#nav > li > a {
  color: var(--rmk-body);
  font-weight: 500;
  padding: 13px 15px !important;
  height: auto !important;
  line-height: 1.2 !important;
  display: inline-flex;
  align-items: center;
  transition: color .15s, box-shadow .15s;
}
body.client-side ul#nav > li > a:hover { color: var(--rmk-deep); }
body.client-side ul#nav > li > a.active {
  color: var(--rmk-deep);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--rmk-primary);
}
body.client-side ul#nav > li > a svg,
body.client-side ul#nav > li > a path { fill: currentColor; }

/* Language switch: names instead of flag sprites, vertically centred.
   osta wraps the flags in a collapsible 112px box (overflow:hidden) — open it up
   so all language names show inline. */
body.client-side #lang-wrapper,
body.client-side #lang-wrapper .button-container,
body.client-side #lang-wrapper .button-text-container,
body.client-side #lang-wrapper .button-text-container.shrink,
body.client-side #flags,
body.client-side #flags-mobile {
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  display: inline-flex;
  align-items: center;
}
body.client-side #flags { gap: 2px; }
body.client-side a.flag.rmk-lang,
body.client-side #flags a.flag,
body.client-side #flags-mobile a.flag {
  background: none !important;
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  text-indent: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  margin: 0 1px;
  border-radius: var(--rmk-r-sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--rmk-support);
  white-space: nowrap;
  transition: color .15s, background .15s;
}
body.client-side a.flag.rmk-lang:hover,
body.client-side #flags a.flag:hover,
body.client-side #flags-mobile a.flag:hover { color: var(--rmk-deep); background: var(--rmk-soft); }
body.client-side .c-hamburger:focus-visible { outline: 3px solid var(--rmk-primary); }

/* ============================================================= *
 *  Content sheet  (the one floating card on the canvas)
 * ============================================================= */
body.client-side #content {
  max-width: 1000px;
  margin: 40px auto 56px;
  background: var(--rmk-surface) !important;
  border: 1px solid var(--rmk-card-border) !important;
  border-radius: var(--rmk-r-lg) !important;
  box-shadow: var(--rmk-shadow) !important;
  padding: 56px 60px !important;
  min-height: auto !important;
  color: var(--rmk-body);
  box-sizing: border-box;
}
body.client-side #content h1,
body.client-side #content h2,
body.client-side #content h3 { color: var(--rmk-ink); }
/* Page titles / section headings (view.php title, featured-KB h1, etc.).
   The landing hero h1 lives in #landing_page and overrides this with !important. */
/* Page titles / section headings. The landing hero (#landing_page > h1) keeps
   its own !important size, so it is unaffected. */
body.client-side #content h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.2px;
  margin: 4px 0 22px;
}

/* ============================================================= *
 *  Landing — hero
 * ============================================================= */
body.client-side #landing_page { text-align: left; }

/* Branded eyebrow above the hero title */
body.client-side #landing_page::before {
  content: "Centro de asistencia";
  display: inline-block;
  margin: 0 auto 14px;
  padding: 6px 14px;
  background: var(--rmk-pale);
  color: var(--rmk-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  border-radius: var(--rmk-r-pill);
}
body.client-side #landing_page {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.client-side #landing_page > * { width: 100%; }

body.client-side #landing_page > h1 {
  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -.4px;
  color: var(--rmk-ink) !important;
  text-align: center !important;
  margin: 0 0 14px !important;
}
/* intro paragraph = the first non-channel p */
body.client-side #landing_page > p:first-of-type {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--rmk-support) !important;
  text-align: justify !important;
  hyphens: auto;
  max-width: 780px;
  margin: 0 auto 40px !important;
}

/* ---- Contact-channel cards (grouped into .rmk-channels by portal.js) ---- */
body.client-side .rmk-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 16px 0 44px;
  width: 100%;
}
body.client-side .rmk-channels .rmk-channel,
body.client-side #landing_page > p.rmk-channel {
  margin: 0 !important;
  padding: 28px 26px !important;
  border: 1px solid var(--rmk-card-border) !important;   /* even border, no one-sided accent */
  border-radius: var(--rmk-r-md) !important;
  background: var(--rmk-surface) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--rmk-support) !important;
  text-align: left !important;   /* narrow columns read better left-aligned */
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
body.client-side .rmk-channels .rmk-channel:hover { border-color: var(--rmk-teal); }

/* Highlighted callout for the urgent-incidence notice (tagged by portal.js) */
body.client-side #landing_page > p.rmk-urgent {
  text-align: left !important;
  background: var(--rmk-amber-bg) !important;
  border: 1px solid #F3D48A !important;
  border-radius: var(--rmk-r-md) !important;
  padding: 18px 22px 18px 56px !important;
  position: relative;
  max-width: 820px;
  margin: 22px auto !important;
  color: var(--rmk-body) !important;
}
body.client-side #landing_page > p.rmk-urgent .rmk-urgent-ico {
  position: absolute; left: 20px; top: 18px;
  width: 24px; height: 24px; color: var(--rmk-amber);
}
body.client-side #landing_page > p.rmk-urgent .rmk-urgent-ico svg { width: 24px; height: 24px; fill: currentColor; }
body.client-side #landing_page > p.rmk-urgent strong { color: #7A4B00; }
body.client-side .rmk-channels .rmk-channel:hover {
  box-shadow: var(--rmk-shadow);
  transform: translateY(-2px);
}
body.client-side .rmk-channel .rmk-channel-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 14px;
  border-radius: var(--rmk-r-md);
  background: var(--rmk-pale);
  color: var(--rmk-deep);
}
body.client-side .rmk-channel .rmk-channel-ico svg { width: 24px; height: 24px; fill: currentColor; }
body.client-side .rmk-channel strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--rmk-ink);
  margin-bottom: 6px;
}
body.client-side .rmk-channel a { font-weight: 600; }

/* ---- Remaining info paragraphs (schedule / holidays / urgent / thanks) ---- */
body.client-side #landing_page > p:not(:first-of-type):not(.rmk-channel) {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--rmk-body) !important;
  text-align: justify !important;
  hyphens: auto;
  max-width: 800px;
  margin: 0 auto 18px !important;
}
body.client-side #landing_page > p strong { color: var(--rmk-ink); }
body.client-side #landing_page > h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: var(--rmk-ink) !important;
  margin: 48px 0 22px !important;
}

/* ============================================================= *
 *  KB search block
 * ============================================================= */
body.client-side #landing-search { width: 100%; }
body.client-side #landing-search { text-align: center; }
body.client-side #landing-search-inner {
  width: 100%;
  box-sizing: border-box;
  max-width: 600px;
  margin: 0 auto;
  padding: 26px 28px;
  background: var(--rmk-soft);
  border: 1px solid var(--rmk-card-border);
  border-radius: var(--rmk-r-lg);
  text-align: left;
}
body.client-side .searchArea { max-width: 640px; margin: 0 auto 8px; }
/* The real row lives inside the <form>; lay IT out (input left, button right). */
body.client-side .searchArea form {
  display: flex !important;
  gap: 10px;
  align-items: stretch;
}
body.client-side .searchArea .inputDiv {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  order: 1;
}
body.client-side .searchArea button[type="submit"] {
  flex: 0 0 auto !important;
  float: none !important;
  order: 2;
}
body.client-side .searchArea input.search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rmk-border);
  border-radius: var(--rmk-r-md);
  padding: 12px 16px;
  min-height: 48px;
  font-size: 16px;
  color: var(--rmk-ink);
  background: var(--rmk-surface);
}
body.client-side .searchArea input.search:focus {
  outline: none;
  border-color: var(--rmk-primary);
  box-shadow: 0 0 0 3px rgba(11,165,183,.18);
}
body.client-side .searchArea button[type="submit"] {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rmk-deep) !important;
  background-image: none !important;
  color: #fff; border: none !important;
  border-radius: var(--rmk-r-md);
  padding: 0 22px; min-height: 48px;
  font-weight: 600; cursor: pointer;
  box-shadow: none !important;
  transition: background .15s;
}
body.client-side .searchArea button[type="submit"]:hover { background: var(--rmk-primary) !important; }
body.client-side .searchArea button svg,
body.client-side .searchArea button path { fill: #fff; }

/* ============================================================= *
 *  CTA tiles — Open a ticket / Check status
 * ============================================================= */
body.client-side #open-or-check {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 4px 0 40px;   /* reordered by portal.js to sit under the hero */
  width: 100%;
}
body.client-side #open-new.client-choice,
body.client-side #check-status.client-choice {
  float: none !important;              /* osta floats these at a fixed 150px */
  width: auto !important;
  box-sizing: border-box;
  background: var(--rmk-surface);
  border: 1px solid var(--rmk-card-border);
  border-radius: var(--rmk-r-md);
  box-shadow: none;
  padding: 28px 26px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
body.client-side #open-new #open-text,
body.client-side #check-status #open-text { width: auto; max-width: 320px; }
body.client-side #open-or-check a { width: 100%; max-width: 260px; }
body.client-side #open-new.client-choice:hover,
body.client-side #check-status.client-choice:hover {
  transform: translateY(-3px);
  border-color: var(--rmk-teal);
  box-shadow: var(--rmk-shadow-lift);
}
body.client-side #open-title { font-size: 17px; font-weight: 700; color: var(--rmk-ink); margin-bottom: 8px; }
body.client-side #open-text { font-size: 14px; color: var(--rmk-support); line-height: 1.55; margin-bottom: 18px; }
body.client-side #open-or-check a { margin-top: auto; text-decoration: none; }

/* Primary pill button (#sign-in-button is used as div here and as submit input
   on login.php — style both, kill osta tiled-icon bg + red 3D shadow) */
body.client-side #sign-in-button {
  background: var(--rmk-deep) !important;
  background-image: none !important;
  border: none !important;
  -webkit-appearance: none; appearance: none;
  color: #fff;
  border-radius: var(--rmk-r-pill);
  width: 100%;
  box-sizing: border-box;
  padding: 13px 22px;
  min-height: 46px;
  white-space: nowrap;
  text-transform: none !important;   /* osta uppercases + wraps into a blob */
  font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 16px rgba(14,124,138,.22) !important;
  transition: background .15s, transform .1s;
}
body.client-side a:hover > #sign-in-button,
body.client-side input#sign-in-button:hover { background: var(--rmk-primary) !important; }
body.client-side a:active > #sign-in-button { transform: translateY(1px); }
body.client-side #sign-in-button svg,
body.client-side #sign-in-button path { fill: #fff; }

/* ============================================================= *
 *  view.php — ticket-lookup form (forced visible + styled)
 * ============================================================= */
body.client-side #clientLogin { display: block !important; }
body.client-side #check-ticket {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch;
  margin-top: 8px;
}
body.client-side #check-ticket #access-link,
body.client-side #check-ticket #sign-in {
  flex: 1 1 320px;
  background: var(--rmk-surface);
  border: 1px solid var(--rmk-card-border);
  border-radius: var(--rmk-r-md);
  box-shadow: var(--rmk-shadow);
  padding: 24px 26px;
  min-width: 0;
}
body.client-side #check-ticket #open-title { font-size: 18px; font-weight: 700; color: var(--rmk-ink); margin-bottom: 16px; }
body.client-side #check-ticket label {
  display: block; font-weight: 600; color: var(--rmk-body); margin: 0 0 16px;
}
body.client-side #check-ticket label input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
  padding: 12px 14px; min-height: 46px;
  border: 1px solid var(--rmk-border); border-radius: var(--rmk-r-md);
  font-size: 16px; color: var(--rmk-ink); background: #fff;
}
body.client-side #check-ticket label input:focus {
  border-color: var(--rmk-primary); outline: none;
  box-shadow: 0 0 0 3px rgba(11,165,183,.18);
}
body.client-side #check-ticket input[type="submit"] {
  -webkit-appearance: none; appearance: none;
  background: var(--rmk-deep) !important; background-image: none !important;
  color: #fff; border: none !important; border-radius: var(--rmk-r-pill);
  width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal;
  padding: 13px 20px; min-height: 46px; font-weight: 600; font-size: 15px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(14,124,138,.22) !important;
  transition: background .15s, transform .1s;
}
body.client-side #check-ticket input[type="submit"]:hover { background: var(--rmk-primary) !important; }
body.client-side #check-ticket input[type="submit"]:active { transform: translateY(1px); }
body.client-side #check-ticket #sign-in a { display: inline-block; font-weight: 600; }

/* login.php client login inputs */
body.client-side #loginBox input[type="text"],
body.client-side #loginBox input[type="password"],
body.client-side #loginBox input[type="email"] {
  min-height: 46px; border-radius: var(--rmk-r-md); font-size: 16px;
}

/* ============================================================= *
 *  Footer — remove tech-leak credits, add a modest line
 * ============================================================= */
body.client-side #footer #osticket,
body.client-side #footer #ostawesome,
body.client-side #footer #osticket a,
body.client-side #footer #ostawesome a { display: none !important; }
body.client-side #footer {
  color: var(--rmk-support);
  padding: 24px 16px 34px;
  text-align: center;
  background: transparent;
}
body.client-side #footer::after {
  content: "© Roommatik · Centro de asistencia";
  display: block; font-size: 13px; color: var(--rmk-support); letter-spacing: .2px;
}
body.client-side #theme-button,
body.client-side .theme-button,
body.client-side #database-reset-warning,
body.client-side #back-button,
body.client-side .osta-theme-switcher { display: none !important; }

/* ============================================================= *
 *  Cookie consent bar
 * ============================================================= */
body.client-side #complaince-message,
body.client-side #compliance-message { color: var(--rmk-body); }
body.client-side #complaince-button,
body.client-side #compliance-button {
  background: var(--rmk-deep); border-radius: var(--rmk-r-pill);
  min-height: 40px; padding: 0 20px;
}
/* The OK label inherited teal text on the teal button (invisible). Force white. */
body.client-side #complaince-button,
body.client-side #complaince-button *,
body.client-side #complaince-button-label,
body.client-side #complaince-button-link,
body.client-side #compliance-button *,
body.client-side #compliance-button-label { color: #fff !important; }

body.client-side #loading .icon-spin { color: var(--rmk-primary) !important; }

/* ============================================================= *
 *  Landing block rhythm + featured KB section
 * ============================================================= */
/* Consistent vertical rhythm between the sheet's major blocks */
body.client-side #landing_page > .rmk-channels { margin: 8px 0 40px; }
body.client-side #landing_page > h2 { margin-top: 8px !important; }
body.client-side #landing-search { margin: 8px auto 0; }

/* Featured KB articles: full width + tidy heading (osta pins it to ~419px) */
body.client-side #more-options {
  margin-top: 44px;   /* spacing only — no divider line */
}
body.client-side #more-options .featured { width: 100% !important; }
body.client-side #more-options .featured-category,
body.client-side #more-options .front-page {
  width: auto !important;
  float: none !important;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
body.client-side #more-options h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.2px;
  margin: 0 0 22px;
  text-align: center;
}
/* Category label with folder icon */
body.client-side #more-options .category-name {
  font-weight: 700;
  color: var(--rmk-ink);
  font-size: 15px;
  margin-bottom: 14px;
}
body.client-side #more-options .icon-folder-open { color: var(--rmk-primary); }

/* Featured articles as a responsive grid of link cards (was a big empty block) */
body.client-side #more-options .featured-articles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 4px;
}
body.client-side #more-options .featured-articles .article-title {
  display: block;
  background: var(--rmk-surface);
  border: 1px solid var(--rmk-card-border);
  border-radius: var(--rmk-r-md);
  padding: 18px 20px;
  margin: 0 !important;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
body.client-side #more-options .featured-articles .article-title:hover {
  border-color: var(--rmk-teal);
  box-shadow: var(--rmk-shadow);
  transform: translateY(-2px);
}
body.client-side #more-options .article-title > a {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--rmk-ink);
  margin-bottom: 8px;
  line-height: 1.35;
}
body.client-side #more-options .article-title > a:hover { color: var(--rmk-deep); text-decoration: none; }
body.client-side #more-options .article-teaser {
  color: var(--rmk-support);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ============================================================= *
 *  Knowledge base index (kb/index.php)
 * ============================================================= */
body.client-side #content .row {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}
body.client-side #content .row .span8 {
  flex: 1 1 420px;
  width: auto !important;
  min-width: 0;
  float: none !important;
  margin: 0 !important;
}
body.client-side #content .row .span4 {
  flex: 0 0 300px;
  width: 300px !important;
  float: none !important;
  margin: 0 !important;
}
/* Category cards */
body.client-side ul#kb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
body.client-side ul#kb > li {
  position: relative;
  background: var(--rmk-surface);
  border: 1px solid var(--rmk-card-border);
  border-radius: var(--rmk-r-md);
  box-shadow: var(--rmk-shadow);
  padding: 22px 26px 20px;
  list-style: none;
}
body.client-side ul#kb > li > i { display: none; }  /* leading folder glyph — redundant */
body.client-side ul#kb h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; }
body.client-side ul#kb h4 a { color: var(--rmk-ink); }
body.client-side ul#kb h4 a:hover { color: var(--rmk-deep); }
body.client-side ul#kb .faded p,
body.client-side ul#kb .faded {
  color: var(--rmk-support) !important;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 14px;
}
body.client-side ul#kb a { color: var(--rmk-deep); }
body.client-side ul#kb .icon-folder-open { color: var(--rmk-primary); margin-right: 7px; }
/* Sub-topic links list */
body.client-side ul#kb > li > div > div > div {
  padding: 4px 0;
  font-size: 14px;
}
/* Featured FAQ chip */
body.client-side ul#kb .popular-faq {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--rmk-soft);
  border: 1px solid var(--rmk-card-border);
  border-radius: var(--rmk-r-sm);
  font-size: 13.5px;
}
body.client-side ul#kb .popular-faq .icon-file-alt,
body.client-side ul#kb .popular-faq i { color: var(--rmk-amber); margin-top: 2px; }
/* Sidebar */
body.client-side #content .sidebar {
  background: var(--rmk-surface);
  border: 1px solid var(--rmk-card-border);
  border-radius: var(--rmk-r-md);
  box-shadow: var(--rmk-shadow);
  padding: 20px 22px;
}
body.client-side #content .sidebar .content { color: var(--rmk-body); }
body.client-side #content .sidebar select,
body.client-side #content .sidebar input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rmk-border);
  border-radius: var(--rmk-r-sm);
  padding: 10px 12px;
  min-height: 42px;
  font-size: 15px;
  margin-top: 8px;
}
/* KB page title */
body.client-side #content h1 { color: var(--rmk-ink); }

/* ============================================================= *
 *  Responsive
 * ============================================================= */
@media (max-width: 860px) {
  body.client-side #content { margin: 18px 12px 28px; padding: 28px 20px !important; }
  body.client-side .rmk-channels { grid-template-columns: 1fr; gap: 12px; }
  body.client-side #open-or-check { grid-template-columns: 1fr; gap: 14px; }
  body.client-side #check-ticket { flex-direction: column; gap: 16px; }
  body.client-side #landing_page > h1 { font-size: 27px !important; }
  /* keep the Tawk chat bubble clear of content/footer */
  body.client-side #content { padding-bottom: 40px !important; }
  body.client-side #footer { padding-bottom: 96px; }
}
@media (max-width: 520px) {
  body.client-side .searchArea { flex-direction: column; }
  body.client-side .searchArea button[type="submit"] { width: 100%; justify-content: center; }
}