/* ============================================
   TrustFord Branding Override Stylesheet
   ============================================ */

/* 1. Ford Font Override - applies to all elements */
body,
input,
select,
textarea,
button,
h1, h2, h3, h4, h5, h6,
p, a, li, td, th,
label, span, div,
.button, .link,
.MainMenuLink,
.PreferencesMenuLink,
.login-text,
.preferences-card-title,
.preferences-card-body,
.panel-title,
.panel-intro,
#ClientName,
.details-form-group,
.login-field {
    font-family: 'FordF1', 'FordAntennaRegular', sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
}

/* Panel titles slightly larger */
.panel-title {
    font-size: 20pt !important;
}

/* 2. Centre all text and content */
body {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.panel,
.inner-panel,
.panel-intro,
.login-panel,
#login-body-container,
.preferences-panel,
.preferences-card,
#PreferencesPanelsContainer,
.details-form-group,
.save-preferences-button-container,
.opt-out-all-container,
p, h1, h2, h3, h4, h5, h6,
label, span {
    text-align: center !important;
}

/* Constrain content width */
form,
main,
.container,
.wrapper,
#body-container,
#login-body-container,
[class*="content"] {
    max-width: 600px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* 3. Centre the logo */
#ClientLogo {
    float: none !important;
    text-align: center !important;
}

#ClientLogo > img {
    display: block !important;
    margin: 0 auto !important;
}

/* 4. Ford blue borders on login inputs */
.login-field,
input.login-field,
input.login-field[type="text"],
input#LoginField_Forename,
input#LoginField_Surname,
input#LoginField_Email,
input#AccessCode {
    border: 2px solid #003478 !important;
    border-radius: 5px !important;
    padding: 10px !important;
    box-shadow: 0 0 0 1px #003478 !important;
    -webkit-appearance: none !important;
    font-family: 'FordF1', 'FordAntennaRegular', sans-serif !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}

/* 5. Rounded, centred buttons — all Ford blue with white text */
button,
input[type="submit"],
.button,
.link,
.change-this-button,
.savePreferencesButton,
#SaveDetailsButton,
.history-statement-button,
.address-lookup-button,
.confirm-popup-button {
    border-radius: 25px !important;
    max-width: 400px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    padding: 12px 30px !important;
    box-sizing: border-box !important;
    font-family: 'FordF1', 'FordAntennaRegular', sans-serif !important;
    font-size: 16px !important;
    background-color: #003478 !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    margin-bottom: 15px !important;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.link:hover,
.savePreferencesButton:hover,
#SaveDetailsButton:hover {
    background-color: #002456 !important;
}

/* Login / Logout buttons — Ford blue with white text */
#login-button-1,
#login-button-2,
#start-over,
#LogoutLink,
#LogoutLinkListItem,
input[value="Login"],
input[data-testid="button-login-stage1"],
input[data-testid="button-login-stage2"] {
    background-color: #003478 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 25px !important;
    max-width: 400px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    padding: 12px 30px !important;
    box-sizing: border-box !important;
    font-family: 'FordF1', 'FordAntennaRegular', sans-serif !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

#login-button-1:hover,
#login-button-2:hover,
#start-over:hover,
#LogoutLink:hover,
#LogoutLinkListItem:hover,
input[value="Login"]:hover,
input[data-testid="button-login-stage1"]:hover,
input[data-testid="button-login-stage2"]:hover {
    background-color: #002456 !important;
}

/* Space out login buttons */
#start-over,
#login-button-1,
#login-button-2 {
    margin-bottom: 15px !important;
}

/* ============================================
   Login form spacing refinements
   ============================================ */

/* ============================================
   TrustFord Login Spacing Fix
   Requires script.js to wrap fields using:
   .trustford-login-form
   .trustford-login-name-row
   ============================================ */

.trustford-login-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 20px auto 0 auto !important;
}

/* Top row: Forename + Surname */
.trustford-login-name-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 26px !important;
    width: 100% !important;
    margin-bottom: 22px !important;
}

/* Forename and Surname inputs */
.trustford-login-name-row #LoginField_Forename,
.trustford-login-name-row #LoginField_Surname {
    width: calc(50% - 13px) !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Email / mobile input */
.trustford-login-form #LoginField_Email,
.trustford-login-form #AccessCode {
    width: 276px !important;
    max-width: 276px !important;
    margin: 0 auto 32px auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Login button */
