/* css/auth_styles.css for Krishna Gold Scheme */

/* Import decorative fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:wght@400;700&family=Dancing+Script:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap'); /* Added for more decorative headings */


/* CSS Variables (consistent with other parts of the site) */
:root {
    --color-gold-dark: #b38f40; /* Primary gold color */
    --color-gold-light: #d4af37; /* Lighter gold for accents/hover */
    --color-gold-deep-brown: #704c1b; /* Darker brown/gold for strong elements like header */
    --color-text-dark: #333; /* Default dark text */
    --color-white: #ffffff; /* White */
    --color-gray-100: #f3f4f6; /* Light gray background */
    --color-gray-200: #e5e7eb; /* Border color */
    --color-gray-300: #d1d5db;
    --color-gray-500: #6b7280;
    --color-gray-700: #4b5563;
    --color-gray-800: #1f2937; /* Very dark text/elements */
    --color-green-500: #22c55e; /* Success green */
    --color-red-500: #ef4444; /* Danger red */
    --color-blue-dark: #1e40af; /* A specific dark blue from index.html */

    /* Mapped to new consistent names if needed, but primarily use the ones above */
    --primary-theme-color: #a37a00; /* Adjusted to match the gold color in your header image */
    --secondary-theme-color: var(--color-gold-light);
    --accent-green: var(--color-green-500);
    --danger-red: var(--color-red-500);
    --page-bg-light: var(--color-gray-100);
    --card-border-color: var(--color-gray-200);
    --shadow-medium: 0 10px 25px rgba(0, 0, 0, 0.1); /* Softer, larger shadow */
    --shadow-strong: 0 15px 35px rgba(0, 0, 0, 0.2); /* Stronger shadow for hover */
}

body {
    font-family: 'Inter', sans-serif; /* Using Inter as per project standard, not Montserrat */
    background: radial-gradient(circle at center, #fdfaf6 0%, #e0d9d0 100%); /* Light background from your screenshot */
    color: var(--color-text-dark);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6;
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the top, allowing footer to push down */
    position: relative;
}

/* --- Header Section (from your screenshot) --- */
.header-section {
    background: linear-gradient(135deg, var(--primary-theme-color) 0%, var(--color-gold-light) 100%); /* Gold gradient */
    color: var(--color-white);
    padding: 20px 0;
    box-shadow: var(--shadow-medium);
    width: 100%;
    position: absolute; /* Position at the top */
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 1000;
    overflow: hidden; /* Hide overflowing content for scrolling text */
}
.header-container {
    max-width: 1200px; /* Standard max-width */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: center;
    flex-wrap: wrap;
}
.header-brand {
    display: flex;
    align-items: center;
    flex-direction: column; /* Stack logo and text */
    text-align: center;
    justify-content: center;
    width: 100%; /* Take full width for centering */
}
.header-brand .logo img {
    height: 60px; /* Adjust as needed */
    margin-bottom: 10px;
    max-width: 100%;
}
.current-gold-rate-display {
    font-size: 1.1em;
    color: var(--color-white);
    margin-top: 5px;
    font-weight: 700;
    background-color: rgba(0,0,0,0.2);
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap; /* Keep content on a single line */
    overflow: hidden; /* Hide content outside the box */
    position: relative; /* For absolute positioning of marquee */
    width: 100%; /* Ensure it takes full width for scrolling */
    box-sizing: border-box;
    height: 30px; /* Fixed height for consistent display */
    display: flex;
    align-items: center;
    /* Removed justify-content: center; to allow marquee to fill space */
}

/* Marquee effect for gold rates */
.gold-rates-marquee {
    display: inline-block; /* Make it an inline block to allow scrolling */
    /* Removed padding-left: 100%; as it creates initial gap */
    animation: marquee 25s linear infinite; /* Increased time for slower scroll */
    /* Ensure content takes enough width to prevent gaps */
    white-space: nowrap;
    will-change: transform; /* Optimize for animation */
}

.gold-rates-marquee span {
    margin-right: 50px; /* Increased space between rate items for better visual separation */
    display: inline-block; /* Important for margin-right to work */
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Changed to -50% to loop seamlessly with duplicated content */
}


/* --- Main Content Wrapper (Form Container) --- */
.main-content-wrapper {
    width: 95%;
    max-width: 550px; /* Adjusted max-width for the form card */
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    text-align: center;
    border-top: 5px solid var(--accent-green); /* Green accent border */
    position: relative;
    z-index: 1;
    margin-top: 150px; /* Push content below the absolute header */
    margin-bottom: 30px; /* Space above the footer */
    box-sizing: border-box;
    flex-grow: 1; /* Allow content to grow and push footer down */
    display: flex;
    flex-direction: column;
}

h2 {
    text-align: center;
    margin-bottom: 25px;
    color: var(--primary-theme-color); /* Gold color for heading */
    font-weight: 600;
}
/* Specific styling for family_login.php main heading */
.main-content-wrapper h2.fancy-heading {
    font-family: 'Cinzel Decorative', serif; /* More decorative and catchy font */
    font-size: 2.5em; /* Larger size */
    color: #4B5563; /* Darker gray for contrast */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* Stronger shadow */
    margin-bottom: 30px;
    letter-spacing: 0.05em; /* A bit of letter spacing */
}
/* Specific styling for family_login.php card titles */
.login-option-card h3 {
    font-family: 'Dancing Script', cursive; /* A decorative script font */
    font-size: 1.8em; /* Larger size */
    color: #a37a00; /* Gold color */
    text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.1);
}


