/*
 * Odstoupení od smlouvy — veřejný formulář.
 *
 * Vlastní CSS (ne Tailwind utility) záměrně: Tailwind scanner tématu skenuje
 * jen zdroje šablony, ne wp-content/plugins — utility třídy napsané tady by se
 * nezkompilovaly. Všechny hodnoty proto berou design tokeny tématu
 * (variables.css / @theme v main.css) přes var() s fallbackem, aby komponenta
 * vypadala stejně jako zbytek webu a přežila i výpadek tokenů.
 *
 * Styly jsou unlayered → přebijí .typography_content z @layer base, do kterého
 * page.php obsah stránky vkládá.
 */

.ethia-odstoupeni {
  --eo-gap: 2.4rem;
  color: var(--color-text, #151a15);
  font-size: 1.6rem;
  line-height: 1.7;
}

.ethia-odstoupeni *,
.ethia-odstoupeni *::before,
.ethia-odstoupeni *::after {
  box-sizing: border-box;
}

/*
 * Normalizace uvnitř .typography_content (page.php do něj vkládá obsah stránky).
 * Šablona tam seznamům nastavuje display:flex / flex-direction:column / gap /
 * hvězdičkovou list-style-image / font-size 2rem — vlastnosti, které vlastní
 * pravidla níže samy nedeklarují, by jinak protekly dovnitř komponenty.
 *
 * Zapsáno přes :where(), takže má nulovou specificitu a KAŽDÉ pravidlo níže
 * ji přebije. Proti šabloně vyhrává tím, že je unlayered (ta je @layer base).
 */
:where(.ethia-odstoupeni) :where(ul, ol) {
  display: block;
  gap: 0;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  list-style-image: none;
  font-size: inherit;
  line-height: inherit;
}

:where(.ethia-odstoupeni) :where(li) {
  margin: 0;
  padding-left: 0;
}

:where(.ethia-odstoupeni) :where(p, h2, h3, pre) {
  margin: 0;
}

:where(.ethia-odstoupeni) :where(fieldset) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

/* ---------------------------------------------------------------- kroky */

.eo-steps {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 3.2rem;
  margin: 0 0 4.8rem;
  padding: 0;
  list-style: none;
}

.eo-steps li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label, 0.12em);
  color: var(--color-text-dimmed, #999);
}

.eo-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid var(--color-border, #c4bcb2);
  border-radius: 50%;
  font-size: 1.3rem;
  letter-spacing: 0;
}

