/* Coupon Deals Pro – Public Styles */
:root {
    --cdp-bg:        #1a1a1a;
    --cdp-card:      #2a2a2a;
    --cdp-border:    #3a3a3a;
    --cdp-text:      #ffffff;
    --cdp-muted:     #999999;
    --cdp-orange:    #e05a2b;
    --cdp-green:     #3a9e7e;
    --cdp-blue:      #5a9ee0;
    --cdp-btn-bg:    #333333;
    --cdp-btn-bdr:   #555555;
    --cdp-radius:    14px;
    --cdp-radius-sm: 8px;
}

.cdp-wrap {
    background: var(--cdp-bg);
    border-radius: var(--cdp-radius);
    padding: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--cdp-text);
    box-sizing: border-box;
}

/* ── FILTERS ── */
.cdp-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.cdp-search,
.cdp-cat-filter {
    background: var(--cdp-card);
    border: 1.5px solid var(--cdp-border);
    border-radius: var(--cdp-radius-sm);
    color: var(--cdp-text);
    padding: 10px 14px;
    font-size: 13px;
    outline: none;
    transition: border-color .2s;
}
.cdp-search { flex: 1; min-width: 180px; }
.cdp-cat-filter { min-width: 160px; }
.cdp-search:focus,
.cdp-cat-filter:focus { border-color: var(--cdp-orange); }

/* ── GRID ── */
.cdp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

/* ── CARD BASE ── */
.cdp-card {
    background: var(--cdp-card);
    border-radius: var(--cdp-radius);
    padding: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: transform .15s;
    border: 1.5px solid transparent;
    box-sizing: border-box;
}
.cdp-card:hover { transform: translateY(-2px); }
.cdp-card.cdp-featured { border-color: var(--cdp-orange); }

/* ── MOST POPULAR BADGE ── */
.cdp-most-popular {
    position: absolute;
    top: -1px;
    left: -1px;
    background: var(--cdp-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: var(--cdp-radius) 0 10px 0;
    letter-spacing: .3px;
}

/* ── CARD TOP ── */
.cdp-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.cdp-coupon-card.cdp-featured .cdp-card-top { margin-top: 1.3rem; }

.cdp-store {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cdp-store-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    background: #fff;
}
.cdp-store-initial {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--cdp-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.cdp-store-name {
    font-size: 12px;
    color: var(--cdp-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ── BADGES ── */
.cdp-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1.5px solid;
}
.cdp-badge-green { color: var(--cdp-green); border-color: var(--cdp-green); }
.cdp-tag-orange  { color: var(--cdp-orange); border-color: var(--cdp-orange); background: rgba(224,90,43,.08); }
.cdp-tag-green   { color: var(--cdp-green);  border-color: var(--cdp-green);  background: rgba(58,158,126,.08); }
.cdp-tag-blue    { color: var(--cdp-blue);   border-color: var(--cdp-blue);   background: rgba(90,158,224,.08); }
.cdp-tag-red     { color: #e05050;           border-color: #e05050;           background: rgba(224,80,80,.08); }

/* ── DISCOUNT + TITLE + DESC ── */
.cdp-discount {
    font-size: 24px;
    font-weight: 700;
    color: var(--cdp-text);
    margin: 4px 0 6px;
    line-height: 1.2;
}
.cdp-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--cdp-text);
    margin: 0 0 6px;
    line-height: 1.4;
}
.cdp-desc {
    font-size: 12px;
    color: var(--cdp-muted);
    line-height: 1.55;
    margin: 0 0 12px;
}

/* ── CODE ROW ── */
.cdp-code-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.cdp-code-box {
    flex: 1;
    background: #1a1a1a;
    border: 1.5px dashed var(--cdp-border);
    border-radius: var(--cdp-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cdp-text);
    letter-spacing: 1.5px;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cdp-copy-btn {
    background: var(--cdp-btn-bg);
    border: 1.5px solid var(--cdp-btn-bdr);
    border-radius: var(--cdp-radius-sm);
    padding: 10px 16px;
    color: var(--cdp-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
    font-family: inherit;
}
.cdp-copy-btn:hover { background: #404040; }
.cdp-copy-btn.cdp-copied {
    border-color: var(--cdp-green);
    color: var(--cdp-green);
}

/* ── META ── */
.cdp-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 4px;
}
.cdp-used  { font-size: 12px; color: var(--cdp-muted); }
.cdp-used strong { color: var(--cdp-orange); font-weight: 600; }
.cdp-expiry { font-size: 12px; color: #666; }
.cdp-active { font-size: 12px; color: #666; }

/* ── CTA BUTTON ── */
.cdp-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--cdp-btn-bg);
    border: 1.5px solid var(--cdp-btn-bdr);
    border-radius: var(--cdp-radius-sm);
    padding: 11px;
    color: var(--cdp-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    margin-top: auto;
    box-sizing: border-box;
    font-family: inherit;
}
.cdp-cta-btn:hover {
    background: #404040;
    color: var(--cdp-text);
    text-decoration: none;
}

/* ── NO RESULTS ── */
.cdp-no-results {
    text-align: center;
    color: var(--cdp-muted);
    padding: 2rem;
    font-size: 14px;
}

/* ── LOADING ── */
.cdp-loading {
    text-align: center;
    padding: 2rem;
    color: var(--cdp-muted);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .cdp-wrap { padding: 1rem; }
    .cdp-grid { grid-template-columns: 1fr; }
    .cdp-filters { flex-direction: column; }
    .cdp-search, .cdp-cat-filter { width: 100%; }
    .cdp-discount { font-size: 20px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .cdp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── REVEAL / HIDDEN CODE ── */
.cdp-reveal-wrap { margin-bottom: 10px; }

.cdp-code-blurred {
    position: relative;
    user-select: none;
    letter-spacing: 4px;
    color: transparent;
    text-shadow: 0 0 10px rgba(255,255,255,0.25);
    border-style: dashed;
    cursor: pointer;
}
.cdp-code-mask {
    color: #777;
    letter-spacing: 3px;
    font-size: 16px;
}
.cdp-reveal-btn {
    background: var(--cdp-orange);
    border: none;
    border-radius: var(--cdp-radius-sm);
    padding: 10px 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: inherit;
    transition: opacity .15s, transform .1s;
}
.cdp-reveal-btn:hover { opacity: .88; transform: scale(1.02); }
.cdp-reveal-btn:active { transform: scale(0.97); }

.cdp-code-shown {
    border-color: var(--cdp-green);
    color: var(--cdp-green);
    animation: cdp-pop-in .25s ease;
}
@keyframes cdp-pop-in {
    0%  { transform: scale(.96); opacity: .5; }
    100%{ transform: scale(1);   opacity: 1; }
}
.cdp-revealed-copy {
    background: var(--cdp-btn-bg);
    border: 1.5px solid var(--cdp-green);
    border-radius: var(--cdp-radius-sm);
    padding: 10px 16px;
    color: var(--cdp-green);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: inherit;
    transition: background .15s;
}
.cdp-revealed-copy:hover { background: #1e3d2a; }

/* ── DEVICE VISIBILITY (client-side enforcement) ── */
@media (min-width: 769px) {
    .cdp-dv-mobile_only  { display: none !important; }
}
@media (max-width: 768px) {
    .cdp-dv-desktop_only { display: none !important; }
}