:root {
    --wag-accent: #e0457b;
    --wag-success: #2e9e5b;
    --wag-track: #eee;
    --wag-bg: #fff8fb;
    --wag-border: #f3c4d6;
    --wag-radius: 10px;
}

/* ---------- Pozycja gratisowa ---------- */
.wag-badge {
    display: inline-block;
    margin-left: .4em;
    padding: .1em .55em;
    border-radius: 999px;
    background: var(--wag-accent);
    color: #fff;
    font-size: .75em;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}
.wag-free {
    color: var(--wag-success);
    font-weight: 700;
    text-decoration: none;
    background: none;
}

/* ---------- Pasek postępu ---------- */
.wag-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1.5em;
    padding: 12px 16px;
    border: 1px solid var(--wag-border);
    border-radius: var(--wag-radius);
    background: var(--wag-bg);
}
.wag-progress__img {
    flex: 0 0 auto;
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    border-radius: 8px;
}
.wag-progress__body { flex: 1 1 auto; min-width: 0; }
.wag-progress__text { margin-bottom: 8px; font-size: .95em; line-height: 1.4; }
.wag-progress__track {
    height: 8px;
    border-radius: 999px;
    background: var(--wag-track);
    overflow: hidden;
}
.wag-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--wag-accent);
    transition: width .5s ease;
}
.wag-progress.is-achieved { border-color: #bfe5cf; background: #f2fbf6; }
.wag-progress.is-achieved .wag-progress__fill { background: var(--wag-success); }

.wag-progress--minicart { margin: 0 0 1em; padding: 10px 12px; font-size: .9em; }
.wag-progress--product { margin: 1em 0; }
.wag-progress--popup { margin: 0 0 1em; background: #fff; }

/* ---------- Pop-up ---------- */
.wag-popup[hidden] { display: none !important; }
.wag-popup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.wag-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    animation: wag-fade .25s ease;
}
.wag-popup__dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px 24px 20px;
    border-radius: 16px;
    background: #fff;
    color: #222;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    animation: wag-pop .3s ease;
}
.wag-popup__close {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 4px 10px;
    border: 0;
    background: none;
    color: #666;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.wag-popup__gift { position: relative; display: inline-block; margin-bottom: 12px; }
.wag-popup__gift img { width: 110px; height: 110px; object-fit: cover; border-radius: 12px; }
.wag-popup__gift-badge {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--wag-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.wag-popup__title { margin: 8px 0 6px; font-size: 1.4em; line-height: 1.25; }
.wag-popup__text { margin: 0 0 14px; }
.wag-popup__subtitle { margin: 4px 0 10px; font-weight: 600; }
.wag-popup__products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.wag-popup__product {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 10px;
    font-size: .9em;
}
.wag-popup__product-link { color: inherit; text-decoration: none; }
.wag-popup__product-link img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.wag-popup__product-name { display: block; margin-top: 4px; line-height: 1.3; }
.wag-popup__product-price { font-weight: 700; }
.wag-popup__add { margin-top: auto; width: 100%; }
.wag-popup__add.is-added { background: var(--wag-success) !important; color: #fff !important; }
.wag-popup__success-text { font-size: 1.1em; }
.wag-popup__dismiss {
    border: 0;
    background: none;
    color: #777;
    text-decoration: underline;
    cursor: pointer;
}
body.wag-popup-open { overflow: hidden; }

@keyframes wag-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wag-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .wag-popup__overlay, .wag-popup__dialog { animation: none; }
    .wag-progress__fill { transition: none; }
}
