/* ============================================================
   MyTrafficBuzz — Comments

   The comments and star-review widget on blog posts.

   Part of the split of the former single style.css (20-Aug-2026).
   Load order matters: see the <link> block in any page head, and
   keep this file in that same position when adding rules.
   ============================================================ */

/* ===== Comments + star reviews widget ===== */
#mtb-comments{max-width:820px;margin:44px auto 0}
.cm-head h2{font-size:24px;color:var(--pri);margin-bottom:10px}
.cm-avg{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.cm-avg-num{font-size:34px;font-weight:800;color:var(--pri);font-family:'Outfit',sans-serif}
.cm-stars{color:var(--gold);font-size:20px;letter-spacing:2px}
.cm-stars.sm{font-size:15px}
.cm-star{color:#d9dfe8;cursor:default}
.cm-star.on{color:var(--gold)}
.cm-rate .cm-star{cursor:pointer;font-size:26px;transition:transform .1s}
.cm-rate .cm-star:hover{transform:scale(1.15)}
.cm-count{color:var(--txtl);font-size:14px}
.cm-empty{color:var(--txtl);font-size:15px}
.cm-list{margin:22px 0}
.cm-item{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-bottom:12px}
.cm-item-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.cm-item-top strong{color:var(--pri)}
.cm-date{color:var(--txtl);font-size:12px;margin-left:auto}
.cm-item p{color:var(--txt);font-size:15px;margin:0}
.cm-form{background:var(--lt);border-radius:14px;padding:24px;margin-top:24px;border:1px solid var(--line)}
.cm-form h3{font-size:19px;color:var(--pri);margin-bottom:14px}
.cm-rate{margin-bottom:12px;color:var(--txtl);font-size:14px;display:flex;align-items:center;gap:8px}
.cm-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cm-row input{flex:1;min-width:180px}
.cm-form input,.cm-form textarea{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:14px;background:var(--card);color:var(--txt);margin-bottom:12px}
.cm-form input:focus,.cm-form textarea:focus{border-color:var(--acc);outline:0}
.cm-row input{margin-bottom:0}
.cm-hp{display:none!important}
.cm-rc{margin-bottom:14px}
.cm-msg{font-size:14px;margin-top:10px;min-height:18px}
.cm-reply{background:#EEF4FF;border-left:3px solid var(--acc2);padding:9px 13px;margin-top:8px;border-radius:8px;font-size:14px;color:var(--txt)}
.cm-reply strong{color:var(--acc2)}
/* Native auth tabs/forms */
.auth__tabs{display:flex;gap:8px;margin-bottom:18px}
.auth__tab{flex:1;padding:11px;border:1px solid var(--line);background:var(--card);border-radius:11px;font-weight:600;cursor:pointer;color:var(--pri);font-family:inherit;font-size:15px}
.auth__tab.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.auth__form input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;margin-bottom:12px;font-family:inherit;font-size:14px;background:var(--card);color:var(--txt)}
.auth__form input:focus{border-color:var(--acc);outline:0}

@media(max-width:420px){.site-header__search{display:none}}

/* theme toggle (injected in .site-header__actions) */
.site-header__theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);cursor:pointer;transition:var(--t);padding:0;flex-shrink:0}
.site-header__theme-toggle:hover{background:rgba(255,255,255,.16);transform:rotate(12deg)}

.site-header__theme-toggle .site-header__theme-icon--sun{display:none}
[data-theme="dark"] .site-header__theme-toggle .site-header__theme-icon--sun{display:block}
[data-theme="dark"] .site-header__theme-toggle .site-header__theme-icon--moon{display:none}

/* ============================================================
   dark mode (opt-in via toggle; persisted by main.js as mtb-theme)
   ============================================================ */
