:root {
    --background-color: #ffffff;
    --primary-text-color: #000000;
    --secondary-text-color: #555555;
    --button-bg-color: #000000;
    --button-text-color: #ffffff;
    --input-border-color: #000000;
    --input-placeholder-color: #888888;
}

body.dark-mode {
    --background-color: #1d1d1d;
    --primary-text-color: #ffffff;
    --secondary-text-color: #aaaaaa;
    --button-bg-color: #ffffff;
    --button-text-color: #000000;
    --input-border-color: #ffffff;
    --input-placeholder-color: #888888;
}

body {
    background-color: var(--background-color);
    color: var(--primary-text-color);
    transition: background-color 0.5s ease, color 0.5s ease 0.2s;
    overflow-x: hidden;
}

.primary-text {
    color: var(--primary-text-color);
    transition: color 0.5s ease 0.2s;
}

.secondary-text {
    color: var(--secondary-text-color);
    transition: color 0.5s ease 0.2s;
}

.themed-button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    transition: background-color 0.5s ease 0.2s, color 0.5s ease 0.2s, opacity 0.3s ease;
}

.themed-button:hover {
    opacity: 0.8;
}

.themed-input {
    border: 1px solid var(--input-border-color);
    color: var(--primary-text-color);
    transition: border-color 0.5s ease 0.2s, color 0.5s ease 0.2s;
}

.themed-input::placeholder {
    color: var(--input-placeholder-color);
}

.secondary-text a {
    transition: color 0.5s ease 0.2s;
}

.secondary-text a:hover {
    text-decoration: underline;
}

.logo-wrapper {
    height: 300px; /* Adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-item-wrapper {
    position: relative;
}

#monster-logo-wrapper {
    height: 100px;
    width: 100px;
    margin-bottom: -50px; /* Negative margin to create overlap */
    z-index: 999;
}

#text-logo-wrapper {
    height: 200px;
    width: 500px;
}

.logo-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease-in-out;
    opacity: 0;
}

.monster-logo {
    width: 100px;
    height: 100px;
}

.text-logo {
    height: 200px;
    width: auto;
}

/* Logo visibility states */
.logo-image.logo-visible {
    opacity: 1;
}

.logo-image.logo-hidden {
    opacity: 0;
    pointer-events: none;
}

#theme-toggle-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    /* Removed border */
    cursor: pointer;
    padding: 0.5rem;
    color: inherit; /* Inherit text color from body */
    z-index: 20; /* Ensure it's above other elements */
    transition: color 0.4s ease-in-out;
    /* Keep button visible during theme transitions */
    opacity: 1 !important;
}

/* Theme transition effect for all content */
.theme-transition {
    transition: opacity 0.4s ease-in-out;
    opacity: 1;
}

.theme-transition.fade-out {
    opacity: 0;
}

/* Hide reCAPTCHA badge - allowed by Google if we show the text elsewhere
   Using visibility: hidden (not display: none) to ensure spam checking still works */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Loading spinner for form submission */
.button-loader {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.loader-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid var(--button-text-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.themed-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.themed-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.themed-button #button-text {
    display: inline-block;
    transition: opacity 0.2s ease;
}

.themed-button.loading #button-text {
    opacity: 0;
}

.themed-button.loading #button-loader {
    display: inline-flex;
    opacity: 1;
}