/* ===== Deposit — Sky Island (member embed) ===== */
.deposit-wrap {
  max-width: 760px;
  margin: 18px auto 40px;
  padding: 0 14px;
}

.deposit-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(245, 240, 255, .95) 100%);
  border: 1.5px solid rgba(122, 58, 224, .18);
  border-radius: 20px;
  padding: 18px 18px 20px;
  box-shadow: 0 8px 28px rgba(42, 16, 72, .12);
  backdrop-filter: blur(8px);
}

.deposit-panel-embed {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  border-radius: 0;
}

.deposit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.deposit-head h1 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #7a3ae0;
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.deposit-head h1 i {
  color: #e89a12;
}

.deposit-switch {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(122, 58, 224, .08);
  border: 1.5px solid rgba(122, 58, 224, .12);
}

.deposit-switch a,
.deposit-switch button {
  text-decoration: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 12px;
  color: #7a6a94;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
}

.deposit-switch a.is-active,
.deposit-switch button.is-active {
  color: #5a3a00;
  background: linear-gradient(180deg, #ffd56a, #f0b429);
  box-shadow: 0 2px 0 #c4860a;
}

.member-actions .btn-deposit.is-finance-active,
.member-actions .btn-withdraw.is-finance-active {
  outline: 2px solid rgba(240, 180, 41, .55);
  outline-offset: 1px;
}

.deposit-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.deposit-method {
  border: 1.5px solid rgba(122, 58, 224, .2);
  background: #fff;
  border-radius: 14px;
  padding: 14px 12px;
  color: #7a3ae0;
  font-weight: 800;
  font-size: 13px;
  font-family: "Nunito", sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.deposit-method.is-active {
  color: #5a3a00;
  border-color: transparent;
  background: linear-gradient(180deg, #ffd56a, #f0b429);
  box-shadow: 0 3px 0 #c4860a;
}

.deposit-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 3px 0 #15803d;
}

.deposit-banner[hidden] {
  display: none !important;
}

.deposit-banner > i {
  font-size: 18px;
  margin-top: 2px;
}

.deposit-banner strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.deposit-banner p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  opacity: .95;
}

.deposit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.deposit-field {
  display: grid;
  gap: 8px;
}

.deposit-field label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c4860a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
}

.deposit-field label i {
  color: #e89a12;
}