[data-theme="dark"] body{background:#070F20;color:#D7E0EE}
[data-theme="dark"]{--txt:#D7E0EE;--txtl:#93A3BC;--lt:#0B1830;--line:#20304E;--card:#0E1D37;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--shh:0 2px 6px rgba(0,0,0,.4),0 24px 56px rgba(0,0,0,.55)}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6{color:#EAF0F9}
[data-theme="dark"] .service-card,[data-theme="dark"] .state-card,[data-theme="dark"] .sidebar__box,[data-theme="dark"] .faq__item,[data-theme="dark"] .content-box,[data-theme="dark"] .contact__form,[data-theme="dark"] .audit__status,[data-theme="dark"] .audit__metrics,[data-theme="dark"] .audit__checks,[data-theme="dark"] .score-ring,[data-theme="dark"] .cm-item,[data-theme="dark"] .auth__card{background:var(--card);border-color:var(--line)}
[data-theme="dark"] .service-card:hover{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(130deg,rgba(226,58,78,.6),rgba(244,182,63,.45) 45%,rgba(123,91,245,.55)) border-box}
[data-theme="dark"] .district-list__link,[data-theme="dark"] .sidebar__links a,[data-theme="dark"] .related-services a,[data-theme="dark"] .state-card__body .btn,[data-theme="dark"] .audit__input,[data-theme="dark"] .fg input,[data-theme="dark"] .fg textarea,[data-theme="dark"] .fg select,[data-theme="dark"] .cm-form input,[data-theme="dark"] .cm-form textarea,[data-theme="dark"] .auth__form input{background:var(--card);border-color:var(--line);color:#D7E0EE}
[data-theme="dark"] .service-card h3,[data-theme="dark"] .sidebar__box h4,[data-theme="dark"] .sidebar__links a,[data-theme="dark"] .district-list__link,[data-theme="dark"] .faq__question,[data-theme="dark"] .fg label{color:#EAF0F9}
[data-theme="dark"] .section-dark,[data-theme="dark"] .audit-section,[data-theme="dark"] .related-services__item,[data-theme="dark"] .whatsapp-qr,[data-theme="dark"] .cm-form{background:var(--lt);border-color:var(--line)}
[data-theme="dark"] .contact__body p,[data-theme="dark"] .contact__body li,[data-theme="dark"] .state-card__body p,[data-theme="dark"] .contact__body .state-card .state-card__body p{color:#C6D2E4}
[data-theme="dark"] .contact__body h2,[data-theme="dark"] .section-heading h2,[data-theme="dark"] .home-intro-h1{color:#EAF0F9}
[data-theme="dark"] .contact__body h3{color:#8FB4F5}
[data-theme="dark"] .sidebar__posts a,[data-theme="dark"] .sidebar__trend-list a,[data-theme="dark"] .check-list li,[data-theme="dark"] .metric-label,[data-theme="dark"] .cm-item p{color:#C6D2E4}
[data-theme="dark"] .primary-nav__menu{background:rgba(10,22,42,.9);border-color:var(--line)}
[data-theme="dark"] .primary-nav__menu a{color:#C6D2E4}
[data-theme="dark"] .primary-nav__menu a:hover{background:rgba(255,255,255,.06);color:#fff}
[data-theme="dark"] .ring-val,[data-theme="dark"] .metric-val,[data-theme="dark"] .cm-avg-num,[data-theme="dark"] .cm-item-top strong{color:#EAF0F9}
[data-theme="dark"] .text-pri{color:#EAF0F9}
[data-theme="dark"] .sidebar__tags a{border-color:var(--line);color:#93A3BC}
[data-theme="dark"] .auth__tab{background:var(--card);border-color:var(--line);color:#EAF0F9}
[data-theme="dark"] .cm-reply{background:#12233F;color:#C6D2E4}
[data-theme="dark"] .cm-star{color:#2C3E5E}
[data-theme="dark"] .cm-star.on{color:var(--gold)}

/* a11y: links inside running text must not rely on colour alone */
.site-footer__bottom a{text-decoration:underline!important}