/* Settings System CSS - Shared styles for user preferences */

/* Notification System */
.user-notification {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--white);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-medium);
    z-index: 10000;
    max-width: 350px;
    min-width: 250px;
    opacity: 0;
    transform: translateX(100%);
    animation: slideInNotification 0.3s ease forwards;
}

.notification-content {
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    line-height: 1.4;
}

.notification-content i {
    color: var(--primary-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.notification-close {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    margin-left: auto;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.notification-close:hover {
    background: rgba(212, 175, 55, 0.1);
}

@keyframes slideInNotification {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Theme Variables for Dark Mode */
.theme-dark {
    --cream: #1a1a1a;
    --white: #2d2d2d;
    --dark-color: #ffffff;
    --light-color: #3a3a3a;
    --shadow-soft: 0 2px 15px rgba(255,255,255,0.05);
    --shadow-medium: 0 4px 20px rgba(255,255,255,0.08);
}

/* Dark Theme Global Styles - DISABLED TO PREVENT CONFLICTS */
/* body.theme-dark {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

body.theme-dark .main-content {
    background: #1a1a1a !important;
} */

/* Navigation Dark Theme - DISABLED TO PREVENT CONFLICTS */
/* body.theme-dark .navbar {
    background: #2d2d2d !important;
    border-bottom: 1px solid #3a3a3a;
}

body.theme-dark .nav-link {
    color: #ffffff !important;
}

body.theme-dark .nav-link:hover {
    background: rgba(212, 175, 55, 0.2) !important;
    color: var(--primary-color) !important;
}

body.theme-dark .nav-link.active {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
}

body.theme-dark .user-name {
    color: #ffffff !important;
} */

/* Cards and Sections Dark Theme - DISABLED TO PREVENT CONFLICTS */
/* body.theme-dark .feature-card,
body.theme-dark .product-card,
body.theme-dark .order-card,
body.theme-dark .cart-item,
body.theme-dark .profile-form,
body.theme-dark .dashboard-card {
    background: #2d2d2d !important;
    border: 1px solid #3a3a3a !important;
    color: #ffffff !important;
}

body.theme-dark .features-section {
    background: #1a1a1a !important;
}

body.theme-dark .products-section {
    background: #1a1a1a !important;
} */

/* Text Elements Dark Theme */
body.theme-dark .feature-card h3,
body.theme-dark .product-info h3,
body.theme-dark .form-label,
body.theme-dark .section-title h2,
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, 
body.theme-dark h4, body.theme-dark h5, body.theme-dark h6 {
    color: #ffffff !important;
}

body.theme-dark .feature-card p,
body.theme-dark .section-title p {
    color: #cccccc !important;
}

/* Form Elements Dark Theme */
body.theme-dark .form-input,
body.theme-dark .form-select,
body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select {
    background: #3a3a3a !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
}

body.theme-dark .form-input:focus,
body.theme-dark input:focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus {
    border-color: var(--primary-color) !important;
    background: #404040 !important;
}

/* Footer Dark Theme */
body.theme-dark footer {
    background: #0f0f0f !important;
    color: #ffffff !important;
}

/* Tables Dark Theme */
body.theme-dark table {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

body.theme-dark th {
    background: #3a3a3a !important;
    color: #ffffff !important;
}

body.theme-dark td {
    border-color: #555555 !important;
}

/* Buttons Dark Theme */
body.theme-dark .btn-secondary,
body.theme-dark .secondary-btn {
    background: #555555 !important;
    color: #ffffff !important;
    border: 1px solid #666666 !important;
}

body.theme-dark .btn-secondary:hover,
body.theme-dark .secondary-btn:hover {
    background: #666666 !important;
}

/* Modal Dark Theme */
body.theme-dark .modal {
    background: rgba(0, 0, 0, 0.8) !important;
}

body.theme-dark .modal-content {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

/* Pagination Dark Theme */
body.theme-dark .pagination a {
    background: #3a3a3a !important;
    color: #ffffff !important;
    border: 1px solid #555555 !important;
}

body.theme-dark .pagination a:hover {
    background: var(--primary-color) !important;
}

body.theme-dark .pagination .active {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Profile Page Dark Theme */
body.theme-dark .tab-btn {
    background: #3a3a3a !important;
    color: #ffffff !important;
    border: 1px solid #555555 !important;
}

body.theme-dark .tab-btn.active {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
}

body.theme-dark .tab-content {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

body.theme-dark .toggle-switch input:checked + .slider {
    background-color: var(--primary-color) !important;
}

body.theme-dark .slider {
    background-color: #555555 !important;
}

/* Breadcrumb Dark Theme */
body.theme-dark .breadcrumb {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

body.theme-dark .breadcrumb a {
    color: var(--primary-color) !important;
}

/* Price Elements Dark Theme */
body.theme-dark .product-price,
body.theme-dark .price,
body.theme-dark .total-price {
    color: var(--secondary-color) !important;
}

/* Stats Labels Dark Theme */
body.theme-dark .stat-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.theme-dark .user-notification {
    background: var(--white);
    border-color: var(--primary-color);
    color: var(--dark-color);
}

/* Enhanced hover effects for settings-aware elements */
.settings-responsive {
    transition: var(--transition-smooth);
}

.settings-responsive:hover {
    transform: translateY(-2px);
}

/* Currency display styling */
.currency-display {
    font-weight: 600;
    color: var(--primary-color);
}

/* History display in dashboard */
.recent-activity {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-soft);
}

.recent-activity h3 {
    color: var(--dark-color);
    margin-bottom: var(--spacing-md);
    font-size: 1.2rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--light-color);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item i {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}

.activity-item a {
    color: var(--dark-color);
    text-decoration: none;
    font-weight: 500;
    display: block;
}

.activity-item a:hover {
    color: var(--primary-color);
}

.activity-item small {
    color: #666;
    font-size: 0.8rem;
    display: block;
    margin-top: 2px;
}

/* Settings persistence indicator */
.settings-saved {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--success-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition-smooth);
    z-index: 9999;
}

.settings-saved.show {
    opacity: 1;
    transform: translateY(0);
}

/* Smart suggestions styling */
.smart-suggestions {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(26, 54, 93, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.smart-suggestions h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--white);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    text-decoration: none;
    color: var(--dark-color);
    transition: var(--transition-smooth);
}

.suggestion-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-soft);
}

.suggestion-item:last-child {
    margin-bottom: 0;
}

/* Privacy mode indicators */
.privacy-mode .user-avatar::after {
    content: '🔒';
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.7rem;
    background: var(--white);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Language direction helpers */
[dir="ltr"] .user-notification {
    left: 20px;
    right: auto;
    transform: translateX(-100%);
}

[dir="ltr"] .user-notification.show {
    transform: translateX(0);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .user-notification {
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .recent-activity {
        margin: var(--spacing-md) 0;
        padding: var(--spacing-md);
    }
    
    .activity-item {
        padding: var(--spacing-xs) 0;
    }
    
    .settings-saved {
        right: 10px;
        left: 10px;
        text-align: center;
    }
}

/* Print styles - hide settings UI */
@media print {
    .user-notification,
    .settings-saved,
    .smart-suggestions {
        display: none !important;
    }
}