/* ================================================
   Proffee Kompatibilitätsprüfer – Frontend Styles
   Brand: Gold #D19000 / #FFB81C, Charcoal #3D3935
   ================================================ */

.proffee-checker,
.proffee-checker * {
    box-sizing: border-box;
}

.proffee-checker {
    --pf-char:         #3D3935;
    --pf-gold:         #D19000;
    --pf-yellow:       #FFB81C;
    --pf-bg:           #ffffff;
    --pf-bg-subtle:    rgba(209,144,0,.06);
    --pf-bg-highlight: rgba(209,144,0,.08);
    --pf-line:         rgba(61,57,53,.14);
    --pf-line-soft:    rgba(61,57,53,.10);
    --pf-muted:        rgba(61,57,53,.62);
    --pf-shadow:       0 12px 34px rgba(0,0,0,.10);
    --pf-shadow-soft:  0 8px 22px rgba(0,0,0,.06);
    --pf-radius:       18px;
    --pf-radius-sm:    12px;
    --pf-font:         inherit;
    --pf-transition:   0.2s ease;

    font-family: var(--pf-font);
    color: var(--pf-char);
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
}

/* ---- Header ---- */
.proffee-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.proffee-header-icon { color: var(--pf-gold); flex-shrink: 0; line-height: 1; }

.proffee-title {
    margin: 0 0 5px;
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 900;
    letter-spacing: -.01em;
    color: var(--pf-char);
    line-height: 1.2;
}

.proffee-subtitle {
    margin: 0;
    font-size: 15px;
    color: var(--pf-muted);
    line-height: 1.5;
}

/* ---- Search surface ---- */
.proffee-search-wrap {
    background: #fff;
    border: 1px solid var(--pf-line);
    border-radius: calc(var(--pf-radius) + 8px);
    box-shadow: var(--pf-shadow);
    padding: 22px 20px;
    margin-bottom: 18px;
}

.proffee-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.proffee-input-icon { color: var(--pf-muted); flex-shrink: 0; }

.proffee-input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--pf-char);
    background: var(--pf-bg-subtle);
    border: 1.5px solid var(--pf-line);
    border-radius: var(--pf-radius-sm);
    transition: border-color var(--pf-transition), box-shadow var(--pf-transition);
    outline: none;
    line-height: 1.4;
}

.proffee-input:focus {
    border-color: var(--pf-gold);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(209,144,0,.14);
}

.proffee-input::placeholder { color: rgba(61,57,53,.38); }

.proffee-btn {
    padding: 12px 22px;
    background: var(--pf-gold);
    color: #fff;
    border: none;
    border-radius: var(--pf-radius-sm);
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--pf-transition), transform var(--pf-transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    min-width: 100px;
    justify-content: center;
    flex-shrink: 0;
}

.proffee-btn:hover { background: #b87e00; }
.proffee-btn:active { transform: scale(0.98); }
.proffee-btn.is-loading .proffee-btn-text { opacity: 0; }
.proffee-btn.is-loading .proffee-btn-spinner { display: block; }

.proffee-btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: proffee-spin .6s linear infinite;
    position: absolute;
}

@keyframes proffee-spin { to { transform: rotate(360deg); } }

.proffee-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pf-muted);
    padding: 6px;
    border-radius: 50%;
    transition: color var(--pf-transition), background var(--pf-transition);
    flex-shrink: 0;
    line-height: 1;
}

.proffee-clear-btn:hover { color: var(--pf-gold); background: var(--pf-bg-highlight); }

/* ---- Brand tabs ---- */
.proffee-brand-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pf-line-soft);
}

.proffee-brand-tab {
    padding: 5px 13px;
    border: 1.5px solid var(--pf-line);
    background: #fff;
    color: var(--pf-muted);
    border-radius: 20px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--pf-transition);
    white-space: nowrap;
}

.proffee-brand-tab:hover { border-color: var(--pf-gold); color: var(--pf-gold); background: var(--pf-bg-highlight); }
.proffee-brand-tab.active { background: var(--pf-gold); border-color: var(--pf-gold); color: #fff; }

/* ---- Hint ---- */
.proffee-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    color: var(--pf-muted);
    line-height: 1.55;
    padding: 11px 15px;
    background: var(--pf-bg-subtle);
    border-radius: var(--pf-radius-sm);
    margin-top: 14px;
}

.proffee-hint svg { flex-shrink: 0; margin-top: 2px; }

/* ---- Status ---- */
.proffee-status {
    font-size: 14px;
    color: var(--pf-muted);
    margin-bottom: 12px;
    min-height: 20px;
}

.proffee-status strong { color: var(--pf-char); font-weight: 800; }

