/* retro-game.css */

:root {
    --retro-bg: #222; /* Dark background */
    --retro-primary: #39ff14; /* Neon Green */
    --retro-secondary: #ff00ff; /* Neon Magenta */
    --retro-text: #fff; /* White text */
    --retro-border: #39ff14; /* Green border */
}

/* Ensure padding doesn't increase width */
.wc-retro-container * {
    box-sizing: border-box; 
}

/* Container for the whole retro form area */
.wc-retro-container {
    font-family: 'Press Start 2P', cursive; /* The 8-bit font */
    background-color: var(--retro-bg);
    padding: 30px;
    border: 4px solid var(--retro-border);
    box-shadow: 
        0 0 0 4px var(--retro-bg),
        0 0 0 8px var(--retro-border); /* Double pixel border effect */
    max-width: 500px;
    width: 100%; /* Ensures it fills space on smaller screens */
    margin: 20px auto;
    image-rendering: pixelated;
    position: relative;
    overflow: hidden;
    box-sizing: border-box; /* Crucial for mobile sizing */
}

/* Scanline overlay effect */
.wc-retro-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
    );
    background-size: 100% 4px; /* Size of scanlines */
    pointer-events: none; /* Lets clicks pass through */
    z-index: 10;
}

/* Inner box styling */
.wc-retro-box {
    position: relative;
    z-index: 20; /* Above scanlines */
    text-align: center;
    color: var(--retro-primary);
}

/* Main Title */
.retro-title {
    font-family: 'Press Start 2P', cursive;
    color: var(--retro-secondary);
    text-shadow: 2px 2px var(--retro-primary);
    margin-bottom: 25px;
    font-size: 1.2rem;
    line-height: 1.5;
    text-transform: uppercase;
}

/* Form labels */
.retro-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.8rem;
    color: var(--retro-text);
    text-transform: uppercase;
}

/* Wrapper for currency symbol and input */
.retro-input-wrapper {
    display: flex;
    align-items: center;
    background: #000;
    border: 2px solid var(--retro-primary);
    padding: 5px;
}

/* Currency symbol styling */
.retro-currency {
    font-size: 1rem;
    color: var(--retro-primary);
    padding: 0 10px;
}

/* The number input field */
.retro-input {
    font-family: 'Press Start 2P', cursive;
    background: transparent;
    border: none;
    color: var(--retro-primary);
    font-size: 1rem;
    width: 100%;
    outline: none;
    padding: 5px;
}

/* Hide HTML5 spin boxes for number input */
.retro-input::-webkit-outer-spin-button,
.retro-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.retro-input[type=number] {
    -moz-appearance: textfield;
}

/* Submit button wrapper */
.retro-submit-wrapper {
    margin-top: 25px;
}

/* The main button */
.retro-button {
    font-family: 'Press Start 2P', cursive;
    background-color: var(--retro-bg);
    color: var(--retro-secondary);
    border: 4px solid var(--retro-secondary);
    padding: 15px 30px;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.1s;
    box-shadow: 4px 4px 0px var(--retro-primary);
    max-width: 100%;
    white-space: normal; /* Allows text wrap on tiny screens */
}

/* Button hover effect */
.retro-button:hover {
    background-color: var(--retro-secondary);
    color: var(--retro-bg);
    border-color: var(--retro-primary);
    box-shadow: -4px -4px 0px var(--retro-primary);
    transform: translate(4px, 4px);
}

/* Error message style */
.retro-error {
    font-family: 'Press Start 2P', cursive;
    color: red;
    background: #000;
    padding: 10px;
    border: 2px solid red;
    text-align: center;
}

/* Blinking animation for the button text */
.blink-me {
  animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0.5;
    color: var(--retro-primary);
  }
}

/* --- MOBILE RESPONSIVENESS FIX --- */
@media screen and (max-width: 600px) {
    .wc-retro-container {
        width: 95%; /* Leave a small gap on sides */
        padding: 20px 10px; /* Reduce padding */
        box-shadow: 
            0 0 0 2px var(--retro-bg),
            0 0 0 4px var(--retro-border); /* Smaller border effect */
        border-width: 2px;
    }

    .retro-title {
        font-size: 0.9rem; /* Smaller title font */
        margin-bottom: 20px;
    }

    .retro-button {
        padding: 12px 15px; /* Smaller button padding */
        font-size: 0.8rem; /* Smaller button font */
        width: 100%; /* Full width button on mobile */
    }

    .retro-input {
        font-size: 0.8rem;
    }

    .retro-currency {
        font-size: 0.8rem;
    }
}