/**
 * ═══════════════════════════════════════════════════════════════
 *  WUS Unified Chip & Pill System
 *  Single source of truth for ALL badge/chip/pill styles
 * ═══════════════════════════════════════════════════════════════
 *
 *  PILL  = informational label, NOT clickable  → border-radius: 999px
 *  CHIP  = interactive filter/toggle, CLICKABLE → border-radius: 8px
 *
 *  Architecture:
 *    .ui-pill                          base pill
 *    .ui-pill--{type}                  visual category (feature, status, category, ranking, price)
 *    .ui-pill--{type}.is-{state}       variation within a type
 *
 *    .ui-chip                          base chip
 *    .ui-chip--active                  selected state
 *    .ui-chip--{variant}               color variant for themed filters
 *
 *  @package  FlavorFlavorListingPages
 *  @since    4.0.0
 *  @version  1.0.0
 */


/* ─────────────────────────────────────────
   0. DESIGN TOKENS
   ───────────────────────────────────────── */

:root {
    /* ── Brand ── */
    --ui-navy:              #0A1543;
    --ui-navy-light:        #132060;
    --ui-orange:            #FF6B00;
    --ui-orange-hover:      #E55F00;
    --ui-brand-primary:     #F47C2C;

    /* ── Semantic ── */
    --ui-success:           #16A34A;
    --ui-success-light:     #dcfce7;
    --ui-success-bg:        rgba(22, 163, 74, 0.92);
    --ui-danger:            #DC2626;
    --ui-danger-light:      #fee2e2;
    --ui-danger-bg:         rgba(220, 38, 38, 0.88);
    --ui-warning:           #F59E0B;
    --ui-warning-light:     #fef3c7;
    --ui-info:              #2563EB;
    --ui-info-light:        rgba(37, 99, 235, 0.08);

    /* ── Neutrals ── */
    --ui-white:             #FFFFFF;
    --ui-gray-50:           #F8FAFC;
    --ui-gray-100:          #F1F5F9;
    --ui-gray-200:          #E2E8F0;
    --ui-gray-300:          #CBD5E1;
    --ui-gray-400:          #94A3B8;
    --ui-gray-500:          #64748B;
    --ui-gray-600:          #475569;
    --ui-gray-700:          #334155;
    --ui-gray-800:          #1E293B;

    /* ── Gradients (ranking pills) ── */
    --ui-grad-best-of:      linear-gradient(135deg, #B45309, #92400E);
    --ui-grad-trending:     linear-gradient(135deg, #EF4444, #DC2626);
    --ui-grad-rising:       linear-gradient(135deg, #22C55E, #16A34A);
    --ui-grad-founding:     linear-gradient(135deg, #f97316, #ea580c);
    --ui-grad-featured:     linear-gradient(135deg, #10B981, #059669);

    /* ── Spacing ── */
    --ui-pill-px:           10px;
    --ui-pill-py:           3px;
    --ui-chip-px:           18px;
    --ui-chip-py:           8px;

    /* ── Radii ── */
    --ui-radius-pill:       999px;
    --ui-radius-chip:       8px;

    /* ── Typography ── */
    --ui-font-xs:           11px;
    --ui-font-sm:           13px;
    --ui-font-base:         14px;
    --ui-weight-medium:     500;
    --ui-weight-semibold:   600;
    --ui-weight-bold:       700;

    /* ── Motion ── */
    --ui-transition:        0.2s ease;

    /* ── Shadows ── */
    --ui-shadow-sm:         0 1px 3px rgba(10, 21, 67, 0.06), 0 1px 2px rgba(10, 21, 67, 0.04);
    --ui-shadow-md:         0 4px 16px rgba(10, 21, 67, 0.08);
}


/* ═════════════════════════════════════════
   1. BASE PILL
   ═════════════════════════════════════════
   Non-interactive label. Always fully rounded.
   Usage: <span class="ui-pill ui-pill--{type}">Label</span>
*/

.ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--ui-pill-py) var(--ui-pill-px);
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-font-xs);
    font-weight: var(--ui-weight-bold);
    line-height: 1.4;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border: none;
    text-decoration: none;
    vertical-align: middle;

/* ── Pill row container ── */
.ui-pill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
    user-select: none;

    /* Default: neutral gray */
    background: var(--ui-gray-100);
    color: var(--ui-gray-600);
}


/* ─────────────────────────────────────────
   1a. PILL TYPE: --feature
   ─────────────────────────────────────────
   Tier badges, Featured, Founding Member
   Used on: hero, directory cards
*/

/* Founding Member — orange gradient, white text */
.ui-pill--feature.is-founding {
    background: var(--ui-grad-founding);
    color: var(--ui-white);
    text-transform: uppercase;
}

/* Featured — gold gradient, white text */
.ui-pill--feature.is-featured {
    background: var(--ui-grad-featured);
    color: var(--ui-white);
    text-transform: uppercase;
}

/* Partner — teal */
.ui-pill--feature.is-partner {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: var(--ui-white);
}

/* Pro — blue */
.ui-pill--feature.is-pro {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: var(--ui-white);
}


/* ─────────────────────────────────────────
   1b. PILL TYPE: --status
   ─────────────────────────────────────────
   Open/Closed, Verified
   Used on: hero, directory cards
*/

.ui-pill--status {
    backdrop-filter: blur(8px);
    font-weight: var(--ui-weight-bold);
}

.ui-pill--status.is-open {
    background: var(--ui-success-bg);
    color: var(--ui-white);
}

.ui-pill--status.is-closed {
    background: var(--ui-danger-bg);
    color: var(--ui-white);
}

.ui-pill--status.is-verified {
    background: var(--ui-success-light);
    color: #166534;
}

/* ── Shorthand aliases (used by section-renderer & JS) ── */
.ui-pill--open     { background: var(--ui-success-bg); color: var(--ui-white); }
.ui-pill--closed   { background: var(--ui-danger-bg); color: var(--ui-white); }
.ui-pill--success  { background: var(--ui-success-light); color: #166534; }
.ui-pill--muted    { background: rgba(255, 255, 255, 0.2); color: var(--ui-white); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); }
.ui-pill--muted.on-light { background: var(--ui-gray-100); color: var(--ui-gray-700); border-color: var(--ui-gray-200); }


/* ─────────────────────────────────────────
   1c. PILL TYPE: --category
   ─────────────────────────────────────────
   Main business category, event category
   Subtle transparent background
*/

.ui-pill--category {
    background: rgba(255, 255, 255, 0.2);
    color: var(--ui-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
}

/* On light backgrounds (outside hero) */
.ui-pill--category.on-light {
    background: var(--ui-gray-100);
    color: var(--ui-gray-700);
    border-color: var(--ui-gray-200);
}


/* ─────────────────────────────────────────
   1d. PILL TYPE: --ranking
   ─────────────────────────────────────────
   Discovery badges: Best Of, Trending, Rising
   Gradient background, white text, tooltip support
*/

.ui-pill--ranking {
    color: var(--ui-white);
    font-weight: var(--ui-weight-bold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    position: relative;
    cursor: default;
    transition: transform var(--ui-transition), box-shadow var(--ui-transition);
}

.ui-pill--ranking:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ui-pill--ranking.is-best-of {
    background: var(--ui-grad-best-of);
}

.ui-pill--ranking.is-trending {
    background: var(--ui-grad-trending);
}

.ui-pill--ranking.is-rising {
    background: var(--ui-grad-rising);
}

/* Tooltip (pure CSS, replaces old ::after system) */
.ui-pill--ranking[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: var(--ui-gray-800);
    color: var(--ui-white);
    font-size: var(--ui-font-xs);
    font-weight: var(--ui-weight-medium);
    text-shadow: none;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ui-transition), transform var(--ui-transition);
    z-index: 100;
}

.ui-pill--ranking[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ui-gray-800);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ui-transition);
    z-index: 100;
}

.ui-pill--ranking[data-tooltip]:hover::after,
.ui-pill--ranking[data-tooltip]:hover::before {
    opacity: 1;
}

.ui-pill--ranking[data-tooltip]:hover::after {
    transform: translateX(-50%) scale(1);
}


/* ─────────────────────────────────────────
   1e. PILL TYPE: --price
   ─────────────────────────────────────────
   Free / Paid indicators
*/

.ui-pill--price {
    font-weight: var(--ui-weight-bold);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.ui-pill--price.is-free {
    background: var(--ui-success-light);
    color: #166534;
}

.ui-pill--price.is-paid {
    background: var(--ui-warning-light);
    color: #92400e;
}


/* ─────────────────────────────────────────
   1f. PILL TYPE: --event
   ─────────────────────────────────────────
   Event source badge, series badge
*/

.ui-pill--event {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
}

.ui-pill--event.is-auto {
    background: var(--ui-info-light);
    color: var(--ui-info);
}

.ui-pill--event.is-manual {
    background: var(--ui-success-light);
    color: #166534;
}

.ui-pill--event.is-series {
    background: #faf5ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}


/* ─────────────────────────────────────────
   1g. PILL SIZES
   ─────────────────────────────────────────
   Override default padding for specific contexts
*/

/* Compact — for tight spaces like card overlays */
.ui-pill--sm {
    padding: 2px 8px;
    font-size: 10px;
}

/* Larger — for hero badges */
.ui-pill--lg {
    padding: 5px 14px;
    font-size: 12px;
}


/* ─────────────────────────────────────────
   1h. PILL CONTAINERS
   ─────────────────────────────────────────
   Row wrappers for groups of pills
*/

.ui-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Stacked rows in hero */
.ui-pills--primary {
    margin-bottom: 6px;
}

.ui-pills--status {
    margin-bottom: 0;
}

/* Discovery badge strip */
.ui-pills--ranking {
    gap: 6px;
}


/* ═════════════════════════════════════════
   2. BASE CHIP
   ═════════════════════════════════════════
   Interactive filter/toggle. Rounded rectangle.
   Usage: <a class="ui-chip">Label</a>
          <button class="ui-chip ui-chip--active">Label</button>
*/

.ui-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--ui-chip-py) var(--ui-chip-px);
    border: 1.5px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-chip);
    background: var(--ui-white);
    color: var(--ui-gray-600);
    font-size: var(--ui-font-sm);
    font-weight: var(--ui-weight-medium);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--ui-transition);
    text-decoration: none;
    box-shadow: var(--ui-shadow-sm);
    user-select: none;
}

