/* NexoPlay V30 - final release polish: Wallet themes, admin media manager, product state controls. */

/* ---------- Wallet: light/dark contrast ---------- */
:root {
  --nx-wallet-bg: rgba(255,255,255,.96);
  --nx-wallet-surface: #ffffff;
  --nx-wallet-surface-2: #f4f7fb;
  --nx-wallet-text: #0b1930;
  --nx-wallet-muted: #52627a;
  --nx-wallet-border: rgba(32,72,130,.18);
  --nx-wallet-accent: #2563eb;
  --nx-wallet-accent-2: #0ea5e9;
  --nx-wallet-good: #087f5b;
  --nx-wallet-shadow: 0 18px 55px rgba(15, 39, 75, .12);
}

html[data-theme="dark"],
body.dark-mode,
body[data-theme="dark"] {
  --nx-wallet-bg: rgba(7,18,38,.97);
  --nx-wallet-surface: #0b1d38;
  --nx-wallet-surface-2: #102744;
  --nx-wallet-text: #f5f9ff;
  --nx-wallet-muted: #b7c6da;
  --nx-wallet-border: rgba(137,184,255,.24);
  --nx-wallet-accent: #69a7ff;
  --nx-wallet-accent-2: #67d8ff;
  --nx-wallet-good: #68e0b5;
  --nx-wallet-shadow: 0 18px 55px rgba(0,0,0,.34);
}

#walletModal .modal-content,
#walletPanel,
.wallet-panel,
.wallet-card,
.wallet-summary,
.wallet-history,
.wallet-topup,
.wallet-balance-card,
.wallet-transaction,
.wallet-section,
#providerWalletView,
.provider-wallet,
.provider-wallet-card {
  background: var(--nx-wallet-bg) !important;
  color: var(--nx-wallet-text) !important;
  border-color: var(--nx-wallet-border) !important;
}

#walletModal .modal-content,
#walletPanel,
.wallet-panel,
#providerWalletView,
.provider-wallet {
  box-shadow: var(--nx-wallet-shadow) !important;
}

#walletModal h1, #walletModal h2, #walletModal h3, #walletModal h4,
#walletPanel h1, #walletPanel h2, #walletPanel h3, #walletPanel h4,
.wallet-panel h1, .wallet-panel h2, .wallet-panel h3, .wallet-panel h4,
.wallet-card h1, .wallet-card h2, .wallet-card h3, .wallet-card h4,
#providerWalletView h1, #providerWalletView h2, #providerWalletView h3, #providerWalletView h4,
.provider-wallet h1, .provider-wallet h2, .provider-wallet h3, .provider-wallet h4 {
  color: var(--nx-wallet-text) !important;
}

#walletModal p, #walletModal span, #walletModal label, #walletModal small,
#walletPanel p, #walletPanel span, #walletPanel label, #walletPanel small,
.wallet-panel p, .wallet-panel span, .wallet-panel label, .wallet-panel small,
.wallet-card p, .wallet-card span, .wallet-card label, .wallet-card small,
#providerWalletView p, #providerWalletView span, #providerWalletView label, #providerWalletView small,
.provider-wallet p, .provider-wallet span, .provider-wallet label, .provider-wallet small {
  color: inherit;
}

.wallet-muted,
.wallet-subtitle,
.wallet-meta,
.wallet-transaction small,
.wallet-history small,
#providerWalletView .muted,
.provider-wallet .muted {
  color: var(--nx-wallet-muted) !important;
}

#walletModal input,
#walletModal select,
#walletModal textarea,
#walletPanel input,
#walletPanel select,
#walletPanel textarea,
.wallet-panel input,
.wallet-panel select,
.wallet-panel textarea,
#providerWalletView input,
#providerWalletView select,
#providerWalletView textarea,
.provider-wallet input,
.provider-wallet select,
.provider-wallet textarea {
  background: var(--nx-wallet-surface) !important;
  color: var(--nx-wallet-text) !important;
  border: 1px solid var(--nx-wallet-border) !important;
}

#walletModal input::placeholder,
#walletPanel input::placeholder,
.wallet-panel input::placeholder,
#providerWalletView input::placeholder,
.provider-wallet input::placeholder {
  color: var(--nx-wallet-muted) !important;
  opacity: .85;
}

.wallet-balance,
.wallet-amount,
.provider-wallet-balance,
#providerWalletBalance {
  color: var(--nx-wallet-good) !important;
}

/* ---------- V30 Admin image uploader ---------- */
.nx30-admin-image-uploader {
  margin: 12px 0 16px;
  border: 1px solid rgba(126,178,255,.28);
  border-radius: 16px;
  padding: 12px;
  background: rgba(4,23,55,.42);
  color: #f5f9ff;
}

.nx30-upload-drop {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 84px;
  padding: 12px;
  border: 1.5px dashed rgba(134,188,255,.46);
  border-radius: 14px;
  background: rgba(8,32,70,.58);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
  cursor: pointer;
}

.nx30-upload-drop:hover,
.nx30-upload-drop.is-dragging {
  border-color: #6eb5ff;
  background: rgba(23,67,121,.58);
}

