/* D230 (SPEC 1.246) Wulkanizacja etap 2: the rim size tiles 17"–24" of the wizard (E3-02, the window
   „Dodaj usługę”), the switch „Zgoda na SMS” of „Nowa rezerwacja”, the screen „Rezerwacja zapisana”. */

.fjn-twz__sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fjn-twz__sz { min-height: 56px; border: 1px solid var(--fjn-border); border-radius: 8px; background: var(--fjn-surface); color: var(--fjn-text); font-size: 18px; font-weight: 700; cursor: pointer; }
.fjn-twz__sz.is-on { border-color: var(--fjn-brand-600); background: var(--fjn-brand-600); color: var(--fjn-text-inverse); }
.fjn-twz__sz:disabled { color: var(--fjn-text-disabled); cursor: default; }
.fjn-twz__sz.is-on:disabled { border-color: #9DB4D3; background: #9DB4D3; color: var(--fjn-text-inverse); }

/* „Zgoda na SMS”: the switch with its line and the note under it */
.fjn-tsms { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--fjn-surface-2); }
.fjn-tsms__row { display: flex; align-items: flex-start; gap: 12px; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.fjn-tsms__track { flex: none; position: relative; width: 52px; height: 32px; border-radius: 16px; background: #C7CCD3; }
.fjn-tsms__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.fjn-tsms__row[aria-checked="true"] .fjn-tsms__track { background: var(--fjn-brand-600); }
.fjn-tsms__row[aria-checked="true"] .fjn-tsms__track::after { left: 23px; }
.fjn-tsms__text { display: flex; flex-direction: column; gap: 2px; }
.fjn-tsms__text b { font-size: 15px; }
.fjn-tsms__text small { font-size: 13px; color: var(--fjn-text-2); }
.fjn-tsms__note { margin: 0; font-size: 13px; color: var(--fjn-text-2); }
.fjn-tsms__note.is-saved { color: var(--fjn-success-700); }

/* „Rezerwacja zapisana” */
.fjn-tsaved { display: flex; flex-direction: column; gap: 12px; }
.fjn-tsaved__card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--fjn-surface); border: 1px solid var(--fjn-border); border-radius: 12px; }
.fjn-tsaved__head { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; }
.fjn-tsaved__head .fjn-icon { color: var(--fjn-success-700); }
.fjn-tsaved__data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; }
.fjn-tsaved__data div { display: flex; flex-direction: column; gap: 2px; }
.fjn-tsaved__data dt { font-size: 13px; color: var(--fjn-text-2); }
.fjn-tsaved__data dd { margin: 0; font-size: 16px; font-weight: 700; }
.fjn-tsaved__lines { display: flex; flex-direction: column; border-top: 1px solid var(--fjn-surface-2); }
.fjn-tsaved__lines h2 { margin: 10px 0 6px; font-size: 15px; }
.fjn-tsaved__line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--fjn-surface-2); }
.fjn-tsaved__line--sum { font-weight: 700; }
.fjn-tsaved__sms { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 15px; font-weight: 700; }
.fjn-tsaved__sms--ok { background: #E2F2E8; color: #1B6B41; }
.fjn-tsaved__sms--no { background: #FDF1DC; color: #8A5300; }
.fjn-tsaved__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .fjn-tsaved__data { grid-template-columns: minmax(0, 1fr); }
  .fjn-tsaved__acts .fjn-btn { flex: 1 1 100%; }
}