/**
 * ════════════════════════════════════════════════════════
 *  CitadelVest Pro — Minimal Modal Redesign
 *  Matches the design language of deposit-guide.html
 *  Font: DM Sans · Colors: brand CSS variables
 * ════════════════════════════════════════════════════════
 */

/* ── Import DM Sans if not already present ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Dark mode surface overrides ── */
body.dark-mode {
  --m-surface:        var(--bg-card, #1e2433);
  --m-surface-2:      var(--bg-secondary, #161c2c);
  --m-border:         rgba(255,255,255,0.1);
  --m-text:           var(--text-primary, #e2e8f0);
  --m-text-2:         var(--text-muted, #94a3b8);
  --m-text-muted:     rgba(255,255,255,0.35);
  --m-warning-bg:     rgba(251,191,36,0.08);
  --m-warning-border: rgba(251,191,36,0.35);
  --m-warning-text:   #fcd34d;
  --m-shadow:         0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
}


/* ── Local variable aliases (maps to brand.css vars) ── */
:root {
  --m-primary:      var(--primary,      #2C3E50);
  --m-accent:       var(--accent,       #F39C12);
  --m-gradient:     var(--brand-gradient, linear-gradient(135deg, #2C3E50, #1A252F));
  --m-surface:      #ffffff;
  --m-surface-2:    #f8fafc;
  --m-border:       #e2e8f0;
  --m-text:         #0f172a;
  --m-text-2:       #64748b;
  --m-text-muted:   #94a3b8;
  --m-danger:       #ef4444;
  --m-success:      #22c55e;
  --m-warning-bg:   #fefce8;
  --m-warning-border: #fbbf24;
  --m-warning-text: #78350f;
  --m-r-sm:   8px;
  --m-r-md:   12px;
  --m-r-lg:   18px;
  --m-r-xl:   24px;
  --m-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.07);
}

/* ══════════════════════════════════════════
   OVERLAY
══════════════════════════════════════════ */
.cvp-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.cvp-modal.cvp-open { display: flex; }

/* ══════════════════════════════════════════
   DIALOG SHELL
══════════════════════════════════════════ */
.cvp-dialog {
  background: var(--m-surface);
  border-radius: var(--m-r-xl);
  box-shadow: var(--m-shadow);
  width: 100%;
  max-width: 520px;
  margin: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'DM Sans', 'Poppins', sans-serif;
  max-height: calc(100vh - 40px);
}
.cvp-dialog--wide { max-width: 600px; }

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
.cvp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--m-border);
  flex-shrink: 0;
  gap: 12px;
  background: var(--bg-secondary);
}

.cvp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cvp-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb, 44,62,80), .1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cvp-header-icon .material-icons-sharp {
  font-size: 1.2rem;
  color: var(--m-primary);
}
.cvp-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.cvp-subtitle {
  font-size: 0.78rem;
  color: var(--m-text-2);
  margin: 2px 0 0;
  line-height: 1;
}
.cvp-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--m-surface-2);
  color: var(--m-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  line-height: 1;
}
.cvp-close:hover {
  background: var(--m-border);
  color: var(--m-text);
}
.cvp-close .material-icons-sharp { font-size: 1.1rem; }

/* ══════════════════════════════════════════
   BODY
══════════════════════════════════════════ */
.cvp-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--bg-secondary);
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.cvp-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--m-border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
  background: var(--m-surface);
}

/* ══════════════════════════════════════════
   BALANCE BANNER
══════════════════════════════════════════ */
.cvp-balance-banner {
  background: var(--m-gradient);
  border-radius: var(--m-r-md);
  padding: 18px 20px;
  color: #fff;
  text-align: center;
}
.cvp-balance-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
}
.cvp-balance-amount {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0;
  line-height: 1;
}
.cvp-balance-unit {
  font-size: 0.8rem;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
}

/* ══════════════════════════════════════════
   FORM FIELDS
══════════════════════════════════════════ */
.cvp-field { display: flex; flex-direction: column; gap: 6px; }
.cvp-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--m-text);
  display: flex;
  align-items: center;
  gap: 5px;
}
.cvp-label-required { color: var(--m-danger); }
.cvp-input,
.cvp-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--m-border);
  border-radius: var(--m-r-sm);
  font-family: 'DM Sans', 'Poppins', sans-serif;
  font-size: 0.93rem;
  color: var(--m-text);
  background: var(--m-surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.cvp-input:focus,
.cvp-select:focus {
  border-color: var(--m-primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 44,62,80), .1);
}
.cvp-input--mono { font-family: 'DM Mono', monospace; font-size: 0.85rem; }
.cvp-hint {
  font-size: 0.76rem;
  color: var(--m-text-2);
  margin: 0;
  line-height: 1.5;
}
.cvp-hint--danger { color: var(--m-danger); }

