/* Community forum + partner directory (FAFM_Community). Uses the
   marketing theme's tokens (--fafm-*) so it follows its colours and dark
   mode; fallbacks keep it readable without the theme. Mobile first. */

.fafm-cm {
    --cm-primary: var(--fafm-primary, #4a96e8);
    --cm-primary-dark: var(--fafm-primary-dark, #2f73c7);
    --cm-primary-soft: var(--fafm-primary-soft, rgba(74, 150, 232, 0.14));
    --cm-surface: var(--fafm-surface, #fff);
    --cm-surface-2: var(--fafm-surface-2, #fbfcff);
    --cm-border: var(--fafm-border, #d9e1ec);
    --cm-text: var(--fafm-text, #214b84);
    --cm-strong: var(--fafm-text-strong, #183964);
    --cm-soft: var(--fafm-text-soft, #7086a1);
    --cm-radius: var(--fafm-radius-md, 16px);
    --cm-wa: #1fa855;
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px 16px 64px;
    color: var(--cm-text);
    font-size: 16px;
    line-height: 1.55;
}

.fafm-cm *,
.fafm-cm *::before,
.fafm-cm *::after { box-sizing: border-box; }

.fafm-cm a:not(.fafm-button) { color: var(--cm-primary-dark); }
.fafm-cm a.fafm-button--primary { color: #fff; }
.fafm-cm h1, .fafm-cm h2 { color: var(--cm-strong); line-height: 1.2; }
.fafm-cm h1 { font-size: clamp(26px, 5vw, 36px); margin: 4px 0 8px; letter-spacing: -0.01em; }
.fafm-cm h2 { font-size: 18px; margin: 0 0 10px; }
.fafm-cm-muted { color: var(--cm-soft); font-size: 14px; }

/* Tabs */
.fafm-cm-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.fafm-cm-tab { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--cm-soft) !important; border: 1px solid transparent; }
.fafm-cm-tab.is-active { background: var(--cm-primary-soft); color: var(--cm-primary-dark) !important; }
.fafm-cm-wa-link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--cm-wa) !important; text-decoration: none; }

/* Hero */
.fafm-cm-hero { margin-bottom: 20px; }
.fafm-cm-hero p { color: var(--cm-soft); margin: 0 0 16px; max-width: 680px; }
.fafm-cm-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fafm-cm-search, .fafm-cm-filters { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 320px; }
.fafm-cm-search input, .fafm-cm-filters input, .fafm-cm-filters select { flex: 1 1 160px; min-width: 0; }
.fafm-cm-back { display: inline-block; font-size: 14px; text-decoration: none; margin-bottom: 6px; }

/* Inputs */
.fafm-cm input[type="text"], .fafm-cm input[type="search"], .fafm-cm input[type="email"], .fafm-cm input[type="tel"],
.fafm-cm input[type="url"], .fafm-cm input[type="number"], .fafm-cm select, .fafm-cm textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--cm-border);
    border-radius: 12px;
    background: var(--cm-surface);
    color: var(--cm-strong);
    font: inherit;
    font-size: 16px; /* no iOS zoom on focus */
}
.fafm-cm textarea { resize: vertical; min-height: 120px; }
.fafm-cm input:focus, .fafm-cm select:focus, .fafm-cm textarea:focus { outline: none; border-color: var(--cm-primary); box-shadow: 0 0 0 3px var(--cm-primary-soft); }

/* Layout */
.fafm-cm-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 900px) { .fafm-cm-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.fafm-cm-side { display: flex; flex-direction: column; gap: 16px; }

.fafm-cm-card { background: var(--cm-surface); border: 1px solid var(--cm-border); border-radius: var(--cm-radius); padding: 18px; }
.fafm-cm-narrow { max-width: 760px; margin: 0 auto; }

/* Topic list */
.fafm-cm-topics { list-style: none; margin: 0; padding: 0; background: var(--cm-surface); border: 1px solid var(--cm-border); border-radius: var(--cm-radius); overflow: hidden; }
.fafm-cm-topic { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--cm-border); }
.fafm-cm-topic:first-child { border-top: 0; }
.fafm-cm-topic__body { flex: 1 1 auto; min-width: 0; }
.fafm-cm-topic__title { display: block; font-weight: 700; color: var(--cm-strong) !important; text-decoration: none; overflow-wrap: anywhere; }
.fafm-cm-topic__title:hover { color: var(--cm-primary-dark) !important; }
.fafm-cm-topic__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; font-size: 13px; color: var(--cm-soft); }
.fafm-cm-dot { opacity: 0.6; }
.fafm-cm-topic__stats { flex: 0 0 auto; text-align: center; min-width: 52px; font-size: 12px; color: var(--cm-soft); display: flex; flex-direction: column; }
.fafm-cm-topic__stats strong { font-size: 18px; color: var(--cm-strong); }
.fafm-cm-chip { padding: 1px 8px; border-radius: 999px; background: var(--cm-primary-soft); text-decoration: none; font-weight: 600; font-size: 12px; }
.fafm-cm-flag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--cm-surface-2); border: 1px solid var(--cm-border); color: var(--cm-soft); }
.fafm-cm-flag.is-pinned { color: #b26b00; border-color: rgba(178, 107, 0, 0.35); }
.fafm-cm-flag.is-solved { color: #1d7a45; border-color: rgba(29, 122, 69, 0.35); }

/* Avatars + badges */
.fafm-cm-avatar { --hue: 210; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: hsl(var(--hue), 55%, 48%); }
.fafm-cm-avatar.is-lg { width: 48px; height: 48px; font-size: 17px; border-radius: 14px; }
.fafm-cm-avatar.is-xl { width: 64px; height: 64px; font-size: 22px; border-radius: 18px; }
.fafm-cm-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: middle; }
.fafm-cm-badge.is-team { background: var(--cm-primary-soft); color: var(--cm-primary-dark); }
.fafm-cm-badge.is-partner { background: rgba(31, 168, 85, 0.14); color: #177a3f; }

/* Categories sidebar */
.fafm-cm-cats { list-style: none; margin: 0; padding: 0; }
.fafm-cm-cats a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--cm-text) !important; font-size: 15px; }
.fafm-cm-cats a:hover, .fafm-cm-cats a.is-active { background: var(--cm-primary-soft); }
.fafm-cm-cats em { font-style: normal; color: var(--cm-soft); font-size: 13px; }
.fafm-cm-promo p { margin: 0 0 12px; color: var(--cm-soft); font-size: 15px; }
.fafm-cm-mod { display: flex; flex-direction: column; gap: 6px; border-style: dashed; }
.fafm-cm-mod__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fafm-cm-mod__row input[type="text"] { flex: 1 1 220px; }

