body {
    width: 100vw;
    height: 100vh;
    /* allow scrolling on small screens and avoid cutting content */
    overflow: auto;
}
.ad-banner {
    height: 100vh;
    object-fit: cover;
}

/* Layout fixes: place the app name above the form and avoid overlap */
.container-fluid .row > .col-md-8 .position-relative {
    /* put title at the top and push content down */
    justify-content: flex-start !important;
    padding: 3rem 2rem;
    min-height: 100vh;
    box-sizing: border-box;
}

.login-card{
    /* use normal flow so it stacks under the title instead of overlapping */
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 1.5rem auto 0;
    width: 70%;
    border-radius: 20px;
}
.auth-input-group input{
    border-radius: 30px;
    padding: 15px;
}
.auth-input-group input[type="checkbox"]{
    padding: unset;
}
span.input-group-text {
    border-radius: 50%;
    padding: 20px;
    color: silver;
}

input::placeholder {
    font-weight: bolder;
    color: #e6e6e6;
}
.form-control:focus {
    box-shadow: none!important;
    outline: none!important;
}
.forgot-password a{
    text-align: right;
    text-decoration: none;
    color: rgb(128, 128, 128);
}
.login-button{
    border-radius: 30px;
    padding: 15px 35px !important;
}
.error-msg{
    position: absolute;
    list-style: none;
    color: red;
    bottom: -32px;
    font-size: 12px;
    left: 26px;
}
.language-switch{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 150px;
    z-index: 99;
}

/* Stylish Name */
.app-name {
    font-size: 3rem;
    font-weight: bold;
    color: #6f42c1;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 2rem;
    text-align: center;
}

/* Hide the layout app-name on login page to avoid duplication */
body.login-page .app-name {
    display: none;
}

/* Inline app name inside login card */
.app-name-inline {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: #1f2937; /* slightly darker for contrast */
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: -0.5px;
    /* Layered text-shadow to create a subtle 3D / lifted effect */
    text-shadow:
        0 1px 0 rgba(255,255,255,0.6),
        0 2px 0 rgba(0,0,0,0.06),
        0 6px 18px rgba(0,0,0,0.10),
        0 10px 30px rgba(99,102,241,0.06);
    -webkit-text-stroke: 0.2px rgba(0,0,0,0.04);
    transform: translateZ(0);
}

@media (max-width: 991.98px) {
    .container-fluid .row > .col-md-8 .position-relative {
        padding: 2rem 1rem;
    }
    .login-card{
        width: 90%;
    }
    .app-name {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .app-name-inline {
        font-size: 2.25rem;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .ad-banner { display: none; }
    .app-name { margin-top: 1rem; }
    .login-card{ width: 100%; margin: 1rem; }
}

/* ===== Auth page (login) styles - scoped to the login page ===== */
body.login-page {
    --bg-1: #f6effb;
    --bg-2: #f1e6ff;
    --accent-teal: #10b981;
    --card-radius: 16px;
    --card-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
    background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.login-page .auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

body.login-page .auth-card {
    width: 80vw;
    max-width: 1200px;
    height: 86vh;
    max-height: 92vh;
    min-height: 72vh;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

body.login-page .auth-row {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: var(--card-radius);
    overflow: hidden;
    min-height: 100%;
}

body.login-page .auth-form {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.login-page .auth-image {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    min-height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

body.login-page .auth-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 89, 133, 0.45) 0%, rgba(124, 58, 237, 0.18) 60%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

body.login-page .image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    z-index: 2;
    color: #fff;
    text-align: center;
    flex-direction: column;
    gap: 8px;
}

body.login-page .image-overlay h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

body.login-page .image-overlay p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    max-width: 300px;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

body.login-page .form-label-visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

body.login-page .form-control {
    border-radius: 10px;
    height: 46px;
    border: 1px solid #e6e6ef;
    box-shadow: none;
}

body.login-page .input-group-text {
    background: transparent;
    border: none;
    width: 48px;
    justify-content: center;
    color: #9ca3af;
}

body.login-page .btn-signin {
    background: var(--accent-teal);
    border: none;
    height: 46px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.12);
    color: #fff;
    font-weight: 600;
}

body.login-page .forgot-link { font-size: 0.9rem; color: #6b7280; text-decoration: none; }
body.login-page .forgot-link:hover { text-decoration: underline; }

body.login-page .divider { display: flex; align-items: center; gap: 12px; color: #9ca3af; margin: 18px 0; font-size: 0.9rem; }
body.login-page .divider::before, body.login-page .divider::after { content: ""; flex: 1; height: 1px; background: #eef0f6; border-radius: 1px; }

body.login-page .social-btn { border-radius: 10px; border: 1px solid #eef0f6; background: #fff; padding: 8px 12px; min-width: 190px; display: inline-flex; align-items: center; gap: 10px; justify-content: center; color: #374151; font-weight: 600; text-decoration: none; }
body.login-page .social-btn i { font-size: 18px; }

body.login-page .auth-footer{ margin-top: 18px; color: #6b7280; font-size: 0.95rem; }
body.login-page .auth-footer a { color: var(--accent-teal); font-weight: 600; text-decoration: none; }
body.login-page .auth-footer a:hover { text-decoration: underline; }

/* Responsive: on smaller screens reduce width and remove min-width/min-height constraints */
@media (max-width: 1199.98px) {
    body.login-page .auth-card { width: 86vw; height: 82vh; max-height: 90vh; }
}
@media (max-width: 991.98px) {
    body.login-page .auth-form, body.login-page .auth-image { flex: 0 0 100%; max-width:100%; }
    body.login-page .auth-form { padding:34px 22px; }
    body.login-page .auth-image { min-height:300px; }
    body.login-page .auth-card { max-width:760px; width:92vw; height:auto; max-height:none; }
}
@media (max-width: 575.98px) {
    body.login-page .auth-form { padding:22px 14px; }
    body.login-page .image-overlay h2 { font-size:1.4rem; }
    body.login-page .image-overlay p { font-size:0.86rem; max-width:230px; }
    body.login-page .social-btn { min-width:140px; font-size:0.9rem; }
    body.login-page .auth-card { width:96vw; height:auto; }
}

/* End of auth page styles */