/**
 * COMPOSANT MESSAGES ET NOTIFICATIONS - KOLDKAZE
 * Extrait et consolidé depuis : wcfm-components.css + force-message-styles.js + charte-graphique-exhaustive.html
 * Dépendances : variables.css, core.css
 * Version : 1.0.0
 * Date : 2024-01-15
 */

/* ===== MESSAGES DE BASE ===== */

.message,
.alert {
    position: relative;
    padding: var(--koldkaze-spacing-md) var(--koldkaze-spacing-lg);
    margin-bottom: var(--koldkaze-spacing-md);
    border: var(--koldkaze-border-width) solid transparent;
    border-radius: var(--koldkaze-border-radius);
    font-size: var(--koldkaze-font-size-sm);
    line-height: var(--koldkaze-line-height-normal);
}

.message p:last-child,
.alert p:last-child {
    margin-bottom: 0;
}

/* ===== VARIANTES DE MESSAGES ===== */

/* Message Success */
.message-success,
.alert-success {
    color: #155724;
    background-color: var(--koldkaze-success-light);
    border-color: #c3e6cb;
    border-left: 4px solid var(--koldkaze-success);
}

.message-success::before,
.alert-success::before {
    content: "✓ ";
    font-weight: var(--koldkaze-font-weight-bold);
    color: var(--koldkaze-success);
}

/* Message Info */
.message-info,
.alert-info {
    color: #0c5460;
    background-color: var(--koldkaze-info-light);
    border-color: #bee5eb;
    border-left: 4px solid var(--koldkaze-info);
}

.message-info::before,
.alert-info::before {
    content: "ℹ ";
    font-weight: var(--koldkaze-font-weight-bold);
    color: var(--koldkaze-info);
}

/* Message Warning */
.message-warning,
.alert-warning {
    color: #856404;
    background-color: var(--koldkaze-warning-light);
    border-color: #ffeaa7;
    border-left: 4px solid var(--koldkaze-warning);
}

.message-warning::before,
.alert-warning::before {
    content: "⚠ ";
    font-weight: var(--koldkaze-font-weight-bold);
    color: var(--koldkaze-warning);
}

/* Message Error/Danger */
.message-error,
.message-danger,
.alert-error,
.alert-danger {
    color: #721c24;
    background-color: var(--koldkaze-danger-light);
    border-color: #f5c6cb;
    border-left: 4px solid var(--koldkaze-danger);
}

.message-error::before,
.message-danger::before,
.alert-error::before,
.alert-danger::before {
    content: "✕ ";
    font-weight: var(--koldkaze-font-weight-bold);
    color: var(--koldkaze-danger);
}

/* ===== MESSAGES WCFM SPÉCIFIQUES ===== */

/* Messages WCFM depuis force-message-styles.js */
.wcfm-message,
.wcfm_message {
    padding: var(--koldkaze-spacing-md);
    margin: var(--koldkaze-spacing-md) 0;
    border-radius: var(--koldkaze-border-radius);
    font-size: var(--koldkaze-font-size-sm);
    line-height: var(--koldkaze-line-height-normal);
}

.wcfm-message.wcfm-success,
.wcfm_message.wcfm-success {
    @extend .message-success;
}

.wcfm-message.wcfm-error,
.wcfm_message.wcfm-error {
    @extend .message-error;
}

.wcfm-message.wcfm-info,
.wcfm_message.wcfm-info {
    @extend .message-info;
}

/* Messages de validation WCFM */
.wcfm-validation-message {
    padding: var(--koldkaze-spacing-sm) var(--koldkaze-spacing-md);
    margin-top: var(--koldkaze-spacing-xs);
    border-radius: var(--koldkaze-border-radius-sm);
    font-size: var(--koldkaze-font-size-xs);
    background-color: var(--koldkaze-danger-light);
    color: #721c24;
    border-left: 3px solid var(--koldkaze-danger);
}

/* ===== NOTIFICATIONS TOAST ===== */

