/*
 * Login page: full-width pattern wallpaper behind both columns, form on a
 * white card in the right column. Loaded after thecalpressarea-style.css and
 * user-registration.css, so it only overrides what it needs (some base rules
 * use !important, hence the !important here too).
 *
 * pattern-bg.svg is the seamless repeat built from pattern-tile.svg
 * (staggered hex packing, which a plain repeat of the single tile can't do).
 * Keep background-size at the SVG's 166.5 x 288.39 ratio; scale both together.
 */
:root {
    --login-pattern-bg: #CA5625;   /* brand orange (pattern) */
    --login-accent: #B84E1F;       /* darker orange for text: 5.06:1 on white (WCAG AA) */
}

.login-pattern .wrapper {
    position: relative;
    min-height: 100vh;
    /* Photo scaled to always fill the full width and height of the window
       (cropped at the edges if the window ratio differs), centred, no
       repeat. The orange shows only while the image loads. */
    /* Local web-sized copies of background-image-login.jpeg (CDN original is 11 MB):
       1920px (~560 KB) on desktop, 1080px (~200 KB) on phones. */
    background: var(--login-pattern-bg) url("../img/login-bg.jpg") center center / cover no-repeat;
}
@media (max-width: 767px) {
    .login-pattern .wrapper {
        background-image: url("../img/login-bg-mobile.jpg");
    }
}

/* Both columns are transparent so the wallpaper runs across the full width. */
.login-pattern .wrapper .left,
.login-pattern .wrapper .right {
    background: transparent !important;
}

/* Form card */
.login-pattern .sign-up-container {
    box-sizing: border-box;
    width: calc(100% - 40px) !important;
    max-width: 440px;
    margin: 40px auto !important;
    padding: 48px 40px 28px;
    background: #fff !important;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

.login-pattern .LogoPirelliLogin {
    width: 240px;
    max-width: 100%;
}

/* Title: "Pirelli Calendar 2027" in Cormorant, "Press Area" in Noto Sans */
.login-pattern .title {
    line-height: 1.15;
}
.login-pattern .login-title-main {
    display: block;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 600;
    color: #111;
}
.login-pattern .login-title-sub {
    display: block;
    margin-top: 4px;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 300;
    color: #333;
}

.login-pattern input.input-box-330 {
    font-family: var(--font-sans);
    text-indent: 12px; /* inset text without changing the box width (keeps it aligned with the button) */
    border-color: #111;
}

.login-pattern input.btn {
    font-family: var(--font-sans);
    background-color: var(--login-accent);
    border-color: var(--login-accent);
    cursor: pointer;
}
.login-pattern input.btn:hover,
.login-pattern input.btn:focus-visible {
    background-color: #9E4219;
    border-color: #9E4219;
}

/* Copyright line (last row of the form) */
.login-pattern form .row:last-child {
    margin-bottom: 0;
    font-size: 11px;
    color: var(--login-accent);
}

/* Below 1200px the base CSS stacks .left/.right absolutely on top of each
   other; use normal flow instead so a tall card can scroll, and centre it. */
@media screen and (max-width: 1199px) {
    .login-pattern .wrapper .left {
        display: none;
    }
    .login-pattern .wrapper .right {
        position: relative;
        width: 100%;
        min-height: 100vh;
        height: auto;
    }
}

@media screen and (max-width: 480px) {
    .login-pattern .sign-up-container {
        padding: 32px 20px 20px;
    }
    .login-pattern input.input-box-330,
    .login-pattern #login-btn {
        box-sizing: border-box;
        width: 100% !important;
    }
}