/**
 * Furor Size Badges — Styles v2.5.0
 */

/* ---- Container שנוצר על ידי PHP filter ---- */
.furor-size-wrap {
    position: relative;
    display: block;
}

/* ---- רצועת המידות — ברירת מחדל (דסקטופ לרוחב) ---- */
.furor-size-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 6px;
    background: transparent;
    position: absolute;
    bottom: 8px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    width: calc(8 * 30px + 7 * 4px + 16px);
    max-width: 96%;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
    direction: ltr;
    max-height: calc(24px + 4px + 24px + 12px);
}

/* hover-only */
.furor-size-badges--hover {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.furor-size-wrap:hover .furor-size-badges--hover,
*:hover > .furor-size-badges--hover {
    opacity: 1;
}

/* דסקטופ לאורך */
.furor-size-badges--desktop-v {
    flex-direction: column;
    flex-wrap: nowrap;
    left: 8px;
    bottom: auto;
    top: 8px;
    transform: none;
    max-width: 36px;
    width: auto;
    padding: 0;
    gap: 3px;
    overflow: visible;
    max-height: none;
}
.furor-size-badges--desktop-v .furor-size-badge {
    min-width: 28px;
    width: 28px;
    height: 26px;
}

/* ---- תג מידה ---- */
.furor-size-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 5px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: relative;
    flex-shrink: 0;
}

/* מידה שאזלה */
.furor-size-badge--oos {
    color: #aaa;
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.07);
}
.furor-size-badge--oos::before,
.furor-size-badge--oos::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78%;
    height: 1.5px;
    background: #d9534f;
    border-radius: 0;
}
.furor-size-badge--oos::before { transform: translate(-50%, -50%) rotate(45deg); }
.furor-size-badge--oos::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ════════════════════════════════════
   מובייל
════════════════════════════════════ */
@media (max-width: 768px) {
    .furor-size-badges {
        opacity: 1 !important;
    }

    /* לאורך: עמודה בצד שמאל של התמונה */
    .furor-size-badges--mobile-v {
        flex-direction: column;
        flex-wrap: nowrap;
        left: 4px;
        right: auto;
        bottom: auto;
        top: 4px;          /* מוצמד לפינה העליונה-שמאלית של imgContainer */
        transform: none;
        max-width: 32px;
        width: 32px;
        padding: 0;
        gap: 3px;
        overflow: visible;
        max-height: 90%;   /* לא יצא מגבולות התמונה */
    }
    .furor-size-badges--mobile-v .furor-size-badge {
        min-width: 28px;
        width: 28px;
        height: 22px;
        font-size: 10px;
        padding: 0;
    }

    /* לרוחב: שורות בתחתית */
    .furor-size-badges--mobile-h {
        flex-direction: row;
        flex-wrap: wrap;
        left: 50%;
        right: auto;
        bottom: 6px;
        top: auto;
        transform: translateX(-50%);
        max-width: 94%;
        width: auto;
        padding: 3px 5px;
        gap: 3px;
        justify-content: center;
        max-height: none;
        overflow: visible;
    }
    .furor-size-badges--mobile-h .furor-size-badge {
        min-width: 22px;
        height: 20px;
        font-size: 10px;
        padding: 0 4px;
        flex-shrink: 0;
    }
}