.cs-promo-popup {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: linear-gradient(160deg, #ffffff, #fef9f0);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    z-index: 9999;
    overflow: hidden;
    transform: translateY(30px) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.cs-promo-popup[hidden] { display: none; }
.cs-promo-popup.is-visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.cs-promo-popup__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.06);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.cs-promo-popup__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: linear-gradient(135deg,#ef4444,#f97316);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(239,68,68,.35);
    animation: cs-promo-pulse 1.8s ease-in-out infinite;
}
@keyframes cs-promo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.cs-promo-popup__body { padding: 46px 18px 18px; }
.cs-promo-popup__eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #b45309; }
.cs-promo-popup__title { margin: 0 0 10px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #111827; }
.cs-promo-popup__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cs-promo-popup__price-old { font-size: 14px; color: #9ca3af; text-decoration: line-through; }
.cs-promo-popup__price-new { font-size: 22px; font-weight: 800; color: #15803d; }
.cs-promo-popup__coupon { margin: 0 0 10px; font-size: 13px; color: #374151; }
.cs-promo-popup__coupon strong { padding: 1px 7px; border-radius: 5px; background: #fee2e2; color: #b91c1c; }
.cs-promo-popup__timer { margin: 0 0 14px; font-size: 12px; font-weight: 600; color: #991b1b; }
.cs-promo-popup__timer span { font-variant-numeric: tabular-nums; }

.cs-promo-popup__actions { display: flex; align-items: center; gap: 10px; }
.cs-promo-popup__cta {
    flex: 1;
    text-align: center;
    padding: 11px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(37,99,235,.35);
}
.cs-promo-popup__dismiss {
    border: none;
    background: none;
    font-size: 13px;
    color: #6b7280;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .cs-promo-popup {
        left: 12px;
        right: 12px;
        bottom: 0;
        width: auto;
        max-width: none;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .cs-promo-popup.is-visible { transform: translateY(0); }
}