/**
 * 首页公告弹窗样式
 */

.announcement-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important; /* 确保在最顶层 */
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.announcement-modal.is-open {
    display: flex !important;
}

/* 遮罩层 */
.announcement-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(5px);
    z-index: 1 !important;
}

/* 弹窗主体 */
.announcement-content {
    position: relative !important;
    background: white !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4) !important;
    width: 90% !important;
    max-width: 1000px !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    z-index: 2 !important;
    animation: announcementSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes announcementSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 关闭按钮 (X) - 高亮显眼 */
.announcement-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: #ef4444 !important;
    border: none !important;
    color: white !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
    padding: 0 !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
}

.announcement-close:hover {
    background: #dc2626 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5) !important;
}

/* 头部 */
.announcement-header {
    padding: 20px 40px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    text-align: center !important;
}

.announcement-header h2 {
    margin: 0 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: white !important;
    line-height: 1.3 !important;
}

/* 品牌标题样式 - Just红色 shop白色 */
.announcement-header .brand-just {
    color: #ef4444 !important;
}

.announcement-header .brand-shop {
    color: white !important;
}

/* 主体内容 */
.announcement-body {
    padding: 30px 40px !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    font-size: 0.95rem !important;
    line-height: 2.2 !important;
    color: #374151 !important;
    white-space: pre-line !important;
}

/* 欢迎问候样式 */
.announcement-greeting {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
    border-left: 4px solid #667eea !important;
}

.greeting-icon {
    font-size: 1.8rem !important;
}

.greeting-text {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1e40af !important;
}

/* 内容区块样式 */
.announcement-section {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 0 !important;
}

.announcement-section:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.announcement-section:first-of-type {
    padding-top: 0 !important;
}

.section-icon {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    background: #f1f5f9 !important;
    border-radius: 12px !important;
    margin-top: 2px !important;
}

.section-content {
    flex: 1 !important;
    padding-top: 8px !important;
}

.section-content p {
    margin: 0 0 0 0 !important;
    color: #4b5563 !important;
    line-height: 1.8 !important;
    font-size: 0.95rem !important;
}

/* 浏览器列表样式 */
.browser-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.browser-item {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background: #f0fdf4 !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    color: #166534 !important;
    font-weight: 500 !important;
}

/* 内容区域样式 */
.announcement-body p {
    margin: 0 0 16px 0 !important;
}

.announcement-body p:last-child {
    margin-bottom: 0 !important;
}

.announcement-body h3 {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 20px 0 10px 0 !important;
}

.announcement-body h3:first-child {
    margin-top: 0 !important;
}

.announcement-body ul,
.announcement-body ol {
    margin: 10px 0 15px 20px !important;
    padding: 0 !important;
}

.announcement-body li {
    margin: 5px 0 !important;
}

.announcement-body a {
    color: #667eea !important;
    text-decoration: underline !important;
}

.announcement-body a:hover {
    color: #764ba2 !important;
}

/* 底部按钮 */
.announcement-footer {
    padding: 18px 30px 25px 30px !important;
    text-align: center !important;
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb !important;
}

.announcement-btn-close {
    padding: 14px 40px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
    min-width: 150px !important;
}

.announcement-btn-close:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5) !important;
}

.announcement-btn-close:active {
    transform: translateY(0) !important;
}

/* 滚动条样式 */
.announcement-body::-webkit-scrollbar {
    width: 8px;
}

.announcement-body::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.announcement-body::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}

.announcement-body::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}