/*
 * utp-motion.css  -  "Boarding pass" refresh of the UTP B2B sign-in, Forgot Password and Register pages.
 * (15 Oct, second round: the card rules now apply to .login-container (sign-in, Forgot Password) and .signup-container
 * (Register) alike, through :is(), which has the same specificity as one class, so the sign-in page cannot change.
 * The Forgot / Register additions are in the last section of this file.)
 *
 * What it does: makes the sign-in card read as a boarding pass (a perforated tear line with two punched
 * notches and a small plane roundel where the photo meets the form), plays one short load animation that
 * rests, and tidies fonts, fields, checkbox, links, button and the code step. Layout, wording and the order
 * of elements are unchanged.
 *
 * Why every selector starts with .login-container (or body): this file loads BEFORE the page's own inline
 * <style> blocks and before the Back Office CMS block, so only a more specific selector can win.
 * The left half (photo, captions, logo, counter pill) is Back Office CMS content: only its classes are
 * touched, so if the client edits the CMS nothing breaks - at worst an effect is lost.
 * Only transform and opacity animate (plus colour / border / shadow on hover and focus).
 */

/* ---------- Tokens ---------- */
body,
.login-container,
.signup-container {
    --bp-maroon: #63013e;      /* brand: button, links, focus, checkbox, roundel plane */
    --bp-maroon-hi: #7d0a51;   /* button gradient top, hover */
    --bp-maroon-lo: #4f0031;   /* button gradient bottom */
    --bp-ink: #1d1720;         /* heading */
    --bp-ink-2: #4b4552;       /* labels */
    --bp-muted: #6f6875;       /* subtitle, helper text, eye icon (4.5:1 or better on the panel) */
    --bp-edge: #8f8895;        /* field and checkbox borders (3:1 or better on the panel) */
    --bp-placeholder: #8f8895;
    --bp-panel: #f7f6f8;       /* right half background (was #f6f8fa) */
    --bp-ring: rgba(99, 1, 62, .16);
    --bp-perf: #d4ced6;        /* perforation dots */
    --bp-page: #ffffff;        /* the page colour around the card; the notches must equal it exactly */
    --bp-ease-out: cubic-bezier(.2, .7, .2, 1);
    --bp-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Top bar and footer links ---------- */
/* Hover: an underline grows from the left; the text does not fade (the old rule dimmed it with !important,
   so the colour has to be restored with !important too). */
body .login-navbar .login-nav .nav-link,
body .login-footer .footer-left a,
:is(.login-container, .signup-container) .login-right .login-options a,
:is(.login-container, .signup-container) .login-right .signup-link a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size 220ms var(--bp-ease-out);
}
body .login-navbar .login-nav .nav-link:hover,
body .login-footer .footer-left a:hover {
    color: #fff !important;            /* beat the old dimmed hover colour */
    text-decoration: none;
    background-size: 100% 1px;
}
:is(.login-container, .signup-container) .login-right .login-options a:hover,
:is(.login-container, .signup-container) .login-right .signup-link a:hover {
    text-decoration: none;
    background-size: 100% 1px;
}
body .login-navbar .login-nav .nav-link:focus-visible,
body .login-footer .footer-left a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
}
:is(.login-container, .signup-container) .login-right a:focus-visible {
    outline: 2px solid var(--bp-maroon);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Page ---------- */
/* The page was locked to the window height (html,body{height:100%} in the CMS block, centred content), so anything
   taller than the window spilled out above the top, where it cannot be scrolled to (the maroon top bar vanished on
   phones). Now the page grows to fit its content and scrolls normally. "html body" out-ranks the CMS body rule. */
html body { height: auto; min-height: 100vh; }

/* ---------- Card ---------- */
:is(.login-container, .signup-container) .login-right {
    position: relative;                 /* anchors the boarding-pass seam */
    background-color: var(--bp-panel);
}
/* Form column: never wider than 480px (stops 676px-wide fields on 1920 screens). The seam is not part of it.
   Deliberately .login-container only (sign-in and Forgot Password): Register's rows carry inline negative margins and its
   column is already at most about 505px wide, so the cap is not needed there. */
.login-container .login-right > :not(.bp-seam) {
    max-width: 480px;
    width: 100%;
    margin-inline: auto;
}

/* Heading */
:is(.login-container, .signup-container) .login-right .login-header h2 {
    font-family: 'Lato', sans-serif;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -.015em;
    color: var(--bp-ink);
}
:is(.login-container, .signup-container) .login-right .login-header p {
    font-size: 15px;
    color: var(--bp-muted);
}

/* Labels */
:is(.login-container, .signup-container) .login-right .form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--bp-ink-2);
    margin: 18px 0 8px;
    transition: color .15s;
}
:is(.login-container, .signup-container) .login-right .form-group:focus-within label {
    color: var(--bp-maroon);
}

/* Fields */
:is(.login-container, .signup-container) .login-right #txtAgentID,
:is(.login-container, .signup-container) .login-right #txtUser,
:is(.login-container, .signup-container) .login-right #txtPassword,
:is(.login-container, .signup-container) .login-right #txtOtp {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 0 14px 0 44px;
    border: 1px solid var(--bp-edge);
    border-radius: 10px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 14px 50%;
    background-size: 18px 18px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: var(--bp-ink);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