.toast,
.notification {
    position: fixed;
    top: var(--koldkaze-spacing-xl);
    right: var(--koldkaze-spacing-xl);
    min-width: 300px;
    max-width: 400px;
    padding: var(--koldkaze-spacing-md) var(--koldkaze-spacing-lg);
    background-color: var(--koldkaze-white);
    border: var(--koldkaze-border-width) solid var(--koldkaze-border-color);
    border-radius: var(--koldkaze-border-radius);
    box-shadow: var(--koldkaze-shadow-lg);
    z-index: var(--koldkaze-z-toast);
    transform: translateX(100%);
    transition: transform var(--koldkaze-transition-base);
}

.toast.show,
.notification.show {
    transform: translateX(0);
}

.toast-success {
    border-left: 4px solid var(--koldkaze-success);
}

.toast-info {
    border-left: 4px solid var(--koldkaze-info);
}

.toast-warning {
    border-left: 4px solid var(--koldkaze-warning);
}

.toast-error,
.toast-danger {
    border-left: 4px solid var(--koldkaze-danger);
}

/* Header du toast */
.toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--koldkaze-spacing-xs);
    font-weight: var(--koldkaze-font-weight-semibold);
    font-size: var(--koldkaze-font-size-sm);
}

.toast-close {
    background: none;
    border: none;
    font-size: var(--koldkaze-font-size-lg);
    cursor: pointer;
    color: var(--koldkaze-gray-600);
    padding: 0;
    margin-left: var(--koldkaze-spacing-sm);
}

.toast-close:hover {
    color: var(--koldkaze-dark);
}

/* Body du toast */
.toast-body {
    font-size: var(--koldkaze-font-size-sm);
    color: var(--koldkaze-gray-700);
}

/* ===== MESSAGES INLINE ===== */

.inline-message {
    display: inline-flex;
    align-items: flex-start;
    text-align: left;
    padding: var(--koldkaze-spacing-xs) var(--koldkaze-spacing-sm);
    border-radius: var(--koldkaze-border-radius-sm);
    font-size: var(--koldkaze-font-size-xs);
    font-weight: var(--koldkaze-font-weight-medium);
}

.inline-message-success {
    color: var(--koldkaze-success);
    background-color: var(--koldkaze-success-light);
}

.inline-message-error {
    color: var(--koldkaze-danger);
    background-color: var(--koldkaze-danger-light);
}

.inline-message-warning {
    color: #856404;
    background-color: var(--koldkaze-warning-light);
}

.inline-message-info {
    color: var(--koldkaze-info);
    background-color: var(--koldkaze-info-light);
}

/* ===== MESSAGES AVEC ACTIONS ===== */

.message-with-actions,
.alert-with-actions {
    padding-bottom: var(--koldkaze-spacing-lg);
}

.message-actions,
.alert-actions {
    margin-top: var(--koldkaze-spacing-md);
    display: flex;
    gap: var(--koldkaze-spacing-sm);
}

.message-actions .btn,
.alert-actions .btn {
    font-size: var(--koldkaze-font-size-xs);
    padding: var(--koldkaze-spacing-xs) var(--koldkaze-spacing-sm);
}

/* ===== MESSAGES DISMISSIBLE ===== */

.message-dismissible,
.alert-dismissible {
    padding-right: calc(var(--koldkaze-spacing-lg) + 24px);
}