/* WhatsApp */
.fafm-cm-wa { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px; border-radius: var(--cm-radius); background: rgba(31, 168, 85, 0.1); border: 1px solid rgba(31, 168, 85, 0.3); }
.fafm-cm-wa__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cm-wa); color: #fff; flex: 0 0 auto; }
.fafm-cm-wa__text { flex: 1 1 180px; display: flex; flex-direction: column; gap: 2px; }
.fafm-cm-wa__text strong { color: var(--cm-strong); }
.fafm-cm-wa__text span { font-size: 14px; color: var(--cm-soft); }
.fafm-cm .fafm-cm-wa__btn, .fafm-cm .fafm-cm-btn-wa { background: var(--cm-wa) !important; border-color: var(--cm-wa) !important; color: #fff !important; }

/* Thread */
.fafm-cm-thread { max-width: 820px; margin: 0 auto; }
.fafm-cm-thread__title { overflow-wrap: anywhere; }
.fafm-cm-post { background: var(--cm-surface); border: 1px solid var(--cm-border); border-radius: var(--cm-radius); padding: 16px; margin: 12px 0; }
.fafm-cm-post.is-accepted { border-color: rgba(29, 122, 69, 0.55); box-shadow: 0 0 0 3px rgba(29, 122, 69, 0.1); }
.fafm-cm-post.is-hidden { opacity: 0.55; border-style: dashed; }
.fafm-cm-post__head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.fafm-cm-post__head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.fafm-cm-post__head strong { color: var(--cm-strong); }
.fafm-cm-post__body { overflow-wrap: anywhere; }
.fafm-cm-post__body p { margin: 0 0 10px; }
.fafm-cm-post__body p:last-child { margin-bottom: 0; }
.fafm-cm-post__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cm-border); }
.fafm-cm-accepted-label { margin-top: 18px; font-weight: 700; color: #1d7a45; font-size: 14px; }
.fafm-cm-replies-title { margin-top: 26px !important; font-size: 16px !important; color: var(--cm-soft) !important; }
.fafm-cm-inline { display: inline; margin: 0; }
.fafm-cm-link { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--cm-primary-dark); cursor: pointer; text-decoration: none; }
.fafm-cm-link.is-quiet { color: var(--cm-soft); font-weight: 500; }
.fafm-cm-share { margin: 16px 0; font-size: 14px; }
.fafm-cm-share a { color: var(--cm-wa) !important; font-weight: 600; text-decoration: none; }

