/* Basic styling for the Certified Human Accreditation application */

/* Import a classic "web-safe" font for headings and a monospace for body */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* Fallback to generic web-safe fonts for broader 90s feel */
body {
    font-family: 'VT323', monospace, "Courier New", Courier;
    background-color: #C0C0C0; /* Standard Windows 95 grey */
    color: #000000; /* Black text */
}

/* Headings with a more impactful 90s game/title font */
h1, h2, h3 {
    font-family: 'Press Start 2P', cursive, Arial, sans-serif;
    color: #000080; /* Dark blue headings */
    text-shadow: 2px 2px #FFFF00; /* Cheesy yellow shadow */
}

/* Custom button and input styles to simulate 3D outset/inset */
.btn-90s {
    border-style: outset;
    border-width: 3px;
    border-color: #FFFFFF #808080 #808080 #FFFFFF; /* Light top/left, dark bottom/right */
    background-color: #C0C0C0; /* Button grey */
    color: #000000;
    font-weight: bold;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    border-radius: 0.25rem; /* Tailwind rounded-sm */
}

.btn-90s:hover {
    background-color: #B0B0B0;
}

.btn-90s:active {
    border-style: inset; /* Simulate being pressed */
    border-color: #808080 #FFFFFF #FFFFFF #808080;
}

.input-90s {
    border-style: inset; /* Simulate being pressed */
    border-width: 3px;
    border-color: #808080 #FFFFFF #FFFFFF #808080; /* Dark top/left, light bottom/right */
    background-color: #FFFFFF;
    color: #000000;
    padding: 5px 10px;
    font-size: 16px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Message box styles */
.message-box-90s {
    border: 2px groove #000080; /* Blue groove border */
    background-color: #F0F0FF; /* Light blue background */
    padding: 10px;
    margin-top: 15px;
    text-align: center;
}

.message-box-90s.info {
    background-color: #E0E0FF; /* Lighter blue */
    color: #000080;
}

.message-box-90s.success {
    background-color: #D0FFD0; /* Light green */
    color: #008000;
}

.message-box-90s.error {
    background-color: #FFD0D0; /* Light red */
    color: #800000;
}


/* Marquee styles */
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-color: #008080; /* Teal */
    color: #FFFFFF;
    padding: 5px;
    border: 2px solid #000000;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%; /* Start off-screen */
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* Link styles */
a {
    color: #0000FF; /* Bright blue links */
    text-decoration: underline;
}

a:visited {
    color: #FACC15; /* Yellow for visited links - matches Tailwind yellow-300 */
}

a:hover {
    color: #FF0000; /* Red on hover */
}

/* Specific styles for verification result display */
.result-display-90s {
    border: 2px groove #000080; /* Blue groove border */
    background-color: #F0F0FF; /* Light blue background */
    padding: 15px;
    margin-top: 15px;
    /* Removed text-align: center from here to allow individual control */
    position: relative;
    overflow: hidden;
}

/* New style to left-align the details within the result box */
.result-details-left {
    text-align: left;
}

.result-display-90s strong {
    color: #000080; /* Dark blue for strong text */
}

.status-active-90s {
    color: #008000; /* Green for active status */
    font-weight: bold;
}

.status-not-found-90s {
    color: #800000; /* Red for not found status */
    font-weight: bold;
}

/* New styles for the flashing hit counter box */
.flashing-box {
    animation: flash 1s infinite alternate; /* 1s duration, infinite, alternates between states */
    display: inline-block; /* Ensures it wraps content and respects padding */
    min-width: 100px; /* Give it a minimum width to look like a box */
    text-align: center;
}

@keyframes flash {
    0% { opacity: 1; }
    100% { opacity: 0.5; } /* Flashes to 50% opacity */
}