.app-centered {
max-width: 1440px;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 1500px) {
.app-centered { max-width: 100vw; }
}

/* LOGIN/SIGNUP */

/* Make authentication Django form fields use Bootstrap styling */
#id_username,
#id_password,
#id_password1,
#id_password2 {
    width: 100% !important;
}

.c-auth-box {
    width: 100%;
    max-width: 544px;
    border-radius: 18px;
    /* Use a solid white outer surface and clip contents so the page background can't peek through rounded corners */
    background: #ffffff;
    overflow: hidden;
    border: none;
}

/* Auth card specific styling */
.c-auth-box .card-body {
    /* the outer .c-auth-box supplies the white surface; keep body transparent to avoid double radii */
    background: transparent;
    border-radius: 0;
}

.c-auth-box {
    /* subtle outer highlight + shadow to match design */
    box-shadow: 0 10px 30px rgba(39, 83, 93, 0.12);
}

/* LAYOUT - Sticky Footer */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* page background gradient for auth pages using Figma colors (keeps Bootstrap for layout) */
    
    /* subtle radial highlight near top-right removed from global body
       Moved into .gradient-bg so only selected pages show the gradient */
    background-color: #eef6f5; /* neutral default page background */
}

/* Apply this class on pages that need the Figma gradient background */
.gradient-bg {
    background-image: radial-gradient(600px 300px at 85% 10%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 40%), linear-gradient(90deg, #078EBE 0%, #46C3C1 45%, #84F7C4 100%);
    background-attachment: fixed;
    background: linear-gradient(90deg, #078EBE 0%, #46C3C1 45%, #84F7C4 100%);
}

/* Typography */
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-weight: 300;
    font-size: 16px; /* Body1 per Figma */
    color: #1f1f1f;
}

/* Heading / Title font - Wix Madefor Display (fallbacks used if not available) */
.c-auth-box .card-title {
    font-family: Wix Madefor Display;
font-weight: 800;
font-style: Bold;
font-size: 40px;
line-height: 37px;
letter-spacing: 0%;
text-align: center;
}

.c-auth-box .card-description {
font-family: Poppins;
font-weight: 300;
font-style: Light;
font-size: 16px;
line-height: 20px;
letter-spacing: 0%;
text-align: center;


}

.c-auth-box .card-input {
font-family: Wix Madefor Display;
font-weight: 800;
font-style: Bold;
font-size: 16px;
line-height: 16px;
letter-spacing: 0%;
margin-bottom: 8px;
}

.c-auth-box .card-password-reset {
font-family: Poppins;
font-weight: 300;
font-style: Light;
font-size: 12px;
line-height: 20px;
letter-spacing: 0%;
color: #010101;
text-decoration: none;
margin-top: -6px;

}

.c-auth-box .card-button {
    font-family: Wix Madefor Display;
font-weight: 800;
font-style: Bold;
font-size: 20px;
line-height: 20px;
letter-spacing: 0%;
}

.c-auth-box .bottom-text {
    font-family: Poppins;
font-weight: 300;
font-style: Light;
font-size: 12px;
line-height: 20px;
letter-spacing: 0%;

}

.c-auth-box .bottom-text a {
    text-decoration: none;
    color: #46C3C1;
}

.c-auth-box .bottom-text-sign-up {
    font-family: Poppins;
font-weight: 300;
font-style: Light;
font-size: 12px;
line-height: 20px;
letter-spacing: 0%;
margin-bottom: 4px !important;

}

/* Custom input/select styling for onboarding and similar forms */
.input-custom {
    border-radius: 12px;
    max-height: 48px;
    border: 1px solid #393939 !important; /* Tailwind gray-300, adjust as needed */
    box-shadow: none;
    background: #ffffff !important;
    color: #111 !important;
    font-size: 17px;
    transition: box-shadow 120ms ease, border-color 120ms ease;
    width: 100%;
}

.input-custom::placeholder {
    color: #cfcfcf;
    font-size: 16px;
    font-weight: 300;
}


/* Make all headings use the display font so titles are consistent across the site */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Wix Madefor Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
}

.main-container {
    flex: 1;
}

footer {
    margin-top: auto;
}

/* FOOTER HOVER EFFECTS */
footer a:hover {
    color: #ffffff !important;
    transition: color 0.2s ease;
}

/* --- Form tweaks inside the auth card --- */
.c-auth-box .form-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #222;
}



/* Bootstrap inputs inside auth card */
.c-auth-box .form-control {
    border-radius: 12px; /* rounder corners */
    padding: 16px 20px; /* more internal spacing */
    height: 64px; /* larger clickable area */
    border: 1px solid rgba(16,24,32,0.06);
    box-shadow: none;
    background: #ffffff !important; /* force white input background */
    color: #111 !important;
    -webkit-appearance: none;
    font-size: 17px; /* larger text for readability */
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

.c-auth-box .form-control::placeholder {
    color: #cfcfcf;
    font-size: 16px;
}

.c-auth-box .form-control:focus {
    border-color: rgba(6,143,135,0.45);
    box-shadow: 0 0 0 0.15rem rgba(6,143,135,0.10);
    outline: none;
}

/* Autofill overrides so browsers don't apply a dark background */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    -webkit-text-fill-color: #111 !important;
}

.c-auth-box .subtitle {
    color: #6b6b6b;
    font-size: 0.95rem;
    margin-top: -6px;
    margin-bottom: 18px;
}

.btn-cta {
    background: linear-gradient(180deg,#66c8c0 0,#4fbfb7 100%);
    border: none;
    color: #fff !important;
    font-weight: 800 !important;
    padding: 14px 18px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    /* use the display font family for the button label */
    font-family: 'Wix Madefor Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 18px !important;
}



.c-auth-box p.small-muted {
    color: #8a8a8a;
    font-size: 0.85rem;
}