/* Dashboard Account Page Styles */
/* CSP Compliant - No inline styles */

/* EXACT COPY from working dashboard home-pro.css */
/* Go for Gold Popup Styles */
.go-for-gold-popup {
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(212, 161, 77, 0.3) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
    text-align: center !important;
}

.go-for-gold-title {
    color: #d4a14d !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

.go-for-gold-content {
    padding: 15px !important;
}

/* Make Upgrade Now button have black text */
.go-for-gold-popup .swal2-confirm {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* More specific selector to override inline styles */
.swal2-container .go-for-gold-popup .swal2-confirm,
.swal2-container .swal2-popup.go-for-gold-popup .swal2-confirm {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Custom confirm button class */
.go-for-gold-confirm-btn,
.swal2-confirm.go-for-gold-confirm-btn {
    color: #000000 !important;
    font-weight: 600 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove grey border from main dashboard popup button */
.go-for-gold-popup .swal2-confirm.swal2-styled,
.go-for-gold-popup .swal2-confirm.swal2-default-outline {
    border: none !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Make $495 stand out with green color */
.go-for-gold-popup .swal2-html-container span:contains('$495') {
    color: #10b981 !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

/* Mobile responsiveness for Go for Gold popup */
@media (max-width: 480px) {
    .go-for-gold-popup {
        width: 95% !important;
        margin: 10px !important;
    }
    
    .go-for-gold-title {
        font-size: 18px !important;
    }
    
    .swal2-popup {
        padding: 15px !important;
    }
    
    .swal2-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .swal2-confirm, .swal2-cancel {
        width: 100% !important;
        margin: 0 !important;
    }
}