/* Select wrapper (for arrow) */
.cvp-select-wrap { position: relative; }
.cvp-select-wrap::after {
  content: 'expand_more';
  font-family: 'Material Icons Sharp';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--m-text-2);
  pointer-events: none;
  font-size: 1.1rem;
}

/* ══════════════════════════════════════════
   QUICK AMOUNT BUTTONS
══════════════════════════════════════════ */
.cvp-quick-amounts {
  display: flex;
  gap: 8px;
}
.cvp-quick-btn {
  flex: 1;
  padding: 8px 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--m-r-sm);
  border: 1.5px solid var(--m-border);
  background: var(--m-surface-2);
  color: var(--m-text-2);
  cursor: pointer;
  transition: all .15s;
}
.cvp-quick-btn:hover {
  border-color: var(--m-primary);
  color: var(--m-primary);
  background: rgba(var(--primary-rgb, 44,62,80), .06);
}
.cvp-quick-btn--max {
  border-color: transparent;
  background: var(--m-primary);
  color: #fff;
}
.cvp-quick-btn--max:hover {
  background: var(--m-primary-dark);
  color: #fff;
  border-color: transparent;
}

/* ══════════════════════════════════════════
   INFO / PREVIEW BOXES
══════════════════════════════════════════ */
.cvp-preview {
  background: var(--m-surface-2);
  border: 1.5px solid var(--m-border);
  border-radius: var(--m-r-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cvp-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
}
.cvp-preview-row-label { color: var(--m-text-2); }
.cvp-preview-row-value { font-weight: 600; color: var(--m-text); }
.cvp-preview-row-value--accent { color: var(--m-accent); }
.cvp-preview-row-value--primary { color: var(--m-primary); font-size: 1.1rem; }
.cvp-preview-divider {
  height: 1px;
  background: var(--m-border);
  margin: 2px 0;
}

/* Warning / Info strips */
.cvp-info-strip {
  border-radius: var(--m-r-sm);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.83rem;
  line-height: 1.55;
}
.cvp-info-strip .material-icons-sharp {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.cvp-info-strip--warning {
  background: var(--m-warning-bg);
  border: 1.5px solid var(--m-warning-border);
  color: var(--m-warning-text);
}
.cvp-info-strip--warning .material-icons-sharp { color: #d97706; }
.cvp-info-strip--danger {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  color: #7f1d1d;
}
.cvp-info-strip--danger .material-icons-sharp { color: var(--m-danger); }
.cvp-info-strip--info {
  background: rgba(var(--primary-rgb, 44,62,80), .06);
  border: 1.5px solid rgba(var(--primary-rgb, 44,62,80), .15);
  color: var(--m-text-2);
}
.cvp-info-strip--info .material-icons-sharp { color: var(--m-primary); }
.cvp-info-strip--success {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #14532d;
}
.cvp-info-strip--success .material-icons-sharp { color: var(--m-success); }

/* ══════════════════════════════════════════
   ADDRESS DISPLAY
══════════════════════════════════════════ */
.cvp-address-block {
  background: var(--m-surface-2);
  border: 1.5px solid var(--m-border);
  border-radius: var(--m-r-md);
  overflow: visible; /* ✅ was 'hidden' — was clipping address text & copy button */
}
.cvp-address-block-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--m-border);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--m-text-2);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.cvp-address-value {
  padding: 12px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  color: var(--m-text);
  word-break: break-all;
  line-height: 1.6;
  border-bottom: 1px solid var(--m-border);
}
.cvp-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--m-primary);
  cursor: pointer;
  transition: background .15s;
}
.cvp-copy-btn:hover { background: rgba(var(--primary-rgb, 44,62,80), .06); }
.cvp-copy-btn .material-icons-sharp { font-size: 0.95rem; }

/* ══════════════════════════════════════════
   STEP BLOCKS (Deposit Info)
══════════════════════════════════════════ */
.cvp-steps { display: flex; flex-direction: column; gap: 14px; }
.cvp-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cvp-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--m-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.cvp-step-content h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--m-text);
  margin: 0 0 3px;
}
.cvp-step-content p {
  font-size: 0.82rem;
  color: var(--m-text-2);
  margin: 0;
  line-height: 1.5;
}

