:root {
  --primary-color: #382B93;
  --primary-hover: #291e70;
  --text-dark: #1A1A2E;
  --text-muted: #62647A;
  --bg-light: #F7F8FC;
  --border-color: #E2E6F0;
  --success-color: #2E7D32;
  --warning-color: #E65100;
  --radius-lg: 12px;
  --radius-md: 8px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
  margin: 0;
  padding: 0;
}

/* Base structural layout container wrap */
.hc-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  min-height: 100vh;
}

/* Sidebar structure */
.hc-sidebar {
  width: 260px;
  background-color: #FFF;
  border-right: 1px solid var(--border-color);
  padding: 24px 16px;
  flex-shrink: 0;
}

.hc-main-content {
  flex-grow: 1;
  background-color: #FFF;
  padding: 40px;
}

/* Header style layout adjustments */
.hc-header {
  background-color: var(--primary-color);
  color: #FFF;
  padding: 16px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hc-brand a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #FFF;
}

/* Hide native close button from standard search inputs if breaking styling */
.search-box position-relative x, 
.search-box button[type="reset"] {
  display: none !important;
}

/* Sidebar Navigation Items styling */
.nav-section-title {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin: 24px 0 8px 12px;
  letter-spacing: 0.5px;
}

.nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 4px;
}

.nav-item:hover {
  background-color: #F4F3FB;
  color: var(--primary-color);
}

.nav-item.active {
  background-color: #EEECFA;
  color: var(--primary-color);
  font-weight: 600;
}

.nav-badge {
  background: #F0F2F8;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
  color: var(--text-muted);
}

.nav-item.active .nav-badge {
  background-color: #382B93;
  color: #FFF;
}

.agent-only-badge {
  background: #FFF2E6;
  color: var(--warning-color);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
}

/* Component Layout Grid Formats */
.hero-banner {
  background: linear-gradient(135deg, #241A69 0%, #4635B4 100%);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: #FFF;
  margin-bottom: 40px;
}

.ai-search-box {
  background: #FFF;
  border-radius: var(--radius-md);
  padding: 6px;
  display: flex;
  align-items: center;
  margin-top: 24px;
}

.ai-search-box input {
  border: none;
  flex-grow: 1;
  padding: 12px;
  outline: none;
  font-size: 15px;
}

.ai-search-btn {
  background: var(--primary-color);
  color: #FFF;
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: bold;
  cursor: pointer;
}

.tag-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.suggested-tag {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  color: #FFF;
  text-decoration: none;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.sub-section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.grid-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  color: var(--text-dark);
  background: #FFF;
  transition: transform 0.2s, box-shadow 0.2s;
}

.grid-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.article-row-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: var(--text-dark);
  margin-bottom: 12px;
  background: #FFF;
}

.ai-answer-card {
  background: #F9FAFE;
  border: 1px solid #D6DCF0;
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 32px;
}

.chat-footer-widget {
  background: #EEECFA;
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}

.chat-btn {
  background: #FFF;
  border: 1px solid var(--border-color);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
}

/* Redesigned AI Header Search Box */
.hc-header-search {
  flex-grow: 1;
  max-width: 580px;
  margin: 0 32px;
}

.hc-header-search .search-box-wrapper {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Custom AI Search Badge Indicator Tag */
.ai-badge-inline {
  background-color: #EEECFA;
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Force override on native Zendesk input boxes */
.hc-header-search form.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 !important;
}

.hc-header-search input[type="search"] {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 10px 40px 10px 4px !important;
  margin: 0 !important;
  font-size: 14px;
  color: var(--text-dark) !important;
  outline: none !important;
  box-shadow: none !important;
}

.hc-header-search input[type="search"]::placeholder {
  color: #A0A3BD;
}

/* Positioning search button icon inside right context */
.hc-header-search input[type="submit"],
.hc-header-search role="button" {
  background-color: var(--primary-color) !important;
  color: #FFF !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer;
}

/* Hide native reset close x button if it conflicts with alignment styles */
.hc-header-search button[type="reset"] {
  display: none !important;
}

/* Popular Articles (Most Read) Dashboard */
.promoted-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 32px;
}

.promoted-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: var(--text-dark);
  background: #FFF;
}

.promoted-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Latest Updates Feed Wrapper */
.updates-panel {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: #FFF;
  padding: 8px 24px;
  margin-top: 16px;
}

.update-item {
  padding: 16px 0;
  border-bottom: 1px solid #F0F2F8;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.update-item:last-child {
  border-bottom: none;
}

.update-dot {
  color: #8A76F3;
  font-size: 16px;
  line-height: 1;
  padding-top: 2px;
}

.update-link {
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  display: block;
}