.form-group {
    margin-bottom: 20px;
    text-align: left;
}
label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-gray-700);
    font-weight: 500;
}
label i {
    margin-right: 8px;
    color: var(--secondary-theme-color); /* Lighter gold for icons */
}
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--card-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1em;
    color: var(--color-text-dark);
}
.help-block {
    color: var(--danger-red);
    font-size: 0.9em;
    margin-top: 5px;
    display: block;
}
.alert-success {
    background-color: #e6ffed;
    color: var(--accent-green);
    border: 1px solid #a3e6b2;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 20px;
}
.alert-success a {
    color: var(--primary-theme-color);
    text-decoration: underline;
}
.alert-success a:hover {
    text-decoration: none;
}
.alert-danger {
    background-color: #ffe8e8;
    color: var(--danger-red);
    border: 1px solid #ffb3b3;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 20px;
}
.btn {
    display: inline-block;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to bottom, #e0c15c, #d4af37); /* Gold gradient */
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}
.btn:hover {
    background: linear-gradient(to top, #e0c15c, #d4af37); /* Invert gradient on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.login-link-container {
    text-align: center;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.login-link-container p { margin: 0; font-size: 0.95em; }
.login-link-container a {
    color: var(--primary-theme-color);
    text-decoration: none;
    font-weight: 500;
    transition: text-decoration 0.2s ease, color 0.2s ease;
}
.login-link-container a:hover {
    text-decoration: underline;
    color: var(--secondary-theme-color);
}

/* --- Login Option Cards (for family_login.php) --- */
.login-option-card {
    background: linear-gradient(145deg, #ffffff, #f9f9f9); /* Subtle gradient background */
    border-radius: 1rem;
    box-shadow: var(--shadow-medium);
    padding: 2rem;
    transition: all 0.3s ease;
    border: 1px solid var(--card-border-color);
}
.login-option-card:hover {
    box-shadow: var(--shadow-strong); /* Stronger shadow on hover */
    transform: translateY(-5px); /* Lift effect on hover */
}
.login-option-card .btn {
    padding: 0.8rem 1.5rem; /* Adjust button padding for cards */
    font-size: 1em;
}

/* --- Footer Section (Consistent with your screenshot) --- */
.footer-section {
    background-color: #5c4000; /* Darker gold/brown from your footer image */
    color: #f0f2f5; /* Light text color */
    padding: 2rem 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto; /* Pushes footer to the bottom of the flex container */
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}
/* Apply decorative font to the main footer text */
.footer-content p {
    font-family: 'Playfair Display', serif; /* Changed to Playfair Display for elegance and readability */
    font-size: 1.2em; /* Make it a bit larger for readability */
    font-weight: normal; /* Decorative fonts often look better with normal weight */
    margin-bottom: 0.5rem;
}
.footer-content .trust-points {
    font-family: 'Inter', sans-serif; /* Keep trust points readable */
    font-size: 0.9rem;
}
.footer-links {
    font-family: 'Inter', sans-serif; /* Keep links readable */
    font-size: 0.9rem;
}

.footer-links a {
    color: #f0f2f5;
    text-decoration: none;
    margin: 0 0.75rem;
    transition: color 0.3s ease;
}
.footer-links a:hover {
    color: #a37a00; /* Gold hover */
}
.footer-section .separator {
    margin: 0 0.5rem;
    color: #f0f2f5;
}
.trust-points span {
    margin: 0 0.5rem;
    white-space: nowrap;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .header-brand .logo img {
        height: 45px;
        margin-bottom: 5px;
    }
    .current-gold-rate-display {
        font-size: 1em;
        padding: 4px 10px;
    }
    .main-content-wrapper {
        padding: 25px;
        margin-top: 180px; /* Adjusted for mobile header height */
    }
    .main-content-wrapper h2.fancy-heading {
        font-size: 2em; /* Adjust for smaller screens */
    }
    .login-option-card h3 {
        font-size: 1.5em;
    }
    h2 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    .form-group {
        margin-bottom: 18px;
    }
    label {
        font-size: 0.95em;
    }
    input[type="text"],
    input[type="email"],
    input[type="password"] {
        padding: 10px;
        font-size: 0.9em;
    }
    .btn {
        padding: 14px;
        font-size: 1.05em;
    }
    .login-link-container {
        margin-top: 20px;
        gap: 8px;
    }
    .login-link-container p, .login-link-container a {
        font-size: 0.9em;
    }
    .footer-section {
        padding: 20px 15px;
    }
    .footer-content p {
        font-size: 1.1em; /* Adjust font size for mobile */
    }
    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .footer-links a {
        margin: 0;
    }
    .footer-section .separator {
        display: none;
    }
    .trust-points {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    .trust-points span {
        margin: 0;
    }
}

@media (max-width: 480px) {
    .header-section {
        padding: 15px 0;
    }
    .header-container {
        padding: 0 15px;
    }
    .header-brand .logo img {
        height: 40px;
    }
    .current-gold-rate-display {
        font-size: 0.9em;
        padding: 3px 8px;
    }
    .main-content-wrapper {
        padding: 15px;
        margin-top: 220px; /* Adjusted for very small screens */
        margin-bottom: 20px;
    }
    .main-content-wrapper h2.fancy-heading {
        font-size: 2em;
    }
    .login-option-card h3 {
        font-size: 1.3em;
    }
    h2 {
        font-size: 1.6em;
        margin-bottom: 15px;
    }
    .form-group {
        margin-bottom: 15px;
    }
    label {
        font-size: 0.85em;
    }
    input[type="text"],
    input[type="email"],
    input[type="password"] {
        padding: 8px;
        font-size: 0.85em;
    }
    .help-block {
        font-size: 0.8em;
    }
    .btn {
        padding: 10px;
        font-size: 0.95em;
    }
    .login-link-container {
        margin-top: 15px;
        gap: 5px;
    }
    .login-link-container p, .login-link-container a {
        font-size: 0.8em;
    }
    .footer-section {
        padding: 15px 10px;
        font-size: 0.75em;
    }
    .footer-content p {
        font-size: 1em; /* Further adjust font size for very small screens */
    }
}