/* wizard.css — легший, з повітрям і акцентами */

.wHidden{ display:none !important; }

:root{
  --wBorder: rgba(22,36,41,.10);
  --wBorder2: rgba(22,36,41,.08);
  --wText: rgba(22,36,41,.86);
  --wText2: rgba(22,36,41,.62);
  --wBg: rgba(255,255,255,.72);
  --wBg2: rgba(255,255,255,.58);
  --wShadow: 0 12px 30px rgba(22,36,41,.08);
  --wShadow2: 0 10px 22px rgba(22,36,41,.06);
}

.wPage{ padding-bottom: 1.6rem; }

.wSection{ padding: 1.15rem 0 1rem; }

/* 90% ширини */
.wContainer{
  width: min(90vw, 1380px);
  margin: 0 auto;
  padding: 0 14px;
}
@media (max-width: 980px){
  .wContainer{ width: 100%; padding: 0 12px; }
}

/* Shell */
.wWrap{
  border-radius: 26px;
  border: 1px solid var(--wBorder);
  background:
    radial-gradient(820px 360px at 12% 0%, rgba(173,141,242,.18), transparent 60%),
    radial-gradient(820px 360px at 100% 12%, rgba(121,255,204,.10), transparent 58%),
    rgba(255,255,255,.80);
  box-shadow: var(--wShadow);
  overflow: hidden;
}

/* Header */
.wHeader{
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--wBorder2);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
}

.wHeaderTop{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wTitle{ display:flex; gap: 10px; align-items:baseline; flex-wrap: wrap; }
.wTitle__h{ font-weight: 850; letter-spacing: -.02em; color: var(--wText); }
.wTitle__t{ color: var(--wText2); font-weight: 600; }

.wHeaderHint{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color: var(--wText2);
  font-weight: 600;
  font-size: .92rem;
}
.wHeaderHint__dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(72,17,191,.30);
}

/* Progress */
.wProgress{
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(22,36,41,.07);
  overflow:hidden;
}
.wProgress__bar{
  height: 100%;
  width: 0%;
  background: var(--grad);
  border-radius: 999px;
  transition: width .18s ease;
}

/* Steps (компактніше, не жирно) */
.wSteps{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.wStepPill{
  appearance:none;
  border: 1px solid rgba(22,36,41,.09);
  background: rgba(255,255,255,.62);
  color: rgba(22,36,41,.70);
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 650;
  font-size: .86rem;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.wStepPill:hover{ transform: translateY(-1px); }
.wStepPill.is-active{
  color: #fff;
  background: var(--grad);
  border-color: rgba(72,17,191,.18);
}

/* Body */
.wBody{ padding: 20px; }
.wSlide{ animation: wFade .14s ease; }
@keyframes wFade { from {opacity: 0; transform: translateY(2px);} to {opacity:1; transform: translateY(0);} }

/* Card */
.wCard{
  border-radius: 22px;
  border: 1px solid var(--wBorder);
  background: var(--wBg);
  box-shadow: var(--wShadow2);
  padding: 18px;
}

.wCard__h{
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.04rem;
  color: var(--wText);
}
.wCard__top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.wMiniActions{ display:flex; gap: 8px; flex-wrap: wrap; }

/* Slide 0: чистий, мінімальний */
.wHeroCard{ padding: 18px; }
.wPill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(22,36,41,.09);
  background: rgba(255,255,255,.62);
  color: rgba(22,36,41,.74);
  font-weight: 650;
  font-size: .92rem;
}
.wPill__dot{
  width: 9px; height: 9px;
  border-radius: 999px;
  background: rgba(72,17,191,.26);
}

.wHeroH{
  margin: 14px 0 8px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.04;
  font-size: clamp(32px, 3.2vw, 54px);
  color: rgba(12,18,20,.96);
}

.wHeroLead{
  margin: 0;
  color: var(--wText2);
  font-weight: 600;
  line-height: 1.6;
  max-width: 85ch;
}

.wHeroCtas{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Accordion */
.wDetails{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.09);
  background: rgba(255,255,255,.56);
  overflow: hidden;
}
.wDetails__sum{
  list-style: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  font-weight: 700;
  color: rgba(22,36,41,.78);
}
.wDetails__sum::-webkit-details-marker{ display:none; }
.wDetails[open] .wDetails__sum i{ transform: rotate(180deg); }
.wDetails__sum i{ transition: transform .15s ease; color: rgba(22,36,41,.55); }
.wDetails__body{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(22,36,41,.08);
}

.wList{
  margin: 0;
  padding-left: 18px;
  color: rgba(22,36,41,.72);
  font-weight: 600;
  line-height: 1.6;
}

/* Hint */
.wHint{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(72,17,191,.14);
  background: rgba(72,17,191,.06);
}
.wHint__badge{
  display:inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(72,17,191,.18);
  background: rgba(255,255,255,.62);
  color: rgba(72,17,191,.95);
  font-weight: 800;
  font-size: .84rem;
}
.wHint__text{ color: rgba(22,36,41,.70); font-weight: 600; line-height: 1.55; }

/* Fields */
.wField{ display:grid; gap: 8px; }
.wLabel{ font-weight: 700; color: rgba(22,36,41,.76); }
.wSelect{
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(22,36,41,.12);
  background: rgba(255,255,255,.78);
  font-weight: 650;
  outline: none;
}
.wSelect:focus{ border-color: rgba(72,17,191,.30); box-shadow: 0 0 0 3px rgba(72,17,191,.10); }

.wMeta{ color: var(--wText2); font-weight: 600; font-size: .95rem; }

/* Info box */
.wInfoBox{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(22,36,41,.09);
  background: rgba(255,255,255,.52);
}
.wInfoBox__ico{
  width: 34px; height: 34px;
  border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid rgba(22,36,41,.08);
  background: rgba(255,255,255,.66);
  color: rgba(22,36,41,.60);
}
.wInfoBox__text{ color: rgba(22,36,41,.70); font-weight: 600; line-height: 1.55; }

.wChips{ display:flex; flex-wrap: wrap; gap: 8px; }
.wChip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(22,36,41,.09);
  background: rgba(255,255,255,.58);
  font-weight: 650;
  color: rgba(22,36,41,.72);
}
.wChip input{ width: 16px; height: 16px; }

