/*
 * SnipSavers — 全站优惠券样式覆盖 v4
 * 文件位置：wp-content/themes/astra-child/snip-coupon-override.css
 * ─────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   HTML 真实结构（直接子元素）：
   .wpcd-coupon
     ├── .wpcd-col-1-8                  ← 左列：badge + 类型
     ├── .wpcd-coupon-content.wpcd-col-7-8  ← 右侧内容
     │     ├── .wpcd-coupon-header
     │     │     ├── .wpcd-col-3-4     ← 标题
     │     │     └── .wpcd-col-1-4     ← code 按钮
     │     └── .wpcd-extra-content
     │           ├── .wpcd-col-3-4     ← 描述
     │           └── .wpcd-col-1-4     ← 过期日期
     ├── script
     ├── .wpcd-share-buttons-container ← 社交按钮
     └── .wpcd-vote-wrapper            ← 投票/成功率
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 卡片容器 ──────────────────────────────────────────────────────────── */
.wpcd-coupon {
    display: grid !important;
    /* 左列固定84px，右侧内容占满剩余 */
    grid-template-columns: 84px 1fr !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
        "badge  content"
        "badge  share"
        "badge  vote" !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    align-items: start !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
    position: relative !important;
    overflow: visible !important;
}

.wpcd-coupon:hover {
    border-color: #7c3aed !important;
    box-shadow: 0 2px 12px rgba(124,58,237,.10) !important;
}

.wpcd-coupon > .clearfix { display: none !important; }
.wpcd-coupon > script    { display: none !important; }

/* ── 2. 左列：badge + 类型（直接子 .wpcd-col-1-8） ───────────────────────── */
.wpcd-coupon > .wpcd-col-1-8 {
    grid-area: badge !important;
    float: none !important;
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 2px 0 0 !important;
    margin: 0 !important;
    align-self: start !important;
}

.wpcd-coupon > .wpcd-col-1-8 > .wpcd-coupon-discount-text {
    background: #fde047 !important;
    color: #713f12 !important;
    border-radius: 7px !important;
    padding: 7px 6px !important;
    width: 76px !important;
    min-width: 76px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.wpcd-coupon > .wpcd-col-1-8 > .coupon-type {
    background: #7c3aed !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 3px 0 !important;
    width: 76px !important;
    min-width: 76px !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    border: none !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ── 3. 右侧内容区（wpcd-col-7-8 是插件真实 class，必须覆盖其宽度） ─────── */
.wpcd-coupon > .wpcd-coupon-content,
.wpcd-coupon > .wpcd-col-7-8 {
    grid-area: content !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* ── 4. Header 行：标题 + code 按钮 ─────────────────────────────────────── */
.wpcd-coupon .wpcd-coupon-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    overflow: visible !important;
}

/* 标题列（header 内的 3/4 列） */
.wpcd-coupon .wpcd-coupon-header > .wpcd-col-3-4 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* code 按钮列（header 内的 1/4 列） */
.wpcd-coupon .wpcd-coupon-header > .wpcd-col-1-4 {
    flex: 0 0 auto !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── 5. 标题 ─────────────────────────────────────────────────────────────── */
.wpcd-coupon .wpcd-coupon-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    border: none !important;
}

.wpcd-coupon .wpcd-coupon-title a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.wpcd-coupon .wpcd-coupon-title a:hover {
    color: #7c3aed !important;
    text-decoration: underline !important;
}

/* ── 6. Code 按钮 ────────────────────────────────────────────────────────── */
.wpcd-coupon .wpcd-coupon-code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: block !important;
}

.wpcd-coupon .wpcd-btn,
.wpcd-coupon .wpcd-coupon-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
    border: 2px dashed #7c3aed !important;
    border-radius: 7px !important;
    padding: 6px 10px !important;
    color: #7c3aed !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background .15s !important;
    line-height: 1.3 !important;
    float: none !important;
    vertical-align: top !important;
    /* 防止插件 absolute/fixed 定位 */
    position: static !important;
}

.wpcd-coupon .wpcd-btn:hover,
.wpcd-coupon .wpcd-coupon-button:hover {
    background: rgba(124,58,237,.08) !important;
    color: #7c3aed !important;
    text-decoration: none !important;
}

/* 剪刀图标：隐藏 img，改用 ::before */
.wpcd-coupon .wpcd_coupon_icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    position: static !important;
}

.wpcd-coupon .wpcd_coupon_icon img {
    display: none !important;
}

.wpcd-coupon .wpcd_coupon_icon::before {
    content: "✂" !important;
    font-size: 13px !important;
    color: #7c3aed !important;
    line-height: 1 !important;
}

/* ── 7. 描述 + 过期日期行 ────────────────────────────────────────────────── */
.wpcd-coupon .wpcd-extra-content {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    overflow: visible !important;
}

/* 描述列（extra 内的 3/4） */
.wpcd-coupon .wpcd-extra-content > .wpcd-col-3-4 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 过期日期列（extra 内的 1/4） */
.wpcd-coupon .wpcd-extra-content > .wpcd-col-1-4 {
    flex: 0 0 auto !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: right !important;
}

