/* ═══════════════════════════════════════════════════════
   UI-UNIFIED.CSS — redesign 2026-06-03
   Modals + button animations (purple accent)
   ═══════════════════════════════════════════════════════ */

/* ─── GLOBAL: убираем чёрный tap-highlight на iOS ─── */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], input, select, textarea, label { -webkit-tap-highlight-color: transparent; }

/* ─── GLOBAL: убираем iOS overscroll bounce (белый блок при оттягивании) ─── */
html, body {
  overscroll-behavior: none;
  background-color: #F4F5F8;
}

/* ─── SHARED MODAL KEYFRAMES ─── */
@keyframes modalSpringIn {
  0%   { transform: translateY(30px) scale(0.93); opacity: 0; }
  55%  { transform: translateY(-6px) scale(1.014); opacity: 1; }
  78%  { transform: translateY(2px) scale(0.999); }
  100% { transform: none; opacity: 1; }
}
@keyframes modalSlideOut {
  0%   { transform: none; opacity: 1; }
  100% { transform: translateY(28px) scale(0.94); opacity: 0; }
}
@keyframes notifSlideInRight {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes notifSlideInLeft {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.hidden { display: none !important; }

/* ─────────────────────────────────────────────────────
   MODAL BACKDROP
─────────────────────────────────────────────────────── */
.modal-backdrop,
.modal-backdrop.hidden {
  display: flex !important; align-items: center !important;
  justify-content: center !important; padding: 16px !important;
  position: fixed !important; inset: 0 !important; z-index: 200 !important;
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  backdrop-filter: blur(0px) !important; -webkit-backdrop-filter: blur(0px) !important;
  background: rgba(17,24,39,0) !important;
  transition: opacity .3s, visibility .3s, background .32s, backdrop-filter .36s !important;
}
.modal-backdrop:not(.hidden) {
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
  background: rgba(17,24,39,0.38) !important;
}

/* ─── MODAL CARD ─── */
.modal-backdrop .modal-card {
  width: min(640px, 100%);
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 20px rgba(0,0,0,0.06);
  padding: 28px; position: relative; overflow: visible;
}
.modal-backdrop:not(.hidden) .modal-card {
  animation: modalSpringIn .42s cubic-bezier(0.22,1,0.36,1) both;
}
.modal-backdrop.is-closing .modal-card {
  animation: modalSlideOut .26s ease-in both;
}
.modal-backdrop.is-closing {
  opacity: 0 !important; background: rgba(17,24,39,0) !important;
  backdrop-filter: blur(0px) !important; -webkit-backdrop-filter: blur(0px) !important;
  transition: opacity .26s ease-in, background .26s ease-in, backdrop-filter .26s ease-in !important;
}

.modal-backdrop .deposit-modal-card { width: min(720px,100%); }
.modal-backdrop .wallet-picker-modal { width: min(580px,100%); }
#transactionsHistoryModal .modal-card, #tradesHistoryModal .modal-card {
  width: min(860px,100%); max-height: 88vh; overflow: hidden; display: flex; flex-direction: column;
}

/* ─── MODAL HEADER ─── */
.modal-backdrop .modal-card .modal-header {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: 0;
  margin-bottom: 22px; padding-right: 52px;
}
.modal-backdrop .modal-card .modal-header h2 {
  margin: 0; font-size: clamp(1.2rem,3.5vw,1.5rem); font-weight: 800; line-height: 1.15;
  color: #111827; white-space: normal; text-align: left; flex: 1;
}
.modal-backdrop .modal-card .modal-header p { margin: 5px 0 0; color: #6B7280; font-size: 14px; line-height: 1.5; }

/* ─── CLOSE BUTTON ─── */
.modal-backdrop .modal-card .icon-button,
.modal-backdrop .modal-card .modal-header .icon-button {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; min-width: 36px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08); background: #F4F5F8;
  color: #6B7280; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; margin: 0; padding: 0; line-height: 1; flex: none;
  transition: transform .22s, background .18s, color .18s, border-color .18s;
}
.modal-backdrop .modal-card .icon-button:hover,
.modal-backdrop .modal-card .modal-header .icon-button:hover {
  transform: rotate(90deg) scale(1.05);
  background: rgba(239,68,68,0.08); color: #EF4444; border-color: rgba(239,68,68,0.2);
}

/* ─── MODAL ACTIONS ─── */
.modal-backdrop .modal-card .modal-actions { display: flex; gap: 12px; margin-top: 20px; flex-direction: row; }
.modal-backdrop .modal-card .modal-actions .primary-button,
.modal-backdrop .modal-card .modal-actions .ghost-button { flex: 1; min-height: 50px; border-radius: 14px; font-weight: 700; font-size: 14px; justify-content: center; }

/* ─── MODAL FIELDS ─── */
.modal-backdrop .field-input,
.modal-backdrop .field input,
.modal-backdrop .field select {
  background: #F4F5F8 !important; border: 1px solid rgba(0,0,0,0.1) !important; color: #111827 !important;
}
.modal-backdrop .field-input:focus,
.modal-backdrop .field input:focus,
.modal-backdrop .field select:focus {
  background: #FFFFFF !important; border-color: #6059E8 !important;
  box-shadow: 0 0 0 3px rgba(96,89,232,0.12) !important;
}
.modal-backdrop .field span { color: #4B5563 !important; }
.modal-backdrop .modal-card .ghost-button { background: #F4F5F8 !important; color: #374151 !important; border-color: rgba(0,0,0,0.1) !important; }
.modal-backdrop .modal-card .ghost-button:hover { background: rgba(96,89,232,0.07) !important; color: #6059E8 !important; border-color: rgba(96,89,232,0.2) !important; }

@media (max-width:640px) {
  .modal-backdrop { padding: 10px !important; }
  .modal-backdrop .modal-card { padding: 20px; border-radius: 20px; }
  .modal-backdrop .modal-card .modal-header h2 { font-size: 1.2rem; }
  .modal-backdrop .modal-card .modal-actions { flex-direction: column; }
  .modal-backdrop .modal-card .modal-actions .primary-button,
  .modal-backdrop .modal-card .modal-actions .ghost-button { width: 100%; }
}

/* ══════════════════════════════════════════
   PRIMARY BUTTON — shine sweep + lift
══════════════════════════════════════════ */
.primary-button {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .22s cubic-bezier(0.22,1,0.36,1), box-shadow .22s ease, filter .18s ease;
}
.primary-button::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 0%, transparent 25%, rgba(255,255,255,0.28) 50%, transparent 75%, transparent 100%);
  transform: translateX(-150%); pointer-events: none; z-index: 1; transition: transform 0s;
}
.primary-button:hover::after { transform: translateX(150%); transition: transform .65s ease; }
.primary-button:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 14px 32px rgba(96,89,232,0.22), 0 6px 16px rgba(96,89,232,0.12);
  filter: brightness(1.08);
}
.primary-button:active { transform: translateY(-1px) scale(0.977); filter: brightness(0.96); }

/* Support specific */
.reply-form .primary-button:hover, .support-form .primary-button:hover {
  box-shadow: 0 14px 32px rgba(96,89,232,0.22), 0 6px 16px rgba(96,89,232,0.12);
}

/* ══════════════════════════════════════════
   GHOST BUTTON — lift + border glow
══════════════════════════════════════════ */
.ghost-button {
  transition: transform .22s cubic-bezier(0.22,1,0.36,1), background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.ghost-button:hover { transform: translateY(-2px); border-color: rgba(96,89,232,0.3); box-shadow: 0 6px 22px rgba(96,89,232,0.1); }
.ghost-button:active { transform: translateY(0) scale(0.975); }

/* ══════════════════════════════════════════
   DEPOSIT TABS
══════════════════════════════════════════ */
.deposit-tab {
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .18s;
}
.deposit-tab:hover:not(.active) { transform: translateY(-1px); }
.deposit-tab:active { transform: scale(0.97); }

/* ══════════════════════════════════════════
   RANGE CHIPS
══════════════════════════════════════════ */
.range-chip {
  transition: background .18s, color .18s, box-shadow .18s, transform .16s;
}
.range-chip:hover:not(.active) { transform: translateY(-1px); }
.range-chip:active { transform: scale(0.94); }
.range-chip.active { box-shadow: 0 4px 14px rgba(96,89,232,0.18); }

/* ══════════════════════════════════════════
   ACTION CARDS
══════════════════════════════════════════ */
.dfb-action-card {
  transition: transform .22s cubic-bezier(0.22,1,0.36,1), background .2s, box-shadow .2s, border-color .2s;
}
.dfb-action-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 28px rgba(0,0,0,0.12), 0 4px 12px rgba(96,89,232,0.08); border-color: rgba(96,89,232,0.2); }
.dfb-action-card:active { transform: translateY(-1px) scale(0.975); }

/* ══════════════════════════════════════════
   DROPDOWN ITEMS
══════════════════════════════════════════ */
.dropdown-item { transition: background .16s, color .16s; }
.dropdown-item:hover { background: rgba(96,89,232,0.06); }
.dropdown-item.logout:hover { background: rgba(239,68,68,0.08); color: #EF4444; }

/* ══════════════════════════════════════════
   LANGUAGE OPTIONS
══════════════════════════════════════════ */
.language-option { transition: background .15s, color .15s; }
.language-option:hover { background: rgba(96,89,232,0.06); color: var(--primary, #6059E8); }
.language-option:active { transform: scale(0.97); }

/* ══════════════════════════════════════════
   ICON-ONLY BUTTONS
══════════════════════════════════════════ */
.icon-only-button { transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.icon-only-button:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(96,89,232,0.12); }
.icon-only-button:active { transform: scale(0.95); }

/* ══════════════════════════════════════════
   COPY BUTTONS
══════════════════════════════════════════ */
#copyAddressBtn, .copy-btn, [id*="copy" i], [class*="copy-btn"] {
  transition: transform .18s, background .18s, color .18s, border-color .18s;
}
#copyAddressBtn:hover, .copy-btn:hover { transform: translateY(-1px); color: #6059E8; border-color: rgba(96,89,232,0.3); }
#copyAddressBtn:active, .copy-btn:active { transform: scale(0.96); }

/* ══════════════════════════════════════════
   NOTIFICATION MODAL
══════════════════════════════════════════ */
.notif-modal-backdrop {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(17,24,39,0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s, visibility .28s, background .3s, backdrop-filter .32s;
}
.notif-modal-backdrop.active {
  opacity: 1; visibility: visible; pointer-events: auto;
  background: rgba(17,24,39,0.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.notif-modal-card {
  width: min(460px, 100%); max-height: min(580px, calc(100dvh - 40px));
  background: #FFFFFF; border-radius: 24px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  display: flex; flex-direction: column; overflow: hidden;
}
.notif-modal-backdrop.active .notif-modal-card {
  animation: modalSpringIn .4s cubic-bezier(0.22,1,0.36,1) both;
}
.notif-modal-backdrop.is-closing .notif-modal-card {
  animation: modalSlideOut .24s ease-in both;
}
.notif-modal-backdrop.active.is-closing {
  opacity: 0; background: rgba(17,24,39,0);
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: opacity .24s ease-in, background .24s ease-in, backdrop-filter .24s ease-in;
}

.notif-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px; border-bottom: 1px solid rgba(0,0,0,0.07); flex-shrink: 0;
}
.notif-modal-head-left { display: flex; align-items: center; gap: 10px; }
.notif-modal-head-left h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #111827; }
.notif-modal-sub { margin: 2px 0 0; font-size: 12px; color: #9CA3AF; }
.notif-nav-btn, .notif-close-btn {
  width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08); background: #F4F5F8; color: #6B7280;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s, border-color .15s, transform .2s;
}
.notif-nav-btn:hover { background: rgba(96,89,232,0.08); color: #6059E8; border-color: rgba(96,89,232,0.2); }
.notif-close-btn:hover { transform: rotate(90deg); background: rgba(239,68,68,0.08); color: #EF4444; border-color: rgba(239,68,68,0.2); }
.notif-nav-btn.hidden { display: none !important; }

.notif-modal-content {
  overflow-y: auto; flex: 1; padding: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.1) transparent;
}
.notif-modal-content::-webkit-scrollbar { width: 4px; }
.notif-modal-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 2px; }
.notif-empty { text-align: center; padding: 48px 16px; color: #9CA3AF; font-size: 14px; }

.notif-row {
  width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 10px 1fr; gap: 12px; align-items: start;
  padding: 13px 14px; border-radius: 14px; margin-bottom: 4px;
  border: 1px solid transparent; background: transparent;
  transition: background .14s, border-color .14s;
}
.notif-row:last-child { margin-bottom: 0; }
.notif-row:hover { background: #F4F5F8; }
.notif-row.is-unread { background: rgba(96,89,232,0.05); border-color: rgba(96,89,232,0.12); }
.notif-row.is-unread:hover { background: rgba(96,89,232,0.09); }
.notif-row-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.15); margin-top: 6px; flex-shrink: 0; }
.notif-row.is-unread .notif-row-dot { background: #6059E8; }
.notif-row-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-row-title { font-size: 14px; font-weight: 500; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-row.is-unread .notif-row-title { font-weight: 600; color: #111827; }
.notif-row-preview { font-size: 13px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-row-date { font-size: 11px; color: #9CA3AF; margin-top: 1px; }

.notif-detail { padding: 4px 6px; }
.notif-detail-date { font-size: 12px; color: #9CA3AF; margin-bottom: 10px; }
.notif-detail-title { font-size: 1.05rem; font-weight: 700; color: #111827; margin: 0 0 12px; line-height: 1.35; }
.notif-detail-body { font-size: 14px; color: #4B5563; line-height: 1.65; white-space: pre-wrap; }

.notif-modal-content {
  transition: opacity .14s ease-in, transform .14s ease-in;
}
.notif-anim-slide-right { animation: notifSlideInRight .26s cubic-bezier(0.22,1,0.36,1) both; }
.notif-anim-slide-left  { animation: notifSlideInLeft  .26s cubic-bezier(0.22,1,0.36,1) both; }

/* ══════════════════════════════════════════
   FILE INPUTS
══════════════════════════════════════════ */
input[type="file"]:not(.verif-file-hidden), .field-input[type="file"],
#fiatReceiptInput, #verificationSelfieInput, #verificationPassportInput {
  background: #F4F5F8 !important; border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 12px !important; padding: 10px 14px !important; color: #4B5563 !important;
  font-size: 13px !important; font-weight: 400 !important; min-height: 46px !important;
  display: flex !important; align-items: center !important; cursor: pointer !important;
}
input[type="file"]:not(.verif-file-hidden)::file-selector-button, .field-input[type="file"]::file-selector-button,
#fiatReceiptInput::file-selector-button, #verificationSelfieInput::file-selector-button,
#verificationPassportInput::file-selector-button {
  background: #FFFFFF !important; color: #374151 !important;
  border: 1px solid rgba(0,0,0,0.1) !important; border-radius: 8px !important;
  padding: 0 12px !important; height: 30px !important; margin-right: 10px !important;
  font-weight: 500 !important; font-size: 12px !important; font-family: inherit !important;
  cursor: pointer !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center !important; vertical-align: middle !important;
  transition: background .18s, border-color .18s, color .18s !important;
}
input[type="file"]:not(.verif-file-hidden):hover::file-selector-button, .field-input[type="file"]:hover::file-selector-button,
#fiatReceiptInput:hover::file-selector-button {
  background: rgba(96,89,232,0.08) !important; border-color: rgba(96,89,232,0.2) !important; color: #6059E8 !important;
}

/* ══════════════════════════════════════════
   FIAT / VERIFICATION BOXES
══════════════════════════════════════════ */
#fiatTicketState, #verificationStatusBox {
  background: none !important; border: none !important;
  color: #6B7280 !important; font-size: 13px !important; padding: 8px 0 !important;
}
#fiatRequisitesBox {
  background: #F8F9FC !important; border: 1px solid rgba(0,0,0,0.07) !important; box-shadow: none !important;
}

/* ══════════════════════════════════════════
   TRADE PAGE — search + category tabs
══════════════════════════════════════════ */
.search-box {
  transition: background .22s, box-shadow .22s, border-color .22s;
  border: 1px solid transparent;
}
.search-box:focus-within {
  background: rgba(96,89,232,0.05) !important;
  box-shadow: 0 0 0 1px rgba(96,89,232,0.25), 0 4px 18px rgba(96,89,232,0.08);
  border-color: rgba(96,89,232,0.25) !important;
}
.search-box:focus-within svg { color: #6059E8; opacity: 1; }
.search-box svg { transition: color .2s, opacity .2s; }

.symbol-change.positive, .asset-change.positive { color: #10B981 !important; }
.symbol-change.negative, .asset-change.negative { color: #EF4444 !important; }

#categoryTabs, .category-tabs {
  overflow-x: auto !important; overflow-y: hidden !important;
  flex-wrap: nowrap !important; scrollbar-width: none !important;
}
#categoryTabs::-webkit-scrollbar, .category-tabs::-webkit-scrollbar { display: none !important; }
#categoryTabs .category-tab, .category-tab { flex: 0 0 auto !important; min-width: max-content !important; white-space: nowrap !important; }

@media (min-width:1101px) {
  #categoryTabs, .category-tabs {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
    overflow: visible !important; flex-wrap: unset !important; padding: 0 0 12px !important;
  }
  #categoryTabs .category-tab, .category-tab {
    min-width: 0 !important; white-space: nowrap !important; overflow: visible !important;
    text-align: center !important; padding: 9px 4px !important; font-size: 11px !important;
  }
  .category-tabs-shell .scroll-arrow { display: none !important; }
}

input[type="file"].verif-file-hidden { display: none !important; }


/* ── Verification modal: compact sizing, no scroll ── */
.verification-card {
  max-height: min(92vh, 92dvh, 800px) !important;
  overflow-y: visible !important;
}
.modal-backdrop .verification-card.modal-card {
  padding: 22px !important;
}
@media (max-width: 600px) {
  .modal-backdrop .verification-card.modal-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }
  #verificationModal .modal-header { margin-bottom: 8px !important; }
  #verificationModal .modal-header h2 { font-size: 17px !important; }
  #verificationModal .verif-status-bar { font-size: 11px !important; margin-bottom: 8px !important; }
  #verificationModal .verif-field-list { gap: 6px !important; margin-bottom: 10px !important; }
  #verificationModal .verif-flabel { font-size: 11px !important; }
  #verificationModal .verif-fnum { font-size: 10px !important; }
  #verificationModal .verif-input { padding: 7px 10px !important; font-size: 12px !important; border-radius: 8px !important; }
  #verificationModal .verif-photos-block { gap: 8px !important; margin-bottom: 10px !important; }
  #verificationModal .verif-photo-heading { font-size: 9px !important; margin-bottom: 3px !important; }
  #verificationModal .verif-photo-attach { padding: 7px 8px !important; font-size: 11px !important; border-radius: 8px !important; gap: 5px !important; }
  #verificationModal .verif-photo-attach svg { width: 14px !important; height: 14px !important; }
  #verificationModal .modal-actions { margin-top: 10px !important; gap: 8px !important; }
  #verificationModal .modal-actions .primary-button,
  #verificationModal .modal-actions .ghost-button { min-height: 42px !important; font-size: 13px !important; border-radius: 12px !important; }
}

/* ── Primary button base appearance (for pages without dashboard/support css) ── */
.primary-button {
  background: var(--primary, #6059E8);
  color: #fff;
  border: 0;
  border-radius: 13px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  min-height: 50px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(96,89,232,0.22);
  box-sizing: border-box;
}
.primary-button:hover { background: var(--primary-hover, #4F48D1); }