/**
 * Messages CSS for Bnaia Theme
 * Ensures proper styling and prevents duplication issues
 */

/* Message container */
#messages {
    position: relative;
    z-index: 50;
}

/* Prevent duplicate message containers */
#messages + #messages {
    display: none !important;
}

/* Temporarily hide duplicate messages until JavaScript cleanup runs */
#messages div.w-full + div.w-full {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Individual message styling */
.message {
    @apply relative mb-3 p-4 rounded-lg border-l-4 shadow-sm;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    animation: messageSlideIn 0.3s ease-out;
}

/* Message types */
.message.success {
    @apply bg-green-50 border-green-500 text-green-800;
}

.message.error {
    @apply bg-red-50 border-red-500 text-red-800;
}

.message.warning {
    @apply bg-yellow-50 border-yellow-500 text-yellow-800;
}

.message.info {
    @apply bg-blue-50 border-blue-500 text-blue-800;
}

/* Message content */
.message span {
    flex: 1;
    margin-right: 1rem;
}

/* Close button */
.message button {
    flex-shrink: 0;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.message button:hover {
    @apply bg-gray-100;
}

.message button:focus {
    @apply outline-none ring-2 ring-offset-1 ring-gray-400;
}

/* Animation for message appearance */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation for message removal */
.message.removing {
    animation: messageSlideOut 0.3s ease-in forwards;
}

@keyframes messageSlideOut {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
    to {
        opacity: 0;
        transform: translateY(-1rem);
        max-height: 0;
        margin: 0;
        padding: 0;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .message {
        @apply mx-4 text-sm;
    }
    
    .message span {
        margin-right: 0.5rem;
    }
}

/* Accessibility improvements */
.message:focus-within {
    @apply ring-2 ring-offset-2 ring-blue-500;
}

/* Prevent text selection on close button */
.message button {
    user-select: none;
}

/* Ensure proper RTL support */
[dir="rtl"] .message span {
    margin-right: 0;
    margin-left: 1rem;
}

[dir="rtl"] .message button {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .message {
        border-width: 2px;
        border-style: solid;
    }
    
    .message.success {
        border-color: #059669;
        background-color: #ecfdf5;
    }
    
    .message.error {
        border-color: #dc2626;
        background-color: #fef2f2;
    }
    
    .message.warning {
        border-color: #d97706;
        background-color: #fffbeb;
    }
    
    .message.info {
        border-color: #2563eb;
        background-color: #eff6ff;
    }
}

/* Links within messages */
.message a {
    @apply underline font-medium;
}

.message.success a {
    @apply text-green-700;
}

.message.error a {
    @apply text-red-700;
}

.message.warning a {
    @apply text-yellow-700;
}

.message.info a {
    @apply text-blue-700;
}