/**
 * badges.css — Venue Status Badges (Modular Component)
 * TASK-P2-B2B-PAGE-V4-BADGES / TASK-P2-B2C-BADGES-V1
 *
 * Architecture:
 *   Base class:  .venue-badge
 *   Modifiers:   .venue-badge--emerald  (Tier 1)
 *                .venue-badge--ai-booster  (Tier 2 / AI-Booster)
 *                .venue-badge--signature (Tier 3 / Elite)
 *
 * Dark-mode defaults (B2B Cyber-Jungle context).
 * Light-mode overrides via .b2c-context parent selector (B2C Nomad Precision).
 *
 * Guardrails:
 *   - All SVG icons use currentColor (no hardcoded HEX in SVG).
 *   - No JavaScript rendering — badges are pure PHP/HTML Server-Side.
 *   - Light-mode uses Neo-Brutalism borders (no neon glow on white background).
 *
 * @package Places_TH
 * @since   2.1.0
 */

/* ============================================================
   BASE — works on any background
   ============================================================ */
.venue-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: fit-content;
    line-height: 1;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    cursor: default;
    /* Font: falls back gracefully to system mono if JetBrains not loaded */
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.venue-badge:hover {
    transform: translateY(-1px);
}

/* Icon inside badge — inherits color via currentColor */
.venue-badge .badge-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    /* SVG must use fill="currentColor" or stroke="currentColor" */
    color: inherit;
    transition: transform 200ms ease;
}

.venue-badge:hover .badge-icon {
    transform: scale(1.1);
}

/* Shimmer rail for Signature badges */
.venue-badge .badge-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-20deg);
    animation: badgeShimmerGlobal 4s infinite ease-in-out;
    pointer-events: none;
}

@keyframes badgeShimmerGlobal {
    0%        { left: -100%; }
    25%, 100% { left: 200%; }
}

/* Pulsing live-dot for Emerald */
@keyframes emeraldPulseGlobal {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.8); }
}


/* ============================================================
   DARK MODE (Default — B2B Cyber-Jungle context)
   Applied when NO .b2c-context ancestor is present.
   ============================================================ */

/* — Tier 1: Emerald Verified — */
.venue-badge--emerald {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(5, 150, 105, 0.08) 100%);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.venue-badge--emerald:hover {
    border-color: #10B981;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Live pulse dot — dark mode */
.venue-badge--emerald::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: emeraldPulseGlobal 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    flex-shrink: 0;
}

/* — Tier 2: AI-Booster VIP — */
.venue-badge--ai-booster,
.venue-badge--priority {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(217, 119, 6, 0.08) 100%);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.venue-badge--ai-booster:hover,
.venue-badge--priority:hover {
    border-color: #F59E0B;
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* — Tier 3: Signature Elite — */
.venue-badge--signature,
.venue-badge--elite {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, #0A0D14 50%, #05070B 100%);
    color: #E5E7EB;
    border: 1px solid #4B5563;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.venue-badge--signature:hover,
.venue-badge--elite:hover {
    border-color: #9CA3AF;
    box-shadow: 0 0 22px rgba(209, 213, 219, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}


/* ============================================================
   LIGHT MODE — B2C Nomad Precision (Neo-Brutalism)
   Applied via .b2c-context ancestor class.
   Guardrail: NO neon glow on white background.
   Uses hard 1.5px borders and solid fills instead.
   ============================================================ */

/* — Tier 1: Emerald — Light — */
.b2c-context .venue-badge--emerald {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1.5px solid #10B981;
    box-shadow: 2px 2px 0px #059669; /* Neo-Brutalism hard shadow */
}

.b2c-context .venue-badge--emerald:hover {
    box-shadow: 3px 3px 0px #059669;
    transform: translate(-1px, -1px);
}

/* Pulse dot — light mode (no neon glow) */
.b2c-context .venue-badge--emerald::before {
    background-color: #059669;
    box-shadow: none; /* Remove glow on light background */
}

/* — Tier 2: AI-Booster — Light — */
.b2c-context .venue-badge--ai-booster,
.b2c-context .venue-badge--priority {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
    border: 1.5px solid #F59E0B;
    box-shadow: 2px 2px 0px #D97706;
}

.b2c-context .venue-badge--ai-booster:hover,
.b2c-context .venue-badge--priority:hover {
    box-shadow: 3px 3px 0px #D97706;
    transform: translate(-1px, -1px);
}

/* — Tier 3: Signature — Light — */
.b2c-context .venue-badge--signature,
.b2c-context .venue-badge--elite {
    background: #F3F4F6;
    color: #1F2937;
    border: 1.5px solid #9CA3AF;
    box-shadow: 2px 2px 0px #6B7280;
}

.b2c-context .venue-badge--signature:hover,
.b2c-context .venue-badge--elite:hover {
    border-color: #6B7280;
    box-shadow: 3px 3px 0px #6B7280;
    transform: translate(-1px, -1px);
}

/* Signature shimmer disabled in light mode (too distracting on white) */
.b2c-context .venue-badge--signature .badge-shimmer,
.b2c-context .venue-badge--elite .badge-shimmer {
    display: none;
}


/* ============================================================
   BADGE ON THUMBNAIL (B2C Card Grid overlay)
   Used in archive-restaurant.php / content-restaurant.php
   ============================================================ */
.venue-card__badge-wrap {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5; /* Above image, below action overlay */
    pointer-events: none; /* Does not block card click */
}

.venue-card__badge-wrap .venue-badge {
    /* Ensure badge is clickable/readable over any photo */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Light-mode card override — remove backdrop blur */
.b2c-context .venue-card__badge-wrap .venue-badge {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* ============================================================
   VALUE BRIDGE CALLOUT (B2B pricing only)
   ============================================================ */
.venue-badge__value-bridge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--cj-text-secondary, #9CA3AF);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--cj-border, #1F2937);
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 16px;
    line-height: 1.35;
}

.venue-badge__value-bridge strong {
    color: var(--cj-text-primary, #F0FDF4);
}

.value-bridge__icon {
    color: var(--cj-green, #10B981);
    font-size: 11px;
    flex-shrink: 0;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 440px) {
    .venue-badge {
        font-size: 10px;
        padding: 3px 8px;
        gap: 4px;
    }

    .venue-badge .badge-icon {
        width: 12px;
        height: 12px;
    }
}