/* ---------------------------------------------------------------------------
   form-ux.css — accessible floating labels, inline field errors and a
   show/hide password toggle for the sign-up / login forms
   (auth/free-trial-new, auth/login, the home-page register tab).
   Behaviour lives in assets/designs/js/form-ux.js.

   Markup:
     <div class="fx-float">
       <input class="form-control" id="x" placeholder=" ">   (placeholder=" " is
       <label for="x">Label *</label>                         what lets the label
     </div>                                                   rest inside the field)
     <div class="fx-error" id="x-error" hidden></div>

   A <select> wrapper adds .fx-float--select so its label always sits on the
   top border (a select is never "empty" the way a text box is).
   The control's 15px bottom margin moves to the wrapper so the label can be
   centred on the control itself.
--------------------------------------------------------------------------- */
.fx-float {
    position: relative;
    margin-bottom: 15px;
}
.fx-float > .form-control {
    margin-bottom: 0 !important;
}
.fx-float > label {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    max-width: calc(100% - 22px);
    margin: 0;
    padding: 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    background: #fff;
    border-radius: 3px;
    color: #5f6368;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: none;
    text-align: left;
    transition: top .15s ease, font-size .15s ease, color .15s ease;
    z-index: 2;
}
/* Floated: focused, filled, or a select. */
.fx-float > .form-control:focus + label,
.fx-float > .form-control:not(:placeholder-shown) + label,
.fx-float--select > label {
    top: 0;
    font-size: 11px;
    font-weight: 600;
    color: #6A040F;
}
.fx-float > .form-control:focus + label {
    color: #9D0208;
}
/* A read-only control (the date picker) keeps its grey fill under a resting label. */
.fx-float > .form-control[readonly]:placeholder-shown:not(:focus) + label {
    background: transparent;
}
/* The empty placeholder (" ") must never show over the resting label. */
.fx-float > .form-control::placeholder {
    color: transparent;
}
/* A password field leaves room for the eye button. */
.fx-float--pw > .form-control {
    padding-right: 44px;
}

/* Keyboard focus ring (the theme strips the default one). */
.fx-form .form-control:focus,
.fx-form select:focus {
    border-color: #E85D04 !important;
    box-shadow: 0 0 0 3px rgba(232, 93, 4, .35) !important;
    outline: 0;
}

/* Show/hide password button. */
.fx-pw-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5f6368;
    font-size: 16px;
    line-height: 36px;
    cursor: pointer;
    z-index: 3;
}
.fx-pw-toggle:hover {
    color: #9D0208;
}
.fx-pw-toggle:focus {
    outline: 2px solid #E85D04;
    outline-offset: 0;
}

/* Inline field error. */
.fx-error {
    margin: -11px 0 10px;
    padding-left: 2px;
    color: #D00000;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}
.fx-error[hidden] {
    display: none;
}
.fx-error::before {
    content: "\f071"; /* fa-exclamation-triangle */
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 5px;
}
.fx-error a {
    color: inherit;
    text-decoration: underline;
}
.fx-form .form-control[aria-invalid="true"] {
    border: 2px solid #D00000 !important;
}

/* Short hint under a field (e.g. password length). */
.fx-hint {
    margin: -11px 0 8px;
    padding-left: 2px;
    color: #5f6368;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
}
/* the error repeats the rule, so the hint steps aside while it shows */
.fx-error:not([hidden]) + .fx-hint {
    display: none;
}
.loginarea .fx-hint {
    color: rgba(255, 255, 255, .85);
}

/* reCAPTCHA error, centred under the widget. */
.fx-captcha-error {
    display: block;
    margin-top: 4px;
    color: #D00000;
    font-size: 12.5px;
    font-weight: 600;
}
.fx-captcha-error:empty {
    display: none;
}
.loginarea .fx-captcha-error {
    color: #FFBA08;
}

/* Status line under the email field (checking / available). */
.fx-status {
    margin: -11px 0 8px;
    min-height: 0;
    font-size: 12.5px;
    text-align: left;
}
.fx-status:empty {
    display: none;
}

/* Top-of-form error summary (screen-reader announced via role="alert"). */
.fx-summary ul {
    margin: 4px 0 0;
    padding-left: 18px;
}
.fx-summary li {
    line-height: 1.5;
}
.fx-summary a {
    text-decoration: underline;
}
.banner_form .fx-summary {
    margin-bottom: 10px;
    color: #D00000;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}
.banner_form .fx-summary a {
    color: inherit;
}
.fx-summary:focus {
    outline: 2px solid #E85D04;
    outline-offset: 2px;
}

/* ---- Dark (maroon) forms: /free-trial and /login ------------------------ */
.loginarea .fx-error,
.loginarea .fx-status {
    color: #FFBA08;
}
.loginarea .fx-form .form-control[aria-invalid="true"] {
    border-color: #FFBA08 !important;
}
.loginarea .fx-label-top {
    display: block;
    margin: 0 0 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
}

/* "or" divider above the Google button. */
.fx-or {
    display: flex;
    align-items: center;
    margin: 18px 0 12px;
    color: #fff;
    font-size: 13px;
}
.fx-or::before,
.fx-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid rgba(255, 255, 255, .45);
}
.fx-or span {
    padding: 0 10px;
}

/* ---- Home-page banner form: keep its short-viewport compaction ---------- */
.banner_form .fx-float > label {
    font-size: 15px;
}
.banner_form .fx-float > .form-control:focus + label,
.banner_form .fx-float > .form-control:not(:placeholder-shown) + label,
.banner_form .fx-float--select > label {
    font-size: 11px;
}
@media only screen and (min-width: 992px) and (max-height: 820px) {
    /* the base sheet drops the 15px margin of controls inside a .row here */
    .banner_form .tab-content .row .fx-float {
        margin-bottom: 0;
    }
    .banner_form .tab-content .row .fx-error {
        margin: 3px 0 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .fx-float > label {
        transition: none;
    }
}