.ui-chip:hover {
    border-color: var(--ui-orange);
    color: var(--ui-orange);
    background: var(--ui-white);
    text-decoration: none;
}

.ui-chip:focus-visible {
    outline: 2px solid var(--ui-orange);
    outline-offset: 2px;
}


/* ─────────────────────────────────────────
   2a. CHIP STATE: --active
   ─────────────────────────────────────────
   Currently selected filter
*/

.ui-chip--active,
.ui-chip.is-active {
    background: var(--ui-navy);
    border-color: var(--ui-navy);
    color: var(--ui-white);
    box-shadow: var(--ui-shadow-md);
}

.ui-chip--active:hover,
.ui-chip.is-active:hover {
    background: var(--ui-navy-light);
    border-color: var(--ui-navy-light);
    color: var(--ui-white);
}


/* ─────────────────────────────────────────
   2b. CHIP VARIANTS (themed filters)
   ─────────────────────────────────────────
   For events archive: featured/free/recurring
   Color-coded resting state + active override
*/

/* Featured — warm orange */
.ui-chip--featured {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}
.ui-chip--featured:hover {
    background: #ffedd5;
    border-color: #fb923c;
}
.ui-chip--featured.is-active {
    background: var(--ui-brand-primary);
    color: var(--ui-white);
    border-color: var(--ui-brand-primary);
}

