/* ===========================================
   Login Page - Google Sign-In Button
   Following Google Branding Guidelines
   =========================================== */

/* Import Roboto font for Google button */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

/* ===========================================
   Brand Header - Logo and Title
   =========================================== */

.login-brand-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    gap: 12px;
}

.login-logo {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.login-title {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a2e;
    font-family: 'Roboto', Arial, sans-serif;
}

/* ===========================================
   Fix Button Spacing - Prevent Collision
   =========================================== */

.um .um-col-alt-b {
    margin-top: 16px !important;
}

.um-form .um-button,
.um input.um-button {
    margin-bottom: 12px !important;
}

/* ===========================================
   Social Login Section
   =========================================== */

/* Style the social login title text */
.the_champ_social_login_title {
    font-size: 14px !important;
    color: #5f6368 !important;
    font-weight: 400 !important;
    margin: 24px 0 16px !important;
    text-align: center !important;
    font-family: 'Roboto', Arial, sans-serif !important;
}

/* Container for social login buttons */
.the_champ_login_ul {
    display: flex !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* Hide the li bullet/styling */
.the_champ_login_ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===========================================
   Google Sign-In Button
   Official Google Branding Guidelines
   =========================================== */

#theChampGoogleButton,
.theChampGoogleLogin {
    /* Layout */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    
    /* White button with visible border and shadow */
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #4285f4 !important;
    border-radius: 8px !important;
    
    /* Larger size for visibility */
    padding: 12px 24px !important;
    height: 48px !important;
    min-width: 280px !important;
    box-sizing: border-box !important;
    
    /* Subtle shadow for depth */
    box-shadow: 0 2px 4px rgba(66, 133, 244, 0.2) !important;
    
    /* Interaction */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    
    /* Remove any default background */
    background-position: initial !important;
    background-repeat: initial !important;
}

#theChampGoogleButton:hover,
.theChampGoogleLogin:hover {
    background-color: #f8faff !important;
    border-color: #1a73e8 !important;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Google G Logo - add via ::before */
#theChampGoogleButton::before {
    content: '' !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z'/%3E%3Cpath fill='%23EA4335' d='M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}

/* "Continue with Google" text */
#theChampGoogleButton::after {
    content: 'Continue with Google' !important;
    font-family: 'Roboto', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.25px !important;
    color: #3c4043 !important;
    font-style: normal !important;
    white-space: nowrap !important;
}

/* Hide the original icon/content inside button */
#theChampGoogleButton > *,
#theChampGoogleButton i {
    display: none !important;
}