/*
 * Vaibe colour override for the auth pages (login / forgot / reset password).
 * Only swaps the legacy green (#2aca6a) for Vaibe colours. Layout and markup
 * are untouched. Load after Adminassets/css/stylesheet.css and style.css,
 * together with css/vaibe-theme.css (for the tokens).
 */

/* Links */
body a { color: var(--vaibe-pink); }
body a:hover, body a:focus { color: var(--vaibe-pink-hover); }

/* Breadcrumb hover in the title bar */
.gradient nav#breadcrumbs ul li a:hover { color: var(--vaibe-pink-light); }

/* "Login" box that opens the popup */
a.button.border {
    color: var(--vaibe-pink);
    border-color: var(--vaibe-pink);
}
a.button.border:hover {
    color: #fff;
    border-color: transparent;
    background: var(--vaibe-gradient);
}

/* Filled buttons (popup LOGIN, Send reset link, Reset password, Register submit) */
button.button,
input[type="button"],
input[type="submit"],
a.button:not(.border),
.button.preview {
    background: var(--vaibe-gradient);
    background-color: var(--vaibe-pink);
    color: #fff;
}
button.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button.preview:hover {
    background: var(--vaibe-gradient);
    filter: brightness(1.05);
    color: #fff;
}

/* Popup header + close icon */
.small_dialog_header { background: var(--vaibe-gradient); background-color: var(--vaibe-pink); }
.popup-model-auth .mfp-close,
#small-dialog .mfp-close { color: var(--vaibe-pink); }

/* Login / Register tabs */
.utf_tabs_nav li a:hover,
.utf_tabs_nav li.active a {
    background: var(--vaibe-gradient) !important;
    border-color: var(--vaibe-pink) !important;
    color: #fff !important;
}

/* Inputs focus */
.utf_signin_form input:focus,
.add_utf_listing_section input:focus,
input.form-control:focus {
    border-color: var(--vaibe-pink) !important;
    box-shadow: 0 0 0 3px rgba(230, 62, 182, .15) !important;
}

/* Bootstrap primary buttons (Partner register, OTP submit, Dealer / CP login) */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus {
    color: #fff !important;
    background: var(--vaibe-gradient) !important;
    border-color: transparent !important;
}
.btn-primary:hover { filter: brightness(1.05); }

/* Datepicker (Partner register) */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
    background: var(--vaibe-pink) !important;
    background-image: none !important;
    border-color: var(--vaibe-pink) !important;
    color: #fff !important;
}