/* Free — green */
.ui-chip--free {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}
.ui-chip--free:hover {
    background: #dcfce7;
    border-color: #4ade80;
}
.ui-chip--free.is-active {
    background: var(--ui-success);
    color: var(--ui-white);
    border-color: var(--ui-success);
}

/* Recurring — purple */
.ui-chip--recurring {
    background: #faf5ff;
    color: #7e22ce;
    border-color: #e9d5ff;
}
.ui-chip--recurring:hover {
    background: #f3e8ff;
    border-color: #c084fc;
}
.ui-chip--recurring.is-active {
    background: #7e22ce;
    color: var(--ui-white);
    border-color: #7e22ce;
}

/* Clear / Reset — red warning */
.ui-chip--clear {
    background: #fef2f2;
    color: var(--ui-danger);
    border-color: #fecaca;
}
.ui-chip--clear:hover {
    background: #fee2e2;
    border-color: #f87171;
}

/* Category chip — neutral, orange when active */
.ui-chip--category {
    background: var(--ui-gray-50);
    color: var(--ui-gray-700);
    border-color: var(--ui-gray-200);
}
.ui-chip--category:hover {
    background: var(--ui-gray-100);
    border-color: var(--ui-gray-300);
    color: var(--ui-gray-800);
}
.ui-chip--category.is-active {
    background: var(--ui-brand-primary);
    color: var(--ui-white);
    border-color: var(--ui-brand-primary);
}


/* ─────────────────────────────────────────
   2c. CHIP ACCESSORIES
   ─────────────────────────────────────────
   Count bubbles, icons, separators
*/

