@charset "utf-8";

/* ═══════════════════════════════════════════════════════
   ODHAD-CENY-NEMOVITOSTI.CSS
   Rozšiřuje style.css webu vykupyostrava.cz
   Prefix: ocn- (odhad ceny nemovitosti)
   ═══════════════════════════════════════════════════════ */


/* ─── BREADCRUMB (hero) ─── */
.ocn-bc{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:.78rem;font-weight:500;color:rgba(255,255,255,.55);list-style:none;padding:0;margin:0 0 1.25rem}
.ocn-bc a{color:rgba(255,255,255,.55);text-decoration:none;transition:color .15s}
.ocn-bc a:hover{color:var(--accent-glow)}
.ocn-bc .sep{opacity:.35}


/* ─── INTRO BLOK POD HERO ─── */
.ocn-intro{
  padding:clamp(2.75rem,5vw,4.25rem) 0;
  background:var(--bg);
}

.ocn-intro__head{
  max-width:760px;
  margin:0 auto 2rem;
  text-align:center;
}

.ocn-intro__label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:.75rem;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}

.ocn-intro__label::before,
.ocn-intro__label::after{
  content:"";
  width:22px;
  height:1.5px;
  border-radius:2px;
  background:var(--accent);
  opacity:.75;
}

.ocn-intro__title{
  margin:0 0 .85rem;
  font-size:clamp(25px,3.2vw,34px);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.035em;
  color:var(--ink);
}

.ocn-intro__text{
  max-width:680px;
  margin:0 auto;
  font-size:16.5px;
  line-height:1.72;
  color:var(--muted);
}

.ocn-intro__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  align-items:stretch;
}

.ocn-intro-card{
  position:relative;
  padding:1.65rem 1.45rem 1.45rem;
  border-radius:var(--rl);
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(9,13,26,.03),0 10px 28px rgba(9,13,26,.045);
  overflow:hidden;
  transition:border-color var(--trans),box-shadow var(--trans),transform var(--trans);
}

.ocn-intro-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--accent),rgba(52,211,153,.35));
  opacity:0;
  transition:opacity var(--trans);
}

.ocn-intro-card:hover{
  transform:translateY(-2px);
  border-color:rgba(16,185,129,.18);
  box-shadow:var(--sh-lift);
}

.ocn-intro-card:hover::before{
  opacity:1;
}

.ocn-intro-card--main{
  background:
    linear-gradient(180deg,rgba(16,185,129,.045),rgba(255,255,255,0) 48%),
    var(--white);
  border-color:rgba(16,185,129,.16);
}

.ocn-intro-card--main::before{
  opacity:1;
}

.ocn-intro-card__icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:1rem;
  border-radius:12px;
  background:var(--accent-s);
  color:var(--accent);
}

.ocn-intro-card h3{
  margin:0 0 .55rem;
  font-size:17px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}

.ocn-intro-card p{
  margin:0;
  font-size:14.5px;
  line-height:1.65;
  color:var(--muted);
}

.ocn-intro__note{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  max-width:900px;
  margin:1.1rem auto 0;
  padding:1rem 1.2rem;
  border-radius:var(--r);
  background:rgba(16,185,129,.055);
  border:1px solid rgba(16,185,129,.12);
  color:var(--muted);
}

.ocn-intro__note svg{
  flex:0 0 18px;
  margin-top:.18rem;
  color:var(--accent);
}

.ocn-intro__note p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

@media(max-width:991.98px){
  .ocn-intro__head{
    text-align:left;
    margin-inline:0;
  }

  .ocn-intro__label::after{
    display:none;
  }

  .ocn-intro__text{
    margin-inline:0;
  }

  .ocn-intro__grid{
    grid-template-columns:1fr;
    max-width:680px;
  }
}

@media(max-width:575.98px){
  .ocn-intro{
    padding:2.25rem 0 2.5rem;
  }

  .ocn-intro__head{
    margin-bottom:1.45rem;
  }

  .ocn-intro__title{
    font-size:24px;
  }

  .ocn-intro__text{
    font-size:15px;
    line-height:1.65;
  }

  .ocn-intro-card{
    padding:1.25rem 1.1rem;
  }

  .ocn-intro-card__icon{
    width:36px;
    height:36px;
    margin-bottom:.75rem;
  }

  .ocn-intro-card h3{
    font-size:16px;
  }

  .ocn-intro-card p,
  .ocn-intro__note p{
    font-size:13.5px;
  }

  .ocn-intro__note{
    padding:.9rem 1rem;
  }
}
 


