/**
 * Game Enhancements CSS
 * Styles for all game page enhancements (E-commerce, Analytics, Fitness, Flying Baby Game)
 * Maintains existing styles, methods, and formats
 */

/* ============================================
   COMMON ENHANCEMENTS
   ============================================ */

/* Notifications */
.notification {
    position: fixed; top: 80px; right: 20px; background: #333; color: white; padding: 16px 24px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10001; opacity: 0; transform: translateX(400px); transition: opacity 0.3s ease, transform 0.3s ease; max-width: 400px; font-weight: 500; }

/* Modals */
.modal, .game-modal {
    left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }

.modal-content {
    max-height: 90vh; overflow-y: auto; }

.modal-header {
    margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #eee; }

body.dark-mode .modal-header {
    border-bottom-color: #333; }

.close-modal, .close-cart {
    border: none; font-size: 1.5rem; cursor: pointer; }

.empty-wishlist {
    text-align: center; }

/* Product Reviews */
.product-reviews {
    margin-top: 30px; padding-top: 30px; border-top: 2px solid #eee; }

body.dark-mode .product-reviews {
    border-top-color: #333; }

.reviews-list {
    margin: 20px 0; }

.review-text {
    line-height: 1.6; }

.rating-input .stars {
    gap: 5px; }

.checkout-steps .step {
    flex: 1; }

.date-filter-group {
    flex-wrap: wrap; }

body.dark-mode .date-filter-group select,
body.dark-mode .date-filter-group input[type="date"] {
    border-color: #444; }

.export-dropdown {
    overflow: hidden; }

.toggle-switch .slider {
    bottom: 0; background-color: #ccc; }

.toggle-switch .slider:before {
    content: ""; }

.refresh-btn i {
    animation: spin 1s linear infinite; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.goal-item {
    border-left: 4px solid var(--primary-color, #0d6efd); }

.goal-item.completed {
    border-left-color: #28a745; }

/* Achievement Notification */
.achievement-notification {
    min-width: 300px; }

.powerup-text {
    text-transform: uppercase; letter-spacing: 2px; }

/* Achievements Grid */
.achievements-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.achievement-item.locked {
    filter: grayscale(100%); }

/* Mobile Responsive */
@media (max-width: 768px) {
    
    .checkout-steps {
        flex-direction: column; }
}