/*
 * Seller / store verification trust badges on product listings.
 * Rendered by resources/views/frontend/partials/verification_badges.blade.php
 */

.vtrust {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.vtrust.is-center {
    justify-content: center;
}

.vtrust.is-start {
    justify-content: flex-start;
}

.vtrust__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: help;
}

.vtrust__ic {
    display: inline-flex;
    flex: 0 0 auto;
}

.vtrust__ic svg {
    width: 11px;
    height: 11px;
}

.vtrust__name {
    opacity: 0.75;
}

.vtrust__val {
    font-weight: 700;
}

.vtrust__check {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
}

/* Fully verified */
.vtrust--verified {
    color: #0f7b4f;
    background: linear-gradient(180deg, #eafaf1 0%, #dcf5e8 100%);
    border-color: #b7e6cd;
}

/* Platform-owned listing */
.vtrust--official {
    color: #1b4d9b;
    background: linear-gradient(180deg, #eaf1fd 0%, #dce8fb 100%);
    border-color: #bcd3f5;
}

/* Some levels done, verification still in progress */
.vtrust--partial {
    color: #8a5300;
    background: linear-gradient(180deg, #fff6e6 0%, #ffeecd 100%);
    border-color: #f5dcae;
}

/* Nothing verified yet */
.vtrust--none {
    color: #6b7280;
    background: #f3f4f6;
    border-color: #e0e3e8;
}

/*
 * Accessible label, hidden visually.
 *
 * Not the theme's .sr-only: Bootstrap 5 renamed it to .visually-hidden, so on a
 * theme built against v5 the class resolved to nothing and the whole sentence
 * ("Cloyd Valencia has completed 4 of 5 verification levels.") printed inside
 * the card. Defined here so the partial never depends on the host theme.
 */
.vtrust__sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * Micro: "[store] Level 2 / [person] Level 4".
 *
 * For the corner of a product card, where it sits beside the store name. No
 * words, no denominator, no separate check glyph — the tone carries the state
 * and the tooltip carries the detail.
 */
.vtrust.is-micro {
    flex-wrap: nowrap;
    gap: 3px;
    margin-top: 0;
    align-items: center;
}

.vtrust.is-micro .vtrust__pill {
    gap: 3px;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
}

.vtrust.is-micro .vtrust__ic svg {
    width: 10px;
    height: 10px;
}

.vtrust__sep {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    color: #9ca3af;
    opacity: 0.65;
    user-select: none;
}

[data-theme='dark'] .vtrust__sep,
.dark-mode .vtrust__sep,
body.dark .vtrust__sep {
    color: #64748b;
}

/* Tight carousel cards: drop the word, keep icon + level */
.vtrust.is-compact {
    margin-top: 4px;
    gap: 3px;
}

.vtrust.is-compact .vtrust__name {
    display: none;
}

.vtrust.is-compact .vtrust__pill {
    font-size: 9px;
    padding: 1px 5px;
}

@media (max-width: 575.98px) {
    .vtrust__pill {
        font-size: 9px;
        padding: 1px 6px;
    }

    .vtrust__name {
        display: none;
    }

    /* Two-up card grid leaves very little width; the row still must not wrap,
       so the pills give up their padding before the store name gives up more
       characters to the ellipsis. */
    .vtrust.is-micro .vtrust__pill {
        padding: 1px 4px;
        gap: 2px;
    }
}

/*
 * Dark mode. The storefront themes opt in via [data-theme="dark"] / .dark-mode;
 * the Virtual Office portal (marketplace) uses body.dark.
 */
[data-theme='dark'] .vtrust--verified,
.dark-mode .vtrust--verified,
body.dark .vtrust--verified {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.32);
}

[data-theme='dark'] .vtrust--official,
.dark-mode .vtrust--official,
body.dark .vtrust--official {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.32);
}

[data-theme='dark'] .vtrust--partial,
.dark-mode .vtrust--partial,
body.dark .vtrust--partial {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.32);
}

[data-theme='dark'] .vtrust--none,
.dark-mode .vtrust--none,
body.dark .vtrust--none {
    color: #9ca3af;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.26);
}