/* ===== LOAD CARD PAGE ===== */
.load-page {
  padding: 28px 40px 80px;
  max-width: 1000px;
}

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

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

/* BUG #363: the Load History panel used to be a fixed 380px side column, which
   crammed the 6-column table (Date/Time, Type, Amount, Source, Status, Exec) into
   too little width — cells wrapped to 2-3 lines and a horizontal scrollbar appeared,
   despite free horizontal space. Stack to a single column so the history panel uses
   the FULL available content width (robust regardless of the app-shell sidebar). The
   form is capped below so it stays a readable width instead of stretching. */
.load-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* Keep the form a readable width (its quick-amount/percent button rows need ~400px)
   rather than stretching across the full content width. Also caps the #345
   card-status gating-state panels (which live inside .load-form-section). */
.load-form-section {
  max-width: 640px;
}

@media (max-width: 1024px) {
  .load-page { padding: 24px 20px 60px; }
}
@media (max-width: 600px) {
  .load-page { padding: 20px 16px 60px; }
}
@media (max-width: 860px) {
  /* #363: redundant now that the base grid is already single-column, kept as a
     defensive no-op for clarity / future two-column experiments. */
  .load-grid { grid-template-columns: 1fr; }
}

/* Balance Banner */
.balance-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(92,184,230,.12) 0%, rgba(92,184,230,.04) 100%);
  border: 1px solid rgba(92,184,230,.2);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.balance-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.balance-label {
  font-size: 12px;
  color: #8b949e;
}

.balance-amount {
  font-size: 28px;
  font-weight: 700;
  color: #5cb8e6;
}

.balance-card-ref {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8b949e;
}

/* Form Panels */
.form-panel {
  background: #111827;
  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;
}

/* Currency Select */
.currency-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-label {
  font-size: 12px;
  color: #8b949e;
  font-weight: 500;
}

.currency-select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(240,246,252,.04);
  border: 1px solid rgba(240,246,252,.08);
  border-radius: 10px;
  color: #f0f6fc;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238b949e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.currency-select:focus {
  border-color: #5cb8e6;
}
.currency-select option {
  background: #111827;
  color: #f0f6fc;
}

.available-bal {
  font-size: 12px;
  color: #8b949e;
}

/* Amount Input */
.amount-input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(240,246,252,.04);
  border: 1px solid rgba(240,246,252,.08);
  border-radius: 10px;
  padding: 4px 16px;
  margin-bottom: 16px;
  transition: border-color .2s;
}
.amount-input-wrapper:focus-within {
  border-color: #5cb8e6;
}

.amount-prefix {
  font-size: 24px;
  font-weight: 600;
  color: #8b949e;
  margin-right: 8px;
}

.amount-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #f0f6fc;
  font-size: 28px;
  font-weight: 600;
  padding: 12px 0;
}
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.amount-input[type="number"] {
  -moz-appearance: textfield;
}

/* Quick Amounts */
.quick-amounts {
  display: flex;
  gap: 8px;
}

.quick-amt-btn {
  flex: 1;
  padding: 10px;
  background: rgba(240,246,252,.04);
  border: 1px solid rgba(240,246,252,.08);
  border-radius: 8px;
  color: #c9d1d9;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.quick-amt-btn:hover {
  border-color: rgba(92,184,230,.3);
  color: #5cb8e6;
}
.quick-amt-btn.active {
  background: rgba(92,184,230,.12);
  border-color: #5cb8e6;
  color: #5cb8e6;
}

/* Fee Summary */
.fee-summary {
  margin-bottom: 18px;
}

.fee-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  color: #8b949e;
}
.fee-line.total {
  color: #f0f6fc;
  font-weight: 600;
  font-size: 15px;
  border-top: 1px solid rgba(240,246,252,.08);
  margin-top: 6px;
  padding-top: 12px;
}

.load-btn {
  width: 100%;
  padding: 14px;
  background: #5cb8e6;
  color: #0a0e17;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.load-btn:hover:not(:disabled) {
  background: #7ccbf0;
}
.load-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* History Table */
/* BUG #363: the history panel is now full-width (see .load-grid above), so the
   table has room for all 6 columns on one line at a readable size. overflow-x:auto
   is retained ONLY as a clipping-prevention net: with the normal dataset the table
   footprint is far narrower than the panel, so NO scrollbar appears; a pathological
   future label degrades to a scroll instead of the old clipping. The earlier 380px
   squeeze (12px font / 4px padding) is reverted now that width is available. */