/* ─── SEKČNÍ NADPIS PŘED FORMULÁŘEM ─── */
.ocn-form-lead{text-align:center;max-width:640px;margin:0 auto 2rem}
.ocn-form-lead h2{font-weight:700;font-size:clamp(24px,3vw,32px);line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 .75rem}
.ocn-form-lead h2 .hl{color:var(--accent)}
.ocn-form-lead p{font-size:16.5px;line-height:1.65;color:var(--muted);margin:0}


/* ─── FORM SPLIT LAYOUT ─── */
.ocn-form-layout{display:grid;grid-template-columns:380px 1fr;gap:0;align-items:start}
.ocn-form-aside{position:sticky;top:100px}
.ocn-form-aside__inner{padding:2.5rem 2.25rem;border-radius:var(--rx) 0 0 var(--rx);background:var(--ink);color:#fff;position:relative;overflow:hidden;min-height:580px;display:flex;flex-direction:column}
.ocn-form-aside__inner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 20% 80%,rgba(16,185,129,.1),transparent),radial-gradient(ellipse 50% 40% at 80% 20%,rgba(52,211,153,.06),transparent);pointer-events:none}
.ocn-form-aside__inner>*{position:relative;z-index:1}
.ocn-form-aside__title{font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.03em;color:#fff;margin:0 0 .85rem}
.ocn-form-aside__desc{font-size:15px;line-height:1.65;color:rgba(255,255,255,.72);margin:0 0 2rem}

.ocn-aside-points{display:flex;flex-direction:column;gap:.15rem;flex:1}
.ocn-aside-point{display:flex;align-items:center;gap:.75rem;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ocn-aside-point:last-child{border-bottom:none}
.ocn-aside-point__ic{width:32px;height:32px;min-width:32px;min-height:32px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;background:rgba(16,185,129,.15);color:var(--accent-glow);line-height:0}
.ocn-aside-point__ic svg{display:block;width:16px;height:16px}
.ocn-aside-point strong{display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:.1rem}
.ocn-aside-point > div > span{display:block;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.58)}

.ocn-aside-badge{margin-top:1.5rem;padding:1rem 1.25rem;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);text-align:center}
.ocn-aside-badge strong{display:block;font-size:1.15rem;font-weight:800;color:var(--accent-glow);letter-spacing:-.01em}
.ocn-aside-badge span{display:block;font-size:.78rem;font-weight:500;color:rgba(255,255,255,.55);margin-top:2px}

/* ── Pravá strana: formulář ── */
.ocn-form-main{min-width:0}
.ocn-form-wrap{background:var(--white);border-radius:0 var(--rx) var(--rx) 0;border:1px solid var(--line);border-left:none;box-shadow:0 8px 48px rgba(9,13,26,.07);overflow:hidden;position:relative;padding:0}

/* ── Honeypot (nahrazuje inline styly) ── */
.ocn-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ── Stepper ── */
.ocn-stepper{display:flex;align-items:center;justify-content:center;padding:2rem 2.5rem 0;gap:0}
.ocn-stepper__step{display:flex;flex-direction:column;align-items:center;gap:.35rem;flex:0 0 auto}
.ocn-stepper__num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:.82rem;font-weight:800;color:var(--light);background:var(--bg);border:2px solid var(--line);transition:all .3s}
.ocn-stepper__lbl{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--light);transition:color .3s}
.ocn-stepper__line{flex:1;height:2px;background:var(--line);margin:0 .75rem;margin-bottom:1.5rem;transition:background .3s}
.ocn-stepper__step.is-active .ocn-stepper__num{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 10px rgba(16,185,129,.25)}
.ocn-stepper__step.is-active .ocn-stepper__lbl{color:var(--accent)}
.ocn-stepper__step.is-done .ocn-stepper__num{background:var(--accent-s);color:var(--accent);border-color:var(--accent)}
.ocn-stepper__step.is-done .ocn-stepper__lbl{color:var(--emerald)}
.ocn-stepper__step.is-done + .ocn-stepper__line{background:var(--accent)}

/* ── Steps ── */
.ocn-step{display:none;padding:1.75rem 2.5rem 2.5rem;animation:ocnFadeIn .35s ease-out}
.ocn-step.is-active{display:block}
@keyframes ocnFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.ocn-step__title{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 .35rem}
.ocn-step__sub{font-size:14.5px;color:var(--muted);margin:0 0 1.5rem}