:is(.login-container, .signup-container) .login-right #txtPassword { padding-right: 46px; }
:is(.login-container, .signup-container) .login-right #txtOtp:not(:placeholder-shown) { letter-spacing: .25em; }
:is(.login-container, .signup-container) .login-right #txtAgentID::placeholder,
:is(.login-container, .signup-container) .login-right #txtUser::placeholder,
:is(.login-container, .signup-container) .login-right #txtPassword::placeholder,
:is(.login-container, .signup-container) .login-right #txtOtp::placeholder {
    color: var(--bp-placeholder);
    opacity: 1;
    letter-spacing: normal;
}
:is(.login-container, .signup-container) .login-right #txtAgentID:hover,
:is(.login-container, .signup-container) .login-right #txtUser:hover,
:is(.login-container, .signup-container) .login-right #txtPassword:hover,
:is(.login-container, .signup-container) .login-right #txtOtp:hover {
    border-color: var(--bp-muted);
}
:is(.login-container, .signup-container) .login-right #txtAgentID:focus,
:is(.login-container, .signup-container) .login-right #txtUser:focus,
:is(.login-container, .signup-container) .login-right #txtPassword:focus,
:is(.login-container, .signup-container) .login-right #txtOtp:focus {
    border-color: var(--bp-maroon);
    box-shadow: 0 0 0 4px var(--bp-ring);
}
/* One simple line icon per field, drawn as a background so no markup changes. Muted at rest, maroon on focus. */
:is(.login-container, .signup-container) .login-right #txtAgentID { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E"); }
:is(.login-container, .signup-container) .login-right #txtUser    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
:is(.login-container, .signup-container) .login-right #txtPassword{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
:is(.login-container, .signup-container) .login-right #txtOtp     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.2 8-8 9-4.8-1-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
:is(.login-container, .signup-container) .login-right #txtAgentID:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E"); }
:is(.login-container, .signup-container) .login-right #txtUser:focus    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
:is(.login-container, .signup-container) .login-right #txtPassword:focus{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
:is(.login-container, .signup-container) .login-right #txtOtp:focus     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.2 8-8 9-4.8-1-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }

/* Show-password eye: the old rule pinned it with top:60%, which drifts. Now a 40x46 box on the field's right
   edge, aligned to the field, and the whole box is the click target. Styled by id because the page swaps
   fa-eye / fa-eye-slash on it. */
:is(.login-container, .signup-container) .login-right .input-icon-right {
    top: auto;
    bottom: 0;
    right: 4px;
    width: 40px;
    height: 46px;
    padding: 0;
    display: block;
}
:is(.login-container, .signup-container) .login-right #showPass {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    color: var(--bp-muted);
    transition: color .15s, background-color .15s;
}
:is(.login-container, .signup-container) .login-right #showPass:hover {
    color: var(--bp-maroon);
    background-color: rgba(99, 1, 62, .06);
}

/* Remember me / Forgot password row */
:is(.login-container, .signup-container) .login-right .login-options {
    margin-top: 12px;          /* the row was hugging the password field (about 6-10px gap) */
    margin-bottom: 18px;       /* was 10px; the labels below lose their 8px bottom margin, so the row keeps its height */
    font-size: 13px;
}
:is(.login-container, .signup-container) .login-right .login-options label { margin-bottom: 0; }
:is(.login-container, .signup-container) .login-right .checkbox-container label { color: var(--bp-muted); }
:is(.login-container, .signup-container) .login-right #remember-me {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 16px !important;      /* beats the inline width:10px on the input */
    height: 16px;
    margin: 0 8px 0 0;           /* drops the old margin-bottom:.5rem */
    padding: 0;
    flex: none;
    border: 1.5px solid var(--bp-edge);
    border-radius: 4px;          /* always square, never round */
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
:is(.login-container, .signup-container) .login-right #remember-me:checked {
    background-color: var(--bp-maroon);
    border-color: var(--bp-maroon);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
:is(.login-container, .signup-container) .login-right #remember-me:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--bp-ring);
    border-color: var(--bp-maroon);
}

/* Code step timer: a small pill on the right. !important is needed to beat the inline colour and size. */
:is(.login-container, .signup-container) .login-right #otpTimer {
    width: fit-content;
    margin-left: auto;
    margin-right: max(0px, calc((100% - 480px) / 2));   /* right edge level with the field's: the column rule centres every child with margin-inline:auto */
    padding: 5px 12px 5px 30px;
    border-radius: 999px;
    background-color: rgba(99, 1, 62, .07);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 14px 14px;
    color: var(--bp-maroon) !important;   /* beats the inline color:#d81b60 */
    font-size: 13px !important;           /* beats the inline font-size:14px */
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Button (both SEND OTP and LOGIN). No child elements inside: the page writes the label with textContent. */
:is(.login-container, .signup-container) .login-right .btn-login {
    position: relative;
    overflow: hidden;
    display: block;
    height: 48px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--bp-maroon-hi), var(--bp-maroon) 55%, var(--bp-maroon-lo));
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;   /* the page's script sometimes writes "Send OTP" in mixed case */
    box-shadow: 0 6px 16px -6px rgba(99, 1, 62, .55);
    transition: transform .15s var(--bp-ease-out), box-shadow .15s, opacity .15s;
}
:is(.login-container, .signup-container) .login-right .btn-login:hover {
    background: linear-gradient(180deg, var(--bp-maroon-hi), var(--bp-maroon-hi) 10%, var(--bp-maroon) 70%, var(--bp-maroon-lo));
    transform: translateY(-1px);
    box-shadow: 0 9px 20px -6px rgba(99, 1, 62, .65);
}
:is(.login-container, .signup-container) .login-right .btn-login:active { transform: scale(.985); box-shadow: 0 4px 10px -5px rgba(99, 1, 62, .55); }
:is(.login-container, .signup-container) .login-right .btn-login:focus-visible { outline: 2px solid var(--bp-maroon); outline-offset: 3px; }
:is(.login-container, .signup-container) .login-right .btn-login:disabled,
:is(.login-container, .signup-container) .login-right .btn-login:disabled:hover {
    opacity: .7;
    cursor: progress;
    transform: none;
    box-shadow: 0 6px 16px -6px rgba(99, 1, 62, .55);
}
/* The sheen: a pale diagonal band that sits off the button at rest. */
:is(.login-container, .signup-container) .login-right .btn-login::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .28) 50%, transparent 68%);
    transform: translateX(-120%);
}

/* "You don't have an account? Register": the sentence goes from blue to muted */
:is(.login-container, .signup-container) .login-right .signup-link {
    font-size: 14px;
    font-weight: 400;
    color: var(--bp-muted);
}
:is(.login-container, .signup-container) .login-right .signup-link .signup-icon { color: var(--bp-maroon); }
:is(.login-container, .signup-container) .login-right .signup-link a { color: var(--bp-maroon); font-weight: 700; }

