/* =======================================
   SX Wallet Tab Styles
   ======================================= */

.sxw-wallet-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.sxw-wallet-tiles .tile {
  background: #F5EDF9;
  padding: 22px 18px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border: 1px solid #efe7f4;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease, border-color .2s ease;
}

.sxw-wallet-tiles .tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  background: #F1E6F6;
  border-color: #e8dcf1;
}

.sxw-wallet-tiles .tile .label {
  margin: 0 0 6px 0;
  font-size: 12px;
  color: #6b7280;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.sxw-wallet-tiles .tile h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: #111;
  line-height: 1.1;
}

/* Responsive stacking */
@media (max-width: 900px) {
  .sxw-wallet-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .sxw-wallet-tiles {
    grid-template-columns: 1fr;
  }
}

/* =======================================
   Deposit + Withdraw Action Cards
======================================= */

.sxw-wallet-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 30px 0;
}

/* Action cards (Deposit & Withdraw) */
.sxw-wallet-action-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 24px 26px;
  border: 1px solid #ece6f3;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Section title */
.sxw-wallet-action-card .sxw-section-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: #111;
}

/* Help / note text */
.sxw-help-text {
  font-size: 14px;
  color: #555;
  margin-bottom: 18px;
}

/* Deposit layout */
.sxw-deposit-layout {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-bottom: 18px;
}

.sxw-deposit-qr {
  text-align: center;
}

.sxw-deposit-qr img {
  max-width: 200px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

.sxw-deposit-qr small {
  display: block;
  margin-top: 6px;
  color: #666;
}

/* Deposit details */
.sxw-deposit-details p {
  margin: 6px 0;
  font-size: 14px;
}

/* Footer note */
.sxw-note {
  font-size: 13px;
  color: #777;
  margin-top: 14px;
}

/* Withdraw form grid */
.sxw-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-bottom: 18px;
}

.sxw-form-grid p {
  margin: 0;
}

.sxw-form-grid label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  margin-bottom: 4px;
}

.sxw-form-grid input {
  width: 100%;
}

/* Full width row */
.sxw-form-full {
  grid-column: 1 / -1;
}

/* Button spacing */
.sxw-withdraw-form button {
  padding: 10px 22px;
  font-size: 14px;
}

.sx-qr-payment {
    text-align: center;
    margin-top: 15px;
}

.sx-payment-qr {
    display: block;
    max-width: 260px;
    width: 100%;
    height: auto;
    margin: 0 auto 12px;
}

.sx-download-qr {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
}

/* ===============================
   Mobile responsive
================================ */

@media (max-width: 900px) {
  .sxw-wallet-actions-row {
    grid-template-columns: 1fr;
  }

  .sxw-deposit-layout {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =======================================
   Light Background Variants
======================================= */

/* Deposit card */
.sxw-deposit-card {
  background: #FFF8E1;
  border-color: #FFF8E1;
}

/* Withdraw card */
.sxw-withdraw-card {
  background: #EEF4FF;
  border-color: #dde6fb;
}

/* =======================================
   Left Accent Borders (Status Style)
======================================= */

.sxw-wallet-action-card {
  position: relative;
  padding-left: 28px; /* space for accent */
}

/* Deposit accent */
.sxw-deposit-card {
  border-left: 4px solid #F59E0B;
}

/* Withdraw accent */
.sxw-withdraw-card {
  border-left: 4px solid #3B82F6;
}

/* =======================================
   Deposit Layout – Equal Columns
======================================= */

.sxw-deposit-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* equal width */
  gap: 24px;
  align-items: center;
}

.sxw-deposit-qr,
.sxw-deposit-details {
  width: 100%;
}

/* Center QR nicely */
.sxw-deposit-qr {
  text-align: center;
}

/* ===============================
   Mobile Fix: Deposit Section
================================ */
@media (max-width: 768px) {

  .sxw-deposit-layout {
    grid-template-columns: 1fr !important; /* stack */
    gap: 16px;
  }

  .sxw-deposit-qr,
  .sxw-deposit-details {
    width: 100%;
    max-width: 100%;
  }

  .sxw-deposit-qr img {
    max-width: 180px;
    width: 100%;
    height: auto;
  }
}

/* ===============================
   Mobile Fix: Withdraw Form
================================ */
@media (max-width: 768px) {

  .sxw-form-grid {
    grid-template-columns: 1fr; /* single column */
  }

  .sxw-wallet-action-card {
    padding: 18px;
  }

  .sxw-form-grid input {
    max-width: 100%;
    box-sizing: border-box;
  }

  .sxw-withdraw-form {
    width: 100%;
  }
}

/* =======================================
   Mobile Fix: Transaction History Table
   (using .sxw-table-wrap)
======================================= */
@media (max-width: 768px) {

  .sxw-table-wrap {
    width: 100%;
    overflow-x: auto;        /* scroll INSIDE container */
    -webkit-overflow-scrolling: touch;
  }

  .sxw-table {
    min-width: 600px;        /* prevents column squeeze */
    width: 100%;
    border-collapse: collapse;
  }

  .sxw-table th,
  .sxw-table td {
    white-space: nowrap;    /* keep cells intact */
  }
}

.sxw-privacy-note {
    border: 1px solid #16a34a;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 16px;
    background: #f0fdf4;
    color: #334155;
}

.sxw-privacy-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #166534;
}

.sxw-privacy-heading svg {
    flex-shrink: 0;
}

.sxw-privacy-note p {
    margin: 0 0 8px;
    line-height: 1.6;
}

.sxw-privacy-note p:last-child {
    margin-bottom: 0;
}