/* ===== ISSUE DEBIT CARD PAGE ===== */
.issue-page {
  padding: 28px 40px 80px;
  max-width: 1100px;
}

.page-header {
  margin-bottom: 28px;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #f0f6fc;
}

.issue-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .issue-page { padding: 24px 20px 60px; }
}
@media (max-width: 600px) {
  .issue-page { padding: 20px 16px 60px; }
}
@media (max-width: 900px) {
  .issue-grid { grid-template-columns: 1fr; }
}

/* Form Panels */
.form-panel,
.preview-panel,
.requirements-panel,
.fee-panel {
  background: var(--app-surface-2);
  border: 1px solid rgba(240,246,252,.06);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
  color: #f0f6fc;
  margin-bottom: 18px;
}

/* Card Type Selection */
.card-type-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-type-option {
  cursor: pointer;
}
.card-type-option input { display: none; }

.card-type-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(240,246,252,.08);
  border-radius: 10px;
  transition: all .2s;
}

.card-type-option.selected .card-type-inner {
  border-color: var(--app-primary);
  background: rgba(92,184,230,.06);
}

.card-type-option:hover .card-type-inner {
  border-color: rgba(92,184,230,.4);
}

.card-type-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(240,246,252,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--app-primary);
  flex-shrink: 0;
}

.card-type-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-type-name {
  font-size: 14px;
  font-weight: 600;
  color: #f0f6fc;
}

.card-type-desc {
  font-size: 12px;
  color: #8b949e;
}

.card-type-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--app-primary);
}

/* Form Fields */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 12px;
  color: #8b949e;
  margin-bottom: 6px;
}

.form-input,
.form-select {
  width: 100%;
  padding: 11px 14px;
  background: rgba(240,246,252,.04);
  border: 1px solid rgba(240,246,252,.08);
  border-radius: 8px;
  color: #f0f6fc;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--app-primary);
}

.form-select {
  color-scheme: dark;
}

.form-select option {
  background: #1a1f2e;
  color: #f0f6fc;
}

.form-input + .form-input,
.form-input + .form-row {
  margin-top: 8px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.form-select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Terms */
.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #8b949e;
  cursor: pointer;
  margin-bottom: 18px;
}
.terms-check input {
  margin-top: 2px;
  accent-color: var(--app-primary);
}
.terms-check a {
  color: var(--app-primary);
  text-decoration: none;
}
.terms-check a:hover {
  text-decoration: underline;
}

.apply-btn {
  width: 100%;
  padding: 14px;
  background: var(--app-primary);
  color: #0a0e17;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.apply-btn:hover {
  background: #7ccbf0;
}

/* Card Preview (mini) */
.debit-card.mini {
  width: 100%;
  max-width: 320px;
  height: 195px;
  margin: 0 auto;
}

.debit-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(92,184,230,.12);
}

.debit-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--app-surface-2) 0%, #1a2332 40%, #0f1923 100%);
}
.debit-card-bg::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92,184,230,.1) 0%, transparent 70%);
}

.debit-card-content {
  position: relative;
  z-index: 1;
  padding: 20px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.debit-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.debit-card-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--app-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}

.debit-card-type {
  font-size: 10px;
  color: rgba(240,246,252,.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid rgba(240,246,252,.15);
  padding: 2px 8px;
  border-radius: 20px;
}

.debit-card-number {
  font-size: 17px;
  font-weight: 500;
  color: #f0f6fc;
  letter-spacing: 3px;
  font-family: 'Courier New', monospace;
}

.debit-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.debit-card-holder {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.debit-card-label {
  font-size: 8px;
  text-transform: uppercase;
  color: rgba(240,246,252,.4);
  letter-spacing: 1px;
}

.debit-card-name {
  font-size: 12px;
  font-weight: 500;
  color: #f0f6fc;
  letter-spacing: 1px;
}

/* KYC Required Banner */
.kyc-required-banner {
  max-width: 600px;
  margin: 0 auto;
}
.kyc-required-content {
  text-align: center;
  padding: 24px 16px;
}
.kyc-required-icon {
  margin-bottom: 16px;
}

/* Panel Subtitle */
.panel-subtitle {
  font-size: 12px;
  color: #6e7681;
  margin: -10px 0 16px;
}

/* Panel Title Row */
.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

/* KYC Verified Badge */
.kyc-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #3fb950;
  background: rgba(63,185,80,.08);
  border: 1px solid rgba(63,185,80,.2);
  border-radius: 20px;
  padding: 3px 10px;
}

/* KYC Details Grid */
.kyc-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .kyc-details-grid { grid-template-columns: 1fr; }
}
.kyc-detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: rgba(240,246,252,.03);
  border: 1px solid rgba(240,246,252,.06);
  border-radius: 8px;
}
.kyc-detail-label {
  font-size: 11px;
  color: #6e7681;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kyc-detail-value {
  font-size: 14px;
  color: #f0f6fc;
  font-weight: 500;
}

