body {
    font-family: 'Inter', sans-serif;
}

.order-card {
    transition: box-shadow 0.2s ease-in-out;
}

.order-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.status-badge {
    text-transform: capitalize;
}

.status-new {
    background-color: #eff6ff; /* blue-50 */
    color: #1d4ed8; /* blue-700 */
}
.status-in-progress {
    background-color: #fff7ed; /* orange-50 */
    color: #c2410c; /* orange-700 */
}
.status-ready {
    background-color: #f0fdf4; /* green-50 */
    color: #15803d; /* green-700 */
}
.status-completed {
    background-color: #f5f5f5; /* neutral-100 */
    color: #525252; /* neutral-600 */
}
.status-cancelled {
    background-color: #fef2f2; /* red-50 */
    color: #b91c1c; /* red-700 */
}

/* Modal styles */
#cart-modal-content, #auth-modal-content {
    transition: transform 0.3s ease-out;
    transform: scale(0.95);
}

#cart-modal:not(.hidden) #cart-modal-content,
#auth-modal:not(.hidden) #auth-modal-content {
    transform: scale(1);
}

/* User Dropdown Styles */
#user-dropdown {
    transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
    transform: scale(0.95);
    opacity: 0;
    pointer-events: none; /* Prevent interaction when hidden */
}

#user-dropdown:not(.hidden) {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto; /* Allow interaction when visible */
}

/* Review Preference Chips */
.review-chip {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    color: #4b5563;
    transition: all 0.2s;
    user-select: none;
}

.review-chip:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

/* Selected State - Positive */
.review-chip.selected-positive {
    background-color: #dcfce7; /* green-100 */
    border-color: #22c55e; /* green-500 */
    color: #15803d; /* green-700 */
}

/* Selected State - Negative */
.review-chip.selected-negative {
    background-color: #fee2e2; /* red-100 */
    border-color: #ef4444; /* red-500 */
    color: #b91c1c; /* red-700 */
}