/*
    Odpočet do dopravy zdarma - vše scopované pod .dmrp; barvy přes CSS
    proměnné --dmrp-* (přepisuje nastavení Vzhled nebo vlastní CSS šablony).
    Vzhledy volitelné v administraci: card, line, tint, amount, plain, alert (okno,
    souhrn, detail, pokladna; v souhrnu navíc dmrp--inline); pevně line
    (hlavička) a bar (plovoucí lišta). Stav dosaženo přepíná akcent na zelenou.
*/

.dmrp {
    --dmrp-accent: #2e5ce6;
    --dmrp-accent-soft: #e9eefc;
    --dmrp-accent-line: #b6c6f6;
    --dmrp-good: #178a50;
    --dmrp-good-soft: #e5f3ec;
    --dmrp-good-line: #aed6c2;
    --dmrp-ink: #141a24;
    --dmrp-muted: #69707c;
    --dmrp-line: #e4e7ec;
    --dmrp-bg: #fff;
    --dmrp-track: #e9ecf1;
    --dmrp-radius: 10px;

    /*
        Vzhled nesmí záviset na šabloně (pokyn usera 13. 10. 2026): písmo, velikosti,
        řezy, okraje i vlastnosti ikon jsou nastavené napevno v px a resetované
        na každém prvku bloku - stejný výsledek v Classic, Hummingbird i cizích tématech.
    */
    box-sizing: border-box;
    color: var(--dmrp-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    text-decoration: none;
    margin: 12px 0;
    padding: 0;
    border: 0;
    text-align: left;
}

.dmrp *,
.dmrp *::before,
.dmrp *::after {
    box-sizing: border-box;
}

/* reset prvků bloku - šablony stylují span/small/b/svg globálně */
.dmrp-inner,
.dmrp-ico,
.dmrp-text,
.dmrp-main,
.dmrp-sub,
.dmrp-pct,
.dmrp-bar,
.dmrp-bar > span {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: normal;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    color: inherit;
    float: none;
    opacity: 1;
}

.dmrp b {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    font-style: normal;
    color: inherit;
}

/* skrytý stav musí vyhrát i nad display: grid nových vzhledů (vyšší specificita) */
.dmrp.dmrp--hidden {
    display: none;
}

/*
    Živý blok ze stránky čeká, dokud není jisté, že odpovídá košíku návštěvníka
    (page cache podává HTML cizího/prázdného košíku): drží své místo (žádný
    posun rozložení), jen není vidět. Shodu otisku s cookie odkryje inline skript
    hned za blokem, neshodu obnoví front.js. Bez JS se odkryje sám po 4 s
    (déle než načtení těžkých stránek, aby se špatný obsah neukázal dřív).
*/
.dmrp.dmrp--pending {
    opacity: 0;
    animation: dmrp-reveal .25s ease 4s forwards;
}

@keyframes dmrp-reveal {
    to {
        opacity: 1;
    }
}

/* ikony: obrysové SVG - šablona nesmí přebít výplň, tah ani rozměr */
.dmrp svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.dmrp svg * {
    fill: none;
    stroke: inherit;
}

.dmrp[data-state="reached"] svg {
    stroke-width: 2.4;
}

.dmrp-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dmrp-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dmrp-accent-soft);
    color: var(--dmrp-accent);
    flex: none;
    line-height: 1;
}

.dmrp-text {
    min-width: 0;
    flex: 1;
}

.dmrp-main {
    display: block;
    font-weight: 700;
    font-size: 15px;
}

.dmrp-main b {
    color: var(--dmrp-accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dmrp-sub {
    display: block;
    color: var(--dmrp-muted);
    font-size: 13px;
    margin-top: 1px;
}

.dmrp-sub b {
    font-weight: 600;
    white-space: nowrap;
}

.dmrp-bar {
    position: relative;
    display: block;
    width: auto;
    height: 8px;
    border-radius: 99px;
    background: var(--dmrp-track);
    overflow: hidden;
    margin-top: 10px;
}

.dmrp-bar > span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: 99px;
    background: var(--dmrp-accent);
    transition: width .5s ease;
}

.dmrp-pct {
    font-size: 12.5px;
    color: var(--dmrp-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ===== vzhled KARTA ===== */
.dmrp--card {
    border: 1px solid var(--dmrp-line);
    border-radius: var(--dmrp-radius);
    background: var(--dmrp-bg);
    padding: 14px 16px;
}

/*
    ===== V SOUHRNU KOŠÍKU (pod řádkem Doprava) ===== jen rozložení: blok přes
    celou šířku sloupce bez plovoucího zarovnání šablony. Vzhled (rámeček,
    pozadí, ikona, písmo) zůstává ten zvolený - stejný jako na detailu a v
    náhledu administrace (user 18. 10. 2026: karta v košíku vypadala jinak).
*/
.dmrp--inline {
    margin: 6px 0 10px;
    width: 100%;
    float: none;
}

/* Classic: partial souhrnu kreslí hook do <div><small class="value"> pod řádkem (plovoucí zarovnání) */
#cart-subtotal-shipping > div > small.value,
#cart-subtotal-shipping small.value {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
}

/*
    Hummingbird: hook je UVNITŘ hodnoty řádku Doprava (span.cart-summary__value
    > small.cart-summary__value-inner), řádek je flex bez zalomení - blok by
    stál vedle popisku a přetékal. Obaly se rozpustí (display: contents), řádek
    se zalomí a odpočet dostane vlastní řádek přes celou šířku.
*/
#cart-subtotal-shipping:has(.dmrp--inline) {
    flex-wrap: wrap;
}

#cart-subtotal-shipping .cart-summary__value:has(.dmrp--inline),
#cart-subtotal-shipping .cart-summary__value-inner:has(.dmrp--inline) {
    display: contents;
}

