/* Oven branded login and forgot password pages (client_id=Oven).

   Every custom class is prefixed ov- (Oven). This is deliberate, not
   cosmetic: this identity host unconditionally loads other clients' global
   stylesheets (e.g. xene_style.css) on every login page regardless of which
   client is signing in, and those collide on plain names like .login-wrapper,
   .btn, .form-control-wrap, etc. Same convention as Orion (or-) and
   Equinox (eq-).

   Sizes and spacing follow the CRM login / forgot password pages
   (CRMLogIn.cshtml, CRMForgotPassword.cshtml and css/fortis/style.css): a
   1154px card, 90vh tall up to 635px, split in half; 95px padding round the
   form; 43px outlined inputs whose label floats onto the border, 48px
   buttons, 20px between rows. Colors and fonts follow the Oven Web Figma
   "Sign in" / "Forgot Password" frames: #D62893 primary, #212429 text;
   Quicksand headings, Figtree body text, Poppins in the sign-in inputs. The
   layout's xene_style.css forces Mulish on body and on a/button/input with
   !important, so the font is set on .ov-login-wrapper (inherited) and, for
   a/button/input, on their own classes with !important.
   The left panel is the four Figma panels exported as images (login-panel.webp,
   login-panel-2.webp, forgot-panel.webp and integrations-panel.webp), which both
   pages cross-fade between (_OvenSlides.cshtml) — sign-in starting from the
   pink one, forgot password from the blue one; the gradient underneath is the
   panel color, shown until the image loads. They are WebP rather than PNG to
   keep them small (~60-100 KB each instead of 1.4-2.2 MB), so the panel
   paints at once rather than slowly top to bottom. */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    color: #212429;
    background: #ffffff;
}

/* The card (CRM .login-container): centered on the page, panel on the left
   half, form on the right half. */
.ov-login-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(1154px, 100% - 30px);
    height: 90vh;
    max-height: 635px;
    margin: calc((100vh - min(90vh, 635px)) / 2) auto 0;
    background: #ffffff;
    font-family: 'Figtree', sans-serif;
}

/* ── Left — exported Figma panel ─────────────────────────────────────────── */
.ov-left-sec {
    display: none;
    position: relative;
    /* Fills the left half of the card, like the CRM slider. */
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
    .ov-left-sec {
        display: block;
    }
}

