/**
 * 弹窗广告位 - 前台样式
 * @package tcad_tanchuang
 * @version 2.1.0
 * 原则：仅 .tcad- 前缀类名，避免污染外部样式
 */

/* 弹窗基础容器 */
.tcad-layer {
    display: none;
    position: fixed;
    z-index: 99990;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    overflow: hidden;
}
.tcad-layer-inner { max-width: 100%; }
.tcad-layer-inner img { display: block; max-width: 100%; height: auto; }

/* 右下角 */
.tcad-popup-right { right: 0; bottom: 0; max-width: 320px; }
/* 左下角 */
.tcad-popup-left { left: 0; bottom: 0; max-width: 320px; }
/* 中间弹窗 */
.tcad-popup-center { top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 600px; }

@media (max-width: 640px) {
    .tcad-popup-center { max-width: 90vw; }
    .tcad-popup-right, .tcad-popup-left { max-width: 260px; }
}
@media (max-width: 480px) {
    .tcad-popup-right, .tcad-popup-left { max-width: 200px; }
}

/* 广告标识文字 & 关闭按钮 */
.tcad-tips {
    position: absolute; right: 10px; top: 5px;
    display: flex; align-items: center; gap: 6px;
    line-height: 22px; font-size: 12px;
    background-color: rgba(0, 0, 0, 0.15); color: #fff;
    padding: 0 5px; border-radius: 2px; z-index: 10;
}
.tcad-tips-text { white-space: nowrap; }
.tcad-tips .tcad-close {
    cursor: pointer; font-size: 16px; font-weight: bold;
    line-height: 1; opacity: 0.85; transition: opacity 0.15s;
}
.tcad-tips .tcad-close:hover { opacity: 1; color: #ff4444; }

/* 后台管理页辅助 */
.tcad-hint { color: #999; font-size: 12px; margin-left: 8px; }
.tcad-center { text-align: center; vertical-align: middle; }

/* CSS Grid 卡片布局 */
.tcad-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tcad-cards .tcad-card-full { grid-column: 1 / -1; }
@media (max-width: 900px) { .tcad-cards { grid-template-columns: 1fr; } }

.tcad-card { background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
.tcad-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff; padding: 7px 14px; font-size: 13px; font-weight: 600;
}
.tcad-card-header.alt { background: linear-gradient(135deg, #f0a040 0%, #e08030 100%); }
.tcad-card-body { padding: 10px 14px; }

/* 表单字段行 */
.tcad-field { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.tcad-field:last-child { margin-bottom: 0; }
.tcad-field-label { font-size: 12px; color: #666; flex-shrink: 0; min-width: 80px; }
.tcad-field > input[type="text"], .tcad-field > input[type="number"], .tcad-field > select { flex: 1; min-width: 100px; }
.tcad-field > textarea { flex: 1; min-width: 200px; }

/* 弹窗项子卡片 */
.tcad-popup-item { background: #fafafa; border: 1px solid #eee; border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.tcad-popup-item:last-child { margin-bottom: 0; }
.tcad-popup-title { font-weight: 600; font-size: 13px; color: #444; margin-bottom: 6px; }
.tcad-popup-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 5px; }
.tcad-popup-row:last-child { margin-bottom: 0; }
.tcad-popup-row .tcad-field-label { min-width: auto; margin-right: 2px; }

/* Toggle 开关 */
#tcad-form input.checkbox {
    width: 46px; height: 26px; border-radius: 13px; text-align: center;
    font-weight: bold; font-size: 12px; border: none; cursor: pointer;
    padding: 0; line-height: 26px; transition: background 0.3s, box-shadow 0.2s;
    vertical-align: middle; color: #fff; outline: none; box-sizing: border-box;
}
#tcad-form input.checkbox[value="1"] { background: #4CAF50; box-shadow: 0 0 4px rgba(76,175,80,0.3); }
#tcad-form input.checkbox[value="0"] { background: #bbb; }
#tcad-form input.checkbox:hover { box-shadow: 0 0 0 3px rgba(76,175,80,0.15); }
#tcad-form input.checkbox[value="0"]:hover { box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }

/* 提交按钮 */
#tcad-form input[type="submit"] { padding: 8px 28px; font-size: 14px; border-radius: 4px; cursor: pointer; height: auto; line-height: normal; }

/* 输入框 */
#tcad-form input[type="text"], #tcad-form input[type="number"], #tcad-form select, #tcad-form textarea {
    border: 1px solid #d0d0d0; border-radius: 3px; padding: 4px 8px; transition: border-color 0.2s;
}
#tcad-form input[type="text"]:focus, #tcad-form input[type="number"]:focus,
#tcad-form select:focus, #tcad-form textarea:focus {
    border-color: #667eea; outline: none; box-shadow: 0 0 0 2px rgba(102,126,234,0.15);
}

/* 文本模式：公告风格 */
.tcad-text-mode { background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); overflow: hidden; min-width: 300px; max-width: 500px; }
.tcad-text-mode.tcad-popup-center { max-width: 500px; }
.tcad-text-mode.tcad-popup-right, .tcad-text-mode.tcad-popup-left { max-width: 320px; }
.tcad-announce { display: flex; flex-direction: column; }

.tcad-announce-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff; font-size: 14px; font-weight: 600; border-radius: 8px 8px 0 0;
}
.tcad-announce-title { flex: 1; letter-spacing: 0.5px; min-width: 0; }
.tcad-announce-actions { display: inline-flex; align-items: baseline; flex-shrink: 0; gap: 6px; }
.tcad-announce-tips { font-size: 12px; opacity: 0.75; white-space: nowrap; line-height: 1; }
.tcad-announce-close {
    cursor: pointer; font-size: 20px; font-weight: bold; line-height: 1;
    opacity: 0.8; padding: 0 2px; transition: opacity 0.15s, transform 0.15s; flex-shrink: 0;
}
.tcad-announce-close:hover { opacity: 1; transform: scale(1.2); }
.tcad-announce-body {
    padding: 20px 16px; line-height: 1.8; font-size: 14px; color: #333;
    word-break: break-word; max-height: 60vh; overflow-y: auto;
}
.tcad-announce-body p { margin: 0 0 8px 0; }
.tcad-announce-body p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .tcad-text-mode { min-width: auto; max-width: 90vw !important; }
    .tcad-text-mode.tcad-popup-right, .tcad-text-mode.tcad-popup-left { max-width: 260px !important; }
    .tcad-announce-body { max-height: 50vh; font-size: 13px; }
}