#cart-subtotal-shipping .dmrp--inline {
    flex: 1 1 100%;
    width: 100%;
    white-space: normal;
}

/* ===== vzhled ŘÁDEK (hlavička; volitelně i okno / detail / souhrn / pokladna) ===== */
.dmrp--line {
    margin: 6px 0;
    font-size: 14px;
}

/* řádek mimo hlavičku (detail, okno, souhrn košíku, pokladna) má rámeček a pozadí jako v náhledu administrace */
.dmrp--line:not(.dmrp--place-header) {
    border: 1px solid var(--dmrp-line);
    border-radius: var(--dmrp-radius);
    background: var(--dmrp-bg);
    padding: 10px 14px;
    margin: 12px 0;
}

.dmrp--line .dmrp-inner {
    gap: 8px;
}

.dmrp--line .dmrp-ico {
    width: 26px;
    height: 26px;
}

.dmrp--line .dmrp-ico svg {
    width: 15px;
    height: 15px;
}

.dmrp--line .dmrp-main {
    font-size: 14px;
    font-weight: 600;
}

.dmrp--line .dmrp-sub {
    display: none;
}

.dmrp--line .dmrp-bar {
    height: 4px;
    margin-top: 5px;
}

/*
    ===== vzhledy TÓNOVANÝ / VELKÁ ČÁSTKA / PROSTÝ (podle návrhů Codexu 13. 10. 2026) =====
    Společný základ: ikona bez kolečka, ukazatel pod textem odsazený na šířku ikony
    a procento vpravo od ukazatele. Stejné HTML jako karta - rozložení řeší grid
    s rozpuštěným .dmrp-inner (display: contents). Velikosti napevno v px (Codex
    navrhoval dědit písmo šablony, user 13. 10. chce všude stejný vzhled).
*/
.dmrp--tint,
.dmrp--amount,
.dmrp--plain {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ico text text" "ico bar pct";
    column-gap: 10px;
    align-items: center;
    font-size: 15px;
    line-height: 1.5;
}

.dmrp--tint .dmrp-inner,
.dmrp--amount .dmrp-inner,
.dmrp--plain .dmrp-inner {
    display: contents;
}

.dmrp--tint .dmrp-ico,
.dmrp--amount .dmrp-ico,
.dmrp--plain .dmrp-ico {
    grid-area: ico;
    align-self: start;
    width: auto;
    height: auto;
    margin-top: 3px;
    background: none;
    border-radius: 0;
}

.dmrp--tint .dmrp-ico svg,
.dmrp--amount .dmrp-ico svg,
.dmrp--plain .dmrp-ico svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.6;
}

.dmrp--tint[data-state="reached"] .dmrp-ico svg,
.dmrp--amount[data-state="reached"] .dmrp-ico svg,
.dmrp--plain[data-state="reached"] .dmrp-ico svg {
    stroke-width: 2.2;
}

.dmrp--tint .dmrp-text,
.dmrp--amount .dmrp-text,
.dmrp--plain .dmrp-text {
    grid-area: text;
}

.dmrp--tint .dmrp-main,
.dmrp--amount .dmrp-main,
.dmrp--plain .dmrp-main {
    font-size: 15px;
    font-weight: 400;
}

.dmrp--tint[data-state="reached"] .dmrp-main,
.dmrp--amount[data-state="reached"] .dmrp-main,
.dmrp--plain[data-state="reached"] .dmrp-main {
    font-weight: 600;
}

.dmrp--tint .dmrp-sub,
.dmrp--amount .dmrp-sub,
.dmrp--plain .dmrp-sub {
    font-size: 13px;
    color: var(--dmrp-ink);
    opacity: .8;
    margin-top: 3px;
}