.ov-panel-login {
    background-image: url("../../assets/common/images/oven/login-panel.webp"), linear-gradient(180deg, #f239b2 0%, #e034a0 100%);
}

.ov-panel-login-2 {
    background-image: url("../../assets/common/images/oven/login-panel-2.webp"), linear-gradient(180deg, #2cc17d 0%, #29845b 55%, #1e4433 100%);
}

.ov-panel-forgot {
    background-image: url("../../assets/common/images/oven/forgot-panel.webp"), linear-gradient(180deg, #2b4f78 0%, #2e84d8 100%);
}

.ov-panel-integrations {
    background-image: url("../../assets/common/images/oven/integrations-panel.webp"), linear-gradient(180deg, #f2944a 0%, #d9773a 50%, #6e4a36 100%);
}

/* Until the page has loaded, only the panel shown first has its image: the
   hidden ones (opacity 0) would otherwise all download at the same time and
   share the bandwidth with it. The script in _OvenSlides.cshtml adds
   ov-slides-ready once the page has loaded, before the first cross-fade. */
.ov-left-sec:not(.ov-slides-ready) .ov-slide:not(.ov-slide-active) {
    background-image: none;
}

/* The panels are stacked slides inside .ov-left-sec, and the active one fades
   in (see the script in _OvenSlides.cshtml). */
.ov-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.ov-slide-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ov-slide {
        transition: none;
    }
}

/* ── Right — form, with the footer 60px under it ─────────────────────────── */
/* CRM .left-sec / .content-area: half the card, the form and footer centered
   in it together with 95px padding round them. As on CRM, a form taller than
   the card overflows it evenly at the top and bottom. */
.ov-right-sec {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    height: 100%;
}

.ov-right-inner {
    width: 100%;
    padding: 95px 95px 0;
}

/* Below the panel breakpoint: form only, full width, 30px padding. */
@media (max-width: 1023px) {
    .ov-login-wrapper {
        width: 100%;
        max-width: 50rem;
        height: auto;
        max-height: none;
        margin: 0 auto;
    }

    .ov-right-sec {
        width: 100%;
        height: auto;
    }

    .ov-right-inner {
        padding: 30px 30px 0;
    }
}

.ov-brand-logo {
    margin-bottom: 30px;
}

.ov-brand-logo img {
    height: 36px;
}

.ov-hello-text {
    font-family: 'Quicksand', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #212429;
    margin-bottom: 8px;
}

.ov-hello-sub-text {
    font-size: 14px;
    color: #72767a;
    margin-bottom: 25px;
}

/* Outlined inputs with a floating label, as on the CRM login: the label sits
   in the middle of the empty field and moves onto the top border (on a white
   strip that cuts the border) once the field is focused or has a value. The
   input needs placeholder=" " for :placeholder-shown to work. */
.ov-form-control-wrap {
    position: relative;
    margin-bottom: 20px;
}

/* CRM text field: 43px, 1px #E2E3EA border, 5px radius, #FBFBFB fill, 10px
   side padding (12px on forgot password). */
.ov-login-form-control {
    display: block;
    width: 100%;
    height: 43px;
    padding: 0 10px;
    border: 1px solid #e2e3ea;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px;
    color: #212429;
    background: #fbfbfb;
    outline: none;
    transition: border-color 0.15s ease;
}

.ov-login-form-control:hover,
.ov-login-form-control:focus {
    border-color: #d62893;
}

.ov-login-form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px #fbfbfb inset;
    -webkit-text-fill-color: #212429;
}

.ov-floating-label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.2;
    color: #212429;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.ov-login-form-control:focus + .ov-floating-label,
.ov-login-form-control:not(:placeholder-shown) + .ov-floating-label {
    top: -7px;
    transform: none;
    font-size: 12px;
    color: #a5a5a5;
    background: #ffffff;
}

/* Kept separate: a browser that doesn't know the pseudo-class drops the whole rule. */
.ov-login-form-control:-webkit-autofill + .ov-floating-label {
    top: -7px;
    transform: none;
    font-size: 12px;
    color: #a5a5a5;
    background: #ffffff;
}

.ov-required {
    color: #d62893;
}

.ov-item2sec .ov-login-form-control {
    padding-right: 40px;
}

/* The button is sized to the field (not 50% of the wrapper, which grows when a
   validation message shows) and centers the icon with flex, so the eye stays in
   the vertical middle of the field whether it is empty, focused or filled. */
.ov-password-toggle {
    position: absolute;
    top: 0;
    right: 12px;
    width: 20px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

.ov-password-toggle img {
    width: 20px;
    height: 20px;
}

.ov-eye-open {
    display: none;
}

.ov-showpassword .ov-eye-close {
    display: none;
}

.ov-showpassword .ov-eye-open {
    display: inline-block;
}

.ov-error-message {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #dc2626;
}

.ov-validation-summary {
    margin-bottom: 20px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 13px;
    color: #991b1b;
}

.ov-validation-summary ul {
    list-style: none;
}

.ov-success-summary {
    margin-bottom: 20px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 13px;
    color: #166534;
}

/* 40px below: CRM has an empty reCAPTCHA row with its own 20px margin
   between this row and the button. */
.ov-login-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.ov-remember-me {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ov-inp-cbx {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid #ececf1;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}

.ov-inp-cbx:checked {
    border-color: #d62893;
    background: #d62893;
}

.ov-inp-cbx:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ov-cbx-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #72767a;
    cursor: pointer;
}

.ov-forgot-password {
    font-family: 'Figtree', sans-serif !important;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    margin-top: 10px;
    color: #d62893;
    text-decoration: none;
}

.ov-forgot-password:hover {
    text-decoration: underline;
}

.ov-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 4px;
    font-family: 'Figtree', sans-serif !important;
    font-size: 14.4px;
    line-height: 1.5;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ov-btn-primary {
    background: #d62893;
    color: #ffffff;
}

.ov-btn-primary:hover {
    background: #bc0074;
}

/* 1px tall like the CRM divider: the "Or" text overflows it, so the gaps to
   the buttons are exactly 20px. */
.ov-or-section {
    display: flex;
    align-items: center;
    height: 1px;
    margin: 20px 0;
    color: #9a98a3;
    font-size: 14px;
}

.ov-or-section::before,
.ov-or-section::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e6e3ea;
}

.ov-or::before,
.ov-or::after {
    display: none;
}

.ov-or {
    margin: 0 12px;
}

.ov-sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #e6e3ea;
    border-radius: 4px;
    font-family: 'Figtree', sans-serif !important;
    color: #212429;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.ov-sso-btn:hover {
    background: #fff5fb;
}

.ov-image {
    width: 16px;
    height: 16px;
}

/* Forgot password — "Back to Sign in" under the Continue button */
/* 40px: the CRM button row's 20px margin plus the link's own 20px. */
.ov-back-link {
    margin-top: 40px;
    font-size: 14px;
    line-height: 1;
    color: #72767a;
    text-align: center;
}

.ov-back-link a {
    margin-left: 5px;
    font-family: 'Figtree', sans-serif !important;
    color: #d62893;
    font-weight: 600;
    text-decoration: none;
}

.ov-back-link a:hover {
    text-decoration: underline;
}

.ov-page-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 60px;
    padding: 0 95px 95px;
    font-size: 12px;
    line-height: 1;
    color: #72767a;
}

.ov-powered-by {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ov-powered-by img {
    height: 20px;
}

@media (max-width: 1023px) {
    .ov-page-footer {
        padding: 0 30px 30px;
    }
}

/* Forgot password (CRMForgotPassword): 12px side padding in the email field,
   a Figtree placeholder (Figma) and 16px Continue text. */
/* 40px under the email field: CRM has an empty validation row with its own
   20px margin before the button. */
.ov-forgot-page .ov-form-control-wrap {
    margin-bottom: 40px;
}

.ov-forgot-page .ov-login-form-control {
    padding-left: 12px;
    padding-right: 12px;
}

.ov-forgot-page .ov-floating-label {
    font-family: 'Figtree', sans-serif;
}

.ov-forgot-page .ov-btn {
    font-size: 16px;
}