/* ─────────────────────────────────────────────────────────────────────────────
   Customer portal sign-in — /Portal/Account/Login
   ─────────────────────────────────────────────────────────────────────────────
   Lives here, NOT inline in the view: the page is styling, not markup, and an
   external file is cacheable, diffable and free of Razor's '@' escaping (a bare
   @media inside a .cshtml is parsed as a directive and breaks the build).

   ⚠ The <link> in Login.cshtml carries asp-append-version="true". Without it an
   edit here sits behind Cloudflare's 7-day edge cache — see the static-asset
   caching note in CLAUDE.md.

   Scoped to that one page: it is Layout = null and loads no other stylesheet, so
   nothing here can reach the rest of the portal or the admin login.
   ──────────────────────────────────────────────────────────────────────────── */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    font-family: "Inter", sans-serif;
    background: #4a2008;
}


/* =========================
   FULL SCREEN SECTION
========================== */

.signup-section {
    width: 100%;
    height: 100vh;
    height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;
    overflow: hidden;
}


/* =========================
   MAIN CARD
========================== */

.signup-card {
    width: 100%;
    max-width: 1050px;

    height: min(82vh, 650px);
    height: min(82dvh, 650px);

    background: #f6f6f7;

    border-radius: 28px;

    padding: 28px;

    display: flex;

    gap: 55px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.18);
}


/* =========================
   LEFT PANEL
========================== */

.left-panel {
    width: 48%;
    height: 100%;

    position: relative;

    border-radius: 25px;

    overflow: hidden;

    background: #101010;
}


/* Logistics Image */

.logistics-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}


.logistics-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.45;

    transform: scale(1.02);
}


/* Dark Overlay */

.left-panel::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.20) 0%,
        rgba(0, 0, 0, 0.40) 45%,
        rgba(0, 0, 0, 0.92) 100%
    );
}


/* Orange Glow */

.left-panel::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -180px;
    left: -150px;

    background: #f56600;

    filter: blur(80px);

    opacity: 0.55;

    z-index: 1;
}


/* =========================
   LEFT CONTENT
========================== */

.left-content {
    position: absolute;

    z-index: 3;

    left: 40px;
    right: 40px;

    bottom: 42px;

    color: #ffffff;
}


.portal-badge {
    display: inline-flex;

    align-items: center;

    padding: 7px 12px;

    border-radius: 20px;

    background: rgba(245, 102, 0, 0.15);

    border: 1px solid rgba(245, 102, 0, 0.45);

    color: #ff7a18;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.8px;

    margin-bottom: 18px;
}


.left-panel h1 {
    margin: 0 0 18px;

    font-size: clamp(27px, 2.5vw, 40px);

    line-height: 1.25;

    font-weight: 500;

    letter-spacing: -0.5px;
}


.left-panel p {
    margin: 0;

    max-width: 390px;

    font-size: 14px;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.72);
}


/* =========================
   RIGHT PANEL
========================== */

.right-panel {
    flex: 1;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px 30px 20px 0;
}


.form-container {
    width: 100%;

    max-width: 390px;
}


/* =========================
   LOGO ICON
========================== */

/* The mark is an ICON, not the wordmark, since the client's 2026-09-04 revision.
   Sized as a square box because a glyph is square — the wordmark it replaced was
   3.61:1 and needed the auto-width/68px-tall treatment instead. */
.logo-icon {
    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    color: #f56600;

    font-size: 32px;
    line-height: 1;
}


/* Block, so the box is the glyph's own size and not a line box with leading. */
.logo-icon i {
    display: block;
}


/* =========================
   FORM CONTENT
========================== */

.form-title {
    margin-bottom: 8px;

    font-size: 36px;

    font-weight: 500;

    color: #1b1b1b;

    letter-spacing: -0.8px;
}


.form-subtitle {
    margin-bottom: 28px;

    font-size: 14px;

    color: #7b7b7b;
}


.divider {
    width: 100%;

    height: 1px;

    background: #dddddd;

    margin-bottom: 28px;
}


/* =========================
   FORM LABEL
========================== */

.form-label {
    margin-bottom: 7px;

    color: #777777;

    font-size: 13px;

    font-weight: 400;
}


/* =========================
   INPUT
========================== */

.form-control {
    width: 100%;

    height: 52px;

    padding: 0 16px;

    border: 1px solid #d6d6d6;

    border-radius: 9px;

    background: transparent;

    color: #222222;

    font-size: 14px;

    box-shadow: none;

    transition: 0.3s;
}


.form-control::placeholder {
    color: #aaaaaa;
}


.form-control:focus {
    border-color: #f56600;

    box-shadow:
        0 0 0 3px rgba(245, 102, 0, 0.08);
}


