/* 广告位容器：组与组之间上下留白 5px
   （上面那个块下留 5px、下面那个块上留 0，所以两个广告位实际相隔 5px，不会叠加成 10px） */
.wsa-slot {
    width: 100%;
    margin: 0 0 5px;
}
.wsa-slot-inner {
    display: flex;
    gap: 5px;
    width: 100%;
    flex-wrap: wrap;
}
/* 大横幅 - 1张，高70px（售出后自动换行追加新一行） */
.wsa-slot-banner_large .wsa-slot-inner { flex-wrap: wrap; }
.wsa-slot-banner_large .wsa-img-item { width: 100%; height: 70px; }
.wsa-slot-banner_large .wsa-empty-item { width: 100%; height: 70px; }
/* 小横幅 - 2张，高70px（宽度扣除间距，保证一行排满2个） */
.wsa-slot-banner_small .wsa-slot-inner { flex-wrap: wrap; }
.wsa-slot-banner_small .wsa-img-item,
.wsa-slot-banner_small .wsa-empty-item { flex: 1 1 calc(50% - 3px); height: 70px; }
/* 迷你横幅 - 3张，高50px */
.wsa-slot-banner_mini .wsa-slot-inner { flex-wrap: wrap; }
.wsa-slot-banner_mini .wsa-img-item,
.wsa-slot-banner_mini .wsa-empty-item { flex: 1 1 calc(33.333% - 3.34px); height: 50px; }
/* 方块横幅 - 6张，高80px
   ⚠️ 宽度必须扣除格子之间的间距，否则 6 格排不下、第 6 格会被挤到第二行。
   一行 6 格之间有 5 道 gap（5px），共占 25px，所以每格 = 16.6667% - 25px/6 ≈ 16.6667% - 4.2px。
   （只写 16.66% 的话，6 格加起来是 99.96% + 25px，超过容器宽度 → 换行。）
   保留 wrap 是为了兜住一种情况：站长在后台手动把广告放到了第 7 格之后的格子，
   这时不换行会撑破容器；常规情况（正好 6 格）仍是一行排满。
   注意：如果以后调整了 .wsa-slot-inner 的 gap，这里的 4.2px 要跟着改（gap × 5 ÷ 6）。 */
.wsa-slot-banner_block .wsa-slot-inner { flex-wrap: wrap; }
.wsa-slot-banner_block .wsa-img-item,
.wsa-slot-banner_block .wsa-empty-item { flex: 1 1 calc(16.6667% - 4.2px); height: 80px; }
/* 通用图片项
   ⚠️ 格子高度是固定的（见上面各广告位的 height：70 / 70 / 50 / 80px），
      图片也一样：高度跟着格子走、并横向纵向一起拉伸，把整格铺满。
   那个极浅的底色只是兜底 —— 图片还在加载、或加载失败时露出来，
   不至于是一块白洞。正常情况下图片铺满整格，看不见它。 */
.wsa-img-item {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    flex-shrink: 0;
    background: #f6f7f9;
}
.wsa-img-item img {
    width: 100%;
    height: 100%;
    /* fill = 不保持原始宽高比，横向、纵向都直接拉到 100%，把整个格子填满。
       格子多宽就拉多宽、格子多高就拉多高，与广告位尺寸严格一致。
       ✅ 好处：图片完整可见（不裁切）、也不留任何空白，看着就是广告位本身。
       ⚠️ 代价：图片原始比例和格子比例不一致时会被拉伸变形（这是明确的选择，不是 bug）。
       📌 三种写法的区别（按站长的取舍二选一）：
          fill    → 铺满、允许变形（当前选择，v1.4.0）
          contain → 等比完整、四周留白（v1.3.9 用过）
          cover   → 等比铺满、超出部分裁掉（v1.3.8 及以前）
       想换成别的：把下面 object-fit 的值改掉即可，三种都合法。 */
    object-fit: fill;
    display: block;
}
/* ===== 文字广告：彩色色块风 =====
   改前是"白底 + 灰色虚线框"，一排看过去几乎分不出边界，视觉上很平。
   现在每个格子给一个不同的底色、文字用白色，整排连成一个彩色条，
   颜色有对比、也更容易一眼看清"这里有几个格子"。
   ⚠️ 宽度必须扣掉格子之间的间隙，否则一行排不下、最后一个会被挤到第二行。
      一行 4 格之间有 3 道 gap（5px），共 15px，所以每格 = 25% - 15px/4 = 25% - 3.75px。
      （这正是 v1.3.1「方块横幅」踩过的坑：只写 25% 会超宽换行。）
   注意：如果以后调整了 .wsa-slot-inner 的 gap，这里的 3.75px 要跟着改（gap × 3 ÷ 4）。 */
