/* Register-only rules. The page still takes .login-form, .login-form-item and the floating
   label behaviour from Login.css — everything here is scoped to .register-form so the login
   screen, which shares those classes, is not touched. */

/* Login's card is 300px, which is right for two fields and far too narrow for seven.
   max-width keeps it off the edges on a small screen, where the grid drops to one column. */
.login-form.register-form {
    width: 620px;
    max-width: calc(100vw - 40px);
}

.register-form .register-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 18px;
    width: 100%;
}

/* Dealer Code is the odd seventh field, so it takes the whole last row rather than
   leaving a hole beside it. */
.register-form .register-grid .span-2 {
    grid-column: 1 / -1;
}

/* The select has to match the inputs it sits next to: Login.css styles .login-form-item input
   only, so without this the dropdown renders at the browser's default height and border. */
.register-form .login-form-item select {
    display: block;
    width: 100%;
    height: 35px;
    background: transparent;
    border: solid 1px #ccc;
    border-radius: 4px;
    padding: 0 11px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all .2s ease;
}

.register-form .login-form-item select:focus {
    border-color: #0078d4;
    outline: none;
}

/* A select always has a value, so there is no :placeholder-shown state to key off the way the
   inputs do — its label sits in the floated position permanently. */
.register-form .login-form-item select + label {
    position: absolute;
    z-index: 2;
    top: -8px;
    left: 10px;
    font-size: 11px;
    font-weight: bold;
    color: #999;
    background: #fff;
    padding: 0 4px;
    cursor: pointer;
    transition: all .2s ease;
}

.register-form .login-form-item select:focus + label {
    color: #0078d4;
}

/* The footer carried three classes that no stylesheet defined, so it rendered as unstyled
   default text. Toned to the page rather than to Login.css's html/body { background: #007BFF },
   which app.css overrides — the ground here is actually near-white, so white text on it is
   invisible. Same greys as .ismember directly above it. */
.bottom-row-header {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.bottom-row-header .bottom-row-footer1-login {
    font-size: 12px;
    color: #555;
}

.bottom-row-header .bottom-row-footer2-login {
    font-size: 12px;
    font-weight: 700;
    color: #3399ff;
}

/* Below this the two columns no longer fit the 300px-ish field width, so the card falls back
   to Login's single column. The page scrolls again there, which is the correct trade on a
   phone — squeezing two columns in would be worse than scrolling. */
@media (max-width: 640px) {
    .register-form .register-grid {
        grid-template-columns: 1fr;
    }
}