/* Fibra – кабинет блогера и страница ошибки подключения. */

.account-card {
  max-width: var(--content-width);
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.account-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.account-avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  object-fit: cover;
}

.account-avatar-empty {
  display: grid;
  place-items: center;
  background: var(--surface-sunken);
  color: var(--muted);
  font: var(--t-body-lg);
  font-weight: var(--fw-semibold);
}

.account-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-name {
  font: var(--t-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
}

.account-note {
  color: var(--muted);
  font: var(--t-meta);
}

/* Факты идут парами «что – сколько», без подписей капсом. */
.account-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: var(--hairline) solid var(--line);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fact dt {
  color: var(--muted);
  font: var(--t-caption);
  letter-spacing: var(--ls-caption);
}

.fact dd {
  margin: 0;
  font: var(--t-body-lg);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.account-hint {
  margin: var(--sp-5) 0 0;
  color: var(--muted);
  font: var(--t-meta);
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --- формы входа и регистрации --- */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 420px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field-label {
  color: var(--muted);
  font: var(--t-caption);
  letter-spacing: var(--ls-caption);
}

.field-hint {
  color: var(--faint);
  font: var(--t-caption);
}

/* Ошибка объясняет, что не так, и не извиняется. */
.form-error {
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--r-control);
  background: var(--accent-wash);
  color: var(--ink);
  font: var(--t-meta);
}

.auth-aside {
  margin: var(--sp-5) 0 0;
  max-width: 420px;
  color: var(--muted);
  font: var(--t-meta);
}

.auth-aside a {
  color: var(--accent);
}

/* --- лоты блогера --- */

.form-ok {
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--r-control);
  background: var(--surface-sunken);
  color: var(--ink);
  font: var(--t-meta);
}

.lots {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--hairline) solid var(--line);
}

.lot {
  display: grid;
  grid-template-columns: 1fr 150px auto;
  align-items: center;
  gap: var(--sp-4);
}

.lot-title {
  font: var(--t-body);
  font-weight: var(--fw-medium);
}

.lot-unit {
  color: var(--muted);
  font: var(--t-caption);
}

/* Валюта внутри поля, а не подписью рядом: так короче и не расползается. */
.lot-price {
  position: relative;
  display: block;
}

.lot-price .control {
  padding-right: var(--sp-7);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lot-currency {
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font: var(--t-meta);
  pointer-events: none;
}

.lot-active {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--muted);
  font: var(--t-meta);
  white-space: nowrap;
  cursor: pointer;
}

.lot-active input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
}

@media (max-width: 700px) {
  .lot {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title active" "price price";
    gap: var(--sp-3);
  }
  .lot-title { grid-area: title; }
  .lot-active { grid-area: active; }
  .lot-price { grid-area: price; }
}

/* --- страница блогера --- */

.crumbs {
  margin: 0 0 var(--sp-4);
  font: var(--t-meta);
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
}

.blogger-page {
  max-width: var(--content-width);
}

.fact-plain {
  font-weight: var(--fw-regular) !important;
  color: var(--muted);
}

.section-title {
  margin: var(--sp-7) 0 var(--sp-4);
  font: var(--t-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title);
}

.offer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: var(--content-width);
}

/* Строка предложения: название слева, цена и действие справа. Цена крупнее
   названия – решение принимают по ней. */
.offer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.offer-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: var(--t-body);
  font-weight: var(--fw-medium);
}

.offer-unit {
  color: var(--muted);
  font: var(--t-caption);
}

.offer-price {
  font: var(--t-title);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-title);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .offer {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title price" "action action";
    gap: var(--sp-4);
  }
  .offer-title { grid-area: title; }
  .offer-price { grid-area: price; }
  .offer .btn { grid-area: action; width: 100%; }
}

/* --- корзина --- */

.cart-line .offer-title a {
  color: inherit;
  text-decoration: none;
  font-weight: var(--fw-semibold);
}

.cart-line .offer-title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cart-total {
  max-width: var(--content-width);
  margin-top: var(--sp-5);
}

.total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  font: var(--t-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title);
}

.total-value {
  font: var(--t-heading);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-heading);
}

/* Поле срока аренды рядом с кнопкой: узкое, цифры справа. */
.days {
  position: relative;
  display: inline-block;
  width: 92px;
}

.days .control {
  padding-right: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.days-unit {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font: var(--t-caption);
  pointer-events: none;
}

.offer form {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Выплата блогеру: справочная величина, набирается тише цены. */
.lot-payout {
  color: var(--muted);
  font: var(--t-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- оформление заказа --- */

.checkout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: var(--content-width);
}

.brief {
  border: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.brief-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
}

.brief-who {
  font: var(--t-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title);
}

.brief-what {
  color: var(--muted);
  font: var(--t-meta);
}

.brief-text {
  min-height: 96px;
  padding: var(--sp-4);
  font: var(--t-body);
  resize: vertical;
}

/* --- список заказов --- */

.order {
  max-width: var(--content-width);
  margin-bottom: var(--sp-4);
}

.order-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Статус – единственное цветное пятно в строке, по нему и читают список. */
.order-status {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-chip);
  background: var(--accent-wash);
  color: var(--accent);
  font: var(--t-caption);
  font-weight: var(--fw-semibold);
}

.order-date {
  color: var(--muted);
  font: var(--t-meta);
}

.order-total {
  margin-left: auto;
  font: var(--t-title);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.order-items {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4) 0 0;
  border-top: var(--hairline) solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.order-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font: var(--t-meta);
}

.order-who {
  font-weight: var(--fw-semibold);
}

.order-what {
  color: var(--muted);
}

.order-price {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}