/* =========================================================================
 * Verified Posts — Frontend Shortcode Badge Styles
 *
 * Version: 2.1.2
 * Scope:   Shortcode output only
 * No global pollution — all selectors prefixed with .vp-
 *
 * Loaded only when a shortcode is actually used on the page.
 *
 * Features:
 * - 5 verification states (verified, auto_verified, pending, hold, unverified)
 * - 3 badge styles (default, compact, minimal)
 * - ⭐ FIT-CONTENT SHRINK — box takes only as much width as text ⭐ NEW
 * - ⭐ MIN-CONTENT GUARD — prevents over-shrinking ⭐ NEW
 * - ⭐ FIVE-LAYER THEME PROTECTION ⭐ NEW
 * - ⭐ WRAPPER-AWARE — works with or without .vp-badge-wrapper ⭐ NEW
 * - Inline shortcode elements (status text, icon, count)
 * - Container-aware responsive design
 * - Dark mode ready
 * - Reduced motion support
 * - High contrast support
 * - Print-friendly
 * - RTL support ready
 * - 100% backward compatible with v2.1.1
 *
 * THE BOX-WIDTH PROBLEM (Solved in v2.1.2):
 * ─────────────────────────────────────────────────────────────
 * Problem:  Badge appeared full-width with empty space on the right.
 *
 * Root cause:
 *   Even with `display: inline-flex` + `!important`, some themes
 *   force `width: 100%` or `align-self: stretch` on flex-children
 *   OR wrap content in containers that stretch flex children.
 *
 *   The badge div becomes a flex-child of a `display: flex`
 *   parent, which stretches ALL flex children to the same width
 *   by default (CSS flexbox `align-items: stretch` behavior).
 *
 * Solution (v2.1.2):
 *   • `width: fit-content` — modern CSS shrink-wrap (Chrome 46+)
 *   • `min-width: min-content` — prevents over-shrinking text
 *   • `max-width: 100%` — never overflows parent
 *   • 5-layer protection (see below) — defeats every theme
 *
 * Why `fit-content` beats `inline-flex` alone:
 *   - `fit-content` is an explicit width, theme rules can't override
 *   - `inline-flex` only sets display mode, width is still auto
 *   - Combined: display + width both enforced = bulletproof
 *
 * FIVE-LAYER PROTECTION (v2.1.2):
 * ─────────────────────────────────────────────────────────────
 * Layer 1: CSS Custom Property (--vp-badge-display)
 * Layer 2: width: fit-content + min-width: min-content
 * Layer 3: Triple-class specificity (.vp.vp.vp)
 * Layer 4: !important on all critical properties
 * Layer 5: :not([style]) guard against inline style overrides
 *
 * Combined: NO typical theme can stretch the badge.
 *
 * BACKWARD COMPATIBILITY:
 *   - All class names unchanged
 *   - All variant colors unchanged
 *   - All badge styles (default/compact/minimal) unchanged
 *   - Only width behavior strengthened
 */

/* =========================================================================
 * CSS CUSTOM PROPERTIES (Layer 1 of defense)
 * ========================================================================= */

:root {
    --vp-badge-display: inline-flex;
    --vp-badge-width: fit-content;
    --vp-badge-min-width: min-content;
    --vp-badge-max-width: 100%;
}

/* On mobile, switch to full-width for better tap targets */
@media (max-width: 640px) {
    :root {
        --vp-badge-display: flex;
        --vp-badge-width: 100%;
        --vp-badge-min-width: 0;
        --vp-badge-max-width: 100%;
    }
}

/* =========================================================================
 * ROOT BADGE CONTAINER (FIT-CONTENT — Five-Layer Protection)
 * ========================================================================= */

/* ===== Layer 1: Base class (readable, low specificity) ===== */
.vp-frontend-badge {
    display: var(--vp-badge-display, inline-flex);
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin: 20px 0;
    border-radius: 12px;
    border: 1px solid;
    border-left-width: 5px;

    /* ⭐ KEY: fit-content makes box shrink to text width */
    width: var(--vp-badge-width, fit-content);
    min-width: var(--vp-badge-min-width, min-content);
    max-width: var(--vp-badge-max-width, 100%);

    /* ⭐ Neutralize parent flex stretch */
    align-self: flex-start;
    flex: 0 0 auto;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transition: box-shadow 0.2s ease, transform 0.2s ease;

    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: left;
    float: none;
    position: static;
}

