/* ============================================================
   WVP – frontend.css  v9.0.0
   ============================================================ */

/* ── Wrapper ── */
.wvp-picker {
    margin: 0 0 20px;
    font-family: inherit;
}

/* ── Section label ── */
.wvp-section-label {
    margin: 0 0 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1a1a1a;
    line-height: 1.4;
}

/* ── Pill list ── */
.wvp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: flex-start;
}

.wvp-pill-item {
    margin: 0;
    padding: 0;
}

/* ════════════════════════════════════════════════════════════
   BASE PILL (text-only)
════════════════════════════════════════════════════════════ */
.wvp-pill {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 7px 20px;
    border-radius: 3px;
    border: 1px solid #d0d5dd;
    background: #ffffff;
    color: #344054;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        color        0.18s ease,
        background   0.18s ease,
        outline      0.18s ease,
        box-shadow   0.18s ease;
}

/* ════════════════════════════════════════════════════════════
   PILL WITH THUMBNAIL
════════════════════════════════════════════════════════════ */
.wvp-pill.wvp-pill--with-thumb {
    flex-direction: column;
    padding: 5px 5px 8px;
    min-width: 0;          /* allow shrink to thumb width */
    gap: 0;
    text-align: center;
    align-items: center;
}

/* ── Thumbnail wrapper ──
   Frame border lives HERE on .wvp-pill-thumb-wrap only.
   The pill outer border (.wvp-pill) is a separate ring.
   This means active state changing pill border-width
   does NOT affect the image frame at all.
────────────────────────────────────────────── */
.wvp-pill-thumb-wrap {
    display: block;
    position: relative;
    width: 68px;
    height: 68px;
    overflow: hidden;
    border-radius: 2px;
    background: #f4f4f4;
    flex-shrink: 0;
    /* Frame: off by default, controlled by Elementor selectors */
    border-width: 0;
    border-style: solid;
    border-color: #d0d5dd;
    box-sizing: border-box;
}

/* Actual image */
.wvp-pill-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.26s ease;
}

/* Placeholder when no image */
.wvp-pill-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #999;
    background: #ebebeb;
    text-transform: uppercase;
}

/* ── Active-check badge ── */
.wvp-pill-thumb-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.wvp-picker--show-check .wvp-pill--active .wvp-pill-thumb-check {
    opacity: 1;
}

.wvp-pill-thumb-check svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Variant name ──
   FIX #1: width is constrained to the thumb-wrap width so the
   name wraps within the image column and never stretches wider.
   We achieve this with max-width matching the thumb-wrap width
   (default 68px; overridden by Elementor thumb_size_px selector).
────────────────────────────────────────────── */
.wvp-pill-name {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: inherit;
    margin-top: 6px;
    line-height: 1.3;
    /* Wrap within the image column width */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Align with the image – overridden by JS/Elementor when thumb size changes */
    width: var(--wvp-thumb-size, 68px);
    text-align: center;
}

/* No top-margin when there's no thumb */
.wvp-pill:not(.wvp-pill--with-thumb) .wvp-pill-name {
    margin-top: 0;
    width: auto;
}

/* ════════════════════════════════════════════════════════════
   STATES
════════════════════════════════════════════════════════════ */

/* ── Hover (inactive only) ── */
.wvp-pill:hover:not(.wvp-pill--active) {
    border-color: #1a1a1a;
    color: #1a1a1a;
    text-decoration: none;
}

.wvp-pill:hover:not(.wvp-pill--active) .wvp-pill-thumb {
    transform: scale(1.05);
}

/* ── Active state ──
   FIX #3: border-width NOT changed here – we let the pill border
   stay the same width as inactive pills. Active indicator is
   driven by border-color (and optionally outline via Elementor).
   The image frame (.wvp-pill-thumb-wrap) is untouched by this rule
   so active/inactive frames stay identical.
────────────────────────────────────────────── */
.wvp-pill--active {
    border-color: #1a1a1a;
    /* Keep border-width the same as normal so frame appears equal */
    background: #ffffff;
    color: #1a1a1a;
    font-weight: 700;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    outline: var(--wvp-active-outline-width, 0px) solid var(--wvp-active-outline-color, #1a1a1a);
    outline-offset: var(--wvp-active-outline-offset, 2px);
}

/* ── Focus ring (accessibility) ── */
.wvp-pill:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════
   EDITOR NOTICES
════════════════════════════════════════════════════════════ */
.wvp-editor-notice,
.wvp-editor-placeholder {
    padding: 14px;
    background: #f5f7fb;
    border: 1.5px dashed #c3c4c7;
    border-radius: 6px;
    font-size: 12px;
    color: #555d6b;
    text-align: center;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .wvp-pill:not(.wvp-pill--with-thumb) {
        font-size: 0.7rem;
        padding: 6px 14px;
    }

    .wvp-pills {
        gap: 6px;
    }

    .wvp-pill-thumb-wrap {
        width: 58px;
        height: 58px;
    }

    .wvp-pill.wvp-pill--with-thumb {
        min-width: 0;
        padding: 4px 4px 7px;
    }

    .wvp-pill-name {
        width: var(--wvp-thumb-size, 58px);
    }
}