/* Zebra Registreerimisvorm v1.0 */

/* Font fix: vorm kasutab lehe/Avada enda fonti, mitte brauseri või plugina fonti */
.zr-form,
.zr-form *,
.zr-form input,
.zr-form select,
.zr-form textarea,
.zr-form button {
  font-family: inherit !important;
}

.zr-form {
  --y: #f5d800; --yh: #e5ca00; --dk: #111;
  --bg: var(--bg, #faf9f6); --card: var(--card, #fff);
  --bdr: rgba(0,0,0,.09); --muted: #666;
  --radius: 4px; --tr: .2s ease;
  max-width: 780px; margin: 0 auto; padding: 0 0 40px;
  font-family: inherit;
}

/* ── Sammude riba ── */
.zr-steps {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 36px; padding: 24px 0 20px;
  border-bottom: 1px solid var(--bdr);
}
.zr-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; flex: 0 0 auto;
}
.zr-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--bdr); display: flex;
  align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--muted);
  background: var(--card); transition: all var(--tr);
}
.zr-step.active .zr-step-num {
  background: var(--y); border-color: var(--y); color: var(--dk);
}
.zr-step.done .zr-step-num {
  background: var(--dk); border-color: var(--dk); color: var(--y);
}
.zr-step-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.zr-step.active .zr-step-lbl { color: var(--dk); }
.zr-step.done .zr-step-lbl   { color: var(--dk); }
.zr-step-line {
  flex: 1; height: 2px; background: var(--bdr);
  margin: 0 8px; margin-bottom: 18px; transition: background var(--tr);
}

/* ── Panel ── */
.zr-panel { display: none; }
.zr-panel.active { display: block; }
.zr-panel-title {
  font-size: 1.5rem; font-weight: 700; color: var(--dk);
  margin: 0 0 4px; letter-spacing: .01em;
}
.zr-panel-sub {
  font-size: .88rem; color: var(--muted); margin: 0 0 24px;
}

/* ── Kategooria kaardid ── */
.zr-cat-groups { display: flex; flex-direction: column; gap: 20px; }
.zr-cat-group-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.zr-cat-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.zr-cat-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 18px; min-width: 120px;
  border: 1px solid var(--bdr); border-radius: var(--radius);
  background: var(--card); cursor: pointer;
  transition: border-color var(--tr), background var(--tr), transform var(--tr);
  font-family: inherit;
}
.zr-cat-card:hover {
  border-color: rgba(245,216,0,.4); background: rgba(245,216,0,.05);
  transform: translateY(-1px);
}
.zr-cat-card.selected {
  border: 2px solid var(--y); background: rgba(245,216,0,.08);
}
.zr-cat-icon { font-size: 1.4rem; }
.zr-cat-name { font-size: .82rem; font-weight: 600; color: var(--dk); text-align: center; }

/* ── Choice kaardid (linn, õppeviis) ── */
.zr-choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 20px; }
.zr-choice-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 20px 16px;
  border: 1px solid var(--bdr); border-radius: var(--radius);
  background: var(--card); cursor: pointer;
  transition: border-color var(--tr), background var(--tr), transform var(--tr);
  font-family: inherit;
}
.zr-choice-card:hover {
  border-color: rgba(245,216,0,.4); transform: translateY(-2px);
}
.zr-choice-card.selected {
  border: 2px solid var(--y); background: rgba(245,216,0,.07);
}
.zr-choice-icon { font-size: 1.8rem; }
.zr-choice-title { font-size: .88rem; font-weight: 700; color: var(--dk); }
.zr-choice-sub   { font-size: .78rem; color: var(--muted); text-align: center; }

/* ── Group select ── */
.zr-group-select { margin-bottom: 20px; }
.zr-select {
  width: 100%; padding: 10px 14px; font-size: .88rem;
  border: 1px solid var(--bdr); border-radius: var(--radius);
  background: var(--card); color: var(--dk); font-family: inherit;
}
.zr-select:focus { outline: none; border-color: var(--y); box-shadow: 0 0 0 3px rgba(245,216,0,.15); }

