/* =====================================================================
   Pizza Otaslavice - objednavkovy system (zakaznicka cast)
   Navazuje na stavajici vizual webu: oranzova #fd9d3e, tmava #121619.
   ===================================================================== */

:root {
    --po-orange: #fd9d3e;
    --po-orange-dark: #e8892b;
    --po-dark: #121619;
    --po-panel: #1b2026;
    --po-panel-light: #262c33;
    --po-border: #343b44;
    --po-text: #ffffff;
    --po-muted: #9aa3ad;
    --po-green: #4caf50;
    --po-red: #e05252;
}

/* ---------------------------------------------------------------------
   Informacni banner (dovolena, zavreno)
   --------------------------------------------------------------------- */
.po-banner {
    display: none;
    background: var(--po-orange);
    color: #1d1d1d;
    text-align: center;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.45;
}
.po-banner.is-visible { display: block; }
.po-banner--closed { background: #c0392b; color: #fff; }

/* ---------------------------------------------------------------------
   Stav menu (nacitani / chyba)
   --------------------------------------------------------------------- */
.po-menu-state {
    width: 100%;
    text-align: center;
    color: var(--po-muted);
    padding: 50px 20px;
    font-size: 16px;
}
.po-menu-state .po-retry {
    display: inline-block;
    margin-top: 14px;
    background: var(--po-orange);
    color: #1d1d1d;
    border: 0;
    border-radius: 40px;
    padding: 10px 24px;
    font-weight: 700;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Karticka menu - doplnky ke stavajicimu vzhledu
   --------------------------------------------------------------------- */
.po-card { position: relative; cursor: pointer; }
.po-card .menu-img,
.po-card .menu-title { cursor: pointer; }
.po-card .menu-image,
.po-card .menu-image-drink { cursor: pointer; }

.po-card-add {
    display: inline-block;
    margin-top: 14px;
    background: transparent;
    color: var(--po-orange);
    border: 2px solid var(--po-orange);
    border-radius: 40px;
    padding: 7px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .25s ease;
}
.po-card:hover .po-card-add,
.po-card-add:hover {
    background: var(--po-orange);
    color: #1d1d1d;
}
.po-card-note {
    display: block;
    font-size: 12px;
    color: var(--po-muted);
    padding-top: 6px;
}
.po-menu-footnote {
    width: 100%;
    color: var(--po-muted);
    font-size: 14px;
    padding-top: 45px;
    line-height: 1.7;
}

/* ---------------------------------------------------------------------
   Modalni okno detailu polozky
   --------------------------------------------------------------------- */
.po-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .78);
    z-index: 20000;
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 12px;
}
.po-modal.is-open { display: block; }

