/* Modernizace zahlavi/breadcrumb/paticky V6 (reverzibilni - viz layout.css). @import musi byt prvni. */
@import url("layout.css");

/* Moderni formular DROZD (v2) - rucne psana CSS, bez frameworku.
   Vyuziva soucasne CSS: color-mix(), clamp(), :has(), :placeholder-shown (floating labels),
   accent-color, plynule prechody a jemne mikrointerakce. Drzi se brand palety (navy/cervena),
   ale pro formularove prvky pouziva moderni bezpaticke pismo. Vse scoped pod .mform. */

/* Sdilene design tokeny - cerpa z nich formular (.mform) i homepage (.mhome),
   aby obe casti mely identicky vzhled. Layout specificky pro formular je nize. */
.mform, .mhome {
    --brand: #004E9C;
    --brand-strong: #003563;
    --accent: #d22b1e;
    --ink: #1f2933;
    --muted: #6b7280;
    --line: #dde3ea;
    --bg-soft: #f4f7fb;
    --ok: #16a34a;
    --err: #dc2626;
    --radius: 14px;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
}
.mform {
    max-width: 680px;
    margin-inline: auto;
}

/* Karta */
.mform-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
    box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--brand-strong) 30%, transparent);
    /* zadny overflow:hidden - jinak by se orezaval rozbalovaci seznam zeme */
}

.mform-title {
    font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-strong);
    margin: .25rem 0 .35rem;
}
.mform-sub { color: var(--muted); margin: 0 0 1.75rem; font-size: .98rem; }
.mform-result:not(:empty) { margin-bottom: 1.25rem; }
/* Paticka formulare (napr. odkaz "Zapomenuti kodu" pod prihlasenim). */
.mform-foot { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.mform-foot a { color: var(--brand); }

/* Layout poli */
.mform-grid { display: grid; grid-template-columns: 1fr; gap: 1.05rem; }
@media (min-width: 560px) {
    .mform-grid.cols-2 { grid-template-columns: 1fr 1fr; }
}

/* Pole s plovouci jmenovkou */
.mfield { position: relative; }

.mfield input {
    width: 100%;
    height: 58px;
    padding: 1.4rem .95rem .5rem;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    appearance: none;
}
.mfield input::placeholder { color: transparent; }

/* Povinna pole: vyraznejsi sedomodry okraj MISTO hvezdicky (mensi vizualni hluk).
   Pravidla nize (focus/hover/validace) maji vyssi specificitu nebo jsou v souboru pozdeji,
   takze povinny okraj prebijeji - menime tedy jen klidovy stav. */
.mfield.is-required input { border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); }

.mfield label {
    position: absolute;
    left: 1rem;
    top: 1.05rem;
    color: var(--muted);
    font-size: 1rem;
    pointer-events: none;
    transition: top .14s ease, font-size .14s ease, color .14s ease;
}
.mfield input:focus + label,
.mfield input:not(:placeholder-shown) + label {
    top: .42rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--brand);
}

.mfield input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}
.mfield input:hover:not(:focus) { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }

/* Validacni stavy */
/* Chybova hlaska je videt vzdy, kdyz ma text (JS plni textContent jen pri chybe).
   Drive byla skryta opacity:0 a odkryta jen v kontextu .mfield -> hlasky u itineráře,
   data narozeni a selectu se nikdy nezobrazily. */
.mfield-msg {
    margin: .35rem .25rem 0;
    font-size: .82rem;
    color: var(--err);
    min-height: 1em;
}
.mfield.is-touched.is-invalid input {
    border-color: var(--err);
    padding-right: 2.6rem;
}

/* Krizek v krouzku - protejsek zelene fajfky, stejny viewBox, kruh i umisteni.
   Textarea se vynechava (.mfield--top): jmenovku ma nad polem, takze ikona merena
   od horniho okraje obalu by pristala na popisku, ne v poli. Chybu tam nese
   cerveny ramecek a hlaska pod nim. */
.mfield.is-touched.is-invalid:not(.mfield--top)::after {
    content: "";
    position: absolute;
    right: .9rem;
    top: 20px;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc2626'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linecap='round' d='M4.3 4.3 7.7 7.7M7.7 4.3 4.3 7.7'/%3e%3c/svg%3e") no-repeat center / contain;
    animation: pop .2s ease;
}
.mfield.is-touched.is-invalid input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--err) 16%, transparent); }