/* Balance Info/Warning */
.balance-info,
.balance-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-top: 10px;
}
.balance-info {
  color: var(--app-primary);
  background: rgba(92,184,230,.06);
  border: 1px solid rgba(92,184,230,.15);
}
.balance-warning {
  color: var(--app-sell);
  background: rgba(224,160,80,.06);
  border: 1px solid rgba(224,160,80,.15);
}

/* Terms Scroll */
.terms-scroll {
  max-height: 240px;
  overflow-y: auto;
  padding: 16px;
  background: rgba(240,246,252,.02);
  border: 1px solid rgba(240,246,252,.06);
  border-radius: 8px;
  font-size: 12px;
  color: #8b949e;
  line-height: 1.7;
}
.terms-scroll::-webkit-scrollbar { width: 6px; }
.terms-scroll::-webkit-scrollbar-track { background: transparent; }
.terms-scroll::-webkit-scrollbar-thumb { background: rgba(240,246,252,.1); border-radius: 3px; }
.terms-heading {
  font-size: 13px;
  color: #c9d1d9;
  margin: 16px 0 8px;
  font-weight: 600;
}
.terms-heading:first-child { margin-top: 0; }
.terms-scroll p {
  margin: 0 0 12px;
}

/* Spinner */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(240,246,252,.1);
  border-top-color: var(--app-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Requirements */
.req-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.req-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #8b949e;
}
.req-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.req-icon.req-loading {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(240,246,252,.1);
  border-top-color: var(--app-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.req-item.met {
  color: #3fb950;
}
.req-item.unmet {
  color: #f85149;
}

/* Disabled Apply Button */
.apply-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Fee Summary */
.fee-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 13px;
  color: #8b949e;
  border-bottom: 1px solid rgba(240,246,252,.04);
}
.fee-row:last-child {
  border-bottom: none;
}
.fee-row.total {
  color: #f0f6fc;
  font-weight: 600;
  font-size: 15px;
  border-top: 1px solid rgba(240,246,252,.08);
  margin-top: 4px;
  padding-top: 14px;
}

/* Form Hints */
.form-hint {
  display: block;
  font-size: 11px;
  color: #6a7681;
  margin-top: 4px;
}
/* Bug #395: emphasis for conditional-requirement hints (e.g. Middle Name "required
   if it appears on your ID"). Reuses the amber accent already used for required
   markers so the cue is consistent and themeable (no inline color). */
.form-hint .hint-strong {
  color: var(--app-sell);
  font-weight: 600;
}
.form-required {
  color: var(--app-sell);
}

/* Validation error styles */
.input-error {
  border-color: #f85149 !important;
  box-shadow: 0 0 0 1px rgba(248,81,73,0.3);
}
.form-error-banner {
  background: rgba(248,81,73,0.1);
  border: 1px solid rgba(248,81,73,0.3);
  color: #fca5a5;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.form-error-msg {
  color: #f85149;
  font-size: 13px;
  margin-top: 8px;
}

/* Signature Pad */
.signature-pad-container {
  position: relative;
  background: rgba(240,246,252,.03);
  border: 1px solid rgba(240,246,252,.1);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 12px;
}
.signature-canvas {
  display: block;
  width: 100%;
  height: 180px;
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
}
.signature-line {
  position: absolute;
  bottom: 40px;
  left: 32px;
  right: 32px;
  height: 1px;
  background: rgba(240,246,252,.15);
  pointer-events: none;
}
.signature-actions {
  display: flex;
  gap: 10px;
}
.signature-btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.signature-btn:hover { opacity: 0.85; }
.signature-btn.clear-btn {
  background: rgba(240,246,252,.06);
  color: #8b949e;
  border: 1px solid rgba(240,246,252,.08);
}
.signature-btn.confirm-btn {
  background: linear-gradient(135deg, var(--app-primary), #4a9fd4);
  color: var(--app-text-white);
}
.signature-btn.confirm-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.signature-confirmed {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3fb950;
  font-size: 13px;
  font-weight: 500;
  margin-top: 10px;
}

/* Bug #354 — paper preview look for Step 6 only. Black ink on white
   pad so the user sees what JDB will see on the printed application. */
#wizStep6 .signature-pad-container {
  background: #ffffff;
  border-color: rgba(0,0,0,.12);
}
#wizStep6 .signature-canvas {
  background: #ffffff;
}
#wizStep6 .signature-line {
  background: rgba(0,0,0,.2);
}

