/* ---------------------------------------------------------------------
   Modul „Odstoupení od smlouvy"

   Všechno je zanořené pod .odst / .odst-stranka, aby styl nezasahoval do
   šablony e-shopu. Barva se bere z proměnné --odst-primarni: nastaví ji
   snippet inline, JS ji po startu přepíše hodnotou z config.php, a fallback
   v var(...) drží vzhled i kdyby ani jedno neproběhlo.
   --------------------------------------------------------------------- */

.odst,
.odst-stranka {
    --odst-text: #1d1d1d;
    --odst-text-slaby: #5c5c5c;
    --odst-ram: #d4d4d4;
    --odst-ram-focus: var(--odst-primarni, #008244);
    --odst-pozadi-jemne: #f6f6f6;
    --odst-chyba: #b3261e;
    --odst-radius: 4px;

    color: var(--odst-text);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 100%;
}

.odst *,
.odst-stranka * {
    box-sizing: border-box;
}

/* --- samostatná stránka (průchod bez JS) ------------------------------ */

.odst-stranka {
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

body.odst-samostatna {
    margin: 0;
    background: #fff;
}

.odst-hlavicka {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--odst-ram);
    font-size: 1.25rem;
    font-weight: 700;
}

.odst-hlavicka a {
    color: var(--odst-primarni, #008244);
    text-decoration: none;
}

/* --- nadpisy a odstavce ---------------------------------------------- */

.odst h2,
.odst-stranka h2 {
    margin: 0 0 .5rem;
    font-size: 1.35rem;
    line-height: 1.3;
}

.odst-perex {
    margin: 0 0 1.5rem;
    color: var(--odst-text-slaby);
}

/* --- pole ------------------------------------------------------------- */

.odst-pole {
    margin: 0 0 1.1rem;
}

.odst-pole label {
    display: block;
    margin-bottom: .3rem;
    font-weight: 600;
}

.odst-pole .odst-nepovinne {
    font-weight: 400;
    color: var(--odst-text-slaby);
}

.odst-pole input[type="text"],
.odst-pole input[type="email"],
.odst-pole input[type="date"],
.odst-pole textarea {
    display: block;
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--odst-ram);
    border-radius: var(--odst-radius);
    background: #fff;
    color: inherit;
    font: inherit;
    line-height: 1.4;
}

.odst-pole textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.odst-pole input:focus,
.odst-pole textarea:focus {
    outline: 2px solid var(--odst-ram-focus);
    outline-offset: 1px;
    border-color: var(--odst-ram-focus);
}

.odst-napoveda {
    display: block;
    margin-top: .25rem;
    font-size: .875rem;
    color: var(--odst-text-slaby);
}

/* dvojice datumů vedle sebe na širších displejích */
.odst-dvojice {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}

.odst-dvojice > .odst-pole {
    flex: 1 1 12rem;
    min-width: 0;
}

/* --- checkbox --------------------------------------------------------- */

.odst-checkbox {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 1.1rem;
}

.odst-checkbox input {
    margin-top: .3rem;
    flex: none;
}

.odst-checkbox label {
    font-weight: 400;
}

/* --- chyby ------------------------------------------------------------ */

.odst-chyba {
    display: none;
    margin-top: .25rem;
    font-size: .9rem;
    color: var(--odst-chyba);
}

.odst-pole--chybna .odst-chyba {
    display: block;
}

.odst-pole--chybna input,
.odst-pole--chybna textarea {
    border-color: var(--odst-chyba);
}

/* --- hlášky ----------------------------------------------------------- */

.odst-hlaska {
    margin: 0 0 1.25rem;
    padding: .9rem 1rem;
    border-left: 4px solid var(--odst-ram);
    border-radius: var(--odst-radius);
    background: var(--odst-pozadi-jemne);
}

.odst-hlaska p:first-child { margin-top: 0; }
.odst-hlaska p:last-child { margin-bottom: 0; }

.odst-hlaska--ok {
    border-left-color: var(--odst-primarni, #008244);
    background: #eef7f2;
}

.odst-hlaska--chyba {
    border-left-color: var(--odst-chyba);
    background: #fdeceb;
}

.odst-hlaska--info {
    border-left-color: #b58100;
    background: #fdf6e3;
}

.odst-hlaska ul {
    margin: .5rem 0 0;
    padding-left: 1.25rem;
}

/* --- semafor ---------------------------------------------------------- */

.odst-semafor {
    margin: 0 0 1.25rem;
    padding: .9rem 1rem;
    border-left: 4px solid var(--odst-ram);
    border-radius: var(--odst-radius);
    background: var(--odst-pozadi-jemne);
    font-size: .95rem;
}

.odst-semafor strong {
    display: block;
    margin-bottom: .2rem;
}

.odst-semafor a {
    color: inherit;
}

.odst-semafor--zelena   { border-left-color: #2e7d32; background: #edf7ee; }
.odst-semafor--oranzova { border-left-color: #ed6c02; background: #fdf1e5; }
.odst-semafor--cervena  { border-left-color: #b3261e; background: #fdeceb; }
.odst-semafor--neurceno { border-left-color: #757575; background: #f2f2f2; }

.odst-varovani {
    margin: -.5rem 0 1.25rem;
    padding: .75rem 1rem;
    border-left: 4px solid #b58100;
    border-radius: var(--odst-radius);
    background: #fdf6e3;
    font-size: .95rem;
}

/* --- rekapitulace ----------------------------------------------------- */

.odst-rekap {
    margin: 0 0 1.5rem;
    padding: 0;
    border-top: 1px solid var(--odst-ram);
}

.odst-rekap dt {
    margin-top: .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--odst-text-slaby);
}

.odst-rekap dd {
    margin: 0 0 .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--odst-ram);
    overflow-wrap: break-word;
}

/* --- tlačítka --------------------------------------------------------- */

.odst-tlacitko {
    display: inline-block;
    padding: .7rem 1.4rem;
    border: 0;
    border-radius: var(--odst-radius);
    background: var(--odst-primarni, #008244);
    color: #fff;
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.odst-tlacitko:hover,
.odst-tlacitko:focus {
    filter: brightness(.92);
    color: #fff;
}

.odst-tlacitko[disabled] {
    opacity: .6;
    cursor: default;
}

.odst-tlacitko--zpet {
    background: transparent;
    border: 1px solid var(--odst-ram);
    color: var(--odst-text);
}

.odst-tlacitko--zpet:hover,
.odst-tlacitko--zpet:focus {
    color: var(--odst-text);
    filter: none;
    border-color: var(--odst-text-slaby);
}

.odst-akce {
    margin: 1.5rem 0 .75rem;
}

.odst-zpet {
    margin: 0;
    font-size: .95rem;
}

.odst-zpet a {
    color: var(--odst-text-slaby);
}

/* --- honeypot --------------------------------------------------------- */

/* Záměrně NE display:none — část botů takové pole ignoruje. */
.odst-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* --- drobnosti -------------------------------------------------------- */

.odst-info-zpracovani {
    margin: 1.25rem 0 0;
    font-size: .875rem;
    color: var(--odst-text-slaby);
}

.odst[hidden],
.odst [hidden],
.odst-stranka [hidden] {
    display: none !important;
}