/* ==============================================
   WP Coupon Deals v2.1 — Mobile Optimized
   Card color: controlled by .wcd-bg-dark / .wcd-bg-light
   ============================================== */

/* ---- CSS variables (set by PHP via inline style on body or wrapper) ---- */
:root {
    --wcd-card-bg:       #ffffff;
    --wcd-card-border:   #e5e5e5;
    --wcd-card-text:     #111111;
    --wcd-card-subtext:  #555555;
    --wcd-card-meta:     #888888;
    --wcd-code-bg:       #f7f7f7;
    --wcd-code-border:   #bbbbbb;
    --wcd-code-text:     #111111;
    --wcd-copy-bg:       #ffffff;
    --wcd-copy-border:   #cccccc;
    --wcd-copy-color:    #004C91;
}

/* ---- Dark card scheme ---- */
.wcd-scheme-dark {
    --wcd-card-bg:       #1a1a2e;
    --wcd-card-border:   #2e2e4a;
    --wcd-card-text:     #f0f0f0;
    --wcd-card-subtext:  #b0b0c8;
    --wcd-card-meta:     #8888aa;
    --wcd-code-bg:       #12122a;
    --wcd-code-border:   #3a3a5a;
    --wcd-code-text:     #f0f0f0;
    --wcd-copy-bg:       #22223a;
    --wcd-copy-border:   #4a4a6a;
    --wcd-copy-color:    #7db8f7;
}

