/* Телефон (≤980px), как у Platega: wallets. Только @media (max-width: 980px). */

/* «Кошельки и карты» у Platega: крошки → вкладки → поиск → «Вывести средства» | «Добавить» →
   карточки реквизитов без общей рамки. Размеры в px — как в мобильном кабинете Platega,
   цвета наши. Файл подключён на всех страницах, поэтому всё привязано к .wallets-section
   и окну реквизита [data-wallet-dialog] — они есть только на странице «Реквизиты». */
@media (max-width: 980px) {
  /* Хлебные крошки вместо заголовка страницы */
  .layout .breadcrumbs.m-crumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 4px 0 6px;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
  }

  .layout .breadcrumbs.m-crumbs [aria-current="page"] {
    overflow: hidden;
    color: var(--text);
    font-weight: 500;
    text-overflow: ellipsis;
  }

  .layout .breadcrumbs.m-crumbs .breadcrumbs-sep {
    display: inline-flex;
    flex: none;
    color: var(--muted);
  }

  .layout .breadcrumbs.m-crumbs .breadcrumbs-sep svg {
    width: 16px;
    height: 16px;
  }

  /* Раскладка: блок реквизитов (макрос) и его панель инструментов «растворяются»,
     их части встают в общую сетку вместе с поиском и кнопкой вывода. */
  .layout .wallets-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 12px;
    margin: 0;
  }

  .layout .wallets-section .wallets-panel-page,
  .layout .wallets-section .wallets-toolbar {
    display: contents;
  }

  .layout .wallets-section .segmented-inline {
    grid-column: 1 / -1;
    order: 1;
  }

  .layout .wallets-section .wallets-search {
    grid-column: 1 / -1;
    order: 2;
  }

  .layout .wallets-section .wallets-payout-link {
    grid-column: 1;
    order: 3;
  }

  .layout .wallets-section [data-wallets-add] {
    grid-column: 2;
    order: 4;
  }

  .layout .wallets-section .wallets-board {
    grid-column: 1 / -1;
    order: 5;
    margin-top: 8px;
  }

  .layout .wallets-section .wallets-search-empty {
    grid-column: 1 / -1;
    order: 6;
  }

  /* Вкладки: тёмная дорожка с рамкой, активная — золотая, остальные прозрачные */
  .layout .wallets-section .segmented-inline {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
  }

  .layout .wallets-section .segmented-item {
    min-height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--text-soft, var(--muted));
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
  }

  .layout .wallets-section .segmented-item.is-active {
    background: var(--accent-strong);
    color: #0b0b0b;
  }

  /* Поиск */
  .layout .wallets-section .wallets-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
  }

  .layout .wallets-section .wallets-search svg {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
  }

  .layout .wallets-section .wallets-search input {
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 16px 0 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: none;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
  }

  .layout .wallets-section .wallets-search input::placeholder {
    color: var(--muted);
  }

  .layout .wallets-section .wallets-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  .layout .wallets-section .wallets-search input:focus {
    border-color: var(--border-strong);
    outline: none;
  }

  /* Две кнопки в ряд: «Вывести средства» (вторичная) и «+ Добавить» (главная).
     У Platega обе 44px, «Вывести средства» — в две плотные строки внутри той же высоты. */
  .layout .wallets-section .wallets-payout-link,
  .layout .wallets-section [data-wallets-add] {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 12px;
    border-radius: 12px;
    box-shadow: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    white-space: normal;
  }

  /* Вторичная кнопка у Platega — сплошная серая плашка без рамки */
  .layout .wallets-section .wallets-payout-link {
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.09);
    color: var(--text);
  }

  .layout .wallets-section .wallets-payout-link svg {
    width: 18px;
    height: 18px;
    flex: none;
  }

  /* У Platega просто «Добавить»: название вкладки уже над кнопкой. Полная подпись
     остаётся для экранного диктора, на экране — короткая. */
  .layout .wallets-section [data-wallets-add] [data-wallets-add-label] {
    font-size: 0;
    line-height: 0;
  }

  /* Блоком 20px — иначе строка нулевого размера приподнимает надпись над «+» */
  .layout .wallets-section [data-wallets-add] [data-wallets-add-label]::before {
    content: "Добавить";
    content: "Добавить" / "";
    display: block;
    font-size: 16px;
    line-height: 20px;
  }

  .layout .wallets-section [data-wallets-add] .btn-plus {
    display: inline-flex;
    width: auto;
    height: auto;
    background: none;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
  }

  /* Карточки стоят прямо на странице, без второй рамки вокруг списка */
  .layout .wallets-section .wallets-board {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .layout .wallets-section .wallet-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .layout .wallets-section .wallet-card {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 16px;
    border: 1px solid var(--hairline, var(--border));
    border-radius: 24px;
    background: var(--panel);
    box-shadow: none;
    transform: none;
  }

  .layout .wallets-section .wallet-card[hidden] {
    display: none !important;
  }

  /* Ритм карточки Platega (от верха): переключатель и имя с 16px, номер с 52px,
     значок 48px с 24px (ниже имени на 8px), черта на 96px, кнопки через 16px под ней. */
  .layout .wallets-section .wallet-card-top {
    align-items: flex-start;
    gap: 12px;
  }

  .layout .wallets-section .wallet-card-ident {
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 12px;
  }

  .layout .wallets-section .wallet-card .payment-mark {
    --payment-mark-size: 48px;
    flex: none;
    margin-top: 8px;
    border-radius: 12px;
  }

  /* Карта у Platega — простой значок карты на серой плашке, а знак платёжной системы (МИР)
     стоит после номера. Логотип банка в значке на телефоне не показываем. */
  .layout .wallets-section .wallet-card:has(strong[title^="Банковская карта"]) .payment-mark {
    position: relative;
    border: 0;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
  }

  .layout .wallets-section .wallet-card:has(strong[title^="Банковская карта"]) .payment-mark > * {
    display: none;
  }

  .layout .wallets-section .wallet-card:has(strong[title^="Банковская карта"]) .payment-mark::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    background: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .layout .wallets-section .wallet-card:has(strong[title^="Банковская карта"]) .wallet-card-line::after {
    content: "";
    order: 1;
    flex: none;
    width: 38px;
    height: 20px;
    /* В файле знака поля сверху и снизу: высота 22px даёт надпись около 10px, как у Platega */
    background: url("/static/payment-brands/mir.svg?v=20260827") left center / auto 22px no-repeat;
  }

  .layout .wallets-section .wallet-card-copy {
    gap: 12px;
    padding-top: 0;
  }

  .layout .wallets-section .wallet-card-name {
    gap: 8px;
  }

  .layout .wallets-section .wallet-card-name strong {
    max-width: 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
  }

  .layout .wallets-section .wallet-chip {
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 18px;
  }

  /* Номер у Platega — 16px, серый, с разрядкой: «**** 9860 МИР» */
  .layout .wallets-section .wallet-card-line {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    color: var(--muted);
    font-size: 16px;
    line-height: 20px;
  }

  .layout .wallets-section .wallet-card-line .wallet-destination-value {
    letter-spacing: 0.06em;
  }

  .layout .wallets-section .wallet-destination-toggle {
    order: 2;
  }

  /* Полный номер/адрес длинный — переносится, а не вылезает за карточку */
  .layout .wallets-section .wallet-card-line .wallet-destination-value[data-wallet-destination-full] {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .layout .wallets-section .wallet-destination-toggle {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--accent-strong);
    font-size: 14px;
    font-weight: 500;
    transform: none;
  }

  .layout .wallets-section .wallet-card [data-wallet-default-form] {
    flex: none;
    margin: 0;
  }

  /* Включённый переключатель у Platega: зелёная дорожка и тёмный кружок */
  .layout .wallets-section .wallet-card .switch input:checked + .switch-track::after {
    background: var(--bg-secondary);
  }

  .layout .wallets-section .wallet-card-foot {
    gap: 8px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline, var(--border));
  }

  /* Кнопки-значки у Platega — заметная серая плашка на карточке */
  .layout .wallets-section .wallet-icon-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: none;
    color: var(--text);
    opacity: 0.85;
    transform: none;
  }

  .layout .wallets-section .wallet-icon-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Пустой список — отдельная карточка по центру, как «Кошельки не добавлены» у Platega */
  .layout .wallets-section .wallets-empty {
    gap: 8px;
    padding: 44px 20px 48px;
    border: 1px solid var(--hairline, var(--border));
    border-radius: 24px;
    background: var(--panel);
  }

  /* Значок у Platega — кошелёк с застёжкой, 56px, серый */
  .layout .wallets-section .wallets-empty > svg {
    display: none;
  }

  .layout .wallets-section .wallets-empty::before {
    content: "";
    flex: none;
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    background: var(--muted);
    opacity: 0.55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .layout .wallets-section .wallets-empty-title {
    color: var(--text-soft, var(--text));
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .layout .wallets-section .wallets-empty-hint {
    max-width: 260px;
    color: var(--muted);
    font-size: 14px;
    line-height: 20px;
  }

  .layout .wallets-section .wallets-empty .btn {
    min-height: 44px;
    gap: 12px;
    margin-top: 8px;
    padding: 0 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
  }

  /* «+» у Platega — простой плюс, без кружка */
  .layout .wallets-section .wallets-empty .btn-plus {
    display: inline-flex;
    width: auto;
    height: auto;
    background: none;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
  }

  .layout .wallets-section .wallets-search-empty:not([hidden]) {
    display: block;
    margin: 0;
    padding: 24px 0;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
  }

  /* Окно «Добавление карты / криптокошелька» — шторка снизу, как общая шторка кабинета */
  .modal.modal-center[data-wallet-dialog] {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 640px;
    height: auto;
    max-height: calc(100dvh - 48px);
    margin: 0 auto;
    transform: none;
    border-radius: 24px 24px 0 0;
  }

  .modal.modal-center[data-wallet-dialog]::backdrop {
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  [data-wallet-dialog] .modal-card {
    position: relative;
    height: auto;
    max-height: calc(100dvh - 48px);
    padding: 28px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(180deg, var(--panel-strong), var(--bg-secondary));
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.45);
  }

  [data-wallet-dialog][open] .modal-card {
    animation: wallet-sheet-in 0.22s ease-out;
  }

  @keyframes wallet-sheet-in {
    from {
      transform: translateY(100%);
    }
  }

  [data-wallet-dialog] .modal-grabber {
    position: absolute;
    top: 10px;
    left: 50%;
    display: block;
    width: 44px;
    height: 5px;
    margin-left: -22px;
    padding: 0;
    border-radius: 999px;
    background: var(--border-strong);
  }

  [data-wallet-dialog] .modal-grabber::before {
    content: none;
  }

  [data-wallet-dialog] .modal-head {
    align-items: flex-start;
    padding: 0 0 20px;
  }

  [data-wallet-dialog] .modal-head h2 {
    padding-top: 6px;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
  }

  /* ✕ — тот же значок, что в общей шторке (линии, а не символ «×») */
  [data-wallet-dialog] .modal-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 0;
    transform: none;
  }

  [data-wallet-dialog] .modal-close::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  [data-wallet-dialog] .modal-body {
    gap: 16px;
    padding: 0;
    overflow-y: auto;
  }

  /* Пустая строка ошибки под номером не держит место */
  [data-wallet-dialog] .wallet-card-error:empty {
    display: none;
  }

  [data-wallet-dialog] .modal-form input {
    min-height: 48px;
    font-size: 16px;
  }

  [data-wallet-dialog] .modal-actions-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 16px;
  }

  [data-wallet-dialog] .modal-actions-split .btn {
    min-height: 44px;
    border-radius: 12px;
    font-size: 16px;
  }
}