/* ============================================================
   WP Coupon Deals v7  –  Mobile-first
   Light/Dark: .wcd-light / .wcd-dark on every .wcd-card
   ============================================================ */

.wcd-card, .wcd-card * { box-sizing: border-box; }

/* ── CSS variables ── */
.wcd-light {
    --bg:        #ffffff;
    --bg2:       #f5f7fa;
    --border:    #e2e6ea;
    --text:      #0d0d0d;
    --sub:       #505060;
    --meta:      #909090;
    --code-bg:   #f0f2f5;
    --code-bdr:  #c4c8d0;
    --code-col:  #0d0d0d;
    --hide-bg:   #f0f2f5;
    --hide-bdr:  #d0d4da;
    --shadow:    0 2px 12px rgba(0,0,0,.07);
    --shadow-h:  0 6px 28px rgba(0,0,0,.13);
}
.wcd-dark {
    --bg:        #111827;
    --bg2:       #1a2235;
    --border:    #1f2d45;
    --text:      #f1f5f9;
    --sub:       #94a3b8;
    --meta:      #64748b;
    --code-bg:   #0d1525;
    --code-bdr:  #1e3050;
    --code-col:  #f1f5f9;
    --hide-bg:   #162032;
    --hide-bdr:  #1e3050;
    --shadow:    0 2px 16px rgba(0,0,0,.5);
    --shadow-h:  0 8px 32px rgba(0,0,0,.65);
}