.po-modal-dialog {
    background: var(--po-panel);
    color: var(--po-text);
    max-width: 680px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

/* křížek musí sedět opticky uprostřed kruhu, proto flex centrování
   místo line-height (to glyf × posouvalo nahoru) */
.po-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
}
.po-modal-close:hover { background: var(--po-orange); color: #1d1d1d; }

.po-modal-hero {
    position: relative;
    background: #0d1013;
    text-align: center;
    padding: 24px;
}
.po-modal-hero img {
    max-width: 280px;
    width: 100%;
    height: auto;
}
.po-modal-flag {
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
}

.po-modal-body { padding: 22px 24px 24px; }

.po-modal-title {
    font-size: 24px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
    line-height: 1.25;
}
.po-modal-desc {
    color: var(--po-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 10px;
}
.po-modal-allergens {
    font-size: 13px;
    color: var(--po-muted);
    margin: 0 0 16px;
}
.po-modal-allergens a { color: var(--po-orange); }
.po-modal-baseprice {
    font-size: 20px;
    color: var(--po-orange);
    font-weight: 700;
    margin-bottom: 18px;
}

.po-section-title {
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 22px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--po-border);
}

/* seznam pridavnych ingredienci */
.po-toppings {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -6px;
    padding: 0 6px;
}
.po-topping {
    display: block;
    position: relative;
    padding: 11px 92px 11px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    cursor: pointer;
    font-size: 15px;
    color: #dfe4ea;
    margin: 0;
}
.po-topping:last-child { border-bottom: 0; }
.po-topping input {
    position: absolute;
    left: 0;
    top: 13px;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: #fd9d3e;
}
.po-topping-weight {
    color: var(--po-muted);
    font-size: 13px;
    padding-left: 6px;
}
.po-topping-price {
    position: absolute;
    right: 0;
    top: 11px;
    color: var(--po-orange);
    font-weight: 700;
    font-size: 15px;
}
.po-topping.is-checked { color: #fff; }

/* Dvojitá porce ingredience. Tlačítko se ukáže až po zaškrtnutí, aby
   seznam nebyl plný ovládání, které zatím nic nedělá. */
.po-topping-row { display: flex; align-items: flex-start; }
.po-topping-row .po-topping { flex: 1 1 auto; min-width: 0; }
.po-topping-row:last-child .po-topping { border-bottom: 0; }

.po-topping-double {
    flex: 0 0 auto;
    align-self: center;
    margin-left: 8px;
    min-width: 46px;
    min-height: 42px;              /* dotyková plocha i na malém telefonu */
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    background: transparent;
    color: #dfe4ea;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.po-topping-double[hidden] { display: none; }
.po-topping-double.is-on {
    background: var(--po-orange);
    border-color: var(--po-orange);
    color: #1d1f23;
}

/* Popisek dvojité porce podle šířky displeje (17. iterace). Výchozí je
   telefon, kde se vedle názvu ingredience a ceny vejde jen „2×";
   od tabletu nahoru se vypisuje celé znění, protože zkratka mátla. */
.po-dbl-long { display: none; }
@media (min-width: 768px) {
    .po-topping-double { min-width: 128px; padding: 0 10px; }
    .po-dbl-short { display: none; }
    .po-dbl-long { display: inline; }
}

/* ---------------------------------------------------------------------
   Volba „Mix" (17. iterace)
   Jen u položek, kde ji pizzerie zapnula. Stojí nad nadpisem
   „Vylepšit pizzu", aby ji zákazník viděl dřív než seznam ingrediencí.
   --------------------------------------------------------------------- */
.po-mix-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.po-mix {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 44px;              /* dotyková plocha i na malém telefonu */
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    background: transparent;
    color: #dfe4ea;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.po-mix.is-on {
    background: var(--po-orange);
    border-color: var(--po-orange);
    color: #1d1f23;
}
.po-mix-note {
    flex: 1 1 140px;
    min-width: 0;
    color: var(--po-muted);
    font-size: 13px;
}

/* poznamka */
.po-field { margin-top: 6px; }
.po-field label {
    display: block;
    font-size: 13px;
    color: var(--po-muted);
    margin-bottom: 6px;
}
.po-input,
.po-textarea,
.po-select {
    width: 100%;
    background: var(--po-panel-light);
    border: 1px solid var(--po-border);
    border-radius: 4px;
    color: #fff;
    padding: 11px 12px;
    font-size: 15px;
    font-family: inherit;
}
.po-textarea { min-height: 72px; resize: vertical; }
.po-input:focus,
.po-textarea:focus,
.po-select:focus {
    outline: none;
    border-color: var(--po-orange);
}
.po-input::placeholder,
.po-textarea::placeholder { color: #6d7681; }

/* množství — tlačítka + a − svisle vycentrovaná vůči boxu */
.po-qty {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: stretch;
    align-items: stretch;
    border: 1px solid var(--po-border);
    border-radius: 40px;
    overflow: hidden;
    background: var(--po-panel-light);
    vertical-align: middle;
    height: 44px;
}
.po-qty button {
    width: 42px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--po-orange);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
}
.po-qty button:disabled { color: #555c65; cursor: default; }
.po-qty span {
    width: 44px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.po-modal-foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--po-border);
}
.po-modal-foot .po-qty { margin-right: 12px; }

.po-btn {
    display: inline-block;
    background: var(--po-orange);
    color: #1d1d1d;
    border: 0;
    border-radius: 40px;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    transition: background .25s ease;
    font-family: inherit;
}
.po-btn:hover { background: var(--po-orange-dark); color: #1d1d1d; text-decoration: none; }
.po-btn:disabled { background: #4a5058; color: #8d949c; cursor: not-allowed; }
.po-btn--block { display: block; width: 100%; }
.po-btn--ghost {
    background: transparent;
    border: 2px solid var(--po-border);
    color: #cfd5dc;
}
.po-btn--ghost:hover { border-color: var(--po-orange); background: transparent; color: var(--po-orange); }

.po-add-btn { min-width: 230px; }
@media (max-width: 575px) {
    /* Počítadlo kusů zůstává i na mobilu vodorovné. Dřív tu bylo
       display:block, což z tlačítek udělalo bloky pod sebou - v pilulce
       s overflow:hidden pak byla vidět jen část znaménka minus. */
    .po-modal-foot .po-qty {
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        margin: 0 0 14px;
        height: 52px;
    }
    /* dotyková plocha nejméně 44 x 44 px */
    .po-modal-foot .po-qty button {
        -ms-flex: 0 0 72px;
        flex: 0 0 72px;
        width: 72px;
        font-size: 27px;
    }
    .po-modal-foot .po-qty span {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: auto;
        min-width: 44px;
        font-size: 19px;
    }

    .po-add-btn { display: block; width: 100%; }
    .po-modal-body { padding: 18px 16px 22px; }
    .po-modal-title { font-size: 20px; }
}

/* ---------------------------------------------------------------------
   Animace upozorneni na pridani do kosiku
   --------------------------------------------------------------------- */
@keyframes po-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

/* ---------------------------------------------------------------------
   Plovouci tlacitko kosiku vpravo dole
   Objevi se, az kdyz je v kosiku alespon jedna polozka.
   --------------------------------------------------------------------- */
.po-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    /* respekt k gestové liště a zaobleným rohům telefonů */
    right: calc(18px + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 18000;

    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: 54px;
    padding: 8px 20px 8px 16px;
    border: 0;
    border-radius: 32px;
    background: var(--po-orange);
    color: #1d1d1d;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);

    /* skryté tlačítko nesmí brát kliknutí */
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.po-fab.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.po-fab:hover { background: var(--po-orange-dark); }

.po-fab-glyph {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 11px;
}
.po-fab-glyph svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #1d1d1d;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.po-fab-text { text-align: left; line-height: 1.2; }
.po-fab-word {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.po-fab-sum { display: block; font-size: 13px; font-weight: 600; }

.po-fab-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 14px;
    background: var(--po-dark);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

@media (max-width: 575px) {
    .po-fab {
        right: 14px;
        bottom: 14px;
        right: calc(14px + env(safe-area-inset-right));
        bottom: calc(14px + env(safe-area-inset-bottom));
        padding: 8px 17px 8px 14px;
    }
}

/* při otevřeném košíku nemá tlačítko smysl */
.po-fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(18px); }

/* Šipka „nahoru“ ze šablony sedí ve stejném rohu. Jakmile je v košíku
   položka, uhne nad plovoucí tlačítko, aby se nepřekrývaly. */
body.po-has-fab .top-scrolling {
    bottom: 86px;
    bottom: calc(86px + env(safe-area-inset-bottom));
}
@media (max-width: 575px) {
    body.po-has-fab .top-scrolling {
        bottom: 78px;
        bottom: calc(78px + env(safe-area-inset-bottom));
    }
}

/* ---------------------------------------------------------------------
   Vysouvaci panel kosiku
   --------------------------------------------------------------------- */
.po-drawer-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 19000;
    display: none;
}
.po-drawer-backdrop.is-open { display: block; }

.po-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 92%;
    background: var(--po-panel);
    z-index: 19500;
    transform: translateX(105%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .4);
}
.po-drawer.is-open { transform: translateX(0); }

.po-drawer-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--po-border);
    position: relative;
    flex: 0 0 auto;
}
.po-drawer-head h3 {
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
.po-drawer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
}
.po-drawer-close:hover { color: var(--po-orange); }

.po-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px;
}
.po-drawer-foot {
    flex: 0 0 auto;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--po-border);
    background: #161b20;
}

