/* ============================================================
   Sign in: classic Eternity look (the earlier login page).
   The sunset logistics photo fills the screen; the form sits on a white card
   with the blue / gold ETERNITY LOGISTICS wordmark, the coral corner with the
   paper plane, and the yellow sign-in button. Loaded after login-v15.css;
   colours and layout only, every id and script is unchanged.
   ============================================================ */

body.lo-body {
    background: #1B2B4A url("../images/frame_bg.png") center 35% / cover no-repeat fixed;
    color: #1F2A44;
    font-family: "Segoe UI", "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
}
.lo-body :focus-visible { outline-color: #1D4ED8; }

/* ---------- hero: copy over the photo ---------- */
.lo-hero { background: transparent; }
.lo-veil {
    background:
        linear-gradient(90deg, rgba(12,24,52,.78) 0%, rgba(12,24,52,.42) 46%, rgba(12,24,52,.10) 100%),
        linear-gradient(0deg, rgba(12,24,52,.72) 0%, rgba(12,24,52,0) 55%);
}
.lo-brand { background: rgba(255,255,255,.95); padding: 8px 14px 8px 10px; border-radius: 14px; align-self: flex-start; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.lo-brandtxt b { color: #101B33; }
.lo-brandtxt span { color: #2059D6; }
.lo-eyebrow { color: #FFD666; border-color: rgba(255,214,102,.45); background: rgba(255,201,60,.14); }
.lo-eyebrow i { background: #FFC93C; animation-name: loBlipGold; }
@keyframes loBlipGold {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,201,60,.55) }
    55% { opacity: .55; box-shadow: 0 0 0 7px rgba(255,201,60,0) }
}
.lo-copy h1 { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.lo-copy h1 em { background: linear-gradient(92deg, #FFC93C 0%, #FFE08A 55%, #7DD3FC 100%); -webkit-background-clip: text; background-clip: text; }
.lo-lede { color: #E6EEFA; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* ---------- pane: a white card floating on the photo ---------- */
.lo-pane {
    border-left: 0; padding: 28px 40px 20px;
    /* same shading as the hero's right edge, so the photo has no seam */
    background: linear-gradient(0deg, rgba(12,24,52,.72) 0%, rgba(12,24,52,0) 55%), rgba(12,24,52,.10);
}
.lo-pane::before { display: none; }
.lo-card {
    position: relative; overflow: hidden; max-width: 420px; padding: 30px 32px 26px;
    background: #fff; border-radius: 22px; box-shadow: 0 30px 70px -20px rgba(8,16,40,.65), 0 2px 6px rgba(8,16,40,.15);
}
.lo-cardbrand { display: flex; align-items: flex-start; justify-content: space-between; margin: -4px 0 18px; min-height: 64px; }
.lo-wm { display: flex; flex-direction: column; line-height: .98; font-family: "Segoe UI", Archivo, sans-serif; font-weight: 800; letter-spacing: .01em; }
.lo-wm b { font-size: 27px; color: #0B9BE3; }
.lo-wm i { font-style: normal; font-size: 25px; color: #FFC12E; }
/* coral corner with the paper plane (from the old right_part.png) */
.lo-corner {
    position: absolute; top: 0; right: 0; width: 132px; height: 104px; pointer-events: none;
    background: #F65354; border-bottom-left-radius: 70% 80%;
    display: grid; place-items: center; padding: 0 0 18px 26px;
}
.lo-corner::before {
    content: ""; position: absolute; inset: 10px -10px -12px -12px; border-bottom-left-radius: 72% 84%;
    border-left: 1.5px dashed #6B8FD6; border-bottom: 1.5px dashed #6B8FD6; opacity: .7;
}
.lo-corner svg { width: 46px; height: 46px; transform: rotate(-8deg); filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); }

.lo-card h2 { color: #101B33; font-family: "Segoe UI", Archivo, sans-serif; }
.lo-sub { color: #5B6880; }
.lo-sub b { color: #101B33; }
.lo-f { color: #475569; font-size: 10.5px; }
.lo-input { background: #F5F7FB; border: 1px solid #C9D2E3; }
.lo-input:focus-within { background: #fff; border-color: #2059D6; box-shadow: 0 0 0 3px rgba(32,89,214,.16); }
.lo-input svg { color: #6B778D; }
.lo-input input { color: #101B33; }
.lo-input input::placeholder { color: #6B778D; }
.lo-input input:-webkit-autofill { -webkit-text-fill-color: #101B33; }
.lo-input.has-error { border-color: #C2410C; }
.lo-eye { color: #2059D6; }
.lo-eye:hover { color: #1A4BB8; }
.lo-err, .lo-field label.error { color: #B42318; }
.lo-link { color: #1D4ED8; }
.lo-link:hover { color: #1A4BB8; }

/* the old yellow button, made richer */
.lo-go {
    color: #1C1405 !important; border-radius: 12px;
    background: linear-gradient(180deg, #FFD54F 0%, #FFC12E 100%) !important;
    box-shadow: 0 10px 24px -10px rgba(214,150,0,.85), inset 0 -2px 0 rgba(0,0,0,.08);
}
.lo-go:hover { box-shadow: 0 14px 28px -10px rgba(214,150,0,1), inset 0 -2px 0 rgba(0,0,0,.08); }
.lo-go::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); }

.lo-alert { background: #FEF2F0; border-color: #F5C2B8; color: #8A2617; }
.lo-alert.ok { background: #ECFBF3; border-color: #A7E3C3; color: #0F5E3E; }
.lo-back { color: #475569; }
.lo-back:hover { color: #1D4ED8; }
.lo-fine { color: #5B6880; border-top: 1px solid #EBEFF8; padding-top: 14px; }
.lo-fine svg { color: #12775A; }
.lo-foot { color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(0,0,0,.5); justify-content: center; }

#loading { background: rgba(255,255,255,.6); }

/* ---------- narrow: photo banner on top, card below ---------- */
@media (max-width: 980px) {
    /* photo only behind the banner; the card sits on a light page below it */
    body.lo-body { background: #EEF3FB; }
    .login { grid-template-rows: auto auto; }
    .lo-hero { height: auto; min-height: 0; background: #1B2B4A url("../images/frame_bg.png") center 40% / cover no-repeat; }
    .lo-heroin { padding: 20px 20px 56px; }
    .lo-copy { margin-top: 26px; }
    .lo-veil { background: linear-gradient(0deg, rgba(12,24,52,.88) 0%, rgba(12,24,52,.45) 60%, rgba(12,24,52,.25) 100%); }
    .lo-pane { border-top: 0; padding: 0 16px 22px; background: #EEF3FB; }
    .lo-card { margin: -36px auto 0; }
    .lo-foot { color: #5B6880; text-shadow: none; }
}
@media (max-width: 420px) {
    .lo-copy h1 { font-size: 26px; }
    .lo-card { padding: 24px 20px 20px; border-radius: 18px; }
    .lo-wm b { font-size: 23px; } .lo-wm i { font-size: 21px; }
    .lo-corner { width: 104px; height: 84px; }
    .lo-corner svg { width: 38px; height: 38px; }
}