/* ── Grid ── */
.wcd-wrap    { margin: 1rem 0; width: 100%; }
.wcd-heading { font-size: 1.3rem; font-weight: 700; margin: 0 0 1rem; }
.wcd-grid    { display: grid; gap: 14px; }
.wcd-cols-1  { grid-template-columns: 1fr; }
.wcd-cols-2  { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wcd-cols-3  { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.wcd-empty, .wcd-err { color: #c0392b; font-weight: 600; }

/* ── Base card ── */
.wcd-card {
    position:      relative;
    background:    var(--bg);
    border:        1px solid var(--border);
    border-radius: 16px;
    box-shadow:    var(--shadow);
    overflow:      hidden;
    width:         100%;
    font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition:    box-shadow .2s ease, transform .18s ease;
}
.wcd-card:hover    { box-shadow: var(--shadow-h); transform: translateY(-2px); }
.wcd-card.wcd-expired  { opacity: .55; pointer-events: none; }
.wcd-card.wcd-featured { border-width: 2px; }

/* ============================================================
   CARD THEME
   ============================================================ */
.wcd-card.wcd-card {
    padding:        1.1rem 1.2rem 1.2rem;
    display:        flex;
    flex-direction: column;
    gap:            0;
}

/* Badge */
.wcd-badge {
    position: absolute; top: 0; left: 1rem;
    color: #fff; font-size: 10px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 4px 13px; border-radius: 0 0 10px 10px;
}
.wcd-badge + .wcd-card-top { margin-top: 1.6rem !important; }

/* Top row */
.wcd-card-top {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 8px;
    flex-wrap: wrap; margin: .5rem 0 .4rem;
}
.wcd-discount {
    font-size: 1.65rem; font-weight: 800;
    color: var(--text); line-height: 1;
    letter-spacing: -.02em; word-break: break-word;
}
.wcd-type-pill {
    font-size: 10px; font-weight: 700;
    padding: 4px 10px; border-radius: 99px;
    white-space: nowrap; flex-shrink: 0; align-self: center;
}
.wcd-type-pill--code { background: #dcfce7; color: #15803d; }
.wcd-type-pill--deal { background: #dbeafe; color: #1d4ed8; }
.wcd-dark .wcd-type-pill--code { background: #052e16; color: #4ade80; }
.wcd-dark .wcd-type-pill--deal { background: #0c1a40; color: #60a5fa; }

.wcd-title {
    font-size: .94rem; font-weight: 700;
    color: var(--text); line-height: 1.4;
    margin: .3rem 0 .2rem;
}
.wcd-desc {
    font-size: .82rem; color: var(--sub);
    line-height: 1.55; margin: 0 0 .65rem;
}

/* Tags */
.wcd-tags    { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .85rem; }
.wcd-tag     { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.wcd-tag-uses    { background: #fff7ed; color: #c2410c; }
.wcd-tag-exp     { background: #f3f4f6; color: #4b5563; }
.wcd-tag-expired { background: #fef2f2; color: #b91c1c; }
.wcd-dark .wcd-tag-uses    { background: #431407; color: #fb923c; }
.wcd-dark .wcd-tag-exp     { background: #1e293b; color: #94a3b8; }
.wcd-dark .wcd-tag-expired { background: #3b0000; color: #f87171; }

/* ── BEFORE REVEAL ──────────────────────────── */
.wcd-reveal-area {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
}

/* Show Coupon Code — full-width button */
.wcd-show-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    min-height:      52px;
    border:          none;
    border-radius:   10px;
    color:           #fff;
    font-size:       .95rem;
    font-weight:     700;
    cursor:          pointer;
    font-family:     inherit;
    letter-spacing:  .01em;
    touch-action:    manipulation;
    transition:      filter .15s, transform .1s;
}
.wcd-show-btn:hover  { filter: brightness(1.08); }
.wcd-show-btn:active { transform: scale(.98); filter: brightness(.94); }

/* Hidden code placeholder box — shows dots, NOT the real code */
.wcd-hidden-code-box {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--hide-bg);
    border:          1.5px dashed var(--hide-bdr);
    border-radius:   8px;
    padding:         10px 14px;
    margin-top:      8px;
    margin-bottom:   .9rem;
    cursor:          pointer;
}
.wcd-dots {
    font-family:   'Courier New', monospace;
    font-size:     1.1rem;
    font-weight:   800;
    letter-spacing:.2em;
    color:         var(--meta);
    user-select:   none;
    pointer-events:none;
}
.wcd-reveal-hint {
    font-size:  11px;
    color:      var(--meta);
    font-style: italic;
    white-space:nowrap;
    margin-left:8px;
}

/* ── AFTER REVEAL ───────────────────────────── */
.wcd-after { display: flex; flex-direction: column; gap: 8px; }

.wcd-code-row {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    var(--code-bg);
    border:        1.5px dashed var(--code-bdr);
    border-radius: 10px;
    padding:       10px 12px;
}
.wcd-code-val {
    flex:          1;
    font-family:   'Courier New', monospace;
    font-size:     1rem;
    font-weight:   800;
    letter-spacing:.1em;
    color:         var(--code-col);
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.wcd-copy-btn {
    flex-shrink:  0;
    display:      inline-flex;
    align-items:  center;
    gap:          5px;
    background:   #fff;
    border:       1.5px solid #d1d5db;
    border-radius:7px;
    padding:      7px 13px;
    font-size:    12px;
    font-weight:  700;
    color:        #2563eb;
    cursor:       pointer;
    font-family:  inherit;
    min-height:   36px;
    touch-action: manipulation;
    transition:   background .15s, border-color .15s, color .15s;
}
.wcd-copy-btn:hover    { background: #eff6ff; border-color: #2563eb; }
.wcd-copy-btn.wcd-copied { background: #f0fdf4; border-color: #16a34a; color: #16a34a; }
.wcd-dark .wcd-copy-btn { background: var(--code-bg); border-color: var(--code-bdr); color: #60a5fa; }

.wcd-ok-msg {
    font-size:  .78rem; color: #16a34a;
    font-weight:600; text-align: center;
    padding: 2px 0; display: none;
}

/* Go to Store */
.wcd-goto-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none !important;
    color:           #fff !important;
    border-radius:   10px;
    padding:         11px 16px;
    font-size:       .9rem;
    font-weight:     700;
    min-height:      48px;
    touch-action:    manipulation;
    transition:      filter .15s, transform .1s;
}
.wcd-goto-btn:hover  { filter: brightness(1.08); transform: translateY(-1px); color: #fff !important; }

/* Deal button */
.wcd-deal-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none !important;
    color:           #fff !important;
    border-radius:   10px;
    padding:         13px 16px;
    font-size:       .92rem;
    font-weight:     700;
    min-height:      52px;
    margin-top:      auto;
    touch-action:    manipulation;
    transition:      filter .15s, transform .1s;
}
.wcd-deal-btn:hover  { filter: brightness(1.08); transform: translateY(-1px); color: #fff !important; }

/* ============================================================
   MINIMAL THEME
   Desktop: info LEFT | action RIGHT (auto width, not fixed)
   Mobile:  info TOP  | action BOTTOM (stacked)
   ============================================================ */
.wcd-card.wcd-minimal {
    flex-direction: row !important;
    align-items:    stretch !important;
    padding:        0 !important;
    gap:            0 !important;
}
.wcd-card.wcd-minimal.wcd-featured { border-left: 4px solid; }

/* Info panel — takes remaining space */
.wcd-min-info {
    flex:     1;
    min-width:0;
    padding:  .9rem 1rem .9rem 1.1rem;
    display:  flex;
    flex-direction: column;
    justify-content:center;
    gap:      3px;
}
.wcd-min-discount {
    font-size:  1.2rem; font-weight: 800;
    color: var(--text); line-height: 1.1;
}
.wcd-min-title {
    font-size:  .86rem; font-weight: 700; color: var(--text);
    line-height:1.35; word-break: break-word;
}
.wcd-min-desc {
    font-size:  .76rem; color: var(--sub);
    line-height:1.4; word-break: break-word;
}
.wcd-min-tags { margin-top: 4px; margin-bottom: 0; }

/* Action panel — auto width, min 160px, max 220px */
.wcd-min-action {
    flex-shrink:    0;
    width:          clamp(160px, 30%, 220px);
    border-left:    1px solid var(--border);
    background:     var(--bg2);
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    justify-content:center;
    padding:        .85rem;
    gap:            7px;
}

/* Show Code button — minimal */
.wcd-min-show-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    width:           100%;
    min-height:      44px;
    border:          none;
    border-radius:   8px;
    color:           #fff;
    font-size:       .82rem;
    font-weight:     700;
    cursor:          pointer;
    font-family:     inherit;
    white-space:     nowrap;
    touch-action:    manipulation;
    transition:      filter .15s, transform .1s;
    padding:         0 10px;
}
.wcd-min-show-btn:hover  { filter: brightness(1.08); }
.wcd-min-show-btn:active { transform: scale(.97); }

/* Hidden dots — minimal */
.wcd-min-hidden-box {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--hide-bg);
    border:          1.5px dashed var(--hide-bdr);
    border-radius:   6px;
    padding:         6px 8px;
}
.wcd-min-hidden-box .wcd-dots {
    font-size:     .82rem;
    letter-spacing:.15em;
    text-align:    center;
}

/* Minimal after-reveal */
.wcd-min-after  { display: flex; flex-direction: column; gap: 5px; }
.wcd-min-code-row { padding: 7px 9px; border-radius: 7px; flex-wrap: wrap; gap: 5px; }
.wcd-min-code-row .wcd-code-val { font-size: .8rem; flex: 1 1 60px; }
.wcd-min-copy { min-height: 30px; padding: 4px 9px; font-size: 11px; }
.wcd-min-ok   { font-size: .72rem; }

/* Go to Store — minimal */
.wcd-min-goto-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none !important;
    color:           #fff !important;
    border-radius:   8px;
    padding:         9px 10px;
    font-size:       .82rem;
    font-weight:     700;
    min-height:      38px;
    text-align:      center;
    touch-action:    manipulation;
    transition:      filter .15s;
}
.wcd-min-goto-btn:hover { filter: brightness(1.08); color: #fff !important; }

/* Deal button — minimal */
.wcd-min-deal-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none !important;
    color:           #fff !important;
    border-radius:   8px;
    padding:         11px 10px;
    font-size:       .85rem;
    font-weight:     700;
    min-height:      44px;
    text-align:      center;
    touch-action:    manipulation;
    transition:      filter .15s;
}
.wcd-min-deal-btn:hover { filter: brightness(1.08); color: #fff !important; }

/* ============================================================
   MOBILE ≤ 640px
   ============================================================ */
@media (max-width: 640px) {
    .wcd-cols-2, .wcd-cols-3 { grid-template-columns: 1fr; }

    /* Card theme */
    .wcd-card     { border-radius: 12px; }
    .wcd-discount { font-size: 1.3rem; }
    .wcd-show-btn { min-height: 50px; font-size: .9rem; }
    .wcd-deal-btn { min-height: 50px; font-size: .88rem; }
    .wcd-goto-btn { min-height: 48px; }

    /* Minimal → stack vertically */
    .wcd-card.wcd-minimal {
        flex-direction: column !important;
    }
    .wcd-min-info {
        padding:       .85rem 1rem .8rem;
        border-bottom: 1px solid var(--border);
    }
    .wcd-min-action {
        width:      100% !important;
        border-left:none !important;
        padding:    .85rem 1rem 1rem;
    }
    .wcd-min-show-btn { min-height: 48px; font-size: .85rem; }
    .wcd-min-deal-btn { min-height: 48px; font-size: .86rem; }
    .wcd-min-goto-btn { min-height: 44px; }
}

/* ============================================================
   EXTRA SMALL ≤ 380px
   ============================================================ */
@media (max-width: 380px) {
    .wcd-card     { border-radius: 10px; }
    .wcd-discount { font-size: 1.15rem; }
    .wcd-show-btn { font-size: .85rem; min-height: 48px; }
    .wcd-deal-btn { font-size: .82rem; }
}

/* ── Device Visibility (CSS backup — server-side is primary filter) ── */
@media (min-width: 769px) {
    .wcd-mobile-only  { display: none !important; }
}
@media (max-width: 768px) {
    .wcd-desktop-only { display: none !important; }
}