/* ==========================================================================
   Dane konta — karty, formularze, tabele adresów
   ========================================================================== */

.cb-account__lead {
  margin: -16px 0 32px;
  color: var(--cb-ink-muted);
}

/* ——————————————————————————————————————————————— Karty wewnątrz zakładki */

.cb-subtabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--cb-line);
  margin-bottom: 32px;
  overflow-x: auto;
}

.cb-subtabs__link {
  padding: 12px 0;
  white-space: nowrap;
  color: var(--cb-ink-muted);
  font-weight: 700;
  font-size: var(--cb-fs-small);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}

.cb-subtabs__link:hover { color: var(--cb-brand); text-decoration: none; }

.cb-subtabs__link.is-active {
  color: var(--cb-brand-600);
  box-shadow: inset 0 -2px 0 var(--cb-brand-500);
}

/* ——————————————————————————————————————————————— Dwie kolumny */

.cb-twocol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.cb-twocol h2 { font-size: 1.125rem; margin-bottom: 24px; }

/* ——————————————————————————————————————————————— Formularze */

.cb-form { max-width: 520px; }
.cb-field { margin: 0 0 20px; }

.cb-field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--cb-fs-micro);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-ink-muted);
}

.cb-field input[type="text"],
.cb-field input[type="email"],
.cb-field input[type="tel"],
.cb-field input[type="password"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--cb-line-strong);
  border-radius: var(--cb-radius);
  font: inherit;
  color: var(--cb-ink);
  background: #fff;
}

.cb-field input:focus {
  outline: none;
  border-color: var(--cb-brand-500);
  box-shadow: 0 0 0 3px rgba(0, 186, 242, .15);
}

/* Pole tylko do odczytu ma wyglądać na zablokowane, a nie na zepsute —
   stąd szare tło i kursor domyślny zamiast tekstowego. */
.cb-field input[readonly] {
  background: var(--cb-surface-alt);
  color: var(--cb-ink-muted);
  cursor: default;
}

.cb-req { color: var(--cb-err); }

.cb-hint {
  display: block;
  margin-top: 6px;
  font-size: var(--cb-fs-small);
  color: var(--cb-ink-muted);
}

.cb-field--check label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--cb-fs-body);
  color: var(--cb-ink);
  line-height: 1.5;
}

.cb-field--check input { margin-top: 3px; flex: 0 0 auto; }

/* ——————————————————————————————————————————————— Formularz adresu */

.cb-form--address { max-width: 720px; }

.cb-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 24px;
}

.cb-field--wide { grid-column: 1 / -1; }

.cb-form__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.cb-btn--danger { color: var(--cb-err); margin-left: auto; }
.cb-btn--danger:hover { color: var(--cb-err); text-decoration: underline; }

/* ——————————————————————————————————————————————— Tabele adresów */

.cb-addresses { width: 100%; }
.cb-addresses td { vertical-align: top; line-height: 1.6; }
.cb-addresses th { white-space: nowrap; }
.cb-col-center { text-align: center; }
.cb-col-right { text-align: right; }

.cb-addresses .cb-btn { min-height: 40px; padding: 0 20px; }

.cb-check {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--cb-brand-500);
  border-radius: 3px;
  color: var(--cb-brand-600);
  font-size: 13px;
  line-height: 1;
}

.cb-inline-form { margin: 0; }

.cb-actions-right { display: flex; justify-content: flex-end; margin-top: 24px; }

/* ——————————————————————————————————————————————— Responsywność */

@media (max-width: 1023px) {
  .cb-twocol { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 767px) {
  .cb-form__grid { grid-template-columns: minmax(0, 1fr); }
  .cb-subtabs { gap: 20px; }

  .cb-addresses thead { display: none; }

  .cb-addresses tr {
    display: block;
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius);
    padding: 16px;
    margin-bottom: 16px;
  }

  .cb-addresses td {
    display: block;
    border: 0;
    padding: 6px 0;
    text-align: left;
  }

  .cb-addresses td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--cb-ink-muted);
    font-size: var(--cb-fs-micro);
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .cb-form__actions { flex-wrap: wrap; }
  .cb-btn--danger { margin-left: 0; }
}