.wsa-slot-text .wsa-slot-inner {
    flex-wrap: wrap;
    /* 整排连着看更像一条彩色横幅，所以这里不留额外的行间距 */
    gap: 5px;
}
.wsa-slot-text .wsa-text-item,
.wsa-slot-text .wsa-empty-item {
    flex: 1 1 calc(25% - 3.75px);
    min-height: 38px;
}

/* —— 已售出的文字广告：实心底色 + 白字 + 悬停统一变红 —— */
.wsa-text-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 6px;
    font-size: 14px;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 3px;
    overflow: hidden;
    transition: background-color 0.3s, box-shadow 0.3s;
    /* 文字太长时用省略号，避免把格子撑高、整排高度参差 */
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* 悬停/键盘聚焦：统一变成橙红色，作为"可点击"的强提示 */
.wsa-text-item:hover,
.wsa-text-item:focus-visible {
    background-color: #ff2805;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 40, 5, 0.35);
    outline: none;
    position: relative;
    z-index: 1;               /* 悬停时盖住相邻格子，阴影才不会被切掉 */
}

/* —— 五种底色，按格子序号循环 ——
   只写 5 条规则，第 6 格往后会自动回到第 1 条（nth-child 是"每 5 个一循环"）。
   这样无论站长把广告位设成几格，都不会出现"某一格没颜色"。
   色值取自常见的扁平化配色，饱和度接近，整排看起来才协调。 */
