/* ============================================
   MATRIX THEME
   Black + neon green aesthetic
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* ----------- Background ----------- */

body {
    background: #000
        url("../images/backgrounds/theme/matrix/matrix-stream.gif")
        center/cover no-repeat fixed;
    font-family: "Share Tech Mono", monospace;
    color: #00ff88;
    letter-spacing: 0.4px;
}


/* Optional subtle scanlines overlay */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.25) 3px
    );
    pointer-events: none;
    z-index: 1;
}


/* ----------- Modal Styling ----------- */

.sale-modal {
    position: relative;
    z-index: 2; /* above scanlines */
    
    background: rgba(0, 25, 0, 0.60);
    border: 1px solid #00ff88aa;
    padding: 3rem 3.2rem;
    border-radius: 14px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow: 0 0 20px #00ff8850, 
                0 0 45px #00ff8820 inset;
}

.sale-modal .domain-name {
    font-size: 2.7rem;
    color: #00ff9f;
    text-shadow: 0 0 10px #00ff9f, 0 0 22px #00aa66;
}

/* ----------- Typography ----------- */

.sale-modal h1 {
    margin-top: 0;
    font-size: 1.9rem;
    color: #00ff88;
    text-shadow: 0 0 8px #00ff88, 0 0 14px #00ff8855;
}

.sale-modal p {
    font-size: 1.05rem;
    margin: 1rem 0;
    opacity: 0.85;
    color: #b0ffcf;
}

/* Price */
.sale-price {
    font-size: 1.6rem;
    font-weight: bold;
    color: #00ff88;
    text-shadow: 0 0 10px #00ff88aa;
}


/* ----------- Buttons ----------- */

a.contact-btn {
    display: inline-block;
    background: #00ff88;
    color: #001a00;
    padding: 0.8rem 1.4rem;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;

    transition: 0.15s ease-out;
}

a.contact-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 0 20px #00ff88aa;
}


/* ----------- QR Code ----------- */

#qr, img[alt="QR code"] {
    filter: drop-shadow(0 0 8px #00ff88aa);
}