/* =========================
   PASSWORD SHOW/HIDE TOGGLE
========================== */

.login-pwd-group {
    position: relative;
}

.login-pwd-group .form-control {
    padding-right: 46px;
}

.login-pwd-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0;
    color: #9a9a9a;
    display: flex;
    align-items: center;
}

.login-pwd-toggle:hover {
    color: #555555;
}


/* =========================
   SIGN IN BUTTON
========================== */

.create-btn {
    width: 100%;

    height: 54px;

    border: none;

    border-radius: 9px;

    background: #f56600;

    color: #ffffff;

    font-size: 16px;

    font-weight: 500;

    cursor: pointer;

    transition: 0.3s;

    box-shadow:
        0 5px 12px rgba(245, 102, 0, 0.25);
}


.create-btn:hover {
    background: #db5900;

    transform: translateY(-1px);
}


/* =========================
   FORGOT PASSWORD
========================== */

.login-text {
    text-align: center;

    margin-top: 14px;

    font-size: 13px;

    color: #777777;
}


.login-text a {
    color: #222222;

    font-weight: 500;

    text-decoration: underline;

    cursor: pointer;
}


/* =========================
   PASSWORD HELP MODAL
========================== */

.password-help-modal {
    border: none;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.20);
}


.password-help-modal .modal-body {
    padding: 45px 35px 35px;
}


/* Filled circle close icon */

.modal-close-btn {
    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 5;

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 50%;

    background: #eeeeee;

    color: #666666;

    font-size: 15px;

    cursor: pointer;

    transition: 0.25s;
}


.modal-close-btn:hover {
    background: #e2e2e2;

    color: #222222;
}


/* Modal Center Icon */

.help-icon {
    width: 76px;
    height: 76px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: rgba(245, 102, 0, 0.10);

    color: #f56600;

    font-size: 30px;
}


/* Modal Title */

.help-title {
    font-size: 22px;

    font-weight: 600;

    color: #222222;

    margin-bottom: 15px;
}


/* Modal Description */

.help-description {
    max-width: 340px;

    margin: 0 auto 25px;

    font-size: 14px;

    line-height: 1.7;

    color: #777777;
}


/* Customer Care Label */

.customer-care-label {
    display: block;

    font-size: 11px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    color: #999999;

    margin-bottom: 18px;
}


/* Call Button (single, icon + text side by side) */

.call-btn {
    width: auto;

    height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 22px;

    border-radius: 8px;

    background: #f56600;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    letter-spacing: 0.2px;

    transition: 0.3s;

    box-shadow:
        0 4px 10px rgba(245, 102, 0, 0.22);
}


.call-btn i {
    font-size: 13px;
}


.call-btn.call-btn-outline {
    background: transparent;

    color: #f56600;

    border: 1.5px solid #f56600;

    box-shadow: none;
}


.call-btn.call-btn-outline:hover {
    background: rgba(245, 102, 0, 0.06);

    color: #db5900;
}


.call-btn-group {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}


.call-btn:hover {
    background: #db5900;

    color: #ffffff;

    transform: translateY(-1px);
}


.support-timing {
    margin-top: 0;
    margin-bottom: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    padding: 12px 18px;

    border-radius: 12px;

    background: rgba(245, 102, 0, 0.06);

    border: 1px solid rgba(245, 102, 0, 0.15);
}


.support-timing-title {
    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #f56600;
}


.support-timing-title i {
    font-size: 11px;
}


.support-timing-value {
    font-size: 13.5px;

    font-weight: 500;

    color: #444444;
}


/* =========================
   TABLET RESPONSIVE
========================== */

@media (max-width: 991px) {

    .signup-section {
        padding: 20px;
    }


    .signup-card {
        gap: 30px;

        padding: 22px;

        height: min(88vh, 650px);
        height: min(88dvh, 650px);
    }


    .left-content {
        left: 28px;
        right: 28px;
        bottom: 30px;
    }


    .left-panel h1 {
        font-size: 30px;
    }


    .right-panel {
        padding-right: 10px;
    }


    .form-title {
        font-size: 32px;
    }
}


/* =========================
   MOBILE RESPONSIVE
========================== */