.wEmpty{ color: rgba(22,36,41,.55); font-weight: 600; padding: 2px 0; }

.wSubtopics{ display:grid; gap: 12px; }
.wSubBlock{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.09);
  background: rgba(255,255,255,.56);
}
.wSubBlock__title{ font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.wSubBlock__chips{ display:flex; flex-wrap: wrap; gap: 8px; }

/* Config table */
.wTableWrap{
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.09);
  overflow:hidden;
  background: rgba(255,255,255,.56);
}
.wTableHead{
  display:grid;
  grid-template-columns: 1.6fr .55fr .9fr .35fr;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(72,17,191,.05);
  font-weight: 750;
  color: rgba(22,36,41,.68);
}
.wTableBody{ padding: 8px 8px; }

.wRow{
  display:grid;
  grid-template-columns: 1.6fr .55fr .9fr .35fr;
  gap: 10px;
  align-items:center;
  padding: 10px 8px;
  border-radius: 14px;
}
.wRow + .wRow{ border-top: 1px solid rgba(22,36,41,.07); }
.wRow__name{ font-weight: 750; color: rgba(22,36,41,.78); }
.wNum, .wSel{
  width: 100%;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.76);
  font-weight: 650;
  outline: none;
}
.wNum:focus, .wSel:focus{ border-color: rgba(72,17,191,.26); box-shadow: 0 0 0 3px rgba(72,17,191,.10); }

.wActionsRow{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Preview */
.wPreview{ display:grid; gap: 12px; }
.wQ{
  border-radius: 18px;
  border: 1px solid rgba(22,36,41,.09);
  background: rgba(255,255,255,.56);
  padding: 12px;
}
.wQ__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.wDivider{ margin: 16px 0; height: 1px; background: rgba(22,36,41,.07); }

/* Share */
.wShare{
  padding: 14px;
  border-radius: 18px;
  border: 1px dashed rgba(72,17,191,.26);
  background: rgba(72,17,191,.05);
}

/* Nav */
.wNav{
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(22,36,41,.07);
  background: rgba(255,255,255,.55);
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 10px;
}
.wNav__center{ display:flex; justify-content:center; }
.wNav__label{ color: rgba(22,36,41,.58); font-weight: 650; }

/* Footer */
.wFooter{ margin-top: 14px; padding: 14px 0 8px; }
.wFooter__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.wFooter__brand{ display:flex; align-items:center; gap: 10px; }
.wFooter__title{ font-weight: 850; letter-spacing: -.02em; }
.wFooter__text{ color: rgba(22,36,41,.58); font-weight: 600; margin-top: 2px; }
.wFooter__links{ display:flex; gap: 14px; flex-wrap: wrap; }
.wFooter__links a{ color: rgba(22,36,41,.68); font-weight: 650; text-decoration: none; }
.wFooter__links a:hover{ text-decoration: underline; }

/* Mobile */
@media (max-width: 980px){
  .wBody{ padding: 14px; }
  .wHeader{ padding: 14px 14px 12px; }
  .wNav{ grid-template-columns: 1fr; padding: 12px 14px 14px; }
  .wNav__center{ order: -1; justify-content:flex-start; }

  .wTableHead{ display:none; }
  .wRow{ grid-template-columns: 1fr; gap: 8px; padding: 12px 10px; }
}
/* Nav */
.wNav{
  padding: 14px 20px 18px;
  background: rgba(255,255,255,55);
  display:grid;

  /* було: 1fr auto 1fr */
  grid-template-columns: auto 1fr auto;

  align-items:center;
  gap: 10px;
}

/* щоб точно не тягнуло */
.wNav > button{
  justify-self: start;
  width: fit-content;
}

.wNav > button#nextBtn{
  justify-self: end;
}

.wNav__center{
  display:flex;
  justify-content:center;
}

.wNav button {
    min-width: 320px;
}