/* ════════════════════════════════════════════════════════════════
   ZADWA BALANCE — Frontend Styles
   Depends on: zn-design-tokens.css (loaded first)
   Compatible with BuddyBoss theme & WooCommerce My Account
════════════════════════════════════════════════════════════════ */

/* ── Balance-scoped token overrides (resolves to shared tokens) ── */
.zadwa-balance-page {
    --zn-balance-primary:      var(--zn-balance-accent);
    --zn-balance-primary-dark: var(--zn-balance-accent-dark);
    --zn-balance-font:         var(--zn-bb-font);
    --zn-balance-radius:       var(--zn-radius);
    --zn-balance-border:       var(--zn-border);
    --ai-primary:        var(--zn-balance-accent);
    --ai-gradient:       linear-gradient(135deg, var(--zn-navy) 0%, var(--zn-navy-mid) 60%, var(--zn-balance-accent) 100%);
}

/* ── Hero card ───────────────────────────────────────────────── */
.zadwa-balance-page { max-width: 680px; margin: 0 auto; font-family: inherit; }

.zn-balance-hero {
    background: linear-gradient(135deg, var(--zn-navy) 0%, var(--zn-navy-mid) 60%, var(--zn-balance-accent) 100%);
    border-radius: 20px;
    padding: 36px 32px 28px;
    color: #fff;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.zn-balance-hero::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
}
.zn-balance-hero-label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65); letter-spacing: .5px; text-transform: uppercase; }
.zn-balance-hero-amount { font-size: 42px; font-weight: 800; letter-spacing: -1px; margin: 6px 0 2px; line-height: 1; }
.zn-balance-hero-amount .zn-balance-br { font-size: 22px; font-weight: 600; opacity: .7; vertical-align: super; margin-right: 3px; }
.zn-balance-hero-sub { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 24px; }

