/* Forumax Community Hub widget styles — modern forum-centric design */

.fch-card {
    --fch-primary: #6366f1;
    --fch-primary-dark: #4f46e5;
    --fch-ink: #181825;
    --fch-text: #4b4f5e;
    --fch-muted: #8b8fa3;
    --fch-border: #eef0f6;
    --fch-active-bg: #eef0ff;
    --fch-icon: #9497ab;

    background: #ffffff;
    border: 1px solid var(--fch-border);
    border-radius: 18px;
    padding: 20px 20px 18px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(79,70,229,.18);

    /* কার্ডটি নিজেই একটা "container" হিসেবে কাজ করবে, যাতে ভেতরের এলিমেন্টগুলো
       ভিউপোর্টের বদলে উইজেটটা যে সাইডবার/কলামে বসানো হয়েছে তার নিজের প্রস্থ
       অনুযায়ী রেসপন্সিভ হতে পারে — এক থিমে চওড়া সাইডবার, আরেক থিমে সরু
       সাইডবার হলেও সঠিকভাবে মানিয়ে নেবে। */
    container-type: inline-size;
    container-name: fch-card;
}

.fch-card * {
    box-sizing: border-box;
}

/* Header */
.fch-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fch-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fch-primary), var(--fch-primary-dark));
    color: #fff;
    box-shadow: 0 4px 10px -3px rgba(79,70,229,.55);
}

.fch-header-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fch-title {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--fch-ink);
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fch-active {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fch-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fch-active span,
.fch-active-count {
    font-weight: 700;
    color: var(--fch-text);
    transition: opacity 0.2s ease;
}

.fch-active-count.fch-updating {
    opacity: 0.4;
}

.fch-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    position: relative;
}

.fch-live-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: #22c55e;
    opacity: .35;
    animation: fch-pulse 1.8s ease-out infinite;
}

@keyframes fch-pulse {
    0%   { transform: scale(1);   opacity: .45; }
    100% { transform: scale(2.2); opacity: 0;   }
}

.fch-divider {
    border: none;
    border-top: 1px solid var(--fch-border);
    margin: 16px 0 12px;
}

/* Menu */
.fch-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
}

.fch-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border-radius: 12px;
    color: var(--fch-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease, transform .15s ease;
}

.fch-menu-item:hover {
    background: #f7f7fd;
    transform: translateX(2px);
}

.fch-menu-item--active {
    background: var(--fch-active-bg);
    color: var(--fch-primary-dark);
}

.fch-menu-item .fch-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #f4f4fa;
    color: var(--fch-icon);
    flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease;
}

.fch-menu-item--active .fch-icon {
    background: #fff;
    color: var(--fch-primary-dark);
}

.fch-menu-item:hover .fch-icon {
    color: var(--fch-primary);
}

.fch-badge {
    margin-left: auto;
    background: var(--fch-active-bg);
    color: var(--fch-primary-dark);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}

.fch-menu-item--active .fch-badge {
    background: #fff;
}

.fch-chevron {
    margin-left: auto;
    color: #c6c9d8;
    display: inline-flex;
    flex-shrink: 0;
    transition: transform .15s ease, color .15s ease;
}

.fch-menu-item:hover .fch-chevron {
    color: var(--fch-primary);
    transform: translateX(2px);
}

.fch-badge + .fch-chevron {
    margin-left: 4px;
}

[data-fch-toggle="stats"][aria-expanded="true"] .fch-chevron--toggle {
    transform: rotate(90deg);
    color: var(--fch-primary);
}

/* Trending topics & member sub-lists */
.fch-trending-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 4px 10px 46px;
}

.fch-trending-item {
    font-size: 13px;
    color: var(--fch-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 8px;
    border-radius: 8px;
    position: relative;
}

.fch-trending-item::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d7d9e8;
    transform: translateY(-50%);
}

.fch-trending-item:hover {
    color: var(--fch-primary-dark);
    background: #f7f7fd;
    text-decoration: none;
}

.fch-member-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fch-text);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 8px;
}

.fch-member-item:hover {
    background: #f7f7fd;
    color: var(--fch-primary-dark);
}

.fch-member-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--fch-border);
}

.fch-member-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Forum stats — modern 2x2 grid */
.fch-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 4px 12px 46px;
}

.fch-stat-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #f7f7fd;
    border-radius: 10px;
    padding: 9px 12px;
}

.fch-stat-num {
    font-size: 15px;
    font-weight: 800;
    color: var(--fch-ink);
    line-height: 1.2;
}

.fch-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--fch-muted);
}

.fch-view-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 6px 8px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--fch-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.fch-view-all:hover {
    background: #f7f7fd;
}

.fch-view-all:disabled {
    opacity: .6;
    cursor: default;
}

.fch-view-all-count {
    font-weight: 500;
    color: var(--fch-muted);
}

/* CTA */
.fch-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, var(--fch-primary), var(--fch-primary-dark));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 13px 16px;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 12px -4px rgba(79,70,229,.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fch-cta:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(79,70,229,.65);
}

.fch-notice {
    margin: 14px 0 0;
    padding: 10px 12px;
    background: #fff8ec;
    border: 1px solid #fdecc8;
    border-radius: 10px;
    font-size: 11.5px;
    color: #92702c;
    line-height: 1.5;
}

