/* ============================================================================
   MOOD — мобильная касса (лист пополнения на телефоне).

   Своя геометрия и своя айдентика, не пересекающаяся с другими фронтендами:
   лист прижат к низу и обнимает контент, сумма набирается собственной
   цифровой клавиатурой, быстрые суммы — segmented-строка на хайрлайнах.

   Грузится ПОСЛЕ mood-cashier.css и mood-wallet.css: правила с равной
   специфичностью перебивают их геометрию порядком подключения.
   ========================================================================= */

/* Нумпад и знак валюты существуют в разметке всегда, но живут только внутри
   мобильного листа кассы — вне него их не должно быть видно ни на каком экране. */
.deposit-mob-keypad,
.deposit-mob-amount-cur {
  display: none;
}

@media (max-width: 640px) {

  /* --- Локальные токены мобильной кассы ---------------------------------- */
  #depositPageModal.deposit-page-modal--wallet-method-sheet {
    --mood-mc-pad: 18px;
    --mood-mc-radius: 20px;
    --mood-mc-radius-inner: 16px;
    --mood-mc-hairline: color-mix(in srgb, var(--border, rgba(255, 255, 255, 0.1)) 60%, transparent);
    --mood-mc-surface: var(--surface, #1e232d);
    --mood-mc-key-h: clamp(46px, 7.4vh, 58px);
    --mood-mc-key-font: 1.45rem;
    --mood-mc-amount-font: clamp(2.1rem, 9vw, 2.9rem);
  }

  /* --- Геометрия листа --------------------------------------------------- */
  /* mood-cashier.css разворачивает модалку во весь экран (min-height: 100vh),
     из-за чего контент прижимался к верхней кромке. Лист должен быть ровно
     по высоте контента и стоять на нижней кромке — под большим пальцем. */
  #depositPageModal.deposit-page-modal--wallet-method-sheet {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-page-modal-box {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: min(92dvh, 92vh);
    margin: 0;
    border: 0;
    border-radius: var(--mood-mc-radius) var(--mood-mc-radius) 0 0;
    background: var(--mood-mc-surface);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.42);
  }

  /* Колонки между боксом и скроллером не должны растягиваться: иначе внутри
     высокого листа снова появляется пустота, а контент уезжает наверх. */
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-page-modal-body {
    flex: 0 1 auto;
    padding: 0 var(--mood-mc-pad) 0;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-form-wrap,
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-method-layout,
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-method-form-col {
    flex: 0 1 auto;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-modal-header {
    position: relative;
    padding: 10px var(--mood-mc-pad) 12px;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .wallet-method-sheet__handle {
    width: 44px;
    height: 4px;
    margin-bottom: 12px;
  }

  /* Хайрлайн под шапкой — вместо тяжёлой подложки */
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-modal-header::after {
    content: '';
    position: absolute;
    left: var(--mood-mc-pad);
    right: var(--mood-mc-pad);
    bottom: 0;
    height: 1px;
    background: var(--mood-mc-hairline);
  }

  /* --- Блок суммы: крупное число + валюта отдельным знаком ---------------- */
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-piastrix-zone__body {
    gap: 14px;
    padding-top: 14px;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-amount-ref {
    gap: 10px;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-amount-ref__input-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'label label'
      'input cur';
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--mood-mc-hairline);
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-amount-ref__label {
    grid-area: label;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted, #9aa3b2);
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-amount-ref__input {
    grid-area: input;
    min-width: 0;
    min-height: 0;
    font-size: var(--mood-mc-amount-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.035em;
  }

  /* Своя клавиатура — системная каретка и стрелки числового поля не нужны */
  #depositPageModal.deposit-page-modal--wallet-method-sheet.deposit-page-modal--keypad .deposit-amount-ref__input {
    caret-color: transparent;
    cursor: default;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-amount-ref__input::-webkit-outer-spin-button,
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-amount-ref__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-mob-amount-cur {
    grid-area: cur;
    display: block;
    font-family: var(--font-display, inherit);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-muted, #9aa3b2);
    white-space: nowrap;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-mob-amount-cur:empty {
    display: none;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-amount-ref__limits {
    font-size: 0.75rem;
  }

  /* --- Быстрые суммы: segmented-строка, а не ряд «таблеток» --------------- */
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-amount-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 1px;
    border: 1px solid var(--mood-mc-hairline);
    border-radius: var(--mood-mc-radius-inner);
    background: var(--mood-mc-hairline);
    overflow: hidden;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: var(--mood-mc-surface) !important;
    color: var(--text-muted, #9aa3b2);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.14s ease, color 0.14s ease;
  }

  /* Скругляем только внешние углы строки — внутри остаются хайрлайны */
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip:first-child {
    border-radius: calc(var(--mood-mc-radius-inner) - 2px) 0 0 calc(var(--mood-mc-radius-inner) - 2px);
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip:last-child {
    border-radius: 0 calc(var(--mood-mc-radius-inner) - 2px) calc(var(--mood-mc-radius-inner) - 2px) 0;
  }

  /* hover на тач-экране «залипает» после тапа — состояние даёт только :active */
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip:hover {
    background: var(--mood-mc-surface) !important;
    color: var(--text-muted, #9aa3b2);
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip:active,
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip.active {
    background: color-mix(in srgb, var(--accent, #2bd9c0) 16%, var(--mood-mc-surface)) !important;
    color: var(--text, #f2f4f7);
  }

  /* --- Нижняя зона: клавиатура и CTA всегда в зоне большого пальца -------- */
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-piastrix-zone__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    gap: 10px;
    margin-top: 14px;
    padding-top: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    background: var(--mood-mc-surface);
  }

  /* Мягкая отбивка от прокручиваемого контента над клавиатурой */
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-piastrix-zone__footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--mood-mc-hairline);
  }

  /* --- Своя цифровая клавиатура ------------------------------------------ */
  #depositPageModal.deposit-page-modal--wallet-method-sheet.deposit-page-modal--keypad .deposit-mob-keypad {
    display: block;
  }

  /* На экране инвойса (адрес/QR) сумма уже не вводится */
  #depositPageModal.deposit-page-modal--show-address .deposit-mob-keypad {
    display: none !important;
  }

  .deposit-mob-keypad__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--mood-mc-hairline);
    border-radius: var(--mood-mc-radius-inner);
    overflow: hidden;
  }

  .deposit-mob-keypad__key {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mood-mc-key-h);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--mood-mc-surface);
    color: var(--text, #f2f4f7);
    font-family: var(--font-display, inherit);
    font-size: var(--mood-mc-key-font);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.1s ease;
  }

  .deposit-mob-keypad__key:active {
    background: color-mix(in srgb, var(--accent, #2bd9c0) 18%, var(--mood-mc-surface));
  }

  .deposit-mob-keypad__key--aux {
    color: var(--text-muted, #9aa3b2);
    font-size: 1.1rem;
    font-weight: 700;
  }

  .deposit-mob-keypad__key--aux svg {
    width: 24px;
    height: 24px;
  }

  /* --- CTA: широкая плита, а не «таблетка» ------------------------------- */
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-submit-btn,
  #depositPageModal.deposit-page-modal--wallet-method-sheet #depositPiastrixSubmit {
    min-height: 54px;
    margin-top: 0;
    border-radius: var(--mood-mc-radius-inner);
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-submit-icon {
    display: none;
  }

  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-error {
    margin: 0;
    font-size: 0.78rem;
  }

  /* --- Невысокие экраны (SE, старые Android) ----------------------------- */
  @media (max-height: 700px) {
    #depositPageModal.deposit-page-modal--wallet-method-sheet {
      --mood-mc-key-h: 42px;
      --mood-mc-key-font: 1.3rem;
      --mood-mc-amount-font: clamp(1.7rem, 7.5vw, 2.2rem);
    }

    #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-page-modal-box {
      max-height: min(96dvh, 96vh);
    }

    #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip {
      min-height: 40px;
    }

    #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-submit-btn,
    #depositPageModal.deposit-page-modal--wallet-method-sheet #depositPiastrixSubmit {
      min-height: 48px;
    }
  }

  /* --- Оверлей пополнения со страницы игры -------------------------------
     Здесь внутри модалки живут ещё категории и список методов, поэтому лист
     остаётся во весь экран. Но кнопка «Пополнить» не должна уезжать за нижнюю
     кромку вместе со скроллом — прижимаем её к низу прокручиваемой области. */
  #depositPageModal.deposit-page-modal--wallet-overlay-split .deposit-piastrix-zone__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 0 max(10px, env(safe-area-inset-bottom, 0px));
    background: var(--bg-elevated, #1e232d);
  }

  #depositPageModal.deposit-page-modal--wallet-overlay-split .deposit-piastrix-zone__footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: color-mix(in srgb, var(--border, rgba(255, 255, 255, 0.1)) 60%, transparent);
  }

  /* --- Светлая тема ------------------------------------------------------ */
  html[data-theme="light"] #depositPageModal.deposit-page-modal--wallet-method-sheet {
    --mood-mc-hairline: #e4e8ef;
    --mood-mc-surface: var(--surface, #fff);
  }

  html[data-theme="light"] #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-page-modal-box {
    box-shadow: 0 -8px 40px rgba(16, 24, 40, 0.14);
  }

  html[data-theme="light"] .deposit-mob-keypad__key {
    color: #101828;
  }

  html[data-theme="light"] #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-mob-amount-cur {
    color: #6b7384;
  }

  /* mood-wallet.css делает чипы прозрачными на светлой теме — в segmented-строке
     сквозь них просвечивал бы цвет хайрлайн-подложки. */
  html[data-theme="light"] #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip,
  html[data-theme="light"] #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip:hover {
    background: var(--mood-mc-surface) !important;
    border-color: transparent;
    color: #5c6573;
  }

  html[data-theme="light"] #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip:active,
  html[data-theme="light"] #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip.active {
    background: color-mix(in srgb, var(--accent-deep, #0d9488) 12%, #fff) !important;
    color: #101828;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deposit-mob-keypad__key,
  #depositPageModal.deposit-page-modal--wallet-method-sheet .deposit-chip {
    transition: none;
  }
}