/*
 * signup.css
 * Styles specific to the signup.html page.
 * This file should be linked after global.css in your signup.html.
 */

/* ========================================= */
/* Form Container (signup-section) */
/* ========================================= */

.signup-section {
    /* Tailwind already handles padding, rounded-xl, shadow-2xl, border, max-w-md, mx-auto */
    /* Adding a subtle animation for when the card appears, if desired */
    animation: fadeInScale 0.5s ease-out forwards;
    opacity: 0; /* Start hidden for animation */
    transform: scale(0.95); /* Start slightly smaller for animation */
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================= */
/* Form Title and Description */
/* ========================================= */

.form-title {
    /* Tailwind classes handle font-size, font-bold, text-center, text-gray-900, mb-2 */
    /* You can add custom text-shadow or other effects here */
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.1); */
}

/* ========================================= */
/* Form Inputs */
/* ========================================= */

.form-input {
    /* Tailwind classes handle block, w-full, px-4, py-2, border, rounded-lg, shadow-sm, focus styles */
    /* Customizing placeholder color */
    &::placeholder {
        color: #9ca3af; /* Tailwind's gray-400 */
        opacity: 1; /* Firefox default is lower opacity */
    }
    /* Add a subtle inset shadow for depth */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.form-input:focus {
    /* Ensure focus ring is prominent and consistent */
    border-color: #3b82f6; /* Tailwind's blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); /* Custom ring color with transparency */
}

/* ========================================= */
/* Message Display Area */
/* ========================================= */

.form-message {
    /* Tailwind classes handle text-center, text-sm, font-semibold, py-2, rounded-md, hidden */
    /* Adding specific background colors for different message types (controlled by auth.js) */
    /* These will be applied dynamically by auth.js */
    &.text-green-600 {
        background-color: #d1fae5; /* Tailwind's green-100 */
        border: 1px solid #34d399; /* Tailwind's green-400 */
    }
    &.text-red-600 {
        background-color: #fee2e2; /* Tailwind's red-100 */
        border: 1px solid #ef4444; /* Tailwind's red-500 */
    }
    &.text-blue-600 { /* For info messages */
        background-color: #dbeafe; /* Tailwind's blue-100 */
        border: 1px solid #60a5fa; /* Tailwind's blue-400 */
    }
}

/* ========================================= */
/* Submit Button */
/* ========================================= */

.btn-submit {
    /* Tailwind classes handle w-full, flex, justify-center, py-3, px-4, rounded-lg, shadow-sm, text-lg, font-semibold, text-white, bg-blue-600, hover:bg-blue-700, focus styles, transition, transform, hover:scale-105 */
    /* Add a subtle gradient for a more premium feel */
    background: linear-gradient(to right, #3b82f6, #2563eb); /* Tailwind blue-500 to blue-700 */
    border: none; /* Remove default border */
    position: relative;
    overflow: hidden; /* For hover effect */
}

.btn-submit:hover {
    background: linear-gradient(to right, #2563eb, #1d4ed8); /* Darker gradient on hover */
}

/* Optional: Add a ripple effect or subtle glow on hover/focus for buttons */
.btn-submit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
}

.btn-submit:hover::before {
    width: 200%;
    height: 200%;
    opacity: 1;
}

/* ========================================= */
/* Link to Login Page */
/* ========================================= */

.text-center a {
    /* Tailwind classes handle text-blue-600, hover:text-blue-800, font-medium, transition, duration-300 */
    /* Add a subtle underline on hover */
    text-decoration: none;
    position: relative;
}

.text-center a:hover {
    text-decoration: underline; /* Standard underline on hover */
}

/* You can add more specific styles here as your design evolves */