/* DatingKit auth screens — sign in / forgot / reset password
   Loaded on top of the sign-in styles in theme join.css. */

/* ---- Autofill visibility fix -----------------------------------------
   The .input-mini inputs force a transparent background, which makes
   Chrome paint autofilled text in an unreadable colour. Pin the autofill
   colours so the email / password the browser fills are always visible. */
@keyframes dkOnAutofill {
    from { /* no-op — only used to detect autofill via animationstart */ }
    to { }
}

/* Cover every auth input (sign in / forgot / reset / join) in the autofill
   AND the regular :autofill state, hover/focus/active alike. Broadened so a
   nested form-class change can't drop the fix. */
body.dk-sign-in .dk-signin-form input:-webkit-autofill,
body.dk-sign-in .dk-password-form input:-webkit-autofill,
body.dk-sign-in .dk-signin-form input:-webkit-autofill:hover,
body.dk-sign-in .dk-signin-form input:-webkit-autofill:focus,
body.dk-sign-in .dk-signin-form input:-webkit-autofill:active,
body.dk-sign-in .dk-password-form input:-webkit-autofill:hover,
body.dk-sign-in .dk-password-form input:-webkit-autofill:focus,
body.dk-sign-in .dk-password-form input:-webkit-autofill:active,
body.dk-sign-in input:-webkit-autofill,
body.dk-sign-in input:-webkit-autofill:hover,
body.dk-sign-in input:-webkit-autofill:focus,
body.dk-sign-in input:-webkit-autofill:active,
body.dk-join-wizard .dk-join-form input:-webkit-autofill,
body.dk-join-wizard .dk-join-form input:-webkit-autofill:hover,
body.dk-join-wizard .dk-join-form input:-webkit-autofill:focus,
body.dk-join-wizard .dk-join-form input:-webkit-autofill:active,
body.dk-sign-in input:autofill,
body.dk-join-wizard input:autofill {
    -webkit-text-fill-color: #232954 !important;
    color: #232954 !important;
    caret-color: #232954 !important;
    /* Push the yellow autofill highlight out of view but keep the text. */
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    background-clip: content-box !important;
    transition: background-color 9999s ease-in-out 0s !important;
    animation-name: dkOnAutofill;
    font-size: 16px !important;
}

/* Belt-and-suspenders: the JS adds .dk-has-value / .dk-autofilled when it
   detects a populated value (incl. clicked autocomplete suggestions), so
   force the readable colour even if the :-webkit-autofill match is flaky. */
body.dk-sign-in input.dk-has-value,
body.dk-sign-in input.dk-autofilled,
body.dk-join-wizard input.dk-has-value,
body.dk-join-wizard input.dk-autofilled {
    -webkit-text-fill-color: #232954 !important;
    color: #232954 !important;
    caret-color: #232954 !important;
}

/* Text selection inside auth inputs.
   The inputs force `-webkit-text-fill-color: #232954` (dark navy), which in
   WebKit/Chrome overrides any ::selection `color` — so the selected text stays
   navy no matter what. The theme's input::selection used a transparent/white
   highlight, leaving navy-on-white = invisible. Use a LIGHT highlight so the
   navy text reads clearly when selected. */
body.dk-sign-in input::selection,
body.dk-join-wizard input::selection {
    background: #ffd0e6;
    color: #232954;
}
body.dk-sign-in input::-moz-selection,
body.dk-join-wizard input::-moz-selection {
    background: #ffd0e6;
    color: #232954;
}

/* ---- Password show / hide toggle ------------------------------------- */
body.dk-sign-in .input-group-icon.input-mini.dk-has-toggle {
    position: relative;
}

/* leave room on the right so the toggle never overlaps the typed text */
body.dk-sign-in .input-group-icon.input-mini.dk-has-toggle .form-control {
    padding-right: 44px !important;
}

body.dk-sign-in .dk-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #8e9aaf;
    cursor: pointer;
    transition: color 0.15s ease;
    z-index: 2;
}

body.dk-sign-in .dk-password-toggle:hover,
body.dk-sign-in .dk-password-toggle:focus {
    color: #fe3d96;
    outline: none;
}

body.dk-sign-in .dk-password-toggle i {
    display: block;
    font-size: 18px;
    line-height: 1;
}

/* ---- Forgot / reset password layout ---------------------------------- */
body.dk-sign-in .dk-password-form {
    margin-top: 4px;
}

body.dk-sign-in .dk-field-error-slot {
    min-height: 2px;
}

body.dk-sign-in .dk-field-error-slot span.error {
    margin: 4px 0 2px;
    font-size: 13px;
    color: #e3344e;
}

/* Submit button — uses the same .btn-gradient markup as the sign-in button so
   it looks identical. Just give it spacing above the form. */
body.dk-sign-in .dk-password-actions {
    margin-top: 22px;
}

body.dk-sign-in .dk-signin-altlink {
    margin: 10px 0 0;
    text-align: center;
    font-size: 14px;
}

body.dk-sign-in .dk-signin-altlink a {
    color: #8e9aaf;
    font-weight: 600;
    text-decoration: none;
}

body.dk-sign-in .dk-signin-altlink a:hover {
    color: #fe3d96;
}

/* NOTE: the fixed bottom action bar (sign-in + join wizard) is styled by the
   THEME's join.css (`.dk-signin-footer` / `.dk-join-footer` — position, width,
   centering, padding, shadow, container max-width, and page-content bottom
   padding are all defined there). The `.container.fixed-full-area` wrapper was
   removed from the auth/wizard markup so the fixed footer resolves against the
   viewport instead of a transformed ancestor. Do NOT re-add footer-positioning
   rules here — a plugin-level `left:0` fought the theme's `left:50%;
   transform:translateX(-50%)` and shifted the button half its width off the
   left edge. Let join.css own the footer. */