.po-cart-empty {
    color: var(--po-muted);
    text-align: center;
    padding: 50px 10px;
    font-size: 15px;
}

.po-cart-line {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    position: relative;
}
.po-cart-line-name {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding-right: 30px;
    line-height: 1.35;
}
.po-cart-line-extra {
    color: var(--po-muted);
    font-size: 13px;
    padding-top: 5px;
    line-height: 1.5;
}
.po-cart-line-note { color: var(--po-orange); }
.po-cart-line-bottom {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.po-cart-line-price {
    color: var(--po-orange);
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
}
.po-cart-remove {
    position: absolute;
    top: 12px;
    right: 0;
    border: 0;
    background: transparent;
    color: #6d7681;
    font-size: 19px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
}
.po-cart-remove:hover { color: var(--po-red); }

.po-cart-qty { display: inline-block; }
.po-cart-qty button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--po-border);
    background: var(--po-panel-light);
    color: var(--po-orange);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    vertical-align: middle;
    padding: 0;
}
.po-cart-qty span {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    vertical-align: middle;
}

/* na telefonu i v košíku dotyková plocha nejméně 44 x 44 px */
@media (max-width: 575px) {
    .po-cart-qty button { width: 44px; height: 44px; font-size: 20px; }
    .po-cart-qty span { min-width: 42px; font-size: 17px; }
}

.po-sum-row {
    display: flex;
    justify-content: space-between;
    color: var(--po-muted);
    font-size: 14px;
    padding: 4px 0;
}
.po-sum-row--total {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    border-top: 1px solid var(--po-border);
    margin-top: 8px;
    padding-top: 10px;
}
.po-sum-row--total span:last-child { color: var(--po-orange); }
.po-drawer-hint {
    color: var(--po-muted);
    font-size: 12px;
    text-align: center;
    padding-top: 10px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Toast
   --------------------------------------------------------------------- */
.po-toast {
    position: fixed;
    left: 50%;
    bottom: 92px;
    transform: translateX(-50%) translateY(20px);
    background: #1d1d1d;
    color: #fff;
    border-left: 4px solid var(--po-green);
    padding: 13px 20px;
    border-radius: 4px;
    font-size: 15px;
    z-index: 21000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    max-width: 90%;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
}
.po-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.po-toast--error { border-left-color: var(--po-red); }

/* ---------------------------------------------------------------------
   Stranka objednavky (checkout)
   --------------------------------------------------------------------- */
.po-checkout { background: var(--po-dark); padding: 60px 0 90px; }
.po-checkout .container { position: relative; }

.po-checkout-grid { display: block; }
@media (min-width: 992px) {
    .po-checkout-grid {
        display: flex;
        align-items: flex-start;
    }
    .po-checkout-main { flex: 1 1 auto; padding-right: 34px; min-width: 0; }
    .po-checkout-side { flex: 0 0 360px; width: 360px; position: sticky; top: 20px; }
}

.po-box {
    background: var(--po-panel);
    border: 1px solid var(--po-border);
    border-radius: 8px;
    padding: 22px;
    margin-bottom: 22px;
}
.po-box h3 {
    color: #fff;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 18px;
}
.po-box h3 .po-step {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 50%;
    background: var(--po-orange);
    color: #1d1d1d;
    text-align: center;
    font-size: 14px;
    margin-right: 10px;
}

/* prepinac rozvoz / vyzvednuti */
.po-switch { display: flex; }
.po-switch label {
    flex: 1 1 50%;
    text-align: center;
    padding: 14px 8px;
    border: 2px solid var(--po-border);
    color: #cfd5dc;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    position: relative;
}
.po-switch label:first-child { border-radius: 6px 0 0 6px; }
.po-switch label:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.po-switch input { position: absolute; opacity: 0; pointer-events: none; }
.po-switch label.is-active {
    background: var(--po-orange);
    border-color: var(--po-orange);
    color: #1d1d1d;
}

/* vyber casu */
.po-timemode { margin-bottom: 14px; }
.po-radio {
    display: block;
    position: relative;
    padding: 11px 0 11px 32px;
    color: #dfe4ea;
    font-size: 15px;
    cursor: pointer;
    margin: 0;
}
.po-radio input {
    position: absolute;
    left: 0;
    top: 13px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #fd9d3e;
}
.po-radio small { display: block; color: var(--po-muted); font-size: 13px; padding-top: 3px; }

.po-row { display: block; }
@media (min-width: 576px) {
    .po-row { display: flex; margin: 0 -8px; }
    .po-row > .po-col { flex: 1 1 50%; padding: 0 8px; min-width: 0; }
}
.po-field + .po-field { margin-top: 14px; }
.po-field .po-req { color: var(--po-orange); }

.po-error-text {
    color: #ff8f8f;
    font-size: 13px;
    margin-top: 6px;
    display: none;
}
.po-field.has-error .po-input,
.po-field.has-error .po-select,
.po-field.has-error .po-textarea { border-color: var(--po-red); }
.po-field.has-error .po-error-text { display: block; }

/* PSČ v rekapitulaci adresy. Od 8. iterace bylo světlejší jako vedlejší
   údaj, ve 14. se vrátilo k barvě zbytku adresy — na potvrzovací stránce
   si zákazník adresu kontroluje a ztlumené PSČ působilo, jako by k ní
   tak úplně nepatřilo. */
.po-psc { color: inherit; }

/* vysvětlení u dočasně vypnutého způsobu platby */
.po-pay-off {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--po-muted);
}