.deposit-amount-box {
  display: flex;
  align-items: stretch;
  border: 1.5px solid rgba(122, 58, 224, .2);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.deposit-amount-box span {
  display: grid;
  place-items: center;
  padding: 0 14px;
  background: rgba(122, 58, 224, .08);
  color: #7a3ae0;
  font-weight: 800;
  font-size: 13px;
  border-right: 1.5px solid rgba(122, 58, 224, .12);
}

.deposit-amount-box input {
  flex: 1;
  border: 0;
  padding: 12px 14px;
  color: #2a1048;
  font-weight: 800;
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  outline: none;
  min-width: 0;
  width: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.deposit-transfer-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px dashed rgba(240, 180, 41, .65);
  background: #fffdf5;
  color: #7a6a94;
  font-size: 12px;
  font-weight: 800;
}

.deposit-transfer-row strong {
  color: #d97706;
  font-size: 13px;
}

.deposit-field select,
.deposit-field textarea,
.deposit-field input[type="text"],
.deposit-field input[type="password"] {
  width: 100%;
  border: 1.5px solid rgba(122, 58, 224, .2);
  border-radius: 12px;
  padding: 12px 14px;
  color: #2a1048;
  font-weight: 700;
  font-size: 13px;
  font-family: "Nunito", sans-serif;
  background: #fff;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}

.deposit-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #7a3ae0 50%),
    linear-gradient(135deg, #7a3ae0 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.deposit-field select:focus,
.deposit-field textarea:focus,
.deposit-field input[type="text"]:focus,
.deposit-field input[type="password"]:focus,
.deposit-amount-box:focus-within {
  border-color: rgba(240, 180, 41, .75);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, .16);
}

.deposit-manual-fields[hidden] {
  display: none !important;
}

.deposit-manual-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.deposit-bank-details {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}

.deposit-copy-row {
  display: flex;
  gap: 8px;
}

.deposit-copy-row input {
  flex: 1;
  min-width: 0;
}

.deposit-copy-btn {
  border: 0;
  border-radius: 12px;
  padding: 0 14px;
  font-weight: 800;
  font-size: 12px;
  font-family: "Nunito", sans-serif;
  color: #5a3a00;
  cursor: pointer;
  background: linear-gradient(180deg, #ffd56a, #f0b429);
  box-shadow: 0 2px 0 #c4860a;
  white-space: nowrap;
}

.deposit-copy-btn.is-copied {
  background: linear-gradient(180deg, #4ade80, #16a34a);
  color: #fff;
  box-shadow: 0 2px 0 #166534;
}

.deposit-submit {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  color: #5a3a00;
  cursor: pointer;
  background: linear-gradient(180deg, #ffd56a, #f0b429);
  box-shadow: 0 4px 0 #c4860a;
}

.deposit-submit:hover,
.deposit-copy-btn:hover {
  filter: brightness(1.05);
}

.deposit-success {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #ecfdf5;
  border: 1.5px solid #86efac;
  color: #166534;
  font-weight: 700;
  font-size: 13px;
}

.deposit-success[hidden] {
  display: none !important;
}

.deposit-success p {
  margin: 0;
}

.deposit-info {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid rgba(122, 58, 224, .16);
  background: #fff;
}

.deposit-info h2 {
  margin: 0 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #7a3ae0;
  font-size: 13px;
  font-weight: 800;
}

.deposit-info h2 i {
  color: #e89a12;
}

.deposit-info > p {
  margin: 0 0 12px;
  color: #7a6a94;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
}

.deposit-info strong {
  color: #c4860a;
}

.deposit-attention {
  padding: 12px;
  border-radius: 12px;
  background: #fff8e6;
  border: 1.5px solid rgba(240, 180, 41, .4);
}

.deposit-attention > strong {
  display: block;
  margin-bottom: 8px;
  color: #c4860a;
  font-size: 12.5px;
}

.deposit-attention ul {
  margin: 0;
  padding-left: 18px;
  color: #5a6f86;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}

.withdraw-placeholder {
  margin: 0;
  color: #7a6a94;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
}

.wd-balance-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 18px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fff8e6 100%);
  border: 1.5px solid rgba(240, 180, 41, .65);
  box-shadow: 0 2px 8px rgba(42, 16, 72, .06);
}

.wd-balance-card span {
  color: #7a6a94;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .4px;
}

.wd-balance-card strong {
  color: #d97706;
  font-size: 28px;
  font-weight: 800;
  font-family: "Fredoka", "Baloo 2", sans-serif;
}

.wd-amount-box em {
  display: grid;
  place-items: center;
  padding: 0 12px;
  font-style: normal;
  font-weight: 800;
  color: #7a3ae0;
  background: rgba(122, 58, 224, .08);
  border-left: 1.5px solid rgba(122, 58, 224, .12);
}

@media (max-width: 640px) {
  .deposit-methods {
    grid-template-columns: 1fr;
  }

  .deposit-bank-details {
    grid-template-columns: 1fr;
  }

  .wd-balance-card strong {
    font-size: 24px;
  }
}

/* Template2 inherits dark overrides from member.css */


/* ===== INTEGRASI V2G: pulihkan tema TERANG untuk halaman deposit-panel standalone.
   member.css (diload global saat login) membawa override gelap !important yang
   memang dibutuhkan embed deposit di halaman member gelap (hub /member).
   Di halaman standalone (deposit, withdraw, setting, security, report, inbox,
   history, referral) panel memakai kartu terang dari file ini, jadi nilai
   terang harus menang — file ini diload SETELAH member.css. ===== */
.deposit-head h1 { color: #7a3ae0 !important; }
.deposit-field label { color: #c4860a !important; }

.deposit-field input,
.deposit-field select,
.deposit-field textarea {
  background: #fff !important;
  border-color: rgba(122, 58, 224, .2) !important;
  color: #2a1048 !important;
}

.deposit-field input::placeholder,
.deposit-field textarea::placeholder,
.deposit-amount-box input::placeholder,
#wdAmount::placeholder,
#dpAmount::placeholder {
  color: rgba(74, 111, 148, .55) !important;
  -webkit-text-fill-color: rgba(74, 111, 148, .55) !important;
}

.deposit-field select option { background-color: #fff; color: #2a1048; }

.deposit-amount-box {
  background: #fff !important;
  border-color: rgba(122, 58, 224, .2) !important;
}
.deposit-amount-box input {
  color: #2a1048 !important;
  -webkit-text-fill-color: #2a1048 !important;
}
.deposit-amount-box span,
.wd-amount-box em {
  background: rgba(122, 58, 224, .08) !important;
  color: #7a3ae0 !important;
  -webkit-text-fill-color: #7a3ae0 !important;
}

.deposit-transfer-row {
  background: #fffdf5 !important;
  border-color: rgba(240, 180, 41, .65) !important;
  color: #7a6a94 !important;
}
.deposit-transfer-row span { color: #7a6a94 !important; }
.deposit-transfer-row strong { color: #d97706 !important; }

.wd-balance-card {
  background: linear-gradient(180deg, #ffffff 0%, #fff8e6 100%) !important;
  border: 1.5px solid rgba(240, 180, 41, .65) !important;
  color: #7a6a94 !important;
}
.wd-balance-card span { color: #7a6a94 !important; }
.wd-balance-card strong { color: #d97706 !important; }

.deposit-banner {
  background: linear-gradient(180deg, #22c55e, #16a34a) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.deposit-banner strong { color: #fff !important; }
.deposit-banner p { color: #fff !important; }

.deposit-info {
  background: #fff !important;
  border-color: rgba(122, 58, 224, .16) !important;
  color: #7a6a94 !important;
}
.deposit-info h2 { color: #7a3ae0 !important; }
.deposit-info p { color: #7a6a94 !important; }
.deposit-info strong { color: #c4860a !important; }

.deposit-attention {
  background: #fff8e6 !important;
  border-color: rgba(240, 180, 41, .4) !important;
  color: #5a6f86 !important;
}
.deposit-attention strong { color: #c4860a !important; }