/* ==========================================================================
   ACCOUNT: header sign-in button, and the sign-in dialog
   --------------------------------------------------------------------------
   Loaded LAST, after theme.css and mobile.css, and kept in its own file for the
   same reason mobile.css is: tools\apply-logo-colours.ps1 restores theme.css
   wholesale from a backup, so anything appended there is lost on the next
   palette rollback. These rules must survive a colour change in either
   direction.

   PALETTE, from the logo: navy #043c5c, cyan #54c5d0, yellow #fcc808.
   Yellow on white is 1.52:1 and unreadable as text, so wherever yellow carries
   words it is navy text on a yellow fill; where yellow would be text on white it
   becomes gold #8a6600 (5.27:1).

   Every selector here is prefixed body.gogo, because master.css / gogo.css /
   gogo-pages.css / theme.css all set button and heading colours with enough
   specificity to win a plain class selector.
   ========================================================================== */


/* ---------------------------------------------------- the account slot ---- */

/* Its own container, outside .gogo-actions, because that block is display:none
   below the desktop breakpoint - see the comment in MasterPage.master. The
   UpdatePanel renders a plain <div> inside this, so the slot is the flex parent
   and that wrapper is told to get out of the way. */
body.gogo .rc-account-slot {
    display: flex;
    align-items: center;
}

body.gogo .rc-account-slot > div { display: contents; }

/* ------------------------------------------------- header: signed out ---- */

/* ORANGE, matching the floating Call button (#f97316 in theme.css), which is the
   one orange deliberately kept on the site. Reusing it rather than introducing a
   second orange keeps the two "act now" controls consistent.

   TEXT IS NAVY, NOT WHITE, and that is a contrast decision rather than a stylistic
   one. White on #f97316 measures 2.81:1, which fails the 4.5:1 needed for body
   text. Navy #043c5c on the same orange is 6.21:1. It also matches the navy-on-
   yellow pairing used for the Pay button. */
body.gogo .rc-login-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;                 /* 44px tap target, same as the other header controls */
    padding: 0 17px;
    border: 1.5px solid #f97316;
    border-radius: 8px;
    background: #f97316;
    color: #043c5c;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;

    /* THE CONTINUOUS "HOVER". Runs always, so the button reads as live rather
       than waiting to be discovered.

       Animating box-shadow and transform ONLY - never width, margin or padding -
       because those would reflow the header on every frame and drag the logo and
       burger around with them. A shadow and a transform are composited, so
       nothing else on the page moves. */
    animation: rcLoginBreathe 2.4s ease-in-out infinite;
}

body.gogo .rc-login-btn i { font-size: 16px; color: #043c5c; }

@keyframes rcLoginBreathe {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, .55),
                    0 2px 6px rgba(4, 60, 92, .18);
        transform: translateY(0) scale(1);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(249, 115, 22, 0),
                    0 6px 16px rgba(4, 60, 92, .26);
        transform: translateY(-1.5px) scale(1.015);
    }
}

/* A REAL hover state still has to exist on top of the animation, or the button
   stops responding to the pointer - a control that looks alive but does not react
   when you touch it feels broken. The animation pauses so the two do not fight
   over transform. */
body.gogo .rc-login-btn:hover,
body.gogo .rc-login-btn:focus-visible {
    background: #e25f08;
    border-color: #e25f08;
    color: #043c5c;
    outline: none;
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px rgba(4, 60, 92, .3);
}

body.gogo .rc-login-btn:focus-visible {
    /* Keyboard focus needs to be visible independently of the hover colour. */
    outline: 2px solid #043c5c;
    outline-offset: 2px;
}