.message-close,
.alert-close {
    position: absolute;
    top: var(--koldkaze-spacing-sm);
    right: var(--koldkaze-spacing-sm);
    background: none;
    border: none;
    font-size: var(--koldkaze-font-size-lg);
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-close:hover,
.alert-close:hover {
    opacity: 1;
}

.message-close::before,
.alert-close::before {
    content: "×";
}

/* ===== MESSAGES DE CHARGEMENT ===== */

.message-loading,
.alert-loading {
    position: relative;
    padding-left: calc(var(--koldkaze-spacing-lg) + 24px);
}

.message-loading::before,
.alert-loading::before {
    content: '';
    position: absolute;
    left: var(--koldkaze-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--koldkaze-gray-300);
    border-top-color: var(--koldkaze-primary);
    border-radius: 50%;
    animation: message-loading-spin 1s linear infinite;
}

@keyframes message-loading-spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* ===== CONTENEUR DE NOTIFICATIONS ===== */

.notifications-container {
    position: fixed;
    top: var(--koldkaze-spacing-xl);
    right: var(--koldkaze-spacing-xl);
    z-index: var(--koldkaze-z-toast);
    pointer-events: none;
}

.notifications-container .toast,
.notifications-container .notification {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: var(--koldkaze-spacing-sm);
    pointer-events: auto;
}

/* ===== MESSAGES SYSTÈME ===== */

/* Messages WordPress */
.notice,
.updated,
.error {
    padding: var(--koldkaze-spacing-md);
    margin: var(--koldkaze-spacing-md) 0;
    border-left: 4px solid;
    background-color: var(--koldkaze-white);
}

.notice.notice-success,
.updated {
    border-left-color: var(--koldkaze-success);
    background-color: var(--koldkaze-success-light);
}

.notice.notice-error,
.error {
    border-left-color: var(--koldkaze-danger);
    background-color: var(--koldkaze-danger-light);
}

.notice.notice-warning {
    border-left-color: var(--koldkaze-warning);
    background-color: var(--koldkaze-warning-light);
}

.notice.notice-info {
    border-left-color: var(--koldkaze-info);
    background-color: var(--koldkaze-info-light);
}

/* Messages WooCommerce */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: var(--koldkaze-spacing-md) var(--koldkaze-spacing-lg);
    margin-bottom: var(--koldkaze-spacing-md);
    border-radius: var(--koldkaze-border-radius);
    border-left: 4px solid;
}

.woocommerce-message {
    @extend .message-success;
}

.woocommerce-info {
    @extend .message-info;
}

.woocommerce-error {
    @extend .message-error;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 767px) {
    .toast,
    .notification {
        top: var(--koldkaze-spacing-md);
        right: var(--koldkaze-spacing-md);
        left: var(--koldkaze-spacing-md);
        min-width: auto;
        max-width: none;
    }
    
    .notifications-container {
        top: var(--koldkaze-spacing-md);
        right: var(--koldkaze-spacing-md);
        left: var(--koldkaze-spacing-md);
    }
    
    .message,
    .alert {
        padding: var(--koldkaze-spacing-sm) var(--koldkaze-spacing-md);
    }
    
    .message-actions,
    .alert-actions {
        flex-direction: column;
    }
    
    .message-actions .btn,
    .alert-actions .btn {
        width: 100%;
        margin-bottom: var(--koldkaze-spacing-xs);
    }
}

/* ===== ANIMATIONS ===== */

/* Fade in/out pour les messages */
.message-fade-in {
    animation: message-fade-in var(--koldkaze-transition-base) ease-out;
}

.message-fade-out {
    animation: message-fade-out var(--koldkaze-transition-base) ease-in;
}

@keyframes message-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes message-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Slide in pour les toasts */
.toast-slide-in {
    animation: toast-slide-in var(--koldkaze-transition-base) ease-out;
}

.toast-slide-out {
    animation: toast-slide-out var(--koldkaze-transition-base) ease-in;
}

@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes toast-slide-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* ===== ACCESSIBILITÉ ===== */

/* Amélioration du contraste */
@media (prefers-contrast: high) {
    .message,
    .alert {
        border-width: 2px;
    }
    
    .message-success,
    .alert-success {
        border-left-width: 6px;
    }
    
    .message-info,
    .alert-info {
        border-left-width: 6px;
    }
    
    .message-warning,
    .alert-warning {
        border-left-width: 6px;
    }
    
    .message-error,
    .message-danger,
    .alert-error,
    .alert-danger {
        border-left-width: 6px;
    }
}

/* Réduction des animations */
@media (prefers-reduced-motion: reduce) {
    .toast,
    .notification {
        transition: none;
    }
    
    .message-loading::before,
    .alert-loading::before {
        animation: none;
    }
    
    .message-fade-in,
    .message-fade-out,
    .toast-slide-in,
    .toast-slide-out {
        animation: none;
    }
}

/* Support des lecteurs d'écran */
.message[role="alert"],
.alert[role="alert"] {
    /* Annoncé automatiquement par les lecteurs d'écran */
}

.message[aria-live="polite"],
.alert[aria-live="polite"] {
    /* Annoncé poliment par les lecteurs d'écran */
}

.message[aria-live="assertive"],
.alert[aria-live="assertive"] {
    /* Annoncé immédiatement par les lecteurs d'écran */
}