/* ══════════════════════════════════════════
   NETWORK OPTION CARDS
══════════════════════════════════════════ */
.cvp-network-options { display: flex; flex-direction: column; gap: 8px; }
.cvp-network-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--m-border);
  border-radius: var(--m-r-md);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--m-surface);
}
.cvp-network-opt:hover:not(.cvp-network-opt--disabled) {
  border-color: var(--m-primary);
  background: rgba(var(--primary-rgb, 44,62,80), .04);
}
.cvp-network-opt--active {
  border-color: var(--m-primary) !important;
  background: rgba(var(--primary-rgb, 44,62,80), .06) !important;
}
.cvp-network-opt--disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--m-surface-2);
}
.cvp-network-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--m-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.cvp-network-info { flex: 1; }
.cvp-network-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--m-text);
  display: block;
}
.cvp-network-desc { font-size: 0.76rem; color: var(--m-text-2); }
.cvp-network-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.cvp-network-badge--available { background: #dcfce7; color: #15803d; }
.cvp-network-badge--soon { background: #fef3c7; color: #92400e; }

/* ══════════════════════════════════════════
   PLAN SELECTOR
══════════════════════════════════════════ */
.cvp-plan-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.cvp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: var(--m-r-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity .15s, transform .12s, box-shadow .15s;
  text-decoration: none;
  white-space: nowrap;
}
.cvp-btn:active { transform: scale(.98); }
.cvp-btn--primary {
  background: var(--m-gradient);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb, 44,62,80), .25);
}
.cvp-btn--primary:hover {
  opacity: .9;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb, 44,62,80), .35);
}
.cvp-btn--ghost {
  background: var(--m-surface-2);
  color: var(--m-text-2);
  border: 1.5px solid var(--m-border);
}
.cvp-btn--ghost:hover {
  background: var(--m-border);
  color: var(--m-text);
}
.cvp-btn--danger { background: var(--m-danger); color: #fff; }
.cvp-btn--success { background: #16a34a; color: #fff; }
.cvp-btn--full { width: 100%; }
.cvp-btn--sm { padding: 8px 14px; font-size: 0.82rem; }
.cvp-btn .material-icons-sharp { font-size: 1rem; }

/* ══════════════════════════════════════════
   CHECKBOX
══════════════════════════════════════════ */
.cvp-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.87rem;
  color: var(--m-text);
  margin-top: 14px;
  margin-bottom: 14px;
}

.cvp-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--m-primary);
  cursor: pointer;
  -webkit-appearance: checkbox;
  appearance: checkbox;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   VALIDATION ERROR STRIP
══════════════════════════════════════════ */
.cvp-error-strip {
  display: none;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: var(--m-r-sm);
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #991b1b;
}
.cvp-error-strip.cvp-visible { display: block; }

/* ══════════════════════════════════════════
   DIVIDER
══════════════════════════════════════════ */
.cvp-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--m-text-muted);
}
.cvp-divider::before,
.cvp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--m-border);
}

/* ══════════════════════════════════════════
   COMING SOON STATE
══════════════════════════════════════════ */
.cvp-coming-soon {
  text-align: center;
  padding: 32px 24px;
}
.cvp-coming-soon-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}
.cvp-coming-soon h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0 0 6px;
}
.cvp-coming-soon p {
  font-size: 0.85rem;
  color: var(--m-text-2);
  margin: 0 0 16px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════
   MANAGE ADDRESSES LIST
══════════════════════════════════════════ */
.cvp-addr-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--m-border);
  border-radius: var(--m-r-md);
  background: var(--m-surface);
}
.cvp-addr-item + .cvp-addr-item { margin-top: 8px; }
.cvp-addr-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(var(--primary-rgb, 44,62,80), .08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cvp-addr-icon .material-icons-sharp {
  font-size: 1rem;
  color: var(--m-primary);
}

/* ══════════════════════════════════════════
   PROMO CODE MODAL
══════════════════════════════════════════ */
.cvp-promo-input-wrap {
  display: flex;
  gap: 8px;
}
.cvp-promo-input-wrap .cvp-input { flex: 1; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 600px) {
  .cvp-dialog { border-radius: var(--m-r-lg); max-width: 100%; }
  .cvp-body { padding: 18px; gap: 14px; }
  .cvp-header { padding: 16px 18px; }
  .cvp-footer { padding: 14px 18px; }
  .cvp-balance-amount { font-size: 1.6rem; }
}