/*
This file should only be used by hesk clients to apply any custom overwrites to core files,
and ensure these changes are included in the bundled css.

Please only change this file if you know what you are doing.
Any general thematic changes should rather be done as part of /theme changes of theme_overrides.css
*/

/* =========================================================
   LOGIN PAGE - Two-column layout (matches admin login style)
   ========================================================= */

/* Hide the site header and breadcrumbs on the login page */
html.page-login .header,
html.page-login .breadcrumbs {
    display: none;
}

/* Make wrapper fill viewport height so the two columns stretch */
html.page-login .wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

html.page-login .main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0;
    margin: 0;
}

/* Two-column flex wrapper */
.reg__wrap {
    display: flex;
    flex-grow: 1;
}

/* Left column: hero image */
.reg__image {
    position: relative;
    width: calc(100vw - 504px);
}

.bg-absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #fcfcfc;
}

.bg-absolute img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right column: form panel */
.reg__section {
    margin-left: auto;
    width: 100%;
    max-width: 504px;
    padding: 60px 1rem 1.5rem;
    box-shadow: 0 4px 10px 2px rgba(216, 216, 221, 0.5);
    position: relative;
}

/* Inner centering box */
.reg__box {
    height: 100%;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

/* Heading inside the form panel */
.reg__heading {
    margin-bottom: 8px;
    margin-top: 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
}

.reg__heading + .form {
    margin-top: 16px;
}

/* Footer link (forgot password, etc.) */
.reg__footer {
    margin-top: 32px;
    text-align: center;
}

/* Responsive: stack columns on small screens */
@media (max-width: 899px) {
    .reg__wrap {
        flex-direction: column;
    }
    .reg__image {
        display: none;
    }
    .reg__section {
        max-width: 100%;
        box-shadow: none;
        padding-top: 32px;
    }
}