.po-alert {
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 18px;
    display: none;
}
.po-alert.is-visible { display: block; }
.po-alert--warn { background: rgba(253, 157, 62, .14); border: 1px solid var(--po-orange); color: #ffce9a; }
.po-alert--error { background: rgba(224, 82, 82, .14); border: 1px solid var(--po-red); color: #ffb4b4; }
.po-alert--info { background: rgba(76, 175, 80, .12); border: 1px solid var(--po-green); color: #b6e8b8; }

.po-check {
    display: block;
    position: relative;
    padding: 8px 0 8px 32px;
    color: #dfe4ea;
    font-size: 14px;
    line-height: 1.55;
    cursor: pointer;
    margin: 0;
}
.po-check input {
    position: absolute;
    left: 0;
    top: 10px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #fd9d3e;
}
.po-check a { color: var(--po-orange); text-decoration: underline; }

/* souhrn objednavky */
.po-summary-line {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 14px;
    color: #dfe4ea;
}
.po-summary-line .po-summary-top {
    display: flex;
    justify-content: space-between;
}
.po-summary-line strong { color: #fff; }
.po-summary-line em {
    display: block;
    font-style: normal;
    color: var(--po-muted);
    font-size: 13px;
    padding-top: 4px;
}
.po-summary-price { color: var(--po-orange); white-space: nowrap; padding-left: 10px; }

.po-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.po-page-title {
    text-align: center;
    padding-bottom: 34px;
}
.po-page-title h1 {
    color: #fff;
    font-size: 44px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}
.po-page-title p { color: var(--po-orange); font-size: 26px; font-family: 'Pacifico', cursive; margin: 0 0 4px; }
@media (max-width: 575px) {
    .po-page-title h1 { font-size: 30px; }
    .po-page-title p { font-size: 20px; }
    .po-box { padding: 18px 16px; }
    .po-checkout { padding: 36px 0 70px; }
}

/* =====================================================================
   2. iterace úprav
   ===================================================================== */

/* ---------------------------------------------------------------------
   Přilepené (sticky) hlavní menu
   Původní styl měl hlavičku absolutně nad bannerem, což schovávalo
   informační panel pod ní. Sticky ji nechá v toku, takže se nic nepřekrývá.
   --------------------------------------------------------------------- */
header#header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--po-dark);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* ---------------------------------------------------------------------
   Informační lišta přilepená hned pod hlavním menu
   Odsazení se rovná výšce menu; tu měří JavaScript a ukládá do
   --po-header-h, protože se liší podle šířky okna.
   --------------------------------------------------------------------- */
.po-banner.is-visible {
    position: -webkit-sticky;
    position: sticky;
    top: var(--po-header-h, 85px);
    z-index: 900;
}

/* Obě lišty zůstávají v toku stránky, obsah se tedy neposouvá pod ně.
   Cíl skoku na kotvu ale musí počítat s jejich součtem. */
#menu-m,
#rozvoz,
#header,
.po-anchor {
    scroll-margin-top: 90px;
    scroll-margin-top: calc(var(--po-header-h, 85px) + var(--po-banner-h, 0px) + 10px);
}

/* podstránky měly odsazení počítané s hlavičkou plovoucí přes banner */
.page-banner { padding-top: 95px; }
@media (max-width: 767px) {
    .page-banner { padding-top: 60px; }

    /* Na telefonu je lišta kompaktní: menší písmo, jeden řádek s
       výpustkou. Klepnutím se rozbalí celý text. */
    .po-banner {
        font-size: 13px;
        padding: 8px 14px;
        line-height: 1.4;
        cursor: pointer;
    }
    .po-banner .po-banner-text {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .po-banner.is-expanded .po-banner-text {
        white-space: normal;
        overflow: visible;
    }
}

/* ---------------------------------------------------------------------
   Košík v hlavičce
   --------------------------------------------------------------------- */
.header-right-link ul li.po-cart-link { display: block; }
.header-right-link ul li.po-cart-link > a {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    /* stejná výška jako u adresy a telefonu vedle, aby střed seděl na řádek */
    min-height: 44px;
}
.po-cart-glyph {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}
.po-cart-glyph svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .25s ease;
}
.header-right-link ul li.po-cart-link > a:hover .po-cart-glyph svg { stroke: var(--po-orange); }

.po-cart-badge {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 12px;
    background: var(--po-orange);
    color: #1d1d1d;
    font-size: 12px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    display: none;
}
.po-cart-badge.is-visible { display: block; }
.po-cart-link.is-bumped .po-cart-badge { animation: po-bump .45s ease; }

.po-cart-word {
    color: #fff;
    font-size: 16px;
    padding-right: 9px;
    white-space: nowrap;
    transition: color .25s ease;
}
.header-right-link ul li.po-cart-link > a:hover .po-cart-word { color: var(--po-orange); }

.header-right-link ul li.po-cart-link .link-text {
    color: var(--po-orange);
    font-weight: 700;
    padding-left: 10px;
    white-space: nowrap;
    /* .link-text ze šablony nese margin-top, který částku sráží pod osu */
    margin: 0;
}

/* Na počítači je košík lehce podbarvený, aby se odlišil od
   navigačních odkazů vedle sebe. */
@media (min-width: 992px) {
    .header-right-link ul li.po-cart-link > a {
        background: rgba(255, 255, 255, .09);
        border-radius: 26px;
        padding: 7px 15px;
        transition: background .2s ease;
    }
    .header-right-link ul li.po-cart-link > a:hover {
        background: rgba(255, 255, 255, .16);
        text-decoration: none;
    }
}

/* Na úzkých displejích zůstane jen ikona s počtem, aby se lišta
   vešla na jeden řádek i s naplněným košíkem. */
@media (max-width: 991px) {
    .po-cart-word { font-size: 14px; padding-right: 7px; }
}
@media (max-width: 575px) {
    .po-cart-word { display: none; }
    .header-right-link ul li.po-cart-link .link-text { display: none; }
}

/* hlavička musí zůstat na jednom řádku i s delšími texty */
#header .navbar-collapse { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.header-right-link > ul { white-space: nowrap; }

/* ---------------------------------------------------------------------
   Hlavička na telefonu — větší rozestupy a dotykové plochy
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
    .header-right-link ul > li { margin-left: 14px; padding: 0; }
    .header-right-link ul > li:first-child { margin-left: 0; }

    /* Hamburger je ze šablony pozicovaný absolutně a přesahuje vpravo
       mimo lištu, v toku tedy nezabírá místo. Košík proto dostane
       odsazení, aby se dotykové plochy nepřekrývaly. */
    .header-right-link ul > li.po-cart-link { margin-right: 26px; }

    .header-right-link ul li.call-icon > a,
    .header-right-link ul li.adresa > a,
    .header-right-link ul li.po-cart-link > a {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0 4px;
    }

    /* Hamburger si musí nechat svých 30 x 27 px - čárky křížku jsou
       na tuto velikost nakreslené absolutním pozicováním. Dotykovou
       plochu proto zvětší jen průhledný přesah, kresba zůstane. */
    .header-right-link ul li.side-toggle .navbar-toggle:after {
        content: "";
        position: absolute;
        top: -9px;
        right: -8px;
        bottom: -8px;
        left: -8px;
    }

    /* položky hlavní nabídky po rozbalení: pohodlné řádky pod prstem */
    #menu .nav.navbar-nav > li.level > a {
        display: block;
        padding: 14px 16px;
        min-height: 44px;
        line-height: 1.4;
    }
}

/* ---------------------------------------------------------------------
   Velikost písma v menu — přepínatelné z administrace
   --------------------------------------------------------------------- */
:root {
    --menu-item-title-size: 18px;
    --menu-item-desc-size: 14px;
    --menu-item-price-size: 18px;
    --modal-title-size: 24px;
    --modal-desc-size: 15px;
}
body.po-font-large {
    --menu-item-title-size: 20px;
    --menu-item-desc-size: 16px;
    --menu-item-price-size: 20px;
    --modal-title-size: 26px;
    --modal-desc-size: 16px;
}
.po-card .menu-title { font-size: var(--menu-item-title-size); line-height: 1.35; }
.po-card .menu-des   { font-size: var(--menu-item-desc-size); line-height: 1.6; }
.po-card .menu-price { font-size: var(--menu-item-price-size); }
.po-modal-title      { font-size: var(--modal-title-size); }
.po-modal-desc       { font-size: var(--modal-desc-size); }

@media (max-width: 575px) {
    body.po-font-large {
        --menu-item-title-size: 18px;
        --menu-item-desc-size: 15px;
        --modal-title-size: 21px;
    }
}

/* ---------------------------------------------------------------------
   Kartička menu
   Sloupcový flex: obrázek, název a popis rostou nahoře, cena s tlačítkem
   drží u spodního okraje, takže jsou v celém řádku ve stejné výšce.
   --------------------------------------------------------------------- */
.po-card {
    border-radius: 8px;
    transition: background-color .15s ease;
}
.po-card.pt-55 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 32px;
    padding-bottom: 32px;
}
.po-card .menu-img { -ms-flex: 0 0 auto; flex: 0 0 auto; }
.po-card .menu-title { padding-top: 18px; }
.po-card .menu-des { padding-bottom: 6px; }

.po-card-foot {
    margin-top: auto;
    padding-top: 12px;
}
.po-card-foot .po-card-add { margin-top: 12px; }

@media (hover: hover) and (pointer: fine) {
    .po-card:hover { background-color: rgba(255, 255, 255, .07); }
}

@media (max-width: 575px) {
    .po-card.pt-55 { padding-top: 24px; padding-bottom: 24px; }
}

/* ---------------------------------------------------------------------
   Filtrovací štítky pod kategoriemi
   --------------------------------------------------------------------- */
.po-filter-bar {
    text-align: center;
    padding-top: 20px;
    display: none;
}
.po-filter-bar.is-visible { display: block; }

.po-chip {
    display: inline-block;
    background: #2b2c2d;
    color: #cfd5dc;
    border: 1px solid #3a3f45;
    border-radius: 30px;
    padding: 7px 15px;
    margin: 4px 3px;
    font-size: 13px;
    letter-spacing: .4px;
    cursor: pointer;
    transition: all .15s ease;
    font-family: inherit;
}
.po-chip:hover { border-color: var(--po-orange); color: #fff; }
.po-chip.is-active {
    background: var(--po-orange);
    border-color: var(--po-orange);
    color: #1d1d1d;
    font-weight: 700;
}
.po-chip--clear { color: var(--po-muted); }
.po-chip--clear.is-active { background: #4a5058; border-color: #4a5058; color: #fff; }

.po-filter-empty {
    width: 100%;
    text-align: center;
    color: var(--po-muted);
    padding: 45px 20px;
    font-size: 16px;
}

/* ---------------------------------------------------------------------
   Mezititulek skupiny v záložce „Vše“
   --------------------------------------------------------------------- */
.po-group-title {
    width: 100%;
    text-align: center;
    padding: 55px 0 5px;
}
.po-group-title span {
    display: inline-block;
    position: relative;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 0 22px;
}
.po-group-title span:before,
.po-group-title span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background: var(--po-orange);
}
.po-group-title span:before { left: -30px; }
.po-group-title span:after { right: -30px; }

@media (max-width: 575px) {
    .po-group-title span { font-size: 21px; }
    .po-group-title span:before,
    .po-group-title span:after { width: 20px; }
    .po-group-title span:before { left: -14px; }
    .po-group-title span:after { right: -14px; }
}

/* ---------------------------------------------------------------------
   Lupa fotky v detailu položky (experiment, vypínatelný v nastavení)
   --------------------------------------------------------------------- */
.po-modal-hero.is-zoomable img { cursor: zoom-in; }

.po-lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .94);
    z-index: 22000;
    display: none;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 20px;
}
.po-lightbox.is-open {
    display: -ms-flexbox;
    display: flex;
}
.po-lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    transform: scale(.9);
    transition: transform .2s ease;
}
.po-lightbox.is-open img { transform: scale(1); }
.po-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
}
.po-lightbox-close:hover { background: var(--po-orange); color: #1d1d1d; }
.po-lightbox-hint {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--po-muted);
    font-size: 13px;
}