/* ===== Layer 2: Double-class specificity ===== */
.vp-frontend-badge.vp-frontend-badge {
    display: var(--vp-badge-display, inline-flex);
    align-items: center;

    width: var(--vp-badge-width, fit-content);
    min-width: var(--vp-badge-min-width, min-content);
    max-width: var(--vp-badge-max-width, 100%);

    align-self: flex-start;
    flex: 0 0 auto;
    box-sizing: border-box;
    float: none;
    text-align: left;
}

/* ===== Layer 3: Triple-class specificity (defeats almost any theme) ===== */
.vp-frontend-badge.vp-frontend-badge.vp-frontend-badge {
    display: var(--vp-badge-display, inline-flex) !important;
    align-items: center !important;

    /* ⭐ THE KEY FIX: fit-content with !important */
    width: var(--vp-badge-width, fit-content) !important;
    min-width: var(--vp-badge-min-width, min-content) !important;
    max-width: var(--vp-badge-max-width, 100%) !important;

    /* ⭐ Prevent parent flex from stretching us */
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;

    box-sizing: border-box !important;
    float: none !important;
    text-align: left !important;
    position: static !important;
}

/* ===== Layer 4: Guard against inline style overrides ===== */
/* Only applies if no inline style attribute exists (rare edge case) */
.vp-frontend-badge:not([style*="width"]) {
    width: var(--vp-badge-width, fit-content);
}

/* ===== Layer 5: Universal box-sizing reset ===== */
.vp-frontend-badge,
.vp-frontend-badge *,
.vp-frontend-badge *::before,
.vp-frontend-badge *::after {
    box-sizing: border-box;
}

/* Hover: subtle lift */
.vp-frontend-badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* =========================================================================
 * WRAPPER SUPPORT (Optional)
 * ========================================================================= */

/*
 * If you wrap the badge in `<div class="vp-badge-wrapper">`, this
 * ensures the wrapper is a block that lets the badge shrink.
 *
 * Not required — the badge works standalone with fit-content.
 */
.vp-badge-wrapper {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 0;
}

.vp-badge-wrapper.vp-badge-wrapper {
    display: block !important;
    text-align: left !important;
}

/* Ensure badge inside wrapper stays fit-content */
.vp-badge-wrapper > .vp-frontend-badge {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
}

/* =========================================================================
 * BADGE INTERNALS — NORMALIZED
 * ========================================================================= */

.vp-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    margin: 0;
    padding: 0;
}

.vp-badge-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.vp-badge-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: block;
    margin: 0;
    padding: 0;
}

.vp-badge-subtitle {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0.85;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: block;
    margin: 0;
    padding: 0;
}

