/* /css/fbywtg_yl.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f5f5f5;
    min-height: 100vh;
}

/* ========== 固定标题栏 ========== */
.page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

    .page-header h1 {
        font-size: 18px;
        color: white;
        font-weight: 600;
        margin: 0;
        flex: 1;
        text-align: center;
    }

        .page-header h1 i {
            margin-right: 8px;
            color: #ffd700;
        }

.back-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s;
}

    .back-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

/* ========== 主内容区域 ========== */
.main-container {
    padding-top: 65px;
    padding-bottom: 30px;
    padding-left: 16px;
    padding-right: 16px;
    max-width: 800px;
    margin: 0 auto;
}

/* ========== 业务通告卡片样式 ========== */
.yw-block {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 头部 - 标题和类型标签在同一行 */
.yw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* 改为不换行 */
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

/* 标题 - 自动占满剩余空间 */
.yw-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    flex: 1;
    line-height: 1.4;
    word-break: break-word;
    min-width: 0; /* 允许收缩 */
}

/* 标题占位符 - 当没有标题时保持布局 */
.yw-title-placeholder {
    flex: 1;
    min-width: 0;
}

/* 类型标签 - 不收缩，始终在右侧 */
.yw-type {
    font-size: 12px;
    color: #667eea;
    background: #f0f0ff;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0; /* 不收缩，始终显示完整 */
}

/* Emoji 图标大小 */
.type-emoji {
    font-size: 14px;
}

/* 不同类型标签的背景色 */
.yw-type.type-zf {
    background: #e8f5e9;
    color: #2e7d32;
}

.yw-type.type-zr {
    background: #e3f2fd;
    color: #1565c0;
}

.yw-type.type-yjh {
    background: #fff3e0;
    color: #e65100;
}

.yw-type.type-lg {
    background: #f3e5f5;
    color: #6a1b9a;
}

.yw-type.type-jz {
    background: #e8eaf6;
    color: #283593;
}

/* 内容区域 */
.yw-content {
    margin-bottom: 15px;
    padding: 8px 0;
}

.content-text {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ========== 媒体区域（左右滑动） ========== */
.yw-media-section {
    margin: 12px 0 0 0;
}

/* 滚动容器样式 - 强制支持水平滚动 */
.media-scroll-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
}

    .media-scroll-wrapper::-webkit-scrollbar {
        height: 4px;
    }

    .media-scroll-wrapper::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 2px;
    }

    .media-scroll-wrapper::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 2px;
    }

/* 滚动内容容器 - 强制横向flex布局 */
.media-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 4px 2px;
    min-width: min-content;
}

/* 媒体项 - 固定宽度，不收缩 */
.media-item {
    flex: 0 0 auto !important;
    position: relative;
    width: 150px !important;
    height: 150px !important;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #f5f5f5;
}

.video-item {
    background: #000;
}

.video-cover {
    position: relative;
    width: 100%;
    height: 100%;
}

    .video-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========== 底部区域 ========== */
.yw-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.publisher-phone {
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .publisher-phone i {
        color: #667eea;
        font-size: 14px;
    }

    .publisher-phone.hidden {
        visibility: hidden;
    }

.submit-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

    .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

/* ========== 操作按钮组（我的发布页面使用） ========== */
.notice-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

.action-btn {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: #f0f0f0;
    color: #666;
}

    .action-btn:hover {
        transform: translateY(-1px);
    }

.action-btn-edit {
    background: #e8f4fd;
    color: #1890ff;
}

    .action-btn-edit:hover {
        background: #d4e8fb;
    }

.action-btn-delete {
    background: #fff0f0;
    color: #ff4757;
}

    .action-btn-delete:hover {
        background: #ffe0e0;
    }

.action-btn i {
    margin-right: 4px;
}

/* ========== 加载和错误提示 ========== */
.loading {
    text-align: center;
    padding: 40px;
    color: #999;
}

.loading-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.error {
    text-align: center;
    padding: 40px;
    color: #f44336;
    background: #fff5f5;
    border-radius: 12px;
    margin: 20px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

    .empty-state i {
        font-size: 60px;
        margin-bottom: 15px;
        opacity: 0.5;
    }

/* ========== 移动端适配 ========== */
@media (max-width: 480px) {
    .page-header {
        padding: 10px 12px;
    }

        .page-header h1 {
            font-size: 16px;
        }

    .back-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .main-container {
        padding: 55px 12px 20px 12px;
    }

    .yw-block {
        padding: 12px;
        margin-bottom: 12px;
    }

    .yw-title {
        font-size: 15px;
    }

    .yw-type {
        font-size: 10px;
        padding: 3px 10px;
    }

    .type-emoji {
        font-size: 12px;
    }

    .content-text {
        font-size: 13px;
    }

    /* 移动端媒体项尺寸 */
    .media-item {
        width: 120px !important;
        height: 120px !important;
    }

    .video-play-icon {
        font-size: 28px;
    }

    .submit-btn {
        padding: 6px 16px;
        font-size: 12px;
    }

    .publisher-phone {
        font-size: 11px;
    }

    /* 移动端操作按钮 */
    .action-btn {
        padding: 4px 10px;
        font-size: 11px;
    }
}

/* ========== 超小屏幕适配 ========== */
@media (max-width: 360px) {
    .media-item {
        width: 100px !important;
        height: 100px !important;
    }

    .video-play-icon {
        font-size: 24px;
    }
}


/* 对外展示开关行样式 */
.notice-show-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
}

.show-label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .show-label i {
        color: #667eea;
    }

.show-hint {
    font-size: 11px;
    color: #999;
    flex: 1;
}

/* 小型开关样式 */
.toggle-switch-small {
    position: relative;
    width: 44px;
    height: 22px;
    flex-shrink: 0;
}

.toggle-input-small {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label-small {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 22px;
}

    .toggle-label-small:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
    }

.toggle-input-small:checked + .toggle-label-small {
    background-color: #667eea;
}

    .toggle-input-small:checked + .toggle-label-small:before {
        transform: translateX(22px);
    }

/* 移动端适配 */
@media (max-width: 480px) {
    .notice-show-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .show-hint {
        width: 100%;
        margin-left: 28px;
    }

    .toggle-switch-small {
        width: 40px;
        height: 20px;
    }

    .toggle-label-small:before {
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
    }

    .toggle-input-small:checked + .toggle-label-small:before {
        transform: translateX(20px);
    }
}