/* ── Convertivo Auto Coupon — Frontend (Banner + Toast) ───────── */

/* ── Banner ─────────────────────────────────────────────────── */
/* ── Shared banner base ──────────────────────────────────────── */
.cvac-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-weight: 500;
    line-height: 1.45;
    position: relative;
    overflow: hidden;
}

/* Repeating shimmer: sweeps every ~4s with a natural pause */
.cvac-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
    transform: translateX(-150%);
    animation: cvac-banner-shimmer 4s 1.5s ease infinite;
    pointer-events: none;
}
@keyframes cvac-banner-shimmer {
    0%, 30%  { transform: translateX(-150%); }
    60%      { transform: translateX(200%); }
    61%, 100% { transform: translateX(-150%); }
}

.cvac-banner-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: 0.85;
}

.cvac-banner strong { font-weight: 700; opacity: 1; }

/* ── Prominent style ─────────────────────────────────────────── */
.cvac-banner--prominent {
    padding: 13px 18px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

/* ── Notice style ────────────────────────────────────────────── */
.cvac-banner--notice {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    box-shadow: none;
    opacity: 0.92;
}

/* ── Toast ───────────────────────────────────────────────────── */
.cvac-toast {
    position: fixed;
    z-index: 999999;
    width: 320px;
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    overflow: hidden;
    background: var(--cvac-bg, #111827);
    color: var(--cvac-text, #f9fafb);
    padding: 16px 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.28),
        0 0 0 1px rgba(255,255,255,0.07),
        0 4px 16px rgba(0,0,0,0.18);
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
    pointer-events: none;
}
.cvac-toast.cvac-visible {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.cvac-toast.cvac-hiding {
    transform: translateY(10px) scale(0.96);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
    pointer-events: none;
}

/* Positions */
.cvac-toast.cvac-pos-br { bottom: 24px; right: 24px; }
.cvac-toast.cvac-pos-bl { bottom: 24px; left: 24px; }
.cvac-toast.cvac-pos-tr { top: 24px; right: 24px; transform: translateY(-20px) scale(0.96); }
.cvac-toast.cvac-pos-tl { top: 24px; left: 24px;  transform: translateY(-20px) scale(0.96); }
.cvac-toast.cvac-pos-tr.cvac-visible,
.cvac-toast.cvac-pos-tl.cvac-visible { transform: translateY(0) scale(1); }
.cvac-toast.cvac-pos-tr.cvac-hiding,
.cvac-toast.cvac-pos-tl.cvac-hiding  { transform: translateY(-10px) scale(0.96); }

/* Icon */
.cvac-toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--cvac-accent, #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.cvac-toast-icon svg { display: block; }

/* Body */
.cvac-toast-body { flex: 1; min-width: 0; padding-top: 1px; }
.cvac-toast-heading {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px;
}
.cvac-toast-subtext {
    font-size: 12.5px;
    opacity: 0.78;
    line-height: 1.45;
}
.cvac-toast-subtext .amount { font-weight: 600; }

/* Close */
.cvac-toast-close {
    background: rgba(255,255,255,0.10);
    border: none;
    border-radius: 7px;
    color: inherit;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 5px 7px;
    flex-shrink: 0;
    transition: background 0.15s;
    margin-top: -2px;
}
.cvac-toast-close:hover { background: rgba(255,255,255,0.20); }

/* Progress bar */
.cvac-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: var(--cvac-accent, #10b981);
    transform-origin: left center;
    border-radius: 0 3px 0 0;
    animation: cvac-deplete linear forwards;
}
@keyframes cvac-deplete {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Mobile */
@media (max-width: 480px) {
    .cvac-toast {
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        bottom: 16px !important;
        top: auto !important;
        transform: translateY(20px) scale(0.96) !important;
    }
    .cvac-toast.cvac-visible {
        transform: translateY(0) scale(1) !important;
    }
    .cvac-toast.cvac-hiding {
        transform: translateY(10px) scale(0.96) !important;
    }
}