/* 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%;
}

/* Dense, so the e-mail code row (span-2, inserted right after Email in the markup) does not
   push Password down a row and leave a hole beside Email. */
.register-form .register-grid {
    grid-auto-flow: row dense;
}

/* Verify / Resend / Confirm sit inside the right end of their input, like Login's password eye.
   The input gets matching right padding so typed text never runs underneath the button. */
.register-form .email-verify-item input {
    padding-right: 92px;
}

/* Once verified the 80px button is replaced by the 20px tick, so give the address the room back -
   keeping 92px here cropped a normal-length address for no reason. */
.register-form .email-verify-item.is-verified input {
    padding-right: 36px;
}

.register-form .email-verify-item .email-verify-btn {
    position: absolute;
    z-index: 3;
    top: 4px;
    right: 4px;
    height: 27px;
    min-width: 80px;
    padding: 0 10px;
    border: none;
    border-radius: 3px;
    background: #0078d4;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

.register-form .email-verify-item .email-verify-btn:hover:not(:disabled) {
    background: #005fa8;
}

.register-form .email-verify-item .email-verify-btn:disabled {
    background: #9cc3e6;
    cursor: default;
}

/* Replaces the button once verified; its 20x20 size is on the <svg> itself. */
.register-form .email-verify-item .email-verified-icon {
    position: absolute;
    z-index: 3;
    top: 7.5px;
    right: 10px;
}

/* Read-only after verification - greyed so it reads as locked rather than broken. */
.register-form .email-verify-item input[readonly] {
    background: #f5f5f5;
    color: #555;
}

/* The code is six digits - spaced so it reads the way the e-mail prints it. */
.register-form .email-code-item input {
    letter-spacing: 4px;
}

/* 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;
    }
}

/* "45 Days Free Plan" strip under the heading — the Subscription page's gold, so the offer reads
   as the same product the user will later renew. */
.register-form .register-free-plan {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(90deg, #fff6d9, #fffdf6);
    border: 1px solid #f0d58a;
    border-left: 3px solid #e0a800;
    text-align: left;
}

.register-form .register-free-plan svg {
    flex-shrink: 0;
}

.register-free-plan-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #8a5a00;
}

.register-free-plan-text {
    margin-top: 1px;
    font-size: 0.78rem;
    color: #3a4254;
}

/* Billing Mode / Billing + Other Mode: two cards, one picked. The blue is the inputs' focus blue. */
.register-form .register-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 16px;
}

.register-form .register-mode-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: all .2s ease;
}

.register-form .register-mode-option:hover {
    border-color: #0078d4;
}

.register-form .register-mode-option.is-selected {
    border-color: #0078d4;
    box-shadow: 0 0 0 1px #0078d4 inset;
    background: #f0f7ff;
}

.register-mode-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
}

.register-form .register-mode-option.is-selected .register-mode-name {
    color: #0078d4;
}

.register-mode-text {
    font-size: 0.75rem;
    color: #555;
}

@media (max-width: 640px) {
    .register-form .register-mode {
        grid-template-columns: 1fr;
    }
}