/* ---- Grid wrapper ---- */
.wcd-wrap         { margin: 1rem 0; box-sizing: border-box; width: 100%; }
.wcd-section-title{ font-size: 1.3rem; font-weight: 700; margin: 0 0 .9rem; }
.wcd-grid         { display: grid; gap: 14px; }
.wcd-cols-1       { grid-template-columns: 1fr; }
.wcd-cols-2       { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wcd-cols-3       { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wcd-empty        { color: #888; font-style: italic; }

/* =============================================
   THEME 1 — CARD
   ============================================= */
.wcd-theme-card {
    background:    var(--wcd-card-bg);
    border:        1px solid var(--wcd-card-border);
    border-radius: 12px;
    padding:       1rem;
    position:      relative;
    display:       flex;
    flex-direction:column;
    transition:    box-shadow .18s, transform .15s;
    box-sizing:    border-box;
    width:         100%;
}
.wcd-theme-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
    transform:  translateY(-1px);
}
.wcd-theme-card.wcd-featured { border: 2px solid #004C91; }
.wcd-theme-card.wcd-expired  { opacity: .6; }

/* Badge */
.wcd-theme-card .wcd-badge {
    position:      absolute;
    top: -1px; left: .9rem;
    color:         #fff;
    font-size:     10px;
    font-weight:   700;
    letter-spacing:.05em;
    text-transform:uppercase;
    padding:       3px 10px;
    border-radius: 0 0 7px 7px;
    max-width:     calc(100% - 1.8rem);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* Card top */
.wcd-theme-card .wcd-card-top {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    margin:          .5rem 0 .35rem;
    gap:             8px;
    flex-wrap:       wrap;
}
.wcd-theme-card .wcd-badge + .wcd-card-top { margin-top: 1.2rem; }

.wcd-theme-card .wcd-discount {
    font-size:  1.5rem;
    font-weight:800;
    color:      var(--wcd-card-text);
    line-height:1.1;
    word-break: break-word;
}

/* Type tag */
.wcd-type-tag {
    font-size:   10px;
    font-weight: 700;
    padding:     3px 9px;
    border-radius:99px;
    white-space: nowrap;
    align-self:  flex-start;
    flex-shrink: 0;
}
.wcd-tag-code { background:#e1f5ee; color:#0f6e56; }
.wcd-tag-deal { background:#e6f1fb; color:#185fa5; }

/* Title & desc */
.wcd-theme-card .wcd-title {
    font-size:  .92rem;
    font-weight:700;
    color:      var(--wcd-card-text);
    margin:     .3rem 0 .2rem;
    line-height:1.4;
}
.wcd-theme-card .wcd-desc {
    font-size:  .82rem;
    color:      var(--wcd-card-subtext);
    line-height:1.5;
    margin:     0 0 .75rem;
}

/* Code box */
.wcd-theme-card .wcd-code-box {
    display:      flex;
    align-items:  center;
    gap:          6px;
    background:   var(--wcd-code-bg);
    border:       1.5px dashed var(--wcd-code-border);
    border-radius:7px;
    padding:      7px 10px;
    margin-bottom:.7rem;
    min-width:    0;
}
.wcd-code-text {
    font-family: 'Courier New', monospace;
    font-size:   .9rem;
    font-weight: 800;
    color:       var(--wcd-code-text);
    letter-spacing:.08em;
    flex:        1;
    min-width:   0;
    overflow:    hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.wcd-copy-btn {
    display:      inline-flex;
    align-items:  center;
    gap:          4px;
    background:   var(--wcd-copy-bg);
    border:       1px solid var(--wcd-copy-border);
    border-radius:6px;
    padding:      5px 9px;
    font-size:    11px;
    font-weight:  700;
    color:        var(--wcd-copy-color);
    cursor:       pointer;
    white-space:  nowrap;
    flex-shrink:  0;
    transition:   background .15s, border-color .15s;
    font-family:  inherit;
    touch-action: manipulation;
    min-height:   32px;
}
.wcd-copy-btn:hover  { background:#eaf3ff; border-color:#004C91; }
.wcd-copy-btn.copied { background:#e1f5ee; border-color:#0f6e56; color:#0f6e56; }

/* Meta row */
.wcd-theme-card .wcd-meta {
    display:         flex;
    justify-content: space-between;
    font-size:       11px;
    color:           var(--wcd-card-meta);
    margin-bottom:   .75rem;
    flex-wrap:       wrap;
    gap:             4px;
    align-items:     center;
}
.wcd-uses strong   { color:#D85A30; }
.wcd-expired-text  { color:#dc3232; font-weight:700; }

/* CTA button */
.wcd-cta {
    display:     block;
    text-align:  center;
    color:       #fff !important;
    text-decoration:none !important;
    border-radius:8px;
    padding:     10px 14px;
    font-size:   .88rem;
    font-weight: 700;
    margin-top:  auto;
    line-height: 1.3;
    transition:  filter .15s;
    touch-action:manipulation;
    min-height:  42px;
    display:     flex;
    align-items: center;
    justify-content:center;
}
.wcd-cta:hover { filter:brightness(1.1); color:#fff !important; }

/* =============================================
   THEME 2 — MINIMAL (horizontal strip)
   ============================================= */
.wcd-theme-minimal {
    background:    var(--wcd-card-bg);
    border:        1px solid var(--wcd-card-border);
    border-radius: 10px;
    padding:       .8rem 1rem;
    display:       flex;
    align-items:   center;
    gap:           .8rem;
    transition:    box-shadow .18s;
    box-sizing:    border-box;
    width:         100%;
}
.wcd-theme-minimal:hover    { box-shadow:0 3px 14px rgba(0,0,0,.09); }
.wcd-theme-minimal.wcd-featured { border-left:4px solid #004C91; }
.wcd-theme-minimal.wcd-expired  { opacity:.6; }

.wcd-min-left  { flex:1; min-width:0; }
.wcd-min-right {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            5px;
    flex-shrink:    0;
    max-width:      48%;
}

.wcd-min-discount {
    font-size:  1.15rem;
    font-weight:800;
    color:      var(--wcd-card-text);
    line-height:1.1;
}
.wcd-min-title {
    font-size:     .85rem;
    font-weight:   700;
    color:         var(--wcd-card-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin-top:    2px;
}
.wcd-min-desc {
    font-size:     .75rem;
    color:         var(--wcd-card-subtext);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin-top:    2px;
}

/* Minimal code */
.wcd-min-code {
    display:      flex;
    align-items:  center;
    gap:          5px;
    background:   var(--wcd-code-bg);
    border:       1.5px dashed var(--wcd-code-border);
    border-radius:6px;
    padding:      4px 8px;
    max-width:    100%;
}
.wcd-min-code .wcd-code-text { font-size:.8rem; letter-spacing:.06em; }
.wcd-min-code .wcd-copy-btn  {
    font-size:11px; padding:3px 8px;
    color:#fff; border:none; border-radius:5px;
    min-height:28px;
}

/* Minimal CTA */
.wcd-min-cta {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    color:          #fff !important;
    text-decoration:none !important;
    border-radius:  7px;
    padding:        7px 12px;
    font-size:      .8rem;
    font-weight:    700;
    white-space:    nowrap;
    transition:     filter .15s;
    touch-action:   manipulation;
    min-height:     34px;
    max-width:      100%;
    text-align:     center;
}
.wcd-min-cta:hover { filter:brightness(1.1); }

.wcd-min-expiry            { font-size:10px; color:var(--wcd-card-meta); white-space:nowrap; }
.wcd-min-expiry.wcd-expired-text { color:#dc3232; font-weight:700; }

/* =============================================
   MOBILE  ≤ 640px
   ============================================= */
@media (max-width: 640px) {

    /* Force single column on small screens */
    .wcd-cols-2,
    .wcd-cols-3 { grid-template-columns: 1fr; }

    /* Card theme */
    .wcd-theme-card          { padding: .85rem .9rem; border-radius:10px; }
    .wcd-theme-card .wcd-discount { font-size:1.3rem; }
    .wcd-theme-card .wcd-title    { font-size:.88rem; }
    .wcd-theme-card .wcd-desc     { font-size:.8rem; }

    /* Code box — tighter on mobile */
    .wcd-theme-card .wcd-code-box { padding:6px 9px; }
    .wcd-code-text                { font-size:.82rem; letter-spacing:.05em; }
    .wcd-copy-btn                 { font-size:11px; padding:5px 9px; }

    /* CTA button — full width, comfortable tap target */
    .wcd-cta {
        font-size:  .85rem;
        padding:    11px 12px;
        min-height: 44px;       /* Apple/Google recommended tap target */
        border-radius:8px;
    }

    /* Minimal theme — stack on mobile */
    .wcd-theme-minimal {
        flex-direction: column;
        align-items:    flex-start;
        padding:        .85rem .9rem;
        gap:            .6rem;
    }
    .wcd-min-right {
        align-items: flex-start;
        max-width:   100%;
        width:       100%;
        flex-direction:row;
        flex-wrap:  wrap;
        gap:        6px;
    }
    .wcd-min-cta {
        flex:     1;
        min-width:120px;
        font-size:.82rem;
        padding:  9px 10px;
        min-height:40px;
    }
    .wcd-min-code {
        flex:     1;
        min-width:0;
        max-width:none;
    }
    .wcd-min-title,
    .wcd-min-desc { white-space:normal; }
    .wcd-min-discount { font-size:1.05rem; }
}

/* =============================================
   VERY SMALL  ≤ 380px
   ============================================= */
@media (max-width: 380px) {
    .wcd-theme-card          { padding:.75rem .8rem; }
    .wcd-theme-card .wcd-discount { font-size:1.15rem; }
    .wcd-cta                 { font-size:.82rem; }
    .wcd-theme-card .wcd-card-top { flex-direction:column; gap:4px; }
    .wcd-min-right           { flex-direction:column; }
    .wcd-min-cta             { width:100%; }
}

/* =============================================
   SYSTEM DARK MODE (only if no manual scheme set)
   ============================================= */
@media (prefers-color-scheme: dark) {
    .wcd-theme-card:not([class*="wcd-scheme"]),
    .wcd-theme-minimal:not([class*="wcd-scheme"]) {
        --wcd-card-bg:      #1e1e1e;
        --wcd-card-border:  #333;
        --wcd-card-text:    #f0f0f0;
        --wcd-card-subtext: #aaa;
        --wcd-card-meta:    #888;
        --wcd-code-bg:      #2a2a2a;
        --wcd-code-border:  #555;
        --wcd-code-text:    #f0f0f0;
        --wcd-copy-bg:      #2a2a2a;
        --wcd-copy-border:  #555;
        --wcd-copy-color:   #7db8f7;
    }
}