.eo-steps li.is-current {
  color: var(--color-text, #151a15);
}

.eo-steps li.is-current .eo-steps__num {
  border-color: var(--color-cta, #303c30);
  background: var(--color-cta, #303c30);
  color: var(--color-white, #fff);
}

.eo-steps li.is-done {
  color: var(--color-text-secondary, #4e4138);
}

.eo-steps li.is-done .eo-steps__num {
  border-color: var(--color-cta, #303c30);
  color: var(--color-cta, #303c30);
}

@media (max-width: 550px) {
  .eo-steps {
    gap: 1.6rem;
    margin-bottom: 3.2rem;
  }

  .eo-steps__label {
    display: none;
  }
}

/* --------------------------------------------------------------- layout */

.eo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30rem;
  gap: 6.4rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .eo-layout {
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: 4rem;
  }
}

@media (max-width: 900px) {
  .eo-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 4.8rem;
  }
}

/* ----------------------------------------------------------------- karta */

.eo-card {
  padding: 4.8rem;
  border: 1px solid var(--color-border-light, #e0e0e0);
  border-radius: var(--radius-card, 1.2rem);
  background: var(--color-white, #fff);
  animation: eo-fade-in-up 0.7s ease-out both;
}

@media (max-width: 550px) {
  .eo-card {
    padding: 3.2rem 2.4rem;
  }
}

@keyframes eo-fade-in-up {
  from {
    opacity: 0;
    translate: 0 2rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eo-card {
    animation: none;
  }
}

.eo-eyebrow {
  margin: 0 0 1.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label, 0.12em);
  color: var(--color-text-secondary, #4e4138);
}

.eo-h2 {
  margin: 0 0 1.6rem;
  font-family: var(--font-secondary, "ivypresto-display", serif);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--color-text, #151a15);
}

.eo-h3 {
  margin: 0 0 1.6rem;
  font-family: var(--font-secondary, "ivypresto-display", serif);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

@media (max-width: 550px) {
  .eo-h2 {
    font-size: 2.8rem;
  }
}

.ethia-odstoupeni .eo-note {
  margin: 0 0 2.4rem;
  color: var(--color-text-secondary, #4e4138);
  font-size: 1.5rem;
}

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

.eo-fields {
  display: grid;
  gap: var(--eo-gap);
  margin-bottom: 3.2rem;
}

.eo-field {
  display: block;
  margin-bottom: var(--eo-gap);
}

.eo-fields .eo-field {
  margin-bottom: 0;
}

.eo-field__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label, 0.12em);
  color: var(--color-text-secondary, #4e4138);
}

.eo-field__req {
  margin-left: 0.4rem;
  color: var(--color-accent-orange, #e6954a);
}

.ethia-odstoupeni .eo-input {
  display: block;
  width: 100%;
  padding: 1.2rem 0;
  border: none;
  border-bottom: 1px solid var(--color-border, #c4bcb2);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-primary, "Lato", sans-serif);
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--color-text, #151a15);
  transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ethia-odstoupeni .eo-input:focus {
  outline: none;
  border-bottom-color: var(--color-cta, #303c30);
}

.ethia-odstoupeni textarea.eo-input {
  min-height: 8rem;
  resize: vertical;
}

.ethia-odstoupeni select.eo-input {
  appearance: none;
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.8rem center, right 0.3rem center;
  background-size: 0.5rem 0.5rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.eo-hint,
.eo-error {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.3rem;
  line-height: 1.5;
}

.eo-hint {
  color: var(--color-text-muted, #666);
}

.eo-error {
  color: var(--color-error, #cc1818);
}

.eo-field.has-error .eo-input {
  border-bottom-color: var(--color-error, #cc1818);
}

/* Honeypot — mimo obrazovku, ne display:none (roboti to poznají). */
.eo-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.eo-recap {
  position: relative;
  margin-bottom: 3.2rem;
  padding: 2.4rem;
  background: var(--color-bg-green, #f4f6f1);
  border-radius: var(--radius-md, 0.8rem);
}

.eo-recap__row {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 0.6rem 0;
  font-size: 1.5rem;
}

.eo-recap__row span {
  color: var(--color-text-secondary, #4e4138);
}

.eo-recap__row strong {
  text-align: right;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.eo-recap__editor {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-border, #c4bcb2);
}

.eo-recap__editor summary {
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--color-text-secondary, #4e4138);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.eo-recap__editor summary:hover {
  color: var(--color-text, #151a15);
}

.eo-fields--tight {
  gap: 1.6rem;
  margin: 2rem 0;
}

.ethia-odstoupeni .eo-reload {
  padding: 1.2rem 2.4rem;
  font-size: 1.4rem;
  text-transform: lowercase;
}

/* -------------------------------------------------------------- sekce */

/*
 * Sekce používá div[role=group] + h3, ne <fieldset>/<legend>. Nativní <legend>
 * „prořezává“ horní rámeček fieldsetu (linka končí uprostřed nadpisu) a obvyklý
 * workaround přes float rozbíjí grid uvnitř sekce. Pro čtečky je role=group
 * s aria-labelledby rovnocenná.
 */
.eo-block {
  margin: 0 0 3.2rem;
  padding: 3.2rem 0 0;
  border: none;
  border-top: 1px solid var(--color-border-light, #e0e0e0);
}

.eo-legend {
  display: block;
  padding: 0;
  margin-bottom: 2rem;
  font-family: var(--font-secondary, "ivypresto-display", serif);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--color-text, #151a15);
}

.eo-legend__opt {
  margin-left: 0.8rem;
  font-family: var(--font-primary, "Lato", sans-serif);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label, 0.12em);
  color: var(--color-text-dimmed, #999);
}

/* ---------------------------------------------------------- volby (radio) */

.eo-choice {
  display: grid;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
}

.eo-radio {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 1.8rem 2rem;
  border: 1px solid var(--color-border-light, #e0e0e0);
  border-radius: var(--radius-md, 0.8rem);
  cursor: pointer;
  transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.eo-radio:hover {
  border-color: var(--color-border, #c4bcb2);
}

.eo-radio input {
  margin: 0.4rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--color-cta, #303c30);
}

.eo-radio span {
  display: block;
}

.eo-radio strong {
  display: block;
  font-weight: 600;
  font-size: 1.6rem;
}

.eo-radio em {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  font-size: 1.4rem;
  color: var(--color-text-secondary, #4e4138);
}

.eo-radio:has(input:checked) {
  border-color: var(--color-cta, #303c30);
  background: var(--color-bg-green, #f4f6f1);
}

/* -------------------------------------------------------------- položky */

.eo-items {
  display: grid;
  gap: 0;
  margin-bottom: 2.4rem;
  border: 1px solid var(--color-border-light, #e0e0e0);
  border-radius: var(--radius-md, 0.8rem);
  overflow: hidden;
}

.eo-items[hidden] {
  display: none;
}

.eo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.4rem 2rem;
}

.eo-item + .eo-item {
  border-top: 1px solid var(--color-border-light, #e0e0e0);
}

.eo-item__pick {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.5rem;
  cursor: pointer;
}

.eo-item__pick input {
  accent-color: var(--color-cta, #303c30);
}

.eo-item__qty {
  flex: 0 0 auto;
  font-size: 1.3rem;
  color: var(--color-text-secondary, #4e4138);
  white-space: nowrap;
}

.ethia-odstoupeni .eo-item__qty input {
  width: 5.6rem;
  margin-left: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border, #c4bcb2);
  border-radius: var(--radius-sm, 0.6rem);
  background: transparent;
  font-size: 1.4rem;
  text-align: center;
}

/* -------------------------------------------------------------- notice */

.eo-notice {
  margin: 0 0 3.2rem;
  padding: 2rem 2.4rem;
  border-left: 2px solid var(--color-accent-green, #a0b8a0);
  background: var(--color-bg-warm, #f5efe3);
  border-radius: 0 var(--radius-md, 0.8rem) var(--radius-md, 0.8rem) 0;
  font-size: 1.5rem;
}

.ethia-odstoupeni .eo-notice p {
  margin: 0 0 0.8rem;
}

.ethia-odstoupeni .eo-notice ul {
  margin: 0;
  padding-left: 1.8rem;
  list-style: disc;
}

.ethia-odstoupeni .eo-notice li {
  margin: 0.4rem 0;
  color: var(--color-text-secondary, #4e4138);
}

.eo-notice--warn {
  border-left-color: var(--color-accent-orange, #e6954a);
}

.eo-notice--error {
  border-left-color: var(--color-error, #cc1818);
  background: #fbeaea;
}

/* ------------------------------------------------------------ odeslání */

.ethia-odstoupeni .eo-submit {
  margin-top: 0.8rem;
  text-transform: lowercase;
}

.ethia-odstoupeni .eo-submit--final {
  /* Povinné znění tlačítka podle § 1830a — nezkracovat, nenahrazovat ikonou. */
  text-transform: none;
  letter-spacing: 0.04em;
}

.eo-submit__note {
  margin: 1.2rem 0 0;
  font-size: 1.3rem;
  color: var(--color-text-muted, #666);
}

/*
 * Na mobilu .bttn zvětšuje písmo na 2rem a drží white-space:nowrap — povinné
 * (a tedy nezkratitelné) znění „Potvrdit odstoupení od smlouvy“ by kartu
 * přeteklo. Tlačítko proto necháme zalomit a roztáhnout na plnou šířku.
 */
@media (max-width: 550px) {
  .ethia-odstoupeni .eo-submit {
    width: 100%;
    padding-inline: 2.4rem;
    white-space: normal;
    font-size: 1.7rem;
    line-height: 1.35;
    text-align: center;
  }

  .ethia-odstoupeni .eo-reload {
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------------------- hotovo */

.eo-card--done {
  text-align: left;
}

.eo-done__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.4rem;
  height: 6.4rem;
  margin-bottom: 2.4rem;
  border: 1px solid var(--color-cta, #303c30);
  border-radius: 50%;
  color: var(--color-cta, #303c30);
}

.eo-done__meta {
  margin: 0 0 2.4rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--color-border-light, #e0e0e0);
  font-size: 1.5rem;
  color: var(--color-text-secondary, #4e4138);
}

.eo-next {
  margin: 3.2rem 0;
}

.ethia-odstoupeni .eo-next__list {
  margin: 0;
  padding-left: 2rem;
  list-style: decimal;
}

.ethia-odstoupeni .eo-next__list li {
  margin: 0 0 1.6rem;
  padding-left: 0.4rem;
  color: var(--color-text-secondary, #4e4138);
}

.ethia-odstoupeni .eo-next__list strong {
  color: var(--color-text, #151a15);
}

.eo-address {
  display: block;
  margin-top: 0.6rem;
  line-height: 1.6;
}

.eo-details {
  margin: 0 0 3.2rem;
}

.eo-details summary {
  cursor: pointer;
  font-size: 1.4rem;
  color: var(--color-text-secondary, #4e4138);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.eo-pre {
  margin: 1.6rem 0 0;
  padding: 2.4rem;
  background: var(--color-bg-warm, #f5efe3);
  border-radius: var(--radius-md, 0.8rem);
  font-family: var(--font-primary, "Lato", sans-serif);
  font-size: 1.4rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- aside */

.eo-aside {
  display: grid;
  gap: 2.4rem;
  position: sticky;
  top: 12rem;
}

@media (max-width: 900px) {
  .eo-aside {
    position: static;
  }
}

.eo-aside__box {
  padding: 2.4rem;
  border: 1px solid var(--color-border-light, #e0e0e0);
  border-radius: var(--radius-card, 1.2rem);
  background: var(--color-bg-green, #f4f6f1);
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--color-text-secondary, #4e4138);
}

.ethia-odstoupeni .eo-aside__box p {
  margin: 0 0 1.2rem;
}

.ethia-odstoupeni .eo-aside__box p:last-child {
  margin-bottom: 0;
}

.ethia-odstoupeni .eo-aside__box a {
  color: var(--color-text, #151a15);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.eo-aside__accent {
  color: var(--color-text, #151a15);
}

.eo-aside__small {
  font-size: 1.3rem;
  color: var(--color-text-muted, #666);
}

/* Poznámka: odkaz „Odstoupit od smlouvy“ v patičce se NESTYLUJE odsud — tento
   soubor se načítá jen na stránce formuláře. Patičkový odkaz je součástí
   markupu tématu (footer.php) a používá Tailwind utility + zděděné styly
   footer.css, aby vypadal jako ostatní odkazy v menu patičky. */