/* AgentX — Promo Code Tracker DEMO — shared "hacker terminal" styling */

body {
    background-color: #000000;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

#matrixCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    opacity: 0.8;
    pointer-events: none;
}

.cyber-border {
    border: 1px solid rgba(0, 200, 83, 0.3);
    box-shadow: 0 0 10px rgba(0, 200, 83, 0.1), inset 0 0 10px rgba(0, 200, 83, 0.05);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.cyber-border-red {
    border: 1px solid rgba(255, 23, 68, 0.3);
    box-shadow: 0 0 10px rgba(255, 23, 68, 0.1), inset 0 0 10px rgba(255, 23, 68, 0.05);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.cyber-border:hover {
    border-color: rgba(0, 200, 83, 0.8);
    box-shadow: 0 0 20px rgba(0, 200, 83, 0.2), inset 0 0 15px rgba(0, 200, 83, 0.1);
}

.cyber-border-red:hover {
    border-color: rgba(255, 23, 68, 0.8);
    box-shadow: 0 0 20px rgba(255, 23, 68, 0.2), inset 0 0 15px rgba(255, 23, 68, 0.1);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000000; border-left: 1px solid #003b18; }
::-webkit-scrollbar-thumb { background: #00C853; }
::selection { background: #00C853; color: #000; }

/* ── Promo code activation ── */
.promo-input.valid { border-color: rgba(0, 200, 83, 0.9) !important; box-shadow: 0 0 12px rgba(0, 200, 83, 0.35); }
.promo-input.invalid { border-color: rgba(255, 23, 68, 0.9) !important; box-shadow: 0 0 12px rgba(255, 23, 68, 0.35); }

.promo-partner-badge {
    display: none;
    align-items: center;
    gap: 0.5rem;
}
.promo-partner-badge.visible {
    display: inline-flex;
    animation: badgeSlide 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes badgeSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Product / price cards ── */
.promo-card {
    transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.promo-card.discounted {
    border-color: rgba(0, 200, 83, 0.7) !important;
    box-shadow: 0 0 32px rgba(0, 200, 83, 0.2), inset 0 0 15px rgba(0, 200, 83, 0.08);
}
.promo-card.discount-reveal {
    animation: cardDiscountReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cardDiscountReveal {
    0% { transform: scale(1); }
    35% { transform: scale(1.02); box-shadow: 0 0 48px rgba(0, 200, 83, 0.4); }
    100% { transform: scale(1); }
}

.promo-price-wrap {
    position: relative;
    min-height: 3.25rem;
    overflow: visible;
}
.promo-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
    width: 100%;
    position: absolute;
    top: 0; left: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
}
.promo-price-row.discounted { transform: translateY(100%); opacity: 0; }
.promo-card.discounted .promo-price-row.original { transform: translateY(-100%); opacity: 0; }
.promo-card.discounted .promo-price-row.discounted { transform: translateY(0); opacity: 1; }

.promo-price-new.price-pop { animation: pricePop 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pricePop {
    0% { transform: scale(0.6); opacity: 0; }
    55% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

.promo-discount-tag {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s 0.15s, transform 0.4s 0.15s;
}
.promo-card.discounted .promo-discount-tag { opacity: 1; transform: scale(1); }
.promo-discount-tag.tag-pop { animation: tagPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
@keyframes tagPop {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    70% { transform: scale(1.15) rotate(3deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── Flash + sparkle success FX (recolored to brand green) ── */
.promo-flash {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    background: radial-gradient(circle at 50% 30%, rgba(0, 200, 83, 0.35) 0%, transparent 65%);
    opacity: 0;
}
.promo-flash.active { opacity: 1; animation: flashFade 0.9s ease-out forwards; }
@keyframes flashFade { 0% { opacity: 0.85; } 100% { opacity: 0; } }

.promo-sparkles { position: fixed; inset: 0; z-index: 91; pointer-events: none; overflow: hidden; }
.sparkle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #00C853;
    box-shadow: 0 0 8px #00C853, 0 0 16px rgba(0, 200, 83, 0.6);
    animation: sparkleFly 1s ease-out forwards;
}
.sparkle:nth-child(odd) { background: #6bffb0; width: 4px; height: 4px; }
@keyframes sparkleFly {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}

/* ── Modal ── */
.promo-modal-root { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.promo-modal-root.hidden { display: none; }
.promo-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); }
.promo-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 26rem;
    max-height: 92dvh;
    overflow-y: auto;
    animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPop {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Toast ── */
.promo-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 200;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: calc(100vw - 2rem);
}
.promo-toast.show { transform: translateX(-50%) translateY(0); }