.update-subtext {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
/* Style overrides for Zendesk's native recent activity component output */
/* Container for the Latest Updates Panel */
.updates-panel {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: #FFF;
  padding: 8px 24px;
  margin-top: 16px;
}

/* Hide Zendesk's default header actions if they look cluttered */
.updates-panel .recent-activity-header {
  display: none !important;
}

/* Restructure the native list into our layout rows */
.updates-panel ul.recent-activity-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Target individual output list items */
.updates-panel li.recent-activity-item {
  padding: 16px 0 !important;
  border-bottom: 1px solid #F0F2F8 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
}

.updates-panel li.recent-activity-item:last-child {
  border-bottom: none !important;
}

/* Force our signature purple dot accent before the link text */
.updates-panel li.recent-activity-item::before {
  content: "•";
  color: #8A76F3;
  font-size: 18px;
  line-height: 1;
  padding-top: 1px;
  font-weight: bold;
}

/* Container for the Latest Updates Panel */
.updates-panel {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: #FFF;
  padding: 8px 24px;
  margin-top: 16px;
}

/* Restructure the rows */
.custom-activity-list {
  display: flex;
  flex-direction: column;
}

.custom-activity-item {
  padding: 16px 0;
  border-bottom: 1px solid #F0F2F8;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.custom-activity-item:last-child {
  border-bottom: none;
}

/* Signature purple dot accent */
.custom-activity-dot {
  color: #8A76F3;
  font-size: 16px;
  line-height: 1;
  padding-top: 2px;
  font-weight: bold;
}

/* Format the main post links */
.custom-activity-link {
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  display: block;
}

.custom-activity-link:hover {
  color: var(--primary-color);
}

/* Format the subtitle strings below the link */
.custom-activity-subtext {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
/* Search bar button */
.search-form input[type="submit"],
.search-form button[type="submit"] {
  background: #3A307F;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.search-form input[type="submit"]:hover,
.search-form button[type="submit"]:hover {
  background: #4A3A9F;
  box-shadow: 0 4px 12px rgba(58, 48, 127, 0.3);
}

/* Search input */
.search-form input[type="search"] {
  border: 2px solid #3A307F;
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
}

.search-form input[type="search"]:focus {
  box-shadow: 0 0 0 3px rgba(58, 48, 127, 0.12);
}

/* Clear (X) button */
.search-form input[type="reset"],
.search-form [type="reset"] {
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.search-form input[type="reset"]:hover {
  border-color: #3A307F;
  color: #3A307F;
}

/* ===== HIGHLIGHTED BOX ===== */
.highlighted-box {
  font-family: 'Lexend', sans-serif;
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(58, 48, 127, 0.07);
  max-width: 800px;
  margin: 0 auto 24px;
  color: #2d2d2d;
  line-height: 1.7;
  border: 1px solid #e8e6f5;
  border-left: 4px solid #3A307F;
}

.highlighted-box h2 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  color: #3A307F;
}

.highlighted-box p {
  margin: 0;
  font-size: 15px;
  color: #2d2d2d;
}

.highlighted-box p + p {
  margin-top: 12px;
}

.highlighted-box a {
  color: #3A307F;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(58, 48, 127, 0.3);
  transition: border-color 0.2s;
}

.highlighted-box a:hover {
  border-bottom-color: #3A307F;
}

/* Tables */
.highlighted-box table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 14px;
  background: #ffffff;
  border: 1px solid #e8e6f5;
  border-radius: 10px;
  overflow: hidden;
}

.highlighted-box th {
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #3A307F;
  background: #f4f3fb;
  border-bottom: 1px solid #e8e6f5;
}

.highlighted-box td {
  padding: 12px 16px;
  vertical-align: top;
  border-bottom: 1px solid #f0eeff;
  font-size: 14px;
}

.highlighted-box tbody tr:nth-child(even) {
  background: #faf9ff;
}

.highlighted-box tbody tr:last-child td {
  border-bottom: none;
}

/* Lists */
.highlighted-box ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.highlighted-box li {
  margin-bottom: 8px;
  font-size: 15px;
}

/* Images */
.highlighted-box img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 520px;
  margin: 16px auto 0;
  border-radius: 12px;
  border: 1px solid #e8e6f5;
  box-shadow: 0 4px 14px rgba(58, 48, 127, 0.07);
  object-fit: contain;
}

/* Accordions via <details> */
.highlighted-box details {
  border: 1px solid #e8e6f5;
  border-radius: 10px;
  padding: 12px 16px;
  background: #faf9ff;
}

.highlighted-box details + details {
  margin-top: 10px;
}

.highlighted-box summary {
  cursor: pointer;
  font-weight: 600;
  color: #3A307F;
  font-size: 14px;
}

.highlighted-box details p {
  margin-top: 10px;
}

/* Accent text */
.highlighted-box .accent-text {
  color: #3A307F;
  font-weight: 600;
}

/* =========================================================================
   SHARED Q3 THEME COMPONENTS
   Used by: search_results, new_community_post_page, request_page,
   user_profile_page. Centralized here instead of re-declared per template.
   Brand tone matches what's already live on header/category/article/home
   (#3A307F), not the unused --primary-color above (#382B93) — see note
   to team about reconciling those two values theme-wide.
   ========================================================================= */

:root {
  --q3-primary: #3A307F;
  --q3-primary-hover: #2D2568;
  --q3-primary-tint: #EAE6F5;
  --q3-text: #1a1a1a;
  --q3-text-muted: #666;
  --q3-border: #e0e0e0;
  --q3-bg: #f5f5f5;
  --q3-radius-lg: 12px;
  --q3-radius-md: 8px;
  --q3-danger: #C94E6D;
}

/* ---- Buttons (stock Zendesk .button classes used by comment/reply forms) ---- */
.button,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--q3-primary);
  color: #fff;
  border: none;
  border-radius: var(--q3-radius-md);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.05s;
  text-decoration: none;
  line-height: 1.2;
}
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--q3-primary-hover);
  box-shadow: 0 4px 12px rgba(58, 48, 127, 0.25);
}
.button:active,
input[type="submit"]:active,
button[type="submit"]:active { transform: translateY(1px); }

.button-large { padding: 12px 22px; font-size: 14px; }

.button-secondary,
.button-secondary[type="submit"] {
  background: #fff;
  color: var(--q3-primary);
  border: 1.5px solid var(--q3-primary);
}
.button-secondary:hover { background: var(--q3-primary-tint); box-shadow: none; }

/* ---- Avatars ---- */
.avatar { position: relative; flex-shrink: 0; display: inline-block; }
.avatar .user-avatar,
img.user-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--q3-primary-tint);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--q3-border);
  display: block;
}
.comment-avatar .user-avatar { width: 36px; height: 36px; }
.profile-avatar .user-avatar { width: 88px; height: 88px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--q3-border); }
.avatar .icon-agent {
  position: absolute; bottom: -2px; right: -2px;
  background: var(--q3-primary); color: #fff;
  border-radius: 50%; padding: 3px; border: 2px solid #fff;
}

