/* ============================================================
   banden-kopen.nl - CategoryFeatures
   Huisstijl: navy #1a2740 / oranje #e8552a
   Bestand: CategoryFeatures/view/frontend/web/css/custom-performance-tabs.css
   ============================================================ */

:root {
    --bk-cf-navy:      #1a2740;
    --bk-cf-navy2:     #243352;
    --bk-cf-oranje:    #e8552a;
    --bk-cf-oranje-d:  #c94220;
    --bk-cf-wit:       #ffffff;
    --bk-cf-grijs:     #f4f6f8;
    --bk-cf-grijs2:    #e2e8f0;
    --bk-cf-tekst:     #4a5568;
    --bk-cf-fd:        'Barlow Condensed', 'Arial Narrow', sans-serif;
    --bk-cf-fb:        'Open Sans', 'Segoe UI', sans-serif;
}

/* -- WRAPPER ------------------------------------------------ */
.bk-cf-wrap {
    font-family: var(--bk-cf-fb);
    color: var(--bk-cf-navy);
    margin: 32px 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.bk-cf-wrap * { box-sizing: border-box; }

/* -- INTRO -------------------------------------------------- */
.bk-cf-intro {
    text-align: center;
    margin-bottom: 32px;
}

.bk-cf-oog {
    display: inline-block;
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--bk-cf-oranje);
    margin-bottom: 8px;
}

.bk-cf-titel {
    font-family: var(--bk-cf-fd);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--bk-cf-navy);
    line-height: 1;
    letter-spacing: -0.5px;
    margin: 6px 0 12px;
}

.bk-cf-titel em {
    color: var(--bk-cf-oranje);
    font-style: normal;
}

.bk-cf-lijn {
    width: 44px;
    height: 3px;
    background: var(--bk-cf-oranje);
    border-radius: 2px;
    margin: 0 auto;
}

/* -- RATINGS BAR -------------------------------------------- */
.bk-cf-ratings {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    justify-content: center;
}

.bk-cf-rating-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bk-cf-grijs);
    border: 1.5px solid var(--bk-cf-grijs2);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 0.78rem;
}

.bk-cf-rating-label {
    font-weight: 700;
    color: var(--bk-cf-navy);
    white-space: nowrap;
}

.bk-cf-rating-bar {
    width: 80px;
    height: 6px;
    background: var(--bk-cf-grijs2);
    border-radius: 3px;
    overflow: hidden;
}

.bk-cf-rating-fill {
    display: block;
    height: 100%;
    background: var(--bk-cf-oranje);
    border-radius: 3px;
}

.bk-cf-rating-score {
    font-weight: 800;
    color: var(--bk-cf-oranje);
    font-size: 0.82rem;
}

/* -- GRID --------------------------------------------------- */
.bk-cf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.bk-cf-grid:has(.bk-cf-box:only-child) {
    grid-template-columns: 1fr;
}

.bk-cf-grid .bk-cf-box:only-child {
    max-width: 100%;
}

/* -- BOX ---------------------------------------------------- */
.bk-cf-box {
    background: var(--bk-cf-wit);
    border: 2px solid var(--bk-cf-grijs2);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.bk-cf-box:hover { border-color: var(--bk-cf-oranje); }

.bk-cf-box-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 2px solid var(--bk-cf-grijs);
    background: var(--bk-cf-grijs);
}

.bk-cf-box-icon {
    width: 38px;
    height: 38px;
    background: var(--bk-cf-navy);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bk-cf-wit);
    font-size: 1rem;
}

.bk-cf-box-icon--oranje { background: var(--bk-cf-oranje); }

.bk-cf-box-titel {
    font-family: var(--bk-cf-fd);
    font-size: 1.05rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--bk-cf-navy);
    line-height: 1;
    letter-spacing: 0.5px;
}

.bk-cf-box-sub {
    font-size: 0.75rem;
    color: var(--bk-cf-tekst);
    margin-top: 3px;
}

.bk-cf-best-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bk-cf-oranje);
    color: var(--bk-cf-wit);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* -- PRESTATIE TABEL ---------------------------------------- */
.bk-cf-perf-tabel {
    padding: 16px 20px;
}

.bk-cf-perf-rij {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    margin-bottom: 4px;
    transition: background 0.15s;
}

.bk-cf-perf-rij:hover { background: var(--bk-cf-grijs); }

.bk-cf-perf-rij--best {
    background: rgba(232, 85, 42, 0.06);
    border: 1.5px solid rgba(232, 85, 42, 0.2);
}

.bk-cf-perf-icoon {
    width: 28px;
    height: 28px;
    background: var(--bk-cf-navy);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bk-cf-wit);
    font-size: 0.75rem;
}

.bk-cf-perf-rij--best .bk-cf-perf-icoon { background: var(--bk-cf-oranje); }

.bk-cf-perf-label {
    flex: 1;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--bk-cf-navy);
    text-align: left;
}

.bk-cf-perf-dots {
    display: flex;
    gap: 4px;
}

.bk-cf-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: transform 0.15s;
}

.bk-cf-dot--vol   { background: var(--bk-cf-oranje); }
.bk-cf-dot--leeg  { background: var(--bk-cf-grijs2); }

.bk-cf-perf-rij:hover .bk-cf-dot--vol { transform: scale(1.2); }

.bk-cf-perf-lbl-txt {
    font-size: 0.72rem;
    color: var(--bk-cf-tekst);
    min-width: 58px;
    text-align: right;
}

.bk-cf-perf-rij--best .bk-cf-perf-lbl-txt {
    color: var(--bk-cf-oranje);
    font-weight: 700;
}