/* ======================================================================
   Responsive rules
   ======================================================================
   .fch-card নিজেই container-type: inline-size (উপরে সেট করা) হওয়ায়, নিচের
   @container রুলগুলো উইজেটটা যত চওড়া জায়গায় বসানো হয়েছে সেই আসল প্রস্থ
   অনুযায়ী কাজ করে — ফোনের ছোট সাইডবার হোক বা ডেস্কটপের চওড়া সাইডবার হোক,
   দুই ক্ষেত্রেই সঠিকভাবে মানিয়ে নেয় (শুধু স্ক্রিনের সাইজ দেখে নয়)।

   পুরনো ব্রাউজার/ওয়েবভিউ যেখানে container query সাপোর্ট নেই (যেমন Safari 15
   বা তার আগের, পুরনো Chrome/Firefox, কিছু ইন-অ্যাপ ব্রাউজার), সেগুলোর জন্য
   নিচে ভিউপোর্ট-ভিত্তিক @media ফলব্যাক দেওয়া আছে — একই ব্রেকপয়েন্টে একই
   পরিবর্তন, শুধু width-এর বদলে viewport width বিচার করে। */

@container fch-card (max-width: 340px) {
    .fch-card { padding: 16px 16px 14px; border-radius: 16px; }
    .fch-avatar { width: 32px; height: 32px; border-radius: 10px; }
    .fch-title { font-size: 15px; }
    .fch-active { font-size: 11.5px; }
    .fch-menu-item { padding: 10px 8px; gap: 10px; font-size: 13.5px; }
    .fch-menu-item .fch-icon { width: 27px; height: 27px; }
    .fch-trending-list,
    .fch-stats-grid { padding-left: 40px; }
    .fch-stats-grid { gap: 6px; }
    .fch-cta { font-size: 13.5px; padding: 12px 14px; }
}

@container fch-card (max-width: 260px) {
    .fch-card { padding: 14px 14px 12px; }
    .fch-header { gap: 9px; }
    .fch-avatar { width: 28px; height: 28px; border-radius: 9px; }
    .fch-title { font-size: 14px; }
    .fch-active { font-size: 11px; gap: 5px; }
    .fch-divider { margin: 13px 0 10px; }
    .fch-menu-item { padding: 9px 6px; gap: 8px; font-size: 13px; }
    .fch-menu-item .fch-icon { width: 24px; height: 24px; }
    .fch-badge { font-size: 10px; padding: 2px 6px; }
    /* খুব সরু জায়গায় avatar column-এর সাথে ইনডেন্ট মেলানো বাদ দিয়ে
       ট্রেন্ডিং/মেম্বার লিস্ট আর স্ট্যাটস গ্রিড পুরো প্রস্থ ব্যবহার করবে */
    .fch-trending-list,
    .fch-stats-grid { padding-left: 8px; }
    .fch-stats-grid {
        grid-template-columns: 1fr;
    }
    .fch-cta { font-size: 13px; padding: 11px 12px; gap: 6px; }
}

/* ফলব্যাক: container query সাপোর্ট নেই এমন ব্রাউজারের জন্য viewport ভিত্তিক */
@supports not (container-type: inline-size) {
    @media (max-width: 480px) {
        .fch-card { padding: 16px 16px 14px; border-radius: 16px; }
        .fch-avatar { width: 32px; height: 32px; border-radius: 10px; }
        .fch-title { font-size: 15px; }
        .fch-active { font-size: 11.5px; }
        .fch-menu-item { padding: 10px 8px; gap: 10px; font-size: 13.5px; }
        .fch-menu-item .fch-icon { width: 27px; height: 27px; }
        .fch-trending-list,
        .fch-stats-grid { padding-left: 40px; }
        .fch-stats-grid { gap: 6px; }
        .fch-cta { font-size: 13.5px; padding: 12px 14px; }
    }

    @media (max-width: 340px) {
        .fch-card { padding: 14px 14px 12px; }
        .fch-header { gap: 9px; }
        .fch-avatar { width: 28px; height: 28px; border-radius: 9px; }
        .fch-title { font-size: 14px; }
        .fch-active { font-size: 11px; gap: 5px; }
        .fch-divider { margin: 13px 0 10px; }
        .fch-menu-item { padding: 9px 6px; gap: 8px; font-size: 13px; }
        .fch-menu-item .fch-icon { width: 24px; height: 24px; }
        .fch-badge { font-size: 10px; padding: 2px 6px; }
        .fch-trending-list,
        .fch-stats-grid { padding-left: 8px; }
        .fch-stats-grid { grid-template-columns: 1fr; }
        .fch-cta { font-size: 13px; padding: 11px 12px; gap: 6px; }
    }
}

/* টাচ ডিভাইসে (মোবাইল/ট্যাবলেট) আঙুল দিয়ে ট্যাপ করার জায়গা বাড়ানো —
   accessibility-এর জন্য প্রতিটা ট্যাপযোগ্য এলিমেন্টের min-height ~44px রাখা ভালো */
@media (hover: none) and (pointer: coarse) {
    .fch-menu-item { min-height: 44px; }
    .fch-view-all { min-height: 40px; padding: 9px 8px; }
    .fch-cta { min-height: 46px; }
}

/* খুব ছোট উচ্চতার ডিভাইস/ল্যান্ডস্কেপ মোবাইলে বেশি vertical space না নেওয়ার জন্য */
@media (max-height: 480px) and (orientation: landscape) {
    .fch-divider { margin: 10px 0 8px; }
    .fch-menu { margin-bottom: 10px; }
}