/* ---- Status labels / pills (request status, moderation, badges) ---- */
.status-label {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 4px 10px; border-radius: 20px;
  background: var(--q3-bg); color: var(--q3-text-muted);
  white-space: nowrap;
}
.status-label-new,
.status-label-open      { background: #FDECEA; color: #C0392B; }
.status-label-pending    { background: #FFF4E0; color: #B0790C; }
.status-label-hold       { background: #F0F1F3; color: #5C6370; }
.status-label-solved,
.status-label-closed    { background: #E8F6EC; color: #1E8E4F; }
.status-label-official   { background: var(--q3-primary-tint); color: var(--q3-primary); }
.status-label-pending-moderation { background: #FFF4E0; color: #B0790C; }
.profile-private-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--q3-text-muted); background: var(--q3-bg);
  padding: 4px 10px; border-radius: 20px;
}

/* ---- Notifications / inline form errors ---- */
.notification-inline {
  font-size: 12.5px; color: var(--q3-danger);
  margin-top: 6px; display: flex; align-items: center; gap: 6px;
}

/* ---- Forms (inputs, textareas, selects, labels) ---- */
.form-field { margin-bottom: 20px; }
.form-field label,
label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--q3-text); margin-bottom: 6px;
}
.form-field .optional {
  font-weight: 400; color: var(--q3-text-muted); margin-left: 4px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="search"],
.form-field select,
.form-field textarea,
textarea,
select {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--q3-border);
  border-radius: var(--q3-radius-md);
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--q3-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--q3-primary);
  box-shadow: 0 0 0 3px rgba(58, 48, 127, 0.12);
}
.content-tags-add-hint {
  display: block; font-size: 12.5px; color: var(--q3-text-muted); margin-bottom: 6px;
}

/* ---- Dropdowns used outside the header (e.g. profile sorters) ---- */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle {
  background: #fff; border: 1.5px solid var(--q3-border);
  color: var(--q3-text); border-radius: var(--q3-radius-md);
  padding: 7px 12px; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.dropdown-toggle:hover { border-color: var(--q3-primary); color: var(--q3-primary); }
.dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border: 1px solid var(--q3-border); border-radius: var(--q3-radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 160px; padding: 6px 0; z-index: 50;
}
.dropdown-menu[aria-expanded="true"],
.dropdown.is-open .dropdown-menu,
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block; padding: 8px 16px; font-size: 13.5px;
  color: var(--q3-text); text-decoration: none;
}
.dropdown-menu a:hover { background: var(--q3-bg); color: var(--q3-primary); }

/* ---- Attachments ---- */
.attachments { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.attachment-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--q3-border); border-radius: var(--q3-radius-md);
  padding: 10px 14px; font-size: 13px; background: #fafafa;
}
.attachment-item a { color: var(--q3-primary); text-decoration: none; font-weight: 600; }
.attachment-item a:hover { text-decoration: underline; }
.attachment-icon { color: var(--q3-text-muted); flex-shrink: 0; }
.attachment-meta { display: flex; gap: 10px; margin-left: auto; font-size: 12px; color: var(--q3-text-muted); }

/* ---- Meta rows (author • date • stats) ---- */
.meta-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta-data { font-size: 12.5px; color: var(--q3-text-muted); }
.meta-data:not(:last-child)::after { content: "•"; margin-left: 8px; color: var(--q3-border); }

/* ---- Sub-nav bar (breadcrumbs + in-page search, {{search}} helper output) ---- */
.sub-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 0; margin-bottom: 8px;
}
.search-container {
  position: relative;
  display: flex; align-items: center;
  min-width: 240px;
}
.search-container .search-icon {
  position: absolute; left: 14px; color: var(--q3-text-muted); pointer-events: none;
  z-index: 1;
}
/* The {{search}} helper renders its own <form>; make it a flex row so the
   input, submit and clear/reset controls all stay on one line. */