.wpcd-coupon .wpcd-coupon-description {
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wpcd-coupon .wpcd-coupon-description span {
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.55 !important;
}

/* emoji 图片（⚡🔥等）在描述里内联显示，不能 block */
.wpcd-coupon .wpcd-coupon-description img.emoji {
    display: inline !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    vertical-align: -3px !important;
    filter: none !important;
    -webkit-filter: none !important;
}

.wpcd-coupon .wpcd-more-description,
.wpcd-coupon .wpcd-less-description {
    color: #7c3aed !important;
    font-size: 12px !important;
}

.wpcd-coupon .wpcd-coupon-expire {
    font-size: 12px !important;
    color: #9ca3af !important;
    white-space: nowrap !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin-top: 2px !important;
    display: block !important;
    float: none !important;
    width: auto !important;
    position: static !important;
}

/* ── 8. 社交分享（直接子 .wpcd-share-buttons-container） ─────────────────── */
.wpcd-coupon > .wpcd-share-buttons-container {
    grid-area: share !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
    align-self: start !important;
}

.wpcd-coupon .wpcd-share-buttons-container .col-md-12,
.wpcd-coupon .wpcd-share-buttons-container .row {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}

.wpcd-coupon .wpcd-btn-social {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    background: #7c3aed !important;
    border: none !important;
    text-decoration: none !important;
    transition: background .15s, transform .1s !important;
    padding: 6px !important;
    float: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: static !important;
}

.wpcd-coupon .wpcd-btn-social:hover {
    background: #6d28d9 !important;
    transform: scale(1.1) !important;
}

.wpcd-coupon .wpcd-btn-social i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* 社交图标 img：锁定尺寸 + 变白 */
.wpcd-coupon .wpcd-btn-social img.wpcd-svg {
    width: 13px !important;
    height: 13px !important;
    max-width: 13px !important;
    max-height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    display: block !important;
    flex-shrink: 0 !important;
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    object-fit: contain !important;
    position: static !important;
}

/* ── 9. 投票区（直接子 .wpcd-vote-wrapper） ──────────────────────────────── */
.wpcd-coupon > .wpcd-vote-wrapper {
    grid-area: vote !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
    align-self: start !important;
    /* 防止插件把它用 absolute 提出去 */
    position: static !important;
}

/* 成功率文字 */
.wpcd-coupon .wpcd-vote-percent {
    font-size: 12px !important;
    color: #16a34a !important;
    font-weight: 500 !important;
    order: 1 !important;
}

/* 点赞/踩链接 */
.wpcd-coupon .wpcd-vote-up {
    order: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    opacity: .65 !important;
    transition: opacity .15s !important;
    position: static !important;
    float: none !important;
}

.wpcd-coupon .wpcd-vote-down {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    opacity: .65 !important;
    transition: opacity .15s !important;
    position: static !important;
    float: none !important;
}

.wpcd-coupon .wpcd-vote-up:hover,
.wpcd-coupon .wpcd-vote-down:hover {
    opacity: 1 !important;
}

/* tooltip 气泡隐藏 */
.wpcd-coupon .wpcd-tooltip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* thumbs div 容器 */
.wpcd-coupon .wpcd-thumbs-up,
.wpcd-coupon .wpcd-thumbs-down {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
}

/* 点赞/踩图标尺寸锁定，防止被拉伸造成错位 */
.wpcd-coupon .wpcd-thumbs-up img.wpcd-svg,
.wpcd-coupon .wpcd-thumbs-down img.wpcd-svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    min-width: 16px !important;
    display: block !important;
    flex-shrink: 0 !important;
    position: static !important;
    /* 不做 filter，保留原色（绿色 thumbs-up，红色 thumbs-down） */
    filter: none !important;
    -webkit-filter: none !important;
}

/* ── 10. 移动端响应式 ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .wpcd-coupon {
        grid-template-columns: 72px 1fr !important;
        column-gap: 10px !important;
        padding: 14px 12px !important;
    }

    .wpcd-coupon > .wpcd-col-1-8 {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
    }

    .wpcd-coupon > .wpcd-col-1-8 > .wpcd-coupon-discount-text,
    .wpcd-coupon > .wpcd-col-1-8 > .coupon-type {
        width: 68px !important;
        min-width: 68px !important;
    }

    .wpcd-coupon > .wpcd-col-1-8 > .wpcd-coupon-discount-text {
        font-size: 12px !important;
    }

    /* 移动端：code 按钮换行到标题下方 */
    .wpcd-coupon .wpcd-coupon-header {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .wpcd-coupon .wpcd-coupon-header > .wpcd-col-1-4 {
        width: 100% !important;
    }

    .wpcd-coupon .wpcd-btn,
    .wpcd-coupon .wpcd-coupon-button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* 移动端：描述和过期日期各占一行 */
    .wpcd-coupon .wpcd-extra-content {
        flex-direction: column !important;
        gap: 3px !important;
    }

    .wpcd-coupon .wpcd-extra-content > .wpcd-col-1-4 {
        text-align: left !important;
    }

    .wpcd-coupon .wpcd-coupon-title,
    .wpcd-coupon .wpcd-coupon-title a {
        font-size: 14px !important;
    }
}