@media (max-width: 767px) {

    html,
    body {
        overflow-y: auto;
    }


    .signup-section {
        width: 100%;

        min-height: 85vh;
        min-height: 85dvh;

        height: auto;

        padding: 12px;

        display: flex;

        align-items: center;
        justify-content: center;

        overflow-y: auto;
    }


    .signup-card {
        width: 100%;

        height: auto;

        min-height: min-content;

        margin: auto;

        flex-direction: column;

        gap: 10px;

        padding: 12px;

        border-radius: 20px;
    }


    .left-panel {
        display: none;
    }


    .left-content {
        left: 22px;
        right: 22px;
        bottom: 20px;
    }


    .portal-badge {
        font-size: 8px;

        padding: 5px 9px;

        margin-bottom: 8px;

        letter-spacing: 1.2px;
    }


    .left-panel h1 {
        font-size: 23px;

        line-height: 1.2;

        margin-bottom: 7px;
    }


    .left-panel p {
        font-size: 11px;

        line-height: 1.45;

        max-width: 320px;
    }


    .right-panel {
        width: 100%;

        height: auto;

        padding: 20px 15px;

        display: flex;

        align-items: center;
    }


    .form-container {
        max-width: 100%;
    }


    .logo-icon {
        width: 35px;

        height: 35px;

        font-size: 34px;

        margin-bottom: 5px;
    }


    .form-title {
        font-size: 27px;

        margin-bottom: 4px;
    }


    .form-subtitle {
        font-size: 12px;

        margin-bottom: 15px;
    }


    .divider {
        margin-bottom: 15px;
    }


    .form-label {
        font-size: 12px;

        margin-bottom: 5px;
    }


    .form-control {
        height: 45px;

        font-size: 13px;
    }


    .mb-3 {
        margin-bottom: 12px !important;
    }


    .mb-4 {
        margin-bottom: 15px !important;
    }


    .create-btn {
        height: 48px;

        font-size: 14px;
    }


    .login-text {
        margin-top: 9px;

        font-size: 12px;
    }


    /* Mobile Modal */

    .modal-dialog {
        margin: 15px;
    }


    .password-help-modal .modal-body {
        padding: 40px 25px 30px;
    }


    .help-icon {
        width: 65px;
        height: 65px;

        font-size: 24px;
    }


    .help-title {
        font-size: 20px;
    }


    .help-description {
        font-size: 13px;
    }


    .call-btn {
        height: 50px;

        font-size: 14px;
    }
}


/* =========================
   SMALL HEIGHT SCREENS
========================== */

@media (max-height: 650px) and (min-width: 768px) {

    .signup-card {
        height: 92dvh;

        padding: 20px;
    }


    .left-content {
        bottom: 25px;
    }


    .portal-badge {
        margin-bottom: 10px;
    }


    .left-panel h1 {
        font-size: 27px;

        margin-bottom: 10px;
    }


    .left-panel p {
        font-size: 12px;
    }


    .logo-icon {
        font-size: 35px;

        margin-bottom: 5px;
    }


    .form-title {
        font-size: 28px;
    }


    .form-subtitle {
        margin-bottom: 12px;
    }


    .divider {
        margin-bottom: 12px;
    }


    .form-control {
        height: 45px;
    }


    .create-btn {
        height: 48px;
    }
}



/* ── Added for the REAL form; everything above is the supplied design verbatim ──
   The mockup had no error state. .signup-card is overflow:hidden at desktop widths
   and the card is a fixed height, so a validation message added to this column is
   exactly the thing that gets clipped — i.e. the customer cannot read the reason
   their sign-in failed. Letting the right column scroll costs nothing visually and
   removes that failure mode. */
.right-panel {
    overflow-y: auto;
}

.portal-alert {
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.portal-alert-error {
    white-space: nowrap;
}

.portal-alert-error {
    background: #fdecec;
    border-color: #f5c2c2;
    color: #b02a2a;
}

.portal-alert-success {
    background: #e9f7ef;
    border-color: #b7e4c7;
    color: #1b7a43;
}

.field-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #b02a2a;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE: no page scroll (client request 2026-09-03)
   ─────────────────────────────────────────────────────────────────────────────
   The reported scroll was NOT content overflow — measured across five emulated
   devices the content fits with 0px to spare. It is the classic mobile-viewport
   problem: `height: 100%` and `100vh` resolve against the LARGE viewport (the one
   with the URL bar hidden), so while the bar IS showing the page is taller than
   the screen and scrolls by exactly the bar's height, for no visible reason.

   `100svh` is the small viewport — the size WITH the browser chrome on screen —
   so the page can never exceed what the user can see, whatever the bar is doing.
   Declared after the vh/dvh rules so older browsers keep the previous value.

   ⚠ The page is pinned, but the CARD is not clipped: .right-panel scrolls inside
   it. That matters on a 320x568 SE showing a validation error, where the content
   genuinely is taller than the screen — pinning without that safety valve would
   put the sign-in button somewhere the customer cannot reach.
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    html,
    body {
height: 100svh;
overflow: hidden;
}

    .signup-section {
min-height: 0;
height: 100svh;
overflow: hidden;
}

    .signup-card {
max-height: 100%;
overflow: hidden;
}

/* The safety valve: only this column scrolls, and only when it has to. */
    .right-panel {
overflow-y: auto;
min-height: 0;
}
}