/* -- GETEST DOOR -------------------------------------------- */
.bk-cf-tested-lijst {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bk-cf-tested-rij {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--bk-cf-grijs2);
    background: var(--bk-cf-grijs);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.bk-cf-tested-rij--link:hover {
    border-color: var(--bk-cf-oranje);
    background: var(--bk-cf-wit);
    box-shadow: 0 2px 10px rgba(232, 85, 42, 0.12);
}

.bk-cf-tested-logo {
    width: 72px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bk-cf-tested-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bk-cf-tested-naam {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--bk-cf-navy);
}

.bk-cf-tested-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bk-cf-tested-maat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--bk-cf-tekst);
}

.bk-cf-tested-maat i { color: var(--bk-cf-oranje); font-size: 0.72rem; }

.bk-cf-tested-jaar {
    display: inline-flex;
    align-items: center;
    background: var(--bk-cf-navy);
    color: var(--bk-cf-wit);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
}

.bk-cf-tested-bekijk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bk-cf-oranje);
    white-space: nowrap;
    transition: gap 0.15s;
}

.bk-cf-tested-rij--link:hover .bk-cf-tested-bekijk { gap: 8px; }

/* -- OEM SECTIE --------------------------------------------- */
.bk-cf-oem {
    background: var(--bk-cf-grijs);
    border: 2px solid var(--bk-cf-grijs2);
    border-radius: 12px;
    padding: 24px;
    margin-top: 8px;
}

.bk-cf-oem-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bk-cf-grijs2);
}

.bk-cf-oem .bk-cf-box-icon  { background: var(--bk-cf-navy); }
.bk-cf-oem .bk-cf-box-titel { color: var(--bk-cf-navy); }
.bk-cf-oem .bk-cf-box-sub   { color: var(--bk-cf-tekst); }

.bk-cf-oem-merken {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bk-cf-oem-merk {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 54px;
    background: var(--bk-cf-wit);
    border: 1.5px solid var(--bk-cf-grijs2);
    border-radius: 8px;
    padding: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.bk-cf-oem-merk:hover {
    border-color: var(--bk-cf-oranje);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(232, 85, 42, 0.12);
}

.bk-cf-oem-merk img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.bk-cf-oem-merk:hover img { opacity: 1; }

.bk-cf-oem-merk span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bk-cf-navy);
    text-align: center;
}

.bk-cf-tested-rij--link:hover,
.bk-cf-tested-rij--link:hover *,
.bk-cf-oem-merk:hover {
    text-decoration: none;
    color: inherit;
}

/* -- MAX-WIDTH BINNEN CATEGORIE ----------------------------- */
.catalog-category-view .bk-cf-grid,
.catalog-category-view .bk-cf-oem,
.catalog-category-view .bk-cf-ratings,
.catalog-category-view .bk-cf-intro {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* -- RESPONSIVE --------------------------------------------- */
@media (max-width: 768px) {
    .bk-cf-grid { grid-template-columns: 1fr; }
    .bk-cf-rating-bar { width: 50px; }
}

@media (max-width: 480px) {
    .bk-cf-box-header { flex-wrap: wrap; }
    .bk-cf-best-badge { margin-left: 0; }
    .bk-cf-perf-lbl-txt { display: none; }
    .bk-cf-oem-merk { width: 72px; height: 46px; }
}
/* -- Winnaar bandentest badges ---------------------------------------- */
.bk-cf-winnaar-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 20px;
}
.bk-cf-winnaar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #fffbea 0%, #fff3c4 100%);
    border: 1.5px solid #d4900a;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #7a4f00;
    white-space: nowrap;
}
.bk-cf-winnaar-badge i {
    color: #d4900a;
    font-size: 11px;
}
.bk-cf-winnaar-seizoen {
    font-weight: 400;
    color: #9a7030;
    font-size: 11px;
    margin-left: 2px;
}
/* Op productpagina iets groter */
.bk-cf-winnaar-badges--product .bk-cf-winnaar-badge {
    font-size: 13px;
    padding: 7px 14px;
}

/* =============================================
   PERFORMANCE WIDGET � twee-koloms layout
   ============================================= */
.bk-cf-widget .bk-cf-widget-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 32px;
    align-items: start;
    margin: 24px 0;
}
.bk-cf-widget .bk-cf-widget-grid--volledig {
    grid-template-columns: 1fr;
}

/* Rechterkolom: model foto + naam */
.bk-cf-widget-model {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 80px;
    box-shadow: 0 2px 12px rgba(26,39,64,.07);
}
.bk-cf-widget-model-foto {
    width: 100%;
    background: #f7f9fc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.bk-cf-widget-model-foto img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}
.bk-cf-widget-model-info {
    padding: 16px 20px 20px;
}
.bk-cf-widget-merk {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #e8552a;
}
.bk-cf-widget-model-naam {
    font-size: 15px;
    font-weight: 700;
    color: #1a2740;
    margin: 4px 0 8px;
    line-height: 1.3;
}
.bk-cf-widget-remark {
    font-size: 12px;
    color: #6b7a99;
    margin: 0;
    line-height: 1.5;
}

/* Getest door onderaan scores */
.bk-cf-widget-tested {
    margin-top: 20px;
    border-top: 1px solid #e8edf3;
    padding-top: 16px;
}

/* 9-dots schaal */
.bk-cf-perf-dots {
    display: flex;
    gap: 3px;
}
.bk-cf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.bk-cf-dot--vol   { background: #1a2740; }
.bk-cf-dot--leeg  { background: #dde3ed; }
.bk-cf-perf-rij--best .bk-cf-dot--vol { background: #e8552a; }

/* Responsive */
@media (max-width: 768px) {
    .bk-cf-widget .bk-cf-widget-grid {
        grid-template-columns: 1fr;
    }
    .bk-cf-widget-model {
        position: static;
    }
}