/* =====================================================================
   Stránka objednávky — světlý obsah pod tmavou hlavičkou
   Hlavička s nadpisem a patička webu zůstávají tmavé.
   ===================================================================== */

.po-checkout--light {
    background: #ffffff;
    padding: 0 0 80px;
}
.po-checkout--light .po-checkout-head {
    background: var(--po-dark);
    padding: 55px 0 45px;
    margin-bottom: 38px;
}
.po-checkout--light .po-checkout-head .po-page-title { padding-bottom: 0; }
.po-checkout--light .po-checkout-body { position: relative; }

/* --- velikost písma na objednávce (stejná škála jako v menu) --------- */
:root {
    --checkout-title-size: 17px;
    --checkout-label-size: 13px;
    --checkout-input-size: 15px;
    --checkout-text-size: 14px;
}
body.po-font-large {
    --checkout-title-size: 19px;
    --checkout-label-size: 15px;
    --checkout-input-size: 17px;
    --checkout-text-size: 16px;
}

.po-checkout .po-box h3 { font-size: var(--checkout-title-size); }
.po-checkout .po-field label,
.po-checkout .po-error-text { font-size: var(--checkout-label-size); }
.po-checkout .po-input,
.po-checkout .po-select,
.po-checkout .po-textarea { font-size: var(--checkout-input-size); }
.po-checkout .po-radio,
.po-checkout .po-check,
.po-checkout .po-switch label,
.po-checkout .po-summary-line,
.po-checkout .po-sum-row { font-size: var(--checkout-text-size); }
.po-checkout .po-radio small,
.po-checkout .po-summary-line em,
.po-checkout .po-drawer-hint { font-size: calc(var(--checkout-text-size) - 2px); }