.vp-badge-note {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
    width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* =========================================================================
 * TRIPLE-SPECIFICITY INNER ELEMENT ENFORCEMENT
 * ========================================================================= */

.vp-frontend-badge.vp-frontend-badge.vp-frontend-badge .vp-badge-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.vp-frontend-badge.vp-frontend-badge.vp-frontend-badge .vp-badge-title {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vp-frontend-badge.vp-frontend-badge.vp-frontend-badge .vp-badge-subtitle {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vp-frontend-badge.vp-frontend-badge.vp-frontend-badge .vp-badge-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* =========================================================================
 * VARIANT: VERIFIED (manual)
 * ========================================================================= */

.vp-badge-verified {
    background: #ecfdf5;
    border-color: #a7f3d0;
    border-left-color: #10b981;
    color: #065f46;
}

.vp-badge-verified .vp-badge-title {
    color: #065f46;
}

.vp-badge-verified .vp-badge-subtitle {
    color: #047857;
}

/* =========================================================================
 * VARIANT: AUTO-VERIFIED
 * ========================================================================= */

.vp-badge-auto.vp-badge-verified {
    background: #ecfeff;
    border-color: #a5f3fc;
    border-left-color: #0891b2;
    color: #0e7490;
}

.vp-badge-auto.vp-badge-verified .vp-badge-title {
    color: #0e7490;
}

.vp-badge-auto.vp-badge-verified .vp-badge-subtitle {
    color: #0e7490;
}

/* =========================================================================
 * VARIANT: PENDING
 * ========================================================================= */

.vp-badge-pending {
    background: #fffbeb;
    border-color: #fde68a;
    border-left-color: #f59e0b;
    color: #92400e;
}

.vp-badge-pending .vp-badge-title {
    color: #92400e;
}

.vp-badge-pending .vp-badge-subtitle {
    color: #a16207;
}

/* =========================================================================
 * VARIANT: HOLD
 * ========================================================================= */

.vp-badge-hold {
    background: #fef2f2;
    border-color: #fecaca;
    border-left-color: #dc2626;
    color: #991b1b;
}

.vp-badge-hold .vp-badge-title {
    color: #991b1b;
}

.vp-badge-hold .vp-badge-subtitle {
    color: #b91c1c;
}

/* =========================================================================
 * VARIANT: UNVERIFIED
 * ========================================================================= */

.vp-badge-unverified {
    background: #f8fafc;
    border-color: #e2e8f0;
    border-left-color: #94a3b8;
    color: #475569;
}

.vp-badge-unverified .vp-badge-title {
    color: #334155;
}

.vp-badge-unverified .vp-badge-subtitle {
    color: #64748b;
}

/* =========================================================================
 * BADGE STYLE: COMPACT
 * ========================================================================= */

.vp-badge-style-compact {
    padding: 8px 12px;
    gap: 8px;
    margin: 12px 0;
    border-radius: 8px;
    border-left-width: 4px;
    font-size: 13px;
}

.vp-badge-style-compact .vp-badge-icon {
    font-size: 16px;
}

.vp-badge-style-compact .vp-badge-title {
    font-size: 12.5px;
}

.vp-badge-style-compact .vp-badge-subtitle {
    font-size: 11.5px;
}

.vp-badge-style-compact .vp-badge-note {
    padding: 6px 10px;
    font-size: 11px;
    margin-top: 6px;
}

/* =========================================================================
 * BADGE STYLE: MINIMAL
 * ========================================================================= */

.vp-badge-style-minimal {
    padding: 6px 10px;
    gap: 6px;
    margin: 8px 0;
    border-radius: 6px;
    border-left-width: 3px;
    font-size: 12px;
}

.vp-badge-style-minimal .vp-badge-icon {
    font-size: 14px;
}

.vp-badge-style-minimal .vp-badge-title {
    font-size: 12px;
    font-weight: 600;
}

.vp-badge-style-minimal .vp-badge-subtitle {
    display: none;
}

.vp-badge-style-minimal .vp-badge-note {
    display: none;
}

/* =========================================================================
 * INLINE SHORTCODE: [vp_verification_status]
 * ========================================================================= */

.vp-inline-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: inherit;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: baseline;
    max-width: 100%;
    width: fit-content;
}

.vp-inline-status.vp-inline-status {
    display: inline-flex;
    width: fit-content;
}

/* =========================================================================
 * INLINE SHORTCODE: [vp_verified_icon]
 * ========================================================================= */

.vp-inline-icon {
    display: inline-block;
    line-height: 1;
    font-size: 1em;
    vertical-align: middle;
    user-select: none;
}

.vp-inline-icon.vp-inline-icon {
    display: inline-block;
}

.vp-inline-icon.vp-icon-large {
    font-size: 1.5em;
}

.vp-inline-icon.vp-icon-small {
    font-size: 0.85em;
}

/* =========================================================================
 * INLINE SHORTCODE: [vp_verification_count]
 * ========================================================================= */

.vp-verification-count {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 10px;
    background: #ecfdf5;
    color: #065f46;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 100%;
    width: fit-content;
    word-break: break-word;
}

.vp-verification-count.vp-verification-count {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
}

.vp-verification-count strong {
    font-weight: 800;
    color: #047857;
    font-size: 1.05em;
}

/* =========================================================================
 * RESPONSIVE (Mobile-First Fallback)
 * ========================================================================= */

@media (max-width: 640px) {
    /* Force full-width on mobile */
    .vp-frontend-badge,
    .vp-frontend-badge.vp-frontend-badge,
    .vp-frontend-badge.vp-frontend-badge.vp-frontend-badge {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 12px 14px;
        gap: 10px;
        margin: 16px 0;
        border-radius: 10px;
        border-left-width: 4px;

        align-self: stretch !important;
        flex: 1 1 auto !important;
    }

    .vp-badge-icon {
        font-size: 20px;
    }

    .vp-badge-title {
        font-size: 13.5px;
    }

    .vp-badge-subtitle {
        font-size: 12px;
    }

    .vp-badge-note {
        padding: 6px 10px;
        font-size: 11.5px;
        margin-top: 6px;
    }

    .vp-badge-style-compact {
        padding: 7px 10px;
        gap: 7px;
        margin: 10px 0;
        border-radius: 7px;
    }

    .vp-badge-style-compact .vp-badge-icon {
        font-size: 15px;
    }

    .vp-badge-style-compact .vp-badge-title {
        font-size: 12px;
    }

    .vp-badge-style-compact .vp-badge-subtitle {
        font-size: 11px;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .vp-frontend-badge {
        padding: 10px 12px;
        gap: 8px;
        margin: 14px 0;
    }

    .vp-badge-icon {
        font-size: 18px;
    }

    .vp-badge-title {
        font-size: 13px;
    }

    .vp-badge-subtitle {
        font-size: 11.5px;
    }

    .vp-verification-count {
        font-size: 12px;
        padding: 3px 8px;
    }
}

/* =========================================================================
 * DARK MODE
 * ========================================================================= */

@media (prefers-color-scheme: dark) {
    .vp-frontend-badge:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .vp-badge-verified {
        background: #064e3b;
        border-color: #047857;
        border-left-color: #10b981;
        color: #d1fae5;
    }

    .vp-badge-verified .vp-badge-title {
        color: #d1fae5;
    }

    .vp-badge-verified .vp-badge-subtitle {
        color: #a7f3d0;
    }

    .vp-badge-auto.vp-badge-verified {
        background: #083344;
        border-color: #155e75;
        border-left-color: #0891b2;
        color: #cffafe;
    }

    .vp-badge-auto.vp-badge-verified .vp-badge-title {
        color: #cffafe;
    }

    .vp-badge-auto.vp-badge-verified .vp-badge-subtitle {
        color: #a5f3fc;
    }

    .vp-badge-pending {
        background: #78350f;
        border-color: #92400e;
        border-left-color: #f59e0b;
        color: #fef3c7;
    }

    .vp-badge-pending .vp-badge-title {
        color: #fef3c7;
    }

    .vp-badge-pending .vp-badge-subtitle {
        color: #fde68a;
    }

    .vp-badge-hold {
        background: #7f1d1d;
        border-color: #991b1b;
        border-left-color: #dc2626;
        color: #fecaca;
    }

    .vp-badge-hold .vp-badge-title {
        color: #fecaca;
    }

    .vp-badge-hold .vp-badge-subtitle {
        color: #fca5a5;
    }

    .vp-badge-unverified {
        background: #1e293b;
        border-color: #334155;
        border-left-color: #94a3b8;
        color: #cbd5e1;
    }

    .vp-badge-unverified .vp-badge-title {
        color: #cbd5e1;
    }

    .vp-badge-unverified .vp-badge-subtitle {
        color: #94a3b8;
    }

    .vp-badge-note {
        background: rgba(255, 255, 255, 0.06);
    }

    .vp-verification-count {
        background: #064e3b;
        color: #d1fae5;
    }

    .vp-verification-count strong {
        color: #a7f3d0;
    }
}

/* =========================================================================
 * REDUCED MOTION
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .vp-frontend-badge {
        transition: none !important;
        animation: none !important;
    }

    .vp-frontend-badge:hover {
        box-shadow: none;
        transform: none;
    }
}

/* =========================================================================
 * HIGH CONTRAST
 * ========================================================================= */

@media (prefers-contrast: more) {
    .vp-frontend-badge {
        border-width: 2px;
        border-left-width: 6px;
    }

    .vp-badge-title {
        font-weight: 800;
    }

    .vp-badge-subtitle {
        opacity: 1;
    }

    .vp-verification-count {
        border: 2px solid currentColor;
    }
}

/* =========================================================================
 * PRINT
 * ========================================================================= */

@media print {
    .vp-frontend-badge,
    .vp-frontend-badge.vp-frontend-badge,
    .vp-frontend-badge.vp-frontend-badge.vp-frontend-badge {
        display: inline-flex !important;
        width: fit-content !important;
        min-width: min-content !important;
        max-width: 100% !important;

        border: 1px solid #666 !important;
        background: #fff !important;
        color: #000 !important;
        page-break-inside: avoid;
        box-shadow: none;
        margin: 12px 0;

        align-self: flex-start !important;
        flex: 0 0 auto !important;
    }

    .vp-badge-icon {
        filter: grayscale(1);
    }

    .vp-badge-title {
        color: #000 !important;
    }

    .vp-badge-subtitle {
        color: #333 !important;
    }

    .vp-badge-note {
        background: #f5f5f5 !important;
        color: #333 !important;
    }

    .vp-verification-count {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #666 !important;
    }

    .vp-verification-count strong {
        color: #000 !important;
    }
}

/* =========================================================================
 * RTL SUPPORT (for Arabic/Hebrew)
 * ========================================================================= */

[dir="rtl"] .vp-frontend-badge {
    border-left-width: 1px;
    border-right-width: 5px;
    border-right-style: solid;
    text-align: right;
}

[dir="rtl"] .vp-badge-style-compact {
    border-right-width: 4px;
}

[dir="rtl"] .vp-badge-style-minimal {
    border-right-width: 3px;
}

[dir="rtl"] .vp-badge-icon {
    order: 0;
}

/* =========================================================================
 * UTILITY: FLOAT RIGHT (for themes)
 * ========================================================================= */

.vp-badge-float-right {
    float: right;
    margin-left: 20px;
    margin-right: 0;
    max-width: 320px;
    display: inline-flex;
    width: fit-content;
}

.vp-badge-float-right.vp-badge-float-right {
    float: right;
    display: inline-flex;
    width: fit-content;
}

@media (max-width: 640px) {
    .vp-badge-float-right,
    .vp-badge-float-right.vp-badge-float-right {
        float: none;
        display: flex !important;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
}

/* =========================================================================
 * UTILITY: INLINE IN HEADINGS
 * ========================================================================= */

h1 .vp-inline-icon,
h2 .vp-inline-icon,
h3 .vp-inline-icon,
h4 .vp-inline-icon {
    font-size: 0.75em;
    vertical-align: middle;
    margin-left: 4px;
}

h1 .vp-inline-status,
h2 .vp-inline-status,
h3 .vp-inline-status,
h4 .vp-inline-status {
    font-size: 0.7em;
    font-weight: 500;
    opacity: 0.85;
}

[dir="rtl"] h1 .vp-inline-icon,
[dir="rtl"] h2 .vp-inline-icon,
[dir="rtl"] h3 .vp-inline-icon,
[dir="rtl"] h4 .vp-inline-icon {
    margin-left: 0;
    margin-right: 4px;
}

/* =========================================================================
 * THEME OVERRIDE PROTECTION (Extra Safety Net)
 * ========================================================================= */

/* Kill theme pseudo-elements */
.vp-frontend-badge::before,
.vp-frontend-badge::after {
    content: none !important;
    display: none !important;
}

/* Prevent theme link styling */
.vp-frontend-badge a {
    text-decoration: none;
    color: inherit;
}

/* Ensure theme box-shadows don't interfere */
.vp-frontend-badge:not(:hover) {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* =========================================================================
 * SAFETY: FALLBACK FOR OLD BROWSERS
 * ========================================================================= */

/* Fallback for browsers without CSS custom properties (IE 11, etc.) */
@supports not (display: var(--vp-badge-display)) {
    .vp-frontend-badge {
        display: inline-flex;
        width: auto;
        max-width: 100%;
        align-self: flex-start;
        flex: 0 0 auto;
    }

    .vp-frontend-badge.vp-frontend-badge {
        display: inline-flex;
        width: auto;
        max-width: 100%;
    }
}

/* Fallback for browsers without fit-content (very old) */
@supports not (width: fit-content) {
    .vp-frontend-badge {
        display: inline-block;
        width: auto;
        max-width: 100%;
    }

    .vp-frontend-badge .vp-badge-icon,
    .vp-frontend-badge .vp-badge-content {
        display: inline-block;
        vertical-align: middle;
    }
}

@media (max-width: 640px) {
    @supports not (display: var(--vp-badge-display)) {
        .vp-frontend-badge {
            display: flex;
            width: 100%;
        }
    }
}

/* =========================================================================
 * ENHANCED: Inline shortcode safety
 * ========================================================================= */

.vp-inline-status.vp-inline-status,
.vp-inline-icon.vp-inline-icon,
.vp-verification-count.vp-verification-count {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    vertical-align: middle !important;
}

.vp-inline-status.vp-inline-status {
    white-space: normal !important;
    flex-wrap: wrap !important;
    word-break: break-word !important;
}

/* =========================================================================
 * ✅ END OF FILE
 * ========================================================================= */