/* ── Segmented type picker ── */
.ocn-type-seg{display:flex;border-radius:var(--rl);overflow:hidden;border:2px solid var(--line);background:var(--bg);margin-bottom:1.5rem}
.ocn-type-seg__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:1.5rem 1rem;cursor:pointer;transition:background .25s,border-color .25s;border-right:1px solid var(--line);position:relative}
.ocn-type-seg__item:last-child{border-right:none}
.ocn-type-seg__item input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.ocn-type-seg__item svg{color:var(--light);transition:color .25s}
.ocn-type-seg__item span{font-size:14px;font-weight:700;color:var(--muted);transition:color .25s}
.ocn-type-seg__item:hover{background:rgba(16,185,129,.03)}
.ocn-type-seg__item:hover svg{color:var(--accent)}
.ocn-type-seg__item.is-selected{background:var(--accent-s);border-color:transparent}
.ocn-type-seg__item.is-selected svg{color:var(--accent)}
.ocn-type-seg__item.is-selected span{color:var(--accent)}
.ocn-type-seg__item.is-selected::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}

.ocn-type-detail{padding:.85rem 1.15rem;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);margin-bottom:1rem;min-height:52px;display:flex;align-items:center}
.ocn-type-detail__text{font-size:13.5px;line-height:1.55;color:var(--light);margin:0}

/* ── Form responsive ── */
@media(max-width:991px){
  .ocn-form-layout{grid-template-columns:1fr}
  .ocn-form-aside{position:static}
  .ocn-form-aside__inner{border-radius:var(--rx) var(--rx) 0 0;min-height:auto;padding:2rem 1.75rem}
  .ocn-form-wrap{border-radius:0 0 var(--rx) var(--rx);border-left:1px solid var(--line);border-top:none}
  .ocn-aside-points{flex-direction:row;flex-wrap:wrap;gap:.5rem}
  .ocn-aside-point{flex:1 1 calc(50% - .5rem);padding:.65rem 0;border-bottom:none}
  .ocn-aside-badge{display:none}
}
@media(max-width:575px){
  .ocn-form-aside__inner{padding:1.5rem 1.25rem}
  .ocn-form-aside__title{font-size:20px}
  .ocn-aside-points{flex-direction:column}
  .ocn-aside-point{flex:none}
  .ocn-stepper{padding:1.5rem 1.25rem 0}
  .ocn-step{padding:1.25rem 1.25rem 1.75rem}
  .ocn-type-seg{flex-direction:column;border-radius:var(--r)}
  .ocn-type-seg__item{flex-direction:row;gap:.65rem;padding:1rem;border-right:none;border-bottom:1px solid var(--line)}
  .ocn-type-seg__item:last-child{border-bottom:none}
  .ocn-type-seg__item.is-selected::after{display:none}
  .ocn-stepper__num{width:32px;height:32px;font-size:.75rem}
  .ocn-stepper__line{margin:0 .5rem;margin-bottom:1.2rem}
}

/* ── Fields ── */
.ocn-field{margin-bottom:1.25rem}
.ocn-field label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:.35rem}
.ocn-field label .req{color:var(--accent)}
.ocn-field__hint{font-size:13px;color:var(--light);margin-top:.2rem}
.ocn-hint-inline{color:var(--light);font-weight:400}
.ocn-field input[type="text"],
.ocn-field input[type="number"],
.ocn-field input[type="email"],
.ocn-field input[type="tel"],
.ocn-field select,
.ocn-field textarea{width:100%;padding:.7rem 1rem;border:1.5px solid var(--line);border-radius:var(--r);font-family:var(--f);font-size:15px;color:var(--ink);background:var(--bg);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
.ocn-field input:focus,
.ocn-field select:focus,
.ocn-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,.12);background:var(--white)}
.ocn-field textarea{resize:vertical;min-height:80px}
.ocn-field select{background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}

.ocn-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:575.98px){.ocn-row{grid-template-columns:1fr}}

/* ── Chips ── */
.ocn-checks{display:flex;flex-wrap:wrap;gap:.5rem}
.ocn-chip{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:50px;border:1.5px solid var(--line);background:var(--bg);cursor:pointer;font-size:14px;font-weight:500;color:var(--muted);transition:border-color .2s,background .2s,color .2s;user-select:none}
.ocn-chip:hover{border-color:rgba(16,185,129,.3)}
.ocn-chip.is-on{border-color:var(--accent);background:var(--accent-s);color:var(--accent);font-weight:600}
.ocn-chip input{position:absolute;opacity:0;pointer-events:none}