/* ---------- Photo panel (Back Office CMS content: classes only) ---------- */
/* The flat 35% black overlay becomes a slight maroon-black gradient, darker towards the bottom. */
:is(.login-container, .signup-container) .login-left .carousel-item::before {
    background: linear-gradient(180deg, rgba(30, 0, 18, .28) 0%, rgba(30, 0, 18, .34) 50%, rgba(30, 0, 18, .55) 100%);
}
:is(.login-container, .signup-container) .login-left .custom-caption h1,
:is(.login-container, .signup-container) .login-left .custom-caption p {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
/* Logo badge: no rule here on purpose. It keeps the page's own styling (white at 37%, 10px corners, no padding;
   today's rule is .login-logo { background:#ffffff5e; border-radius:.625rem }), because the owner asked for today's badge.
   An earlier version restyled it as a solid white chip (padding, 12px corners, shadow); that was removed. */

/* ---------- Boarding-pass seam ---------- */
:is(.login-container, .signup-container) .login-right .bp-seam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    z-index: 20;
    pointer-events: none;
}
/* Notches: 28px circles centred on the seam line, half outside the card (the card's overflow:hidden clips that
   half), filled with the page colour so they read as cut-outs. */
:is(.login-container, .signup-container) .bp-seam .bp-notch {
    position: absolute;
    left: -14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bp-page);
    box-shadow: inset 0 2px 5px rgba(29, 23, 32, .16), inset 0 0 0 1px rgba(29, 23, 32, .05);
}
:is(.login-container, .signup-container) .bp-seam .bp-notch--start { top: -14px; }
:is(.login-container, .signup-container) .bp-seam .bp-notch--end   { bottom: -14px; }
/* Perforation: 3px dots every 10px, from just below the top notch to just above the bottom one. */
:is(.login-container, .signup-container) .bp-seam .bp-perf {
    position: absolute;
    left: -2px;                 /* 4px-wide strip centred on the seam; each dot is 3px across, centred in it */
    width: 4px;
    top: 22px;
    bottom: 22px;
    overflow: hidden;           /* the strip is only a window; the dots live on ::before (see the tear-line animation) */
}
:is(.login-container, .signup-container) .bp-seam .bp-perf::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 5px, var(--bp-perf) 1.5px, transparent 1.9px);
    background-size: 4px 10px;
    background-repeat: repeat-y;
}
/* F9 (15 Oct): the flight track. It is the top half of the seam (0 wide, half as tall), and the roundel sits at its
   lower end, which is the seam's midpoint. Sliding the track up by its own height puts the plane on the top notch, so
   the flight is one transform back to rest (see bp-flight-y below) and the rest position does not move. */
:is(.login-container, .signup-container) .bp-seam .bp-flight {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 50%;
}
/* Roundel: a 44px white disc (was 40px) whose centre is the seam's midpoint, with a maroon plane pointing towards the
   form. F9: it is now anchored to the bottom of the flight track instead of top:50%, same centre, so it can fly. */
:is(.login-container, .signup-container) .bp-seam .bp-roundel {
    position: absolute;
    left: -22px;
    bottom: -22px;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ebe7ec;
    box-shadow: 0 6px 18px rgba(29, 23, 32, .14);
}
:is(.login-container, .signup-container) .bp-seam .bp-roundel .fa {
    font-size: 18px;              /* F9: was 16px, to suit the bigger disc */
    line-height: 1;
    color: var(--bp-maroon);
    transform: rotate(45deg);     /* the Font Awesome 4 plane glyph is turned to point right */
}

/* Phone and small tablet: the card stacks (photo on top), so the seam lies along the top edge of the form. */
@media (max-width: 768px) {
    :is(.login-container, .signup-container) .login-right .bp-seam {
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 0;
    }
    /* F8 (15 Oct): three things share the strip: the logo chip, the caption and the slide counter. Stacked in the
       middle they collided (the counter sat over the caption's second line, the chip's corner over the heading at
       390 wide). Now the chip sits top-left, the counter top-right on the same line, and the caption runs along the
       bottom, where the photo overlay is darkest. The 220px floor is the smallest strip that keeps the two-line worst
       case (slide 2 on a 360x640 phone) clear of the chip. The strip has a fixed height that grows a little with the
       screen and the slideshow fills it, so photo and caption always fit inside it; !important beats the 400px
       !important that login.cshtml puts on the same elements. */
    :is(.login-container, .signup-container) .login-left { height: clamp(220px, 25vh, 400px) !important; flex: none; }
    :is(.login-container, .signup-container) #loginCarousel,
    :is(.login-container, .signup-container) #loginCarousel .carousel-inner,
    :is(.login-container, .signup-container) #loginCarousel .carousel-item { height: 100% !important; }
    /* top:20 !important beats the page's top:56px !important at 430 and below; left:20 no longer relies on the CMS
       rule coming last; transform:none is F7 (the page's translateX(-50%) pulled the chip off the left edge). The
       chip's entrance (M2) uses the separate "translate" property, so it is not affected. */
    :is(.login-container, .signup-container) .login-left .login-logo { top: 20px !important; left: 20px; transform: none; }
    /* Counter: top-right, its centre line level with the badge's (the badge is the image box, 60px tall, 20-80: 20 + 60/2 = 50 = 27 + 46/2). */
    :is(.login-container, .signup-container) .login-left .cms-carousel-nav { top: 27px; bottom: auto; left: auto; inset-inline-end: 20px; transform: none; }
    /* Caption along the bottom. top:auto !important beats the page's top:58% !important at 430 and below. bottom 22
       keeps the text 4px clear of the roundel, which reaches 18px up from the seam. */
    :is(.login-container, .signup-container) .login-left .custom-caption { top: auto !important; bottom: 22px; left: 20px; right: 20px; padding: 0; transform: none; }
    /* Text size for 431-768. At 430 and below the page's own 18px / 14px !important still win. */
    :is(.login-container, .signup-container) .login-left .custom-caption h1 { font-size: 26px; margin-bottom: 6px; }
    :is(.login-container, .signup-container) .login-left .custom-caption p  { font-size: 16px; margin-bottom: 0; }
    :is(.login-container, .signup-container) .bp-seam .bp-notch { top: -14px; bottom: auto; }
    :is(.login-container, .signup-container) .bp-seam .bp-notch--start { left: -14px; }
    :is(.login-container, .signup-container) .bp-seam .bp-notch--end   { left: auto; right: -14px; }
    :is(.login-container, .signup-container) .bp-seam .bp-perf {
        left: 22px;
        right: 22px;
        width: auto;
        top: -2px;
        bottom: auto;
        height: 4px;
    }
    :is(.login-container, .signup-container) .bp-seam .bp-perf::before {
        background-image: radial-gradient(circle at 5px 2px, var(--bp-perf) 1.5px, transparent 1.9px);
        background-size: 10px 4px;
        background-repeat: repeat-x;
    }
    /* F9: on the stacked card the flight track is the left half of the seam and the roundel sits at its right end
       (the midpoint), so the plane flies left to right along the top edge of the form. Rest position unchanged. */
    :is(.login-container, .signup-container) .bp-seam .bp-flight { top: 0; left: 0; width: 50%; height: 0; }
    :is(.login-container, .signup-container) .bp-seam .bp-roundel {
        top: -18px;
        bottom: auto;
        left: auto;
        right: -18px;
        width: 36px;
        height: 36px;
    }
    :is(.login-container, .signup-container) .bp-seam .bp-roundel .fa { transform: rotate(135deg); }   /* plane points down, towards the form */
}