/* ── Form fields ── */
.zr-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zr-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.zr-field-label { font-size: .8rem; font-weight: 600; color: var(--dk); }
.zr-req { color: #c00; }
.zr-field-hint { font-size: .75rem; color: var(--muted); margin: 2px 0 0; }
.zr-field input, .zr-field textarea {
  padding: 10px 13px; font-size: .9rem;
  border: 1px solid var(--bdr); border-radius: var(--radius);
  background: var(--card); color: var(--dk); font-family: inherit;
  transition: border-color var(--tr);
}
.zr-field input:focus, .zr-field textarea:focus {
  outline: none; border-color: var(--y); box-shadow: 0 0 0 3px rgba(245,216,0,.15);
}
.zr-field input.invalid { border-color: #c00; }
textarea { resize: vertical; min-height: 72px; }

/* ── Consent ── */
.zr-consent {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--bdr);
  border-radius: var(--radius); background: rgba(245,216,0,.04);
  margin-bottom: 16px; font-size: .83rem; color: var(--muted); line-height: 1.55;
}
.zr-consent input[type=checkbox] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--y); }
.zr-consent a { color: var(--dk); }

/* ── Summary ── */
.zr-summary {
  border: 1px solid var(--bdr); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 20px;
}
.zr-sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 16px; border-bottom: 1px solid var(--bdr); font-size: .88rem;
}
.zr-sum-row:last-child { border-bottom: none; }
.zr-sum-key { color: var(--muted); flex-shrink: 0; margin-right: 16px; }
.zr-sum-val { font-weight: 600; color: var(--dk); text-align: right; }