/* ── Contact toggle ── */
.ocn-contact-toggle{display:flex;border-radius:var(--r);overflow:hidden;border:1.5px solid var(--line);background:var(--bg)}
.ocn-contact-toggle label{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem 1rem;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;margin:0;transition:background .2s,color .2s;border-right:1px solid var(--line)}
.ocn-contact-toggle label:last-child{border-right:none}
.ocn-contact-toggle input{position:absolute;opacity:0;pointer-events:none}
.ocn-contact-toggle label.is-on{background:var(--accent);color:#fff}

/* ── GDPR ── */
.ocn-gdpr{display:flex;align-items:flex-start;gap:.65rem;margin:1.25rem 0}
.ocn-gdpr input[type="checkbox"]{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--accent);cursor:pointer}
.ocn-gdpr span{font-size:14px;line-height:1.5;color:var(--muted)}
.ocn-gdpr a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* ── Nav buttons ── */
.ocn-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.25rem;border-top:1px solid var(--line);margin-top:2rem}
.ocn-btn-back{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.25rem;border-radius:50px;font-size:.88rem;font-weight:600;color:var(--muted);background:transparent;border:1.5px solid var(--line);cursor:pointer;transition:border-color .2s,color .2s}
.ocn-btn-back:hover{border-color:var(--accent);color:var(--ink)}
.ocn-btn-next{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.8rem;border-radius:50px;font-size:.92rem;font-weight:700;color:#fff;background:var(--accent);border:2px solid var(--accent);cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;margin-left:auto}
.ocn-btn-next:hover{background:var(--accent-h);border-color:var(--accent-h);transform:translateY(-2px);box-shadow:0 4px 16px rgba(16,185,129,.25)}
.ocn-btn-next:disabled{opacity:.45;pointer-events:none}
.ocn-btn-next svg{transition:transform .25s}
.ocn-btn-next:hover svg{transform:rotate(45deg)}

/* ── Success ── */
.ocn-success{display:none;text-align:center;padding:4rem 2.5rem}
.ocn-success.is-active{display:block}
.ocn-success__ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--accent-s);color:var(--accent);margin:0 auto 1.25rem}
.ocn-success h3{font-size:22px;font-weight:700;color:var(--ink);margin:0 0 .5rem}
.ocn-success p{font-size:16px;line-height:1.65;color:var(--muted);max-width:460px;margin:0 auto}
.ocn-success__meta{margin-top:1.5rem;padding:1rem 1.25rem;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);display:inline-flex;align-items:center;gap:.65rem;font-size:14px;font-weight:600;color:var(--ink)}
.ocn-success__meta svg{color:var(--accent);flex-shrink:0}

.ocn-form__qlabel{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 .85rem}
.ocn-form__note{font-size:13px;color:var(--light);margin:1rem 0 0;text-align:center}

@media(max-width:575.98px){
  .ocn-success{padding:2.5rem 1.25rem}
}