.dmrp--tint .dmrp-bar,
.dmrp--amount .dmrp-bar,
.dmrp--plain .dmrp-bar {
    grid-area: bar;
    height: 4px;
    border-radius: 2px;
    margin-top: 10px;
}

.dmrp--tint .dmrp-pct,
.dmrp--amount .dmrp-pct,
.dmrp--plain .dmrp-pct {
    grid-area: pct;
    margin-top: 10px;
    font-size: 12px;
    color: var(--dmrp-ink);
    opacity: .8;
}

/* Tónovaný: jemný podklad v barvě akcentu, malé zaoblení; dráha ukazatele tmavší, ať na podkladu nezanikne */
.dmrp--tint {
    background: var(--dmrp-accent-soft);
    border-radius: 4px;
    padding: 15px;
}

.dmrp--tint .dmrp-bar {
    background: rgba(0, 0, 0, .09);
}

/* Velká částka: tenký neutrální rámeček, částka na vlastním řádku */
.dmrp--amount {
    border: 1px solid var(--dmrp-line);
    border-radius: 6px;
    background: var(--dmrp-bg);
    padding: 17px;
}

.dmrp--amount .dmrp-main b {
    display: block;
    font-size: 20px;
    line-height: 1.3;
    margin-top: 3px;
}

.dmrp--amount .dmrp-bar,
.dmrp--amount .dmrp-pct {
    margin-top: 15px;
}

/* Prostý: otevřený řádek bez pozadí a rámečku - splyne se souhrnem i detailem */
.dmrp--plain {
    background: none;
    padding: 10px 0;
}

.dmrp--plain .dmrp-bar {
    height: 3px;
}

/*
    ===== vzhled UPOZORNĚNÍ (podle původního dm_remainingprice 3.x: obyčejný
    bootstrap .alert-info) ===== Prostý orámovaný box s jemně tónovaným pozadím,
    bez ikony, tučný hlavní text, druhý řádek pod ním a ukazatel přes celou šířku
    (původní <meter>). Vlastní CSS s předponou, ne třídy šablony.
*/
.dmrp--alert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "text text" "bar pct";
    column-gap: 10px;
    align-items: center;
    background: var(--dmrp-accent-soft);
    border: 1px solid var(--dmrp-accent-line);
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.5;
}

.dmrp--alert .dmrp-inner {
    display: contents;
}

.dmrp--alert .dmrp-ico {
    display: none;
}

.dmrp--alert .dmrp-text {
    grid-area: text;
}

.dmrp--alert .dmrp-main {
    font-size: 15px;
    font-weight: 700;
}

.dmrp--alert .dmrp-sub {
    font-size: 13.5px;
    color: var(--dmrp-ink);
    opacity: .85;
    margin-top: 2px;
}

.dmrp--alert .dmrp-bar {
    grid-area: bar;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .09);
    margin-top: 10px;
}

.dmrp--alert .dmrp-pct {
    grid-area: pct;
    margin-top: 10px;
    font-size: 12px;
    color: var(--dmrp-ink);
    opacity: .8;
}

/* ===== vzhled LIŠTA (fixní přes web) ===== */
.dmrp--bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1040;
    margin: 0;
    background: var(--dmrp-bg);
    border-top: 1px solid var(--dmrp-line);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .08);
    padding: 10px 16px;
}

.dmrp--bar[data-dmrp-bar-pos="bottom"] {
    bottom: 0;
}

.dmrp--bar[data-dmrp-bar-pos="top"] {
    top: 0;
    border-top: 0;
    border-bottom: 1px solid var(--dmrp-line);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}

.dmrp--bar.dmrp--closed {
    display: none;
}

.dmrp--bar .dmrp-inner {
    max-width: 1240px;
    margin: 0 auto;
    gap: 14px;
}

.dmrp--bar .dmrp-text {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.dmrp--bar .dmrp-sub {
    display: none;
}

.dmrp--bar .dmrp-bar {
    flex: 1 1 160px;
    max-width: 360px;
    height: 6px;
    margin: 0;
}

.dmrp-close {
    border: 0;
    background: none;
    color: var(--dmrp-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    flex: none;
}

.dmrp-close:focus {
    outline: none;
    box-shadow: none;
}

.dmrp-close:focus-visible {
    outline: 2px solid var(--dmrp-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== stavy ===== */
.dmrp[data-state="reached"] {
    --dmrp-accent: var(--dmrp-good);
    --dmrp-accent-soft: var(--dmrp-good-soft);
    --dmrp-accent-line: var(--dmrp-good-line);
}

/* ===== mobil ===== */
@media (max-width: 560px) {
    .dmrp-pct {
        display: none;
    }

    .dmrp--bar .dmrp-bar {
        flex-basis: 100%;
        max-width: none;
    }

    .dmrp--bar .dmrp-main {
        font-size: 14px;
    }
}