/* =====================================================================
   SAPRO - katalog prodejcu

   Proti stare verzi se meni pristup: zadne position:absolute s pevnymi
   pixely a sirka 697px natvrdo. Rozvrzeni drzi Grid a Flexbox, takze
   se stranka prizpusobi mobilu i velkemu monitoru.
   ===================================================================== */

/* --- promenne -------------------------------------------------------- */
:root {
    --barva-text: #1a1d21;
    --barva-text-slaby: #5c6570;
    --barva-pozadi: #f4f6f8;
    --barva-plocha: #ffffff;
    --barva-ram: #dfe3e8;
    --barva-hlavni: #0b5fa5;
    --barva-hlavni-tmava: #094e88;
    /* Firemni cervena, odectena primo z puvodniho loga. */
    --barva-znacka: #d92517;
    --barva-top: #b8006b;
    --barva-top-svetla: #fff0f7;
    --barva-ok: #1a7f43;
    --barva-chyba: #c0202c;
    --barva-ceka: #8a6100;
    --barva-ceka-svetla: #fff8e6;

    --radius: 10px;
    --stin: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
    --sirka: 1080px;
}

/* --- zaklad ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--barva-text);
    background: var(--barva-pozadi);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.75rem; margin: 1.5rem 0 .75rem; }
h2 { font-size: 1.25rem; }

a { color: var(--barva-hlavni); }
a:hover { text-decoration: none; }

img { max-width: 100%; height: auto; }

.obal {
    max-width: var(--sirka);
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Viditelne obtazeni pri ovladani klavesnici. */
:where(a, button, input, select, summary):focus-visible {
    outline: 3px solid var(--barva-hlavni);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Odkaz pro ctecky obrazovky - objevi se az po tabu. */
.preskocit {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--barva-plocha);
    padding: .75rem 1rem;
    z-index: 10;
}
.preskocit:focus { left: 0; }

/* --- hlavicka -------------------------------------------------------- */
.hlavicka {
    background: var(--barva-plocha);
    border-bottom: 1px solid var(--barva-ram);
}
.hlavicka__obal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-block: .75rem;
}
/* Znacka + slogan.
   Obrazek je vyriznuty z puvodniho banneru a ma pruhledne pozadi,
   takze funguje na svetlem i tmavem podkladu bez trikovani. Sirka
   249px odpovida jeho skutecnemu rozliseni - zobrazuje se 1:1,
   tedy ostre. Pro husta displeje je pripravena varianta @2x. */
.logo {
    display: block;
    text-decoration: none;
}
.logo img {
    display: block;
    width: 249px;
    max-width: 100%;
    height: auto;
}
.logo__slogan {
    display: block;
    margin-top: .15rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--barva-znacka);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}
.nav a {
    padding: .5rem .75rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 500;
    color: var(--barva-text);
}
.nav a:hover { background: var(--barva-pozadi); }
.nav__odhlasit { margin: 0; }

.podtitulek {
    text-align: center;
    color: var(--barva-text-slaby);
    margin: 1.25rem 0 0;
}