/* Short laptop windows (a 768px-high screen leaves a browser window of about 625-657px): a more compact form, so the
   page does not need to scroll where today's does not. */
@media (min-width: 769px) and (max-height: 760px) {
    :is(.login-container, .signup-container) .login-right .login-header h2 { font-size: 28px; }
    :is(.login-container, .signup-container) .login-right .form-group label { margin: 14px 0 6px; }
    :is(.login-container, .signup-container) .login-right #txtAgentID,
    :is(.login-container, .signup-container) .login-right #txtUser,
    :is(.login-container, .signup-container) .login-right #txtPassword,
    :is(.login-container, .signup-container) .login-right #txtOtp { height: 42px; }
    :is(.login-container, .signup-container) .login-right .input-icon-right { height: 42px; }
    :is(.login-container, .signup-container) .login-right .login-options { margin-top: 10px; margin-bottom: 14px; }
    :is(.login-container, .signup-container) .login-right .btn-login { height: 44px; }
}

/* ---------- Motion: plays once and rests (F9 exception: the button sweep loops every 2 s, by the owner's choice) ---------- */
/* F9: bigger entrance. The card starts 28px low (was 16px). */
@keyframes bp-rise  { from { transform: translateY(28px); } }
@keyframes bp-drop  { from { opacity: 0; translate: 0 -20px; } }   /* F9: drops 20px (was 6px) */
@keyframes bp-pop   { from { transform: scale(0); } }
/* The tear line opens like a window using transform only: the strip (.bp-perf, overflow hidden) slides in from
   above (from the left on the stacked card) while its dots (::before) slide the opposite way by the same amount,
   so the two movements cancel, the dots never move, and only the visible part of the line grows. */
@keyframes bp-window-y { from { transform: translateY(-100%); } }
@keyframes bp-dots-y   { from { transform: translateY(100%); } }
@keyframes bp-window-x { from { transform: translateX(-100%); } }
@keyframes bp-dots-x   { from { transform: translateX(100%); } }
@keyframes bp-roundel-pop { from { opacity: 0; transform: scale(.6); } }
/* F9: the old 8px plane slide (bp-plane-slide, bp-plane-slide-y) is gone. In its place the plane takes off from the top
   notch (the flight keyframes move the whole track and so the roundel), lands, and turns to face the form. */
@keyframes bp-flight-y { from { transform: translateY(-100%); } }
@keyframes bp-flight-x { from { transform: translateX(-100%); } }
@keyframes bp-turn-y   { from { transform: rotate(135deg); } to { transform: rotate(45deg); } }    /* nose down -> nose right */
@keyframes bp-turn-x   { from { transform: rotate(45deg); }  to { transform: rotate(135deg); } }   /* nose right -> nose down */
@keyframes bp-land     { 50% { transform: scale(1.12); } }
/* The form "boards": each block fades up 14px, one after another. */
@keyframes bp-in       { from { opacity: 0; transform: translateY(14px); } }
/* F9: the sweep loops (was one 900ms pass). The band crosses in the first 45% of each 2s cycle, then waits off the
   right edge for the rest. */