/* ===== Bug #353 — Review Agreement modal (Step 6) ===== */
.agreement-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 16px;
  background: rgba(92,184,230,.06);
  border: 1px solid rgba(92,184,230,.2);
  border-radius: 8px;
  font-size: 13px;
  color: #c0c8d4;
}
.agreement-prompt-link {
  display: inline-block;
  padding: 6px 14px;
  background: var(--app-primary);
  color: #0a0a14;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s;
}
.agreement-prompt-link:hover {
  opacity: 0.88;
}
.review-agreement-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100001;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
}
.review-agreement-modal-overlay.is-open {
  display: flex;
}
.review-agreement-modal-dialog {
  background: #ffffff;
  color: #1c1f24;
  border-radius: 12px;
  max-width: 760px;
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.review-agreement-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.review-agreement-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0a0a14;
  letter-spacing: 0.3px;
}
.review-agreement-modal-close {
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.review-agreement-modal-close:hover { background: rgba(0,0,0,.06); }
.review-agreement-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 28px;
  font-size: 14px;
  line-height: 1.6;
  color: #1c1f24;
}
.review-agreement-modal-body .review-agreement-section {
  margin: 0 0 22px;
}
.review-agreement-modal-body .review-agreement-section:last-child {
  margin-bottom: 0;
}
.review-agreement-modal-body h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0a0a14;
  margin: 0 0 8px;
  letter-spacing: 0.2px;
}
.review-agreement-modal-body p {
  margin: 0 0 10px;
}
.review-agreement-data-box {
  background: #f4f6f8;
  border: 1px solid #e1e6eb;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 12px;
  font-size: 13px;
}
.review-agreement-data-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.review-agreement-data-row + .review-agreement-data-row {
  border-top: 1px dashed rgba(0,0,0,.08);
}
.review-agreement-data-label {
  color: #555;
  flex: 0 0 40%;
}
.review-agreement-data-value {
  color: #0a0a14;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.review-agreement-doc-footer {
  margin-top: 16px;
  font-size: 12px;
  color: #6a737d;
  text-align: center;
}
.review-agreement-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #f8f9fb;
  flex-wrap: wrap;
}
.review-agreement-modal-footer-note {
  margin: 0;
  font-size: 12px;
  color: #555;
  flex: 1 1 60%;
}
.review-agreement-modal-btn {
  padding: 10px 22px;
  background: var(--app-primary);
  color: #0a0a14;
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.review-agreement-modal-btn:hover { opacity: 0.92; }
@media (max-width: 600px) {
  .review-agreement-modal-overlay { padding: 12px; }
  .review-agreement-modal-dialog { max-height: 92vh; }
  .review-agreement-modal-body { padding: 20px 20px; font-size: 13px; }
  .review-agreement-modal-footer { padding: 12px 16px; }
  .review-agreement-modal-footer-note { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .review-agreement-modal-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===== WIZARD PAGE ===== */
.wizard-page {
  max-width: 900px;
  margin: 0 auto;
}

.page-subtitle {
  font-size: 14px;
  color: #8b949e;
  margin: 4px 0 0;
  line-height: 1.5;
}

/* Wizard Progress Steps */
.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  gap: 0;
  flex-wrap: wrap;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.wizard-step .step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--app-text-muted);
  transition: all 0.2s;
}

.wizard-step.active .step-circle {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: #0a0e17;
}

.wizard-step.completed .step-circle {
  background: #22c55e;
  border-color: #22c55e;
  color: var(--app-text-white);
}

.wizard-step .step-label {
  font-size: 11px;
  color: var(--app-text-muted);
  white-space: nowrap;
}

.wizard-step.active .step-label {
  color: var(--app-primary);
  font-weight: 600;
}

.wizard-step.completed .step-label {
  color: #22c55e;
}

.wizard-steps .step-connector {
  width: 36px;
  height: 2px;
  background: #374151;
  margin: 0 4px;
  margin-bottom: 24px;
  transition: background 0.2s;
}

.wizard-steps .step-connector.filled {
  background: #22c55e;
}

/* Wizard step content container */
.wizard-step-content {
  animation: wizFadeIn 0.3s ease;
}

@keyframes wizFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Review section in Step 7 */
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.review-section {
  background: rgba(240,246,252,.03);
  border: 1px solid rgba(240,246,252,.06);
  border-radius: 10px;
  padding: 18px;
}

.review-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-primary);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Step 5 issue-grid inside wizard */
.wizard-step-content .issue-grid {
  max-width: none;
}