/* --- barvy světlé varianty ------------------------------------------ */
.po-checkout--light .po-box {
    background: #ffffff;
    border: 1px solid #e3e7ec;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 16px rgba(16, 24, 40, .06);
}
.po-checkout--light .po-box h3 { color: #1d1f23; }

.po-checkout--light .po-field label { color: #55606b; font-weight: 600; }
.po-checkout--light .po-input,
.po-checkout--light .po-select,
.po-checkout--light .po-textarea {
    background: #ffffff;
    border-color: #cfd4da;
    color: #1d1f23;
}
.po-checkout--light .po-input::placeholder,
.po-checkout--light .po-textarea::placeholder { color: #97a0aa; }
.po-checkout--light .po-input:focus,
.po-checkout--light .po-select:focus,
.po-checkout--light .po-textarea:focus {
    border-color: var(--po-orange);
    box-shadow: 0 0 0 3px rgba(253, 157, 62, .22);
}

.po-checkout--light .po-switch label {
    border-color: #d5dae0;
    color: #55606b;
    background: #ffffff;
}
.po-checkout--light .po-switch label.is-active {
    background: var(--po-orange);
    border-color: var(--po-orange);
    color: #1d1f23;
}

.po-checkout--light .po-radio,
.po-checkout--light .po-check { color: #33404c; }
.po-checkout--light .po-radio small { color: #6b737c; }
.po-checkout--light .po-check a { color: #b26100; }

.po-checkout--light .po-section-title {
    color: #1d1f23;
    border-bottom-color: #e3e7ec;
}

.po-checkout--light .po-summary-line {
    color: #33404c;
    border-bottom-color: #eef0f3;
}
.po-checkout--light .po-summary-line strong { color: #1d1f23; }
.po-checkout--light .po-summary-line em { color: #6b737c; }
.po-checkout--light .po-summary-price { color: #b26100; }

.po-checkout--light .po-sum-row { color: #55606b; }
.po-checkout--light .po-sum-row--total {
    color: #1d1f23;
    border-top-color: #e3e7ec;
}
.po-checkout--light .po-sum-row--total span:last-child { color: #b26100; }

.po-checkout--light .po-drawer-hint { color: #6b737c; }
.po-checkout--light .po-error-text { color: #c62828; }
.po-checkout--light .po-psc { color: inherit; }

.po-checkout--light .po-btn--ghost {
    border-color: #d5dae0;
    color: #55606b;
    background: #ffffff;
}
.po-checkout--light .po-btn--ghost:hover { border-color: var(--po-orange); color: #b26100; }

.po-checkout--light .po-alert--warn {
    background: #fff8e1;
    border-color: #ffcc80;
    color: #7a4b00;
}
.po-checkout--light .po-alert--error {
    background: #ffebee;
    border-color: #ef9a9a;
    color: #b71c1c;
}
.po-checkout--light .po-alert--info {
    background: #e8f5e9;
    border-color: #a5d6a7;
    color: #1b5e20;
}

/* ---------------------------------------------------------------------
   Vytížení kuchyně a upozornění u zvoleného času (18. iterace)

   Obojí **informuje, neblokuje**. Zákazník si čas vybrat může, jen ví
   dopředu, že to nejspíš potrvá déle — to je upřímnější než se o tom
   dozvědět až telefonem po hodině čekání.
   --------------------------------------------------------------------- */
.po-load,
.po-slot-warn {
    display: none;
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 14px;
    line-height: 1.55;
}
.po-load.is-visible,
.po-slot-warn.is-visible { display: block; }

.po-load { margin-bottom: 18px; }
.po-slot-warn { margin-top: 14px; }

/* Střední vytížení je informace, vysoké varování — proto dvě barvy.
   Nízké se nezobrazuje vůbec, tam žádná třída není. */
.po-checkout--light .po-load--medium,
.po-checkout--light .po-slot-warn {
    background: #fff8e1;
    border: 1px solid #ffcc80;
    color: #7a4b00;
}
.po-checkout--light .po-load--high {
    background: #ffebee;
    border: 1px solid #ef9a9a;
    color: #b71c1c;
    font-weight: 600;
}
/* tmavá varianta formuláře (kdyby se někdy použila) */
.po-load--medium,
.po-slot-warn { background: rgba(253, 157, 62, .14); border: 1px solid var(--po-orange); color: #ffce9a; }
.po-load--high { background: rgba(224, 82, 82, .14); border: 1px solid var(--po-red); color: #ffb4b4; }

/* ---------------------------------------------------------------------
   Kolik zbývá do levnější dopravy (18. iterace, sekce G)
   Oranžový pruh pod adresou. Přepočítává se živě při změně košíku
   i obce; hláška o nedosaženém minimu zóny má přednost.
   --------------------------------------------------------------------- */
.po-freeship {
    display: none;
    margin-top: 16px;
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}
.po-freeship.is-visible { display: block; }

.po-checkout--light .po-freeship {
    background: #fff4e5;
    border: 1px solid var(--po-orange);
    color: #a8530a;
}
/* Dosaženo — zelená, je to potvrzení, ne výzva. */
.po-checkout--light .po-freeship--done {
    background: #e8f5e9;
    border-color: #a5d6a7;
    color: #1b5e20;
}
.po-freeship { background: rgba(253, 157, 62, .14); border: 1px solid var(--po-orange); color: #ffce9a; }
.po-freeship--done { background: rgba(76, 175, 80, .12); border-color: var(--po-green); color: #b6e8b8; }

/* texty, které byly psané pro tmavé pozadí */
.po-pickup-name { font-size: 15px; margin: 0 0 6px; }
.po-pickup-address { font-size: 14px; margin: 0 0 14px; }
.po-empty-text { margin-bottom: 20px; }
.po-summary-note { color: var(--po-orange); }

.po-checkout--light #po-empty-cart h3,
.po-checkout--light .po-pickup-name { color: #1d1f23; }
.po-checkout--light .po-empty-text,
.po-checkout--light .po-pickup-address { color: #6b737c; }
.po-checkout--light .po-summary-note { color: #b26100; }

/* postranní souhrn se nesmí schovat pod přilepenou hlavičku */
@media (min-width: 992px) {
    .po-checkout-side { top: 110px; }
}

/* --- souhrn: počet kusů odlišený od čísla pizzy ---------------------- */
.po-summary-name { display: inline-block; }
.po-qty-badge {
    display: inline-block;
    background: var(--po-orange);
    color: #1d1d1d;
    border-radius: 5px;
    padding: 1px 8px;
    margin-right: 8px;
    font-weight: 700;
    font-size: .95em;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Dýško obsluze
   --------------------------------------------------------------------- */
.po-tip {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--po-border);
}
.po-tip-label {
    font-size: var(--checkout-label-size);
    font-weight: 600;
    margin-bottom: 8px;
}
.po-tip-row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 6px; }
.po-tip-btn {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 72px;
    min-height: 44px;
    padding: 9px 12px;
    margin: 3px 3px 0 0;
    border: 1px solid var(--po-border);
    border-radius: 24px;
    background: transparent;
    color: #cfd5dc;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.po-tip-btn.is-active {
    background: var(--po-orange);
    border-color: var(--po-orange);
    color: #1d1d1d;
}
.po-tip-custom {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 10px;
    font-size: var(--checkout-label-size);
}
.po-tip-custom label { -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 8px 0 0; }
.po-tip-custom .po-input { -ms-flex: 0 1 110px; flex: 0 1 110px; text-align: right; margin-right: 6px; }

/* světlá varianta stránky objednávky */
.po-checkout--light .po-tip { border-top-color: #e3e7ec; }
.po-checkout--light .po-tip-label { color: #33404c; }
.po-checkout--light .po-tip-btn { border-color: #d5dae0; color: #55606b; background: #fff; }
.po-checkout--light .po-tip-btn.is-active { background: var(--po-orange); border-color: var(--po-orange); color: #1d1f23; }
.po-checkout--light .po-tip-custom { color: #55606b; }

/* Kompaktní dýško (8. iterace) — sekce má být nabídka, ne hlavní prvek
   souhrnu. Tlačítka se proto netáhnou přes celou šířku a jsou nižší;
   na telefonu si dotyková plocha 44 px zůstává. */
.po-tip { margin-top: 12px; padding-top: 11px; }
.po-tip-label { margin-bottom: 6px; }
.po-tip-btn {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 34px;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
}
.po-tip-custom { margin-top: 8px; }
.po-tip-custom .po-input {
    -ms-flex: 0 1 82px;
    flex: 0 1 82px;
    min-height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
}

@media (max-width: 575px) {
    .po-tip-btn { min-height: 44px; padding: 9px 16px; }
    .po-tip-custom .po-input { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}

/* PSČ doplněné podle obce se needituje */
.po-input--readonly { background: var(--po-panel); color: var(--po-muted); cursor: default; }
.po-checkout--light .po-input--readonly { background: #f4f5f7; border-color: #e3e7ec; color: #6b737c; }
.po-hint-inline { color: var(--po-muted); font-weight: 400; }

/* ---------------------------------------------------------------------
   Děkovací stránka
   Sdílí světlý vzhled i velikost písma se stránkou objednávky.
   --------------------------------------------------------------------- */
.po-thanks { text-align: center; color: #fff; }
.po-thanks .po-thanks-number {
    display: inline-block;
    background: var(--po-orange);
    color: #1d1d1d;
    font-size: 30px;
    font-weight: 700;
    padding: 10px 26px;
    border-radius: 8px;
    letter-spacing: 1px;
    margin: 12px 0 22px;
}
.po-thanks .po-thanks-icon { font-size: 58px; color: var(--po-green); line-height: 1; }
.po-thanks-icon--bad { color: var(--po-red); }
.po-thanks-detail { max-width: 560px; margin: 0 auto; text-align: left; }

.po-thanks-box { max-width: 680px; margin: 0 auto; }
.po-thanks-label { font-size: var(--checkout-label-size); padding-top: 10px; color: var(--po-muted); }
.po-thanks-lead { font-size: var(--checkout-input-size); line-height: 1.7; color: #dfe4ea; }
.po-thanks-sub { font-size: var(--checkout-text-size); margin-bottom: 20px; color: var(--po-muted); }
.po-sum-value { color: #fff; }
.po-sum-value--right { text-align: right; }

/* světlá varianta */
.po-checkout--light .po-thanks { color: #1d1f23; }
.po-checkout--light .po-thanks-label,
.po-checkout--light .po-thanks-sub { color: #6b737c; }
.po-checkout--light .po-thanks-lead { color: #33404c; }
.po-checkout--light .po-sum-value { color: #1d1f23; font-weight: 600; }
.po-checkout--light .po-thanks-icon { color: #2e7d32; }
.po-checkout--light .po-thanks-icon--bad { color: #c62828; }
.po-checkout--light .po-thanks-sub a,
.po-checkout--light .po-drawer-hint a { color: #b26100; font-weight: 600; }