/* ========================================
   customsize – styl pod motyw Ergomåtter
   korzysta z tokenów :root motywu (--teal, --border, --ff, …)
   ======================================== */

/* ---- ZAKŁADKI (segmented pill, pełna szerokość) ---- */
.cs-tabnav {
  display: flex; gap: 8px; width: 100%; max-width: 100%; flex-basis: 100%;
  box-sizing: border-box; margin: 0 0 20px;
}
.cs-tab {
  flex: 1 1 0; min-width: 0; white-space: nowrap;
  padding: 12px 16px; border: 1px solid var(--border, #E5E5E5); border-radius: 28px;
  background: var(--white, #fff); color: var(--g700, #555);
  font-family: var(--ff, 'Plus Jakarta Sans', sans-serif); font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.cs-tab:hover { border-color: var(--teal, #339999); color: var(--teal, #339999); }
.cs-tab.is-active {
  background: var(--teal, #339999); border-color: var(--teal, #339999); color: #fff;
}

/* panele – chowane dopiero gdy JS zbudował zakładki (bez JS = wszystko widać) */
body.cs-tabs-ready .cs-pane { display: none; }
body.cs-tabs-ready .cs-pane.cs-active { display: block; }

/* ---- KALKULATOR ---- */
.cs-calc {
  display: flex; flex-direction: column; gap: 16px;
  font-family: var(--ff, 'Plus Jakarta Sans', sans-serif);
}
.cs-fields { display: flex; gap: 14px; }
.cs-fields .cs-field { flex: 1; }
.cs-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cs-label { font-size: .78rem; font-weight: 600; color: var(--g700, #555); }

.cs-input {
  width: 100%; box-sizing: border-box; height: 46px; padding: 12px 14px;
  border: 1px solid var(--border, #E5E5E5); border-radius: 10px;
  font-family: var(--ff, 'Plus Jakarta Sans', sans-serif); font-size: .9rem;
  color: var(--dark, #1A1A1A); background: var(--white, #fff);
  transition: border-color .15s, box-shadow .15s;
}
.cs-input:focus {
  outline: none; border-color: var(--teal, #339999);
  box-shadow: 0 0 0 3px rgba(51,153,153,.12);
}
select.cs-input {
  -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background: var(--white, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.cs-hint { font-size: .75rem; color: var(--g500, #888); margin-top: -6px; }

/* checkbox „Fri bredde" – styl jak pd-feats */
.cs-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
  padding: 12px 14px; background: var(--teal-lt, #E6F2F2); border-radius: 10px;
  font-size: .85rem; font-weight: 500; color: var(--dark, #1A1A1A);
}
.cs-check input { width: 18px; height: 18px; accent-color: var(--teal, #339999); cursor: pointer; flex-shrink: 0; }

/* box podglądu ceny */
.cs-preview {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 18px; background: var(--teal-lt, #E6F2F2); border-radius: 10px;
}
.cs-dim { font-size: .85rem; color: var(--g700, #555); }
.cs-price { margin-left: auto; font-size: 1.6rem; font-weight: 700; color: var(--dark, #1A1A1A); }
.cs-vat { width: 100%; text-align: right; font-size: .72rem; color: var(--g500, #888); }
/* gdy synchronizujemy natywną cenę – chowamy własną, zostaje sam wymiar */
.cs-preview--slim { background: transparent; padding: 2px 0; }
.cs-preview--slim .cs-price, .cs-preview--slim .cs-vat { display: none; }
.cs-preview--slim .cs-dim { font-size: .9rem; font-weight: 600; color: var(--dark, #1A1A1A); }

/* własny guzik (fallback, gdy nie przechwytujemy natywnego) – pill teal jak .btn-p */
.cs-add {
  padding: 13px 28px; border: none; border-radius: 28px; cursor: pointer;
  background: var(--teal, #339999); color: #fff;
  font-family: var(--ff, 'Plus Jakarta Sans', sans-serif); font-size: .9rem; font-weight: 600;
  transition: background .15s;
}
.cs-add:hover:not(:disabled) { background: var(--teal-dk, #2A7D7D); }
.cs-add:disabled { opacity: .5; cursor: not-allowed; }

.cs-msg { font-size: .82rem; min-height: 18px; color: var(--g700, #555); }
.cs-msg.cs-err { color: #c0392b; }

@media (max-width: 480px) {
  .cs-fields { flex-direction: column; }
}