/* =========================================================
   Player Portal — Shared Styles
   Teal theme palette
   Loaded via header.php after app.css
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');

/* ── Teal Colour Variables ──────────────────────────────── */
:root {
    --portal-bg:         #020d0f;
    --portal-panel:      rgba(5, 20, 26, 0.92);
    --portal-panel-soft: rgba(7, 28, 36, 0.78);
    --portal-border:     rgba(0, 229, 204, 0.24);
    --portal-border-md:  rgba(0, 229, 204, 0.28);
    --portal-border-lg:  rgba(0, 229, 204, 0.4);
    --portal-accent:     #00e5c8;
    --portal-accent-dk:  #00b8a0;
    --portal-text:       #e5fffe;
    --portal-muted:      #7ab5b0;
    --portal-btn-txt:    #011a18;
}

/* ── Base ───────────────────────────────────────────────── */
html, body, .wrapper, .page-wrapper {
    background: var(--portal-bg) !important;
    font-family: 'Manrope', sans-serif;
}

.page-content {
    background:
        radial-gradient(circle at 72% 18%, rgba(0, 160, 140, 0.42), transparent 46%),
        radial-gradient(circle at 18% 86%, rgba(0, 110, 100, 0.28), transparent 40%),
        linear-gradient(160deg, #010a0c 0%, #031418 52%, #020d0f 100%);
    min-height: 100vh;
}

.page-footer, .page-breadcrumb {
    display: none !important;
}

/* ── Shared banner — 84 px (module pages) ───────────────── */
.wallet-banner,
.history-banner,
.topup-banner,
.profile-banner,
.pwd-banner {
    height: 84px;
    border-radius: 18px;
    border: 1px solid var(--portal-border);
    background: linear-gradient(130deg,
        rgba(5, 52, 60, 0.96),
        rgba(8, 80, 88, 0.86) 52%,
        rgba(5, 52, 60, 0.92));
    position: relative;
    overflow: hidden;
}

.wallet-banner::before, .history-banner::before,
.topup-banner::before,  .profile-banner::before, .pwd-banner::before {
    content: '';
    position: absolute;
    inset: -40% auto auto -20%;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(0, 229, 204, 0.24), transparent 64%);
}

.wallet-banner::after, .history-banner::after,
.topup-banner::after,  .profile-banner::after, .pwd-banner::after {
    content: '';
    position: absolute;
    right: -30px;
    bottom: -52px;
    width: 220px;
    height: 150px;
    background: radial-gradient(circle, rgba(0, 229, 204, 0.2), transparent 68%);
}

/* ── Logo wrap ──────────────────────────────────────────── */
.wallet-logo-wrap,
.history-logo-wrap,
.topup-logo-wrap,
.profile-logo-wrap,
.pwd-logo-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* ── Logo badge 86 px (module pages) ───────────────────── */
.wallet-logo-badge,
.history-logo,
.topup-logo,
.profile-logo,
.pwd-logo {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    padding: 10px;
    border: 1px solid var(--portal-border-lg);
    background: rgba(2, 18, 22, 0.92);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet-logo-badge img, .history-logo img,
.topup-logo img,        .profile-logo img, .pwd-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.wallet-logo-fallback,
.history-logo i,
.topup-logo i,
.pwd-logo i {
    font-size: 30px;
    color: var(--portal-accent);
}

/* ── Desktop nav ────────────────────────────────────────── */
.wallet-desktop-nav,
.history-nav,
.topup-desktop-nav,
.pwd-nav {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(3, 14, 18, 0.84);
    border: 1px solid var(--portal-border-md);
    backdrop-filter: blur(10px);
}

.wallet-desktop-nav a,
.history-nav a,
.topup-desktop-nav a,
.pwd-nav a {
    text-decoration: none;
    color: #c8ecea;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.wallet-desktop-nav a i,
.history-nav a i,
.topup-desktop-nav a i,
.pwd-nav a i {
    margin-right: 6px;
    font-size: 16px;
    vertical-align: -2px;
}

.wallet-desktop-nav a.active, .wallet-desktop-nav a:hover,
.history-nav a.active,        .history-nav a:hover,
.topup-desktop-nav a.active,  .topup-desktop-nav a:hover,
.pwd-nav a.active,            .pwd-nav a:hover {
    color: var(--portal-btn-txt);
    background: linear-gradient(135deg, var(--portal-accent), var(--portal-accent-dk));
    border-color: rgba(0, 229, 204, 0.5);
}

/* ── Bottom nav ─────────────────────────────────────────── */
.wallet-bottom-nav,
.history-bottom-nav,
.topup-bottom-nav,
.pwd-bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    width: calc(100% - 20px);
    max-width: 430px;
    border-radius: 999px;
    background: rgba(3, 14, 18, 0.92);
    border: 1px solid var(--portal-border-md);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4);
    display: flex;
    z-index: 40;
    backdrop-filter: blur(8px);
}

.wallet-bottom-nav a,
.history-bottom-nav a,
.topup-bottom-nav a,
.pwd-bottom-nav a {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: var(--portal-muted);
    padding: 9px 6px 8px;
    font-size: 12px;
    border-radius: 999px;
}

.wallet-bottom-nav a i,
.history-bottom-nav a i,
.topup-bottom-nav a i,
.pwd-bottom-nav a i {
    display: block;
    font-size: 19px;
    line-height: 1;
    margin-bottom: 3px;
}

.wallet-bottom-nav a.active,
.history-bottom-nav a.active,
.topup-bottom-nav a.active,
.pwd-bottom-nav a.active {
    color: var(--portal-accent);
    background: rgba(0, 229, 204, 0.14);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (min-width: 992px) {
    .wallet-desktop-nav,
    .history-nav,
    .topup-desktop-nav,
    .pwd-nav {
        display: flex;
    }

    .wallet-bottom-nav,
    .history-bottom-nav,
    .topup-bottom-nav,
    .pwd-bottom-nav {
        display: none;
    }
}