/**
 * Parts Cross-Reference Widget Styling
 */

/* ============================================
   Widget Container & Title
   ============================================ */

.xref-widget-wrapper {
    padding: 20px 0;
    font-family: inherit;
}

.xref-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
}

.xref-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* ============================================
   Brand Group Styling
   ============================================ */

.xref-brand-group {
    /* All groups are always visible — no accordion */
}

.xref-brand-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px 0;
}

.xref-brand-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: #222;
    margin: 0;
}

.xref-parts-count {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
}

/* ============================================
   Parts List — flowing compact badges
   ============================================ */

.xref-parts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ============================================
   Part Badge (compact single-line pill)
   ============================================ */

.xref-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 9px;
    border: 1px solid #d7dbe0;
    border-radius: 6px;
    background: #f4f6f8;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.xref-badge-num {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f2328;
    letter-spacing: 0.2px;
}

/* the "·N others" suffix on a clickable badge */
.xref-badge-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: #1976d2;
}

/* Clickable badge (part fits 2+ products) */
a.xref-badge:hover,
a.xref-badge:focus-visible {
    border-color: #1976d2;
    background: #eef5fd;
    outline: none;
}

a.xref-badge:hover .xref-badge-num,
a.xref-badge:focus-visible .xref-badge-num {
    color: #0d47a1;
}

/* Plain badge (part unique to this product — reference only, not a link) */
.xref-badge--plain {
    background: #fff;
    border-style: dashed;
    border-color: #e1e4e8;
    cursor: default;
}

.xref-badge--plain .xref-badge-num {
    color: #4b5563;
    font-weight: 500;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
    .xref-widget-wrapper {
        padding: 15px 0;
    }

    .xref-title {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .xref-brand-name {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .xref-widget-wrapper {
        padding: 10px 0;
    }

    .xref-title {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .xref-parts-list {
        gap: 8px;
    }

    .xref-badge {
        flex: 1 1 calc(50% - 8px);
    }
}