/**
 * CoreMall 前台 Toast 通知组件样式
 * 完全基于Vuexy原生Bootstrap Toast样式，最大化复用Vuexy样式规范
 * 专为前台用户界面设计，与后台Toast组件完全解耦
 */

/* 前台Toast容器样式 - 遵循Vuexy标准 */
.frontend-toast-container {
    /* 确保在最顶层显示 */
    z-index: 9999 !important;
    /* 容器最大宽度 - 与Vuexy保持一致 */
    max-width: 420px;
    width: 100%;
}

/* 前台Toast基础样式 - 完全使用Vuexy默认样式 */
.frontend-toast.bs-toast {
    /* 最小宽度 - 与Vuexy保持一致 */
    min-width: 300px;
    /* 边距 - 与Vuexy保持一致 */
    margin-bottom: 0.5rem;
    /* 移除所有自定义样式，完全依赖Vuexy原生样式 */
}

/* 前台Toast状态样式 - 使用Bootstrap原生fade类 */
.frontend-toast.fade:not(.show) {
    opacity: 0;
}

.frontend-toast.fade.show {
    opacity: 1;
}

/* 前台Toast头部样式 - 完全使用Vuexy默认样式 */
.frontend-toast .toast-header {
    /* 移除所有自定义样式，完全依赖Vuexy原生样式 */
}

/* 前台Toast内容样式 - 完全使用Vuexy默认样式 */
.frontend-toast .toast-body {
    /* 移除所有自定义样式，完全依赖Vuexy原生样式 */
}

/* 前台图标样式 - 完全使用Vuexy的Bootstrap文本颜色类 */
.frontend-toast .toast-header .icon-base.text-success {
    /* 使用Bootstrap原生颜色变量 */
    color: var(--bs-success) !important;
}

.frontend-toast .toast-header .icon-base.text-danger {
    color: var(--bs-danger) !important;
}

.frontend-toast .toast-header .icon-base.text-warning {
    color: var(--bs-warning) !important;
}

.frontend-toast .toast-header .icon-base.text-info {
    color: var(--bs-info) !important;
}

.frontend-toast .toast-header .icon-base.text-primary {
    color: var(--bs-primary) !important;
}

/* 前台关闭按钮样式 - 使用Vuexy默认样式 */
.frontend-toast .toast-header .btn-close {
    /* 移除自定义样式，使用Vuexy默认样式 */
}

/* 前台动画样式 - 使用Vuexy标准animate.css */
.frontend-toast.animate__animated {
    /* 使用animate.css默认时长 */
    animation-duration: 0.5s;
}

/* 前台响应式设计 - 遵循Vuexy标准 */
@media (max-width: 768px) {
    .frontend-toast-container {
        /* 移动端容器样式 - 与Vuexy保持一致 */
        max-width: 90%;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 20px !important;
    }

    .frontend-toast.bs-toast {
        /* 移动端Toast样式 - 使用Vuexy默认值 */
        min-width: 280px;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .frontend-toast.bs-toast {
        /* 小屏幕最小宽度 - 与Vuexy保持一致 */
        min-width: 260px;
    }
}

/* 前台无障碍访问增强 - 使用Bootstrap标准 */
.frontend-toast:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* 前台特有标识 - 仅保留必要的前台特有样式 */
.frontend-toast-container {
    /* 前台容器特有标识，避免与后台冲突 */
}

/* 移除所有自定义视觉效果，完全依赖Vuexy原生样式 */
/* 包括：自定义背景色、边框、阴影、悬停效果、左边框等 */
/* 这些效果都由Vuexy的.bs-toast类提供 */