#loadHistory.topup-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.history-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 8px 6px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(240,246,252,.06);
}
.history-table tbody td {
  padding: 10px 6px;
  border-bottom: 1px solid rgba(240,246,252,.03);
  color: #c9d1d9;
}
/* #363: keep short columns on one line via semantic column classes (robust to
   future column add/reorder — unlike :nth-child). Type + Source are intentionally
   left wrappable so a pathologically long label wraps gracefully rather than forcing
   a horizontal scrollbar; in the full-width panel normal labels fit on one line. */
.history-table .col-datetime,
.history-table .col-amount,
.history-table .col-status,
.history-table .col-exec {
  white-space: nowrap;
}
.history-table .ref-cell {
  font-family: monospace;
  font-size: 11px;
  color: #8b949e;
}
.history-table .amount-cell {
  font-weight: 600;
  color: #f0f6fc;
}
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.status-success {
  background: rgba(63,185,80,.12);
  color: #3fb950;
}
.status-pending {
  background: rgba(224,160,80,.12);
  color: #e0a050;
}
.status-failed {
  background: rgba(239,68,68,.12);
  color: #ef4444;
}

.topup-empty {
  text-align: center;
  padding: 24px;
  color: #8b949e;
  font-size: 13px;
}

/* Manual Convert Warning Banner */
.manual-convert-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 8px;
  color: #ef4444;
  font-size: 13px;
  line-height: 1.5;
}
.manual-convert-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Slippage Notice */
.slippage-notice {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(224,160,80,.08);
  border: 1px solid rgba(224,160,80,.2);
  border-radius: 8px;
  color: #e0a050;
  font-size: 12px;
}

/* Confirm Warning in Modal */
.confirm-warning {
  margin: 12px 0 4px;
  padding: 10px 14px;
  background: rgba(224,160,80,.08);
  border: 1px solid rgba(224,160,80,.2);
  border-radius: 8px;
  font-size: 12px;
  color: #e0a050;
  line-height: 1.5;
}
.confirm-warning strong {
  color: #f0f6fc;
}

/* Estimate notice below fee summary */
.estimate-notice {
  margin: 8px 0 4px;
  font-size: 11px;
  color: #e0a050;
  line-height: 1.4;
}

/* ===== Confirmation Modal ===== */
.cl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cl-modal {
  background: #111827;
  border: 1px solid rgba(240,246,252,.1);
  border-radius: 14px;
  width: 420px;
  max-width: 90vw;
  overflow: hidden;
}

.cl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(240,246,252,.06);
}
.cl-modal-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #f0f6fc;
  margin: 0;
}
.cl-modal-close {
  background: none;
  border: none;
  color: #8b949e;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

.cl-modal-body {
  padding: 24px;
}

.confirm-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.confirm-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #8b949e;
  padding: 6px 0;
}
.confirm-row.highlight {
  color: #f0f6fc;
  font-weight: 600;
  font-size: 14px;
  border-top: 1px solid rgba(240,246,252,.06);
  padding-top: 10px;
  margin-top: 4px;
}
.confirm-message {
  font-size: 14px;
  color: #c9d1d9;
  text-align: center;
  padding: 8px 0;
}
.confirm-message strong {
  color: #5cb8e6;
}

.cl-modal-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(240,246,252,.06);
}
.cl-modal-cancel {
  flex: 1;
  padding: 10px;
  background: rgba(240,246,252,.04);
  border: 1px solid rgba(240,246,252,.08);
  border-radius: 8px;
  color: #c9d1d9;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.cl-modal-cancel:hover {
  border-color: rgba(240,246,252,.2);
}
.cl-modal-confirm {
  flex: 1;
  padding: 10px;
  background: #5cb8e6;
  border: none;
  border-radius: 8px;
  color: #0a0e17;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cl-modal-confirm:hover:not(:disabled) {
  background: #7ccbf0;
}
.cl-modal-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Toast ===== */
.cl-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  z-index: 2000;
  max-width: 400px;
  animation: toastSlideIn .3s ease;
}
.cl-toast-success {
  background: rgba(63,185,80,.15);
  border: 1px solid rgba(63,185,80,.3);
  color: #3fb950;
}
.cl-toast-error {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
  color: #ef4444;
}

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

/* Load Type Selector (Standard / Delayed) — mirrors the KYC card-provider
   picker (.card-type-option) from card-issue.css so the two flows match. */
.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: #5cb8e6;
  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: #5cb8e6;
  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;
}