/* ===== TOP-UP / PAYMONGO / SIDEBAR LOGIN STYLES MOVED FROM index.html ===== */

.nav-btn--topup-text .nav-btn__inner{display:flex;align-items:center;justify-content:center;position:relative;}
.nav-topup-label{font-family:Rajdhani,Arial,sans-serif;font-size:18px;font-weight:700;letter-spacing:1.5px;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.8);padding:8px 18px;}
.panel-topup{position:relative;}
.topup-auth-card{margin:20px auto 0;max-width:560px;padding:22px 24px;background:linear-gradient(180deg,rgba(45,45,45,.96),rgba(24,24,24,.96));border:1px solid rgba(210,174,103,.35);box-shadow:0 10px 28px rgba(0,0,0,.24);}
.topup-page__section-title{margin:0 0 8px;font-family:Cinzel,Georgia,serif;font-size:20px;letter-spacing:1px;}
.topup-page__muted{margin:6px 0 14px;opacity:.78;font-size:14px;line-height:1.5;}
.topup-page__eyebrow{font-size:11px;letter-spacing:1.5px;opacity:.65;}
.topup-page__account{font-size:22px;font-weight:700;letter-spacing:.5px;}
.topup-form{display:flex;flex-direction:column;gap:8px;}
.topup-form__label{font-size:13px;font-weight:700;letter-spacing:.8px;margin-top:5px;}
.topup-form__input{width:100%;box-sizing:border-box;padding:12px 13px;border:1px solid rgba(210,174,103,.38);background:rgba(0,0,0,.35);color:inherit;font:inherit;outline:none;}
.topup-form__input:focus{border-color:rgba(210,174,103,.9);box-shadow:0 0 0 2px rgba(210,174,103,.12);}
.topup-action-btn{border:1px solid rgba(210,174,103,.62);background:linear-gradient(180deg,rgba(119,82,153,.9),rgba(55,32,78,.95));color:#fff;cursor:pointer;font-weight:800;letter-spacing:1px;padding:12px 16px;margin-top:8px;}
.topup-action-btn:hover{filter:brightness(1.12);}
.topup-action-btn--gold{border-color:#8b6a2f;background:linear-gradient(#6d5427,#342711);color:#f4e3b4;}
.topup-action-btn--gold:hover{background:linear-gradient(#806532,#443516);}
.topup-action-btn:disabled{opacity:.55;cursor:wait;}
.topup-page__message{min-height:20px;margin:5px 0 0;font-size:13px;line-height:1.45;}
.topup-account-row{display:flex;align-items:center;justify-content:flex-start;gap:15px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(210,174,103,.18);}
.topup-balance{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;padding:12px 14px;border:1px solid rgba(210,174,103,.22);background:rgba(0,0,0,.22);}
.topup-balance span{font-size:12px;letter-spacing:1px;opacity:.75;}
.topup-balance strong{font-size:22px;}
.topup-order-status{margin-top:20px;padding:14px;border:1px solid rgba(210,174,103,.24);background:rgba(0,0,0,.22);}
.topup-status-line{display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:1px;}
.topup-status-dot{width:9px;height:9px;border-radius:50%;background:#d4a843;box-shadow:0 0 9px rgba(212,168,67,.6);}
.topup-status-dot.is-paid{background:#42d67d;box-shadow:0 0 9px rgba(66,214,125,.6);}
.topup-status-dot.is-failed{background:#d64b4b;box-shadow:0 0 9px rgba(214,75,75,.6);}
.topup-order-number{margin-top:7px;font-size:12px;opacity:.7;word-break:break-all;}
@media (max-width:700px){.topup-auth-card{padding:18px 16px}.nav-topup-label{padding:7px 10px;font-size:15px}.topup-account-row{align-items:flex-start}}

.widget--sidebar-login .widget__body--sidebar-login {
      padding: 10px 11px 11px;
    }

    .sidebar-login-form {
      display: block;
      width: 100%;
    }

    /* Keep the login form/header hidden after authentication.
       The logged-in account panel remains visible. */
    .sidebar-login-form[hidden],
    .sidebar-account[hidden],
    .widget--sidebar-login .widget__cap[hidden] {
      display: none !important;
    }

    .sidebar-login__label {
      display: block;
      margin: 0 0 4px;
      color: #d9bd72;
      font-size: 10px;
      line-height: 1.2;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .45px;
    }

    .sidebar-login__input {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 29px;
      margin: 0 0 8px;
      padding: 4px 7px;
      border: 1px solid #5d5d5d;
      border-radius: 2px;
      outline: none;
      background: #111;
      color: #eee;
      font-family: inherit;
      font-size: 11px;
      line-height: 19px;
    }

    .sidebar-login__input:focus {
      border-color: #b9964d;
      box-shadow: 0 0 0 1px rgba(185,150,77,.22);
    }

    .sidebar-login__button {
      display: block;
      width: 100%;
      min-height: 29px;
      margin: 3px 0 0;
      padding: 5px 8px;
      border: 1px solid #8b6a2f;
      border-radius: 2px;
      background: linear-gradient(#6d5427, #342711);
      color: #f4e3b4;
      cursor: pointer;
      font-family: inherit;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .5px;
    }

    .sidebar-login__button:hover {
      background: linear-gradient(#806532, #443516);
    }

    .sidebar-login__button:disabled {
      opacity: .55;
      cursor: wait;
    }

    .sidebar-login__message {
      min-height: 14px;
      margin: 6px 0 0;
      color: #bdbdbd;
      font-size: 9px;
      line-height: 1.35;
      text-align: center;
    }

    .sidebar-account {
      text-align: center;
    }

    .sidebar-account__eyebrow {
      margin-bottom: 2px;
      color: #8f8f8f;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1px;
    }

    .sidebar-account__name {
      overflow: hidden;
      margin-bottom: 8px;
      color: #e0c77c;
      font-size: 13px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sidebar-account__balance {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 0 9px;
      padding: 6px 7px;
      border: 1px solid #3f3f3f;
      background: rgba(0,0,0,.28);
      color: #aaa;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .35px;
    }

    .sidebar-account__balance strong {
      color: #d9bd72;
      font-size: 12px;
    }

    .sidebar-account__topup {
      display: block;
      box-sizing: border-box;
      width: 100%;
      padding: 6px 8px;
      border: 1px solid #8b6a2f;
      border-radius: 2px;
      background: linear-gradient(#6d5427, #342711);
      color: #f4e3b4;
      text-decoration: none;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .45px;
    }

    .sidebar-account__topup:hover {
      background: linear-gradient(#806532, #443516);
    }

    .sidebar-account__logout {
      display: block;
      width: 70px;
      margin: 30px auto 0;
      padding: 3px 7px;
      border: 1px solid #8b6a2f;
      border-radius: 2px;
      background: linear-gradient(#6d5427, #342711);
      color: #f4e3b4;
      cursor: pointer;
      font-family: inherit;
      font-size: 9px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: .45px;
      text-transform: uppercase;
      box-sizing: border-box;
    }

    .sidebar-account__logout:hover {
      background: linear-gradient(#806532, #443516);
      color: #fff;
    }

    .sidebar-account__logout:focus-visible {
      outline: 1px solid #d9bd72;
      outline-offset: 1px;
    }


/* ===== In-page QR Ph Top-Up ===== */
.topup-qr-card {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(210,174,103,.32);
  background: linear-gradient(180deg,rgba(39,39,39,.98),rgba(18,18,18,.98));
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.topup-qr-card[hidden] {
  display: none !important;
}

.topup-qr-card__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(210,174,103,.18);
}

.topup-qr-card__title {
  margin: 2px 0 0;
  font-family: Cinzel,Georgia,serif;
  font-size: 19px;
  letter-spacing: 1.5px;
}

.topup-qr-card__amount {
  color: #d9bd72;
  font-size: 21px;
  font-weight: 800;
  white-space: nowrap;
}

.topup-qr-card__image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(210,174,103,.45);
  box-sizing: border-box;
}

.topup-qr-card__image {
  display: block;
  width: min(100%, 300px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  image-rendering: auto;
}

.topup-qr-card__hint {
  margin: 12px 0 0;
  color: #cfcfcf;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.topup-order-status--qr {
  margin-top: 14px;
}

@media (max-width:700px) {
  .topup-qr-card {
    padding: 14px;
  }

  .topup-qr-card__header {
    align-items: flex-start;
  }

  .topup-qr-card__amount {
    font-size: 18px;
  }
}