.zn-balance-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Buttons ─────────────────────────────────────────────────── */
.zn-balance-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; border: none;
    transition: all .2s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
}
.zn-balance-btn.primary  { background: #0284c7; color: #fff; }
.zn-balance-btn.primary:hover { background: #0369a1; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(2,132,199,.4); }
.zn-balance-btn.secondary { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.25); }
.zn-balance-btn.secondary:hover { background: rgba(255,255,255,.22); }
.zn-balance-btn.zn-balance-full { width: 100%; justify-content: center; margin-top: 14px; border-radius: 12px; padding: 14px; font-size: 15px; }
.zn-balance-btn:disabled { opacity: .45; pointer-events: none; }

/* ── Panels ──────────────────────────────────────────────────── */
.zn-balance-panels { margin-bottom: 28px; }

.zn-balance-panel {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px 24px 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}
.zn-balance-panel h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.zn-balance-panel-sub { font-size: 13px; color: #64748b; margin: 0 0 18px; }

/* Amount grid */
.zn-balance-amount-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}
.zn-balance-amount-btn {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 6px;
    font-size: 13px; font-weight: 700;
    cursor: pointer; text-align: center;
    transition: all .15s;
    font-family: inherit;
    color: #1e293b;
    box-sizing: border-box;
    width: 100%;
    word-break: break-word;
}
.zn-balance-amount-btn:hover  { border-color: #0284c7; background: #f0f9ff; color: #0284c7; }
.zn-balance-amount-btn.active { border-color: #0284c7; background: #0284c7; color: #fff; }
.zn-balance-amount-btn.custom-btn { color: #64748b; font-weight: 500; }

/* Custom amount */
.zn-balance-custom-input { margin-bottom: 4px; }
.zn-balance-custom-input label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #475569; }
.zn-balance-custom-input input {
    width: 100%; padding: 12px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-size: 16px; font-family: inherit; box-sizing: border-box;
    transition: border-color .15s;
}
.zn-balance-custom-input input:focus { outline: none; border-color: #0284c7; }

/* Transfer panel */
.zn-balance-notice { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #1d4ed8; margin-bottom: 18px; }

.zn-balance-search-wrap { position: relative; margin-bottom: 16px; z-index: 100; }
/* Ensure panel never clips the search dropdown */
#zn-balance-panel-transfer { overflow: visible !important; }
.zn-balance-search-wrap label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #475569; }
.zn-balance-search-wrap input {
    width: 100%; padding: 12px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-size: 14px; font-family: inherit; box-sizing: border-box;
}
.zn-balance-search-results {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 9999;
    max-height: 260px; overflow-y: auto;
    display: none;
}
.zn-balance-search-result-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer; transition: background .1s;
}
.zn-balance-search-result-item:hover { background: #f8fafc; }
.zn-balance-search-result-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.zn-balance-result-name { font-size: 14px; font-weight: 600; }
.zn-balance-result-handle { font-size: 12px; color: #64748b; }

.zn-balance-selected-user {
    display: flex; align-items: center; gap: 10px;
    background: #f0f9ff; border: 1.5px solid #bae6fd; border-radius: 10px;
    padding: 10px 14px; margin-top: 8px;
}
.zn-balance-selected-user img { width: 36px; height: 36px; border-radius: 50%; }
.zn-balance-selected-clear { margin-left: auto; color: #ef4444; cursor: pointer; font-size: 18px; }

.zn-balance-form-row { margin-bottom: 16px; }
.zn-balance-form-row label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #475569; }
.zn-balance-form-row input {
    width: 100%; padding: 12px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-size: 14px; font-family: inherit; box-sizing: border-box;
}
.zn-balance-avail { display: block; font-size: 12px; color: #94a3b8; margin-top: 5px; }

.zn-balance-tfr-summary {
    background: #f8fafc; border-radius: 10px; padding: 12px 16px; margin-bottom: 4px; font-size: 13px;
}
.zn-balance-tfr-summary-row { display: flex; justify-content: space-between; padding: 3px 0; }
.zn-balance-tfr-summary-row.total { font-weight: 700; border-top: 1px solid #e2e8f0; margin-top: 6px; padding-top: 8px; }

/* ePIN */
.zn-balance-epin-input-wrap { display: flex; gap: 10px; align-items: flex-end; }
.zn-balance-epin-input-wrap input {
    flex: 1; padding: 12px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-size: 15px; font-family: monospace; letter-spacing: 1px; box-sizing: border-box;
    text-transform: uppercase;
}
.zn-balance-epin-input-wrap .zn-balance-btn { border-radius: 10px; padding: 12px 22px; }

/* Messages */
.zn-balance-msg {
    margin-top: 12px; font-size: 13px; font-weight: 500; min-height: 20px;
    border-radius: 8px; padding: 0;
    transition: all .2s;
}
.zn-balance-msg.success { background: #f0fdf4; color: #16a34a; padding: 10px 14px; }
.zn-balance-msg.error   { background: #fef2f2; color: #dc2626; padding: 10px 14px; }

/* ── Transaction History ─────────────────────────────────────── */
.zn-balance-history { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px; overflow: hidden; }
.zn-balance-history h3 { margin: 0; padding: 18px 20px 14px; font-size: 16px; border-bottom: 1px solid #f1f5f9; }
.zn-balance-empty { padding: 20px 20px; color: #94a3b8; font-size: 14px; text-align: center; }

.zn-balance-tx-list { }
.zn-balance-tx-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid #f8fafc;
    transition: background .1s;
}
.zn-balance-tx-row:last-child { border-bottom: none; }
.zn-balance-tx-row:hover { background: #f8fafc; }

.zn-balance-tx-icon { font-size: 22px; width: 36px; text-align: center; flex-shrink: 0; }
.zn-balance-tx-info { flex: 1; min-width: 0; }
.zn-balance-tx-type { font-size: 14px; font-weight: 600; color: #0f172a; }
.zn-balance-tx-desc { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zn-balance-tx-right { text-align: right; flex-shrink: 0; }
.zn-balance-tx-amount { font-size: 15px; font-weight: 700; }
.zn-balance-tx-date   { font-size: 11px; color: #94a3b8; }
.zn-balance-tx-row.credit .zn-balance-tx-amount { color: #16a34a; }
.zn-balance-tx-row.debit  .zn-balance-tx-amount { color: #dc2626; }

/* ── Gateway fields ──────────────────────────────────────────── */
.zn-gw-balance-box {
    background: #f8fafc; border: 1.5px solid #e2e8f0;
    border-radius: 10px; padding: 14px 16px; margin: 8px 0 4px;
}
.zn-gw-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.zn-gw-after { border-top: 1px solid #e2e8f0; margin-top: 8px; padding-top: 10px; font-weight: 700; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .zn-balance-hero { padding: 24px 18px 20px; }
    .zn-balance-hero-amount { font-size: 32px; }
    .zn-balance-panel { padding: 18px 16px; }
    .zn-balance-amount-grid { grid-template-columns: repeat(3, 1fr); }
    .zn-balance-epin-input-wrap { flex-direction: column; }
    .zn-balance-epin-input-wrap .zn-balance-btn { width: 100%; justify-content: center; }
}

/* ── BuddyBoss Nav Badge ──────────────────────────────────────── */
.zn-balance-nav-badge {
    display: inline-block;
    background: rgba(2,132,199,.15);
    color: #0284c7;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: 5px;
    vertical-align: middle;
}

/* ── Load More ───────────────────────────────────────────────── */
.zn-balance-load-more-wrap { border-top: 1px solid #f1f5f9; }

/* ── Login Notice ────────────────────────────────────────────── */
.zn-balance-login-notice { padding: 24px; text-align: center; background: #f8fafc; border-radius: 12px; border: 1.5px solid #e2e8f0; }

/* ── Enhanced Mobile Responsiveness ─────────────────────────── */
@media (max-width: 480px) {
    .zadwa-balance-page { max-width: 100%; padding: 0 4px; }
    .zn-balance-hero { padding: 20px 14px 16px; border-radius: 14px; }
    .zn-balance-hero-amount { font-size: 28px; }
    .zn-balance-hero-amount .zn-balance-br { font-size: 16px; }
    .zn-balance-hero-actions { gap: 7px; }
    .zn-balance-hero-actions .zn-balance-btn { flex: 1; justify-content: center; padding: 10px 8px; font-size: 13px; }
    .zn-balance-panel { padding: 14px 12px; border-radius: 12px; }
    .zn-balance-amount-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .zn-balance-amount-btn { padding: 12px 4px; font-size: 13px; border-radius: 10px; }
    .zn-balance-tx-row { padding: 12px 14px; gap: 10px; }
    .zn-balance-tx-icon { font-size: 18px; width: 28px; }
    .zn-balance-tx-type { font-size: 13px; }
    .zn-balance-tx-desc { font-size: 11px; }
    .zn-balance-tx-amount { font-size: 14px; }
    .zn-balance-history h3 { font-size: 14px; padding: 14px 14px 10px; }
    .zn-balance-btn.zn-balance-full { padding: 13px; font-size: 14px; }
    /* Dropdown stays absolute inside its wrapper — JS handles viewport clamping on small screens */
    .zn-balance-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); max-height: 200px; }
    .zn-balance-form-row input, .zn-balance-custom-input input { font-size: 16px; } /* prevent iOS zoom */
    #zn-balance-epin-code { font-size: 14px; }
}

/* ── WooCommerce My Account sidebar on mobile ─────────────────── */
@media (max-width: 768px) {
    .woocommerce-MyAccount-navigation ul li a { padding: 10px 14px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   BUDDYBOSS THEME DEEP INTEGRATION (v16)
   Inherits BB theme variables and blends seamlessly
═══════════════════════════════════════════════════════════════ */

/* ── BuddyBoss bridge: resolved via zn-design-tokens.css --zn-bb-* vars ── */
/* --zn-balance-primary, --zn-balance-primary-dark, --zn-balance-font, --zn-balance-radius, --zn-balance-border
   are now declared at the top of this file against --zn-* tokens.
   BB fallbacks live in zn-design-tokens.css §12 (BuddyBoss Bridge). */

/* Override hero to use BB primary color via token */
.zadwa-balance-page .zn-balance-hero {
    background: linear-gradient(135deg, var(--zn-navy) 0%, var(--zn-navy-mid) 60%, var(--zn-balance-primary, var(--zn-balance-accent)) 100%);
}

.zadwa-balance-page .zn-balance-btn.primary {
    background: var(--zn-balance-primary, #0284c7);
}
.zadwa-balance-page .zn-balance-btn.primary:hover {
    background: var(--zn-balance-primary-dark, #0369a1);
}
.zadwa-balance-page .zn-balance-panel,
.zadwa-balance-page .zn-balance-history {
    border-radius: var(--zn-balance-radius, 12px);
    border-color: var(--zn-balance-border, #e2e8f0);
}
.zadwa-balance-page .zn-balance-amount-btn:hover,
.zadwa-balance-page .zn-balance-amount-btn.active {
    border-color: var(--zn-balance-primary, #0284c7);
}
.zadwa-balance-page .zn-balance-amount-btn.active {
    background: var(--zn-balance-primary, #0284c7);
}

/* BuddyBoss profile page wrapper — ensure full width on BB layout */
#buddypress .zadwa-balance-page,
.bb-profile-wrap .zadwa-balance-page,
.buddyboss-theme .zadwa-balance-page {
    max-width: 100%;
    padding: 0;
}

/* Match BuddyBoss form field styles */
.buddyboss-theme .zn-balance-search-wrap input,
.buddyboss-theme .zn-balance-form-row input,
.buddyboss-theme .zn-balance-custom-input input,
.buddyboss-theme #zn-balance-epin-code {
    border-color: var(--bb-input-border-color, #e2e8f0);
    border-radius: var(--bb-border-radius, 8px);
    background: var(--bb-input-background-color, #fff);
    color: var(--bb-text-color, #1e293b);
}

.buddyboss-theme .zn-balance-search-wrap input:focus,
.buddyboss-theme .zn-balance-form-row input:focus {
    border-color: var(--zn-balance-primary, #0284c7);
    box-shadow: 0 0 0 3px rgba(2,132,199,.15);
}

/* BuddyBoss notification in bell dropdown */
#header-notifications-dropdown-elem li[data-component="zadwa_balance"],
.bb-notifications-list li[data-component="zadwa_balance"] {
    border-left: 3px solid var(--zn-balance-primary, #0284c7);
}

/* BuddyBoss Sub-nav (profile tabs) active state */
#subnav li.current a { color: var(--zn-balance-primary, #0284c7) !important; }

/* WooCommerce checkout gateway box — BB theme compat */
#zadwa_balance.payment_box {
    background: var(--bb-card-background-color, #f8fafc);
    border-color: var(--zn-balance-border, #e2e8f0);
}

/* Gateway payment fields */
.zn-gw-balance-box {
    background: var(--bb-card-background-color, #f8fafc);
    border: 1.5px solid var(--zn-balance-border, #e2e8f0);
    border-radius: var(--bb-border-radius, 10px);
    padding: 14px 16px; margin: 8px 0 4px;
}
.zn-gw-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.zn-gw-after { border-top: 1px solid var(--zn-balance-border, #e2e8f0); margin-top: 8px; padding-top: 10px; font-weight: 700; }
.zn-gw-bal-hi { color: var(--zn-balance-primary, #0284c7); font-size: 16px; }
.zn-gw-ok { color: #16a34a; }
.zn-gw-neg { color: #dc2626; }
.zn-gw-zero { color: #94a3b8; }
.zn-gw-desc { font-size: 13px; color: #64748b; margin-top: 8px; }

/* Dark mode support (BuddyBoss has dark mode toggle) */
@media (prefers-color-scheme: dark) {
    .buddyboss-dark .zn-balance-panel,
    .buddyboss-dark .zn-balance-history,
    [data-color-scheme="dark"] .zn-balance-panel,
    [data-color-scheme="dark"] .zn-balance-history {
        background: var(--bb-card-background-color-dark, #1e293b);
        border-color: var(--bb-border-color-dark, #334155);
        color: var(--bb-text-color-dark, #f1f5f9);
    }
    .buddyboss-dark .zn-balance-amount-btn,
    [data-color-scheme="dark"] .zn-balance-amount-btn {
        background: #1e293b;
        border-color: #334155;
        color: #f1f5f9;
    }
    .buddyboss-dark .zn-balance-tx-type { color: #f1f5f9; }
}

/* BuddyBoss notification component badge in nav */
#nav-zadwa-balance .count {
    background: var(--zn-balance-primary, #0284c7);
    color: #fff;
    border-radius: 50px;
    font-size: 11px;
    padding: 1px 6px;
    margin-left: 4px;
}

/* ── Panel header with close button ─────────────────────────── */
.zn-balance-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.zn-balance-panel-header h3 { margin: 0; }
.zn-balance-panel-close {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; font-size: 18px; padding: 0 4px;
    border-radius: 4px; transition: color .15s;
    font-family: inherit;
}
.zn-balance-panel-close:hover { color: #ef4444; background: #fef2f2; }

/* ── Gateway pills (top-up panel) ───────────────────────────── */
.zn-balance-gateway-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center; margin-top: 14px;
    padding-top: 14px; border-top: 1px solid #f1f5f9;
}
.zn-balance-gw-label { font-size: 12px; color: #94a3b8; font-weight: 500; }
.zn-balance-gw-pill {
    background: #f1f5f9; color: #475569;
    font-size: 12px; font-weight: 600;
    padding: 3px 10px; border-radius: 50px;
}

/* ── History header with filters ────────────────────────────── */
.zn-balance-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 8px;
}
.zn-balance-history-header h3 { margin: 0; font-size: 15px; font-weight: 700; }

.zn-balance-history-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.zn-balance-filter-btn {
    background: #f8fafc; border: 1.5px solid #e2e8f0;
    border-radius: 50px; padding: 4px 12px;
    font-size: 12px; font-weight: 600;
    color: #64748b; cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.zn-balance-filter-btn.active { background: #0284c7; border-color: #0284c7; color: #fff; }
.zn-balance-filter-btn:hover:not(.active) { border-color: #0284c7; color: #0284c7; }

/* ── Transaction row enhancement — balance after ────────────── */
.zn-balance-tx-bal { font-size: 11px; color: #94a3b8; }
.zn-balance-tx-row.hidden { display: none; }

/* ── Load more wrap ─────────────────────────────────────────── */
.zn-balance-load-more-wrap {
    padding: 14px 20px; text-align: center;
    border-top: 1px solid #f1f5f9;
}
.zn-balance-load-more-wrap .zn-balance-btn.secondary {
    background: #f8fafc; border: 1.5px solid #e2e8f0;
    color: #475569; border-radius: 8px;
    font-size: 13px;
}

/* ── BB context adjustments ─────────────────────────────────── */
.zadwa-bb-context { padding: 0 2px; }
.zadwa-bb-context .zn-balance-hero { border-radius: 16px; }

@media (max-width: 600px) {
    .zn-balance-history-header { flex-direction: column; align-items: flex-start; }
    .zn-balance-history-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .zn-balance-filter-btn { white-space: nowrap; flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   BALANCE AI ASSISTANT WIDGET (v17)
═══════════════════════════════════════════════════════════════ */

.zn-balance-ai-widget {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    margin-top: 20px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    /* Inherit BB primary color */
    --ai-primary: var(--bb-primary-color, #0284c7);
    --ai-gradient: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, var(--ai-primary) 100%);
}

/* Header */
.zn-balance-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--ai-gradient);
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: opacity .15s;
}
.zn-balance-ai-header:hover { opacity: .92; }

.zn-balance-ai-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
}

/* Animated pulse dot */
.zn-balance-ai-icon-pulse {
    width: 10px; height: 10px;
    background: #4ade80;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(74,222,128,.6);
    animation: zn-balance-pulse-ring 2s infinite;
}
.zn-balance-ai-inactive .zn-balance-ai-icon-pulse {
    background: #94a3b8;
    animation: none;
}

@keyframes zn-balance-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.zn-balance-ai-chevron {
    font-size: 18px;
    transition: transform .25s;
    opacity: .8;
}
.zn-balance-ai-widget.collapsed .zn-balance-ai-chevron { transform: rotate(-90deg); }

/* Body */
.zn-balance-ai-body { display: flex; flex-direction: column; }
.zn-balance-ai-widget.collapsed .zn-balance-ai-body { display: none; }

/* Offline state */
.zn-balance-ai-offline {
    padding: 20px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}
.zn-balance-ai-offline a { color: #0284c7; text-decoration: none; font-weight: 600; }

/* Quick prompts */
.zn-balance-ai-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
}
.zn-balance-ai-prompt-btn {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    display: flex; align-items: center; gap: 5px;
}
.zn-balance-ai-prompt-btn:hover {
    border-color: var(--ai-primary, #0284c7);
    color: var(--ai-primary, #0284c7);
    background: #f0f9ff;
}

/* Messages area */
.zn-balance-ai-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    max-height: 300px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.zn-balance-ai-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.zn-balance-ai-msg.user {
    flex-direction: row-reverse;
}
.zn-balance-ai-msg-bubble {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.55;
}
.zn-balance-ai-msg.assistant .zn-balance-ai-msg-bubble {
    background: #f1f5f9;
    color: #1e293b;
    border-bottom-left-radius: 4px;
}
.zn-balance-ai-msg.user .zn-balance-ai-msg-bubble {
    background: var(--ai-primary, #0284c7);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.zn-balance-ai-msg.assistant .zn-balance-ai-msg-bubble strong { color: var(--ai-primary, #0284c7); }

/* Typing indicator */
.zn-balance-ai-typing .zn-balance-ai-msg-bubble {
    background: #f1f5f9;
    padding: 12px 16px;
}
.zn-balance-ai-typing-dots { display: flex; gap: 5px; align-items: center; height: 18px; }
.zn-balance-ai-typing-dots span {
    width: 7px; height: 7px;
    background: #94a3b8;
    border-radius: 50%;
    animation: zn-balance-typing 1.2s infinite;
}
.zn-balance-ai-typing-dots span:nth-child(2) { animation-delay: .2s; }
.zn-balance-ai-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes zn-balance-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30%            { transform: translateY(-5px); opacity: 1; }
}

/* Action cards */
.zn-balance-ai-action-cards {
    padding: 0 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.zn-balance-ai-action-card {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 1.5px solid #bae6fd;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}
.zn-balance-ai-action-card-info { flex: 1; }
.zn-balance-ai-action-card-label { font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.zn-balance-ai-action-card-detail { font-size: 12px; color: #64748b; }
.zn-balance-ai-action-card-confirm {
    background: var(--ai-primary, #0284c7);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all .15s;
}
.zn-balance-ai-action-card-confirm:hover { opacity: .88; }
.zn-balance-ai-action-card-confirm:disabled { opacity: .45; cursor: not-allowed; }
.zn-balance-ai-action-card.warning { background: #fff7ed; border-color: #fed7aa; }
.zn-balance-ai-action-card.warning .zn-balance-ai-action-card-confirm { background: #ea580c; }

/* Input wrap */
.zn-balance-ai-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 14px;
    border-top: 1px solid #f1f5f9;
}
#zn-balance-ai-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
    background: #f8fafc;
}
#zn-balance-ai-input:focus {
    border-color: var(--ai-primary, #0284c7);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(2,132,199,.1);
}
.zn-balance-ai-send-btn {
    width: 40px; height: 40px;
    background: var(--ai-primary, #0284c7);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
}
.zn-balance-ai-send-btn:hover { background: #0369a1; transform: scale(1.05); }
.zn-balance-ai-send-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Mobile */
@media (max-width: 480px) {
    .zn-balance-ai-messages { max-height: 220px; }
    .zn-balance-ai-msg-bubble { max-width: 90%; font-size: 13px; }
    .zn-balance-ai-prompt-btn { font-size: 11px; padding: 5px 10px; }
}

/* ── BuddyBoss nav customizer icon removal for Balance tab ─── */
/* The nav customizer may assign a custom icon to the Balance item.
   This removes it so "Balance" text is plain like Rooms, Trainings etc. */
#nav-zadwa-balance > a .bp-icon,
#nav-zadwa-balance > a .user-link .bp-icon,
li#nav-zadwa-balance a:before,
li[id*="balance-personal-li"] .bb-icon-l,
.bb-profile-tabs li.zadwa-balance-nav > a:before,
/* BuddyBoss Profile tabs icon */
#members-dir-list .zadwa-balance-nav a img,
nav.bp-navs li#nav-zadwa-balance .custom-nav-icon { display: none !important; }

/* Ensure balance tab text matches other tabs (no icon gap) */
#nav-zadwa-balance > a { padding-left: 0 !important; }
#nav-zadwa-balance > a:before { content: none !important; }

/* BuddyBoss "More" popup menu - make Balance look uniform */
.bb-profile-menu-list li[data-slug="balance"] .bb-nav-icon,
.bb-profile-menu-list li[data-slug="balance"] img.menu-icon { display: none !important; }
.bb-profile-menu-list li[data-slug="balance"] a { padding-left: 16px !important; }

/* ═══════════════════════════════════════════════════════════════
   MULTI-CURRENCY DISPLAY (v17.1)
   Inherits .zn-approx style from the main multicurrency.css
   but defines it here too as a safe fallback scoped to this page.
═══════════════════════════════════════════════════════════════ */

/* Secondary / approximate currency text — matches site-wide style */
.zadwa-balance-page .zn-approx,
.zadwa-balance-page .zn-balance-approx {
    color: #94a3b8;
    font-size: .8em;
    font-weight: 400;
    white-space: nowrap;
}

/* Hero secondary line — bigger approx text under the main balance */
.zn-balance-hero-secondary {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    margin-top: 2px;
    line-height: 1.3;
}
.zn-balance-hero-secondary .zn-balance-approx { color: rgba(255,255,255,.65); font-size: 1em; }

/* Hero currency note bar */
.zn-balance-hero-currency-note {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(255,255,255,.55);
    padding: 6px 0 2px;
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 10px;
}

/* Top-up button secondary line */
.zn-balance-topup-btn-primary   { display: block; font-weight: 700; font-size: 15px; }
.zn-balance-topup-btn-secondary { display: block; font-size: 11px; color: #94a3b8; font-weight: 400; margin-top: 1px; }
.zn-balance-amount-btn:hover .zn-balance-topup-btn-secondary { color: #64748b; }
.zn-balance-amount-btn.active .zn-balance-topup-btn-secondary { color: rgba(255,255,255,.7); }

/* USD preview below custom amount input */
.zn-balance-custom-usd-preview,
.zn-balance-tfr-usd-preview {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
    height: 16px;
}

/* Available balance secondary in transfer panel */
#zn-balance-avail-secondary { font-size: 12px; color: #94a3b8; margin-left: 4px; }

/* Transaction amount secondary currency */
.zn-balance-tx-secondary {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 400;
    margin-top: 1px;
}

/* AI widget approx */
.zn-balance-ai-approx { color: rgba(255,255,255,.6); font-size: .85em; }
.zn-balance-ai-msg.assistant .zn-balance-ai-approx { color: #94a3b8; }


/* ═══════════════════════════════════════════════════════════════════
   PHASE 6d — Income Breakdown + Community Fund Card
   ═══════════════════════════════════════════════════════════════════ */

.zn-balance-earnings-overview {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 24px 0;
}

/* ── Income Section ─────────────────────────────────────────────── */
.zn-balance-income-section {
    background: #fff;
    border: 1.5px solid #e8edf2;
    border-radius: 16px;
    padding: 22px 24px;
}

.zn-balance-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.zn-balance-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2332;
    margin: 0;
}

.zn-balance-section-total {
    font-size: 18px;
    font-weight: 800;
    color: #1a2332;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.zn-balance-section-total-label {
    font-size: 11px;
    font-weight: 500;
    color: #8a9ab0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stacked bar */
.zn-balance-income-bar {
    display: flex;
    height: 10px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f4f8;
    margin-bottom: 18px;
    gap: 2px;
}

.zn-balance-income-bar-seg {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
    min-width: 3px;
}

/* Stream grid */
.zn-balance-income-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

.zn-balance-income-card {
    background: #f8fafc;
    border: 1px solid #edf1f7;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.zn-balance-income-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.zn-balance-income-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.zn-balance-income-label {
    font-size: 11px;
    color: #6b7a8d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zn-balance-income-amount {
    font-size: 15px;
    font-weight: 800;
    color: #1a2332;
}

.zn-balance-income-bar-mini {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #edf1f7;
}

.zn-balance-income-bar-mini-fill {
    height: 100%;
    border-radius: 0 2px 2px 0;
    transition: width 0.6s ease;
}

/* Stream colour coding */
.zn-balance-bar-agent_commissions,
.zn-balance-income-bar-mini-fill.zn-balance-bar-agent_commissions  { background: #f59e0b; }
.zn-balance-bar-community_fund,
.zn-balance-income-bar-mini-fill.zn-balance-bar-community_fund     { background: #14b8a6; }
.zn-balance-bar-dividends,
.zn-balance-income-bar-mini-fill.zn-balance-bar-dividends          { background: #6366f1; }
.zn-balance-bar-vendor_sales,
.zn-balance-income-bar-mini-fill.zn-balance-bar-vendor_sales       { background: #22c55e; }
.zn-balance-bar-referral_bonuses,
.zn-balance-income-bar-mini-fill.zn-balance-bar-referral_bonuses   { background: #ec4899; }
.zn-balance-bar-topups,
.zn-balance-income-bar-mini-fill.zn-balance-bar-topups             { background: #94a3b8; }

/* ── ZCF Card ───────────────────────────────────────────────────── */
.zn-balance-zcf-card {
    background: linear-gradient(135deg, #0f2027 0%, #0d3b3b 60%, #14b8a6 140%);
    border-radius: 16px;
    padding: 22px 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.zn-balance-zcf-card::before {
    content: '🌐';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 90px;
    opacity: 0.06;
    line-height: 1;
    pointer-events: none;
}

.zn-balance-zcf-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 8px;
}

.zn-balance-zcf-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.zn-balance-zcf-pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #14b8a6;
    display: inline-block;
    animation: zn-balance-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes zn-balance-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.6); }
    50%       { box-shadow: 0 0 0 6px rgba(20, 184, 166, 0); }
}

.zn-balance-zcf-card-share {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 22px;
    font-weight: 900;
    color: #5eead4;
    line-height: 1.1;
}

.zn-balance-zcf-card-share-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zn-balance-zcf-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .zn-balance-zcf-card-stats { grid-template-columns: repeat(2, 1fr); }
}

.zn-balance-zcf-card-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zn-balance-zcf-card-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.zn-balance-zcf-card-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.zn-balance-zcf-unlocked { color: #5eead4; }
.zn-balance-zcf-locked   { color: rgba(255,255,255,0.4); }

/* Window alert */
.zn-balance-zcf-window-alert {
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.zn-balance-zcf-window-alert.open   { background: rgba(20,184,166,0.18); border: 1px solid rgba(20,184,166,0.35); }
.zn-balance-zcf-window-alert.claimed { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); }

.zn-balance-zcf-claim-inline {
    background: #14b8a6;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
}

.zn-balance-zcf-claim-inline:hover  { background: #0d9488; transform: translateY(-1px); }
.zn-balance-zcf-claim-inline:active { transform: translateY(0); }

.zn-balance-zcf-next {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 12px;
}

.zn-balance-zcf-card-cta {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin: 8px 0 0;
    line-height: 1.5;
}

.zn-balance-zcf-inline-result {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(20,184,166,0.15);
    border: 1px solid rgba(20,184,166,0.3);
    color: #5eead4;
}

/* ═══════════════════════════════════════════════
   ENHANCED USER SEARCH — BuddyBoss Integration
═══════════════════════════════════════════════ */

/* Search result avatar (80px from BP, displayed at 40px) */
.zn-balance-search-result-item .zn-balance-result-avatar,
.zn-balance-search-result-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e2e8f0;
    background: #f1f5f9;
}

.zn-balance-result-info {
    flex: 1;
    min-width: 0;
}

.zn-balance-result-name {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Subtle ↗ profile link — does not trigger the row select */
.zn-balance-profile-link {
    font-size: 11px;
    color: #94a3b8;
    text-decoration: none;
    flex-shrink: 0;
    pointer-events: auto;
    z-index: 2;
}
.zn-balance-profile-link:hover { color: #3b82f6; }

/* Loading spinner inside search results */
.zn-balance-search-loading {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.zn-balance-search-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: zn-balance-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes zn-balance-spin {
    to { transform: rotate(360deg); }
}

.zn-balance-search-empty {
    color: #94a3b8;
    font-style: italic;
    pointer-events: none;
}

/* Make the search input feel premium */
#zn-balance-user-search:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

/* Selected user card */
#zn-balance-selected-user {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border: 1.5px solid #bfdbfe;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 8px;
}

#zn-balance-selected-user img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #93c5fd;
}