/* ---- Results ---- */
.proffee-results { display: flex; flex-direction: column; gap: 14px; }

/* ---- Card ---- */
.proffee-card {
    background: #fff;
    border: 1px solid var(--pf-line);
    border-radius: calc(var(--pf-radius) + 8px);
    box-shadow: var(--pf-shadow-soft);
    overflow: hidden;
    transition: box-shadow var(--pf-transition), border-color var(--pf-transition);
    animation: proffee-fadein 0.25s ease forwards;
}

.proffee-card:hover { box-shadow: var(--pf-shadow); border-color: rgba(209,144,0,.28); }

@keyframes proffee-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.proffee-card-accent {
    height: 4px;
    background: linear-gradient(90deg, var(--pf-gold), var(--pf-yellow));
}

.proffee-card-body { padding: 20px 22px 22px; }

.proffee-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.proffee-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.proffee-card-name {
    font-size: 17px;
    font-weight: 900;
    color: var(--pf-char);
    letter-spacing: -.01em;
    line-height: 1.2;
}

.proffee-card-variant {
    font-size: 12px;
    color: var(--pf-gold);
    font-weight: 800;
    background: var(--pf-bg-highlight);
    padding: 3px 9px;
    border-radius: 6px;
}

.proffee-card-category {
    font-size: 12px;
    color: var(--pf-muted);
    background: rgba(61,57,53,.07);
    padding: 3px 9px;
    border-radius: 6px;
    font-weight: 600;
}

.proffee-card-description {
    font-size: 14.5px;
    color: var(--pf-muted);
    margin: 0 0 16px;
    line-height: 1.6;
}

/* Match sections */
.proffee-card-sections { display: flex; flex-direction: column; gap: 10px; }

.proffee-match-section {
    background: rgba(61,57,53,.03);
    border: 1px solid var(--pf-line-soft);
    border-radius: var(--pf-radius-sm);
    padding: 12px 14px;
}

.proffee-match-label {
    font-size: 11.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pf-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.proffee-match-label-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    background: var(--pf-gold);
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    flex-shrink: 0;
}

.proffee-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }

.proffee-chip {
    font-size: 13px;
    padding: 4px 11px;
    border-radius: 6px;
    line-height: 1.4;
    font-family: inherit;
}

.proffee-chip--device {
    background: rgba(209,144,0,.10);
    color: #7a5500;
    border: 1px solid rgba(209,144,0,.22);
    font-weight: 600;
}

.proffee-chip--replacement {
    background: rgba(61,57,53,.07);
    color: var(--pf-char);
    border: 1px solid rgba(61,57,53,.14);
    font-weight: 600;
    font-family: "SF Mono","Fira Code","Courier New",monospace;
    font-size: 12px;
}

.proffee-chip--more {
    background: none;
    color: var(--pf-gold);
    border: 1.5px dashed rgba(209,144,0,.4);
    cursor: pointer;
    font-weight: 700;
    transition: all var(--pf-transition);
    font-size: 13px;
}

.proffee-chip--more:hover { background: var(--pf-bg-highlight); border-color: var(--pf-gold); }

/* Card footer */
.proffee-card-footer {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--pf-line-soft);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: var(--pf-bg-subtle);
}

.proffee-shop-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    background: var(--pf-gold);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: var(--pf-radius-sm);
    font-size: 14.5px;
    font-weight: 800;
    transition: background var(--pf-transition), transform var(--pf-transition);
}

.proffee-shop-link:hover { background: #b87e00; transform: translateX(2px); color: #fff !important; }

/* ---- No results ---- */
.proffee-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--pf-muted);
    background: #fff;
    border: 1px solid var(--pf-line);
    border-radius: calc(var(--pf-radius) + 8px);
    box-shadow: var(--pf-shadow-soft);
}

.proffee-no-results svg { display: block; margin: 0 auto 12px; opacity: .35; }
.proffee-no-results p { font-size: 15px; margin: 0; font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .proffee-input-row { flex-wrap: wrap; }
    .proffee-btn { width: 100%; }
    .proffee-card-body { padding: 16px 16px 18px; }
    .proffee-card-footer { padding: 12px 16px 16px; }
    .proffee-card-header { flex-direction: column; }
    .proffee-title { font-size: 20px; }
}

/* ---- Brand tabs v1.2: Schnellsuche statt Filter ---- */
.proffee-brand-tabs {
    align-items: center;
}

.proffee-brand-tabs-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--pf-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Active tab = gerade gesuchte Marke */
.proffee-brand-tab.active {
    background: var(--pf-gold);
    border-color: var(--pf-gold);
    color: #fff;
}