/**
* Omnibus Price - Lowest price of the last 30 days (EU Directive 2019/2161, art. 6a)
*
* ISC License
*
* Copyright (c) 2026 idnovate.com
* idnovate is a Registered Trademark & Property of idnovate.com, innovación y desarrollo SCP
*
* @author    idnovate
* @copyright 2026 idnovate
* @license   https://www.isc.org/licenses/ https://opensource.org/licenses/ISC ISC License
*
* Everything is scoped under .omnibus-price so nothing leaks into the theme.
*
* The layout follows what shoppers already read on the large marketplaces: the
* saving in red, then the sentence, then the reference price struck through,
* then a small information icon. No box, no panel: it has to look like part of
* the price area, not like a widget bolted onto it.
*/

.omnibus-price {
    position: relative;
    box-sizing: border-box;
    margin: .35rem 0 0;
    font-size: .8125rem;
    line-height: 1.55;
    color: inherit;
    text-align: left;
}

.omnibus-price *,
.omnibus-price *::before,
.omnibus-price *::after {
    box-sizing: inherit;
}

.omnibus-price__row {
    display: block;
    margin: 0;
}

/* The price lines come from a rich text editor, which wraps its content in a
   paragraph. Left alone that would break each line onto its own block and push
   the information icon away from the text it belongs to. */
.omnibus-price__text > p,
.omnibus-price__text > div {
    display: inline;
    margin: 0;
    padding: 0;
}

.omnibus-price__text br {
    display: none;
}

/* The saving, as a filled badge in the red every marketplace uses for it. */
.omnibus-price__discount {
    display: inline-block;
    margin-right: .2rem;
    padding: 0 .4em;
    border-radius: 3px;
    background: #cc0c39;
    color: #fff;
    font-size: .9375em;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 1px;
    white-space: nowrap;
}

/* Reference prices are struck through, like any "before" price. */
.omnibus-price__value,
.omnibus-price__rrp {
    text-decoration: line-through;
    white-space: nowrap;
    opacity: .8;
}

/* A soft green pill, like the "lowest price" flag on comparison sites. */
.omnibus-price__badge {
    display: inline-block;
    margin-left: .4rem;
    padding: .32em .7em;
    border-radius: 999px;
    background: rgba(39, 174, 96, .14);
    color: #1e7e45;
    font-size: .75em;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    text-transform: uppercase;
    vertical-align: 1px;
    white-space: nowrap;
}

/* Information icon ---------------------------------------------------------- */

.omnibus-price__info {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 0 0 0 .25rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 9px;
    font-style: italic;
    line-height: 11px;
    text-align: center;
    vertical-align: 1px;
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s ease;
}

.omnibus-price__info:hover,
.omnibus-price__info:focus,
.omnibus-price__info[aria-expanded="true"] {
    opacity: .9;
}

/* Chart trigger: a discreet "price history" link that reveals the chart. */
.omnibus-price__chart-row {
    margin-top: .35rem;
}

.omnibus-price__chart-trigger {
    position: relative;
    display: inline-block;
}

.omnibus-price__chart-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .8125em;
    line-height: 1.2;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s ease, color .15s ease;
}

.omnibus-price__chart-toggle svg {
    width: 15px;
    height: 13px;
    flex: 0 0 auto;
}

.omnibus-price__chart-label {
    border-bottom: 1px dotted currentColor;
}

.omnibus-price__chart-toggle:hover,
.omnibus-price__chart-toggle:focus,
.omnibus-price__chart-toggle[aria-expanded="true"] {
    color: #4a46e0;
    opacity: 1;
    outline: none;
}

/* Open on hover (mouse) or focus-within (keyboard); JS click also works and is
   what serves touch devices. The trigger keeps :hover while the cursor is over
   the popup, because the popup is nested inside it. */
.omnibus-price__chart-trigger:hover .omnibus-price__popup--chart,
.omnibus-price__chart-trigger:focus-within .omnibus-price__popup--chart {
    display: block;
}

/* Popup --------------------------------------------------------------------- */