@keyframes bp-sheen { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
@keyframes bp-drift { from { transform: scale(1.10); } }   /* F9: zooms out from 1.10 (was 1.06) */
@keyframes bp-caption { from { opacity: 0; transform: translateY(24px); } }   /* F9: rises 24px (was 16px) */
@keyframes bp-fade  { from { opacity: 0; } }
@keyframes bp-step  { from { opacity: 0; transform: translateY(-6px); } }
@keyframes bp-tick  { from { transform: scale(.85); } }

@media (prefers-reduced-motion: no-preference) {
    /* M1 card rises into place (no fade: the form is usable from the first frame). F9: 28px, 550ms. */
    :is(.login-container, .signup-container) { animation: bp-rise 550ms var(--bp-ease-out) backwards; }
    /* M2 logo chip drops in with a bounce ("translate" is used so the logo's own centring transform on phones is
       untouched). F9: 20px drop, 500ms, spring curve. */
    :is(.login-container, .signup-container) .login-left .login-logo { animation: bp-drop 500ms 150ms var(--bp-spring) backwards; }
    /* M4 F9: the tear line opens top to bottom (see the keyframes above) behind the plane. 1600ms and LINEAR on purpose:
       the plane flies on an ease-out curve (800ms), so it always leads, and the tear reaches the middle (800ms) just
       as the plane lands (1100ms). Same time, delay and curve on both parts, so the dots still never move. */
    :is(.login-container, .signup-container) .bp-seam .bp-perf { animation: bp-window-y 1600ms 300ms linear backwards; }
    :is(.login-container, .signup-container) .bp-seam .bp-perf::before { animation: bp-dots-y 1600ms 300ms linear backwards; }
    /* M3, M6 notches punch in. F9: the bottom one punches at 1900ms, when the tear arrives. */
    :is(.login-container, .signup-container) .bp-seam .bp-notch--start { animation: bp-pop 320ms 250ms var(--bp-spring) backwards; }
    :is(.login-container, .signup-container) .bp-seam .bp-notch--end   { animation: bp-pop 320ms 1900ms var(--bp-spring) backwards; }
    /* M5 F9: the plane pops in AT THE TOP NOTCH at 300ms, flies the seam to the midpoint (the track moves, the disc
       rides on it), lands with a small bounce at 1100ms and turns to face the form. The glyph holds nose-down during
       the flight (backwards fill). */
    :is(.login-container, .signup-container) .bp-seam .bp-flight { animation: bp-flight-y 800ms 300ms cubic-bezier(.3, 0, .15, 1) backwards; }
    :is(.login-container, .signup-container) .bp-seam .bp-roundel { animation: bp-roundel-pop 240ms 300ms var(--bp-spring) backwards, bp-land 320ms 1100ms var(--bp-spring); }
    :is(.login-container, .signup-container) .bp-seam .bp-roundel .fa { animation: bp-turn-y 300ms 1100ms var(--bp-ease-out) backwards; }
    /* Boarding (F9): while the plane flies, the form comes in block by block, 80ms apart, 450ms each, done by 1.3s.
       Only what is on screen from the start: the Agent Code, User Name and Password groups (reached from the heading
       by sibling steps, so the hidden OTP group is skipped), the options row, the SEND OTP button and the Register
       line. The OTP group and the LOGIN button are left out: the page shows them later and they have their own
       fade (M10); a delayed boarding fade then would leave them invisible for a moment. The fields exist and take
       typing while they fade. */
    :is(.login-container, .signup-container) .login-right .login-header { animation: bp-in 450ms 350ms var(--bp-ease-out) backwards; }
    :is(.login-container, .signup-container) .login-right .login-header + .form-group { animation: bp-in 450ms 430ms var(--bp-ease-out) backwards; }
    :is(.login-container, .signup-container) .login-right .login-header + .form-group + .form-group { animation: bp-in 450ms 510ms var(--bp-ease-out) backwards; }
    :is(.login-container, .signup-container) .login-right .login-header + .form-group + .form-group + .form-group { animation: bp-in 450ms 590ms var(--bp-ease-out) backwards; }
    :is(.login-container, .signup-container) .login-right .login-options { animation: bp-in 450ms 670ms var(--bp-ease-out) backwards; }
    :is(.login-container, .signup-container) .login-right #otpvalidate .btn-login { animation: bp-in 450ms 750ms var(--bp-ease-out) backwards; }
    :is(.login-container, .signup-container) .login-right .signup-link { animation: bp-in 450ms 830ms var(--bp-ease-out) backwards; }
    /* M7 F9: button sweep, every 2s without stopping (the owner asked for it). Starts at 1500ms, after the form has
       boarded; the LOGIN button's sweep starts 300ms after it appears. */
    :is(.login-container, .signup-container) .login-right #loginOTP::after { animation: bp-sheen 2000ms 1500ms ease-in-out infinite; }
    :is(.login-container, .signup-container) .login-right #btnLogin::after { animation: bp-sheen 2000ms 300ms ease-in-out infinite; }
    /* No sweep while a button is disabled ("Processing..."). The ids are needed to out-rank the two rules above. */
    :is(.login-container, .signup-container) .login-right #loginOTP:disabled::after,
    :is(.login-container, .signup-container) .login-right #btnLogin:disabled::after { animation: none; }
    /* M8 photo drift, M9 captions rise (each slide). The three selectors keep the animation running
       while Bootstrap swaps the next/active classes. F9: the photo zooms out from 1.10 over 2.4s (was 1.06 over 6s,
       which the 2s slideshow cut off after about 2s); captions rise 24px over 600ms, heading 150ms, text 300ms. */
    :is(.login-container, .signup-container) .login-left .carousel-item.active img,
    :is(.login-container, .signup-container) .login-left .carousel-item-next img,
    :is(.login-container, .signup-container) .login-left .carousel-item-prev img { animation: bp-drift 2400ms var(--bp-ease-out) both; }
    :is(.login-container, .signup-container) .login-left .carousel-item.active .custom-caption h1,
    :is(.login-container, .signup-container) .login-left .carousel-item-next .custom-caption h1,
    :is(.login-container, .signup-container) .login-left .carousel-item-prev .custom-caption h1 { animation: bp-caption 600ms 150ms var(--bp-ease-out) backwards; }
    :is(.login-container, .signup-container) .login-left .carousel-item.active .custom-caption p,
    :is(.login-container, .signup-container) .login-left .carousel-item-next .custom-caption p,
    :is(.login-container, .signup-container) .login-left .carousel-item-prev .custom-caption p { animation: bp-caption 600ms 300ms var(--bp-ease-out) backwards; }
    /* M10 the code step fades down when the page shows it */
    :is(.login-container, .signup-container) .login-right #otpdiv,
    :is(.login-container, .signup-container) .login-right #finallogin { animation: bp-step 360ms ease-out backwards; }
    /* M11 checkbox tick */
    :is(.login-container, .signup-container) .login-right #remember-me:checked { animation: bp-tick 180ms var(--bp-ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
    :is(.login-container, .signup-container) .bp-seam .bp-perf { animation-name: bp-window-x; }
    :is(.login-container, .signup-container) .bp-seam .bp-perf::before { animation-name: bp-dots-x; }
    /* F9: on the stacked card the plane flies left to right along the top edge and turns from nose-right to nose-down. */
    :is(.login-container, .signup-container) .bp-seam .bp-flight { animation-name: bp-flight-x; }
    :is(.login-container, .signup-container) .bp-seam .bp-roundel .fa { animation-name: bp-turn-x; }
}
/* Reduced motion: opacity only, short; no movement anywhere (hover lift removed too). */
@media (prefers-reduced-motion: reduce) {
    :is(.login-container, .signup-container) .login-left .carousel-item.active .custom-caption h1,
    :is(.login-container, .signup-container) .login-left .carousel-item.active .custom-caption p { animation: bp-fade 200ms backwards; }
    :is(.login-container, .signup-container) .login-right #otpdiv,
    :is(.login-container, .signup-container) .login-right #finallogin { animation: bp-fade 150ms backwards; }
    :is(.login-container, .signup-container) .login-right .btn-login:hover,
    :is(.login-container, .signup-container) .login-right .btn-login:active { transform: none; }
}

/* =====================================================================================================================
   Forgot Password (.bp-forgot on its card) and Register (.signup-container) - added 15 Oct.
   Everything above this line already reaches both pages through the shared scope. What follows is only what those two
   pages need on top: fields, icons, selects, the long form's rhythm, their own photo halves, and their own timing.
   Nothing here can touch the sign-in page: every selector names .bp-forgot or .signup-container.
   ===================================================================================================================== */

/* ---------- Labels ---------- */
/* The shared rule gives labels 18px above (right for the sign-in, whose groups sit close together). These two pages keep
   their own vertical rhythm: Forgot 8px under the label, Register 6px (it is a long form). Declared after the short-window
   rule above so it wins there too. */
.bp-forgot .login-right .form-group label { margin: 0 0 8px; }
.signup-container .login-right .form-group label { margin: 0 0 6px; }

/* ---------- Fields (same look as the sign-in's) ---------- */
.bp-forgot .login-right .form-control-custom,
.signup-container .login-right .form-control-custom {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 0 14px 0 44px;            /* 44px on the left makes room for the icon */
    border: 1px solid var(--bp-edge);
    border-radius: 10px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 14px 50%;
    background-size: 18px 18px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: var(--bp-ink);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.bp-forgot .login-right .form-control-custom::placeholder,
.signup-container .login-right .form-control-custom::placeholder { color: var(--bp-placeholder); opacity: 1; }
.bp-forgot .login-right .form-control-custom:hover,
.signup-container .login-right .form-control-custom:hover { border-color: var(--bp-muted); }
.bp-forgot .login-right .form-control-custom:focus,
.signup-container .login-right .form-control-custom:focus { border-color: var(--bp-maroon); box-shadow: 0 0 0 4px var(--bp-ring); }

/* Selects: the browser's own arrow is switched off; the icon sits on the left and a small chevron on the right (the
   second background image). */
.bp-forgot .login-right select.form-control-custom,
.signup-container .login-right select.form-control-custom {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-position: 14px 50%, right 14px center;
    background-size: 18px 18px, 14px 14px;
    cursor: pointer;
}

/* Register: while a select shows its empty first choice ("Select Country", "Select Currency") its text takes the placeholder look
   of the other fields: the site's style.css forces the placeholder colour (#9b9b9b, !important), same size (15px) as the field.
   The open list keeps ink. Without :has() support nothing changes (today's look). */
.signup-container .login-right select.form-control-custom:has(option[value=""]:checked) { color: #9b9b9b; }
.signup-container .login-right select.form-control-custom option { color: var(--bp-ink); }

/* One line icon per field, drawn as a background so no markup changes. Muted at rest, maroon on focus. */
.bp-forgot .login-right #agntid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E"); }
.bp-forgot .login-right #agntid:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E"); }
.bp-forgot .login-right #mailid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.bp-forgot .login-right #mailid:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.signup-container .login-right #fname { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.signup-container .login-right #fname:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.signup-container .login-right #lname { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.signup-container .login-right #lname:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.signup-container .login-right #email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.signup-container .login-right #email:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.signup-container .login-right #Mobile { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.signup-container .login-right #Mobile:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.signup-container .login-right #comanynm { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1.5'/%3E%3Cpath d='M9 7.5h2M13 7.5h2M9 11.5h2M13 11.5h2'/%3E%3Cpath d='M10 21v-4h4v4'/%3E%3C/svg%3E"); }
.signup-container .login-right #comanynm:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1.5'/%3E%3Cpath d='M9 7.5h2M13 7.5h2M9 11.5h2M13 11.5h2'/%3E%3Cpath d='M10 21v-4h4v4'/%3E%3C/svg%3E"); }
.signup-container .login-right #Gstnumber { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6 16c.5-1.6 1.7-2.5 3-2.5s2.5.9 3 2.5M14.5 10h4M14.5 13.5h3'/%3E%3C/svg%3E"); }
.signup-container .login-right #Gstnumber:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6 16c.5-1.6 1.7-2.5 3-2.5s2.5.9 3 2.5M14.5 10h4M14.5 13.5h3'/%3E%3C/svg%3E"); }
.signup-container .login-right #OfficeAddress { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.signup-container .login-right #OfficeAddress:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.signup-container .login-right #PCountryCode { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.signup-container .login-right #PCountryCode:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.signup-container .login-right #state { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l6-2.5 6 2.5 6-2.5v13.5l-6 2.5-6-2.5-6 2.5z'/%3E%3Cpath d='M9 4v13.5M15 6.5V20'/%3E%3C/svg%3E"); }
.signup-container .login-right #state:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l6-2.5 6 2.5 6-2.5v13.5l-6 2.5-6-2.5-6 2.5z'/%3E%3Cpath d='M9 4v13.5M15 6.5V20'/%3E%3C/svg%3E"); }
.signup-container .login-right #city { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='8' height='12' rx='1'/%3E%3Crect x='11' y='3' width='10' height='18' rx='1'/%3E%3Cpath d='M6 13h2M6 17h2M14.5 7h3M14.5 11h3M14.5 15h3'/%3E%3C/svg%3E"); }
.signup-container .login-right #city:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='8' height='12' rx='1'/%3E%3Crect x='11' y='3' width='10' height='18' rx='1'/%3E%3Cpath d='M6 13h2M6 17h2M14.5 7h3M14.5 11h3M14.5 15h3'/%3E%3C/svg%3E"); }
.signup-container .login-right #AreaCode { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h15M4 15h15M10 3L8 21M16 3l-2 18'/%3E%3C/svg%3E"); }
.signup-container .login-right #AreaCode:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h15M4 15h15M10 3L8 21M16 3l-2 18'/%3E%3C/svg%3E"); }
.signup-container .login-right #currency { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9.5v.01M18 14.5v.01'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6875' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.signup-container .login-right #currency:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9.5v.01M18 14.5v.01'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363013e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* Register: an invalid field (class added by the page's own validation) gets a red border and a red focus ring. The red
   messages under the fields are untouched. Declared after hover and focus so it wins over them. */
.signup-container .login-right .form-control-custom.input-validation-error { border-color: #dc3545; }
.signup-container .login-right .form-control-custom.input-validation-error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, .16);
}

/* Register: the mobile field fills its row. Today it stops 100px short (width: calc(100% - 100px)) because a
   country-code box that used to sit beside it was removed, and its left corners are square for the same reason. */
.signup-container .login-right .mobile-input-group .form-control-custom {
    width: 100%;
    border-radius: 10px;
}

/* ---------- Register: terms checkbox (the sign-in's Remember Me checkbox) ---------- */
.signup-container .login-right #agree {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    flex: none;
    align-self: flex-start;            /* sits on the first line of the terms text instead of the text baseline */
    top: 0;                            /* the site stylesheet (style.css) nudges every checkbox down with position: relative; top: 10px */
    margin: 0;
    /* The input has an inline margin-top of 3px; 1px centres the 16px box on the first 18px line of the text, so this
       one value needs !important. The inline right margin (8px) is already what is wanted. */
    margin-top: 1px !important;
    padding: 0;
    border: 1.5px solid var(--bp-edge);
    border-radius: 4px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.signup-container .login-right #agree:checked {
    background-color: var(--bp-maroon);
    border-color: var(--bp-maroon);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.signup-container .login-right #agree:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--bp-ring);
    border-color: var(--bp-maroon);
}

/* ---------- Register: text and links ---------- */
/* The terms sentence and the currency warning were #718096 (about 3.8:1 on the panel); muted is 4.5:1 or better. The
   currency warning (the one terms-text inside a full-width column) is the darker label colour, words and weight unchanged. */
.signup-container .login-right .terms-text { color: var(--bp-muted); }
.signup-container .login-right .col-xs-12 > .terms-text { color: var(--bp-ink-2); }
.signup-container .login-right .terms-text a {
    color: var(--bp-maroon);
    font-weight: 700;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size 220ms var(--bp-ease-out);
}
.signup-container .login-right .terms-text a:hover { text-decoration: none; background-size: 100% 1px; }

/* Section titles ("User Information", "Company Details"): small maroon capitals (CSS only, the words are unchanged) over a
   row of dots in the seam's pattern, so the boarding-pass tear carries into the long form. */
.signup-container .login-right .form-section-title {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--bp-maroon);
    border-bottom: 0;
    padding-bottom: 12px;
    margin: 28px 0 15px;
    background: radial-gradient(circle at 5px 50%, var(--bp-perf) 1.5px, transparent 1.9px) 0 100% / 10px 3px repeat-x;
}
.signup-container .login-right .login-header + .form-section-title { margin-top: 8px; }