/* ── Validation ── */
.ocn-field input.is-invalid,
.ocn-field select.is-invalid,
.ocn-field textarea.is-invalid{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.ocn-error{font-size:13px;color:#dc2626;margin-top:.3rem;line-height:1.4}
.ocn-gdpr.is-error{background:rgba(220,38,38,.04);border-radius:8px;padding:.65rem;margin-left:-.65rem;margin-right:-.65rem}
.ocn-gdpr-error{font-size:13px;color:#dc2626;margin-top:.15rem;line-height:1.4}
.ocn-submit-msg{text-align:center;font-size:14px;font-weight:600;margin-top:1rem;min-height:1.4em}
.ocn-submit-msg:empty{display:none}
.ocn-submit-msg.is-error{color:#dc2626}
.ocn-submit-msg.is-success{color:var(--emerald)}

@media(max-width:575.98px){.ocn-row{grid-template-columns:1fr}}


/* ─── QUICK ANSWER BOX (pod formulářem nepoužíváme; ponecháno pro budoucí použití) ─── */
.ocn-quick{padding:2rem 2rem 1.75rem;border-radius:var(--rx);background:var(--white);border:1px solid var(--line);box-shadow:var(--sh),0 8px 32px rgba(9,13,26,.06)}
.ocn-quick__head{display:flex;align-items:center;gap:.85rem;margin-bottom:1.25rem}
.ocn-quick__ic{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-s);color:var(--accent)}
.ocn-quick__head h3{font-size:17px;font-weight:700;color:var(--ink);margin:0}
.ocn-quick p{font-size:15.5px;line-height:1.7;color:var(--muted);margin:0 0 .6rem}
.ocn-quick p:last-child{margin-bottom:0}

@media(max-width:767.98px){.ocn-quick{padding:1.5rem 1.25rem}}
@media(min-width:992px){.ocn-quick{position:sticky;top:108px}}


/* ─── FAKTOR CARDS ─── */
.ocn-factor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.125rem;margin-top:2.5rem}
.ocn-factor{padding:1.75rem 1.5rem 1.5rem;border-radius:var(--rl);background:var(--white);border:1px solid var(--line);transition:box-shadow var(--trans),border-color var(--trans),transform var(--trans)}
.ocn-factor:hover{box-shadow:var(--sh-lift);border-color:rgba(16,185,129,.18);transform:translateY(-2px)}
.ocn-factor__head{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-bottom:.85rem}
.ocn-factor__ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;place-items:center;background:var(--accent-s);color:var(--accent);transition:background var(--trans),color var(--trans)}
.ocn-factor:hover .ocn-factor__ic{background:var(--accent);color:#fff}
.ocn-factor__head h3{font-size:16px;font-weight:700;color:var(--ink);margin:0;flex:1;min-width:0}
.ocn-factor__tag{display:inline-block;padding:.2rem .6rem;border-radius:50px;font-size:.68rem;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.ocn-factor__tag--high{background:rgba(16,185,129,.08);color:var(--accent)}
.ocn-factor__tag--mid{background:var(--amber-s);color:var(--amber)}
.ocn-factor__tag--low{background:rgba(107,114,128,.08);color:#6b7280}
.ocn-factor p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0}

.ocn-factor-note{text-align:center;font-size:14px;color:var(--light);margin-top:1.5rem}

@media(max-width:991px){.ocn-factor-grid{grid-template-columns:1fr 1fr}}
@media(max-width:575px){
  .ocn-factor-grid{grid-template-columns:1fr}
  .ocn-factor{padding:1.35rem 1.15rem}
  .ocn-factor__head h3{font-size:14.5px}
  .ocn-factor p{font-size:13px}
  .ocn-factor__ic{width:32px;height:32px;flex:0 0 32px}
}


/* ─── LINK ACCENT ─── */
.ocn-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(16,185,129,.3);transition:text-decoration-color .2s}
.ocn-link:hover{color:var(--accent);text-decoration-color:var(--accent)}


/* ─── PRICE TYPES (tržní / nabídková / výkupní) ─── */
.ocn-price-types{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.ocn-price-card{display:flex;flex-direction:column;padding:2rem 1.75rem 1.75rem;border-radius:var(--rx);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:box-shadow var(--trans),transform var(--trans),border-color var(--trans);position:relative;overflow:hidden}
.ocn-price-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22);box-shadow:0 8px 32px rgba(0,0,0,.2)}
.ocn-price-card--primary{background:rgba(16,185,129,.09);border-color:rgba(52,211,153,.22)}
.ocn-price-card--primary:hover{border-color:rgba(52,211,153,.35);box-shadow:0 10px 40px rgba(16,185,129,.12)}

.ocn-price-card__lab{display:inline-flex;align-items:center;gap:6px;padding:.28rem .7rem;border-radius:50px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:.9rem;align-self:flex-start}
.ocn-price-card--primary .ocn-price-card__lab{background:var(--accent);border-color:var(--accent);color:#fff}

.ocn-price-card h3{font-size:19px;font-weight:700;color:#fff;margin:0 0 .4rem;letter-spacing:-.01em}
.ocn-price-card__sub{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.65);margin:0 0 1.1rem}
.ocn-price-card p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.88);margin:0 0 1rem}
.ocn-price-card__meta{margin-top:auto;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.14)}
.ocn-price-card__meta dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem .85rem}
.ocn-price-card__meta dt{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.02em}
.ocn-price-card__meta dd{font-size:13px;color:rgba(255,255,255,.9);margin:0}

.ocn-price-note{display:flex;align-items:flex-start;gap:.75rem;margin-top:1.75rem;padding:1.15rem 1.35rem;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ocn-price-note svg{flex:0 0 16px;margin-top:.15rem;color:rgba(255,255,255,.5)}
.ocn-price-note p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.78);margin:0}

