/* Shared VIN result cards — used by VIN-tolken and Min bil */

.vin-page       { max-width: none; width: 100%; }
.vin-header     { margin-bottom: 1.75rem; }
.vin-by         { font-size: .7em; font-weight: 400; color: var(--mid, #888); }
.vin-intro      { margin: .5rem 0 .25rem; line-height: 1.6; max-width: 52rem; }
.vin-intro-small{ font-size: .875rem; color: var(--mid, #666); margin: 0; max-width: 52rem; }

.vin-search-wrap{ margin-bottom: 1.75rem; }
.vin-search     { display: flex; gap: .5rem; max-width: 36rem; }
.vin-input      { flex: 1; font-size: 1.15rem; font-family: monospace; letter-spacing: .08em;
                  padding: .55rem .9rem; border: 2px solid var(--border, #d1d5db);
                  border-radius: 6px; background: var(--bg, #fff); color: var(--text, #1a1a1a);
                  text-transform: uppercase; }
.vin-input:focus{ outline: none; border-color: var(--brand, #0f6470); box-shadow: 0 0 0 3px rgba(15,100,112,.18); }
.vin-input:disabled { opacity: .6; }
.vin-btn        { padding: .55rem 1.4rem; background: var(--brand, #0f6470); color: #fff;
                  border: none; border-radius: 6px; font-size: 1rem; font-weight: 600;
                  cursor: pointer; display: flex; align-items: center; gap: .4rem;
                  min-width: 90px; justify-content: center; transition: background .15s; }
.vin-btn:hover:not(:disabled) { background: var(--brand-hover, #0a4c56); }
.vin-btn:disabled { opacity: .6; cursor: not-allowed; }

.vin-error      { margin-top: .65rem; padding: .65rem 1rem; background: #fff5f5;
                  border: 1px solid #f5c6c6; border-radius: 6px; color: #8a1f1f; font-size: .9rem; }
.vin-warning    { margin-top: .65rem; padding: .65rem 1rem; background: #fffbea;
                  border: 1px solid #f5c842; border-radius: 6px; color: #7a6000; font-size: .9rem; }

.vin-results    { display: flex; flex-direction: column; gap: 1.25rem; }
.vin-card       { background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e8f0);
                  border-radius: 8px; padding: 1.25rem 1.5rem; }
.vin-card-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .85rem; color: var(--text, #1a1a1a); }
.vin-card-sub   { font-size: .8rem; font-weight: 400; color: var(--mid, #888); }

.vin-info-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.vin-info-table tr:not(:last-child) td { border-bottom: 1px solid var(--border, #eee); }
.vin-info-label { padding: .45rem .75rem .45rem 0; font-size: .9rem; color: var(--mid, #666);
                  width: 28%; vertical-align: top; }
.vin-info-value { padding: .45rem 0; font-size: .9rem; font-weight: 600; color: var(--text, #1a1a1a);
                  word-break: break-word; }

.vin-plate-card { text-align: center; }
.vin-plate-wrap { display: inline-block; max-width: 100%; overflow-x: auto; }
.vin-plate-wrap svg,
.vin-plate-wrap img { max-width: 100%; height: auto; }

.vin-parts-list  { list-style: none; padding: 0; margin: 0;
                   display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: .4rem; }
.vin-part-item   { display: flex; justify-content: space-between; align-items: baseline;
                   padding: .35rem .6rem; background: var(--bg, #f8fafc);
                   border-radius: 5px; font-size: .88rem; gap: .5rem; }
.vin-part-cat    { font-weight: 600; color: var(--text, #1a1a1a); flex-shrink: 0; }
.vin-part-detail { color: var(--mid, #555); text-align: right; display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.vin-part-code   { color: var(--mid, #999); font-size: .8em; }

.vin-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.vin-features-table { border-collapse: collapse; width: 100%; font-size: .83rem; }
.vin-features-table thead th { background: var(--bg, #f5f7fa); padding: .5rem .6rem;
    text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--mid, #666); border-bottom: 2px solid var(--border, #e2e8f0); }
.vin-features-table tbody td { padding: .4rem .6rem; border-bottom: 1px solid var(--border, #f0f0f0);
    color: var(--text, #1a1a1a); vertical-align: top; word-break: break-word; }
.vin-features-table tbody tr:last-child td { border-bottom: none; }
.vin-features-table tbody tr:hover td { background: var(--bg, #fafbfc); }
.vin-features-table .col-key,
.vin-features-table .col-filter,
.vin-features-table .col-code { white-space: nowrap; font-family: ui-monospace, monospace; font-size: .8rem; }
.vin-features-table .col-group { width: 12%; }
.vin-features-table .col-name  { width: 22%; }
.vin-features-table .col-value { width: 28%; }

.vin-disclaimer { margin-top: .85rem; font-size: .82rem; color: var(--mid, #888); }

/* Click-to-copy */
.vin-copy {
    cursor: copy;
    border-radius: 3px;
    transition: background .12s;
    position: relative;
}
.vin-copy:hover,
.vin-copy:focus-visible {
    background: rgba(15, 100, 112, .08);
    outline: none;
}
.vin-copy.vin-copied {
    background: rgba(34, 120, 60, .12);
}
.vin-copy[data-tip]:hover::after,
.vin-copy[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    z-index: 5;
    padding: .2rem .45rem;
    background: #1a1a1a;
    color: #fff;
    font-size: .72rem;
    font-weight: 400;
    white-space: nowrap;
    border-radius: 4px;
    pointer-events: none;
}
/* Right-side cells: tip is wider than the cell — grow left so it isn't clipped */
.vin-info-value.vin-copy[data-tip]:hover::after,
.vin-info-value.vin-copy[data-tip]:focus-visible::after,
.vin-features-table td:nth-last-child(-n+2).vin-copy[data-tip]:hover::after,
.vin-features-table td:nth-last-child(-n+2).vin-copy[data-tip]:focus-visible::after,
.vin-part-item.vin-copy[data-tip]:hover::after,
.vin-part-item.vin-copy[data-tip]:focus-visible::after {
    left: auto;
    right: 0;
}
.vin-copy-toast {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: .45rem .9rem;
    background: #1a1a1a;
    color: #fff;
    font-size: .85rem;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
.vin-copy-toast.is-on { opacity: 1; }

@media (max-width: 900px) {
    .vin-info-label { width: 34%; }
    .vin-features-table .col-filter { display: none; }
}

@media (max-width: 600px) {
    .vin-search { flex-direction: column; max-width: none; }
    .vin-btn    { width: 100%; }
    .vin-parts-list { grid-template-columns: 1fr; }
    .vin-info-label { width: 40%; white-space: normal; }
    .vin-features-table .col-key,
    .vin-features-table .col-group { display: none; }
}