.ui-chip__count {
    font-size: var(--ui-font-xs);
    background: var(--ui-gray-100);
    padding: 1px 7px;
    border-radius: 10px;
    color: var(--ui-gray-500);
    font-weight: var(--ui-weight-semibold);
}

.ui-chip--active .ui-chip__count,
.ui-chip.is-active .ui-chip__count {
    background: rgba(255, 255, 255, 0.2);
    color: var(--ui-white);
}

.ui-chip__icon {
    font-size: 14px;
    line-height: 1;
}


/* ─────────────────────────────────────────
   2d. CHIP CONTAINERS
   ─────────────────────────────────────────
   Row wrappers for groups of chips
*/

.ui-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
}

.ui-chips__sep {
    width: 1px;
    height: 24px;
    background: var(--ui-gray-300);
    flex-shrink: 0;
    margin: 0 4px;
}


/* ═════════════════════════════════════════
   3. CONTEXT OVERRIDES
   ═════════════════════════════════════════
   Specific placement adjustments
*/

/* ── Hero overlay: pills need to pop over dark images ── */
.fflp-hero .ui-pill--category {
    background: rgba(255, 255, 255, 0.2);
    color: var(--ui-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ── Directory card: open/closed badge absolute positioned ── */
.fflp-dir-card .ui-pill--open,
.fflp-dir-card .ui-pill--closed {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    z-index: 2;
}

/* ── Discovery badge strip on directory cards ── */
.fflp-dir-card .ui-pills--ranking {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}


/* ═════════════════════════════════════════
   4. ANIMATIONS
   ═════════════════════════════════════════
*/

/* Ranking pills entrance */
@keyframes ui-pill-enter {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ui-pills--ranking .ui-pill--ranking {
    animation: ui-pill-enter 0.3s ease both;
}

.ui-pills--ranking .ui-pill--ranking:nth-child(2) { animation-delay: 0.08s; }
.ui-pills--ranking .ui-pill--ranking:nth-child(3) { animation-delay: 0.16s; }

/* Founding member shimmer */
@keyframes ui-pill-shimmer {
    0%   { filter: brightness(1); }
    100% { filter: brightness(1.1); }
}

.ui-pill--feature.is-founding {
    animation: ui-pill-shimmer 3s ease-in-out infinite alternate;
}


/* ═════════════════════════════════════════
   5. RESPONSIVE
   ═════════════════════════════════════════
*/

@media (max-width: 768px) {
    /* Pills: slightly smaller on mobile */
    .ui-pill {
        font-size: 10px;
        padding: 2px 8px;
    }

    .ui-pill--lg {
        font-size: var(--ui-font-xs);
        padding: var(--ui-pill-py) var(--ui-pill-px);
    }

    /* Chips: scrollable row on mobile */
    .ui-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .ui-chips::-webkit-scrollbar {
        display: none;
    }

    /* Slightly smaller chip padding */
    .ui-chip {
        padding: 6px 14px;
        font-size: 12px;
    }

    /* Ranking tooltips: hide on mobile (too small) */
    .ui-pill--ranking[data-tooltip]::after,
    .ui-pill--ranking[data-tooltip]::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .ui-chip {
        padding: 6px 12px;
        font-size: var(--ui-font-xs);
    }
}


/* ── Old directory filter chips ── */
.fflp-dir-chip                                { display: inline-flex; align-items: center; gap: 5px; padding: var(--ui-chip-py) var(--ui-chip-px); border: 1.5px solid var(--ui-gray-200); border-radius: var(--ui-radius-chip); background: var(--ui-white); color: var(--ui-gray-600); font-size: var(--ui-font-sm); font-weight: var(--ui-weight-medium); white-space: nowrap; cursor: pointer; transition: all var(--ui-transition); text-decoration: none; line-height: 1.2; box-shadow: var(--ui-shadow-sm); }
.fflp-dir-chip:hover                          { border-color: var(--ui-orange); color: var(--ui-orange); background: var(--ui-white); text-decoration: none; }
.fflp-dir-chip--active                        { background: var(--ui-navy) !important; border-color: var(--ui-navy) !important; color: var(--ui-white) !important; box-shadow: var(--ui-shadow-md); }
.fflp-dir-chip__count                         { font-size: var(--ui-font-xs); background: var(--ui-gray-100); padding: 1px 7px; border-radius: 10px; color: var(--ui-gray-500); font-weight: var(--ui-weight-semibold); }
.fflp-dir-chip--active .fflp-dir-chip__count  { background: rgba(255, 255, 255, 0.2); color: var(--ui-white); }