@media(max-width:991px){.ocn-price-types{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
@media(max-width:575px){
  .ocn-price-card{padding:1.5rem 1.25rem}
  .ocn-price-card h3{font-size:17px}
}


/* ─── WHEN ENOUGH / NOT ENOUGH (dvě karty) ─── */
.ocn-when{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.5rem}
.ocn-when-card{display:flex;flex-direction:column;padding:2rem 1.75rem 1.75rem;border-radius:var(--rl);background:var(--white);border:1.5px solid var(--line);transition:box-shadow var(--trans),transform var(--trans),border-color var(--trans)}
.ocn-when-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.ocn-when-card--yes{border-color:rgba(16,185,129,.18);background:linear-gradient(180deg,rgba(16,185,129,.035) 0%,var(--white) 50%)}
.ocn-when-card--yes:hover{border-color:rgba(16,185,129,.35)}
.ocn-when-card--no{border-color:rgba(180,83,9,.15);background:linear-gradient(180deg,rgba(180,83,9,.025) 0%,var(--white) 50%)}
.ocn-when-card--no:hover{border-color:rgba(180,83,9,.28)}

.ocn-when-card__head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.ocn-when-card__ic{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center}
.ocn-when-card--yes .ocn-when-card__ic{background:var(--accent-s);color:var(--accent)}
.ocn-when-card--no .ocn-when-card__ic{background:var(--amber-s);color:var(--amber)}
.ocn-when-card__head h3{font-size:18px;font-weight:700;color:var(--ink);margin:0}
.ocn-when-card__head span{display:block;font-size:12.5px;font-weight:500;color:var(--light);margin-top:2px}

.ocn-when-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem}
.ocn-when-list li{position:relative;padding-left:1.65rem;font-size:14.5px;line-height:1.55;color:var(--muted)}
.ocn-when-list li::before{content:"";position:absolute;left:0;top:.25rem;width:18px;height:18px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:12px 12px}
.ocn-when-card--yes .ocn-when-list li::before{background-color:var(--accent-s);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.ocn-when-card--no .ocn-when-list li::before{background-color:var(--amber-s);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")}

@media(max-width:767.98px){.ocn-when{grid-template-columns:1fr}}
@media(max-width:575px){
  .ocn-when-card{padding:1.5rem 1.25rem}
  .ocn-when-card__head h3{font-size:16px}
  .ocn-when-list li{font-size:13.5px}
}


/* ─── PROCESS / JAK POSTUPUJEME (světlá timeline) ─── */
.ocn-process{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2.5rem;position:relative}
.ocn-process::before{content:"";position:absolute;top:28px;left:7%;right:7%;height:2px;background:linear-gradient(90deg,var(--line) 0%,rgba(16,185,129,.4) 50%,var(--line) 100%);z-index:0}
.ocn-process__step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;padding:0 .25rem}
.ocn-process__num{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid var(--line);font-size:1rem;font-weight:800;color:var(--accent);margin-bottom:1rem;transition:all .3s;box-shadow:0 4px 16px rgba(9,13,26,.05)}
.ocn-process__step:hover .ocn-process__num{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 8px 24px rgba(16,185,129,.2);transform:translateY(-2px)}
.ocn-process__step h3{font-size:15.5px;font-weight:700;color:var(--ink);margin:0 0 .35rem;line-height:1.25;letter-spacing:-.01em}
.ocn-process__step p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}

@media(max-width:991.98px){
  .ocn-process{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem}
  .ocn-process::before{display:none}
  .ocn-process__step{padding:1.25rem 1.1rem;border-radius:var(--rl);background:var(--white);border:1px solid var(--line)}
  .ocn-process__num{width:44px;height:44px;margin-bottom:.65rem}
}
@media(max-width:575px){
  .ocn-process{grid-template-columns:1fr}
}


/* ─── MISTAKES (chybové karty) ─── */
.ocn-mistakes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.125rem;margin-top:2.5rem}
.ocn-mistake{display:flex;gap:1rem;padding:1.5rem 1.35rem;border-radius:var(--rl);background:var(--white);border:1px solid var(--line);transition:box-shadow var(--trans),border-color var(--trans),transform var(--trans)}
.ocn-mistake:hover{box-shadow:var(--sh-lift);border-color:rgba(180,83,9,.2);transform:translateY(-2px)}
.ocn-mistake__ic{width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:grid;place-items:center;background:var(--amber-s);color:var(--amber)}
.ocn-mistake__body h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 .3rem;line-height:1.3}
.ocn-mistake__body p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}