.search-container form {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.search-container input[type="search"],
.search-container input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: 1.5px solid var(--q3-border);
  border-radius: 20px;
  padding: 9px 16px 9px 34px;
  font-size: 13.5px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-container input[type="search"]:focus,
.search-container input[type="text"]:focus {
  border-color: var(--q3-primary);
  box-shadow: 0 0 0 3px rgba(58, 48, 127, 0.12);
}
.search-container input[type="submit"],
.search-container button[type="submit"] {
  flex-shrink: 0;
  border-radius: 20px; padding: 9px 16px; font-size: 13px;
}
/* Kill the browser's own native clear icon inside type=search inputs —
   this was rendering ALONGSIDE Zendesk's own clear button, causing the
   "two x icons" bug. Only Zendesk's own control (styled below) should show. */
.search-container input[type="search"]::-webkit-search-cancel-button,
.search-container input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/* Clear/reset control — reset broadly (any button that isn't the submit
   button, regardless of its type attribute or tag) with "all: unset",
   since we can't rely on a guessed type="reset"/class name matching
   whatever Zendesk actually renders. */
.search-container button:not([type="submit"]),
.search-container input[type="reset"],
.search-container a.search-clear {
  all: unset;
  flex-shrink: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: var(--q3-text-muted);
  cursor: pointer;
}
.search-container button:not([type="submit"]):hover,
.search-container input[type="reset"]:hover,
.search-container a.search-clear:hover {
  color: var(--q3-primary);
}
.search-container button:not([type="submit"]) svg,
.search-container input[type="reset"] svg,
.search-container a.search-clear svg { width: 12px; height: 12px; }

/* ---- Breadcrumbs (generic, used where the fancy pill crumb isn't) ---- */
.breadcrumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 16px; font-size: 13px; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 6px; color: #ccc; }
.breadcrumbs a { color: var(--q3-primary); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
/* =========================================================================
   COMMUNITY PAGES
   (community_post_list, community_post, community_topic_list, community_topic)
   ========================================================================= */

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.container-divider { border-top: 1px solid var(--q3-border); }

/* Screen-reader-only utility - was undefined, so these headings were
   rendering as visible unstyled text instead of being hidden */
.visibility-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.no-content { padding: 24px 0; color: var(--q3-text-muted); font-size: 14px; }

/* ---- Hero search (post list / topic list) ---- */
.hero.community-hero {
  background: linear-gradient(135deg, #3A307F 0%, #2D2568 100%);
  padding: 32px 24px;
}
.hero.community-hero .hero-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.hero.community-hero .search-icon { position: absolute; left: 14px; color: var(--q3-text-muted); z-index: 1; }
.hero.community-hero form {
  display: flex; align-items: center; gap: 8px; width: 100%;
}
.hero.community-hero input[type="search"],
.hero.community-hero input[type="text"] {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  border: none; border-radius: 24px;
  padding: 12px 16px 12px 36px;
  font-size: 14px; outline: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.hero.community-hero input[type="search"]:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.4); }
.hero.community-hero input[type="submit"],
.hero.community-hero button[type="submit"] {
  flex-shrink: 0; border-radius: 22px; padding: 10px 20px;
  background: #fff; color: var(--q3-primary);
}
.hero.community-hero input[type="submit"]:hover,
.hero.community-hero button[type="submit"]:hover { background: #F0EEFA; }
.hero.community-hero input[type="search"]::-webkit-search-cancel-button,
.hero.community-hero input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.hero.community-hero button:not([type="submit"]),
.hero.community-hero input[type="reset"],
.hero.community-hero a.search-clear {
  all: unset; flex-shrink: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: rgba(255,255,255,0.8); cursor: pointer;
}
.hero.community-hero button:not([type="submit"]):hover,
.hero.community-hero input[type="reset"]:hover,
.hero.community-hero a.search-clear:hover { color: #fff; }

/* ---- Page header (title + view switcher + New post button) ---- */
.page-header.community-header,
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding: 28px 0 4px;
}
.page-header .title,
.page-header h1 { font-size: 24px; font-weight: 800; color: var(--q3-text); margin: 0; }
.page-header .dropdown-toggle .title { margin: 0; }
.page-header-description { color: var(--q3-text-muted); font-size: 14px; margin: 4px 0 20px; }
.community-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--q3-border); margin-bottom: 20px;
}

/* ---- Topic/sort filter row ---- */
.topic-header { padding: 16px 0; border-bottom: 1px solid var(--q3-border); margin-bottom: 8px; }
.topic-filters { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Striped list (posts inside a topic / all posts) ---- */
.posts-list.striped-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.striped-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid var(--q3-border); border-radius: var(--q3-radius-lg);
  padding: 16px 20px; flex-wrap: wrap;
}
.striped-list-item.post-featured { border-color: var(--q3-primary); background: var(--q3-primary-tint); }
.striped-list-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.striped-list-title { font-size: 15px; font-weight: 700; color: var(--q3-text); text-decoration: none; }
.striped-list-title:hover { color: var(--q3-primary); }
.post-overview-item { display: flex; gap: 6px; flex-wrap: wrap; }
.striped-list-count { display: flex; gap: 20px; flex-shrink: 0; }
.striped-list-count-item { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--q3-text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.striped-list-number { font-size: 16px; font-weight: 700; color: var(--q3-text); }
.no-posts-with-filter { padding: 40px 20px; text-align: center; color: var(--q3-text-muted); }

.status-label-pinned { background: #FFF4E0; color: #B0790C; }
.status-label-featured { background: var(--q3-primary-tint); color: var(--q3-primary); }
.escalation-badge { background: #FDECEA; color: #C0392B; text-decoration: none; }

/* ---- Topics grid (community_topic_list_page) ---- */
.blocks.topics { margin: 16px 0; }
.blocks-list.topics-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.blocks-item {
  border: 1px solid var(--q3-border); border-radius: var(--q3-radius-lg); background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.blocks-item:hover { border-color: var(--q3-primary); box-shadow: 0 4px 14px rgba(58,48,127,0.08); }
.blocks-item-link { display: block; padding: 20px; text-decoration: none; color: inherit; }
.blocks-item-title { display: block; font-size: 16px; font-weight: 700; color: var(--q3-text); margin-bottom: 8px; }
.blocks-item-description { display: block; font-size: 13.5px; color: var(--q3-text-muted); line-height: 1.5; margin-bottom: 12px; }
.blocks-item .meta-group { list-style: none; padding: 0; margin: 0; }

/* ---- Featured / promoted posts ---- */
.community-featured-posts { margin: 32px 0; }
.community-featured-posts .title { font-size: 15px; font-weight: 700; color: var(--q3-text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 12px; }
.promoted-articles { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.promoted-articles-item a {
  display: block; padding: 12px 16px; background: #fff; border: 1px solid var(--q3-border);
  border-radius: var(--q3-radius-md); color: var(--q3-primary); text-decoration: none; font-weight: 600; font-size: 14px;
}
.promoted-articles-item a:hover { border-color: var(--q3-primary); }

/* ---- Recent community activity (Zendesk-generated markup) ---- */
.community-activity.activity {
  border: 1px solid var(--q3-border); border-radius: var(--q3-radius-lg);
  background: #fff; padding: 8px 20px; margin: 32px 0;
}

/* ---- Footer CTA ---- */
.community-footer {
  text-align: center; padding: 40px 24px; margin-top: 32px;
  background: var(--q3-primary-tint); border-radius: var(--q3-radius-lg);
}
.community-footer-title { font-size: 18px; font-weight: 700; color: var(--q3-text); margin: 0 0 16px; }

/* ---- Post detail page ---- */
.post-container { display: flex; align-items: flex-start; gap: 32px; margin-top: 16px; }
.post { flex: 1; min-width: 0; }
.post-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.post-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.post-title h1 { font-size: 24px; font-weight: 800; color: var(--q3-text); margin: 0; }
.post-info-container { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.post-info { flex: 1; min-width: 0; }
.post-author { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.post-meta { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.post-meta > span:first-child { font-weight: 700; color: var(--q3-text); }
.community-badge-titles, .community-badge-achievements { list-style: none; display: inline-flex; gap: 6px; padding: 0; margin: 2px 0; flex-wrap: wrap; }
.community-badge-title { background: var(--q3-primary-tint); color: var(--q3-primary); padding: 2px 9px; border-radius: 12px; font-size: 10.5px; font-weight: 700; }
.community-badge-achievement img { width: 22px; height: 22px; border-radius: 50%; }
.community-badge-achievements-rest { display: inline-flex; align-items: center; font-size: 11px; color: var(--q3-text-muted); text-decoration: none; }
.post-content { margin-top: 8px; }
.post-body { font-size: 15px; line-height: 1.7; color: var(--q3-text); }
.content-tags { margin-top: 20px; }
.content-tags p { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--q3-text-muted); margin-bottom: 8px; }
.content-tag-list { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0; }
.content-tag-item a { display: inline-block; background: var(--q3-bg); color: var(--q3-text-muted); padding: 4px 12px; border-radius: 16px; font-size: 12px; text-decoration: none; }
.content-tag-item a:hover { background: var(--q3-primary-tint); color: var(--q3-primary); }

/* ---- Voting ---- */
.vote { display: flex; align-items: center; gap: 6px; }
.post-actions-wrapper { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; }
.post-vote.vote { flex-direction: column; background: var(--q3-bg); border-radius: var(--q3-radius-lg); padding: 10px 8px; }
.vote-up, .vote-down {
  background: none; border: none; cursor: pointer; color: var(--q3-text-muted);
  display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 50%;
}
.vote-up:hover, .vote-down:hover { color: var(--q3-primary); background: #fff; }
.vote-voted { color: var(--q3-primary); }
.vote-sum { font-size: 14px; font-weight: 700; color: var(--q3-text); }
.post-actions.actions, .comment-actions.actions {
  display: flex; gap: 4px; justify-content: center;
}
.post-actions.actions button, .comment-actions.actions button {
  background: none; border: none; cursor: pointer; color: var(--q3-text-muted); padding: 4px; border-radius: 4px;
}
.post-actions.actions button:hover, .comment-actions.actions button:hover { color: var(--q3-primary); }

.post-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 20px; border-top: 1px solid var(--q3-border); }
.post-comment-count { display: flex; align-items: center; gap: 6px; color: var(--q3-text-muted); text-decoration: none; font-size: 13px; }
.post-comment-count:hover { color: var(--q3-primary); }

.comment-overview { margin-top: 32px; }
.comment-heading { font-size: 18px; font-weight: 700; color: var(--q3-text); margin: 0 0 4px; }
.comment-callout { color: var(--q3-text-muted); font-size: 13.5px; }
.comment-list { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 14px; }
.comment-wrapper {
  background: #fff; border: 1px solid var(--q3-border); border-radius: var(--q3-radius-lg);
  padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.comment-wrapper.comment-official { border-color: var(--q3-primary); background: var(--q3-primary-tint); }
.comment-info { flex: 1; min-width: 0; }
.comment-author { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.comment-labels { margin-left: auto; display: flex; gap: 6px; }
.comment-actions-container { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.comment-vote.vote { flex-direction: column; }

.post-sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--q3-bg); border: 1px solid var(--q3-border); border-radius: var(--q3-radius-lg);
  padding: 24px; text-align: center; position: sticky; top: 24px;
}
.post-sidebar-title { font-size: 15px; font-weight: 700; margin: 0 0 14px; }

@media (max-width: 900px) {
  .post-container { flex-direction: column; }
  .post-sidebar { width: 100%; position: static; }
}

/* =========================================================================
   MY ACTIVITIES (contributions_page, subscriptions_page/"Following"; also
   compatible with the tabs on user_profile_page)
   ========================================================================= */

.my-activities-nav { background: #fff; border-bottom: 1px solid var(--q3-border); }
.my-activities-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 28px 0 20px; }
.my-activities-header h1 { font-size: 24px; font-weight: 800; color: var(--q3-text); margin: 0; }
.my-activities-following-header { padding-bottom: 20px; }

.collapsible-nav-list { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0; flex-wrap: wrap; }
.collapsible-nav-list li a {
  display: block; padding: 14px 16px; font-size: 14px; font-weight: 600;
  color: var(--q3-text-muted); text-decoration: none; border-bottom: 2px solid transparent;
}
.collapsible-nav-list li a:hover { color: var(--q3-primary); }
.collapsible-nav-list li.current a { color: var(--q3-primary); border-bottom-color: var(--q3-primary); }
.collapsible-nav-border { border-top: 1px solid var(--q3-border); padding-top: 4px; }
.collapsible-nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--q3-text-muted); }

table.my-activities-table {
  width: 100%; border-collapse: collapse; margin: 8px 0 24px;
  background: #fff; border: 1px solid var(--q3-border); border-radius: var(--q3-radius-lg); overflow: hidden;
}
table.my-activities-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--q3-text-muted); padding: 12px 16px; background: var(--q3-bg); border-bottom: 1px solid var(--q3-border);
}
table.my-activities-table td {
  padding: 14px 16px; font-size: 13.5px; color: var(--q3-text); border-bottom: 1px solid #f0f0f0; vertical-align: middle;
}
table.my-activities-table tr:last-child td { border-bottom: none; }
table.my-activities-table .striped-list-title { color: var(--q3-primary); text-decoration: none; font-weight: 600; }
table.my-activities-table .striped-list-title:hover { text-decoration: underline; }
table.my-activities-table img.user-avatar { width: 24px; height: 24px; margin-right: 8px; vertical-align: middle; }
.subscriptions-subscribe { text-align: right; }
.no-activities { padding: 40px 20px; text-align: center; color: var(--q3-text-muted); background: #fff; border: 1px solid var(--q3-border); border-radius: var(--q3-radius-lg); }

@media (max-width: 640px) {
  table.my-activities-table { display: block; overflow-x: auto; white-space: nowrap; }
  .my-activities-header { padding: 20px 0 16px; }
}

/* =========================================================================
   ZENDESK-RENDERED WIDGETS (subscribe/follow, profile actions, recent
   activity). We don't control their exact internal markup, so these
   selectors reset default browser styling on whatever's inside the known
   wrapper (a/button/label/input) rather than relying on guessed class names.
   ========================================================================= */

/* ---- Follow / Following toggle ({{subscribe}}) ---- */
.community-follow { display: inline-flex; align-items: center; }
.community-follow input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.community-follow a,
.community-follow button,
.community-follow label {
  all: unset;
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  border: 1.5px solid var(--q3-primary);
  border-radius: 20px;
  font-size: 13px; font-weight: 700;
  color: var(--q3-primary);
  background: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.community-follow a:hover,
.community-follow button:hover,
.community-follow label:hover { background: var(--q3-primary-tint); }
/* Active/"Following" state - covers whichever state class/attr Zendesk uses */
.community-follow .is-following,
.community-follow .following,
.community-follow .subscribed,
.community-follow [aria-pressed="true"],
.community-follow input[type="checkbox"]:checked + label,
.community-follow label:has(input[type="checkbox"]:checked) {
  background: var(--q3-primary);
  color: #fff;
}
.community-follow svg { width: 13px; height: 13px; }

/* ---- Profile "Edit profile" split-button ({{actions}}) ---- */
.user-profile-actions.split-button {
  display: inline-flex; align-items: stretch;
  border-radius: var(--q3-radius-md);
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.4);
}
.user-profile-actions.split-button a,
.user-profile-actions.split-button button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.user-profile-actions.split-button a:hover,
.user-profile-actions.split-button button:hover { background: rgba(255,255,255,0.25); }
.user-profile-actions.split-button > * + * { border-left: 1px solid rgba(255,255,255,0.35); }
.user-profile-actions.split-button svg { width: 12px; height: 12px; }
.user-profile-actions.split-button .dropdown-menu {
  /* If the split-button's caret opens a menu, keep it readable on white,
     not floating on the purple header background. */
  color: var(--q3-text);
}
.user-profile-actions.split-button .dropdown-menu a {
  all: unset;
  box-sizing: border-box;
  display: block; width: 100%;
  padding: 8px 16px;
  color: var(--q3-text);
  font-weight: 500;
  background: #fff;
}
.user-profile-actions.split-button .dropdown-menu a:hover { background: var(--q3-bg); }

/* ---- Recent community activity feed ({{recent_activity scope='community'}}) ----
   Still can't see this widget's real markup. This pass fixes what's most
   likely the actual bug in the previous attempt: using direct-child (>)
   selectors, which miss anything nested one level deeper than assumed, and
   not overriding the browser's own default link color/underline/visited
   styling - which is what actually produces that dated look regardless of
   the wrapping element. Uses descendant selectors instead of direct-child
   so it reaches nested content either way.
   If this still isn't right, the fastest path to a precise fix is pasting
   the widget's actual HTML (right-click → Inspect → copy outer HTML of one
   row) so it can be targeted exactly instead of guessed a third time. */
.community-activity { font-size: 13.5px; }
.community-activity h1,
.community-activity h2,
.community-activity h3,
.community-activity h4,
.community-activity h5 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--q3-text-muted);
  margin: 0;
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid #eee;
}
.community-activity h1:first-child,
.community-activity h2:first-child,
.community-activity h3:first-child,
.community-activity h4:first-child,
.community-activity h5:first-child {
  margin-top: 4px; padding-top: 0; border-top: none;
}
.community-activity h1 + h1, .community-activity h1 + h2, .community-activity h1 + h3, .community-activity h1 + h4, .community-activity h1 + h5,
.community-activity h2 + h1, .community-activity h2 + h2, .community-activity h2 + h3, .community-activity h2 + h4, .community-activity h2 + h5,
.community-activity h3 + h1, .community-activity h3 + h2, .community-activity h3 + h3, .community-activity h3 + h4, .community-activity h3 + h5,
.community-activity h4 + h1, .community-activity h4 + h2, .community-activity h4 + h3, .community-activity h4 + h4, .community-activity h4 + h5 {
  /* two headings back-to-back (same topic posted twice) shouldn't double the gap */
  margin-top: 22px; padding-top: 22px;
}
.community-activity h1 a, .community-activity h2 a,
.community-activity h3 a, .community-activity h4 a, .community-activity h5 a {
  color: inherit; text-decoration: none;
}
.community-activity a {
  color: var(--q3-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.4;
}
.community-activity a:visited { color: var(--q3-primary); }
.community-activity a:hover { text-decoration: underline; }
.community-activity p {
  font-size: 12.5px; color: var(--q3-text-muted); margin: 5px 0 0;
  display: flex; align-items: center; gap: 5px; line-height: 1.5;
}
.community-activity svg {
  width: 13px; height: 13px; flex-shrink: 0; color: var(--q3-text-muted);
  vertical-align: -2px;
}
.community-activity > a:last-of-type {
  display: inline-block; margin-top: 22px; padding-top: 22px;
  border-top: 1px solid #eee;
  font-size: 13px; font-weight: 700;
}

/* =========================================================================
   RTL SUPPORT (Arabic and other right-to-left locales)
   Zendesk automatically sets dir="rtl" on <html> for RTL locales, so all
   of this applies purely via CSS with no template changes needed.
   Covers every shared component used across the theme.
   ========================================================================= */

html[dir="rtl"] body { text-align: right; }

/* Search bars (search results, community pages, new post pages) */
html[dir="rtl"] .search-container .search-icon { left: auto; right: 14px; }
html[dir="rtl"] .search-container input[type="search"],
html[dir="rtl"] .search-container input[type="text"] { padding: 9px 34px 9px 16px; }
html[dir="rtl"] .hero.community-hero .search-icon { left: auto; right: 14px; }
html[dir="rtl"] .hero.community-hero input[type="search"],
html[dir="rtl"] .hero.community-hero input[type="text"] { padding: 12px 36px 12px 16px; }

/* Buttons, dropdowns, breadcrumbs */
html[dir="rtl"] .breadcrumbs { flex-direction: row-reverse; }
html[dir="rtl"] .breadcrumbs li:not(:last-child)::after { content: "‹"; margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .dropdown-menu { right: auto; left: 0; }
html[dir="rtl"] .dropdown-toggle svg,
html[dir="rtl"] .dropdown-chevron-icon { transform: scaleX(-1); }

/* Cards, avatars, status labels, meta rows */
html[dir="rtl"] .meta-group { flex-direction: row-reverse; }
html[dir="rtl"] .meta-data:not(:last-child)::after { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .avatar .icon-agent { right: auto; left: -2px; }
html[dir="rtl"] .comment-labels { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .attachment-meta { margin-left: 0; margin-right: auto; }

/* Sidebars flip to the right */
html[dir="rtl"] .hc-sidebar,
html[dir="rtl"] .request-sidebar,
html[dir="rtl"] .post-sidebar {
  border-right: none;
  border-left: 1px solid var(--border-color, var(--q3-border));
}
html[dir="rtl"] .request-container,
html[dir="rtl"] .post-container { flex-direction: row-reverse; }

/* Feedback vertical edge-tab: flips to the LEFT edge in RTL, since RTL
   readers' "start" is the right and the tab reads as an edge marker */
html[dir="rtl"] .fb-widget-launcher {
  right: auto; left: 0;
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 4px 20px rgba(58,48,127,0.3);
}
html[dir="rtl"] .fb-widget-launcher:hover { box-shadow: 6px 4px 26px rgba(58,48,127,0.4); padding-left: 14px; padding-right: 10px; }
html[dir="rtl"] .fb-widget-launcher span { transform: rotate(0deg); }
html[dir="rtl"] .fb-widget-panel { right: auto; left: 64px; }
html[dir="rtl"] .fb-widget-header { flex-direction: row-reverse; }

/* Status pills, badges, tags */
html[dir="rtl"] .status-label,
html[dir="rtl"] .profile-private-badge,
html[dir="rtl"] .community-badge-title { direction: rtl; }
html[dir="rtl"] .content-tag-list,
html[dir="rtl"] .source-pills,
html[dir="rtl"] .breadcrumbs { direction: rtl; }

/* Vote widgets, comment actions */
html[dir="rtl"] .post-container .post-actions-wrapper,
html[dir="rtl"] .comment-actions-container { direction: rtl; }

/* Generic icon flips for directional chevrons/arrows used across the theme */
html[dir="rtl"] .striped-list-item svg,
html[dir="rtl"] a[href] > svg.arrow-icon { transform: scaleX(-1); }

/* =========================================================================
   RESTORED FROM OLD THEME — CONTENT-AUTHORING COMPONENTS
   These are classes editors paste into article-body WYSIWYG HTML, not
   theme chrome. They were present in the old theme's CSS but never carried
   over when this theme was rebuilt - meaning any existing (or newly
   restructured) article using them would render completely unstyled the
   moment this theme goes live. Ported over here, restyled to match this
   theme's actual brand color (#3A307F) instead of the old orange/red accent.
   ========================================================================= */

/* ---- Accordion (rebuilt - see script.js for the behavior fix) ---- */
.accordion-container { max-width: 920px; margin: 0 auto; }
.accordion .accordion-item,
.pf-acc-item,
.accordion-item-ar {
  background: #ffffff;
  border: 1px solid #ececf3;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(58, 48, 127, 0.06);
  margin-bottom: 16px;
  overflow: hidden;
}
.accordion .accordion-item:last-child,
.pf-acc-item:last-child,
.accordion-item-ar:last-child { margin-bottom: 0; }

.accordion button,
.pf-acc-item .pf-acc-btn,
.accordion-item-ar button {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 22px 64px 22px 24px;
  font-family: 'Lexend', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5;
  color: #3A307F;
  border: none;
  background: #ffffff;
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
[dir="rtl"] .accordion button,
[dir="rtl"] .pf-acc-item .pf-acc-btn,
[dir="rtl"] .accordion-item-ar button { text-align: right; padding: 22px 24px 22px 64px; }

.accordion button:hover,
.accordion button:focus,
.pf-acc-item .pf-acc-btn:hover,
.accordion-item-ar button:hover {
  background: #faf9ff;
}
.accordion button[aria-expanded='true'],
.pf-acc-item.is-open .pf-acc-btn,
.accordion-item-ar button[aria-expanded='true'] {
  color: #3A307F;
  font-weight: 600;
  border-bottom: 1px solid #ececf3;
}

.accordion button .icon,
.pf-acc-item .pf-acc-btn .icon,
.accordion-item-ar button .icon-ar {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
[dir="rtl"] .accordion button .icon,
[dir="rtl"] .accordion-item-ar button .icon-ar { right: auto; left: 20px; }

.accordion button .icon::before,
.pf-acc-item .pf-acc-btn .icon::before,
.accordion-item-ar button .icon-ar::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #9aa0b5;
  border-bottom: 2px solid #9aa0b5;
  transform: rotate(45deg);
  transition: transform 0.25s ease, border-color 0.2s ease;
}
.accordion button:hover .icon::before { border-color: #3A307F; }
.accordion button[aria-expanded='true'] .icon::before,
.pf-acc-item.is-open .pf-acc-btn .icon::before,
.accordion-item-ar button[aria-expanded='true'] .icon-ar::before {
  transform: rotate(-135deg);
  border-color: #EA3934;
}

/* CONTENT - collapsed by default; JS drives max-height + a ResizeObserver
   so late-loading images (or anything else that changes the panel's real
   height after it's opened) can't get clipped, unlike the old version
   which only measured height once, at the moment of the click. */
.accordion-content,
.accordion-content-ar {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background: #ffffff;
  transition: max-height 280ms ease, opacity 240ms ease, padding 240ms ease;
  padding: 0 24px;
}
.accordion button[aria-expanded='true'] + .accordion-content,
.pf-acc-item.is-open .accordion-content,
.accordion-item-ar button[aria-expanded='true'] + .accordion-content-ar {
  opacity: 1;
  padding-top: 8px;
  padding-bottom: 18px;
}
.accordion-content > *:first-child,
.accordion-content-ar > *:first-child { margin-top: 0; }
.accordion-content p,
.accordion-content-ar p { font-size: 1rem; color: #2d2d2d; line-height: 1.7; margin: 0 0 18px; }
.accordion-content h2, .accordion-content h3,
.accordion-content-ar h2, .accordion-content-ar h3 { color: #3A307F; font-weight: 600; margin: 0 0 14px; }
.accordion-content ul, .accordion-content ol,
.accordion-content-ar ul, .accordion-content-ar ol { margin: 0 0 18px; padding-left: 20px; }
[dir="rtl"] .accordion-content ul, [dir="rtl"] .accordion-content-ar ul { padding-left: 0; padding-right: 20px; }
.accordion-content li, .accordion-content-ar li { margin-bottom: 10px; }
.accordion-content a, .accordion-content-ar a { color: #EA3934; text-decoration: none; font-weight: 500; }
.accordion-content a:hover, .accordion-content-ar a:hover { text-decoration: underline; }
.accordion-content table {
  width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 14px;
  border: 1px solid #e8e8ef; border-radius: 14px; overflow: hidden;
}
.accordion-content th { background: #f6f4ff; color: #3A307F; padding: 14px; text-align: left; font-weight: 600; }
.accordion-content td { padding: 14px; border-top: 1px solid #f0f0f5; }
.accordion-content tr:nth-child(even) { background: #fcfbff; }
.accordion-content img { width: 100%; margin: 14px 0 18px; border-radius: 14px; border: 1px solid #e8e8ef; box-shadow: 0 4px 14px rgba(18,18,23,0.06); }

/* ---- Callout boxes ---- */
.info-note, .info-note-icon-box, .tip-box, .tip-section, .note-section, .warning-section {
  display: flex; align-items: flex-start; gap: 14px;
  border-radius: 10px; padding: 16px 20px; margin: 0 0 20px;
  font-size: 15px; line-height: 1.6; color: #2d2d2d;
}
.info-note, .info-note-icon-box { background: #f4f4ff; border: 1px solid #e0e6eb; }
.tip-box, .tip-section { background: #f7f8ff; border-left: 4px solid #3A307F; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.note-section { background: transparent; border: 1px solid #dc8782; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.warning-section { background: rgba(156,47,183,0.06); border: 1px solid #c782dc; border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,0.08); }
.info-note img, .info-note-icon-box .icon, .tip-box img, .tip-section .tip-icon, .note-section .note-icon {
  flex-shrink: 0; width: 26px; height: 26px; margin-top: 2px;
}
.info-note strong:first-child, .tip-box strong, .tip-section strong { color: #3A307F; font-weight: 600; }
.note-section strong { color: #EA3934; font-weight: 600; }
.info-note p, .info-note-icon-box p, .tip-box .tip-text, .tip-section .tip-text, .note-section .note-text { margin: 0; flex: 1; line-height: 1.6; }

/* ---- Custom table style used in article bodies ---- */
.pf-table, .wysiwyg-table-resized {
  width: 100%; border-collapse: collapse; font-size: 15px; color: #2d2d2d;
  margin: 20px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.pf-table thead tr, .table-head-style { background: #3A307F; color: #fff; font-weight: bold; }
.pf-table th, .wysiwyg-table-resized th { padding: 12px; border: 1px solid #ddd; text-align: left; background-color: #f7f7f7; }
.pf-table td, .wysiwyg-table-resized td { padding: 10px 12px; border: 1px solid #ddd; }
.pf-table .center, .td-image { text-align: center; vertical-align: middle; }
.td-data { padding-right: 20px; }
.pf-table input[type="checkbox"] { width: 1.1em; height: 1.1em; accent-color: #3A307F; cursor: pointer; margin: 0; }

/* ---- Tabbed content ---- */
.tabbed-ui-body { color: #333; }
.tabbed-nav {
  display: inline-flex; border: 1px solid #ccc; border-bottom: none;
  border-radius: 6px 6px 0 0; overflow: hidden; font-size: 1rem;
  user-select: none; margin-bottom: -1px;
}
.tabbed-tab-button {
  padding: 0.5rem 1.5rem; cursor: pointer; border: none;
  border-bottom: 2px solid transparent; background: #f9f9f9;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.tabbed-tab-button.active { color: #3A307F; border-bottom-color: #3A307F; font-weight: 500; background: #fff; }
.tabbed-tab-button:hover:not(.active) { color: #3A307F; }
.tabbed-tab-content {
  border: 1px solid #ccc; border-radius: 0 6px 6px 6px; background: #fff;
  padding: 1.75rem 2rem; box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* ---- Tooltip ---- */
.pf-tooltip { position: relative; display: inline-block; cursor: pointer; }
.pf-tooltip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; font-size: 12px; font-weight: bold;
  color: #fff; background: #3A307F; border-radius: 50%; margin-left: 6px;
}
.pf-tooltip-text {
  visibility: hidden; opacity: 0; width: 240px; background: #333; color: #fff;
  text-align: left; padding: 8px 10px; border-radius: 6px; position: absolute;
  bottom: 125%; left: 50%; transform: translateX(-50%); z-index: 1000;
  font-size: 12px; line-height: 1.4; transition: opacity 0.2s ease;
}
.pf-tooltip:hover .pf-tooltip-text { visibility: visible; opacity: 1; }

/* ---- Misc content-authoring utilities ---- */
.bottom-line-h { border-bottom: 1px solid #75727957; }
.image-shadow-box { box-shadow: 0 1px 5px 0 rgba(0,0,0,.14); border: 1px solid #8080802e; }
.gif-wrapper { text-align: center; margin: 20px 0; }
.styled-gif { max-width: 100%; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 2px solid #f0f0f0; }
.special-case :target { display: block; }
.special-case { font-family: 'Lexend', sans-serif; }
.special-case :target .internal-div {
  box-shadow: 0 1px 5px 0 rgba(0,0,0,.14); border-radius: 5px; border: 1px solid #b0b0b0;
  padding: 10px 20px; background: #ffffff;
}
.no-display { display: none; }
.no-display .no-display-button {
  background: #fff; margin: 10px 5px; min-width: 90px; border: 1px solid #3A307F;
  border-radius: 4px; color: #3A307F; cursor: pointer; display: inline-block;
  font-size: 12px; line-height: 2.34; padding: 0 20px; text-align: center;
  transition: all 0.12s ease-in-out; white-space: nowrap;
}
.no-display .no-display-button:hover { background: #3A307F; color: #fff; }
.pf-subtopic-field { margin-top: 12px; }
.pf-subtopic-select {
  width: 100%; border: 1px solid #d8dcde; border-radius: 10px; padding: 10px 12px;
  background: #fff; font-size: 14px; line-height: 1.2; outline: none;
}
.pf-subtopic-select:focus { border-color: #3A307F; box-shadow: 0 0 0 3px rgba(58,48,127,.15); }
.pf-subtopic-hint { display: block; margin-top: 6px; color: #68737d; font-size: 12px; }