/* ===========================================================================
   SHOPFORME — Vendor Trust Badges
   Consistent, restrained badge system that matches the platform theme.
   Loaded last in pages/frontend/include/assets.blade.php.
   =========================================================================== */

.vendor-badge {
    border: 1px solid transparent;
    background: #f3f4f6;
    color: #374151;
    line-height: 1.1;
    cursor: help;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    white-space: nowrap;
}
.vendor-badge:hover,
.vendor-badge:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    outline: none;
}
.vendor-badge i { font-size: .95em; }

/* Category accents — four restrained tones, aligned with the SHOPFORME palette */
.vendor-badge--green   { background: #e7f5ec; color: #1a7f45; border-color: #bfe6cd; }
.vendor-badge--natural { background: #eef6e6; color: #4d7c1a; border-color: #d6e9c2; }
.vendor-badge--trust   { background: #e8f1fb; color: #1f5fa8; border-color: #c7ddf3; }
.vendor-badge--gold    { background: #fdf3dd; color: #97701a; border-color: #f2e0b0; }

/* Tooltip (pure CSS, no JS dependency) */
.vendor-badge[data-badge-tip] { position: relative; }
.vendor-badge[data-badge-tip]::after {
    content: attr(data-badge-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 260px;
    white-space: pre-line;
    background: #111827;
    color: #f9fafb;
    text-align: left;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 60;
}
.vendor-badge[data-badge-tip]:hover::after,
.vendor-badge[data-badge-tip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .vendor-badge,
    .vendor-badge[data-badge-tip]::after { transition: none; }
    .vendor-badge:hover,
    .vendor-badge:focus-visible { transform: none; }
}