/* START OF FILE css/components.css */

/* Messages (General) */
.message {
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    margin-top: 10px;
}
.message.success {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}
.message.error {
     background-color: rgba(239, 68, 68, 0.1);
    color: var(--error-color);
    border: 1px solid var(--error-color);
}
.message.info {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--info-color);
    border: 1px solid var(--info-color);
}


/* Empty State */
.empty-state {
    background-color: var(--card-bg); /* White background */
    color: var(--secondary-color); /* Muted text color */
    border-radius: 12px; /* Consistent rounding */
    padding: 60px 40px; /* Generous padding */
    box-shadow: var(--shadow-light);
    text-align: center; /* Center content */
    display: flex; /* Use flexbox for alignment */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-color-light); /* Optional dashed border */
    min-height: 300px; /* Ensure a minimum height */
    margin-top: 20px; /* Space from title */
}

/* Icon styling within empty states */
.empty-state i.fas,
.empty-state i.fa-solid { /* Allow for different FontAwesome styles */
    font-size: 3.5rem; /* Larger icon */
    color: var(--primary-color); /* Yellow accent color */
    margin-bottom: 25px; /* Space below icon */
    opacity: 0.7; /* Slight transparency */
    /* Optional subtle animation */
    /* animation: bounce 1.5s infinite ease-in-out; */
}

/* Main text/message within empty states */
.empty-state p {
    font-size: 1.25rem; /* Clear, readable size */
    color: var(--text-dark); /* Dark text */
    font-weight: 600; /* Semi-bold */
    margin-bottom: 15px; /* Space below text */
    line-height: 1.5;
    max-width: 400px; /* Prevent text from becoming too wide */
}

/* Sub-text or additional info (optional) */
.empty-state .sub-text {
    font-size: 0.95rem;
    color: var(--secondary-color);
    margin-bottom: 30px; /* Space before button */
    max-width: 450px;
}

/* Button styling within empty states */
.empty-state .btn {
    /* Inherits global .btn and .btn-primary styles */
    font-size: 1em;
    padding: 12px 30px; /* Comfortable button size */
}
.empty-state .btn i {
    margin-right: 8px; /* Space between icon and text in button */
}

/* Optional subtle animation for the icon */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-15px);}
  60% {transform: translateY(-8px);}
}


/* Loading Placeholder */
.loading-placeholder {
    text-align: center;
    padding: 40px 20px;
    font-size: 1em;
    color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.loading-placeholder i {
    font-size: 1.8em;
    color: var(--primary-color);
}


/* Cart Update Feedback (Toast) */
.cart-feedback {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100%); /* Start below screen */
    background-color: rgba(30, 30, 30, 0.9); /* Slightly darker */
    color: var(--text-light);
    padding: 10px 20px;
    border-radius: 8px; /* Less rounded */
    z-index: 1001; /* Above header */
    font-size: 0.9em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
    box-shadow: 0 3px 10px var(--shadow-color);
    border: none;
}
.cart-feedback.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.cart-feedback i {
    font-size: 1.1em;
}
.cart-feedback.add i { color: var(--success-color); }
.cart-feedback.remove i { color: var(--error-color); }

/* END OF FILE css/components.css */