body.gogo .rc-login-btn:hover i,
body.gogo .rc-login-btn:focus-visible i { color: #043c5c; }

body.gogo .rc-login-btn:active {
    transform: translateY(0) scale(.99);
    animation-play-state: paused;
}

/* A permanently moving element is a genuine problem for some people - vestibular
   disorders, and anything that competes for attention while reading. Honour the
   system setting and leave a static, still-orange button. */
@media (prefers-reduced-motion: reduce) {
    body.gogo .rc-login-btn {
        animation: none;
        box-shadow: 0 2px 6px rgba(4, 60, 92, .18);
    }
}


/* -------------------------------------------------- header: signed in ---- */

body.gogo .rc-account {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid #e2e6ec;
    border-radius: 8px;
    background: #f7f9fc;
    font-size: 13.5px;
    line-height: 1;
}

body.gogo .rc-account > i { color: #54c5d0; font-size: 15px; }

body.gogo .rc-account-name {
    font-weight: 700;
    color: #043c5c;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.gogo a.rc-signout {
    color: #8a6600;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    border-left: 1px solid #dfe4ea;
    padding-left: 9px;
}

body.gogo a.rc-signout:hover,
body.gogo a.rc-signout:focus-visible {
    color: #043c5c;
    text-decoration: underline;
}


/* ============================== THE DIALOG ============================== */

/* Hidden by default even when the server renders it, so it cannot flash on
   screen before the script decides. .is-open is added by the script and by the
   endRequest sync after a partial postback. */
body.gogo .rc-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483600;          /* above the floating call/WhatsApp docks */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

body.gogo .rc-modal.is-open { display: flex; }

body.gogo.rc-modal-lock { overflow: hidden; }

body.gogo .rc-modal-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: rgba(4, 60, 92, .62);
    backdrop-filter: blur(3px);
    cursor: pointer;
}

body.gogo .rc-modal-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 412px;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(4, 60, 92, .34);
    animation: rcModalIn .18s ease-out;
}

@keyframes rcModalIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* Respect a reduced-motion preference rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
    body.gogo .rc-modal-box { animation: none; }
}

body.gogo .rc-modal-x {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

body.gogo .rc-modal-x:hover,
body.gogo .rc-modal-x:focus-visible {
    background: #fcc808;
    color: #043c5c;
    outline: none;
}


/* ---- head ---- */

body.gogo .rc-modal-head {
    background: #043c5c;
    padding: 24px 26px 20px;
    text-align: center;
}

body.gogo .rc-modal-mark {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #fcc808;
    color: #043c5c;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.gogo .rc-modal-head h3 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .1px;
}

body.gogo .rc-modal-head p {
    margin: 0;
    color: #b9c4d4;
    font-size: 12.8px;
    line-height: 1.5;
}


/* ---- body ---- */

body.gogo .rc-modal-body { padding: 22px 26px 24px; }

body.gogo .rc-modal-body label {
    display: block;
    margin: 0 0 7px;
    color: #4a5462;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
}

body.gogo .rc-modal-body .rc-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid #d7dde6;
    border-radius: 9px;
    background: #ffffff;
    color: #111111;
    /* 16px, not 14px: anything smaller makes iOS Safari zoom the page on focus
       and the customer is then looking at a cropped dialog. */
    font-size: 16px;
    box-sizing: border-box;
}

body.gogo .rc-modal-body .rc-input:focus {
    border-color: #54c5d0;
    box-shadow: 0 0 0 3px rgba(84, 197, 208, .22);
    outline: none;
}

body.gogo .rc-modal-body .rc-code {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 9px;
    text-indent: 9px;             /* re-centres text that letter-spacing pushed left */
    height: 56px;
}

body.gogo .rc-modal-btn {
    width: 100%;
    height: 48px;
    margin-top: 13px;
    border: 0;
    border-radius: 9px;
    background: #fcc808;
    /* !important: gogo.css sets colour on button-like elements with a rule that
       otherwise wins here, and navy-on-yellow is the readable pairing. */
    color: #043c5c !important;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s;
}

body.gogo .rc-modal-btn:hover,
body.gogo .rc-modal-btn:focus-visible {
    filter: brightness(.94);
    outline: none;
}

body.gogo .rc-sent-to {
    margin: 0 0 15px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f2f8f9;
    color: #3f4855;
    font-size: 12.8px;
    line-height: 1.45;
    word-break: break-all;
}

body.gogo .rc-sent-to b { color: #043c5c; }

body.gogo .rc-modal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
}