@media(max-width:991.98px){.ocn-mistakes{grid-template-columns:1fr 1fr}}
@media(max-width:575px){
  .ocn-mistakes{grid-template-columns:1fr}
  .ocn-mistake{padding:1.15rem 1rem}
}


/* ─── CHECKLIST (co si připravit) ─── */
.ocn-checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:2.25rem}
.ocn-checklist__item{display:flex;gap:.85rem;padding:1rem 1.15rem;border-radius:var(--r);background:var(--white);border:1px solid var(--line);transition:border-color .25s,box-shadow .25s,background .25s}
.ocn-checklist__item:hover{border-color:rgba(16,185,129,.2);box-shadow:0 4px 16px rgba(9,13,26,.05);background:var(--white)}
.ocn-checklist__ic{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;background:var(--accent-s);color:var(--accent);margin-top:1px}
.ocn-checklist__body{min-width:0}
.ocn-checklist__body strong{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:.15rem;letter-spacing:-.005em}
.ocn-checklist__body span{display:block;font-size:13px;line-height:1.5;color:var(--light)}

@media(max-width:767.98px){.ocn-checklist{grid-template-columns:1fr}}
@media(max-width:575px){
  .ocn-checklist__item{padding:.85rem 1rem;gap:.7rem}
  .ocn-checklist__body strong{font-size:14px}
  .ocn-checklist__body span{font-size:12.5px}
}


/* ─── LOCAL BLOK ─── */
.ocn-local-photo{position:relative;width:100%;aspect-ratio:4 / 3;border-radius:26px;overflow:hidden;background:var(--bg);box-shadow:0 12px 30px rgba(9,13,26,.06),0 30px 70px rgba(9,13,26,.05)}
.ocn-local-photo picture,
.ocn-local-photo img{display:block;width:100%;height:100%}
.ocn-local-photo img{object-fit:cover;transform:scale(1.01)}

