/* ============================================================
   Objednávka
   ------------------------------------------------------------
   Doplněk k landing.css, ne náhrada: barvy, tlačítka, sekce
   a mřížky se přebírají odtamtud. Tady je jen to, co má
   objednávková stránka navíc.

   Rozvržení: formulář vlevo (hlavní věc), shrnutí vpravo jako
   lepivý sloupec. Pod 960 px se skládá pod sebe a shrnutí jde
   nahoru: na telefonu je potřeba nejdřív vidět, co kupuji.
   ============================================================ */

.ob { background: var(--white); }

/* --- horní lišta ------------------------------------------- */

.ob-nav .lp-nav__actions { gap: 1.4rem; }

/* --- záhlaví ----------------------------------------------- */

.ob-head {
    background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
    color: #DCE8EE;
    padding: 3.2rem 0 3.6rem;
}
.ob-head__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 2.6rem;
    align-items: center;
}
.ob-head h1 {
    font-family: var(--serif);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1.16;
    color: var(--white);
    margin: .2rem 0 .8rem;
}
.ob-lead { font-size: 1.06rem; line-height: 1.66; max-width: 46ch; margin: 0; }
.ob-head__art svg { width: 100%; height: auto; display: block; }

/* postup objednávky */
.ob-kroky {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    list-style: none; margin: 0 0 1.4rem; padding: 0;
    font-size: .84rem; letter-spacing: .02em;
}
.ob-kroky__polozka { display: flex; align-items: center; gap: .5rem; color: #7E9AAD; }
.ob-kroky__polozka span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.55rem; height: 1.55rem; border-radius: 50%;
    border: 1px solid currentColor; font-size: .78rem; font-weight: 600;
}
.ob-kroky__polozka--hotovo { color: #9FB9C8; }
.ob-kroky__polozka--tady { color: var(--gold-text); font-weight: 600; }
.ob-kroky__polozka--tady span { background: var(--gold); border-color: var(--gold); color: #221D0C; }

/* --- rozvržení formuláře a shrnutí ------------------------- */

.ob-main { padding-top: 2.8rem; }
.ob-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: 2.4rem;
    align-items: start;
}

/* --- formulář ---------------------------------------------- */

.ob-ramecek {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.ob-ramecek iframe {
    display: block; width: 100%; min-height: 940px; border: 0;
}

/* Formulář vložený skriptem si nese vlastní vzhled. Obal mu jen zaručí
   šířku a zabrání tomu, aby cokoli přetékalo ven ze sloupce. */
.ob-vlozeny {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.6rem 1.5rem;
    overflow-x: auto;
}
.ob-vlozeny img { max-width: 100%; height: auto; }
.ob-vlozeny iframe { display: block; width: 100%; border: 0; }
.ob-pozn { font-size: .86rem; color: var(--muted); margin: .9rem 0 0; }

.ob-cekame {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    padding: 2.2rem 2rem;
    text-align: center;
}
.ob-cekame h2 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 .6rem; color: var(--navy); }
.ob-cekame p { color: var(--ink-soft); max-width: 44ch; margin: 0 auto 1.4rem; }

/* pásek s důvěryhodností pod formulářem */
.ob-duvera {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 1.2rem; margin-top: 1.8rem;
    padding-top: 1.6rem; border-top: 1px solid var(--line-soft);
}
.ob-duvera__polozka { display: flex; gap: .75rem; align-items: flex-start; }
/* Ikony mají vlastní barvy z line-artu; `currentColor` u nich sjednocuje
   základní linku na námořnickou modř, akcenty zůstávají zlaté. */
.ob-duvera__polozka svg { flex: none; margin-top: .1rem; color: var(--navy); }
.ob-duvera__polozka strong { display: block; font-size: .94rem; color: var(--navy); }
.ob-duvera__polozka span { display: block; font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* --- shrnutí objednávky ------------------------------------ */

.ob-shrnuti { position: sticky; top: 1.5rem; }

.ob-karta {
    border: 1px solid var(--line);
    border-top: 4px solid var(--gold);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 1.7rem 1.6rem;
}
.ob-karta__stitek {
    text-transform: uppercase; letter-spacing: .14em; font-size: .7rem;
    color: var(--muted); margin: 0 0 .5rem;
}
.ob-karta__nazev {
    font-family: var(--serif); font-size: 1.3rem; line-height: 1.3;
    color: var(--navy); margin: 0 0 .9rem;
}
.ob-karta__cena {
    font-family: var(--serif); font-size: 2.1rem; color: var(--navy);
    margin: 0 0 .2rem; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
}
.ob-karta__cena s { font-size: 1.1rem; color: var(--muted); font-family: var(--sans); }
.ob-karta__dan { font-size: .86rem; color: var(--muted); margin: 0 0 1.3rem; }

.ob-seznam { list-style: none; margin: 0; padding: 0; }
.ob-seznam li {
    position: relative; padding: 0 0 .85rem 1.6rem;
    font-size: .9rem; line-height: 1.55; color: var(--ink-soft);
}
.ob-seznam li:last-child { padding-bottom: 0; }
.ob-seznam li::before {
    content: ""; position: absolute; left: 0; top: .42rem;
    width: .62rem; height: .34rem; border-left: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal); transform: rotate(-45deg);
}
.ob-seznam strong { color: var(--navy); font-weight: 600; }

.ob-pomoc { font-size: .86rem; color: var(--muted); margin: 1.1rem 0 0; text-align: center; }

/* --- co se stane potom ------------------------------------- */

.ob-art { max-width: 660px; margin: 1.8rem auto 0; }
.ob-art svg { width: 100%; height: auto; display: block; }

.ob-potom__kroky { margin-top: 1.6rem; }
.ob-krok {
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.4rem 1.3rem;
}
.ob-krok__cislo {
    font-family: var(--serif); font-size: 1.5rem; color: var(--gold);
    margin: 0 0 .3rem; line-height: 1;
}
.ob-krok h3 { font-size: 1.02rem; color: var(--navy); margin: 0 0 .4rem; }
.ob-krok p { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* --- otázky ------------------------------------------------- */

.ob-otazky { padding-bottom: 3.4rem; }
.ob-pravni {
    font-size: .84rem; color: var(--muted); text-align: center;
    margin: 1.8rem 0 0; line-height: 1.6;
}

/* --- menší obrazovky ---------------------------------------- */

@media (max-width: 960px) {
    .ob-head__inner { grid-template-columns: 1fr; }
    .ob-head__art { max-width: 380px; margin: 0 auto; }

    /* Shrnutí patří nahoru: na telefonu je potřeba nejdřív vidět,
       co si kupuji, a teprve pak vyplňovat. */
    .ob-layout { grid-template-columns: 1fr; }
    .ob-shrnuti { position: static; order: -1; }
    .ob-ramecek iframe { min-height: 1080px; }
}

@media (max-width: 560px) {
    .ob-head { padding: 2.4rem 0 2.6rem; }
    .ob-kroky { gap: .4rem .9rem; font-size: .78rem; }
    .ob-karta { padding: 1.4rem 1.2rem; }
    .ob-cekame { padding: 1.7rem 1.2rem; }
}