/*
 * CB Panel - Frontend Wallet Balance Card
 * Prefix: cbpanel-fe-wallet-
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

.cbpanel-fe-wallet-wrap {
    font-family: var(--cbpanel-font, 'Manrope', sans-serif);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cbpanel-fe-wallet-wrap *,
.cbpanel-fe-wallet-wrap ::before,
.cbpanel-fe-wallet-wrap ::after {
    box-sizing: border-box;
}

.cbpanel-fe-wallet-card-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.cbpanel-fe-wallet-glow {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 185, 13, 0.2); /* equivalent to var(--cbpanel-primary) with opacity */
    filter: blur(100px);
    z-index: -10;
    border-radius: 9999px; /* rounded-full */
}

/* Base custom font and icon set rules are handled by global css */

.cbpanel-fe-wallet-card {
    background: linear-gradient(180deg, #f7c948 0%, var(--cbpanel-primary) 50%, var(--cbpanel-warning) 100%);
    border-radius: 1.75rem; /* rounded-lg in config = 1.75rem */
    box-shadow: 0 25px 50px -12px rgba(255, 185, 13, 0.15); /* card-shadow */
    padding: 3.8rem 1.6rem !important; 
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem; /* gap-8 */
    position: relative;
    overflow: hidden;
}



.cbpanel-fe-wallet-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.3;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
}

.cbpanel-fe-wallet-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    z-index: 10;
}

.cbpanel-fe-wallet-btn {
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
    border-radius: 9999px; /* rounded-full */
    background-color: var(--cbpanel-text-primary); /* #000 */
    color: var(--cbpanel-pure-white); /* #fff */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}

@media (width <= 375px){
.cbpanel-fe-wallet-btn{
    width: 2rem;
    height: 2rem;
}
}

.cbpanel-fe-wallet-btn:hover {
    transform: scale(1.1); /* hover:scale-110 */
}

.cbpanel-fe-wallet-btn:active {
    transform: scale(0.95); /* active:scale-95 */
}

.cbpanel-fe-wallet-btn-deposit:hover .material-symbols-outlined {
    /* group-hover:rotate-90 */
    transform: rotate(90deg);
}

.cbpanel-fe-wallet-btn .material-symbols-outlined {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cbpanel-fe-wallet-action-label {
    color: var(--cbpanel-text-primary);
    font-weight: 800; /* font-extrabold */
    font-size: 0.875rem; /* text-sm */
    letter-spacing: 0.025em; /* tracking-wide */
    text-transform: uppercase;
}


@media (width <= 375px){
.cbpanel-fe-wallet-action-label{
    font-size: 0.7rem;
}
}

.cbpanel-fe-wallet-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
    flex: 1;
}

.cbpanel-fe-wallet-title {
    color: var(--cbpanel-text-primary);
    font-weight: 600; /* font-semibold */
    font-size: 1rem; /* text-[10px] */
    letter-spacing: 0.2em; /* tracking-[0.2em] */
    text-transform: uppercase;
    opacity: 0.7; /* opacity-70 */
    margin-bottom: 0.5rem; /* mb-2 */
    display: block;
}

@media (width <= 375px) {
    .cbpanel-fe-wallet-title {
        font-size: 0.8rem; /* md:text-xs */
    }
}

.cbpanel-fe-wallet-balance-wrap {
    position: relative;
    /* Reset margins for headings */
    margin: 0;
    width: 90%;
}

.cbpanel-fe-wallet-balance {
    color: var(--cbpanel-text-primary);
    font-size: 4.5rem; /* text-5xl (48px) */
    font-weight: 800; /* font-extrabold */
    letter-spacing: -0.05em; /* tracking-tighter */
    line-height: 1; /* leading-none */
    margin: 0;
    font-family: inherit;
}

@media (width <= 560px){
.cbpanel-fe-wallet-balance{
    font-size: 2.4rem !important;
}
}

@media (width <= 375px){
.cbpanel-fe-wallet-balance{
    font-size: 1.8rem !important;
}
}

.cbpanel-fe-wallet-badge {
    margin-top: 1rem; /* mt-4 */
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
    background-color: rgba(0, 0, 0, 0.1); /* bg-black/10 */
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    border-radius: 9999px; /* rounded-full */
}

.cbpanel-fe-wallet-badge .material-symbols-outlined {
    font-size: 0.875rem; /* text-sm */
    color: var(--cbpanel-text-primary);
}

.cbpanel-fe-wallet-badge-text {
    color: var(--cbpanel-text-primary);
    font-size: 0.7rem; /* text-[10px] */
    font-weight: 700; /* font-bold */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
}

/* Wallet Popup Modal Area */
.cbpanel-wallet-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    font-family: var(--cbpanel-font, 'Manrope', sans-serif);
    backdrop-filter: blur(4px);
}

.cbpanel-wallet-modal {
    background: var(--cbpanel-card-dark);
    padding: 2rem;
    border-radius: 1rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: var(--cbpanel-shadow-md);
    border: 2px solid var(--cbpanel-border-dark);
}

.cbpanel-wallet-modal h3 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    font-weight: 650;
    color: var(--cbpanel-text-white);
}

.cbpanel-wallet-modal p {
    margin: 0 0 2rem 0;
    font-size: 1.1rem;
    color: var(--cbpanel-text-light-secondary);
    font-weight: 400 !important;
}

.cbpanel-wallet-modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.cbpanel-wallet-btn-cancel {
    background: var(--cbpanel-border-light);
    border: none;
    color: var(--cbpanel-text-primary);
    padding: 0.7rem 2rem;
    border-radius: 100rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
}

.cbpanel-wallet-btn-cancel:hover {
    background: var(--cbpanel-border);
}

.cbpanel-wallet-btn-action {
    background: var(--cbpanel-primary);
    color: var(--cbpanel-text-primary);
    padding: 0.7rem 2rem;
    border-radius: 100rem;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cbpanel-wallet-btn-action:hover {
    background: var(--cbpanel-primary-hover);
    color: var(--cbpanel-text-primary) !important;
}



/* Spinner Animation for AJAX Loaders */
@keyframes cbpanel-spin { 
    100% { transform: rotate(360deg); } 
}

.cbpanel-fe-wallet-btn .rotate { 
    animation: cbpanel-spin 1s linear infinite; 
}