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

   Akcent se bere z proměnných --odst-primarni (#660000) a
   --odst-primarni-hover (#4d0000): nastaví je snippet inline, JS je po
   startu přepíše hodnotami z config.secret.php a fallback ve var(...) drží
   vzhled, i kdyby ani jedno neproběhlo. Na akcentu je vždy bílé písmo,
   ostatní barvy jsou neutrální (kromě signálních barev semaforu a chyb).

   IZOLACE OD CSS E-SHOPU
   Snippet žije uvnitř šablony e-shopu, jejíž obecná pravidla (např. na
   nahrob.cz `.content p { float:left; clear:both; text-align:justify }`,
   `.content ul { float:left; margin-left:30px }`, `h2 { float:left }`)
   by formulář rozbila. Proto:
     • všechny selektory začínají `div.odst` → specificita min. (0,1,1)+,
       komponenty (0,2,0)+, což přebije běžná pravidla typu `.content p`;
     • vlastnosti, které layout rozbijí nejvíc (float, clear, text-align),
       resetuje izolační blok s !important;
     • nic se nedědí „náhodou“ — písmo, řádkování a okraje se nastavují
       explicitně.
   Samostatná stránka (průchod bez JS) obaluje obsah do div.odst taky,
   takže platí stejná pravidla.
   --------------------------------------------------------------------- */

/* =====================================================================
   1) IZOLAČNÍ VRSTVA
   ===================================================================== */

div.odst,
div.odst div,
div.odst p,
div.odst ul,
div.odst ol,
div.odst li,
div.odst h2,
div.odst h3,
div.odst form,
div.odst fieldset,
div.odst legend,
div.odst label,
div.odst dl,
div.odst dt,
div.odst dd,
div.odst span,
div.odst strong,
div.odst input,
div.odst textarea,
div.odst button {
    float: none !important;
    clear: none !important;
    text-align: left !important;
    box-sizing: border-box;
    text-indent: 0;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    background-image: none;
}

div.odst p,
div.odst ul,
div.odst ol,
div.odst li,
div.odst dl,
div.odst dt,
div.odst dd,
div.odst label,
div.odst legend,
div.odst span,
div.odst h2 {
    width: auto;
    max-width: none;
    min-height: 0;
    height: auto;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

div.odst div,
div.odst p,
div.odst form,
div.odst ul,
div.odst dl,
div.odst fieldset {
    display: block;
}

div.odst p {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    background: none;
}

div.odst ul {
    margin: 0 0 1rem;
    padding: 0 0 0 1.25rem;
    list-style: disc outside;
    border: 0;
}

div.odst li,
div.odst ul li {
    display: list-item;
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 .25rem;
    padding: 0;
    border: 0;
    background: none;
}

div.odst li::before,
div.odst li::after,
div.odst p::before,
div.odst p::after,
div.odst label::before,
div.odst label::after {
    content: none;
}

/* =====================================================================
   2) ZÁKLAD
   ===================================================================== */

div.odst {
    --odst-akcent: var(--odst-primarni, #660000);
    --odst-akcent-hover: var(--odst-primarni-hover, #4d0000);
    --odst-text: #1d1d1d;
    --odst-text-slaby: #5c5c5c;
    --odst-ram: #c9c9c9;
    --odst-pozadi-jemne: #f6f6f6;
    --odst-chyba: #b3261e;
    --odst-radius: 4px;

    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 2rem;
    padding: 0;
    color: var(--odst-text);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
}

/* modul je flow-root, aby ho neobtékaly plovoucí prvky šablony okolo */
div.odst::after {
    content: "";
    display: table;
    clear: both;
}

div.odst h2 {
    display: block;
    margin: 0 0 .5rem;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--odst-text);
}

div.odst a {
    color: var(--odst-akcent);
    text-decoration: underline;
}

div.odst a:hover {
    color: var(--odst-akcent-hover);
}

/* Viditelný focus: 2px outline v akcentu s odsazením. */
div.odst input:focus,
div.odst textarea:focus,
div.odst button:focus,
div.odst a:focus {
    outline: 2px solid var(--odst-akcent);
    outline-offset: 2px;
}

/* S :focus-visible: kroužek u tlačítek a odkazů jen při ovládání klávesnicí. */
div.odst button:focus:not(:focus-visible),
div.odst a:focus:not(:focus-visible) {
    outline: none;
}

/* =====================================================================
   3) SAMOSTATNÁ STRÁNKA (průchod bez JS)
   ===================================================================== */

body.odst-samostatna {
    margin: 0;
    background: #fff;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.odst-stranka {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    box-sizing: border-box;
}

.odst-hlavicka {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #c9c9c9;
    font-size: 1.25rem;
    font-weight: 700;
}

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

/* =====================================================================
   4) KOMPONENTY
   ===================================================================== */

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

/* --- podmínky vrácení ------------------------------------------------- */

div.odst .odst-podminky {
    margin: 0 0 1.5rem;
    padding: .85rem 1rem .85rem 2.25rem;
    border-left: 4px solid var(--odst-akcent);
    border-radius: var(--odst-radius);
    background: var(--odst-pozadi-jemne);
    list-style: disc outside;
}

div.odst .odst-podminky li {
    margin: 0 0 .3rem;
}

div.odst .odst-podminky li:last-child {
    margin-bottom: 0;
}

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

div.odst .odst-pole {
    display: block;
    width: 100%;
    margin: 0 0 1.1rem;
    padding: 0;
}

div.odst .odst-pole > label,
div.odst .odst-volba > legend {
    display: block;
    margin: 0 0 .3rem;
    padding: 0;
    font-weight: 600;
    color: var(--odst-text);
}

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

div.odst .odst-pole input[type="text"],
div.odst .odst-pole input[type="email"],
div.odst .odst-pole input[type="date"],
div.odst .odst-pole textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 2.6rem;
    margin: 0;
    padding: .55rem .7rem;
    border: 1px solid var(--odst-ram);
    border-radius: var(--odst-radius);
    background: #fff;
    box-shadow: none;
    color: var(--odst-text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}

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

div.odst .odst-pole input:focus,
div.odst .odst-pole textarea:focus {
    border-color: var(--odst-akcent);
}

div.odst .odst-napoveda {
    display: block;
    margin-top: .3rem;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--odst-text-slaby);
}

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

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

/* --- volba rozsahu (radio) ------------------------------------------- */

div.odst .odst-volba {
    min-width: 0;
    margin: 0 0 1.1rem;
    padding: 0;
    border: 0;
}

/* .odst-volba .odst-radio přebije .odst-pole > label (fieldset má i třídu odst-pole) */
div.odst .odst-volba .odst-radio {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .35rem;
    font-weight: 400;
    cursor: pointer;
}

div.odst .odst-radio input,
div.odst .odst-checkbox input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    padding: 0;
    accent-color: var(--odst-akcent);
}

/* --- personalizace ---------------------------------------------------- */

div.odst .odst-info-personalizace {
    margin: .5rem 0 .6rem;
    font-size: .95rem;
    color: var(--odst-text-slaby);
}

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

div.odst .odst-checkbox input {
    margin-top: .25rem;
}

div.odst .odst-checkbox label {
    display: block;
    margin: 0;
    font-weight: 400;
}

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

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

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

div.odst .odst-pole--chybna input[type="text"],
div.odst .odst-pole--chybna input[type="email"],
div.odst .odst-pole--chybna input[type="date"],
div.odst .odst-pole--chybna textarea {
    border-color: var(--odst-chyba);
}

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

div.odst .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);
}

div.odst .odst-hlaska p {
    margin: 0 0 .5rem;
}

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

div.odst .odst-hlaska--ok {
    border-left-color: var(--odst-akcent);
}

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

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

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

div.odst .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;
}

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

div.odst .odst-semafor span {
    display: block;
}

div.odst .odst-semafor a {
    color: inherit;
}

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

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

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

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

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

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

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

div.odst .odst-tlacitko {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: .75rem 1.5rem;
    border: 0;
    border-radius: var(--odst-radius);
    background: var(--odst-akcent);
    box-shadow: none;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center !important;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

div.odst .odst-tlacitko:hover,
div.odst .odst-tlacitko:active {
    background: var(--odst-akcent-hover);
    color: #fff;
}

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

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

div.odst .odst-tlacitko--zpet:hover,
div.odst .odst-tlacitko--zpet:active {
    background: var(--odst-pozadi-jemne);
    border-color: var(--odst-text-slaby);
    color: var(--odst-text);
}

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

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

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

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

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

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

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

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