/* ================================================================
* UPTASKPRO AUTH MODAL — Visual Redesign
* File: themes/workreap-child/css/uptp-auth.css
*
* Scoped exclusively to auth modal IDs:
* #wr-login-model (login)
* #wr-signup-model (register)
* #wr-pass-model (forgot / reset password)
*
* Does NOT affect: dashboard, Elementor pages, WooCommerce,
* Budget Maker, Expense Tracker, or any other Workreap modal
* (e.g. #workreap-modal-popup, #workreap-taskaddon-popup).
*
* Brand tokens (UPTASKPRO_PROJECT_CONTEXT.md):
* Primary accent : #EA1361
* Secondary : #6A7C8B
* Dark : #111111
* ================================================================ */
/* ----------------------------------------------------------------
* 1. MODAL DIALOG — width
* Bootstrap default is 500 px. Widen to accommodate split layout.
* ---------------------------------------------------------------- */
#wr-login-model .modal-dialog,
#wr-signup-model .modal-dialog,
#wr-pass-model .modal-dialog {
max-width : 920px;
width : 92vw;
margin : 2rem auto;
}
/* ----------------------------------------------------------------
* 2. MODAL CONTENT — flex split container
* ---------------------------------------------------------------- */
#wr-login-model .modal-content,
#wr-signup-model .modal-content,
#wr-pass-model .modal-content {
display : flex;
flex-direction : row;
border : none;
border-radius : 12px;
overflow : hidden;
box-shadow : 0 24px 80px rgba(0, 0, 0, 0.18);
min-height : 560px;
background : #fff;
}
/* ----------------------------------------------------------------
* 3. LEFT DECORATIVE PANEL
* HTML injected by uptp_auth_left_panel_inject() in functions.php.
* aria-hidden="true" — purely decorative, skipped by screen readers.
*
* To add a real background photo, uncomment and set the image URL:
* background-image : url('/path/to/auth-panel.jpg');
* background-size : cover;
* background-position : center;
* ---------------------------------------------------------------- */
.uptp-auth-left-panel {
flex : 0 0 42%;
position : relative;
display : flex;
flex-direction : column;
justify-content : flex-end;
padding : 44px 40px;
overflow : hidden;
background-color : #1a1a2e;
}
/* Dark gradient overlay */
.uptp-auth-left-panel::before {
content : '';
position : absolute;
inset : 0;
background : linear-gradient(
175deg,
rgba(0, 0, 0, 0.12) 0%,
rgba(0, 0, 0, 0.52) 58%,
rgba(0, 0, 0, 0.80) 100%
);
z-index : 0;
}
/* Subtle diagonal-line texture */
.uptp-auth-left-panel::after {
content : '';
position : absolute;
inset : 0;
background : repeating-linear-gradient(
135deg,
transparent 0,
transparent 40px,
rgba(255, 255, 255, 0.018) 40px,
rgba(255, 255, 255, 0.018) 41px
);
z-index : 0;
}
.uptp-auth-left-panel__inner {
position : relative;
z-index : 1;
}
.uptp-auth-left-panel__brand {
display : flex;
align-items : center;
gap : 10px;
margin-bottom : 14px;
}
.uptp-auth-left-panel__brand-line {
display : block;
width : 24px;
height : 1px;
background : rgba(255, 255, 255, 0.50);
flex-shrink : 0;
}
.uptp-auth-left-panel__brand-name {
font-size : 10px;
font-weight : 700;
letter-spacing : 0.22em;
color : rgba(255, 255, 255, 0.75);
text-transform : uppercase;
}
.uptp-auth-left-panel__tagline {
font-size : 14px;
line-height : 1.65;
color : rgba(255, 255, 255, 0.72);
font-weight : 400;
margin : 0;
max-width : 260px;
}
/* ----------------------------------------------------------------
* 4. RIGHT PANEL — modal-body (form area)
* ---------------------------------------------------------------- */
#wr-login-model .modal-body,
#wr-signup-model .modal-body,
#wr-pass-model .modal-body {
flex : 1;
padding : 52px 56px 44px;
display : flex;
flex-direction : column;
position : relative;
background : #fff;
overflow-y : auto;
max-height : 90vh;
}
/* ----------------------------------------------------------------
* 5. CLOSE BUTTON
* Positioned absolute inside .modal-body (position: relative).
* ---------------------------------------------------------------- */
#wr-login-model .wr-loginclose-tag,
#wr-signup-model .wr-loginclose-tag,
#wr-pass-model .wr-loginclose-tag {
position : absolute;
top : 18px;
right : 20px;
z-index : 10;
color : #999;
font-size : 17px;
line-height : 1;
opacity : 0.8;
transition : opacity 0.15s, color 0.15s;
display : flex;
align-items : center;
justify-content : center;
width : 30px;
height : 30px;
text-decoration : none;
}
#wr-login-model .wr-loginclose-tag:hover,
#wr-signup-model .wr-loginclose-tag:hover,
#wr-pass-model .wr-loginclose-tag:hover {
opacity : 1;
color : #111;
}
/* ----------------------------------------------------------------
* 6. INNER CONTAINER RESETS
* Workreap's .wr-loginconatiner and .wr-popupcontainer have default
* backgrounds / padding that conflict with the new right-panel layout.
* ---------------------------------------------------------------- */
#wr-login-model .wr-loginconatiner,
#wr-signup-model .wr-loginconatiner,
#wr-pass-model .wr-loginconatiner {
background : transparent;
padding : 0 !important;
border : none !important;
box-shadow : none !important;
display : block !important; /* kill .wr-auth-popup flex: justify-content/align-items:center */
height : auto !important; /* kill height:100% */
min-height : 0 !important; /* kill min-height:100vh */
}
#wr-login-model .wr-popupcontainer,
#wr-signup-model .wr-popupcontainer,
#wr-pass-model .wr-popupcontainer {
padding : 0 !important;
max-width : 100% !important;
width : 100% !important;
text-align : left !important;
}
/* Background banner figure — rendered only when $bg_image is set
in Workreap settings; hide it in popup mode to avoid layout break. */
#wr-login-model .wr-loginconatiner figure,
#wr-signup-model .wr-loginconatiner figure,
#wr-pass-model .wr-loginconatiner figure {
display : none;
}
/* ----------------------------------------------------------------
* 7. HEADING AREA (.wr-login_title)
*
* Tagline text is set via shortcode in class-modal-popup.php and
* replaced by JS (.text()) in uptp_auth_left_panel_inject().
* CSS here controls only size, weight, and spacing.
* ---------------------------------------------------------------- */
#wr-login-model .wr-login_title,
#wr-signup-model .wr-login_title,
#wr-pass-model .wr-login_title {
text-align : left !important;
margin : 0 !important; /* kill margin:0 auto centering */
max-width : none !important; /* kill max-width:476px */
padding : 0 !important; /* kill padding:30px / 0 0 30px */
border-radius : 0 !important; /* kill border-radius:30px 30px 0 0 */
background : transparent !important;
width : 100% !important;
}
/* Logo anchor
* .wr-auth-popup .wr-login_title > a sets text-align:center; max-width:130px; margin:0 auto
* All three must be overridden so the logo sits at the left edge of the form column. */
#wr-login-model .wr-login_title > a,
#wr-signup-model .wr-login_title > a,
#wr-pass-model .wr-login_title > a {
display : block;
margin : 0 0 18px 0 !important; /* kill margin:0 auto */
max-width : none !important; /* kill max-width:130px */
text-align : left !important; /* kill text-align:center */
line-height: 0;
}
/* Logo image if a popup_logo URL is set in Workreap settings */
#wr-login-model .wr-login_title img,
#wr-signup-model .wr-login_title img,
#wr-pass-model .wr-login_title img {
max-height : 52px;
width : auto;
margin-bottom : 0;
display : block;
}
#wr-login-model .wr-login_title h5,
#wr-signup-model .wr-login_title h5,
#wr-pass-model .wr-login_title h5 {
font-size : 32px;
font-weight : 800;
color : #111;
line-height : 1.15;
margin : 0;
letter-spacing : -0.5px;
font-family : inherit;
text-align : left !important; /* .wr-auth-popup .wr-login_title h5 sets text-align:center explicitly — inheritance from parent is NOT enough */
max-width : none !important; /* .wr-auth-popup .wr-login_title h5 sets max-width:300px */
}
/* Subtitle injected by JS as */
.uptp-auth-subtitle {
font-size : 14px;
color : #888;
font-weight : 400;
margin : 8px 0 0;
line-height : 1.55;
}
/* ----------------------------------------------------------------
* 8. FORM CONTENT SPACING
* ---------------------------------------------------------------- */
#wr-login-model .wr-login-content,
#wr-signup-model .wr-login-content,
#wr-pass-model .wr-login-content {
margin : 32px 0 0 0 !important; /* kill margin:0 auto from .wr-auth-popup rule */
padding : 0 !important; /* kill padding:30px */
border-radius : 0 !important; /* kill border-radius:0 0 30px 30px */
}
#wr-login-model fieldset,
#wr-signup-model fieldset,
#wr-pass-model fieldset {
border : none;
padding : 0;
margin : 0;
}
/* ----------------------------------------------------------------
* 9. FORM GROUPS
* ---------------------------------------------------------------- */
#wr-login-model .form-group,
#wr-signup-model .form-group,
#wr-pass-model .form-group {
margin-bottom : 20px;
position : relative;
}
/* ----------------------------------------------------------------
* 10. LABELS
* ---------------------------------------------------------------- */
#wr-login-model .wr-placeholderholder label,
#wr-signup-model .wr-placeholderholder label,
#wr-pass-model .wr-placeholderholder label {
font-size : 12px;
font-weight : 400;
color : #999;
display : block;
margin-bottom : 2px;
letter-spacing : 0;
text-transform : none;
}
/* ----------------------------------------------------------------
* 11. INPUTS — underline style
* !important overrides Bootstrap's .form-control box-border defaults
* which Workreap inherits but does not remove.
* ---------------------------------------------------------------- */
#wr-login-model .form-control,
#wr-signup-model .form-control,
#wr-pass-model .form-control {
border : none !important;
border-bottom : 1.5px solid #e0e0e0 !important;
border-radius : 0 !important;
padding : 8px 0 10px !important;
font-size : 14px !important;
color : #111 !important;
background : transparent !important;
box-shadow : none !important;
outline : none !important;
transition : border-color 0.2s;
width : 100%;
-webkit-appearance : none;
appearance : none;
}
#wr-login-model .form-control:focus,
#wr-signup-model .form-control:focus,
#wr-pass-model .form-control:focus {
border-bottom-color : #111 !important;
box-shadow : none !important;
background : transparent !important;
outline : none !important;
}
#wr-login-model .form-control::placeholder,
#wr-signup-model .form-control::placeholder,
#wr-pass-model .form-control::placeholder {
color : #bbb;
font-size : 14px;
}
/* Password field wrapper */
#wr-login-model .user-password-filed-wrapper,
#wr-signup-model .user-password-filed-wrapper,
#wr-pass-model .user-password-filed-wrapper {
position : relative;
}
#wr-login-model .user-password-reveal,
#wr-signup-model .user-password-reveal,
#wr-pass-model .user-password-reveal {
position : absolute;
right : 0;
top : 50%;
transform : translateY(-50%);
color : #aaa;
cursor : pointer;
font-size : 14px;
padding : 0;
background : transparent;
border : none;
line-height : 1;
}
/* ----------------------------------------------------------------
* 12. REMEMBER ME + FORGOT PASSWORD ROW
* "Remember me" is a UX-convenience checkbox — not a security field.
* Hidden so the row shows only the FORGOT PASSWORD? link right-aligned.
* ---------------------------------------------------------------- */
#wr-login-model .wr-form-action {
display : flex;
align-items : center;
justify-content : flex-end;
margin-top : -4px;
margin-bottom : 16px;
}
#wr-login-model .wr-form-action .wr-checkbox {
display : none;
}
#wr-login-model .wr-password-clr_light,
#wr-login-model a.wr-pass-poup-btn {
font-size : 11px;
font-weight : 700;
letter-spacing : 0.10em;
text-transform : uppercase;
color : #666;
text-decoration : none;
transition : color 0.15s;
}
#wr-login-model .wr-password-clr_light:hover,
#wr-login-model a.wr-pass-poup-btn:hover {
color : #111;
text-decoration : none;
}
/* ----------------------------------------------------------------
* 13. PRIMARY ACTION BUTTONS
* Each button class targeted explicitly to override Workreap's
* .wr-btn and .wr-btn-solid-lg base styles safely.
* ---------------------------------------------------------------- */
/* Login — button.wr-btn.wr-signin-now inside .wr-checkterm */
#wr-login-model .wr-checkterm .wr-btn {
background : #111 !important;
color : #fff !important;
border : none !important;
border-radius : 4px !important;
padding : 15px 24px !important;
font-size : 12px !important;
font-weight : 700 !important;
letter-spacing : 0.14em !important;
text-transform : uppercase !important;
width : 100% !important;
display : block !important;
text-align : center !important;
cursor : pointer !important;
line-height : 1 !important;
box-shadow : none !important;
transition : background 0.2s !important;
}
#wr-login-model .wr-checkterm .wr-btn:hover {
background : #222 !important;
}
/* Register — button.wr-signup-now is a direct child of .am-registration-terms
(sibling of .wr-checkterm, NOT inside it — register.php line 122) */
#wr-signup-model button.wr-signup-now {
background : #111 !important;
color : #fff !important;
border : none !important;
border-radius : 4px !important;
padding : 15px 24px !important;
font-size : 12px !important;
font-weight : 700 !important;
letter-spacing : 0.14em !important;
text-transform : uppercase !important;
width : 100% !important;
display : block !important;
text-align : center !important;
cursor : pointer !important;
line-height : 1 !important;
box-shadow : none !important;
transition : background 0.2s !important;
margin-top : 12px !important;
}
#wr-signup-model button.wr-signup-now:hover {
background : #222 !important;
}
/* Forgot — .btn-forget-pass (Phase 1) and .btn-reset-pass (Phase 2)
Both use .wr-btn-solid-lg as base class in Workreap's forgot.php. */
#wr-pass-model .btn-forget-pass,
#wr-pass-model .btn-reset-pass {
background : #111 !important;
color : #fff !important;
border : none !important;
border-radius : 4px !important;
padding : 15px 24px !important;
font-size : 12px !important;
font-weight : 700 !important;
letter-spacing : 0.14em !important;
text-transform : uppercase !important;
width : 100% !important;
display : block !important;
text-align : center !important;
cursor : pointer !important;
line-height : 1 !important;
box-shadow : none !important;
transition : background 0.2s !important;
}
#wr-pass-model .btn-forget-pass:hover,
#wr-pass-model .btn-reset-pass:hover {
background : #222 !important;
}
/* Arrow icon Workreap appends inside forgot buttons */
#wr-pass-model .btn-forget-pass .wr-icon-arrow-right,
#wr-pass-model .btn-reset-pass .wr-icon-arrow-right {
display : none;
}
/* ----------------------------------------------------------------
* 14. TERMS CHECKBOX AREA (register)
* .am-registration-terms wraps the submit button and optional
* terms / privacy checkbox.
* ---------------------------------------------------------------- */
#wr-signup-model .am-registration-terms {
display : flex;
flex-direction : column;
align-items : flex-start;
gap : 12px;
}
#wr-signup-model .wr-checkterm {
width : 100%;
}
#wr-signup-model .wr-checkbox label {
font-size : 12px;
color : #666;
font-weight : 400;
}
/* ----------------------------------------------------------------
* 15. USER TYPE SELECTOR (register)
* ---------------------------------------------------------------- */
#wr-signup-model .wr-reg-option {
display : flex;
gap : 16px;
flex-wrap : wrap;
margin-top : 6px;
}
#wr-signup-model .wr-radio label {
font-size : 13px;
color : #555;
font-weight : 400;
cursor : pointer;
}
/* ----------------------------------------------------------------
* 16. OR CONTINUE WITH DIVIDER
* Template outputs
OR
.
* JS (uptp_auth_left_panel_inject) replaces span text with
* "OR CONTINUE WITH". CSS adds the horizontal rule lines.
* ---------------------------------------------------------------- */
#wr-login-model .wr-optioanl-or,
#wr-signup-model .wr-optioanl-or {
display : flex !important;
align-items : center;
gap : 12px;
margin : 22px 0;
width : 100%;
padding : 0 !important; /* kill Workreap's padding-top/bottom:10px !important */
position : relative !important; /* maintain stacking context for contained elements */
}
#wr-login-model .wr-optioanl-or::before,
#wr-login-model .wr-optioanl-or::after,
#wr-signup-model .wr-optioanl-or::before,
#wr-signup-model .wr-optioanl-or::after {
content : '';
flex : 1;
height : 1px;
background : #ebebeb;
position : static !important; /* Workreap base rule sets ::before { position:absolute } which removes it from flex flow */
left : auto !important;
top : auto !important;
width : auto !important;
}
#wr-login-model .wr-optioanl-or span,
#wr-signup-model .wr-optioanl-or span {
font-size : 10px;
font-weight : 600;
letter-spacing : 0.14em;
color : #aaa;
text-transform : uppercase;
white-space : nowrap;
}
/* ----------------------------------------------------------------
* 17. GOOGLE / SOCIAL BUTTON
* .wr-sginup-btn (Workreap typo: "sginup") wraps the Google button.
* JS replaces the span text with "GOOGLE".
* ---------------------------------------------------------------- */
#wr-login-model .wr-sginup-btn,
#wr-signup-model .wr-sginup-btn {
width : 100%;
}
#wr-login-model .wr-google-login,
#wr-signup-model .wr-google-register {
display : flex !important;
align-items : center !important;
justify-content : center !important;
gap : 10px !important;
width : 100% !important;
padding : 13px 20px !important;
background : #fff !important;
border : 1.5px solid #e0e0e0 !important;
border-radius : 4px !important;
font-size : 12px !important;
font-weight : 700 !important;
letter-spacing : 0.10em !important;
color : #333 !important;
cursor : pointer !important;
transition : border-color 0.2s, box-shadow 0.2s !important;
text-transform : none !important;
box-shadow : none !important;
line-height : 1 !important;
}
#wr-login-model .wr-google-login:hover,
#wr-signup-model .wr-google-register:hover {
border-color : #bbb !important;
box-shadow : 0 2px 8px rgba(0,0,0,0.07) !important;
}
/* Font Awesome Google icon */
#wr-login-model .wr-google-login .fab,
#wr-login-model .wr-google-login .fa,
#wr-signup-model .wr-google-register .fab,
#wr-signup-model .wr-google-register .fa {
font-size : 16px !important;
color : #4285F4 !important;
}
/* ----------------------------------------------------------------
* 18. ACCOUNT SWITCHING LINKS (footer)
* JS replaces innerHTML while keeping Workreap trigger classes:
* .wr-signup-popup-btn — opens register modal
* .wr-login-popup — opens login modal
* ---------------------------------------------------------------- */
#wr-login-model .wr-form-action-footer,
#wr-signup-model .wr-form-action-footer,
#wr-pass-model .wr-form-action-footer {
margin-top : 22px;
font-size : 13px;
color : #999;
line-height : 1.4;
justify-content : flex-start !important; /* kill .wr-login-content .wr-form-action-footer { justify-content:center } */
align-items : center;
}
#wr-login-model .wr-form-action-footer a,
#wr-signup-model .wr-form-action-footer a,
#wr-pass-model .wr-form-action-footer a {
color : #111;
font-weight : 600;
text-decoration : none;
margin-left : 3px;
transition : color 0.15s;
}
#wr-login-model .wr-form-action-footer a:hover,
#wr-signup-model .wr-form-action-footer a:hover,
#wr-pass-model .wr-form-action-footer a:hover {
color : #EA1361;
text-decoration : none;
}
/* Back to sign in link has no preceding text; remove extra margin */
#wr-pass-model .wr-form-action-footer a {
margin-left : 0;
}
/* ----------------------------------------------------------------
* 19. .wr-form-btn CONTAINER
* Workreap puts the submit button, OR divider, Google button,
* and footer link all inside one .wr-form-btn div.
* ---------------------------------------------------------------- */
#wr-login-model .wr-form-btn,
#wr-signup-model .wr-form-btn,
#wr-pass-model .wr-form-btn {
margin-bottom : 0;
}
/* Social button wrapper must be full-width so the OR divider spans it */
#wr-login-model .wr-social-btn-warp,
#wr-signup-model .wr-social-btn-warp {
width : 100%;
}
/* .wr-auth-popup .wr-login-content .wr-form-btn sets align-items:center (column flex).
* Override to stretch so children fill the full column width. */
#wr-login-model .wr-login-content .wr-form-btn,
#wr-signup-model .wr-login-content .wr-form-btn,
#wr-pass-model .wr-login-content .wr-form-btn {
align-items : stretch !important;
}
/* .wr-auth-popup .wr-login-content .wr-themeform__wrap > * sets padding:10px on every form group.
* Remove horizontal padding so inputs align flush with the heading and footer link column.
* Vertical padding is handled by Section 9 (.form-group margin-bottom). */
#wr-login-model .wr-login-content .wr-themeform__wrap > *,
#wr-signup-model .wr-login-content .wr-themeform__wrap > *,
#wr-pass-model .wr-login-content .wr-themeform__wrap > * {
padding-left : 0 !important;
padding-right : 0 !important;
}
/* ----------------------------------------------------------------
* 20. REGISTER MODAL — height cap (desktop / tablet)
*
* The register form is taller than login or forgot. Without a cap,
* Bootstrap's vertical centering (.modal-dialog-centered) can push
* the top of the modal (where the logo lives) above the viewport.
*
* Solution: cap modal-content at calc(100vh - 4rem) so the dialog
* always fits within the viewport with 2rem margin top and bottom.
* The modal-body scrolls internally to handle overflowing form fields.
* This rule is overridden at ≤767px by Section 22 (full-screen mobile).
* ---------------------------------------------------------------- */
@media (min-width: 768px) {
#wr-signup-model .modal-content {
min-height : auto;
max-height : calc(100vh - 4rem);
}
#wr-signup-model .modal-body {
max-height : none;
flex : 1 1 auto;
overflow-y : auto;
}
}
/* ----------------------------------------------------------------
* 21. RESPONSIVE — TABLET (768 px – 1023 px)
* ---------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
#wr-login-model .modal-dialog,
#wr-signup-model .modal-dialog,
#wr-pass-model .modal-dialog {
max-width : 740px;
width : 94vw;
}
.uptp-auth-left-panel {
flex : 0 0 36%;
padding : 36px 28px;
}
#wr-login-model .modal-body,
#wr-signup-model .modal-body,
#wr-pass-model .modal-body {
padding : 44px 40px 36px;
}
}
/* ----------------------------------------------------------------
* 22. RESPONSIVE — MOBILE (≤ 767 px)
* Left panel hidden; form panel becomes full-screen.
* ---------------------------------------------------------------- */
@media (max-width: 767px) {
#wr-login-model .modal-dialog,
#wr-signup-model .modal-dialog,
#wr-pass-model .modal-dialog {
width : 100%;
max-width : 100%;
margin : 0;
min-height : 100vh;
}
#wr-login-model .modal-content,
#wr-signup-model .modal-content,
#wr-pass-model .modal-content {
flex-direction : column;
border-radius : 0;
min-height : 100vh;
box-shadow : none;
}
.uptp-auth-left-panel {
display : none !important;
}
#wr-login-model .modal-body,
#wr-signup-model .modal-body,
#wr-pass-model .modal-body {
padding : 40px 28px 32px;
max-height : 100vh;
flex : 1;
}
#wr-login-model .wr-login_title h5,
#wr-signup-model .wr-login_title h5,
#wr-pass-model .wr-login_title h5 {
font-size : 26px;
}
#wr-login-model .wr-loginclose-tag,
#wr-signup-model .wr-loginclose-tag,
#wr-pass-model .wr-loginclose-tag {
top : 14px;
right : 14px;
}
}
/* ----------------------------------------------------------------
* 23. BUTTON HOVER / ACTION ANIMATION
*
* On hover: background shifts from #111 → orange-red (#ff4b00)
* and a right-arrow slides in from the right edge.
*
* Exact button classes from Workreap templates:
* login.php line 81 : button.wr-btn.wr-signin-now (inside .wr-checkterm)
* register.php line 122: button.wr-btn.wr-signup-now (sibling of .wr-checkterm)
* forgot.php line 73 : button.wr-btn-solid-lg.btn-forget-pass (email state)
* forgot.php line 62 : button.wr-btn-solid-lg.btn-reset-pass (new-password state)
*
* Google/social buttons (.wr-google-login, .wr-google-register)
* are NOT in this selector list — they keep their white-border style.
* ---------------------------------------------------------------- */
/* Base — give ::after an anchor and smooth the bg transition.
* overflow:hidden clips the slide-in to button bounds.
* Overwrites Section 13's transition:background 0.2s via cascade order. */
#wr-login-model .wr-checkterm .wr-btn,
#wr-signup-model button.wr-signup-now,
#wr-pass-model .btn-forget-pass,
#wr-pass-model .btn-reset-pass {
position : relative !important;
overflow : hidden !important;
transition : background-color 0.25s ease, box-shadow 0.25s ease !important;
}
/* Arrow — hidden at rest, 8 px right of its final resting spot */
#wr-login-model .wr-checkterm .wr-btn::after,
#wr-signup-model button.wr-signup-now::after,
#wr-pass-model .btn-forget-pass::after,
#wr-pass-model .btn-reset-pass::after {
content : '→';
position : absolute;
right : 22px;
top : 50%;
transform : translateY(-50%) translateX(8px);
opacity : 0;
transition : opacity 0.25s ease, transform 0.25s ease;
font-size : 15px;
line-height : 1;
font-weight : 400;
color : rgba(255, 255, 255, 0.92);
pointer-events : none;
}
/* Hover — orange-red background + arrow slides to rest position.
* Overwrites Section 13's :hover { background:#222 !important } via cascade order. */
#wr-login-model .wr-checkterm .wr-btn:hover,
#wr-signup-model button.wr-signup-now:hover,
#wr-pass-model .btn-forget-pass:hover,
#wr-pass-model .btn-reset-pass:hover {
background-color : #ff4b00 !important;
color : #fff !important;
}
#wr-login-model .wr-checkterm .wr-btn:hover::after,
#wr-signup-model button.wr-signup-now:hover::after,
#wr-pass-model .btn-forget-pass:hover::after,
#wr-pass-model .btn-reset-pass:hover::after {
opacity : 1;
transform : translateY(-50%) translateX(0);
}
/* Keyboard focus-visible — same orange state + accessible outline.
* :focus-visible fires only for keyboard navigation, not mouse click. */
#wr-login-model .wr-checkterm .wr-btn:focus-visible,
#wr-signup-model button.wr-signup-now:focus-visible,
#wr-pass-model .btn-forget-pass:focus-visible,
#wr-pass-model .btn-reset-pass:focus-visible {
background-color : #ff4b00 !important;
color : #fff !important;
outline : 3px solid rgba(234, 19, 97, 0.45);
outline-offset : 3px;
}
#wr-login-model .wr-checkterm .wr-btn:focus-visible::after,
#wr-signup-model button.wr-signup-now:focus-visible::after,
#wr-pass-model .btn-forget-pass:focus-visible::after,
#wr-pass-model .btn-reset-pass:focus-visible::after {
opacity : 1;
transform : translateY(-50%) translateX(0);
}
/* Touch / no-hover devices — disable hover override to prevent
* sticky orange after a tap. Default #111 background is restored. */
@media (hover: none) {
#wr-login-model .wr-checkterm .wr-btn:hover,
#wr-signup-model button.wr-signup-now:hover,
#wr-pass-model .btn-forget-pass:hover,
#wr-pass-model .btn-reset-pass:hover {
background-color : #111 !important;
}
#wr-login-model .wr-checkterm .wr-btn:hover::after,
#wr-signup-model button.wr-signup-now:hover::after,
#wr-pass-model .btn-forget-pass:hover::after,
#wr-pass-model .btn-reset-pass:hover::after {
opacity : 0;
}
}