/* Forms */
.fafm-cm-form { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.fafm-cm-form label, .fafm-cm-form legend { font-weight: 600; color: var(--cm-strong); font-size: 14px; margin-top: 10px; }
.fafm-cm-form fieldset { border: 0; padding: 0; margin: 0; }
.fafm-cm-form .fafm-button { align-self: flex-start; margin-top: 14px; }
.fafm-cm-form__hint { font-size: 13px; color: var(--cm-soft); }
.fafm-cm-req { color: #c2410c; }
.fafm-cm-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
@media (min-width: 640px) { .fafm-cm-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fafm-cm-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 14px; margin-top: 6px; }
@media (min-width: 640px) { .fafm-cm-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fafm-cm-check { font-weight: 500 !important; margin: 0 !important; display: flex; gap: 8px; align-items: center; }
.fafm-cm-join p { margin: 0 0 12px; }
.fafm-cm-join .fafm-button { margin: 4px 6px 4px 0; }

/* Notices / empty */
.fafm-cm-notice { padding: 12px 14px; border-radius: 12px; margin: 0 0 16px; font-size: 15px; border: 1px solid; }
.fafm-cm-notice.is-success { background: rgba(29, 122, 69, 0.08); border-color: rgba(29, 122, 69, 0.3); color: #1d7a45; }
.fafm-cm-notice.is-error { background: rgba(194, 65, 12, 0.08); border-color: rgba(194, 65, 12, 0.3); color: #b4410c; }
.fafm-cm-notice.is-info { background: var(--cm-primary-soft); border-color: var(--cm-border); color: var(--cm-primary-dark); }
.fafm-cm-empty { text-align: center; padding: 40px 16px; background: var(--cm-surface); border: 1px dashed var(--cm-border); border-radius: var(--cm-radius); }
.fafm-cm-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; font-size: 14px; color: var(--cm-soft); }

/* Partners */
.fafm-cm-partners { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 24px; }
@media (min-width: 700px) { .fafm-cm-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .fafm-cm-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fafm-cm-partner { background: var(--cm-surface); border: 1px solid var(--cm-border); border-radius: var(--cm-radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.fafm-cm-partner__head { display: flex; gap: 12px; align-items: center; }
.fafm-cm-partner__head h2 { margin: 0; font-size: 17px; }
.fafm-cm-partner__head h2 a { text-decoration: none; color: var(--cm-strong) !important; }
.fafm-cm-partner .fafm-cm-badge { margin-left: 0; align-self: flex-start; }
.fafm-cm-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fafm-cm-tags li { padding: 3px 10px; border-radius: 999px; background: var(--cm-surface-2); border: 1px solid var(--cm-border); font-size: 13px; }
.fafm-cm-partner__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; }
.fafm-cm-partner__actions.is-wide { margin: 16px 0 6px; }
.fafm-cm-partner__actions .fafm-button { padding: 8px 14px; font-size: 14px; }
.fafm-cm-become { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.fafm-cm-become p { margin: 0; color: var(--cm-soft); }
.fafm-cm-profile h2 { margin-top: 22px; }
.fafm-cm-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 20px 0; font-size: 15px; }
.fafm-cm-facts dt { color: var(--cm-soft); }
.fafm-cm-facts dd { margin: 0; color: var(--cm-strong); overflow-wrap: anywhere; }
.fafm-cm-disclaimer { margin-top: 24px; }
.fafm-cm-review { margin-bottom: 14px; }
.fafm-cm-review header { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.fafm-cm-review.is-pending { border-color: var(--cm-primary); }

.fafm-cm-stats { width: 100%; border-collapse: collapse; font-size: 15px; }
.fafm-cm-stats th, .fafm-cm-stats td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--cm-border); }
.fafm-cm-stats th { color: var(--cm-soft); font-weight: 600; font-size: 13px; }