/* ── Super FM Recent Posts Widget ──────────────────────────────
   Matches Super FM Sport24 theme variables exactly.
   Uses .ni / news-list pattern from theme's style.css
   ─────────────────────────────────────────────────────────── */

/* Inherit theme variables — fallback values if used outside theme */
.sfm-rp-widget,
.sfm-rp {
    --navy:      #0A1628;
    --blue-dark: #1247A0;
    --blue:      #1A5FBF;
    --blue-mid:  #2275D7;
    --sky:       #3B9EE8;
    --sky-light: #6DBEF5;
    --page-bg:   #F0F4FA;
    --white:     #FFFFFF;
    --gray-50:   #F8FAFC;
    --gray-100:  #EEF2F8;
    --gray-200:  #DDE6F0;
    --gray-400:  #8BA3C0;
    --gray-600:  #4A6280;
    --text:      #0F1E2E;
    --text-mid:  #2D4060;
    --border:    #D5E3F0;
    --radius-sm: 6px;
    --radius:    10px;
}

/* ── Wrapper ── */
.sfm-rp {
    font-family: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--text);
}

/* ── Header ── */
.sfm-rp__header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.sfm-rp__header-icon {
    width: 18px;
    height: 18px;
    color: var(--blue-mid);
    flex-shrink: 0;
}

.sfm-rp__title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text);
}

/* Divider with blue accent — mirrors .section-hdr::after */
.sfm-rp__divider {
    height: 2px;
    background: var(--border);
    margin-bottom: 4px;
    position: relative;
    border-radius: 2px;
}
.sfm-rp__divider::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 48px; height: 2px;
    background: var(--blue-mid);
    border-radius: 2px;
}

/* ── Scrollable list ── */
.sfm-rp__list {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;

    /* Custom scrollbar — webkit */
    scrollbar-width: thin;
    scrollbar-color: var(--gray-200) transparent;
}

.sfm-rp__list::-webkit-scrollbar {
    width: 4px;
}
.sfm-rp__list::-webkit-scrollbar-track {
    background: transparent;
}
.sfm-rp__list::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 2px;
}
.sfm-rp__list::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ── Item — mirrors theme's .ni pattern ── */
.sfm-rp__item {
    display: flex;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: opacity 0.2s;
    align-items: flex-start;
    color: inherit;
    text-decoration: none;
}

.sfm-rp__item:last-child {
    border-bottom: none;
}

.sfm-rp__item:hover {
    opacity: 0.7;
}

/* ── Thumbnail — mirrors .ni-img ── */
.sfm-rp__thumb {
    width: 84px;
    height: 60px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--gray-100);
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfm-rp__thumb--has {
    background-color: var(--navy);
}

.sfm-rp__thumb-icon {
    width: 24px;
    height: 24px;
    color: var(--blue);
    opacity: 0.25;
}

/* ── Body ── */
.sfm-rp__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Category label — mirrors .ni-cat ── */
.sfm-rp__cat {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--blue-mid);
    line-height: 1;
}

/* ── Headline — mirrors .ni-body h5 ── */
.sfm-rp__headline {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    margin: 0;
    /* allow text to wrap naturally */
}

/* ── Time — mirrors .ni-time ── */
.sfm-rp__time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-400);
    margin-top: 2px;
}

.sfm-rp__time svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* ── Empty state ── */
.sfm-rp__empty {
    padding: 24px 0;
    font-size: 13px;
    color: var(--gray-400);
    text-align: center;
    margin: 0;
}

/* ── Footer / CTA button ── */
.sfm-rp__footer {
    margin-top: 14px;
    padding-top: 2px;
}

.sfm-rp__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    background: var(--blue-mid);
    color: #fff;
    font-family: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 12px rgba(34, 117, 215, 0.3);
}

.sfm-rp__btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.sfm-rp__btn:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(34, 117, 215, 0.4);
}

.sfm-rp__btn:hover svg {
    transform: translateX(3px);
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .sfm-rp__thumb {
        width: 72px;
        height: 52px;
    }
    .sfm-rp__headline {
        font-size: 12px;
    }
}