.wsa-text-item:nth-child(5n + 1) { background-color: #dc3545; }  /* 红 */
.wsa-text-item:nth-child(5n + 2) { background-color: #007bff; }  /* 蓝 */
.wsa-text-item:nth-child(5n + 3) { background-color: #28a745; }  /* 绿 */
.wsa-text-item:nth-child(5n + 4) { background-color: #ffc107; color: #5a4300; }  /* 黄：底太浅，改用深字才看得清 */
.wsa-text-item:nth-child(5n + 5) { background-color: #6f42c1; }  /* 紫 */

/* 悬停时颜色优先级要高于上面的序号底色，所以把 hover 规则放在后面并提高权重 */
.wsa-slot-text .wsa-text-item:hover,
.wsa-slot-text .wsa-text-item:focus-visible {
    background-color: #ff2805;
    color: #fff;
}

/* —— 空位（招租）：轻量化的浅色方块 ——
   不再用虚线框，改成"浅底 + 彩色左边缘"，
   既能和实心广告区分开（一看就知道还没卖出去），又不会显得像报错提示。 */
.wsa-slot-text .wsa-empty-item {
    background: #fafafa;
    border: 1px solid #eee;
    border-left: 3px solid #e74c3c;
    border-radius: 3px;
    flex-direction: row;
    gap: 6px;
    padding: 8px 6px;
    box-sizing: border-box;
}
.wsa-slot-text .wsa-empty-item:hover {
    background: #fff3e0;
    border-color: #f5c6bd;
    border-left-color: #e74c3c;
}
.wsa-slot-text .wsa-empty-text {
    font-size: 13px;
    color: #888;
}
.wsa-slot-text .wsa-empty-price {
    font-size: 11px;
    color: #e74c3c;
    margin-top: 0;
}
/* 空广告位（招租） */
.wsa-empty-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    overflow: hidden;
}
.wsa-empty-item:hover {
    background: #fff3e0;
    border-color: #e74c3c;
}
.wsa-empty-text {
    font-size: 13px;
    color: #999;
    font-weight: 500;
}
.wsa-empty-price {
    font-size: 11px;
    color: #e74c3c;
    margin-top: 2px;
}
/* 移动端适配 */
@media (max-width: 768px) {
    .wsa-slot-banner_small .wsa-slot-inner,
    .wsa-slot-banner_mini .wsa-slot-inner,
    .wsa-slot-banner_block .wsa-slot-inner,
    .wsa-slot-text .wsa-slot-inner {
        flex-wrap: wrap;
    }
    .wsa-slot-banner_small .wsa-img-item,
    .wsa-slot-banner_small .wsa-empty-item { flex: 1 1 48%; height: 60px; }
    .wsa-slot-banner_mini .wsa-img-item,
    .wsa-slot-banner_mini .wsa-empty-item { flex: 1 1 31%; height: 44px; }
    .wsa-slot-banner_block .wsa-img-item,
    .wsa-slot-banner_block .wsa-empty-item { flex: 1 1 31%; height: 60px; }
    /* 手机上一行放 2 格：一行 2 格之间有 1 道 gap（5px），所以每格 = 50% - 2.5px */
    .wsa-slot-text .wsa-text-item,
    .wsa-slot-text .wsa-empty-item { flex: 1 1 calc(50% - 2.5px); min-height: 36px; }
    .wsa-slot-text .wsa-text-item { font-size: 13px; padding: 7px 5px; }
}
/* 购买弹窗 */
.wsa-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}
.wsa-modal {
    background: #fff; border-radius: 10px; padding: 24px;
    width: 90%; max-width: 480px; max-height: 85vh; overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.wsa-modal h3 { margin: 0 0 16px; font-size: 18px; }
.wsa-form-group { margin-bottom: 14px; }
.wsa-form-group label {
    display: block; font-size: 13px; color: #555; margin-bottom: 4px;
}
.wsa-form-group input,
.wsa-form-group select {
    width: 100%; padding: 8px 10px; border: 1px solid #ddd;
    border-radius: 6px; font-size: 14px; box-sizing: border-box;
}

/* 投放时长：点选式卡片（替代原来的下拉框）
   选项数量不固定，用 flex 自动排；一行 3 个有 2 道间隙（8px×2=16px），
   所以每张卡宽度 = calc(33.333% - 5.34px)（即 16px ÷ 3）。
   ⚠️ 同「方块横幅」那类坑：改 gap 必须同步改这个 px 值（gap × 2 ÷ 3）。
   时长选项一般是 3 个（7/30/90 天），所以按一行 3 格设计；
   如果站长配了更多，会自动折行，不会挤变形。 */
.wsa-durations {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wsa-duration {
    flex: 1 1 calc(33.333% - 5.34px);
    /* 窄屏时不要缩到看不清，缩不下就自动换行 */
    min-width: 92px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 9px 8px 8px;
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-family: inherit;              /* 覆盖浏览器给 button 的默认字体 */
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.wsa-duration:hover {
    border-color: #f0a89e;
    background: #fffafa;
}
.wsa-duration:focus-visible {
    outline: 2px solid #e74c3c;
    outline-offset: 2px;
}
/* 天数：主信息，字号大一点、颜色深一点 */
.wsa-duration-days {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
/* 价格：次要信息，紧跟在天数下面 */
.wsa-duration-price {
    font-size: 12px;
    color: #999;
}
/* 选中态：红色描边 + 浅红底 + 右上角勾选角标（与支付方式卡片保持同一套视觉） */
.wsa-duration.checked {
    border-color: #e74c3c;
    background: #fdf2f0;
    box-shadow: 0 0 0 1px #e74c3c inset;
}
.wsa-duration.checked .wsa-duration-days { color: #c0392b; }
.wsa-duration.checked .wsa-duration-price { color: #e74c3c; }
.wsa-duration-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid #ddd;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.wsa-duration.checked .wsa-duration-check {
    border-color: #e74c3c;
    background: #e74c3c;
}
/* 用 CSS 画对勾（与支付方式卡片同一个做法，省掉一张图片） */
.wsa-duration.checked .wsa-duration-check::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 支付方式：点选式卡片（替代原来的下拉框）
   选项数量不固定，用 flex 自动排：2 个并排一行，3 个就 2+1 自动折行。 */
.wsa-pay-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wsa-pay-method {
    /* flex-basis 用 calc 扣掉间距：一行 2 个有 1 道间隙，所以每张卡扣 4px（即 8px ÷ 2） */
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 26px 12px 10px;      /* 右侧多留出 26px 给勾选角标 */
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    font-family: inherit;              /* 覆盖浏览器给 button 的默认字体 */
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.wsa-pay-method:hover {
    border-color: #f0a89e;
    background: #fffafa;
}
.wsa-pay-method:focus-visible {
    outline: 2px solid #e74c3c;
    outline-offset: 2px;
}
/* 选中态：红色描边 + 浅红底 + 文字加粗 + 右上角勾选角标 */
.wsa-pay-method.checked {
    border-color: #e74c3c;
    background: #fdf2f0;
    box-shadow: 0 0 0 1px #e74c3c inset;
}
.wsa-pay-method.checked .wsa-pay-method-name {
    color: #c0392b;
    font-weight: 600;
}
/* 勾选角标：默认空的小圆圈，选中后变成实心对勾 */
.wsa-pay-method-check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #ddd;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.wsa-pay-method.checked .wsa-pay-method-check {
    border-color: #e74c3c;
    background: #e74c3c;
}
/* 用 CSS 画对勾，省掉一张图片、也免去额外请求 */
.wsa-pay-method.checked .wsa-pay-method-check::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.wsa-preview {
    margin: 12px 0; padding: 10px; background: #f5f5f5;
    border-radius: 6px; text-align: center; min-height: 60px;
}
.wsa-preview img {
    max-width: 100%; max-height: 70px; object-fit: contain;
}
.wsa-btn {
    display: block; width: 100%; padding: 10px;
    background: #e74c3c; color: #fff; border: none;
    border-radius: 6px; font-size: 15px; cursor: pointer;
    text-align: center; text-decoration: none;
}
.wsa-btn:hover { background: #c0392b; }
.wsa-btn-close {
    background: #eee; color: #333; margin-top: 8px;
}