/* ==========================================================================
   KONFIGURATOR (wizard)
   Po ugledu na Configurator_Workspace sa referentnog sajta:
   sekcija padding 100px 64px 120px, kartica radius 8px, max-width 1100px,
   dve kolone: levo koraci, desno pregled i tamna kutija.
   ========================================================================== */

.wsec {
  padding: 100px var(--pad-x) 120px;
  display: flex; flex-direction: column; align-items: center;
  gap: 64px;
  position: relative;
}
@media (max-width: 809.98px) { .wsec { gap: 20px; padding: 100px var(--pad-x) 120px; } }

.wcard {
  width: 100%;
  max-width: 1100px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #f5efe3;
  display: flex; flex-flow: row; align-items: stretch;
  overflow: hidden;
  position: relative;
}
@media (max-width: 899.98px) { .wcard { flex-direction: column; } }

/* --- traka sa tackicama u vrhu kartice --- */
.wchrome {
  position: absolute; top: 16px; left: 20px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
}
.wchrome i {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(18,18,18,.18);
  transition: width .35s var(--ease-hover), border-radius .35s var(--ease-hover), background-color .35s var(--ease-hover);
}
.wchrome i.is-on { width: 22px; border-radius: 4px; background: var(--accent); }

/* --- leva kolona: koraci --- */
.wleft {
  flex: 1.35 0 0; min-width: 280px;
  padding: 52px 32px 24px;
  display: flex; flex-direction: column;
}
@media (max-width: 899.98px) { .wleft { padding: 52px 20px 20px; } }

.wstep { display: none; flex: 1; }
.wstep.is-active { display: flex; flex-direction: column; }
.wstep__k {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; font-weight: 400; letter-spacing: .1em; line-height: 1.4em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 8px;
}
.wstep__q {
  font-family: 'Big Shoulders', sans-serif;
  font-size: clamp(1.75rem, 3vw, 40px); font-weight: 600; line-height: 1.15em; letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.wstep__hint { font-size: 14px; line-height: 1.5em; color: var(--muted); margin-bottom: 20px; }

/* --- red izbora, kao njihove Option kartice --- */
.wopts { display: flex; flex-direction: column; gap: 12px; }
/* display:flex bi pregazio hidden atribut, pa mora eksplicitno */
.wopts[hidden] { display: none; }
.wopt {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--cream);
  padding: 16px 18px;
  text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .4s var(--ease-hover), background-color .4s var(--ease-hover);
}
.wopt:hover { border-color: rgba(18,18,18,.4); }
.wopt.is-selected { border-color: var(--accent); background: var(--white); }
.wopt__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.wopt__t { font-size: 16px; font-weight: 700; line-height: 1.6em; color: var(--ink); }
.wopt__tag {
  flex: none;
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4em;
  color: var(--muted);
}
.wopt.is-selected .wopt__tag,
.wopt__tag--on { color: var(--accent); }
.wopt__s { font-size: 14px; line-height: 1.5em; color: var(--muted); }

/* polja u poslednjem koraku */
.wleft .field { margin-bottom: 14px; }
.wleft .field label { font-size: 12px; }
.wleft .field input, .wleft .field textarea { background: var(--cream); }
.wleft .field textarea { min-height: 96px; }

/* --- donja traka sa dugmadima --- */
.wnav {
  margin-top: auto; padding-top: 24px;
  display: flex; align-items: center; gap: 12px;
}
.wnav .btn { min-height: 46px; padding: 12px 24px; font-size: 15px; }
.wnav .btn--go { flex: 1; justify-content: center; }
.wnav .btn:disabled { opacity: .4; cursor: not-allowed; }

/* --- desna kolona: pregled --- */
.wright {
  flex: 1 0 0; min-width: 260px;
  padding: 52px 24px 24px;
  border-left: 1px solid var(--line);
  background: #f0e9dd;
  display: flex; flex-direction: column; gap: 20px;
}
@media (max-width: 899.98px) { .wright { border-left: 0; border-top: 1px solid var(--line); padding: 24px 20px; } }

.wlabel {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4em;
  color: var(--muted);
}
.wright hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

.wsum { display: flex; flex-direction: column; gap: 14px; }
.wsum__row { display: flex; flex-direction: column; gap: 2px; }
.wsum__k {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4em;
  color: var(--muted);
}
.wsum__v { font-size: 16px; font-weight: 700; line-height: 1.6em; color: var(--ink); }
.wsum:empty::after { content: 'Izbor još nije napravljen.'; font-size: 14px; color: var(--muted); }

/* --- tamna kutija sa procenom --- */
.wbox {
  margin-top: auto;
  background: var(--ink);
  border-radius: var(--r);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.wbox__field {
  width: 100%;
  border: 1px solid rgba(250,246,237,.2);
  border-radius: 4px;
  background: transparent;
  padding: 10px 12px;
  display: block;
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(250,246,237,.7);
  text-decoration: none;
  transition: border-color .4s var(--ease-hover), color .4s var(--ease-hover);
}
.wbox__field:hover { border-color: var(--accent); color: var(--accent); }
.wbox__k {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4em;
  color: rgba(250,246,237,.45);
}
.wbox__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wbox__v {
  font-family: 'Big Shoulders', sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 40px); font-weight: 700; line-height: 1;
  color: var(--cream);
}
.wbox__note {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}

/* --- traka napretka --- */
.wprog { width: 100%; max-width: 1100px; display: flex; align-items: center; gap: 16px; }
.wprog__t { flex: 1; height: 1px; background: var(--line); position: relative; }
.wprog__t span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); transition: width .55s var(--ease-appear); }
.wprog__c {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

/* --- potvrda --- */
.wleft[hidden], .wright[hidden], .wprog[hidden] { display: none !important; }
.wdone { display: none; padding: 96px 32px; text-align: center; width: 100%; }
.wdone.is-active {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 420px;
}
.wdone .tick {
  width: 56px; height: 56px; margin: 0 auto 20px;
  border: 1px solid var(--accent); border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; color: var(--accent);
}

/* Telefon: dugmad u konfiguratoru se lome umesto da probiju ivicu */
@media (max-width: 809.98px) {
  .wnav { flex-wrap: wrap; }
  .wnav .btn { flex: 1 1 100%; padding: 12px 16px; }
  .wnav .btn--outline { flex: 1 1 auto; }
}

/* Telefon: sadrzaj u konfiguratoru je bio uvucen 64px sa svake strane
   (sekcija 20 + kartica 24 + kolona 20), pa su opcije ostajale uske. */
@media (max-width: 809.98px) {
  .wsec { padding-inline: 12px; }
  .wcard.wizard { padding: 0; }
  .wleft { padding: 44px 16px 16px; }
  .wright { padding: 20px 16px 24px; }
  .wchrome { left: 16px; }
  .wopt { padding: 14px 14px; }
}