/* =============================================================
   Product Stat Bar
   Usage: [product_stat_bar] shortcode
   ============================================================= */

.product-stat-bar {
    display:          flex;
    gap:              1px;
    background-color: var(--neutral-ultra-light, #f2f2f2);
    border-radius:    var(--radius-m, 4px);
    /* Ingen overflow:hidden — den skulle klippa tooltipen. Radien läggs
       i stället på ytterkolumnerna. */
    overflow:         visible;
}

.product-stat-bar__col:first-child {
    border-start-start-radius: var(--radius-m, 4px);
    border-end-start-radius:   var(--radius-m, 4px);
}
.product-stat-bar__col:last-child {
    border-start-end-radius: var(--radius-m, 4px);
    border-end-end-radius:   var(--radius-m, 4px);
}

.product-stat-bar__col {
    flex:             1;
    display:          flex;
    flex-direction:   column;
    gap:              0.25rem;
    padding:          var(--space-m);
    background-color: var(--neutral-ultra-light, #f2f2f2);
}

/* Dividers between columns via gap + background on parent */
.product-stat-bar__col + .product-stat-bar__col {
    border-left: 1px solid var(--neutral-light, #d9d9d9);
}

.product-stat-bar__label {
    text-transform: uppercase;
    display:     block;
    font-size:   var(--text-xs, 0.8rem);
    font-weight: 600;
    letter-spacing: 1px;
    color:       var(--color-neutral, #666);
    line-height: 1.3;
}

.product-stat-bar__value {
    display:     block;
    font-weight: 700;
    color:       var(--text-dark, #000);
    line-height: 1.2;
}

strong.product-stat-bar__value {
    text-transform: uppercase;
    font-family: var(--font-condensed) !important;
    font-weight: 700;
}

.product-stat-bar__unit {
    font-size:   0.75em;
    font-weight: 400;
}

@media (max-width: 767px) {
    strong.product-stat-bar__value {
        font-size: var(--h4);
    }
}

@media (max-width: 480px) {
    .product-stat-bar {
        flex-direction: column;
        gap:            1px;
    }
    .product-stat-bar__col + .product-stat-bar__col {
        border-left: none;
        border-top:  1px solid var(--neutral-light, #d9d9d9);
    }
    .product-stat-bar__col:first-child {
        border-radius: var(--radius-m, 4px) var(--radius-m, 4px) 0 0;
    }
    .product-stat-bar__col:last-child {
        border-radius: 0 0 var(--radius-m, 4px) var(--radius-m, 4px);
    }
}

/* =============================================================
   Info-ikon + tooltip
   Ersätter fotnotsraderna under stapeln: varje kolumn får en
   ikon uppe till höger som visar sin fotnot i en tooltip.

   Öppnas på klick (JS sätter .is-open) och på hover/tangentbord
   (ren CSS). Tooltipen högerställs mot ikonen så att den alltid
   växer inåt över kortet — aldrig ut ur vyn på högerkolumnen.
   ============================================================= */

.product-stat-bar {
    /* Transitions.dev — tooltip open/close */
    --tt-in-dur:   150ms;
    --tt-out-dur:  50ms;
    --tt-scale:    0.98;
    --tt-delay:    80ms;
    --tt-in-ease:  ease-out;
    --tt-out-ease: ease-out;
    --tt-bg:       var(--text-dark, #222);
    --tt-fg:       var(--white, #f0f0f0);
    /* Ikonspråket: Info-ikonen i textens sekundärfärg, ingen färgad cirkel bakom. */
    --psb-info-fg:       var(--text-dark-muted, #595959);
    --psb-info-fg-hover: var(--text-dark, #111);
}

/* Rubrikrad. Ikonen är utlyft ur flödet och sitter i kortets hörn, så
   raden håller bara etiketten — men behöver hålla sig undan ikonen. */
.product-stat-bar__head {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             var(--space-xs, 0.5rem);
    padding-right:   2.4rem;
}

.product-stat-bar__head .product-stat-bar__label {
    min-width: 0;
}

/* --- Ikonen ------------------------------------------------- */

/* Tooltipen förankras mot KORTET, inte mot ikonen: ikonen är bara 22px
   bred, så en högerställd tooltip på vänsterkolumnen sköt ut ur vyn.
   Kortet ger en förutsägbar referens och tre lägen som alltid håller sig
   innanför stapeln. */
.product-stat-bar__col {
    position: relative;
}
.product-stat-bar__col:has(.product-stat-bar__info.is-open),
.product-stat-bar__col:hover {
    z-index: 5;
}

.product-stat-bar__info {
    position:  static;
    display:   inline-block;
    flex:      0 0 auto;
    /* Lyft ikonen i linje med etikettens versaler */
}

.product-stat-bar__info-btn {
    /* Uppe i kortets högra hörn, innanför kortets padding.
       Kortet är position:relative sedan tidigare (tooltipens referens). */
    position:        absolute;
    top:             1.2rem;
    right:           1.2rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           1.8rem;
    height:          1.8rem;
    padding:         0;
    border:          0;
    background:      none;
    color:           var(--psb-info-fg);
    cursor:          pointer;
    line-height:     1;
    transition:      color 120ms ease-out;
    -webkit-appearance: none;
    appearance:      none;
}

.product-stat-bar__info-btn svg {
    display: block;
    width:  1.6rem;
    height: 1.6rem;
}

.product-stat-bar__info-btn:hover,
.product-stat-bar__info-btn:focus-visible,
.product-stat-bar__info.is-open .product-stat-bar__info-btn {
    color: var(--psb-info-fg-hover);
}

.product-stat-bar__info-btn:focus-visible {
    outline:        2px solid var(--primary, #ffcd00);
    outline-offset: 2px;
}

/* --- Tooltipen ---------------------------------------------- */

.product-stat-bar__tip {
    position:      absolute;
    bottom:        calc(100% + 8px);
    z-index:       20;
    width:         max-content;
    max-width:     min(260px, 70vw);
    transform:     scale(var(--tt-scale));
    padding:       0.8rem 1.2rem;
    border-radius: var(--radius-m, 8px);
    background:    var(--tt-bg);
    color:         var(--tt-fg);
    /* Fotnoterna är hela meningar — måste få radbrytas */
    white-space:   normal;
    text-transform: none;
    letter-spacing: normal;
    font-size:     var(--text-xs, 0.8rem);
    font-weight:   400;
    line-height:   1.4;
    text-align:    left;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 2px 6px 0 rgba(0, 0, 0, 0.05),
        0 4px 42px 0 rgba(0, 0, 0, 0.06);
    opacity:        0;
    pointer-events: none;
    /* Grundregeln styr STÄNGNINGEN. transition-delay lämnas osatt
       så att den spelas direkt när man lämnar. */
    transition:
        opacity   var(--tt-out-dur) var(--tt-out-ease),
        transform var(--tt-out-dur) var(--tt-out-ease);
}

/* Sidoläge per kolumn — vänster kant, mitten, höger kant. Med tre lika
   breda kolumner räcker det, och det klarar sig utan JS-positionering. */
.product-stat-bar__col:first-child .product-stat-bar__tip {
    left:  0;
    right: auto;
    transform-origin: 0 100%;
}
.product-stat-bar__col:last-child .product-stat-bar__tip {
    left:  auto;
    right: 0;
    transform-origin: 100% 100%;
}
.product-stat-bar__col:not(:first-child):not(:last-child) .product-stat-bar__tip {
    left:      50%;
    right:     auto;
    margin-inline-start: -130px;   /* halva max-bredden */
    transform-origin: 50% 100%;
}

/* Fördröjningen hör BARA till öppningsregeln. */
.product-stat-bar__info-btn:hover + .product-stat-bar__tip,
.product-stat-bar__info-btn:focus-visible + .product-stat-bar__tip,
.product-stat-bar__info.is-open .product-stat-bar__tip {
    opacity:                   1;
    transform:                 scale(1);
    pointer-events:            auto;
    transition-duration:       var(--tt-in-dur);
    transition-timing-function: var(--tt-in-ease);
    transition-delay:          var(--tt-delay);
}

/* Klick är den enda öppnaren på pekskärm — hover finns inte där */
@media (hover: none) {
    .product-stat-bar__info-btn:hover + .product-stat-bar__tip {
        opacity:        0;
        pointer-events: none;
    }
    .product-stat-bar__info.is-open .product-stat-bar__tip {
        opacity:        1;
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-stat-bar__tip { transition: none !important; }
}

/* =============================================================
   Stapelläge — [product_stat_bar layout="stack"]
   Produktbladets ordning (design 02B): raderna under varandra med
   hårlinje emellan, stort värde i rubriktypsnittet, ev. andra enhet
   som liten rad under, och fotnoterna som text under stapeln i
   stället för tooltips. Ingen bakgrund — stapeln står på sidans vita.
   ============================================================= */

.product-stat-bar--stack {
    flex-direction: column;
    gap:            0;
    background:     none;
    border-radius:  0;
}

.product-stat-bar--stack .product-stat-bar__col,
.product-stat-bar--stack .product-stat-bar__col:first-child,
.product-stat-bar--stack .product-stat-bar__col:last-child {
    gap:           0;
    padding:       var(--space-s) 0;
    background:    none;
    border-radius: 0;
    border-left:   0;
    border-top:    0;
    border-bottom: 1px solid var(--neutral-light, #d9d9d9);
}

.product-stat-bar--stack .product-stat-bar__col + .product-stat-bar__col {
    border-left: 0;
    border-top:  0;
}

.product-stat-bar--stack .product-stat-bar__head {
    padding-right: 0;
    margin-bottom: 0.4rem;
}

.product-stat-bar--stack strong.product-stat-bar__value {
    font-size:   var(--h3);
    line-height: 1;
}

.product-stat-bar--stack .product-stat-bar__value-alt {
    display:     block;
    margin-top:  0.4rem;
    font-size:   var(--text-xs, 0.8rem);
    font-weight: 400;
    color:       var(--color-neutral, #666);
}

.product-stat-bar__footnotes {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    margin-top:     var(--space-xs);
    font-size:      var(--text-xs, 0.8rem);
    line-height:    1.5;
    color:          var(--text-dark-muted, #666);
}

/* =============================================================
   Liggande läge — [product_stat_bar layout="row"]
   Stapelns utseende (transparent, stort värde, andra enhet under)
   men kolumnerna sida vid sida med hårlinjer emellan. Fotnoterna
   sitter bakom info-ikonen som i bar-läget.
   ============================================================= */

.product-stat-bar--row {
    gap:           0;
    background:    none;
    border-radius: 0;
}

.product-stat-bar--row .product-stat-bar__col,
.product-stat-bar--row .product-stat-bar__col:first-child,
.product-stat-bar--row .product-stat-bar__col:last-child {
    gap:           0;
    padding:       var(--space-xs) var(--space-s) var(--space-xs) 0;
    background:    none;
    border-radius: 0;
    border-left:   0;
}

.product-stat-bar--row .product-stat-bar__col + .product-stat-bar__col {
    padding-left: var(--space-s);
    border-left:  1px solid var(--neutral-light, #d9d9d9);
}

.product-stat-bar--row .product-stat-bar__head {
    margin-bottom: 0.4rem;
    padding-right: 2.2rem;
}

.product-stat-bar--row strong.product-stat-bar__value {
    font-size:   var(--h4);
    line-height: 1;
}

.product-stat-bar--row .product-stat-bar__value-alt {
    display:     block;
    margin-top:  0.4rem;
    font-size:   var(--text-xs, 0.8rem);
    font-weight: 400;
    color:       var(--color-neutral, #666);
}

/* Ikonen sitter i kolumnens hörn; kolumnen har mindre padding än i baren. */
.product-stat-bar--row .product-stat-bar__info-btn {
    top:    var(--space-xs);
    right:  var(--space-s);
    width:  1.6rem;
    height: 1.6rem;
}
.product-stat-bar--row .product-stat-bar__col:last-child .product-stat-bar__info-btn {
    right: 0;
}

/* Under 480 px ryms inte tre kolumner (uppmätt: 430 px bred rad på 390 px
   viewport). Raden staplas som baren gör, med hårlinje ovanför i stället för
   till vänster. Regeln måste stå här eftersom radens egna kolumnregel ovan
   väger tyngre än basens mediaregel. */
@media (max-width: 480px) {
    .product-stat-bar--row { flex-direction: column; }
    .product-stat-bar--row .product-stat-bar__col + .product-stat-bar__col {
        padding-left: 0;
        border-left: 0;
        border-top:  1px solid var(--neutral-light, #d9d9d9);
    }
    .product-stat-bar--row .product-stat-bar__col:last-child .product-stat-bar__info-btn {
        right: var(--space-s);
    }
}