@font-face {
    font-family: Poppins-Regular;
    src: url("../fonts/Poppins-Regular.otf") format("opentype");
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* keep a dark background so any uncovered edges blend with the image */
    background: none;
    background-color: #0b0f13;
    color: #111;
}

.login-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    overflow: hidden;
    background: transparent;
    padding-bottom: env(safe-area-inset-bottom, 16px);
}

/* debug outline removed */

/* Background image element (index.php uses an <img class="background-image">) */
.background-image {
    position: absolute;
    inset: 0;
    /* ensure the image fills the viewport and won't show the page background when we reduce visual zoom
       prefer using object-fit: cover without CSS transform, and adjust object-position to show more of the top */
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center 12%;
    display: block;
    z-index: 0;
    pointer-events: none;
}

/* On very narrow / short viewports reduce the scale further so the image appears farther away */
@media (max-width: 640px), (max-height: 820px) {
    /* On small viewports favor top focal point so card doesn't cover important face area */
    /* Move image slightly up via object-position and a small translate so the face sits higher
       and the card doesn't feel so close. */
    .background-image { object-position: center 12%; transform: translateY(-5vh); }
}

/* Target small narrow phones (approx 416x635) — reduce card height and move image up */
@media (max-width: 430px) and (max-height: 660px) {
    .background-image { object-position: center 6%; transform: translateY(-10vh); }
    .card-banner { padding: 12px 10px 14px !important; max-width: 100vw; }
    .logo-banner { max-width: 160px; }
    .card-titulo { font-size: 20px; padding: 12px; }
    .card-banner .btn { padding: 10px 16px; font-size: 14px; width: 80%; margin: 12px auto 0 auto; }
    /* balance bottom padding to match smaller card height */
    .login-container { padding-bottom: 360px; }
}

/* Ensure page can scroll on mobile; do not force overflow hidden */

html, body { height: 100%; }

/* subtle overlay to darken lower part of the background so the card reads better */
.login-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(transparent 40%, rgba(11,15,19,0.34) 100%);
}

.card-banner { margin-top: -8px; padding-top: 0; padding-bottom: 8px; }
.logo-banner { margin-top: 0; margin-bottom: 0; }

/* Prevent card from permanently covering content: give container bottom padding equal to card approximate height on small screens */
@media (max-width: 640px) {
    /* increase bottom padding so the fixed card doesn't completely cover the image on most phones */
    .login-container { padding-bottom: 420px; }
}

/* If you add a separate <img class="background-image"> element, use a rule like:
.background-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
Keeping the background on the `body` to avoid duplicate images. */
.card-banner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    margin: 0 auto;
    margin-top: -8px;
    width: 100%;
    max-width: 420px;
    border-top-left-radius: 1.2rem!important;
    border-top-right-radius: 1.2rem!important;
    padding: 0 0 16px 0;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
}
@media (max-width: 640px), (max-height: 820px) {
    .card-banner {
        margin-top: 0 !important;
        border-radius: 1rem 1rem 0 0 !important;
        max-width: 100vw;
        padding: 18px 12px 28px !important;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
        z-index: 60;
    }
    /* keep extra bottom space so background stays visible above the card on most phones */
    .login-container {
        padding-bottom: 420px;
    }
    .btn {
        margin-bottom: 8px !important;
    }
}

.card-titulo {
    font-size: 26px;
    padding: 30px;
}

.logo-banner {
    max-width: 220px;
    width: 100%;
    height: auto;
    margin: 0 auto 0 auto; /* sem espaço superior nem inferior */
    display: block;
}

.card-banner .btn {
    padding: 10px 20px;
    font-size: 15px;
    border-radius: 8px;
    background-color: #1351B4 !important;
    box-shadow: 0 6px 14px rgba(19,81,180,0.12);
    color: #fff;
}

@media (max-width: 480px) {
    .card-banner .btn { width: 88%; display: block; margin: 12px auto 0 auto; padding: 12px 18px; font-size: 16px; }
}

.card-subtitulo { margin-top: 0; }
.terms { margin-top: 16px; }

.button-border {
	
}