/* Responsive for wizard */
@media (max-width: 700px) {
  .wizard-steps .step-connector { width: 16px; }
  .wizard-step .step-label { font-size: 9px; }
  .wizard-step .step-circle { width: 30px; height: 30px; font-size: 12px; }
  .review-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .wizard-steps .step-connector { width: 8px; margin: 0 2px; }
  .wizard-step .step-label { display: none; }
  .wizard-steps .step-connector { margin-bottom: 8px; }
}

/* ===== Ultimo light overrides — Get Debit Card wizard (audit 2026-06-25) =====
   Titles/values on light panels used #f0f6fc white → invisible; form fields + step
   circles were dark; the card-preview gradient's first stop is var(--app-surface-2)
   = light glare. NOTE: .debit-card-number/.debit-card-name stay white (on the DARK
   card). Scoped → vestex zero-diff. */
html[data-brand="ultimo"] .page-title,
html[data-brand="ultimo"] .panel-title,
html[data-brand="ultimo"] .card-type-name,
html[data-brand="ultimo"] .kyc-detail-value,
html[data-brand="ultimo"] .fee-row.total { color: var(--app-text-strong); }
html[data-brand="ultimo"] .form-panel,
html[data-brand="ultimo"] .preview-panel,
html[data-brand="ultimo"] .requirements-panel,
html[data-brand="ultimo"] .fee-panel,
html[data-brand="ultimo"] .card-type-inner { border-color: var(--app-border); }
html[data-brand="ultimo"] .card-type-icon { background: var(--app-surface-1); }
html[data-brand="ultimo"] .form-input,
html[data-brand="ultimo"] .form-select {
  background: var(--app-surface-1);
  border-color: var(--app-border);
  color: var(--app-text-strong);
}
html[data-brand="ultimo"] .form-select { color-scheme: light; }
html[data-brand="ultimo"] .form-select option { background: var(--app-surface-1); color: var(--app-text-strong); }
html[data-brand="ultimo"] .wizard-step .step-circle { background: var(--app-surface-2); color: var(--app-text-strong); }
/* active/completed need explicit bg — the general rule above outranks the base
   .active/.completed rules and would otherwise strip their fill, leaving a white
   number on a light circle (completed step). */