body.gogo .rc-modal-links a {
    color: #8a6600;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

body.gogo .rc-modal-links a:hover { text-decoration: underline; color: #043c5c; }

body.gogo .rc-modal-fine {
    margin: 12px 0 0;
    color: #78818f;
    font-size: 11.5px;
    line-height: 1.5;
}

body.gogo .rc-modal-help {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #eef0f4;
    color: #78818f;
    font-size: 12px;
    text-align: center;
}

body.gogo .rc-modal-help a { color: #8a6600; font-weight: 600; text-decoration: none; }
body.gogo .rc-modal-help a:hover { text-decoration: underline; }


/* ---- messages ---- */

body.gogo .rc-modal-msg {
    margin: 13px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12.8px;
    line-height: 1.5;
}

body.gogo .rc-modal-msg.ok  { background: #eef8f0; color: #1d6b33; }
body.gogo .rc-modal-msg.bad { background: #fdeeee; color: #a3241f; }


/* ------------------------------------------------------------- mobile ---- */

@media (max-width: 760px) {
    body.gogo .rc-modal { padding: 14px; align-items: flex-start; padding-top: 34px; }
    body.gogo .rc-modal-box { max-width: none; }

    body.gogo .rc-modal-head { padding: 20px 20px 17px; }
    body.gogo .rc-modal-head h3 { font-size: 17.5px; }
    body.gogo .rc-modal-body { padding: 19px 20px 21px; }

    body.gogo .rc-modal-body .rc-code { font-size: 22px; letter-spacing: 7px; text-indent: 7px; }

    /* In the collapsed menu the account controls are full width like the rest.
       The slot must be forced visible: it is a child of .gogo-nav, which the site
       hides wholesale until the burger is tapped. */
    body.gogo .rc-account-slot {
        display: flex;
        width: 100%;
        margin: 4px 0 2px;
    }

    body.gogo .gogo-nav .rc-login-btn,
    body.gogo .gogo-nav .rc-account {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   ACCOUNT PAGE  -  Account.aspx

   ONE LAYOUT FOR PHONE AND DESKTOP. The grid reflows, but there is a single
   set of markup and a single set of rules. Two dashboards drift apart within a
   month and the mobile one is always the one that gets forgotten - which is
   how the site ended up with account features on the phone tab bar that had no
   desktop equivalent.

   Every selector is prefixed body.gogo, matching the rest of this file: it
   loads last, after theme.css and mobile.css, and needs the specificity to
   win.
   ===================================================================== */

body.gogo .rc-acct-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 26px 16px 90px;
}

/* Bottom padding clears the phone tab bar, which is fixed and would otherwise
   sit on top of the last card. */
@media (min-width: 761px) {
    body.gogo .rc-acct-wrap { padding-bottom: 48px; }
}

/* ---------------------------------------------------------------- header --- */

body.gogo .rc-acct-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
}

body.gogo .rc-acct-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #043c5c;
    color: #fcc808;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .5px;
}

body.gogo .rc-acct-id { flex: 1 1 auto; min-width: 0; }

body.gogo .rc-acct-id h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #043c5c;
    line-height: 1.25;
}

body.gogo .rc-acct-email,
body.gogo .rc-acct-since {
    margin: 2px 0 0;
    font-size: 13px;
    color: #6b7484;
    /* Long addresses must not push the sign-out button off a narrow screen. */
    overflow-wrap: anywhere;
}

body.gogo .rc-acct-since { font-size: 12px; color: #8a929e; }

body.gogo a.rc-acct-out,
body.gogo .rc-acct-out {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 7px 13px;
    border: 1px solid #d6dde7;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #55606d;
    text-decoration: none;
}

body.gogo .rc-acct-out:hover { background: #f4f6f9; color: #043c5c; }

/* ----------------------------------------------------------------- stats --- */

body.gogo .rc-acct-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

body.gogo .rc-acct-stat {
    padding: 13px 14px;
    border: 1px solid #e4e8ee;
    border-radius: 12px;
    background: #fff;
}

body.gogo .rc-acct-stat .k {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #8a929e;
}

body.gogo .rc-acct-stat .v {
    display: block;
    margin-top: 4px;
    font-size: 20px;
    font-weight: 800;
    color: #043c5c;
}

/* Amber, not red: money still to pay on a reserved booking is the normal state
   of things here, not an error. */
body.gogo .rc-acct-stat.is-due {
    background: #fff8e1;
    border-color: #f0d9ae;
}

body.gogo .rc-acct-stat.is-due .v { color: #8a5a00; }

/* ----------------------------------------------------------------- cards --- */

body.gogo .rc-acct-card {
    padding: 16px 16px 18px;
    margin: 0 0 14px;
    border: 1px solid #e4e8ee;
    border-radius: 14px;
    background: #fff;
}

body.gogo .rc-acct-card.is-next { border-color: #cfe0ea; background: #f7fbfd; }
body.gogo .rc-acct-card.is-due  { border-color: #f0d9ae; background: #fffdf7; }

body.gogo .rc-acct-card-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}

body.gogo .rc-acct-card-hd h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #043c5c;
}

body.gogo .rc-acct-note {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #55606d;
}

body.gogo .rc-acct-chip {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef2f7;
    border: 1px solid #d6dde7;
    font-size: 11.5px;
    font-weight: 700;
    color: #043c5c;
    white-space: nowrap;
}

body.gogo .rc-acct-chip.is-now {
    background: #fff4e0;
    border-color: #f0d9ae;
    color: #8a5a00;
}

/* ------------------------------------------------------------- next trip --- */

body.gogo .rc-acct-next-route {
    font-size: 19px;
    font-weight: 800;
    color: #111;
    line-height: 1.3;
    margin: 0 0 10px;
}

body.gogo .rc-acct-next-route .r-arrow { color: #98a2b3; font-weight: 400; }

body.gogo ul.rc-acct-next-meta {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 6px;
}

body.gogo ul.rc-acct-next-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #55606d;
}

body.gogo ul.rc-acct-next-meta i { color: #98a2b3; width: 15px; text-align: center; }

body.gogo .rc-acct-next-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ----------------------------------------------------------- outstanding --- */

body.gogo .rc-acct-due-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 10px 0;
    border-top: 1px solid #f0e6d2;
    font-size: 13.5px;
}

body.gogo .rc-acct-due-row .d-route { flex: 1 1 160px; font-weight: 700; color: #111; min-width: 0; }
body.gogo .rc-acct-due-row .d-no    { font-size: 11.5px; color: #8a929e; font-family: ui-monospace, Menlo, Consolas, monospace; }
body.gogo .rc-acct-due-row .d-amt   { font-weight: 800; color: #8a5a00; }
body.gogo .rc-acct-due-row .d-link  { font-size: 12.5px; font-weight: 600; color: #043c5c; }

/* ----------------------------------------------------------------- forms --- */

body.gogo .rc-acct-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 0 0 14px;
}

body.gogo .rc-acct-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

body.gogo .rc-acct-f label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #6b7484;
}

body.gogo input.rc-acct-input {
    /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus,
       which then leaves the layout scrolled sideways. */
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid #d6dde7;
    border-radius: 9px;
    background: #fff;
    color: #111;
    width: 100%;
    box-sizing: border-box;
}

body.gogo input.rc-acct-input:focus {
    outline: none;
    border-color: #043c5c;
    box-shadow: 0 0 0 3px rgba(4, 60, 92, .12);
}

body.gogo .rc-acct-fixed {
    padding: 10px 12px;
    border: 1px dashed #d6dde7;
    border-radius: 9px;
    background: #f7f9fc;
    font-size: 15px;
    color: #55606d;
    overflow-wrap: anywhere;
}

body.gogo .rc-acct-hint { font-size: 11.5px; color: #8a929e; line-height: 1.5; }

body.gogo .rc-acct-ok,
body.gogo .rc-acct-err {
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.5;
}

body.gogo .rc-acct-ok  { background: #e8f5ec; border: 1px solid #bfe0c9; color: #14682d; }
body.gogo .rc-acct-err { background: #fdeceb; border: 1px solid #f3c9c6; color: #8c201a; }

/* --------------------------------------------------------------- buttons --- */

body.gogo a.rc-acct-btn,
body.gogo .rc-acct-btn,
body.gogo input.rc-acct-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 9px;
    background: #fcc808;
    color: #043c5c;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

body.gogo a.rc-acct-btn:hover,
body.gogo input.rc-acct-btn:hover { background: #e6b400; color: #043c5c; }

body.gogo a.rc-acct-btn.ghost {
    background: #fff;
    border: 1px solid #d6dde7;
    color: #043c5c;
}

body.gogo a.rc-acct-btn.ghost:hover { background: #f4f6f9; }

body.gogo .rc-acct-foot {
    margin: 18px 0 0;
    font-size: 12.5px;
    color: #8a929e;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 480px) {
    body.gogo .rc-acct-head { flex-wrap: wrap; }
    body.gogo .rc-acct-out  { order: 3; }
    body.gogo .rc-acct-id h1 { font-size: 19px; }
    body.gogo .rc-acct-next-route { font-size: 17px; }
}

/* The header name is a link to Account.aspx now. It kept its old .rc-account-name
   rules, which were written for a <span>, so the anchor defaults have to be
   undone - otherwise it renders underlined and in the browser's link blue against
   the navy bar. */
body.gogo .rc-account a.rc-account-name {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

body.gogo .rc-account a.rc-account-name:hover { text-decoration: underline; }

body.gogo .rc-account a.rc-account-name:focus-visible {
    outline: 2px solid #fcc808;
    outline-offset: 2px;
    border-radius: 4px;
}