/* ============================================================
   Synaptic Fortinet Banner - stiluri
   Culori brand: alb / albastru #0068a5
   ============================================================ */

.sfb-banner {
    --sfb-blue: #0068a5;
    --sfb-blue-dark: #004d7c;
    --sfb-blue-mid: #00a8e8;
    --sfb-blue-soft: #e6f1fb;
    --sfb-blue-soft2: #cce3f5;
    --sfb-text: #1a1a1a;
    --sfb-text-soft: #5a6672;
    --sfb-muted: #8a98a5;
    --sfb-border: #e2e9f0;
    --sfb-bg-soft: #f7fafd;
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sfb-banner *,
.sfb-banner *::before,
.sfb-banner *::after {
    box-sizing: border-box;
}

/* --- titlu --- */
.sfb-head {
    text-align: center;
    margin-bottom: 28px;
}
.sfb-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sfb-blue);
    font-weight: 600;
    margin-bottom: 8px;
}
.sfb-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--sfb-text);
    margin: 0;
    line-height: 1.3;
}

/* --- grid carduri --- */
.sfb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-items: start;
}

/* --- card --- */
.sfb-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--sfb-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.sfb-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sfb-blue), var(--sfb-blue-mid));
    z-index: 1;
}
.sfb-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 104, 165, .13);
}

/* --- badge numar modele --- */
.sfb-count-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--sfb-blue-soft);
    color: var(--sfb-blue);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 2;
    line-height: 1.4;
}

/* --- antet card (buton) --- */
.sfb-card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 26px 16px 14px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
}
.sfb-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sfb-blue-soft) 0%, var(--sfb-blue-soft2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
    position: relative;
}
.sfb-icon-wrap::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 104, 165, .2);
}
.sfb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}
.sfb-card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--sfb-text);
    margin-bottom: 4px;
}
.sfb-card-sub {
    font-size: 12px;
    color: var(--sfb-text-soft);
    line-height: 1.5;
}
.sfb-chevron {
    margin-top: 12px;
    width: 16px;
    height: 16px;
    background: center / contain no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230068a5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    transition: transform .2s ease;
}

/* --- iconite --- */
.sfb-icon {
    width: 28px;
    height: 28px;
    display: block;
    background: center / contain no-repeat;
}
.sfb-icon-shield-lock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%230c447c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/%3E%3Cpath d='M12 11m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'/%3E%3Cpath d='M12 12l0 2.5'/%3E%3C/svg%3E");
}
.sfb-icon-router {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%230c447c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Crect x='3' y='13' width='18' height='8' rx='1'/%3E%3Cpath d='M17 17l0 .01'/%3E%3Cpath d='M13 17l0 .01'/%3E%3Cpath d='M15 13v-4a3 3 0 0 0 -6 0'/%3E%3Cpath d='M6 17l0 .01'/%3E%3C/svg%3E");
}
.sfb-icon-wifi {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%230c447c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 18l.01 0'/%3E%3Cpath d='M9.172 15.172a4 4 0 0 1 5.656 0'/%3E%3Cpath d='M6.343 12.343a8 8 0 0 1 11.314 0'/%3E%3Cpath d='M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0'/%3E%3C/svg%3E");
}
.sfb-icon-access-point {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%230c447c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12l0 .01'/%3E%3Cpath d='M14.828 9.172a4 4 0 0 1 0 5.656'/%3E%3Cpath d='M17.657 6.343a8 8 0 0 1 0 11.314'/%3E%3Cpath d='M9.172 14.828a4 4 0 0 1 0 -5.656'/%3E%3Cpath d='M6.343 17.657a8 8 0 0 1 0 -11.314'/%3E%3C/svg%3E");
}

/* --- dropdown --- */
.sfb-dropdown {
    border-top: 1px solid var(--sfb-border);
    background: var(--sfb-bg-soft);
}
.sfb-dropdown-label {
    padding: 10px 16px 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--sfb-muted);
    font-weight: 600;
}
.sfb-models {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sfb-models li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 16px;
    font-size: 13.5px;
    color: var(--sfb-text);
    text-decoration: none;
    border-top: 1px solid var(--sfb-border);
    transition: background .12s ease, color .12s ease, padding-left .12s ease;
}
.sfb-models li a:hover {
    background: var(--sfb-blue-soft);
    color: var(--sfb-blue-dark);
    padding-left: 20px;
}
.sfb-mchev {
    width: 14px;
    height: 14px;
    background: center / contain no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a98a5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    flex-shrink: 0;
}
.sfb-models li a:hover .sfb-mchev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230068a5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.sfb-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 16px;
    font-size: 12.5px;
    color: var(--sfb-blue);
    font-weight: 600;
    text-decoration: none;
    border-top: 1px solid var(--sfb-border);
    transition: background .12s ease;
}
.sfb-viewall:hover {
    background: var(--sfb-blue-soft);
}

/* ============================================================
   Hover (desktop)
   ============================================================ */
@media (min-width: 783px) {
    .sfb-trigger-hover .sfb-dropdown {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height .28s ease, opacity .22s ease;
    }
    .sfb-trigger-hover .sfb-card:hover .sfb-dropdown,
    .sfb-trigger-hover .sfb-card:focus-within .sfb-dropdown {
        max-height: 560px;
        opacity: 1;
    }
    .sfb-trigger-hover .sfb-card:hover .sfb-chevron,
    .sfb-trigger-hover .sfb-card:focus-within .sfb-chevron {
        transform: rotate(180deg);
    }
}

/* ============================================================
   Click + mobil
   ============================================================ */
.sfb-trigger-click .sfb-dropdown {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .28s ease, opacity .22s ease;
}
.sfb-trigger-click .sfb-card.sfb-open .sfb-dropdown {
    max-height: 560px;
    opacity: 1;
}
.sfb-trigger-click .sfb-card.sfb-open .sfb-chevron {
    transform: rotate(180deg);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 782px) {
    .sfb-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sfb-dropdown {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height .28s ease, opacity .22s ease;
    }
    .sfb-card.sfb-open .sfb-dropdown {
        max-height: 560px;
        opacity: 1;
    }
    .sfb-card.sfb-open .sfb-chevron {
        transform: rotate(180deg);
    }
}
@media (max-width: 480px) {
    .sfb-grid {
        grid-template-columns: 1fr;
    }
    .sfb-title {
        font-size: 20px;
    }
}

/* ============================================================
   Fix conflict tema Electro: forteaza fundal alb pe carduri
   (tema pune fundal intunecat la hover pe elemente de tip card)
   ============================================================ */
.sfb-banner .sfb-card,
.sfb-banner .sfb-card:hover,
.sfb-banner .sfb-card:focus,
.sfb-banner .sfb-card:focus-within {
    background: #fff !important;
    color: var(--sfb-text) !important;
}
.sfb-banner .sfb-card-head,
.sfb-banner .sfb-card-head:hover,
.sfb-banner .sfb-card-head:focus {
    background: transparent !important;
    color: var(--sfb-text) !important;
}
.sfb-banner .sfb-card-title,
.sfb-banner .sfb-card:hover .sfb-card-title {
    color: var(--sfb-text) !important;
}
.sfb-banner .sfb-card-sub,
.sfb-banner .sfb-card:hover .sfb-card-sub {
    color: var(--sfb-text-soft) !important;
}
.sfb-banner .sfb-dropdown {
    background: var(--sfb-bg-soft) !important;
}
.sfb-banner .sfb-models li a {
    color: var(--sfb-text) !important;
}
.sfb-banner .sfb-models li a:hover {
    background: var(--sfb-blue-soft) !important;
    color: var(--sfb-blue-dark) !important;
}