/* =========================================
   TEMA: MATRIX GREEN (Premium - €2.99)
   File: /style/temipremium/matrix-green.css
   ========================================= */

.theme-matrix-green {
    --primary: #00ff88;
    --primary-dark: #00cc6a;
    --primary-light: #4dffaa;
    --primary-rgb: 0, 255, 136;
    --primary-glow: rgba(0, 255, 136, 0.5);
    --accent: #88ff00;
    --accent-rgb: 136, 255, 0;
    --gradient: linear-gradient(135deg, #00ff88, #00cc6a);
    --gradient-reverse: linear-gradient(135deg, #00cc6a, #00ff88);
}

/* === BACKGROUND === */
.theme-matrix-green body {
    background: #000;
    background-image: 
        radial-gradient(ellipse at 20% 0%, rgba(0, 255, 136, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(0, 204, 106, 0.04) 0%, transparent 50%);
}

/* === MATRIX RAIN EFFECT === */
.theme-matrix-green body::before {
    background: 
        linear-gradient(rgba(0, 255, 136, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, 0.015) 1px, transparent 1px);
}

/* Matrix characters falling effect on banner */
.theme-matrix-green .banner-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ctext x='5' y='20' fill='%2300ff8820' font-family='monospace' font-size='14'%3E0%3C/text%3E%3C/svg%3E");
    animation: matrix-rain 15s linear infinite;
    opacity: 0.5;
    z-index: 1;
}

@keyframes matrix-rain {
    0% { background-position: 0 -100%; }
    100% { background-position: 0 100%; }
}

/* === ICON GLOW === */
.theme-matrix-green .server-icon-wrapper {
    box-shadow: 
        0 0 0 1px rgba(0, 255, 136, 0.3),
        0 0 30px rgba(0, 255, 136, 0.25),
        0 20px 50px rgba(0, 0, 0, 0.5);
}

.theme-matrix-green .server-icon-wrapper:hover {
    box-shadow: 
        0 0 0 2px #00ff88,
        0 0 50px rgba(0, 255, 136, 0.5),
        0 25px 60px rgba(0, 0, 0, 0.6);
}

.theme-matrix-green .server-icon-wrapper::before {
    background: linear-gradient(135deg, #00ff88 0%, transparent 50%);
}

/* === TITLE WITH GLOW === */
.theme-matrix-green .server-title-block h1 {
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

/* === TAGS === */
.theme-matrix-green .tag-votes {
    background: rgba(0, 255, 136, 0.12);
    border-color: rgba(0, 255, 136, 0.4);
    color: #00ff88;
}

.theme-matrix-green .meta-tag:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: rgba(0, 255, 136, 0.3);
}

/* Online tag matches theme */
.theme-matrix-green .tag-online {
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

/* === CARDS === */
.theme-matrix-green .content-card,
.theme-matrix-green .vote-card-split,
.theme-matrix-green .info-card {
    border-color: rgba(0, 255, 136, 0.1);
}

.theme-matrix-green .content-card:hover,
.theme-matrix-green .info-card:hover {
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.1);
}

.theme-matrix-green .content-card::before {
    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.5), transparent);
}

/* === HEADINGS === */
.theme-matrix-green .content-card h3,
.theme-matrix-green .info-card h3 {
    color: #00ff88;
    border-left-color: #00ff88;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
    font-family: 'Courier New', monospace;
}

/* === BUTTONS === */
.theme-matrix-green .btn-vote-main {
    background: linear-gradient(135deg, #00ff88, #00cc6a);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

.theme-matrix-green .btn-vote-main:hover {
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.6);
}

/* === IP BOX === */
.theme-matrix-green .ip-display-box {
    background: rgba(0, 255, 136, 0.06);
    border-color: rgba(0, 255, 136, 0.3);
    color: #00ff88;
    font-family: 'Courier New', monospace;
}

.theme-matrix-green .ip-display-box:hover {
    background: rgba(0, 255, 136, 0.12);
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.3);
}

/* === INPUT === */
.theme-matrix-green .vote-nick-input {
    font-family: 'Courier New', monospace;
}

.theme-matrix-green .vote-nick-input:focus {
    border-color: #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}

/* === INFO VALUES === */
.theme-matrix-green .info-value {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    font-family: 'Courier New', monospace;
}

/* === STAR RATING === */
.theme-matrix-green .star-widget label:hover,
.theme-matrix-green .star-widget label:hover ~ label,
.theme-matrix-green .star-widget input:checked ~ label {
    color: #00ff88;
    filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.7));
}

.theme-matrix-green .rating-stats span {
    color: #00ff88;
}

/* === RECOMMENDATIONS === */
.theme-matrix-green .rec-card-v2:hover {
    border-color: #00ff88;
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.2);
}

.theme-matrix-green .rec-card-v2:hover .rec-title-v2 {
    color: #00ff88;
}

/* === SOCIAL BUTTONS === */
.theme-matrix-green .social-btn:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}

/* === SCROLLBAR === */
.theme-matrix-green ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00cc6a, #00ff88);
}

/* === SELECTION === */
.theme-matrix-green ::selection {
    background: rgba(0, 255, 136, 0.3);
}

/* === MODAL === */
.theme-matrix-green .modal-content h2 {
    color: #00ff88;
    font-family: 'Courier New', monospace;
}

.theme-matrix-green .btn-modal {
    background: linear-gradient(135deg, #00ff88, #00cc6a);
}

/* === FOOTER === */
.theme-matrix-green .footer-col h3,
.theme-matrix-green .footer-col h4 {
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}