/* ── Buttons ── */
.zr-btn-row {
  display: flex; gap: 12px; align-items: center;
  justify-content: space-between; margin-top: 8px;
}
.zr-btn-back {
  padding: 10px 20px; font-size: .85rem; font-family: inherit;
  border: 1px solid var(--bdr); border-radius: var(--radius);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background var(--tr);
}
.zr-btn-back:hover { background: rgba(0,0,0,.04); }
.zr-btn-next, .zr-btn-submit {
  padding: 12px 28px; font-size: .88rem; font-weight: 700;
  font-family: inherit; border: none; border-radius: var(--radius);
  background: var(--y); color: var(--dk); cursor: pointer;
  transition: background var(--tr), transform var(--tr);
  margin-left: auto;
}
.zr-btn-next:hover, .zr-btn-submit:hover { background: var(--yh); transform: translateY(-1px); }
.zr-btn-submit:disabled { background: #ddd; color: #999; cursor: not-allowed; transform: none; }

/* ── Error ── */
.zr-error {
  padding: 12px 16px; border-radius: var(--radius);
  background: rgba(200,0,0,.07); border: 1px solid rgba(200,0,0,.2);
  color: #8b0000; font-size: .85rem; margin-bottom: 12px;
}

/* ── Success ── */
.zr-success { text-align: center; padding: 40px 20px; }
.zr-success-icon {
  width: 60px; height: 60px; border-radius: 50%; background: var(--y);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 16px; color: var(--dk);
}
.zr-success h2 { font-size: 1.5rem; margin-bottom: 8px; }
.zr-success p  { color: var(--muted); margin-bottom: 20px; }
.zr-success-info {
  display: inline-block; padding: 14px 24px;
  background: rgba(245,216,0,.1); border: 1px solid rgba(245,216,0,.3);
  border-radius: var(--radius); font-size: .88rem; line-height: 1.8;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .zr-field-row { grid-template-columns: 1fr; }
  .zr-cat-card { min-width: 100px; padding: 12px; }
  .zr-steps { overflow-x: auto; padding-bottom: 8px; }
  .zr-step-lbl { display: none; }
}

/* ── Inactive linn (gruppe pole) ──────────────────────────────────────────── */
.zr-choice-card.zr-city-inactive {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: #f5f5f5;
  border-color: #ddd !important;
  box-shadow: none !important;
}

.zr-choice-card.zr-city-inactive .zr-choice-icon { filter: grayscale(1); }
.zr-choice-card.zr-city-inactive .zr-choice-title { color: #888; }

.zr-city-status {
  font-size: .75rem;
  line-height: 1.4;
  color: #888;
  margin-top: 6px;
  min-height: 0;
}

.zr-city-email {
  color: #888;
  text-decoration: underline;
  font-size: .75rem;
  pointer-events: auto;
  cursor: pointer;
}

.zr-city-email:hover { color: #555; }

/* ── E-õpe kuupäevavalija ─────────────────────────────────────────────────── */
.zr-date-select { margin-top: 24px; }

.zr-date-select .zr-input {
  display: block;
  width: 100%;
  max-width: 280px;
  padding: 10px 14px;
  font-size: 1rem;
  border: 2px solid #ddd;
  border-radius: 6px;
  margin-top: 6px;
  transition: border-color .15s;
}
.zr-date-select .zr-input:focus { border-color: #F0D501; outline: none; }

/* ── Geen gruppe — teade ──────────────────────────────────────────────────── */
.zr-no-group-msg {
  margin-top: 20px;
  padding: 16px 20px;
  background: #fff8e1;
  border-left: 4px solid #F0D501;
  border-radius: 4px;
  font-size: .9rem;
  color: #555;
  line-height: 1.6;
}
.zr-no-group-msg a { color: #333; font-weight: 600; }


/* Neutral and lighter demo/placeholder values */
.zr-wrap input::placeholder,
.zr-wrap textarea::placeholder {
    color: #b8b8b8;
    opacity: 1;
}
.zr-wrap input::-webkit-input-placeholder,
.zr-wrap textarea::-webkit-input-placeholder {
    color: #b8b8b8;
}
.zr-wrap input::-moz-placeholder,
.zr-wrap textarea::-moz-placeholder {
    color: #b8b8b8;
    opacity: 1;
}


/* 1.4.0 */
.zr-form, .zr-form button, .zr-form input, .zr-form select, .zr-form textarea,
.zr-form h1, .zr-form h2, .zr-form h3, .zr-form p, .zr-form label {
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.zr-step.done { cursor: pointer; }
.zr-step.done:hover .zr-step-num { border-color: var(--y); transform: translateY(-1px); }
.zr-step-num { transition: border-color .2s ease, transform .2s ease; }


/* v1.6.0 */
.zr-group-card .zr-choice-title{font-weight:800}
.zr-group-full{opacity:.6;cursor:not-allowed!important}
.zr-group-full .zr-choice-sub{font-weight:800;color:#8b1e1e}
@media(max-width:700px){
  .zr-steps{overflow-x:auto;justify-content:flex-start;padding-bottom:6px}
  .zr-step{min-width:58px}
  .zr-step-lbl{font-size:9px}
}


/* v1.6.1 — city selector polish */
.zr-city-card{
  position:relative;
  overflow:hidden;
  min-height:122px;
  transition:border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.zr-city-card:hover,
.zr-city-card:focus-visible{
  background:#fffdf0;
  border-color:#e4c900;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.zr-city-icon{
  position:relative;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin:0 auto 10px;
  color:#171717;
}
.zr-city-icon-bg{
  position:absolute;
  width:30px;
  height:30px;
  border-radius:8px;
  background:#f5d800;
  opacity:.55;
  transform:rotate(-8deg);
}
.zr-city-icon svg{
  position:relative;
  z-index:1;
  width:34px;
  height:34px;
  display:block;
}
.zr-city-card .zr-choice-title{
  position:relative;
  z-index:1;
}
.zr-city-arrow{
  position:absolute;
  right:14px;
  bottom:12px;
  font-size:18px;
  line-height:1;
  opacity:0;
  transform:translateX(-5px);
  transition:opacity .18s ease, transform .18s ease;
}
.zr-city-card:hover .zr-city-arrow,
.zr-city-card:focus-visible .zr-city-arrow{
  opacity:1;
  transform:translateX(0);
}
@media (prefers-reduced-motion: reduce){
  .zr-city-card,
  .zr-city-arrow{
    transition:none;
  }
}


/* v1.7.8 — klikitav sammuriba */
.zr-step{
  cursor:default;
  outline:none;
  user-select:none;
}
.zr-step.can-go-back{cursor:pointer}
.zr-step.can-go-back:hover .zr-step-num,
.zr-step.can-go-back:focus-visible .zr-step-num{
  border-color:var(--y);
  box-shadow:0 0 0 3px rgba(245,216,0,.16);
  transform:translateY(-1px);
}
.zr-step.can-go-back:focus-visible{outline:none}
.zr-step.skipped{
  opacity:.42;
  cursor:default;
}
.zr-step.skipped .zr-step-num{
  background:#f5f5f5;
  border-color:#dedede;
  color:#999;
}
.zr-step.skipped .zr-step-lbl{color:#999}

/* v1.7.8 — mittesaadavad kursused */
.zr-cat-card.zr-cat-unavailable{
  min-width:150px;
  max-width:220px;
  cursor:default;
  background:#f3f3f3;
  border-color:#dedede;
  color:#777;
  transform:none;
  opacity:.84;
}
.zr-cat-card.zr-cat-unavailable:hover{
  background:#f3f3f3;
  border-color:#dedede;
  transform:none;
}
.zr-cat-unavailable .zr-cat-icon{
  filter:grayscale(1);
  opacity:.55;
}
.zr-cat-unavailable .zr-cat-name{color:#666}
.zr-cat-status{
  max-width:190px;
  font-size:.72rem;
  line-height:1.35;
  color:#777;
  text-align:center;
}
.zr-cat-contact{
  max-width:190px;
  font-size:.7rem;
  line-height:1.35;
  color:#555;
  text-align:center;
}
.zr-cat-contact a{
  color:#333;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
.zr-no-group-contact{margin-bottom:0}

@media(max-width:600px){
  .zr-cat-card.zr-cat-unavailable{max-width:none}
}


/* v1.7.9 — kontaktipõhise registreerimise kursusekaart */
.zr-cat-card.zr-cat-contact-only{
  min-width:170px;
  max-width:240px;
  cursor:default;
  background:#fffdf0;
  border-color:#eadb75;
  color:#333;
  transform:none;
}
.zr-cat-card.zr-cat-contact-only:hover{
  background:#fffdf0;
  border-color:#eadb75;
  transform:none;
}
.zr-cat-contact-only .zr-cat-icon{
  filter:none;
  opacity:.9;
}
.zr-cat-contact-only .zr-cat-name{
  color:#171717;
}
.zr-cat-contact-title{
  max-width:200px;
  font-size:.72rem;
  line-height:1.35;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#5c5300;
  text-align:center;
}
.zr-cat-contact-only .zr-cat-status{
  color:#555;
}
.zr-cat-contact-only .zr-cat-contact{
  color:#333;
}
.zr-cat-contact-only .zr-cat-contact a{
  color:#171717;
}

@media(max-width:600px){
  .zr-cat-card.zr-cat-contact-only{
    max-width:none;
  }
}


/* =========================================================
   Zebra Registration 1.8.3 — kursuse lisainfo alles vajutamisel
   ========================================================= */

/* Mittesaadav / kontaktikursus on endiselt nupp, aga kaart ise jääb puhas. */
.zr-cat-card.zr-cat-unavailable,
.zr-cat-card.zr-cat-contact-only{
  min-width:0;
  max-width:none;
  cursor:pointer;
  transform:none;
}

.zr-cat-card.zr-cat-unavailable{
  background:#f3f3f3;
  border-color:#dedede;
  color:#666;
  opacity:.88;
}

.zr-cat-card.zr-cat-unavailable:hover,
.zr-cat-card.zr-cat-unavailable:focus-visible{
  background:#ebebeb;
  border-color:#bdbdbd;
  transform:translateY(-1px);
}

.zr-cat-card.zr-cat-contact-only{
  background:#fffdf4;
  border-color:#e4d88f;
  color:#222;
}

.zr-cat-card.zr-cat-contact-only:hover,
.zr-cat-card.zr-cat-contact-only:focus-visible{
  background:#fff9da;
  border-color:#cbb94b;
  transform:translateY(-1px);
}

.zr-cat-card.zr-cat-unavailable.is-info-open,
.zr-cat-card.zr-cat-contact-only.is-info-open{
  box-shadow:0 0 0 3px rgba(245,216,0,.18);
  border-color:#d6be00;
}

.zr-cat-unavailable .zr-cat-icon{
  filter:grayscale(1);
  opacity:.58;
}

/* Vana kaardisisene info on v1.8.3-st eemaldatud. */
.zr-cat-status,
.zr-cat-contact,
.zr-cat-contact-title{
  display:none;
}

/* Üks selge infokast kursusevalikute all. */
.zr-course-info-box{
  position:relative;
  margin:18px 0 8px;
  padding:18px 48px 18px 20px;
  border:1px solid #ddd;
  border-left:4px solid var(--y);
  border-radius:10px;
  background:#fafafa;
}

.zr-course-info-title{
  margin-bottom:6px;
  font-weight:800;
  font-size:1rem;
  color:#171717;
}

.zr-course-info-text{
  line-height:1.55;
  color:#444;
}

.zr-course-info-contact{
  margin-top:10px;
  font-size:.9rem;
  color:#555;
}

.zr-course-info-contact a{
  color:#171717;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}

.zr-course-info-close{
  position:absolute;
  top:10px;
  right:12px;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#666;
  font-size:22px;
  line-height:30px;
  cursor:pointer;
}

.zr-course-info-close:hover,
.zr-course-info-close:focus-visible{
  background:#eee;
  color:#111;
  outline:none;
}

@media(max-width:600px){
  .zr-course-info-box{
    padding:16px 42px 16px 16px;
  }
}


/* v1.8.4 — neutraalne SVG-kalender grupikaardil */
.zr-calendar-icon{
  color:#5a5f66;
}
.zr-calendar-icon svg{
  display:block;
  width:30px;
  height:30px;
  margin:0 auto;
}


/* =========================================================
   Zebra Registration 1.8.5 — kursusekaartide värviloogika
   ========================================================= */

/*
 * Ühtne tähendus:
 * - valge = kursus / kontaktiga kursus
 * - hall = hetkel mittesaadav
 * - kollane = ainult päriselt valitud aktiivne kursus
 */

/* "Võta ühendust" kaart ei ole enne vajutamist erivärviline. */
.zr-cat-card.zr-cat-contact-only{
  background:#fff;
  border-color:#dedede;
  color:#171717;
  opacity:1;
}

.zr-cat-card.zr-cat-contact-only:hover,
.zr-cat-card.zr-cat-contact-only:focus-visible{
  background:#fafafa;
  border-color:#c8c8c8;
  transform:translateY(-1px);
}

/* Infokasti avamine EI võrdu kursuse valimisega. */
.zr-cat-card.zr-cat-contact-only.is-info-open,
.zr-cat-card.zr-cat-unavailable.is-info-open{
  box-shadow:none;
}

.zr-cat-card.zr-cat-contact-only.is-info-open{
  background:#fff;
  border-color:#c8c8c8;
}

.zr-cat-card.zr-cat-unavailable.is-info-open{
  background:#ebebeb;
  border-color:#bdbdbd;
}

/* Valitud aktiivne kursus on ainus kollane olek. */
.zr-cat-card.selected:not(.zr-cat-unavailable):not(.zr-cat-contact-only){
  background:#fffdf0;
  border-color:var(--y);
  box-shadow:0 0 0 1px var(--y);
}