.trustford-login-form #login-button-1,
.trustford-login-form #login-button-2,
.trustford-login-form input[value="Login"],
.trustford-login-form input[data-testid="button-login-stage1"],
.trustford-login-form input[data-testid="button-login-stage2"] {
    width: 500px !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Mobile layout */
@media (max-width: 520px) {
    .trustford-login-name-row {
        flex-direction: column !important;
        gap: 18px !important;
        margin-bottom: 18px !important;
    }

    .trustford-login-name-row #LoginField_Forename,
    .trustford-login-name-row #LoginField_Surname,
    .trustford-login-form #LoginField_Email,
    .trustford-login-form #AccessCode,
    .trustford-login-form #login-button-1,
    .trustford-login-form #login-button-2,
    .trustford-login-form input[value="Login"],
    .trustford-login-form input[data-testid="button-login-stage1"],
    .trustford-login-form input[data-testid="button-login-stage2"] {
        width: 100% !important;
        max-width: 400px !important;
    }
}
/* Align checkboxes and labels */
.pref-checkbox-container {
    text-align: left !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 4px 0 !important;
}

.pref-checkbox-container input[type="checkbox"] {
    vertical-align: middle !important;
    margin-right: 8px !important;
}

.pref-checkbox-container label {
    text-align: left !important;
    display: inline !important;
    vertical-align: middle !important;
}

/* Align sub-card titles */
.sub-card-title {
    text-align: center !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Preferences sub-cards — consistent width and alignment */
.preferences-sub-card {
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    min-width: unset !important;
    width: 100% !important;
}

/* Preferences accordion content aligned */
.preferences-accordion {
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Opt out all container */
.opt-out-all-container {
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Break between preference list and Save button */
.save-preferences-button-container,
.savePreferencesButton {
    margin-top: 30px !important;
}

/* Add bottom margin after the last checkbox/sub-card */
.preferences-sub-card:last-child {
    margin-bottom: 30px !important;
}

.preferences-accordion:last-of-type {
    margin-bottom: 30px !important;
}

/* 6. Hide "Change this" buttons */
.change-this-button,
.change-this-button-container {
    display: none !important;
}

/* 7. Remove bullet points */
.preferences-panel ul,
.preferences-panel li,
#PreferencesMenu,
#PreferencesMenu li,
.pref-checkbox-container,
ul, li {
    list-style-type: none !important;
    list-style: none !important;
}

/* 8. Hide language selector */
.language-container,
.login-language-container {
    display: none !important;
}
/* ============================================
   TrustFord Login Spacing Fix
   ============================================ */

.trustford-login-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 20px auto 0 auto !important;
}

/* Top row: Forename + Surname */
.trustford-login-name-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

/* Forename and Surname inputs */
.trustford-login-name-row #LoginField_Forename,
.trustford-login-name-row #LoginField_Surname {
    width: calc(50% - 7px) !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Email / mobile input */
.trustford-login-form #LoginField_Email,
.trustford-login-form #AccessCode {
    width: 276px !important;
    max-width: 276px !important;
    margin: 0 0 22px 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Login button */
.trustford-login-form #login-button-1,
.trustford-login-form #login-button-2,
.trustford-login-form input[value="Login"],
.trustford-login-form input[data-testid="button-login-stage1"],
.trustford-login-form input[data-testid="button-login-stage2"] {
    width: 500px !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Mobile layout */
@media (max-width: 520px) {
    .trustford-login-name-row {
        flex-direction: column !important;
        gap: 14px !important;
    }

    .trustford-login-name-row #LoginField_Forename,
    .trustford-login-name-row #LoginField_Surname,
    .trustford-login-form #LoginField_Email,
    .trustford-login-form #AccessCode,
    .trustford-login-form #login-button-1,
    .trustford-login-form #login-button-2,
    .trustford-login-form input[value="Login"] {
        width: 100% !important;
        max-width: 400px !important;
    }
}
/* FORCE gap between Email/Mobile field and Login button */
.trustford-login-form #LoginField_Email,
.trustford-login-form #AccessCode {
    display: block !important;
    margin: 0 auto 28px auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Move Login button down away from email field */
.trustford-login-form #login-button-1,
.trustford-login-form #login-button-2,
.trustford-login-form input[value="Login"],
.trustford-login-form input[data-testid="button-login-stage1"],
.trustford-login-form input[data-testid="button-login-stage2"] {
    display: block !important;
    margin: 28px auto 0 auto !important;
    position: relative !important;
    z-index: 0 !important;
}

/* ============================================
   DIRECT LOGIN BUTTON SPACING
   These rules do NOT depend on .trustford-login-form
   — they target elements by their own IDs so they
   work even if the JS wrapper is never created.
   ============================================ */
#login-button-1,
#login-button-2,
#start-over,
input[data-testid="button-login-stage1"],
input[data-testid="button-login-stage2"] {
    margin-top: 20px !important;
}

/* 9. Hide the Menu button */
#MainMenuButton {
    display: none !important;
}

/* 10. Sign Out — strip the outer list item, style only the inner link */
#LogoutLinkListItem {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 20px !important;
    max-width: 400px !important;
    width: 100% !important;
}

#LogoutLink {
    max-width: 400px !important;
    width: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 12px 30px !important;
    box-sizing: border-box !important;
    border-radius: 25px !important;
    background-color: #003478 !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-family: 'FordF1', 'FordAntennaRegular', sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
}

/* 11. Even spacing between login form fields */
#LoginField_Forename,
#LoginField_Surname {
    margin-bottom: 16px !important;
}

#LoginField_Email,
#AccessCode {
    margin-bottom: 0 !important;
}

/* 12. Bold the Preference Portal title */
#LoginName {
    font-weight: bold !important;
    font-size: 20pt !important;
}