.mfield-hint { margin: .3rem .25rem 0; font-size: .8rem; color: var(--muted); }
.mfield.is-touched.is-invalid .mfield-hint { display: none; }
/* S napovedou se prazdna rezerva pro chybu (min-height .mfield-msg) nekresli - chyba a napoveda
   se stridaji na stejnem miste, takze se nic neposkoci a pod polem neni prazdny radek. */
.mfield:has(.mfield-hint) .mfield-msg:empty { display: none; }

.mfield.is-touched.is-valid input {
    border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
    /* Ikona je vetsi nez byl znak, takze si u dlouhe hodnoty ukusuje misto textu. */
    padding-right: 2.6rem;
}

/* Fajfka v krouzku, stejna jako v administraci - tam ji ma protejsek v cervenem
   vykricniku, ktery kresli Bootstrap. Drive tu byl textovy znak "✓": vykresloval
   se v kazdem systemu jinak (fallback font) a vedle ostatnich prvku pusobil
   drobne. Barva je v ikone natvrdo (%2316a34a = --ok), uvnitr data URI se
   promenna neuplatni.

   Poloha se meri od horniho okraje .mfield, ne pres top: 50%: obal krome pole
   nese jeste hlasku a napovedu, takze jeho stred nesedi na stredu pole. 20px je
   svisly stred 58px vysokeho pole minus polovina ikony. Ze stejneho duvodu tu
   neni transform - prepsala by ho animace pop. */
.mfield.is-touched.is-valid::after {
    content: "";
    position: absolute;
    right: .9rem;
    top: 20px;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%2316a34a'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='m3.6 6.1 1.6 1.6 3.2-3.7'/%3e%3c/svg%3e") no-repeat center / contain;
    animation: pop .2s ease;
}

@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Datum narozeni - skupina tri selectu */
.mdob > .mdob-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--brand);
    margin: 0 0 .4rem .25rem;
}
.mdob-row { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: .6rem; }
.mdob select {
    width: 100%;
    height: 52px;
    padding: 0 .7rem;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mdob.is-required select { border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); }
.mdob select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.mdob.is-touched.is-invalid select { border-color: var(--err); }

/* Itinerar - inline editor, kazda zeme + od/do na jednom radku */
.miti { margin-top: 2rem; }
.miti-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.miti-note { font-size: .85rem; color: var(--muted); }

.miti-captions { display: none; }
.miti-item { margin-bottom: .65rem; }
.miti-row { display: grid; grid-template-columns: 1fr; gap: .5rem; }

.miti-row select, .miti-row input {
    width: 100%;
    height: 52px;
    padding: 0 .8rem;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.miti-row select:focus, .miti-row input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}
.miti-row.is-invalid select, .miti-row.is-invalid input { border-color: var(--err); }

