:root {
    --primary-color: var(--fleet-primary-color, #e0a241);
    --secondary-color: var(--fleet-secondary-color, #d5a040);
    --accent-color: var(--fleet-accent-color, #f2c97d);
    --page-background: var(--fleet-page-background, #0e0e0e);
    --background-dark: var(--fleet-background-dark, #121212);
    --background-panel: var(--fleet-background-panel, #1a1a1a);
    --text-white: var(--fleet-text-white, #ffffff);
    --text-light: var(--fleet-text-light, #bcbcbc);
    --text-dark: var(--fleet-text-dark, #000000);
    --text-black: var(--fleet-text-black, #000000);
    --label-text-color: var(--fleet-label-text-color, #e0a241);

    --input-border-radius: var(--fleet-input-border-radius, 8px);
    --button-gradient-start: var(--fleet-button-gradient-start, #e0a241);
    --button-gradient-end: var(--fleet-button-gradient-end, #ffcc73);
    --button-border-color: var(--fleet-button-border-color, #e0a241);
    --button-text-color: var(--fleet-button-text-color, #000000);
    --button-primary-color: var(--fleet-button-primary-color, #e0a241);
    --button-hover-color: var(--fleet-button-hover-color, #f2c97d);
    --button-active-color: var(--fleet-button-active-color, #d5a040);

    --color-delete: var(--fleet-color-delete, #3b0000);
    --color-delete-hover: var(--fleet-color-delete-hover, #730000);
    --notification-background: var(--fleet-notification-background, #3b0000);
}

body.fleetform-login-page {
    background: var(--fleet-background-dark) !important;
    color: var(--text-light);

    /* Standalone branded page. login.php calls wp_head(), which emits the
       active theme's global styles — block themes (e.g. Twenty Twenty-Five)
       inject body font-size/family, a base background, and root-padding side
       insets that bleed in and break this layout. Neutralize them so /login
       renders identically regardless of the tenant's theme. */
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    --wp--style--root--padding-top: 0 !important;
    --wp--style--root--padding-right: 0 !important;
    --wp--style--root--padding-bottom: 0 !important;
    --wp--style--root--padding-left: 0 !important;
}

/* Scoped border-box reset. Frameworks/themes that ship a global
   `* { box-sizing: border-box }` (e.g. hello-elementor + plugins on production
   sites) make width:100% inputs include their padding. Block themes like
   Twenty Twenty-Five DON'T, so without this the login inputs render as
   content-box and overflow the card ("stretch all the way across"). Scoping
   it here keeps /login identical regardless of the tenant's theme. */
body.fleetform-login-page,
body.fleetform-login-page *,
body.fleetform-login-page *::before,
body.fleetform-login-page *::after {
    box-sizing: border-box;
}

/* Form-control normalize. Production sites inherit these from a global
   framework reset (Elementor/plugins): consistent font, no native UA button
   chrome, zeroed margins. Block themes like Twenty Twenty-Five ship none of
   it, so without this the submit button picks up native UA appearance and
   inherits the theme's oversized Manrope font, and inputs render off. Scope to
   the login page so it's theme-independent. Checkboxes/radios keep their
   native look (login.css's own rules below set the final input/button styles). */
body.fleetform-login-page input,
body.fleetform-login-page button,
body.fleetform-login-page select,
body.fleetform-login-page textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    margin: 0;
}
body.fleetform-login-page input:not([type="checkbox"]):not([type="radio"]),
body.fleetform-login-page button {
    -webkit-appearance: none;
    appearance: none;
}

.hidden {
    display: none !important;
}

.fleetform-login-wrapper {
    width: 100%;
    max-width: 320px;
    margin: 120px auto 100px auto;
    text-align: center;
}

.fleetform-logo {
    max-width: 100%;
    max-height: 80px;
    margin-bottom: 20px;
}

.fleetform-login-box {
    background: var(--background-panel);
    padding: 26px 24px;
    border: 1px solid var(--button-border-color);
    border-radius: var(--input-border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    text-align: left;
    color: var(--text-light);
}

.fleetform-login-box label {
    font-weight: 600;
    display: block;
    margin: 12px 0 4px;
    /* Explicit size: without it the label inherits the page base font, and
       other stylesheets loaded on the /login route (admin-theme / active
       theme) inflate that base — the labels then rendered ~2x oversized. */
    font-size: 14px;
    line-height: 1.4;
    color: var(--label-text-color);
}

.fleetform-login-box input[type="text"],
.fleetform-login-box input[type="password"] {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--button-border-color);
    border-radius: var(--input-border-radius);
    background: var(--background-dark);
    color: var(--text-white);
}

.fleetform-login-box input[type="submit"] {
    width: 100%;
    padding: 10px 0;
    background: linear-gradient(to right, var(--button-gradient-start), var(--button-gradient-end));
    border: none;
    color: var(--button-text-color);
    font-weight: 600;
    border-radius: var(--input-border-radius);
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.fleetform-login-box input[type="submit"]:hover {
    background: var(--button-hover-color);
}

.fleetform-login-message {
    background: var(--notification-background);
    padding: 10px;
    border-left: 4px solid var(--button-primary-color);
    margin-bottom: 20px;
    color: var(--text-white);
}

.fleetform-remember-submit {
    display: flex;
    justify-content: space-between;
    align-items: center; /* vertically center "Remember Me" with the Log In button */
    margin-top: 16px;
    gap: 10px;
}

.fleetform-remember-submit .remember-me-label {
    font-size: 14px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    flex: 1;
}

.fleetform-remember-submit input[type="submit"] {
    width: 110px;
    padding: 6px 8px;
    background: linear-gradient(to right, var(--button-gradient-start), var(--button-gradient-end));
    border: 1px solid var(--button-border-color);
    color: var(--button-text-color);
    font-weight: bold;
    border-radius: var(--input-border-radius);
    cursor: pointer;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.fleetform-password-buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 16px;
    gap: 10px;
}

.password-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.password-buttons button,
.password-buttons input[type="submit"] {
    flex: 1 1 48%;
    min-width: 120px;
    padding: 10px 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: var(--input-border-radius);
    text-align: center;
}

.fleetform-password-buttons input[type="submit"] {
    max-width: 150px;
}

.fleetform-remember-submit .wp-generate-pw {
    padding: 6px 8px;
    border-radius: var(--input-border-radius);
    background: none;
    border: 1px solid var(--button-border-color);
    color: var(--button-border-color);
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

/* Match WP structure, keep your styles */
.password-input-container {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.password-input-wrapper {
    flex-grow: 1;
}

.password-input-container input#pass1 {
    width: 100%;
    margin-bottom: 0;
    padding-right: 70px; /* Reserve space for the toggle button */
    overflow: hidden;
    box-sizing: border-box;
}

.password-input-container .wp-hide-pw {
    position: absolute;
    right: 4px;
    inset-block: 0;
    display: flex;
    align-items: center;
    padding: 0 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-light);
}


.password-input-container .dashicons {
    font-size: 18px;
    line-height: 1;
}

.reset-pass-form #pass-strength-result {
    margin-left: auto;
    margin-right: auto;
}

.fleetform-password-strength-wrapper {
    text-align: center;
    margin-top: 5px;
}

#pass-strength-result {
  display: none !important; /* Force hidden by default */
  padding: 6px 16px;
  border-radius: 8px;
  margin-top: 5px;
  width: 100%;
  font-weight: bold;
  font-size: 15px;
  background-color: #999;
  color: var(--text-white);
  text-align: center;
  transition: background-color 0.3s ease;
}

/* When JS removes .empty, override to show */
#pass-strength-result:not(.empty) {
  display: inline-block !important;
}

/* Strength level backgrounds */
#pass-strength-result.bad { background-color: #b30000; }
#pass-strength-result.weak { background-color: #e69500; }
#pass-strength-result.good { background-color: #cccc00; color: #000; }
#pass-strength-result.strong { background-color: #009900; }

.fleetform-login-footer {
    margin-top: 20px;
    text-align: left;
    font-size: 13px;
    color: var(--text-light);
}

.fleetform-login-footer a {
    color: var(--accent-color);
    text-decoration: none;
}

.fleetform-login-footer a:hover {
    color: var(--button-hover-color);
}

/* Create Account Page Specific Styles */
.lookup-type-selector {
    margin: 20px 0;
}

.lookup-type-selector label {
    display: inline-block;
    margin-right: 20px;
    font-weight: normal;
    cursor: pointer;
    color: var(--text-light);
}

.lookup-type-selector input[type="radio"] {
    margin-right: 5px;
    accent-color: var(--primary-color);
}

/* Create account form elements that need special styling */
.fleetform-login-box p {
    color: var(--text-light);
    margin-bottom: 16px;
    line-height: 1.5;
    text-align: center;
}

.fleetform-login-box h2 {
    color: var(--text-white);
    margin-bottom: 16px;
    text-align: center;
    font-size: 24px;
}

/* Add margin below the "Enter your booking number" label */
.fleetform-login-box label[for="lookup_value"] {
    margin-bottom: 16px;
}

/* Customer information completion form styles */
.customer-info-summary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px;
    border-radius: var(--input-border-radius);
    margin-bottom: 20px;
    color: var(--text-white);
}

.required {
    color: #ff6b6b;
    font-weight: bold;
}

.fleetform-login-box small {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 16px;
}

.button-secondary {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--input-border-radius);
    margin-top: 10px;
    transition: all 0.2s ease-in-out;
}

.button-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}