/* Page background for login, register, magic login, and lost password */
.woocommerce-account .wd-page-content {
    background-color: #f7f8fd;
}

/* Lost password page — match login/register styling */
.woocommerce-account .woocommerce-ResetPassword {
    max-width: 600px;
    border: 1px solid #ededed;
    background-color: white;
    padding: 30px;
    margin: auto;
    border-radius: 18px;
}

.woocommerce-account .woocommerce-ResetPassword input[type="text"],
.woocommerce-account .woocommerce-ResetPassword input[type="email"] {
    border: 1px solid black !important;
    height: 50px;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 15px;
    box-sizing: border-box;
    width: 100%;
}

.woocommerce-account .woocommerce-ResetPassword button[type="submit"],
.woocommerce-account .woocommerce-ResetPassword .button {
    color: #fff !important;
}

.sky-donation-login .login-form-box {
    max-width: 600px;
    border: 1px solid #ededed;
    background-color: white;
    padding: 30px 30px;
    margin: auto;
    border-radius: 18px;
}

.sky-donation-login .login-form-box .wd-login-title {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' x='0' y='0' viewBox='0 0 24 24' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cg fill='%23000'%3E%3Cpath d='M14.945 1.25c-1.367 0-2.47 0-3.337.117-.9.12-1.658.38-2.26.981-.524.525-.79 1.17-.929 1.928-.135.737-.161 1.638-.167 2.72a.75.75 0 0 0 1.5.008c.006-1.093.034-1.868.142-2.457.105-.566.272-.895.515-1.138.277-.277.666-.457 1.4-.556.755-.101 1.756-.103 3.191-.103h1c1.436 0 2.437.002 3.192.103.734.099 1.122.28 1.4.556s.456.665.555 1.4c.102.754.103 1.756.103 3.191v8c0 1.435-.001 2.437-.103 3.192-.099.734-.279 1.122-.556 1.399s-.665.457-1.399.556c-.755.101-1.756.103-3.192.103h-1c-1.435 0-2.436-.002-3.192-.103-.733-.099-1.122-.28-1.399-.556-.243-.243-.41-.572-.515-1.138-.108-.589-.136-1.364-.142-2.457a.75.75 0 1 0-1.5.008c.006 1.082.032 1.983.167 2.72.14.758.405 1.403.93 1.928.601.602 1.36.86 2.26.982.866.116 1.969.116 3.336.116h1.11c1.368 0 2.47 0 3.337-.117.9-.12 1.658-.38 2.26-.981.602-.602.86-1.36.982-2.26.116-.867.116-1.97.116-3.337v-8.11c0-1.367 0-2.47-.116-3.337-.121-.9-.38-1.658-.982-2.26-.602-.602-1.36-.86-2.26-.981-.867-.117-1.97-.117-3.337-.117z' fill='%23000000' opacity='1' data-original='%23000000' class=''%3E%3C/path%3E%3Cpath d='M2.001 11.249a.75.75 0 0 0 0 1.5h11.973l-1.961 1.68a.75.75 0 1 0 .976 1.14l3.5-3a.75.75 0 0 0 0-1.14l-3.5-3a.75.75 0 0 0-.976 1.14l1.96 1.68z' fill='%23000000' opacity='1' data-original='%23000000' class=''%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: auto 32px;
    padding-right: 30px;
    color: #235fa5;
    text-transform: capitalize;
    font-size: 28px;
}

.sky-donation-login .login-form-box #magic-login-shortcode {
    width: 100%;
}

.sky-donation-login .login-form-box #magic-login-shortcode .message {
    text-align: center;
    border: none;
    font-size: 16px;
}

.sky-donation-login .woocommerce-form,
.sky-donation-login .login-form-box .login {
    padding: 0px;
}

.sky-donation-login .login-form-box hr {
    padding: 0px;
}

.sky-checkout-login .woocommerce-form-login-toggle {
    padding-bottom: 5px;
}

.sky-checkout-login .sky-donation-login:not(.show) {
    display: none;
}

/* Form field styling — black border, 50px height */
.sky-donation-login .login-form-box input[type="text"],
.sky-donation-login .login-form-box input[type="email"],
.sky-donation-login .login-form-box input[type="tel"],
.sky-donation-login .login-form-box input[type="password"],
.sky-donation-login .login-form-box select {
    border: 1px solid black !important;
    height: 50px;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 15px;
    box-sizing: border-box;
    width: 100%;
    -webkit-appearance: none;
}

/* Hide browser autofill dropdown on address field */
#reg_billing_address:-webkit-autofill,
#reg_billing_address:-webkit-autofill:hover,
#reg_billing_address:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.sky-donation-login .login-form-box button[type="submit"],
.sky-donation-login .login-form-box .button,
.sky-donation-login .login-form-box input[type="submit"] {
    color: #fff !important;
}

.sky-donation-login .login-form-box .form-row-first,
.sky-donation-login .login-form-box .form-row-last {
    display: inline-block;
    width: 49%;
    vertical-align: top;
}

.sky-donation-login .login-form-box .form-row-first {
    margin-right: 1%;
}

.sky-checkout-login {
    border-bottom: 1px solid #0000001A;
    margin-bottom: 20px;
}

.sky-checkout-login .sky-donation-login {
    margin-bottom: 30px;
}

/* Show/hide-password toggle. WooCommerce injects
   `.password-input > button.show-password-input`, but its positioning CSS +
   icon-font eye glyph aren't loaded on the donor-dashboard login, so the
   button rendered as an empty grey box below the field. Position it inside
   the field on the right and give it a self-contained SVG eye icon (mask,
   currentColor) so it works without the WooCommerce webfont. */
.sky-donation-login .login-form-box .password-input {
    position: relative;
    display: block;
    width: 100%;
}
.sky-donation-login .login-form-box .password-input input[type="password"],
.sky-donation-login .login-form-box .password-input input[type="text"] {
    padding-right: 48px;
}
.sky-donation-login .login-form-box .show-password-input {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 48px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}
/* Some themes (WoodMart et al.) paint their own icon-font eye on ::before —
   with our self-contained ::after eye that rendered as TWO eyes. Ours wins. */
.sky-donation-login .login-form-box .show-password-input::before {
    content: none !important;
}
.sky-donation-login .login-form-box .show-password-input::after {
    content: "";
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.sky-donation-login .login-form-box .show-password-input:hover {
    color: #204C93;
}
.sky-donation-login .login-form-box .show-password-input.display-password {
    color: #204C93;
}
.sky-donation-login .login-form-box .show-password-input.display-password::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* Primary login button spans the form width. */
.sky-donation-login .login-form-box button[type="submit"],
.sky-donation-login .login-form-box .woocommerce-form-login__submit {
    width: 100%;
    display: block;
    text-align: center;
}

/* Put "Forgot password?" and "Remember me" on one row, spaced apart,
   instead of stacked. */
.sky-donation-login .login-form-box .login-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 0 14px;
}
.sky-donation-login .login-form-box .login-form-footer .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.sky-donation-login .login-form-box .login-form-footer .lost_password {
    margin: 0;
}