html[data-brand="ultimo"] .wizard-step.active .step-circle { background: var(--app-primary); color: var(--app-primary-fg); }
html[data-brand="ultimo"] .wizard-step.completed .step-circle { background: #22c55e; color: #fff; }
html[data-brand="ultimo"] .debit-card-bg { background: linear-gradient(135deg, #2a3548 0%, #1a2332 45%, #0f1923 100%); }

/* Ultimo — Activate Debit Card state (audit 2026-06-25): faint .page-subtitle + the
   JS-rendered status/card-detail boxes use inline `background:#0d1117` (no class) →
   dark boxes on the light page. Their text uses var(--app-text-*) tokens (dark on
   Ultimo) so flipping just the box bg makes everything readable. Attribute selector
   + !important to beat the inline bg; scoped to this page's CSS → vestex zero-diff. */
html[data-brand="ultimo"] .page-subtitle { color: var(--app-text-muted); }
html[data-brand="ultimo"] [style*="background:#0d1117"] { background-color: var(--app-surface-2) !important; }

/* Ultimo — Tom Select country pickers (2026-09-18). card-issue.html's own <style>
   forces the control to the DARK look with !important (near-white #f0f6fc text on a
   near-transparent fill) and had no light-theme counterpart, so on Ultimo the chosen
   country was white on white — only its ISO badge could be read. Found while
   re-opening the EU countries; it applies to every country picker on the page. Same
   tokens the .form-input / .form-select rule above uses. The dropdown panel keeps
   its dark look: it is readable as it is. Scoped → vestex zero-diff. */
html[data-brand="ultimo"] .ts-wrapper.ts-country-select .ts-control {
  background: var(--app-surface-1) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text-strong) !important;
}
html[data-brand="ultimo"] .ts-wrapper.ts-country-select .ts-control input {
  color: var(--app-text-strong) !important;
  -webkit-text-fill-color: var(--app-text-strong) !important;
  caret-color: var(--app-text-strong) !important;
}
html[data-brand="ultimo"] .ts-wrapper.ts-country-select.single .ts-control .item { color: var(--app-text-strong) !important; }
/* The chevron is the WRAPPER's ::after and sits behind the control (Tom Select gives
   .ts-control z-index:1). It shows through the dark look's see-through fill; the
   opaque fill above would hide it. */
html[data-brand="ultimo"] .ts-wrapper.ts-country-select::after { z-index: 2; }
/* The border-color above outranks the page's own focus and error rules, so both
   are restated here or Ultimo would lose its focus ring and its red error border. */
html[data-brand="ultimo"] .ts-wrapper.ts-country-select.focus .ts-control { border-color: var(--app-primary) !important; }
html[data-brand="ultimo"] .ts-wrapper.ts-country-select .ts-control.input-error { border-color: #f85149 !important; }

/* ===== The second-card wizard (js/card-additional.js, 2026-09-19) =====
   Its pages are built from the first-card wizard's own pieces — .wizard-steps,
   .kyc-card, .form-group, .review-section / .review-row, .step-actions, .btn-* —
   so they look like the rest of this page in both themes without a second set of
   styles. What follows is only what those pieces do not already do. Everything is
   scoped to .addl-card (or, for the documents hand-off, to html.kyc-refresh) → the
   first-card wizard and the KYC-only flow are untouched. */

/* Room under the last button: the fixed "Cookie Settings" control (js/analytics-loader.js,
   right:16px / bottom:84px) must never sit on a button or on the sentence that says why a
   button is disabled. Scrolled to the end, the wizard's last line clears it. */
.addl-card { padding-bottom: 140px; }
/* …and the control itself sits in the corner on these pages. It is 84px up only to clear the
   AI chat button, which card-issue.html does not load; at 84px it rested on whichever primary
   button happened to sit at that height when a page opened (measured: "Submit application" at
   1200 x 900, "Contact support" at 390). Scoped with :has() and the refresh class: every other
   page, and the first-card wizard on this one, keep it where it is. */
body:has(.addl-card) #vx-cookie-settings,
html.kyc-refresh #vx-cookie-settings {
  bottom: 12px !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
/* A phone: the buttons are stacked full width, so wherever the control floats it can rest on
   one of them (measured: "Back to My Cards" at 390). There it stops floating and sits at the
   END of the page, in the room left above — reachable, and never on top of anything.
   (body becomes the reference box; nothing else on this page is positioned against it.) */
@media (max-width: 700px) {
  body:has(.addl-card),
  html.kyc-refresh body { position: relative; }
  body:has(.addl-card) #vx-cookie-settings,
  html.kyc-refresh #vx-cookie-settings { position: absolute !important; bottom: 12px !important; }
}

.addl-card .addl-text {
  color: var(--app-text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.addl-card .addl-first-title { margin-top: 0; padding-top: 0; border-top: none; }
/* Each page change moves the focus to the new heading so that a screen reader announces
   it. A heading is not a control: it takes the focus, not a focus ring. */
.addl-card .kyc-card-header h3:focus { outline: none; }
/* The country list opens over whatever comes after the card. .kyc-card clips (it has
   rounded corners to keep), and "Country" is the last field of Step 1 — the open list
   showed four rows and sat on "Continue". Nothing in these cards needs the clipping:
   the header has no background of its own. */
.addl-card .kyc-card { overflow: visible; }

/* The name on the card is locked TEXT — it cannot be edited, so it is not drawn as a field. */
.addl-card .addl-locked-value {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--app-text-strong);
  padding: 2px 0 4px;
  overflow-wrap: anywhere;
}
/* "Your new documents were approved" — the stepper's own done-green, not a new colour. */
.addl-card .addl-note-ok {
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 14px;
  margin: 0 0 16px;
  border-radius: 8px;
  color: #22c55e;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.3);
}

/* The stepper: circles on one line even when a label wraps to two (a phone), and
   Step 2's own state — "Not needed", "Under review", … — under its label. */
.addl-steps { align-items: flex-start; }
.addl-steps .step-connector { margin: 17px 4px 0; }
.addl-steps .wizard-step { gap: 6px; min-width: 96px; }
.addl-steps .addl-step-state {
  font-size: 10px;
  line-height: 1.2;
  min-height: 12px;
  color: var(--app-text-muted);
  white-space: nowrap;
}
.addl-steps .wizard-step.active .addl-step-state { color: var(--app-primary); }
.addl-steps .wizard-step.completed .addl-step-state { color: #22c55e; }

/* Summary rows: a label column and LEFT-aligned values beside it — never a label at
   one edge of a wide box and its value 600px away at the other. */
.addl-card .addl-review-grid { margin-bottom: 16px; }
.addl-card .addl-summary { margin-bottom: 16px; }
.addl-card .addl-review-grid .addl-summary { margin-bottom: 0; }
.addl-card .addl-summary .review-row {
  display: grid;
  grid-template-columns: min(200px, 40%) minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}
.addl-card .addl-summary .review-label { line-height: 1.5; }
.addl-card .addl-summary .review-value {
  min-width: 0;
  text-align: left;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* An address is three lines, as on an envelope. Within a line it wraps BETWEEN its parts,
   never inside one: a browser breaks a plain string after any hyphen, which split the
   postcode ("100-" / "0005, Japan"). A part longer than the column still wraps inside itself;
   the postcode never does. */
.addl-card .addl-address .addl-address-line { display: block; }
.addl-card .addl-address .addl-address-part { display: inline-block; max-width: 100%; }
.addl-card .addl-address .addl-address-part + .addl-address-part { margin-left: .3em; }
.addl-card .addl-address .addl-nowrap { white-space: nowrap; }
.addl-card .addl-review-note { margin: 0 0 12px; color: var(--app-text-1); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Notes are sentences, not one-liners: let them wrap, icon-less, top-aligned. */
.addl-card .balance-info,
.addl-card .balance-warning { align-items: flex-start; line-height: 1.5; font-size: 13px; margin: 0 0 16px; }
.addl-card .addl-steps-list {
  color: var(--app-text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 16px;
  padding-left: 20px;
}
.addl-card .addl-steps-list li { margin-bottom: 6px; }
.addl-card .addl-link { color: var(--app-primary); font-weight: 600; text-decoration: none; }
.addl-card .addl-link:hover { text-decoration: underline; }
.addl-card .addl-support { display: block; margin-top: 12px; }
.addl-card .addl-mfa-setup {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(224,160,80,0.08);
  border: 1px solid rgba(224,160,80,0.3);
  border-radius: 8px;
  font-size: 13px;
  color: var(--app-text-1);
}
.addl-card .addl-deposit { margin: 12px 0 0; }
.addl-card .addl-deposit .form-hint { display: block; margin-top: 6px; }

/* Actions: the platform's two buttons, secondary left and primary right — and,
   because some of them are links, links that look exactly like the buttons. The
   sentence that says why a button is off is part of the row, under the primary. */
.addl-card .step-actions { gap: 12px; flex-wrap: wrap; }
.addl-card .step-actions a.btn-primary,
.addl-card .step-actions a.btn-outline { text-decoration: none; text-align: center; }
.addl-card .step-actions .addl-primary-hint { flex: 1 0 100%; display: block; margin: 0; text-align: right; }

@media (max-width: 700px) {
  .addl-card .addl-review-grid { grid-template-columns: 1fr; }
  /* Tap targets: 44px at least, stacked — primary first, its hint with it, then the way back. */
  .addl-card .step-actions { flex-direction: column; align-items: stretch; }
  .addl-card .step-actions .btn-primary { order: 1; }
  .addl-card .step-actions .addl-primary-hint { order: 2; text-align: left; }
  .addl-card .step-actions .btn-outline { order: 3; }
  .addl-card .step-actions .btn-primary,
  .addl-card .step-actions .btn-outline { min-height: 44px; width: 100%; }
  .addl-card .addl-deposit .btn-outline { min-height: 44px; }
  .addl-steps .wizard-step { min-width: 0; }
  .addl-steps .step-connector { margin-top: 14px; }
  /* 16px: below that iOS zooms the page when a field takes the focus. */
  .addl-card .form-input,
  .addl-card .form-select { font-size: 16px; }
  .addl-card .ts-wrapper.ts-country-select .ts-control,
  .addl-card .ts-wrapper.ts-country-select .ts-control input { font-size: 16px !important; }
}
@media (max-width: 480px) {
  /* Three steps fit a phone with their names on: the customer should always be
     able to read where they are. (The seven-step wizard hides its labels here.) */
  .addl-steps .wizard-step .step-label { display: block; font-size: 10px; white-space: normal; text-align: center; max-width: 88px; }
  .addl-steps .addl-step-state { white-space: normal; text-align: center; }
  .addl-steps .step-connector { width: 16px; margin: 14px 2px 0; }
  .addl-card .kyc-card-body { padding: 16px; }
  /* A phone: the label sits above its value. */
  .addl-card .addl-summary .review-row { grid-template-columns: 1fr; row-gap: 2px; }
}

/* The documents hand-off (html.kyc-refresh — set by applyKycRefreshMode(), and by nothing
   else): the same room under the last button, and the same phone rules, for the KYC steps
   this customer is sent through. */
html.kyc-refresh .wizard-page { padding-bottom: 140px; }
@media (max-width: 700px) {
  html.kyc-refresh .wizard-page .form-input,
  html.kyc-refresh .wizard-page .form-select { font-size: 16px; }
  html.kyc-refresh .wizard-page .ts-wrapper.ts-country-select .ts-control,
  html.kyc-refresh .wizard-page .ts-wrapper.ts-country-select .ts-control input { font-size: 16px !important; }
  html.kyc-refresh .wizard-page .step-actions .btn-primary,
  html.kyc-refresh .wizard-page .step-actions .btn-outline { min-height: 44px; }
}

/* Ultimo (light). Theme tokens only. */
html[data-brand="ultimo"] .addl-card .addl-review-note { color: var(--app-text-strong); }
html[data-brand="ultimo"] .addl-card .review-section { background: var(--app-surface-2); border-color: var(--app-border); }
html[data-brand="ultimo"] .addl-card .review-label { color: var(--app-text-muted); }
html[data-brand="ultimo"] .addl-card .review-row { border-bottom-color: var(--app-border); }
html[data-brand="ultimo"] .addl-card .form-section-title { border-top-color: var(--app-border); color: var(--app-text-strong); }
html[data-brand="ultimo"] .addl-card .review-section-title { color: var(--app-text-strong); }
html[data-brand="ultimo"] .addl-card .addl-steps-list { color: var(--app-text-muted); }
/* A neutral note is NEUTRAL: strong text in a quiet frame. Only a warning wears the amber —
   on white, an amber frame round every note made "nothing has been charged" look like one. */
html[data-brand="ultimo"] .addl-card .balance-info { color: var(--app-text-strong); background: var(--app-surface-2); border-color: var(--app-border); }
html[data-brand="ultimo"] .addl-card .balance-warning { color: var(--app-text-strong); background: rgba(224,160,80,.12); border-color: var(--app-sell); }
html[data-brand="ultimo"] .addl-card .addl-note-ok { color: var(--app-text-strong); }
/* Outline buttons: the brand amber as TEXT on white cannot be read, and its 30% border
   cannot be seen. Strong text, a frame from the theme's own overlay tone. */
html[data-brand="ultimo"] .addl-card .btn-outline,
html[data-brand="ultimo"].kyc-refresh .wizard-page .btn-outline {
  color: var(--app-text-strong);
  border-color: rgba(var(--app-content-overlay-rgb), .35);
}
html[data-brand="ultimo"] .addl-card .btn-outline:hover,
html[data-brand="ultimo"].kyc-refresh .wizard-page .btn-outline:hover {
  background: rgba(var(--app-content-overlay-rgb), .05);
  border-color: rgba(var(--app-content-overlay-rgb), .55);
}