/* --- hlasky ---------------------------------------------------------- */
.hlaska {
    margin: 1rem 0;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid;
}
.hlaska--ok    { background: #eaf7ef; border-color: #b7e2c6; color: var(--barva-ok); }
.hlaska--chyba { background: #fdecee; border-color: #f5c2c7; color: var(--barva-chyba); }

.poznamka { color: var(--barva-text-slaby); }
.prazdno {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--barva-text-slaby);
    background: var(--barva-plocha);
    border: 1px dashed var(--barva-ram);
    border-radius: var(--radius);
}
.pocet { color: var(--barva-text-slaby); margin: .25rem 0 1rem; }

/* --- mapy ------------------------------------------------------------ */
/* Prepinac zeme (Cesko / Slovensko). */
.zeme-prepinac {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin: 1.25rem 0 .5rem;
    flex-wrap: wrap;
}
.zeme-prepinac__polozka {
    padding: .5rem 1.1rem;
    border: 1px solid var(--barva-ram);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    color: var(--barva-text);
    background: var(--barva-plocha);
}
.zeme-prepinac__polozka:hover { border-color: var(--barva-hlavni); }
.zeme-prepinac__polozka--aktivni {
    background: var(--barva-hlavni);
    border-color: var(--barva-hlavni);
    color: #fff;
}

/* Mapa jedne zeme - vycentrovana. Web je rozdeleny na Cesko a Slovensko,
   takze se zobrazuje vzdy jen jedna mapa (na mobilu pres celou sirku). */
.mapy {
    display: flex;
    justify-content: center;
    margin-top: .5rem;
}
.mapy .mapa {
    width: 100%;
    max-width: 780px;
}
.mapa {
    margin: 0;
    padding: 1rem;
    background: var(--barva-plocha);
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    box-shadow: var(--stin);
}
.mapa__nadpis {
    font-weight: 600;
    text-align: center;
    margin-bottom: .5rem;
}
.mapa__svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Kraj na mape. Souradnice jsou z puvodnich klikacich map, viewBox
   je skaluje - proto se mapa chova jako vektor.

   Barva kraje prijde z promenne --f nastavene v sablone (kazdy kraj
   jina). Stavy hover/vybrany barvu NEPREMALOVAVAJI - jen ji rozjasni
   a pridaji obrys, aby zustala videt vlastni barva kraje. */
.kraj path {
    /* Vypln (fill) se NEnastavuje tady - je primo na <path> jako SVG
       atribut (kazdy kraj jina barva). Kdyby tu fill bylo, prebilo by
       atribut a vsechny kraje by mely stejnou barvu. */
    stroke: var(--barva-plocha);
    stroke-width: 1.4;
    stroke-linejoin: round;
    transition: filter .12s ease-out, stroke-width .12s ease-out;
    cursor: pointer;
}
/* Najeti mysi / zamereni klavesnici: kraj se "nadzvedne" - projasni,
   dostane vyrazny tmavy obrys a jemny stin. JS ho zaroven vyzdvihne
   navrch SVG, aby byl obrys videt cely. */
.kraj:hover path,
.kraj:focus-visible path {
    stroke: var(--barva-text);
    stroke-width: 2.4;
    filter: brightness(1.13) saturate(1.08)
            drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}
/* Vybrany (prave zobrazeny) kraj - trvale zvyrazneny obrysem. */
.kraj--vybrany path {
    stroke: var(--barva-text);
    stroke-width: 2.8;
    filter: brightness(1.05);
}
.kraj:focus-visible { outline: none; }

/* Nazev kraje primo na mape. Velikost je v jednotkach viewBoxu (sirka
   1000), takze se skaluje spolu s mapou. Tenky svetly obrys drzi text
   citelny na jakekoliv barve kraje i pri najeti. Nazev neprekazi mysi -
   klik patri kraji pod nim. */
.kraj__nazev {
    font-size: 20px;
    font-weight: 700;
    fill: #14171c;
    pointer-events: none;
    /* Tenky ostry bily obrys jen oddeli text od pozadi. Drive byl
       silny (2.5) a rozmazaval tahy pismen - text byl necitelny. */
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 1.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* --- vyber kraje seznamem -------------------------------------------- */
.vyber {
    margin-top: 1rem;
    background: var(--barva-plocha);
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    padding: .75rem 1rem;
}
.vyber summary {
    cursor: pointer;
    font-weight: 600;
}
.vyber__seznam {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0 .25rem;
    padding: 0;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--barva-ram);
    border-radius: 999px;
    background: var(--barva-pozadi);
    text-decoration: none;
    color: var(--barva-text);
    font-size: .9rem;
}
.chip:hover { border-color: var(--barva-hlavni); }
.chip--vybrany {
    background: var(--barva-hlavni);
    border-color: var(--barva-hlavni);
    color: #fff;
}
.chip__pocet {
    font-size: .75rem;
    background: rgba(0, 0, 0, .08);
    border-radius: 999px;
    padding: 0 .4rem;
}
.chip--vybrany .chip__pocet { background: rgba(255, 255, 255, .25); }

.nadpis-kraje { margin-bottom: .25rem; }

/* --- seznam firem ---------------------------------------------------- */
.firmy {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    gap: 1rem;
}

/* Karta firmy. Stara verze mela vysku 105px natvrdo a vsechny udaje
   pozicovane absolutne - dlouhy nazev proto pretekal pres sousedy. */
.firma {
    background: var(--barva-plocha);
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    padding: 1rem 1.25rem;
}
.firma--top {
    border-color: var(--barva-top);
    background: var(--barva-top-svetla);
}
.firma--neaktivni {
    background: var(--barva-ceka-svetla);
    border-style: dashed;
    border-color: #e0c980;
}

.firma__zahlavi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}
.firma__nazev { margin: 0; font-size: 1.15rem; }