/* ---------- Photo halves ---------- */
/* Forgot Password: the picture is an inline "background" on the half itself. It is drawn again on ::before so the
   picture alone can zoom (like the slides on the other two pages) without moving the text. */
.bp-forgot .login-left { overflow: hidden; isolation: isolate; }
.bp-forgot .login-left::before { content: ""; position: absolute; inset: 0; z-index: -1; background: inherit; }
/* The badge: the same box as the sign-in's (today's rule there is white at 37% with 10px corners, logo 60px tall, 20px in
   from the top-left of the card). */
.bp-forgot .login-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    background: #ffffff5e;
    border-radius: .625rem;
}
.bp-forgot .login-logo img { max-height: 60px; width: auto; }
/* Register's badge moves to the sign-in's place and size (it was 30px in with a 70px logo). */
.signup-container .login-logo { top: 20px; left: 20px; }
.signup-container .login-logo img { max-height: 60px; }

/* Captions: the sign-in's computed type, measured on the live copy at the same width: heading 34px / 800 / 1.2, text
   22px / 400, heading margin 15px, the soft shadow. (Forgot was 34/800 and 20/500 with letter-spacing; Register 38/500 and 20.) */
.bp-forgot .login-left-content h1 { font-size: 34px; font-weight: 800; line-height: 1.2; margin-bottom: 15px; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.bp-forgot .login-left-content p  { font-size: 22px; font-weight: 400; letter-spacing: normal; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
@media (min-width: 769px) {
    .signup-container .custom-caption h1 { font-size: 34px; font-weight: 800; }
    .signup-container .custom-caption p  { font-size: 22px; font-weight: 400; }
}

/* Register, side by side: the caption sits at about 52% of the (sticky, window-tall) carousel, over bright photos (sunset sky, pale
   water) where white text measured only 1.4 to 2.5:1. The page-wide overlay for the sign-in is a gentle gradient; here, for this
   page's own photos, it is a taller soft band: about the sign-in's tone at the top and bottom, darker across the middle where the
   words are. A plain vertical gradient over the whole slide, so it has no edge and reads as the photo's own tone. (An earlier
   version used a dark oval behind the words; it read as a stain and was removed.) Phones keep the shared overlay: their caption
   sits at the bottom, where it is already darkest. */
/* The photo zooms with a transform animation, which makes the image its own layer painted AFTER the overlay (the overlay comes first
   in the markup), so while a slide was zooming (most of the time with a 3s slideshow) the overlay was hidden behind the photo and
   the caption sat on the bare sky. z-index 1 puts the overlay over the photo and under the caption (z-index 2), always. */
.signup-container .login-left .carousel-item::before { z-index: 1; }
@media (min-width: 769px) {
    .signup-container .login-left .carousel-item::before {
        background: linear-gradient(180deg, rgba(30, 0, 18, .30) 0%, rgba(30, 0, 18, .55) 35%, rgba(30, 0, 18, .55) 65%, rgba(30, 0, 18, .40) 100%);
    }
}

/* Register: the photo stays in view while the form scrolls, whenever the two halves sit side by side. The card and the
   photo half use overflow: clip (the line before it is the fallback: older browsers keep today's hidden), because
   "hidden" would make them scroll containers and sticky would never stick. The carousel is as tall as the window, stuck to
   the top of it, and never taller than the card (so on a tall window it simply fills the card). The page's own 400px / 650px
   heights are !important in places, so these need !important and the longer selector. */
@media (min-width: 769px) {
    .signup-container,
    .signup-container .login-left { overflow: hidden; overflow: clip; }
    /* contain: size stops the 100vh carousel from counting towards the card's height; without it, on a window taller than the
       form, the card grew to the window height and the page gained a scroll. The photo half is as tall as the form half
       (it stretches), and the carousel is never taller than it (max-height below). */
    .signup-container .login-left { contain: size; }
    .signup-container .login-left #loginCarousel {
        position: sticky;
        top: 0;
        height: 100vh !important;
        max-height: 100%;
        min-height: 0 !important;
    }
    .signup-container .login-left #loginCarousel .carousel-inner,
    .signup-container .login-left #loginCarousel .carousel-item { height: 100% !important; min-height: 0 !important; }
    /* A4: the card is about 1440px tall, so the plane lands in the middle of the FIRST SCREEN, not the card's middle: half the
       window height less the card's top edge (40px top bar, now the sign-in's, + 20px margin = 60px). */
    .signup-container .bp-seam .bp-flight { height: min(50%, calc(50vh - 60px)); }
}

/* Short laptop windows (a 768px-high screen leaves about 625-657px): Forgot's fields drop to 42px, like the sign-in's, so the
   card still fits the window the way today's does (at 46px it needed a few pixels of page scroll). Register is a long form
   that always scrolls, so it keeps 46px. */
@media (min-width: 769px) and (max-height: 760px) {
    .bp-forgot .login-right .form-control-custom { height: 42px; }
}

/* ---------- Phones and small tablets: both pages stack exactly like the sign-in ---------- */
@media (max-width: 768px) {
    /* Register: the card was width:100% plus a 10px side margin, so it was 10px wider than the window and its right edge (and the
       right notch) were cut off. Now the sign-in's: at most 95% of the window, centred (9.8px each side at 390, 19.2 at 768). */
    .signup-container { width: 100%; max-width: 95%; margin: 20px auto; }
    /* Forgot: the card has a minimum height and centres its two parts, which left empty bands above the photo strip and below the
       form. The strip now starts at the card's top edge and the form panel takes the rest. */
    .bp-forgot.login-container { justify-content: flex-start; }
    .bp-forgot .login-right { flex: 1 1 auto; }
    /* Register: the page forces a 400px minimum on the carousel parts (!important, at 991px and below). */
    .signup-container #loginCarousel,
    .signup-container #loginCarousel .carousel-inner,
    .signup-container #loginCarousel .carousel-item { min-height: 0 !important; }
    /* Register's slide dots go top-right, centred on the badge's centre line (the sign-in has its counter there). */
    .signup-container .login-left .carousel-indicators { top: 40px; bottom: auto; left: auto; right: 14px; margin: 0; justify-content: flex-end; }
    /* Forgot: the caption runs along the bottom of the strip with the sign-in's insets (20px sides, 22px from the bottom). */
    .bp-forgot .login-left { justify-content: flex-end; padding: 0 20px 22px; }
    .bp-forgot .login-left-content h1 { font-size: 26px; margin-bottom: 6px; }
    .bp-forgot .login-left-content p  { font-size: 16px; margin-bottom: 0; }
}
@media (max-width: 430px) {
    .bp-forgot .login-left .login-left-content h1 { font-size: 18px; }
    .bp-forgot .login-left .login-left-content p  { font-size: 14px; }
    .signup-container .login-left .custom-caption h1 { font-size: 18px; }
    .signup-container .login-left .custom-caption p  { font-size: 14px; }
}

/* ---------- Motion for the two pages ---------- */
@media (prefers-reduced-motion: no-preference) {
    /* A2 Forgot boards: heading 350 and the two groups 430 / 510 come from the shared rules; the button and the Login
       line follow. */
    .bp-forgot .login-right .login-header + .form-group + .form-group + .btn-login { animation: bp-in 450ms 590ms var(--bp-ease-out) backwards; }
    .bp-forgot .login-right .signup-link { animation: bp-in 450ms 670ms var(--bp-ease-out) backwards; }
    /* A3 Register boards: heading 350 (shared), first title 430, name row 510, email 590, mobile 670, then everything after
       the mobile group as one block at 750 (the "~ *" part). */
    .signup-container .login-right .login-header + .form-section-title { animation: bp-in 450ms 430ms var(--bp-ease-out) backwards; }
    .signup-container .login-right .login-header + .form-section-title + .row { animation: bp-in 450ms 510ms var(--bp-ease-out) backwards; }
    .signup-container .login-right .login-header + .form-section-title + .row + .form-group { animation: bp-in 450ms 590ms var(--bp-ease-out) backwards; }
    .signup-container .login-right .login-header + .form-section-title + .row + .form-group + .form-group { animation: bp-in 450ms 670ms var(--bp-ease-out) backwards; }
    .signup-container .login-right .login-header + .form-section-title + .row + .form-group + .form-group ~ * { animation: bp-in 450ms 750ms var(--bp-ease-out) backwards; }
    /* A5 the button sweep, every 2s from 1500ms; none while the button is disabled. */
    .bp-forgot .login-right #fbtn::after,
    .signup-container .login-right #btnSignup::after { animation: bp-sheen 2000ms 1500ms ease-in-out infinite; }
    .bp-forgot .login-right #fbtn:disabled::after,
    .signup-container .login-right #btnSignup:disabled::after { animation: none; }
    /* A6 Forgot: the picture zooms out once; the caption rises (heading, then text). */
    .bp-forgot .login-left::before { animation: bp-drift 2400ms var(--bp-ease-out) both; }
    .bp-forgot .login-left-content h1 { animation: bp-caption 600ms 150ms var(--bp-ease-out) backwards; }
    .bp-forgot .login-left-content p  { animation: bp-caption 600ms 300ms var(--bp-ease-out) backwards; }
}
/* A4 Register, side by side: the tear keeps the sign-in's speed (about 0.4 to 0.46px/ms, so 3000ms for the whole seam) and the
   bottom notch punches when it arrives. The tear starts at 450ms, not 300ms: the plane's flight eases in slowly, so with the same
   start the first dots opened up to 15px ahead of the plane's nose for about 150ms. Starting at 450 keeps the plane ahead of the
   tear in every frame, and the tear only reaches the landing spot after the plane has landed (so the bottom notch is at 3450). */
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
    .signup-container .bp-seam .bp-perf,
    .signup-container .bp-seam .bp-perf::before { animation-duration: 3000ms; animation-delay: 450ms; }
    .signup-container .bp-seam .bp-notch--end { animation-delay: 3450ms; }
}
/* Reduced motion: caption fades only; Forgot's blinking cursor holds still (A8). */
@media (prefers-reduced-motion: reduce) {
    .bp-forgot .login-left-content h1,
    .bp-forgot .login-left-content p { animation: bp-fade 200ms backwards; }
    .bp-forgot .blinking-cursor { animation: none; opacity: 1; }
}