/* Easy Paw — попап «Додано в кошик»: pages/global/cart-popup.php, js/main.js:cartAddedPopup() */

.cart-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(38, 42, 46, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility 0s linear var(--transition);
}

.cart-popup-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition), visibility 0s linear;
}

.cart-popup {
    position: fixed;
    z-index: var(--z-modal);
    top: 50%;
    left: 50%;
    width: calc(100% - 32px);
    max-width: 400px;
    padding: var(--gap-xl) var(--gap-lg) var(--gap-lg);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(.95);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
}

.cart-popup.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear;
}

.cart-popup__close {
    position: absolute;
    top: var(--gap-sm);
    right: var(--gap-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-circle);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.cart-popup__close:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.cart-popup__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--gap-md);
    border-radius: var(--radius-circle);
    background: var(--color-primary);
    color: var(--color-white);
}

.cart-popup__icon svg { stroke-width: 3; }

.cart-popup__title {
    margin-bottom: var(--gap-sm);
    color: var(--color-text);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

.cart-popup__summary {
    margin-bottom: var(--gap-lg);
    color: var(--color-text-muted);
}

.cart-popup__summary strong { color: var(--color-text); font-weight: var(--fw-bold); }

/* Поріг з inc/min-order.php (той самий, що .min-order-banner у cart.css), наповнює js/main.js:cartAddedPopup() */
.cart-popup__min-order {
    margin: -8px 0 var(--gap-lg);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--fs-small);
}

.cart-popup__min-order.is-reached {
    background: var(--color-bg-green);
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

.cart-popup__actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.cart-popup__btn {
    padding: 12px var(--gap-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.cart-popup__btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

/* color продубльовано — інакше глобальний a:hover (main.css) перефарбовує білий текст */
.cart-popup__btn--primary:hover { background: var(--color-accent); color: var(--color-white); }

.cart-popup__btn--secondary {
    border-color: var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
}

.cart-popup__btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .cart-popup { padding: var(--gap-lg) var(--gap-md) var(--gap-md); }

    .cart-popup__icon { width: 52px; height: 52px; margin-bottom: var(--gap-sm); }

    .cart-popup__title { font-size: 20px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cart-popup { transition: opacity var(--transition); transform: translate(-50%, -50%); }
    .cart-popup.is-open { transition: opacity var(--transition); }
}