/* D187 kreator usług wulkanizacji (ModD187; E3-02, E3-05 „Dodaj usługę”) — elements as E1-02a */
.fjn-twz { display: flex; flex-direction: column; gap: 10px; }
.fjn-twz__label { font-size: 13px; font-weight: 700; color: var(--fjn-text); }
.fjn-twz__label.is-off { color: var(--fjn-text-disabled); }
.fjn-twz__hint { margin: 0; font-size: 13px; color: var(--fjn-text-2); }
.fjn-twz__hint.is-warn { color: #8A5300; font-weight: 700; }
.fjn-twz__mains, .fjn-twz__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fjn-twz__main {
  min-height: 56px; padding: 8px 12px; border: 1px solid var(--fjn-border); border-radius: 8px;
  background: var(--fjn-surface); color: var(--fjn-text); font: 700 15px var(--fjn-font); text-align: left; cursor: pointer;
}
.fjn-twz__main.is-on, .fjn-twz__level.is-on, .fjn-twz__segbtn.is-on { background: var(--fjn-brand-600); border-color: var(--fjn-brand-600); color: #fff; }
.fjn-twz__levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fjn-twz__level {
  min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--fjn-border); border-radius: 8px; background: var(--fjn-surface); color: var(--fjn-text); font: 700 14px var(--fjn-font); cursor: pointer;
}
.fjn-twz__level span { font-size: 12px; font-weight: 400; }
.fjn-twz__sizehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fjn-twz__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #E3ECF7; color: #173F6F; font-size: 13px; font-weight: 700; }
.fjn-twz__size {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; height: 64px; overflow: hidden;
  border: 1px solid var(--fjn-border); border-radius: 8px; background: var(--fjn-surface);
}
.fjn-twz__size.is-missing { border: 2px solid #C77700; }
.fjn-twz__sstep { border: 0; background: #F4F5F6; font-size: 26px; color: var(--fjn-text); cursor: pointer; }
.fjn-twz__sstep:first-child { border-right: 1px solid var(--fjn-border); }
.fjn-twz__sstep:last-child { border-left: 1px solid var(--fjn-border); }
.fjn-twz__sstep:disabled { color: var(--fjn-text-disabled); cursor: default; }
.fjn-twz__sval { display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; }
.fjn-twz__sval.is-empty { color: var(--fjn-text-disabled); }
.fjn-twz__wheels { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fjn-twz__wheels .fjn-twz__label { flex: 1; }
.fjn-twz__stepper { display: inline-flex; height: 56px; border: 1px solid var(--fjn-border); border-radius: 8px; overflow: hidden; background: var(--fjn-surface); }
.fjn-twz__step { width: 56px; border: 0; background: var(--fjn-surface); font-size: 22px; color: var(--fjn-text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fjn-twz__step:disabled { color: var(--fjn-text-disabled); cursor: default; }
.fjn-twz__step:disabled + .fjn-twz__val:has(+ .fjn-twz__step:disabled) { color: var(--fjn-text-disabled); }
.fjn-twz__val { width: 56px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; border-left: 1px solid var(--fjn-border); border-right: 1px solid var(--fjn-border); }
.fjn-twz__price { font-size: 15px; }
.fjn-twz__toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fjn-twz__toggle { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fjn-twz__seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fjn-twz__segbtn { height: 56px; border: 1px solid var(--fjn-border); border-radius: 8px; background: var(--fjn-surface); font: 700 15px var(--fjn-font); color: var(--fjn-text); cursor: pointer; }
.fjn-twz__sep { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--fjn-surface-2); }
.fjn-twz__added, .fjn-twz__row {
  min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; box-sizing: border-box;
  border-radius: 8px; background: #F4F5F6;
}
.fjn-twz__added > span, .fjn-twz__row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fjn-twz__added small, .fjn-twz__row small, .fjn-twz__tile small, .fjn-twz__hit small { font-size: 13px; color: var(--fjn-text-2); }
.fjn-twz__x { width: 40px; height: 40px; border: 0; background: none; color: var(--fjn-text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fjn-twz__card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 2px solid var(--fjn-brand-600); border-radius: 10px; }
.fjn-twz__cardhead { display: flex; align-items: center; gap: 8px; }
.fjn-twz__cardhead b { flex: 1; font-size: 17px; }
.fjn-twz__radios { display: flex; flex-direction: column; border: 1px solid var(--fjn-border); border-radius: 8px; overflow: hidden; }
.fjn-twz__radio {
  min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--fjn-surface-2);
  background: var(--fjn-surface); color: var(--fjn-text); font: 15px var(--fjn-font); text-align: left; cursor: pointer;
}
.fjn-twz__radio:last-child { border-bottom: 0; }
.fjn-twz__radio b { flex: 1; font-weight: 400; }
.fjn-twz__radio.is-on { background: #EEF3FA; }
.fjn-twz__radio.is-on b { font-weight: 700; }
.fjn-twz__dot { width: 20px; height: 20px; border: 2px solid var(--fjn-text-2); border-radius: 50%; box-sizing: border-box; flex: none; }
.fjn-twz__radio.is-on .fjn-twz__dot { border: 6px solid var(--fjn-brand-600); }
.fjn-twz__qtyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fjn-twz__done { min-height: 56px; border-color: var(--fjn-brand-600); color: var(--fjn-brand-600); }
.fjn-twz__tile {
  min-height: 72px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; box-sizing: border-box;
  border: 1px solid var(--fjn-border); border-radius: 8px; background: var(--fjn-surface); color: var(--fjn-text); text-align: left; cursor: pointer;
}
.fjn-twz__tile > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fjn-twz__tile b { font-size: 16px; color: var(--fjn-brand-600); }
.fjn-twz__tile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fjn-twz__search { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px; border: 1px solid var(--fjn-border); border-radius: 8px; background: var(--fjn-surface); }
.fjn-twz__search:focus-within { border: 2px solid var(--fjn-brand-600); }
.fjn-twz__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 16px var(--fjn-font); }
.fjn-twz__hits { margin: 0; padding: 0; list-style: none; border: 1px solid var(--fjn-border); border-radius: 8px; overflow: hidden; background: var(--fjn-surface); }
.fjn-twz__hit {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; box-sizing: border-box;
  border: 0; border-bottom: 1px solid var(--fjn-surface-2); background: none; color: var(--fjn-text); font: 15px var(--fjn-font); text-align: left; cursor: pointer;
}
.fjn-twz__hit > span:first-child { flex: 1; display: flex; flex-direction: column; }
.fjn-twz__hitname { font-size: 15px; }
.fjn-twz__rows { display: flex; flex-direction: column; gap: 8px; }
.fjn-twz__change { border: 0; background: none; color: var(--fjn-brand-600); font: 700 14px var(--fjn-font); cursor: pointer; }
.fjn-twz__info { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px; border-radius: 8px; background: #F4F5F6; font-size: 14px; }
.fjn-twz__client { display: flex; flex-direction: column; gap: 12px; }
.fjn-twz__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fjn-twz__opt { font-weight: 400; color: var(--fjn-text-2); }
.fjn-twz__note { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--fjn-text-2); }
.fjn-twz__sum { display: flex; flex-direction: column; gap: 2px; }
.fjn-twz__sum > span { font-size: 14px; color: var(--fjn-text-2); }
.fjn-twz__sum > span b { font-size: 20px; color: var(--fjn-text); }
.fjn-twz__sum small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fjn-text-2); }
.fjn-twz__fixed { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: #F4F5F6; }
.fjn-twz__fixed > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 16px; }
.fjn-twz__fixed small { font-size: 12px; color: var(--fjn-text-2); }
/* E3-05 „Dodaj usługę” (ModD187 dodaj-usluge): K/T window 640 px, M sheet from the bottom */
.fjn-twzdlg { width: min(640px, calc(100vw - 32px)); }
@media (max-width: 767px) { .fjn-twzdlg { width: 100%; } }  /* D191 pkt 2: the sheet edge to edge */
.fjn-twzdlg[open] { display: flex; flex-direction: column; }
/* 4.19.1: flex-basis auto, not 0 — the window has no fixed height, and Safari on iPhone squeezed a
   0-basis form to zero (the window opened dimmed but invisible); the body shrinks and scrolls */
.fjn-twzdlg form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.fjn-twzdlg__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px; border-bottom: 1px solid var(--fjn-surface-2); }
.fjn-twzdlg__head h2 { margin: 0; font-size: 19px; }
.fjn-twzdlg__close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--fjn-text); }
.fjn-twzdlg__body { flex: 1 1 auto; min-height: 0; padding: 14px 16px; overflow: auto; }
.fjn-twzdlg__head h2:focus { outline: none; }
.fjn-twzdlg__foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--fjn-surface-2); }
.fjn-twzdlg__foot .fjn-btn { min-height: 56px; }
.fjn-twzdlg__foot .fjn-btn--primary { flex: 1; }
@media (min-width: 768px) {
  .fjn-twz__label--step { font-size: 18px; }
}
@media (max-width: 767px) {
  .fjn-twz.is-folded { display: none; }
  .fjn-twz__pair { grid-template-columns: minmax(0, 1fr); }
  .fjn-twz__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .fjn-twz__foot .fjn-stin__actions .fjn-btn--primary { width: 100%; min-height: 56px; }
}