.miti-remove {
    height: 52px;
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--err);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.miti-remove:hover { background: color-mix(in srgb, var(--err) 8%, #fff); border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }

.miti-add {
    margin-top: .35rem;
    appearance: none;
    background: color-mix(in srgb, var(--brand) 7%, #fff);
    color: var(--brand);
    border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--line));
    border-radius: var(--radius);
    padding: .7rem 1.1rem;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.miti-add:hover { background: color-mix(in srgb, var(--brand) 14%, #fff); border-style: solid; }

@media (min-width: 680px) {
    .miti-row { grid-template-columns: minmax(0, 1fr) 165px 165px 52px; align-items: center; }
    .miti-captions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 165px 165px 52px;
        gap: .5rem;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .02em;
        color: var(--brand);
        margin-bottom: .35rem;
        padding-left: .1rem;
    }
}

/* Akce */
.mform-actions { margin-top: 1.75rem; display: flex; gap: .75rem; align-items: center; }

.mbtn {
    appearance: none;
    border: 0;
    border-radius: var(--radius);
    padding: .9rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, var(--brand), var(--brand-strong));
    cursor: pointer;
    transition: transform .08s ease, box-shadow .2s ease, filter .15s ease;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--brand) 65%, transparent);
}
.mbtn:hover { filter: brightness(1.06); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
/* Zamek barvy textu pro <a class="mbtn"> proti globalnimu a:hover/a:visited (jinak modry text na modrem pozadi). */
.mbtn:link, .mbtn:visited, .mbtn:hover, .mbtn:focus, .mbtn:active { color: #fff; text-decoration: none; }
.mbtn:active { transform: translateY(1px) scale(.99); }
.mbtn:disabled { filter: grayscale(.3) opacity(.7); cursor: default; box-shadow: none; }
.mbtn:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }

@media (max-width: 559px) { .mbtn { width: 100%; } .mform-actions { flex-direction: column; align-items: stretch; } }

/* Mensi tlacitko (OTP) a varovna varianta (zruseni registrace). */
.mbtn--sm { padding: .55rem 1rem; font-size: .9rem; box-shadow: none; }
.mbtn--danger { background: linear-gradient(180deg, #d9434f, #b00020); box-shadow: 0 6px 18px -6px color-mix(in srgb, #b00020 55%, transparent); }
/* Link-styl varianta pro zruseni registrace: nenapadny textovy odkaz misto velkeho cerveneho
   tlacitka. Samostatna trida (ne .mbtn) - nededi vypln, stin ani full-width na mobilu. */
.mlink-danger { appearance: none; border: 0; background: none; padding: .3rem .15rem; font-size: .95rem; font-weight: 600; color: #b00020; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: color .15s ease; }
.mlink-danger:hover { color: #d9434f; }
.mlink-danger:disabled { opacity: .55; cursor: default; text-decoration: none; }
.mlink-danger:focus-visible { outline: 3px solid color-mix(in srgb, #b00020 40%, transparent); outline-offset: 2px; border-radius: 4px; }

/* OTP overeni zmeny kontaktu (edit rezim) */
.motp { margin: .5rem 0 .25rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--brand) 4%, #fff); }
.motp-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.motp-code { flex: 0 0 9rem; max-width: 9rem; padding: .55rem .7rem; border: 2px solid var(--line); border-radius: var(--radius); font: inherit; letter-spacing: .15em; text-align: center; }
.motp-ok { color: var(--ok); font-weight: 600; font-size: .92rem; }

/* "Danger zone" - zruseni registrace (edit rezim) */
.wiz-danger { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.wiz-danger-title { font-weight: 700; color: #b00020; margin-bottom: .15rem; }
.wiz-danger-sub { color: var(--muted); font-size: .9rem; margin: 0 0 .75rem; }

/* Hotovo panel */
.mform-done {
    border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line));
    background: color-mix(in srgb, var(--ok) 8%, #fff);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}
.mform-done h3 { color: var(--ok); margin: 0 0 .5rem; }
.mform-summary { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; }
.mform-summary dt { color: var(--muted); }
.mform-summary dd { margin: 0; font-weight: 600; }

/* Vertikalni rozestup mezi bloky kroku */
.mstack > * + * { margin-top: 1.05rem; }

/* Krok - nadpis */
.wiz-head { margin-bottom: 1.25rem; }
.wiz-h { outline: none; font-size: clamp(1.25rem, 1.1rem + 1vw, 1.6rem); font-weight: 700; color: var(--brand-strong); margin: 0; letter-spacing: -0.01em; }
.wiz-sub { color: var(--muted); margin: .25rem 0 0; }

/* Progress stepper */
.wiz-steps { display: flex; margin: 0 0 1.75rem; }
.wiz-step-item {
    flex: 1; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: default;
}
.wiz-step-item::before {
    content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px;
    background: var(--line); z-index: 0;
}
.wiz-step-item:first-child::before { display: none; }
.wiz-dot {
    position: relative; z-index: 1;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700;
    background: #fff; border: 2px solid var(--line); color: var(--muted);
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.wiz-label { font-size: .78rem; text-align: center; line-height: 1.2; }
.wiz-step-item.done { color: var(--ink); cursor: pointer; }
.wiz-step-item.done .wiz-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.wiz-step-item.done::before, .wiz-step-item.current::before { background: var(--brand); }
.wiz-step-item.current { color: var(--brand-strong); font-weight: 600; }
.wiz-step-item.current .wiz-dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.wiz-step-item.done:hover .wiz-dot { filter: brightness(1.08); }
.wiz-step-item:focus-visible .wiz-dot { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
@media (max-width: 520px) { .wiz-label { display: none; } }

/* Viewport + prechodove animace */
.wiz-viewport { position: relative; }
.wiz-step { transition: opacity .18s ease, transform .18s ease; }
.wiz-step.is-in-next { opacity: 0; transform: translateX(26px); }
.wiz-step.is-in-prev { opacity: 0; transform: translateX(-26px); }
.wiz-step.is-out-next { opacity: 0; transform: translateX(-26px); }
.wiz-step.is-out-prev { opacity: 0; transform: translateX(26px); }

/* Navigace */
.wiz-nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.75rem; }
.mbtn--ghost {
    background: #fff; color: var(--brand); box-shadow: none;
    border: 1.5px solid color-mix(in srgb, var(--brand) 35%, var(--line));
}
.mbtn--ghost:hover { background: color-mix(in srgb, var(--brand) 7%, #fff); filter: none; box-shadow: none; }
/* Ghost varianta ma brand text ve vsech stavech (prebiji bily zamek .mbtn vyse vyssi specificitou). */
.mbtn--ghost:link, .mbtn--ghost:visited, .mbtn--ghost:hover, .mbtn--ghost:focus, .mbtn--ghost:active { color: var(--brand); }

/* Textarea - staticka jmenovka NAD polem (musi prebit plovouci .mfield label) */
.mfield--top label {
    position: static; display: block; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
    color: var(--brand); margin: 0 0 .35rem .15rem;
}
.mfield textarea {
    width: 100%; min-height: 92px; padding: .7rem .9rem; font: inherit; font-size: 1rem;
    color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
    outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s;
}
.mfield textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.mfield.is-touched.is-invalid textarea { border-color: var(--err); }

/* Select (a number input "Počet cestujících") s "plovouci" jmenovkou - vzdy nahore, protoze
   select ma vzdy hodnotu a label number-inputu je take staticky. Horni padding udela misto labelu,
   aby na nem hodnota nelezela. Plati pro select i input, aby vizualne ladily s textovymi poli. */
.mselect { position: relative; }
.mselect-label {
    position: absolute; left: 1rem; top: .42rem; z-index: 1;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--brand); pointer-events: none;
}
.mselect select, .mselect input {
    width: 100%; height: 58px; padding: 1.4rem .8rem .5rem; font-size: 1rem; color: var(--ink);
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.mselect.is-required select, .mselect.is-required input { border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); }
.mselect select:focus, .mselect input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.mselect.is-touched.is-invalid select, .mselect.is-touched.is-invalid input { border-color: var(--err); }

/* Stejne mekke zelene jako u textovych poli. Ikona tu byt nemuze: select si necha
   nativni sipku (nema appearance: none), takze by se s ni ikona v kazdem prohlizeci
   prekryvala jinak. */
.mselect.is-touched.is-valid select, .mselect.is-touched.is-valid input {
    border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
}

/* Vlastni vyber zeme s vlajkami (native select neumi obrazky v polozkach) */
.mcp { position: relative; }
.mcp-trigger {
    display: flex; align-items: center; gap: .55rem; width: 100%; height: 52px; padding: 0 .8rem;
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
    font: inherit; font-size: 1rem; color: var(--ink); text-align: left; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.mcp-trigger:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.mcp-trigger.is-placeholder .mcp-text { color: var(--muted); }
.mcp-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-caret { color: var(--muted); font-size: .8rem; }
.mcp-flag { width: 24px; height: 18px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); flex: none; }
.miti-row.is-invalid .mcp-trigger { border-color: var(--err); }

.mcp-panel {
    position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
    /* Mobile-first: panel = sirka triggeru. Neroztahuje se podle nejdelsiho nazvu, takze
       neprerete kartu ani viewport na uzkych displejich. */
    width: 100%; max-width: 100%;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--brand-strong) 35%, transparent);
    max-height: 320px; overflow: auto;
}
.mcp-search-wrap { position: sticky; top: 0; background: #fff; padding: .5rem; border-bottom: 1px solid var(--line); }
.mcp-search { width: 100%; height: 40px; padding: 0 .7rem; border: 1.5px solid var(--line); border-radius: 10px; font-size: .95rem; outline: none; }
.mcp-search:focus { border-color: var(--brand); }
.mcp-group { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brand); padding: .55rem .8rem .25rem; }
/* Na mobilu dlouhe nazvy zalamujeme (panel = sirka triggeru), at nevznika horizontalni scroll. */
.mcp-option { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .8rem; cursor: pointer; white-space: normal; }
.mcp-option:hover, .mcp-option:focus { background: color-mix(in srgb, var(--brand) 8%, #fff); outline: none; }
.mcp-option.is-sel { background: color-mix(in srgb, var(--brand) 12%, #fff); font-weight: 600; }
.mcp-option.is-active { background: color-mix(in srgb, var(--brand) 18%, #fff); }
.mcp-empty { padding: .85rem; color: var(--muted); }

/* Od tabletu nahoru smi panel narust podle nejdelsiho nazvu (s limitem dle viewportu)
   a polozky uz nemusi zalamovat. */
@media (min-width: 680px) {
    .mcp-panel { right: auto; min-width: 100%; width: max-content; max-width: min(30rem, 92vw); }
    .mcp-option { align-items: center; white-space: nowrap; }
}

/* Skupinova registrace - checkbox */
.mcheck { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; }
.mcheck input { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }
.mcheck label { font-weight: 600; color: var(--ink); cursor: pointer; }

/* Spolucestujici - karta */
.mfellow { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; margin-bottom: .75rem; background: color-mix(in srgb, var(--brand) 2%, #fff); }
.mfellow-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.mfellow-title { font-weight: 700; color: var(--brand-strong); }
.mfellow-remove { background: none; border: 0; color: var(--err); font-weight: 600; cursor: pointer; font-size: .85rem; }

/* Summary */
.wiz-sum-group { margin-bottom: 2.25rem; }
.wiz-step > [data-slot="trip"] .wiz-sum-group,
.wiz-step > [data-slot="fellows"] .wiz-sum-group { margin-top: 2rem; }
.wiz-sum-group:last-child { margin-bottom: 0; }
.wiz-sum-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid #eef1f4; padding-bottom: .4rem; margin-bottom: .6rem; }
.wiz-sum-head h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--brand-strong); }
.wiz-edit { background: none; border: 0; color: var(--brand); cursor: pointer; font-weight: 600; font-size: .85rem; }
.wiz-edit:hover { text-decoration: underline; }
/* Mobile: jmenovka a hodnota pod sebou (hodnota neni utlacena do uzkeho sloupce). */
.wiz-sum-dl { margin: 0; }
.wiz-sum-dl dt { color: var(--brand-strong); font-weight: 400; font-size: .82rem; }
.wiz-sum-dl dd { margin: .1rem 0 .7rem; font-weight: 600; word-break: break-word; }
.wiz-sum-dl dd:last-child { margin-bottom: 0; }
/* Sirsi obrazovka: dva sloupce (jmenovka | hodnota) vedle sebe. */
@media (min-width: 768px) {
    .wiz-sum-dl { display: grid; grid-template-columns: 210px 1fr; gap: .4rem 1rem; align-items: baseline; }
    .wiz-sum-dl dt { font-size: inherit; }
    .wiz-sum-dl dd { margin: 0; }
}

/* Itinerar v souhrnu - tabulka zeme + termin s vlajkami, bez hlavicky a linek (mobile-first) */
.wiz-sum-iti-wrap { margin-bottom: .9rem; }
.wiz-sum-iti { width: 100%; border-collapse: collapse; font-size: .9rem; }
.wiz-sum-iti td { padding: .3rem .5rem; vertical-align: middle; }
.wiz-sum-iti td:first-child { padding-left: 0; }
.wiz-sum-iti td:last-child { padding-right: 0; }
.wiz-sum-iti-c { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.wiz-sum-iti-d { white-space: nowrap; width: 1%; text-align: right; }
.wiz-sum-iti-sep { width: 1%; text-align: center; padding: .3rem .25rem; color: var(--muted); }
.wiz-sum-noflag { width: 24px; text-align: center; flex: none; }
.wiz-sum-empty { margin: 0 0 .9rem; color: var(--muted); }

/* Obrazovka po uspesnem odeslani - velky animovany zeleny check */
.msuccess { text-align: center; padding: 2.5rem 1rem; }
.msuccess-check {
    width: clamp(96px, 28vw, 124px); height: clamp(96px, 28vw, 124px); margin: 0 auto 1.5rem;
    animation: msuccess-pop .45s cubic-bezier(.2, .7, .3, 1.4) both;
}
.msuccess-check svg, .msuccess-check img { width: 100%; height: 100%; display: block; object-fit: contain; }
/* Logo ptáka Drozd (DrozdH100.png) se diagonálně "vykresluje" odspoda zleva nahoru doprava.
   Maska = posouvající se lineární gradient (měkký okraj). Pixelově věrné logu, žádné ruční obkreslování. */
.mbird-img {
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 300% 300%; mask-size: 300% 300%;
    -webkit-mask-position: right top; mask-position: right top;
    -webkit-mask-image: linear-gradient(to top right, #000 44%, transparent 56%);
    mask-image: linear-gradient(to top right, #000 44%, transparent 56%);
    animation: mbird-wipe 1.8s .25s ease forwards;
}
@keyframes mbird-wipe { to { -webkit-mask-position: left bottom; mask-position: left bottom; } }
.msuccess-title {
    font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); font-weight: 800; letter-spacing: -.02em;
    color: var(--brand-strong); margin: 0; animation: msuccess-rise .5s .2s ease both;
}
.msuccess-info {
    max-width: 460px; margin: 1.25rem auto 0; color: var(--muted); font-size: 1.05rem; line-height: 1.55;
    opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease;
}
.msuccess-info.show { opacity: 1; transform: none; }
.msuccess-info p { margin: .4rem 0; }
/* Lehka oddelovaci linka pred informaci o kodu registrace. */
.msuccess-sep { border: 0; border-top: 1px solid var(--line); max-width: 320px; margin: 1.5rem auto .9rem; }
/* Informace o kodu registrace + e-mailu (trvaly pristup). Kod a e-mail tucne v brandove barve. */
.msuccess-code { font-size: .95rem; }
.msuccess-code strong { color: var(--brand-strong); font-weight: 700; word-break: break-word; }
/* Nenapadny odkaz "Zmenit neco v registraci nyni?" - tissi nez nadpis, nekrici. */
.msuccess-edit { margin-top: 1.1rem; font-size: .95rem; }
.msuccess-edit a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.msuccess-edit a:hover, .msuccess-edit a:focus-visible { color: var(--brand); }
@keyframes msuccess-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes msuccess-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Moderni homepage (stejny design jako registracni formular) ---------- */

/* Upozorneni: repatriacni ticker, udrzba i chybove hlasky sdili jeden vzhled. */
.mhome-ticker { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.mnote {
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand) 5%, #fff);
    padding: .9rem 1.1rem;
    box-shadow: 0 4px 16px -10px color-mix(in srgb, var(--brand-strong) 40%, transparent);
}
.mnote-title { font-weight: 700; color: var(--brand-strong); margin-bottom: .15rem; }
.mnote-body { color: var(--ink); line-height: 1.55; }
.mnote-body > :last-child { margin-bottom: 0; }
.mnote--info    { border-left-color: var(--brand);  background: color-mix(in srgb, var(--brand) 5%, #fff); }
.mnote--success { border-left-color: var(--ok);     background: color-mix(in srgb, var(--ok) 7%, #fff); }
.mnote--success .mnote-title { color: var(--ok); }
.mnote--warning { border-left-color: #d97706;       background: color-mix(in srgb, #d97706 8%, #fff); }
.mnote--warning .mnote-title { color: #b45309; }
.mnote--danger  { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, #fff); }
.mnote--danger .mnote-title { color: var(--accent); }

/* Rozlozeni: hlavni obsah + akcni sloupec. Na mobilu jsou akce prvni (order). */
.mhome-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.mhome-actions { order: -1; display: grid; gap: 1rem; align-content: start; }
@media (min-width: 992px) {
    .mhome-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
    .mhome-actions { order: 0; position: sticky; top: 1rem; }
}

/* Akcni karty (CTA) - stejny vzhled jako .mform-card */
.mhome-cta {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 10px 40px -14px color-mix(in srgb, var(--brand-strong) 28%, transparent);
}
.mhome-cta--primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, #fff), #fff);
    border-color: color-mix(in srgb, var(--brand) 25%, var(--line));
}
.mhome-cta-title { font-size: 1.15rem; font-weight: 700; color: var(--brand-strong); margin: 0 0 .35rem; }
.mhome-cta-sub { color: var(--muted); font-size: .92rem; line-height: 1.5; margin: 0 0 1rem; }
.mhome-btn { display: block; width: 100%; text-align: center; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .mform *, .mform *::before, .mform *::after, .mhome *, .mhome *::before, .mhome *::after, .wiz-step { transition: none !important; animation: none !important; }
    /* Bez animaci ptaka rovnou cely ukazat a info hned zobrazit */
    .mbird-img { -webkit-mask-image: none !important; mask-image: none !important; }
    .msuccess-info { opacity: 1 !important; transform: none !important; }
}