.znacka {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .15rem .5rem;
    border-radius: 999px;
}
.znacka--top  { background: var(--barva-top); color: #fff; }
.znacka--ceka { background: var(--barva-ceka); color: #fff; }

.firma__cinnost { margin: .35rem 0 0; color: var(--barva-text-slaby); }

/* Stitky oboru a prodej/montaz na karte firmy. */
.stitky {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .5rem 0 0;
    padding: 0;
}
.stitek {
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}
/* Obory - vyraznejsi, firemni modra. */
.stitek--obor {
    background: #e7f0fa;
    color: var(--barva-hlavni-tmava);
}
/* Prodej / montaz - jemnejsi, jen obrys. */
.stitek--delo {
    background: transparent;
    border: 1px solid var(--barva-ram);
    color: var(--barva-text-slaby);
}

/* Skupina zaskrtavatek ve formulari (obory, prodej/montaz). */
.pole-skupina { margin-bottom: 1rem; }
.pole-skupina__nadpis {
    font-size: .85rem;
    font-weight: 500;
    margin: 0 0 .5rem;
}
.pole-skupina__nadpis small { color: var(--barva-text-slaby); font-weight: 400; }
.pole-skupina--chyba { padding-left: .6rem; border-left: 3px solid var(--barva-chyba); }
.zaskrtavatka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .4rem .75rem;
}
.zaskrtavatka .prepinac { margin: 0; }

.firma__telo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem 1.5rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--barva-ram);
}
.firma__blok h3 {
    margin: 0 0 .25rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--barva-text-slaby);
}
.firma__blok address { font-style: normal; }
.firma__kraj { color: var(--barva-text-slaby); }
.firma__osoba { margin: 0 0 .25rem; font-weight: 600; }
.firma__kontakty {
    list-style: none;
    margin: 0;
    padding: 0;
}
.firma__kontakty li { word-break: break-word; }

.firma__sprava {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--barva-ram);
}
.firma__sprava form { margin: 0; }