.nx30-upload-drop.is-dragging { transform: scale(.995); }

.nx30-upload-preview {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}

.nx30-upload-copy strong { display:block; color:#fff; margin-bottom:4px; }
.nx30-upload-copy small { color:#b9cbe4; line-height:1.35; }
.nx30-upload-button {
  border: 1px solid rgba(142,194,255,.35);
  border-radius: 12px;
  background: rgba(36,101,187,.48);
  color: #fff;
  padding: 9px 12px;
  font-weight: 750;
  cursor: pointer;
}
.nx30-upload-button:disabled { opacity:.55; cursor:wait; }

/* ---------- V30 Admin product state manager ---------- */
.nx30-product-manager {
  margin-top: 18px;
  border: 1px solid rgba(120,177,255,.26);
  border-radius: 18px;
  padding: 15px;
  background: rgba(4,20,49,.58);
  color: #f6f9ff;
}

.nx30-product-manager-head {
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.nx30-product-manager-head h3 { margin:0; color:#fff; }
.nx30-product-manager-head p { margin:5px 0 0; color:#b8cbe4; font-size:.9rem; }

.nx30-product-manager-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.nx30-product-manager button,
.nx30-state-btn {
  border:1px solid rgba(137,190,255,.3);
  border-radius:11px;
  padding:8px 10px;
  background:rgba(25,75,140,.65);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.nx30-product-manager button:hover,
.nx30-state-btn:hover { background:rgba(39,100,177,.72); }
.nx30-state-btn.danger { background:rgba(150,36,58,.62); border-color:rgba(255,124,145,.36); }
.nx30-state-btn.good { background:rgba(20,122,89,.62); border-color:rgba(106,235,190,.3); }

.nx30-manager-tools {
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto;
  gap:10px;
  margin-bottom:12px;
}
.nx30-manager-tools input,
.nx30-manager-tools select {
  min-height:40px;
  border-radius:11px;
  border:1px solid rgba(126,178,255,.28);
  background:rgba(6,26,58,.78);
  color:#fff;
  padding:8px 11px;
}

.nx30-product-list {
  display:grid;
  gap:9px;
  content-visibility:auto;
  contain-intrinsic-size: 700px;
}
.nx30-product-row {
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  border:1px solid rgba(121,178,255,.2);
  border-radius:14px;
  padding:9px;
  background:rgba(9,31,68,.7);
}
.nx30-product-row.is-hidden { opacity:.76; }
.nx30-product-row img {
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:11px;
  background:rgba(255,255,255,.08);
}
.nx30-product-main { min-width:0; }
.nx30-product-name {
  color:#fff;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nx30-product-meta { color:#b8cbe4; font-size:.82rem; margin-top:3px; }
.nx30-product-status {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:5px;
  padding:3px 7px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:800;
  background:rgba(18,134,91,.2);
  color:#86f1c9;
}
.nx30-product-row.is-hidden .nx30-product-status { background:rgba(181,78,66,.2); color:#ffc1b8; }
.nx30-product-row-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

.nx30-manager-empty {
  padding:22px;
  text-align:center;
  color:#b8cbe4;
  border:1px dashed rgba(126,178,255,.24);
  border-radius:14px;
}


/* ---------- Actual V30 uploader/manager class hooks ---------- */
.nx30-admin-upload {
  margin: 12px 0 16px;
  border: 1px solid rgba(126,178,255,.28);
  border-radius: 16px;
  padding: 12px;
  background: rgba(4,23,55,.42);
  color: #f5f9ff;
}
.nx30-admin-drop {
  display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:12px; align-items:center;
  min-height:78px; padding:12px; border:1.5px dashed rgba(134,188,255,.46); border-radius:14px;
  background:rgba(8,32,70,.58); cursor:pointer; transition:border-color .16s ease, background .16s ease;
}
.nx30-admin-drop.drag, .nx30-admin-drop:hover { border-color:#6eb5ff; background:rgba(23,67,121,.58); }
.nx30-admin-drop strong { display:block; color:#fff; margin-bottom:3px; }
.nx30-admin-drop small { display:block; color:#b9cbe4; }
.nx30-upload-icon { font-size:1.65rem; text-align:center; }
.nx30-admin-preview { margin-top:10px; min-height:0; }
.nx30-admin-preview img { width:92px; height:58px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.18); }
.nx30-admin-preview small, .nx30-upload-status { color:#b9cbe4; }

.nx30-manager { margin-top:18px; background:rgba(4,20,49,.58) !important; color:#f6f9ff !important; }
.nx30-manager-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.nx30-manager-head h4 { margin:0; color:#fff; }
.nx30-manager-head p { margin:5px 0 0; color:#b8cbe4; }
.nx30-manager-bulk, .nx30-filter-chips, .nx30-product-actions { display:flex; flex-wrap:wrap; gap:7px; }
.nx30-manager button, .nx30-product-actions button, .nx30-filter-chips button {
  border:1px solid rgba(137,190,255,.3); border-radius:10px; padding:8px 10px;
  background:rgba(25,75,140,.65); color:#fff; font-weight:750; cursor:pointer;
}
.nx30-filter-chips button.active, .nx30-product-actions button.primary { background:#2563eb; border-color:#73acff; }
.nx30-product-actions button.danger { background:rgba(159,37,60,.7); border-color:rgba(255,127,149,.4); }
.nx30-product-row.inactive { opacity:.78; }
.nx30-product-thumb { width:54px; height:54px; border-radius:11px; display:grid; place-items:center; overflow:hidden; background:rgba(255,255,255,.08); font-size:1.4rem; }
.nx30-product-thumb img { width:100%; height:100%; object-fit:cover; }
.nx30-product-title { display:flex; align-items:center; gap:8px; min-width:0; }
.nx30-product-title strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; }
.nx30-product-main p { margin:4px 0 2px; color:#b8cbe4; font-size:.82rem; }
.nx30-product-main small { color:#8fb0d9; }
.nx30-state { white-space:nowrap; border-radius:999px; padding:3px 7px; font-size:.72rem; font-weight:800; }
.nx30-state.on { background:rgba(19,140,97,.22); color:#89f1cc; }
.nx30-state.off { background:rgba(174,68,60,.2); color:#ffc3bb; }
.nx30-empty { padding:20px; text-align:center; color:#b8cbe4; border:1px dashed rgba(126,178,255,.24); border-radius:14px; }

/* ---------- Wallet complete theme coverage ---------- */
.wallet-modal, .wallet-body, .wallet-hero, .wallet-help, .wallet-stats, .wallet-stat,
.wallet-topup-form, .wallet-level, .wallet-benefit, .wallet-tx, .wallet-empty {
  color:var(--nx-wallet-text) !important;
  border-color:var(--nx-wallet-border) !important;
}
.wallet-modal { background:var(--nx-wallet-bg) !important; box-shadow:var(--nx-wallet-shadow) !important; }
.wallet-body, .wallet-hero, .wallet-stat, .wallet-panel, .wallet-help, .wallet-level, .wallet-benefit, .wallet-tx {
  background:var(--nx-wallet-surface) !important;
}
.wallet-stat, .wallet-help, .wallet-level, .wallet-benefit, .wallet-tx { border:1px solid var(--nx-wallet-border) !important; }
.wallet-head { border-color:var(--nx-wallet-border) !important; }
.wallet-head h2, .wallet-kicker, .wallet-stat .value, .wallet-level-row strong, .wallet-benefit strong, .wallet-tx strong { color:var(--nx-wallet-text) !important; }
.wallet-updated, .wallet-stat .label, .wallet-stat .sub, .wallet-level-row span, .wallet-tx span, .wallet-muted { color:var(--nx-wallet-muted) !important; }
.wallet-action, .wallet-preset button, .wallet-topup-form button {
  background:var(--nx-wallet-surface-2) !important; color:var(--nx-wallet-text) !important; border:1px solid var(--nx-wallet-border) !important;
}
.wallet-action.primary, .wallet-topup-form button.primary { background:var(--nx-wallet-accent) !important; color:#fff !important; border-color:transparent !important; }
.wallet-input { background:var(--nx-wallet-surface) !important; color:var(--nx-wallet-text) !important; border:1px solid var(--nx-wallet-border) !important; }
.wallet-progress { background:var(--nx-wallet-surface-2) !important; }
.wallet-progress span { background:linear-gradient(90deg,var(--nx-wallet-accent),var(--nx-wallet-accent-2)) !important; }
.wallet-plus { color:var(--nx-wallet-good) !important; }
.wallet-minus { color:#e35067 !important; }

/* ---------- Mobile performance ---------- */
@media (max-width: 760px) {
  .nx30-admin-image-uploader,
  .nx30-admin-upload,
  .nx30-product-manager,
  .nx30-manager,
  #walletModal .modal-content,
  .wallet-panel,
  .wallet-card,
  #providerWalletView,
  .provider-wallet {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .nx30-upload-drop,
  .nx30-admin-drop {
    grid-template-columns:50px minmax(0,1fr);
  }
  .nx30-upload-preview { width:50px; height:50px; }
  .nx30-admin-drop { grid-template-columns:42px minmax(0,1fr); }
  .nx30-admin-drop button { grid-column:1 / -1; width:100%; }
  .nx30-upload-button { grid-column:1 / -1; width:100%; }
  .nx30-manager-tools { grid-template-columns:1fr; }
  .nx30-product-row {
    grid-template-columns:46px minmax(0,1fr);
    align-items:start;
  }
  .nx30-product-row img { width:46px; height:46px; }
  .nx30-product-row-actions,
  .nx30-product-actions {
    grid-column:1 / -1;
    justify-content:stretch;
  }
  .nx30-product-row-actions .nx30-state-btn,
  .nx30-product-actions button { flex:1 1 105px; }
  .nx30-product-manager,
  .nx30-manager,
  .nx30-product-row,
  .nx30-upload-drop,
  .nx30-admin-drop {
    box-shadow:none !important;
  }
}