.ocn-local-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.ocn-local-chip{display:inline-flex;align-items:center;padding:.45rem .95rem;border-radius:50px;font-size:13.5px;font-weight:600;color:var(--accent);background:var(--accent-s);border:1px solid rgba(16,185,129,.12);transition:all var(--trans)}
.ocn-local-chip:hover{background:var(--accent);color:#fff;border-color:var(--accent)}


/* ─── FAQ button (aria-controls u accordion) ─── */
.ocn-faq-list{max-width:820px;margin:0 auto}


/* ─── DISCLAIMER ─── */
.ocn-disclaimer{padding:1.25rem 1.5rem;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-left:4px solid var(--accent-glow);font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.78);max-width:820px;margin:0 auto}
.ocn-disclaimer p{margin:0}
.ocn-disclaimer a{color:var(--accent-glow);text-decoration:underline;text-underline-offset:2px}
.ocn-disclaimer strong{color:#fff}


/* ─── FINAL CTA ─── */
.ocn-final-cta{display:flex;flex-direction:column;align-items:center;gap:2rem}
.ocn-final-cta .cta-box{width:100%}


/* ─── MOBILE STICKY ─── */
.ocn-mobile-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:1040;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -4px 24px rgba(9,13,26,.08);gap:8px}
.ocn-mobile-sticky__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border-radius:50px;font-size:.88rem;font-weight:700;text-decoration:none;transition:.25s}
.ocn-mobile-sticky__btn--primary{background:var(--accent);color:#fff}
.ocn-mobile-sticky__btn--primary:hover{background:var(--accent-h);color:#fff}
.ocn-mobile-sticky__btn--secondary{background:var(--white);color:var(--ink);border:1.5px solid var(--line)}
.ocn-mobile-sticky__btn--secondary:hover{border-color:var(--accent)}

@media(max-width:767.98px){.ocn-mobile-sticky{display:flex}}


/* ─── SCROLL REVEAL ─── */
@media(prefers-reduced-motion:no-preference){
  .ocn-factor,.ocn-quick,.ocn-price-card,.ocn-price-note,.ocn-when-card,.ocn-process__step,.ocn-mistake,.ocn-checklist__item,.ocn-local-chip,.ocn-disclaimer,.ocn-aside-point{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
  .sec.is-vis .ocn-factor,.sec.is-vis .ocn-quick,.sec.is-vis .ocn-price-card,.sec.is-vis .ocn-price-note,.sec.is-vis .ocn-when-card,.sec.is-vis .ocn-process__step,.sec.is-vis .ocn-mistake,.sec.is-vis .ocn-checklist__item,.sec.is-vis .ocn-local-chip,.sec.is-vis .ocn-disclaimer,.sec.is-vis .ocn-aside-point{opacity:1;transform:translateY(0)}
}


/* ═══════════════════════════════════════════════════════
   DODATKY PO REVIZI (a11y, přístupnost, skrývání polí)
   ═══════════════════════════════════════════════════════ */

/* ── Univerzální utility pro skrývání polí skrze třídu
      (nahrazuje inline style="display:none").
      Více selektorů kvůli robustnosti — kdyby se někdy změnila
      struktura wrapperu, rule stále platí. ── */
.is-hidden,
.ocn-form-wrap .is-hidden,
.ocn-fields-byt.is-hidden,
.ocn-fields-dum.is-hidden,
.ocn-fields-pozemek.is-hidden,
.ocn-field.is-hidden,
.ocn-step .is-hidden,
.ocn-stepper.is-hidden,
[hidden].ocn-fields-byt,
[hidden].ocn-fields-dum,
[hidden].ocn-fields-pozemek,
.ocn-form-wrap [hidden]{display:none !important}

/* ── Fieldset / legend reset — typ nemovitosti, preferovaný kontakt ── */
.ocn-fieldset{margin:0 0 1.25rem;padding:0;border:0;min-inline-size:0}
.ocn-field__legend{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:.35rem}

/* ── Podtitulek prvního kroku ── */
.ocn-step__sub{font-size:14px;line-height:1.55;color:var(--light);margin:0 0 1.25rem}

/* ── Klávesová přístupnost: viditelný focus ring pro karty a chipy ── */
.ocn-type-seg__item:focus-within,
.ocn-contact-toggle label:focus-within,
.ocn-chip:focus-within{outline:3px solid rgba(16,185,129,.28);outline-offset:3px}

/* ── Aside: bezpečnější výška na menších laptopech ── */
@media(min-width:992px){
  .ocn-form-aside__inner{max-height:calc(100vh - 120px);overflow:auto}
}

/* ── Mobil: prostor pod obsahem kvůli sticky CTA ── */
@media(max-width:767.98px){
  body.page-odhad{padding-bottom:76px}
}

/* ═══════════════════════════════════════════════════════
   AUTOCOMPLETE PRO KATASTRÁLNÍ ÚZEMÍ
   Prefix: .ocn-ac (našeptávač)
   Napojeno přes /assets/js/katastralni-uzemi-autocomplete.js
   ═══════════════════════════════════════════════════════ */

/* Wrapper kolem inputu — drží dropdown relativně. */
.ocn-ac {
  position: relative;
}

/* Dropdown list. */
.ocn-ac__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(9, 13, 26, .08), 0 2px 6px rgba(9, 13, 26, .04);
  max-height: 280px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.4;
}

/* Jedna položka. */
.ocn-ac__opt {
  display: block;
  padding: .55rem .75rem;
  border-radius: calc(var(--r) - 4px);
  cursor: pointer;
  color: var(--ink);
  transition: background-color .12s;
}

.ocn-ac__opt:hover,
.ocn-ac__opt.is-active {
  background: var(--accent-s);
  color: var(--emerald);
}

.ocn-ac__opt strong {
  font-weight: 600;
  color: inherit;
}

/* Meta informace (obec, okres) — menší, šedé. */
.ocn-ac__meta {
  color: var(--light);
  font-size: 13px;
  margin-left: .1rem;
}

.ocn-ac__opt.is-active .ocn-ac__meta {
  color: var(--emerald);
  opacity: .85;
}

/* Informativní poznámka na konci seznamu (scope filtru). */
.ocn-ac__note {
  display: block;
  padding: .5rem .75rem .4rem;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--light);
  font-style: italic;
  cursor: default;
  pointer-events: none;
}

/* Status pro čtečky — vizuálně skrytý. */
.ocn-ac__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scrollbar v dropdownu — diskrétní. */
.ocn-ac__list::-webkit-scrollbar {
  width: 8px;
}
.ocn-ac__list::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.ocn-ac__list::-webkit-scrollbar-thumb:hover {
  background: var(--light);
}

/* Na mobilu zúžíme padding a snížíme max-height, aby se vešel seznam
   nad klávesnici. */
@media (max-width: 575.98px) {
  .ocn-ac__list {
    max-height: 220px;
    font-size: 13.5px;
  }
  .ocn-ac__opt {
    padding: .6rem .7rem;
  }
  .ocn-ac__meta {
    display: block;     /* na mobilu obec na další řádek */
    margin-left: 0;
    margin-top: 2px;
  }
}