.omnibus-price__popup {
    position: absolute;
    z-index: 1000;
    left: 0;
    max-width: 23rem;
    min-width: 14rem;
    margin-top: .25rem;
    padding: .6rem .7rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 6px;
    background: #fff;
    color: #333;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .14);
    font-size: .6875rem;
    line-height: 1.55;
    text-align: left;
    text-decoration: none;
}

.omnibus-price__popup[hidden] {
    display: none;
}

.omnibus-price__popup-text {
    margin: 0 0 .45rem;
    font-size: .6875rem;
}

.omnibus-price__popup-meta {
    margin: 0 0 .45rem;
    opacity: .6;
    font-size: .625rem;
}

.omnibus-price__popup-close {
    padding: .12rem .5rem;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 3px;
    background: transparent;
    color: inherit;
    font-size: .625rem;
    cursor: pointer;
}

/* Chart ---------------------------------------------------------------------
   A small price-history panel: the curve as an area, a dashed guide on the
   legal minimum, and two markers, the window low and the price applying now. */

.omnibus-price__chart {
    margin: 0;
    padding: 0;
}

/* The chart popup is wider than the text popups to fit the graph, and is
   anchored to the trigger rather than to the whole block. */
.omnibus-price__popup--chart {
    left: 0;
    right: auto;
    width: 17rem;
    max-width: 17rem;
    min-width: 15rem;
    margin-top: .3rem;
}

.omnibus-price__chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .15rem;
    padding: 0;
    font-size: .6875rem;
}

.omnibus-price__chart-title {
    font-weight: 600;
    letter-spacing: .01em;
    opacity: .7;
}

.omnibus-price__chart-range {
    opacity: .55;
    white-space: nowrap;
}

.omnibus-price__sparkline {
    display: block;
    width: 100%;
    height: auto;
    max-height: 68px;
    color: #4a46e0;
    overflow: visible;
}

.omnibus-price__sparkline-path {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.omnibus-price__sparkline-guide {
    stroke: rgba(0, 0, 0, .4);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

/* Hoverable points. Normal ones stay discreet; the window low and the current
   price are highlighted. All grow a little on hover or keyboard focus. */
.omnibus-price__sparkline-mark {
    fill: #fff;
    stroke: currentColor;
    stroke-width: 1.5;
    opacity: .8;
    cursor: pointer;
    transition: r .1s ease;
}

.omnibus-price__sparkline-mark--low {
    fill: currentColor;
    opacity: 1;
}

.omnibus-price__sparkline-mark--now {
    fill: #cc0c39;
    stroke: #cc0c39;
    opacity: 1;
}

.omnibus-price__sparkline-mark:hover,
.omnibus-price__sparkline-mark:focus {
    stroke: #fff;
    outline: none;
    r: 4.5;
}

.omnibus-price__chart-scale {
    display: flex;
    justify-content: space-between;
    margin-top: .1rem;
    font-size: .625rem;
    opacity: .5;
}

/* Listings ------------------------------------------------------------------ */

.omnibus-price--listing {
    margin-top: .25rem;
    font-size: .6875rem;
    line-height: 1.4;
    text-align: inherit;
}

/* The saving chip is tighter here so it does not tower over the small text. */
.omnibus-price--listing .omnibus-price__discount {
    padding: 0 .35em;
    font-size: .85em;
}

.omnibus-price--listing .omnibus-price__info {
    width: 11px;
    height: 11px;
    font-size: 8px;
    line-height: 9px;
}

.omnibus-price--listing .omnibus-price__popup {
    text-align: left;
}

/* Chart tooltip: a single element appended to the page body ----------------- */

.omnibus-price__tip {
    position: absolute;
    z-index: 100000;
    padding: 3px 8px;
    border-radius: 4px;
    background: #25334d;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

.omnibus-price__tip[hidden] {
    display: none;
}

/* Accessibility ------------------------------------------------------------- */

.omnibus-price__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 575px) {
    .omnibus-price__popup {
        position: fixed;
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        max-width: none;
        margin-top: 0;
    }
}