/* css/wallet-settings.css
   Wallet Settings, Quick Buy, and Manage Payment Methods screens.
   Self-contained — deliberately doesn't reuse .settings-row/.settings-panel
   from wallet.css, since those are already used for the collapsed
   in-page toggle-panel pattern with different (unbordered) styling. */

.service-page.wallet-settings-page,
.service-page.quick-buy-page,
.service-page.payment-methods-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ws-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--font-semi);
  color: var(--text-muted);
  margin: var(--space-sm) 2px -6px;
}
.ws-group-label svg { flex-shrink: 0; }

.ws-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ws-card > * + * { border-top: 1px solid var(--border-subtle); }

.ws-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-ui);
  cursor: pointer;
}
.ws-row:active { background: var(--bg-hover); }
.ws-row--static { cursor: default; }
.ws-row--static:active { background: none; }

.ws-row-value {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-row .chev {
  display: flex;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ws-inline-edit {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-md) var(--space-md);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-sm);
  flex-wrap: wrap;
}
.ws-inline-edit .prefix {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
.ws-inline-edit input {
  flex: 1;
  min-width: 64px;
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-ui);
}
.ws-inline-edit input:focus {
  outline: none;
  border-color: var(--border-active);
}

.ws-card-chip {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.ws-empty-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}
.ws-empty-note svg { color: var(--pending); flex-shrink: 0; margin-top: 2px; }
.ws-empty-note .btn { margin-left: auto; flex-shrink: 0; }
.ws-empty-note span { flex: 1; }

/* ── Quick Buy screen ─────────────────────────────────────────────── */

.qb-field-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
}

.qb-plan-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
}
.qb-plan-card:active { background: var(--bg-hover); }
.qb-plan-tag {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--bg-hover); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-secondary);
  flex-shrink: 0;
}
.qb-plan-info { flex: 1; min-width: 0; }
.qb-plan-name { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--text-primary); }
.qb-plan-meta { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 1px; }
.qb-plan-price { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--text-primary); flex-shrink: 0; }
.qb-plan-cashback { font-size: var(--text-xs); color: var(--success); margin-top: 1px; }
.qb-plan-price-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }

/* "Recently used" quick-pick row inside the plan picker sheet — plain
   selectable chips, no chevron (they aren't a drill-in navigation,
   just a shortcut onto the same selection the rows below make). */
.qb-recent-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.qb-recent-chip {
  flex-shrink: 0;
  min-width: 92px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  text-align: left;
  font-family: var(--font-ui);
  cursor: pointer;
}

.qb-recent-chip:active { background: var(--bg-hover); }

.qb-recent-chip.selected {
  background: var(--success-glow);
  border-color: rgba(22, 163, 74, 0.20);
}

.qb-recent-chip__size {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--text-primary);
}

.qb-recent-chip__meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.qb-plan-empty {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-card);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
}

.qb-phone-field {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: var(--text-base);
  color: var(--text-primary);
}
.qb-phone-field input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-family: var(--font-ui);
}
.qb-phone-field input:focus { outline: none; }
.qb-phone-check { color: var(--success); flex-shrink: 0; }

.qb-promo-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.qb-promo-icon {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-active);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
}
.qb-promo-title { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--text-primary); }
.qb-promo-sub { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }

.qb-btn-row { display: flex; gap: var(--space-sm); margin-top: var(--space-xs); }
.qb-btn-row .btn { flex: 1; }

/* ── Payment Methods screen ───────────────────────────────────────── */

.pm-card-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle);
  text-align: left;
  font-family: var(--font-ui);
  cursor: pointer;
}
.ws-card > .pm-card-row:first-child { border-top: none; }
.pm-card-row:active { background: var(--bg-hover); }

.pm-card-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--bg-hover); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.pm-card-info { flex: 1; min-width: 0; }
.pm-card-name { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--text-primary); }
.pm-card-meta { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 1px; }
.pm-card-active-badge {
  font-size: 10px; font-weight: var(--font-bold); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--success); background: var(--success-glow); border: 1px solid var(--success-soft);
  border-radius: var(--radius-full); padding: 3px 8px; flex-shrink: 0;
}
.pm-card-hide-btn {
  flex-shrink: 0;
  background: none; border: none; color: var(--text-muted);
  font-size: var(--text-xs); padding: 6px; cursor: pointer;
}
.pm-card-hide-btn:active { color: var(--danger); }

.pm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  color: var(--text-secondary);
}
.pm-empty-state svg { color: var(--text-muted); }
.pm-empty-state .btn { margin-top: var(--space-xs); }