/* ============================================================
   Northbridge Heritage Widget Styles
   Used by all Elementor widgets AND the frontend shortcodes.
   CSS custom properties are set by SimBank_Appearance::css_vars()
   ============================================================ */

/* ===== SHARED CARD ===== */
.sbw-card {
  background: var(--sb-bg-card, #112035);
  border-radius: 14px;
  overflow: hidden;
}

.sbw-logged-in-notice,
.sbw-notice-card {
  padding: 28px 24px;
  text-align: center;
  color: var(--sb-text-muted, #6b83a0);
  font-size: 0.9rem;
}
.sbw-notice-card a { color: var(--sb-primary, #c9a84c); text-decoration: none; font-weight: 600; }

/* ===== HEADINGS ===== */
.sbw-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--sb-text, #e8edf5);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.sbw-subtitle {
  font-size: 0.88rem;
  color: var(--sb-text-muted, #6b83a0);
  margin-bottom: 20px;
}

/* ===== MESSAGE ===== */
.sbw-msg {
  display: none;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 0.86rem;
  margin-bottom: 16px;
  line-height: 1.5;
}
.sbw-msg.sbw-success { display: block; background: rgba(39,174,96,.1); border: 1px solid rgba(39,174,96,.28); color: var(--sb-success, #27ae60); }
.sbw-msg.sbw-error   { display: block; background: rgba(231,76,60,.09); border: 1px solid rgba(231,76,60,.28); color: var(--sb-danger, #e74c3c); }

/* ===== FORM ===== */
.sbw-form { display: flex; flex-direction: column; gap: 14px; }

.sbw-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.sbw-field { display: flex; flex-direction: column; gap: 5px; }

.sbw-field label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sb-text-muted, #6b83a0);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sbw-input-wrap { position: relative; display: flex; align-items: center; }

.sbw-icon {
  position: absolute;
  left: 13px;
  width: 16px;
  height: 16px;
  color: var(--sb-text-muted, #6b83a0);
  pointer-events: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.sbw-icon svg { width: 100%; height: 100%; }

.sbw-input-wrap input,
.sbw-input-wrap select,
.sbw-input-wrap textarea {
  width: 100%;
  background: var(--sb-bg, #0a1628);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 11px 40px 11px 38px;
  color: var(--sb-text, #e8edf5);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}

.sbw-input-wrap textarea { padding-left: 14px; resize: vertical; }
.sbw-input-wrap select   { padding-right: 14px; }

.sbw-input-wrap input:focus,
.sbw-input-wrap select:focus,
.sbw-input-wrap textarea:focus {
  border-color: var(--sb-primary, #c9a84c);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

.sbw-input-wrap select option { background: var(--sb-bg, #0a1628); }

/* No icon → no left padding */
.sbw-input-wrap:not(:has(.sbw-icon)) input,
.sbw-input-wrap:not(:has(.sbw-icon)) select { padding-left: 14px; }

/* Eye toggle */
.sbw-eye {
  position: absolute;
  right: 11px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sb-text-muted, #6b83a0);
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; opacity: 0.6; transition: opacity 0.15s;
}
.sbw-eye:hover { opacity: 1; }
.sbw-eye svg { width: 18px; height: 18px; }

/* Password strength */
.sbw-pw-bar {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.sbw-pw-fill { height: 100%; width: 0; border-radius: 2px; transition: width 0.3s, background 0.3s; }

/* Hint */
.sbw-acct-hint { font-size: 0.76rem; min-height: 15px; margin-top: 3px; }
.sbw-acct-hint.found { color: var(--sb-success, #27ae60); }
.sbw-acct-hint.error { color: var(--sb-danger, #e74c3c); }
.sbw-acct-hint.loading { color: var(--sb-text-muted, #6b83a0); }

/* Amount field */
.sbw-amt-wrap .sbw-amt-sym {
  position: absolute;
  left: 13px;
  font-weight: 700;
  color: var(--sb-primary, #c9a84c);
  font-size: 1rem;
  pointer-events: none;
}
.sbw-amt-input { padding-left: 26px !important; }

/* ===== SUBMIT BUTTON ===== */
.sbw-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--sb-primary, #c9a84c), var(--sb-primary-light, #e2c06a));
  color: #0a1628;
  border: none;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.sbw-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201,168,76,0.22); }
.sbw-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Spinner */
.sbw-spinner {
  display: inline-block; width: 15px; height: 15px;
  border: 2px solid rgba(0,0,0,0.25); border-top-color: #0a1628;
  border-radius: 50%; animation: sbwSpin 0.6s linear infinite;
}
@keyframes sbwSpin { to { transform: rotate(360deg); } }

/* Switch link */
.sbw-switch { text-align: center; font-size: 0.84rem; color: var(--sb-text-muted, #6b83a0); margin-top: 8px; }
.sbw-switch a { color: var(--sb-primary, #c9a84c); text-decoration: none; font-weight: 700; }
.sbw-switch a:hover { text-decoration: underline; }

/* ===== BALANCE CARD WIDGET ===== */
.sbw-balance-card {
  border-radius: 16px;
  padding: 28px 28px;
  position: relative;
  overflow: hidden;
}
.sbw-bal-name { font-size: 0.95rem; font-weight: 700; color: var(--sb-text, #e8edf5); margin-bottom: 2px; }
.sbw-bal-num  { font-size: 0.74rem; color: var(--sb-text-muted, #6b83a0); font-family: monospace; letter-spacing: 0.07em; margin-bottom: 18px; }
.sbw-bal-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: rgba(255,255,255,0.5); margin-bottom: 5px; }
.sbw-bal-amount-wrap { display: flex; align-items: baseline; gap: 4px; margin-bottom: 22px; }
.sbw-bal-sym    { font-size: 1.4rem; color: var(--sb-primary, #c9a84c); font-weight: 700; }
.sbw-bal-amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--sb-text, #e8edf5); }
.sbw-send-btn {
  display: inline-flex; align-items: center;
  padding: 9px 20px; border-radius: 8px;
  background: linear-gradient(135deg, var(--sb-primary, #c9a84c), var(--sb-primary-light, #e2c06a));
  color: #0a1628; font-weight: 700; text-decoration: none; font-size: 0.85rem;
  transition: opacity 0.18s, transform 0.18s;
}
.sbw-send-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* ===== TRANSFER WIDGET ===== */
.sbw-from-bar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 18px;
  font-size: 0.84rem; flex-wrap: wrap;
}
.sbw-from-label { color: var(--sb-text-muted, #6b83a0); }
.sbw-from-bal { margin-left: auto; color: var(--sb-primary, #c9a84c); font-weight: 700; }

/* ===== HISTORY WIDGET ===== */
.sbw-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sbw-pill {
  padding: 5px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
  background: var(--sb-bg-card, #112035); border: 1px solid rgba(255,255,255,0.08);
  color: var(--sb-text-muted, #6b83a0); cursor: pointer; font-family: inherit;
  transition: all 0.14s;
}
.sbw-pill:hover { border-color: var(--sb-primary, #c9a84c); color: var(--sb-primary, #c9a84c); }
.sbw-pill.active { background: rgba(201,168,76,0.12); border-color: var(--sb-primary, #c9a84c); color: var(--sb-primary, #c9a84c); }

.sbw-hist-list { display: flex; flex-direction: column; gap: 4px; }

.sbw-hist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px; border-radius: 9px;
  background: var(--sb-bg-card, #112035);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.14s;
}
.sbw-hist-row:hover { background: rgba(255,255,255,0.05); }
.sbw-hist-row.sbw-hidden { display: none; }

.sbw-hist-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sbw-hist-dot svg { width: 12px; height: 12px; }
.sbw-hist-dot.credit { background: rgba(39,174,96,0.14); color: var(--sb-success, #27ae60); }
.sbw-hist-dot.debit  { background: rgba(231,76,60,0.12);  color: var(--sb-danger, #e74c3c); }

.sbw-hist-info { flex: 1; min-width: 0; }
.sbw-hist-desc { font-size: 0.84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sb-text, #e8edf5); }
.sbw-hist-date { font-size: 0.7rem; color: var(--sb-text-muted, #6b83a0); margin-top: 2px; }

.sbw-hist-right { text-align: right; flex-shrink: 0; }
.sbw-hist-amt { font-size: 0.88rem; font-weight: 700; }
.sbw-hist-amt.credit { color: var(--sb-success, #27ae60); }
.sbw-hist-amt.debit  { color: var(--sb-danger, #e74c3c); }

.sbw-badge { display: inline-block; font-size: 0.6rem; padding: 2px 7px; border-radius: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.sbw-badge-completed { background: rgba(39,174,96,0.12); color: var(--sb-success, #27ae60); }
.sbw-badge-pending   { background: rgba(243,156,18,0.12); color: var(--sb-warning, #f39c12); }
.sbw-badge-rejected  { background: rgba(231,76,60,0.1);   color: var(--sb-danger, #e74c3c); }

.sbw-rcpt-mini {
  background: none; border: none; cursor: pointer;
  font-size: 0.9rem; opacity: 0.45; padding: 3px 5px;
  transition: opacity 0.14s; border-radius: 5px; flex-shrink: 0;
}
.sbw-rcpt-mini:hover { opacity: 1; background: rgba(255,255,255,0.06); }

.sbw-empty-text { text-align: center; color: var(--sb-text-muted, #6b83a0); padding: 32px 0; font-size: 0.9rem; }

/* ===== RECEIPT MODAL (widget) ===== */
.sbw-receipt-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(5px);
}
.sbw-receipt-modal {
  background: #fff; color: #1a1a2e; border-radius: 14px;
  width: 100%; max-width: 420px; box-shadow: 0 32px 80px rgba(0,0,0,0.5); overflow: hidden;
}
.sbw-rcpt-hd {
  background: linear-gradient(135deg,#0d1b2a,#1a2d42); color: #fff;
  padding: 20px 24px; display: flex; justify-content: space-between; align-items: flex-start;
}
.sbw-rcpt-bank { font-size: 1rem; font-weight: 800; color: #c9a84c; }
.sbw-rcpt-sub  { font-size: 0.68rem; color: #8ea3b8; text-transform: uppercase; letter-spacing: 0.08em; }
.sbw-rcpt-x    { background: rgba(255,255,255,0.12); border: none; border-radius: 5px; color: #fff; width: 26px; height: 26px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
.sbw-rcpt-body { padding: 20px 24px; max-height: 55vh; overflow-y: auto; }
.sbw-rcpt-row  { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.82rem; }
.sbw-rcpt-row:last-child { border-bottom: none; }
.sbw-rcpt-row-lbl { color: #6b7280; flex-shrink: 0; }
.sbw-rcpt-row-val { font-weight: 600; text-align: right; max-width: 58%; word-break: break-all; }
.sbw-rcpt-status { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: 7px; font-weight: 700; font-size: 0.88rem; margin-bottom: 16px; }
.sbw-rcpt-status.completed { background: #d1fae5; color: #065f46; }
.sbw-rcpt-status.pending   { background: #fef9c3; color: #713f12; }
.sbw-rcpt-status.rejected  { background: #fee2e2; color: #991b1b; }
.sbw-rcpt-amount-wrap { text-align: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px dashed #e2e8f0; }
.sbw-rcpt-amount-lbl { font-size: 0.68rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.sbw-rcpt-amount-val { font-size: 2rem; font-weight: 800; color: #0d1b2a; }
.sbw-rcpt-feet { display: flex; gap: 7px; padding: 0 24px 20px; }
.sbw-rcpt-btn { flex: 1; padding: 9px; border-radius: 7px; font-size: 0.8rem; font-weight: 600; cursor: pointer; border: none; font-family: inherit; transition: all 0.14s; }
.sbw-rcpt-print { background: #0d1b2a; color: #fff; }
.sbw-rcpt-print:hover { background: #1a2d42; }
.sbw-rcpt-cls { background: #f1f5f9; color: #374151; }
.sbw-rcpt-cls:hover { background: #e2e8f0; }

/* ===== EMBEDDED DASHBOARD WIDGET ===== */
.sbw-dash-wrap {
  display: flex;
  min-height: 85vh;
  background: var(--sb-bg, #0a1628);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.sbw-dash-sidebar {
  width: 240px;
  background: var(--sb-sidebar-bg, #0d1e35);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sbw-dash-brand {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sbw-dash-bank-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--sb-primary, #c9a84c);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.sbw-dash-user {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sbw-dash-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sb-primary, #c9a84c), var(--sb-primary-light, #e2c06a));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; color: #0a1628; flex-shrink: 0;
}

.sbw-dash-uname { font-size: 0.8rem; font-weight: 600; color: var(--sb-text, #e8edf5); }
.sbw-dash-unum  { font-size: 0.65rem; color: var(--sb-text-muted, #6b83a0); font-family: monospace; }

.sbw-dash-nav { flex: 1; padding: 12px 10px; }

.sbw-dash-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--sb-text-muted, #6b83a0);
  text-decoration: none; font-size: 0.84rem; font-weight: 500;
  transition: all 0.14s; margin-bottom: 2px; position: relative;
}
.sbw-dash-nav-item:hover { background: rgba(255,255,255,0.05); color: var(--sb-text, #e8edf5); }
.sbw-dash-nav-item.active { background: rgba(201,168,76,0.1); color: var(--sb-primary, #c9a84c); font-weight: 600; }

.sbw-dash-nav-icon { width: 17px; height: 17px; display: flex; align-items: center; flex-shrink: 0; }
.sbw-dash-nav-icon svg { width: 100%; height: 100%; }

.sbw-dash-nav-pip {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--sb-primary, #c9a84c);
}

.sbw-dash-sidebar-foot {
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.sbw-dash-logout {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--sb-danger, #e74c3c); text-decoration: none;
  font-size: 0.84rem; font-weight: 500;
  transition: background 0.14s;
}
.sbw-dash-logout:hover { background: rgba(231,76,60,0.1); }
.sbw-dash-logout svg { width: 17px; height: 17px; }

.sbw-dash-main {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
}

/* Notice */
.sbw-notice { padding: 11px 14px; border-radius: 8px; font-size: 0.86rem; margin-bottom: 16px; }
.sbw-notice-warning { background: rgba(243,156,18,0.1); border: 1px solid rgba(243,156,18,0.3); color: var(--sb-warning, #f39c12); }

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
  .sbw-field-row { grid-template-columns: 1fr; }
  .sbw-dash-sidebar { display: none; }
  .sbw-dash-main { margin-left: 0 !important; padding: 16px 14px; }
}

@media print {
  .sbw-receipt-overlay { position: static !important; }
  .sbw-rcpt-feet { display: none !important; }
}

/* ===== OTP VERIFICATION SCREEN ===== */
.sb-otp-screen { animation: sbwFadeUp 0.35s ease both; }
@keyframes sbwFadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.sb-otp-header { text-align:center;margin-bottom:20px; }
.sb-otp-icon { width:64px;height:64px;margin:0 auto 4px;color:var(--sb-primary,#c9a84c); }
.sb-otp-icon svg { width:100%;height:100%; }

.sb-otp-inputs {
  display:flex;justify-content:center;gap:8px;margin:20px 0 6px;
}

.sb-otp-box {
  width:46px!important;height:56px!important;padding:0!important;text-align:center!important;
  font-size:1.5rem!important;font-weight:800!important;
  background:rgba(255,255,255,.04)!important;
  border:2px solid rgba(255,255,255,.14)!important;
  border-radius:10px!important;color:var(--sb-text,#e8edf5)!important;
  outline:none!important;transition:border-color .18s,background .18s,transform .12s!important;
  caret-color:var(--sb-primary,#c9a84c)!important;font-family:inherit!important;
}
.sb-otp-box:focus {
  border-color:var(--sb-primary,#c9a84c)!important;
  background:rgba(201,168,76,.06)!important;
  transform:scale(1.06)!important;
  box-shadow:0 0 0 3px rgba(201,168,76,.15)!important;
}
.sb-otp-box:not(:placeholder-shown) { border-color:rgba(255,255,255,.28)!important; }

@keyframes sbOtpShake {
  0%,100%{transform:translateX(0)} 15%{transform:translateX(-6px)} 30%{transform:translateX(6px)}
  45%{transform:translateX(-5px)} 60%{transform:translateX(5px)} 75%{transform:translateX(-3px)} 90%{transform:translateX(3px)}
}
.sb-otp-shake { animation:sbOtpShake 0.5s ease; }

.sb-otp-text-btn {
  background:none;border:none;color:var(--sb-primary,#c9a84c);
  font-size:.84rem;font-weight:600;cursor:pointer;font-family:inherit;
  padding:0;text-decoration:underline;text-underline-offset:2px;transition:opacity .15s;
}
.sb-otp-text-btn:disabled { opacity:.4;cursor:not-allowed;text-decoration:none; }
.sb-otp-text-btn:hover:not(:disabled) { opacity:.8; }

@media (max-width:400px) {
  .sb-otp-box { width:38px!important;height:48px!important;font-size:1.2rem!important; }
  .sb-otp-inputs { gap:5px; }
}

/* ===== SIGNUP WIDGET CTA (5.0 — wizard moved to standalone page) ===== */
.sbw-signup-cta-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
}
.sbw-signup-cta-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--sb-text, #e8edf5);
}
.sbw-signup-cta-list li svg { color: var(--sb-primary, #c9a84c); flex-shrink: 0; }

/* ===== LOGIN WIDGET OTP NOTE ===== */
.sbw-otp-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--sb-text-muted, #6b83a0);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 9px 11px;
  line-height: 1.5;
  margin: 0;
}