/* --- Root Variables for Gold Pattern Fix and Colors --- */
:root {
    --logo-white-bg: #f8f8f8;
    --logo-blue-base: #2962ff; /* Solid deep blue for button base */
    --logo-gold-hover: #FFA000; /* Gold/Amber for button hover */
}

/* --- Global & Typography --- */
body {
    /* Set a base color */
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    position: relative;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-end; 
}

/* --- Background Shapes Styling (Optional - keep only if you are using blue shapes) --- */
.background-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    overflow: hidden;
    /* Z-index 1 is slightly above the gold pattern's Z-index 0 */
    z-index: 1; 
}

/* --- GOLD BACKGROUND PATTERN (FIXED & FUNCTIONAL) --- */
.acleda-background-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(229, 195, 81, 0.15),
        rgba(229, 195, 81, 0.15) 2px,
        transparent 2px,
        transparent 100px
    ), linear-gradient(to top, var(--logo-white-bg), #eeeeee);
    opacity: 1.0; 
}


/* --- Logo Styling --- */
.logo-container {
    z-index: 10;
}

.login-logo-img {
    max-width: 120px;
    height: auto;
    display: block;
    margin-bottom: 20px;
}


/* --- Content Styling --- */
.custom-login-container {
    max-width: 400px;
    z-index: 10;
    position: relative; 
    padding-bottom: 70px !important; 
    margin-bottom: 0; 
}

.custom-heading {
    font-size: 3.5rem;
    font-weight: 800; 
}

.custom-subtext {
    color: #555;
}

.custom-heart {
    color: #ff4081; 
}

/* --- Form Elements (INPUT FOCUS EFFECT ADDED) --- */
.custom-input {
    width: 100%; 
    background-color: #f7f7f7; 
    border: none;
    border-radius: 15px; 
    padding: 15px 20px;
    border: 1px solid #e0e0e0;
    
    /* NEW: Smooth transition for focus effect */
    transition: all 0.3s ease; 
}

.custom-input:focus {
    outline: none; /* Remove default focus outline */
    border-color: var(--logo-blue-base); /* Blue border on focus */
    box-shadow: 0 0 0 4px rgba(41, 98, 255, 0.2); /* Subtle blue glow */
    background-color: #ffffff; /* White background when active */
}

/* --- Button Styling (EFFECTS ADDED & CONFLICT RESOLVED) --- */
.custom-btn-primary {
    background-color: var(--logo-blue-base); /* Solid deep blue */
    border-color: var(--logo-blue-base);
    border-radius: 15px; 
    padding: 15px 0;
    font-weight: 700;
    color: #ffffff !important; /* Text color forced to white for contrast on blue base */
    
    /* ENHANCED: Added transitions for transform and shadow */
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; 
}

.custom-btn-primary:hover, .custom-btn-primary:focus {
    /* CHANGED: Using Gold/Amber for hover */
    background-color: var(--logo-gold-hover); 
    border-color: var(--logo-gold-hover);
    
    /* NEW: Lift and shadow effect */
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(255, 160, 0, 0.5); /* Gold/Amber shadow */
    
    /* Ensure text remains dark/readable on the gold hover color if needed, but keeping white for now */
    color: #ffffff !important; 
}

/* --- Cancel Link Styling (GOLD/AMBER) --- */
.custom-cancel-link {
    font-size: 0.9rem;
    text-decoration: none;
    color: #FFC107 !important; 
}