﻿/* ============================================================
   News Sidebar — unified single-card design (mirrors product-sidebar)
   ============================================================ */

.nsb-sidebar {
    padding: 0;
    margin: 0;
    margin-top: 2.2rem;
}

.nsb-sidebar__sticky {
    display: flex;
    flex-direction: column;
    gap: 0;
    top: 160px;
}

/* ── Single card ── */
.nsb-card {
    background: var(--article-sidebar-bg, rgba(255, 255, 255, 0.55));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(200, 90, 99, 0.18);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(200, 90, 99, 0.10);
    overflow: hidden;
}

/* ── Card header ── */
.nsb-card__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--article-sidebar-bg, rgba(255, 255, 255, 0.35));
    color: var(--article-sidebar-color, var(--color-primary, #3d1d04));
}
.nsb-card__header i { font-size: 1rem; }
.nsb-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--article-sidebar-color, var(--color-primary, #3d1d04));
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nsb-card__body { padding: 0.5rem 0.4rem; }

/* ── Section divider ── */
.nsb-section-divider {
    height: 1px;
    background: rgba(200, 90, 99, 0.15);
    margin: 0 0.75rem;
}

/* ── Extra sections (social / contact) ── */
.nsb-extra-section {
    padding: 0.6rem 0.75rem 0.5rem;
}
.nsb-extra-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #E68A8F;
    margin-bottom: 0.45rem;
}

/* ── Category list ── */
.nsb-article-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nsb-article-list li {
    border-top: 1px solid rgba(200, 90, 99, 0.08);
}
.nsb-article-list li:first-child { border-top: none; }
.nsb-article-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    color: var(--article-sidebar-color, var(--color-primary, #3d1d04));
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.nsb-article-list a:focus:not(:focus-visible) { background: transparent; outline: none; }
.nsb-article-list a:hover,
.nsb-article-list a:focus-visible {
    background: var(--article-sidebar-hover-bg, rgba(200, 90, 99, 0.08));
    color: var(--article-sidebar-color, var(--color-primary, #7e4414));
    outline: none;
}
.nsb-article-list a.nsb-active {
    background: var(--article-sidebar-hover-bg, rgba(200, 90, 99, 0.08));
    color: var(--article-sidebar-color, var(--color-primary, #7e4414));
}
.nsb-article-list .nsb-badge {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(200, 90, 99, 0.10);
    color: var(--color-primary, #3d1d04);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}
.nsb-article-list a.nsb-active .nsb-badge {
    background: rgba(200, 90, 99, 0.15);
    color: var(--color-primary, #3d1d04);
}

/* ── Social ── */
.nsb-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.nsb-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(200, 90, 99, 0.12);
    color: var(--article-sidebar-color, #E68A8F);
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
    font-size: 0.95rem;
    border: 1px solid rgba(200, 90, 99, 0.25);
}
.nsb-social-btn:hover {
    background: var(--article-sidebar-hover-bg, #E68A8F);
    color: #fff;
    transform: translateY(-2px);
    border-color: var(--article-sidebar-hover-bg, #E68A8F);
}

/* ── Contact ── */
.nsb-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nsb-contact-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.5rem;
    color: #3d1d04;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    word-break: break-word;
}
.nsb-contact-item i {
    font-size: 1rem;
    color: #E68A8F;
    width: 20px;
    text-align: center;
    flex: 0 0 20px;
}
.nsb-contact-item img { flex: 0 0 22px; }
.nsb-contact-item:focus,
.nsb-contact-item:focus:not(:focus-visible) { background: transparent; outline: none; }
.nsb-contact-item:hover {
    background: rgba(200, 90, 99, 0.08);
    color: var(--color-primary-700, #7e4414);
}
.nsb-contact-list li + li { border-top: 1px solid rgba(200, 90, 99, 0.06); }

/* ── Responsive ── */
@media (max-width: 1399.98px) {
    .nsb-sidebar__sticky { top: 140px; }
}
@media (max-width: 991.98px) {
    .nsb-sidebar__sticky { top: 120px; }
    .nsb-card__header { padding: 0.6rem 0.7rem; }
    .nsb-card__title { font-size: 0.82rem; }
    .nsb-article-list a { font-size: 0.85rem; padding: 0.5rem 0.6rem; }
    .nsb-social-btn { width: 34px; height: 34px; font-size: 0.85rem; }
    .nsb-contact-item { font-size: 0.78rem; padding: 0.45rem 0.35rem; }
    .nsb-extra-section { padding: 0.5rem 0.5rem 0.4rem; }
}
@media (max-width: 767.98px) {
    .nsb-sidebar__sticky { position: static !important; top: auto !important; left: auto !important; width: auto !important; }
}