/* --- tlacitka -------------------------------------------------------- */
.tlacitko {
    display: inline-block;
    padding: .5rem .9rem;
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    color: var(--barva-text);
    background: var(--barva-plocha);
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    cursor: pointer;
}
.tlacitko:hover { border-color: var(--barva-hlavni); color: var(--barva-hlavni); }
.tlacitko--hlavni {
    background: var(--barva-hlavni);
    border-color: var(--barva-hlavni);
    color: #fff;
}
.tlacitko--hlavni:hover { background: #094e88; color: #fff; }
.tlacitko--maly { padding: .3rem .6rem; font-size: .85rem; }
.tlacitko--ok { border-color: var(--barva-ok); color: var(--barva-ok); }
.tlacitko--ok:hover { background: var(--barva-ok); color: #fff; }
.tlacitko--smazat { border-color: var(--barva-chyba); color: var(--barva-chyba); }
.tlacitko--smazat:hover { background: var(--barva-chyba); color: #fff; }
.tlacitko--tichy { background: none; border-color: transparent; }
.tlacitko--tichy:hover { background: var(--barva-pozadi); }

/* --- formulare ------------------------------------------------------- */
.formular {
    background: var(--barva-plocha);
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    padding: 1.25rem;
    margin-bottom: 2rem;
}
.formular--uzky { max-width: 420px; }

.formular fieldset {
    border: 0;
    border-top: 1px solid var(--barva-ram);
    padding: 1rem 0 0;
    margin: 0 0 1rem;
}
.formular fieldset:first-of-type { border-top: 0; padding-top: 0; }
.formular legend {
    font-weight: 600;
    padding-inline-end: .5rem;
}

.formular label {
    display: block;
    margin-bottom: .85rem;
}
.formular label > span {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: .25rem;
}
.formular label > span em {
    color: var(--barva-chyba);
    font-style: normal;
}

.formular input[type="text"],
.formular input[type="tel"],
.formular input[type="email"],
.formular input[type="password"],
.formular input[type="search"],
.formular select {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    color: inherit;
    background: var(--barva-plocha);
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
}
.formular input:focus, .formular select:focus { border-color: var(--barva-hlavni); }
.formular [aria-invalid="true"] { border-color: var(--barva-chyba); }

.chyba {
    margin: .25rem 0 0;
    font-size: .85rem;
    color: var(--barva-chyba);
}

.prepinac {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.prepinac input { width: 1.1rem; height: 1.1rem; }
.prepinac > span { margin: 0; font-size: 1rem; font-weight: 500; }
.prepinac small { color: var(--barva-text-slaby); font-weight: 400; }

.formular__akce {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* --- hledani --------------------------------------------------------- */
.hledani {
    background: var(--barva-plocha);
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.hledani__radek {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .75rem;
}
.hledani__pole {
    flex: 1 1 240px;
    margin: 0;
}
.hledani__pole--uzky { flex: 0 1 200px; }
.hledani__pole > span {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: .25rem;
}
.hledani input, .hledani select {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    background: var(--barva-plocha);
    color: inherit;
}
.hledani .tlacitko { padding: .6rem 1.25rem; }

/* --- administrace ---------------------------------------------------- */
.admin__akce {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 1.5rem;
}
.odznak {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0 .4rem;
    font-size: .8rem;
    text-align: center;
    background: var(--barva-hlavni);
    color: #fff;
    border-radius: 999px;
    vertical-align: middle;
}

/* --- paticka --------------------------------------------------------- */
.paticka {
    margin-top: 2rem;
    padding-block: 1.5rem;
    background: var(--barva-plocha);
    border-top: 1px solid var(--barva-ram);
}
.paticka__znacky {
    text-align: center;
    color: var(--barva-ok);
    font-weight: 500;
    margin-top: 0;
}
.paticka__kontakty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    text-align: center;
}
.paticka__kontakty h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--barva-text-slaby);
    margin: 0 0 .25rem;
}
.paticka__kontakty p { margin: 0; }

/* --- tmavy rezim ----------------------------------------------------- */
/* Rid se nastavenim systemu navstevnika. */
@media (prefers-color-scheme: dark) {
    :root {
        --barva-text: #e7ebf0;
        --barva-text-slaby: #9aa5b1;
        --barva-pozadi: #14171c;
        --barva-plocha: #1c2027;
        --barva-ram: #2e343d;
        --barva-hlavni: #6ab0f3;
        /* Na tmavem pozadi je puvodni firemni cervena malo citelna,
           tak se rozsviti. Filtr na obrazek uz netreba - znacka ma
           pruhledne pozadi a cervena na tmave funguje. */
        --barva-znacka: #ff6a5c;
        --barva-top: #ff7ac0;
        --barva-top-svetla: #2a1c26;
        --barva-ok: #63d68f;
        --barva-chyba: #ff8a92;
        --barva-ceka: #e0b050;
        --barva-ceka-svetla: #2a2419;
    }
    .hlaska--ok    { background: #14301f; border-color: #2c6b43; }
    .hlaska--chyba { background: #331a1c; border-color: #7a3238; }
    /* Kraje si drzi svou barvu z --f i v tmavem rezimu; jen jemne
       ztlumime jas, aby na tmavem podkladu tolik nesvitily. */
    .kraj path { filter: brightness(.9); }
    .kraj:hover path, .kraj:focus-visible path { filter: brightness(1.05) saturate(1.1); }
    .tlacitko--hlavni { color: #0b1116; }
    .tlacitko--hlavni:hover { background: #8cc4f7; color: #0b1116; }
    .znacka--top, .znacka--ceka { color: #16191d; }
    .stitek--obor { background: #22344a; color: #bcd8f5; }
}

/* --- mensi obrazovky ------------------------------------------------- */
@media (max-width: 600px) {
    h1 { font-size: 1.4rem; }
    .hlavicka__obal { justify-content: center; }
    .logo img { width: 200px; }
    .logo__slogan { font-size: .75rem; }
    .firma { padding: .85rem 1rem; }
}

/* --- tisk ------------------------------------------------------------ */
@media print {
    .nav, .mapy, .vyber, .firma__sprava, .preskocit, .hledani { display: none; }
    body { background: #fff; }
    .firma { break-inside: avoid; box-shadow: none; }
}