/* Custom Login
--------------------------------------------------------------------------------------- */

.page-template-page-login .header-wrapper,
.page-template-page-login .top-bar,
.page-template-page-login .header,
.page-template-page-login .footer-wrapper,
.page-template-page-login .footer-email-wrapper,
.page-template-page-login .footer { display: none;}

.bg-image { background-color: transparent; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.circles-login-wrap { background: #fff; width: 100%; height: 100vh; position: relative; }
/* The sign-in page sets its own base size: its em sizes are made for 10px, and a site's Branding text size (applied to the
   body since Framework 3.6.6) must never change the sign-in page (owner, 2026-10-24). */
.circles-login-wrap { font-size: 10px !important; }
.circles-login-image { position: absolute; height: 100%; width: 35%; z-index: 1; }
.circles-login-content { float: right; display: inline; width: 65%; position: relative; height: 100vh; }
.circles-login-logo { display: block; width: 50%; height: auto !important; margin-left: auto; margin-right: auto; }
.login-content { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 460px; height: auto; transform: translate(-50%, -50%); }
.circles-login-form-wrap { margin-top: 40px; background: #fff; padding: 40px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 100px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 100px 0 rgba(0,0,0,0.2); box-shadow: 0px 0px 100px 0 rgba(0,0,0,0.2);}
.circles-login-page-title { font-size: 3em; }
.circles-login-form-copy { margin-bottom: 20px; }
.circles-login-form-wrap p { margin: 16px 0; }
.message-status { padding: 10px !important; background-color: #fff4d1; border-radius: 6px; margin: 30px 15px 10px 15px !important; transition: opacity 1s ease-in-out; opacity: 1; }
.message-status.error-message { background-color: #ffe8e9 !important; color: #000; }
.message-status p { margin: 0 !important; text-align: center; font-size: 1.6em !important; }
.circles-login-copy p { font-size: 1.8em !important; line-height: 1.3em !important;}

.circles-login-input-row { margin-top: 14px;}

/* Labels */
.circles-login-form-form label { font-size: 18px; color: #000; font-family: 'proxima-nova', Helvetica, Arial, sans-serif; font-weight: 600; }

/* Inputs */
.circles-login-input,
.circles-login-input:-webkit-autofill {  border: 1px solid #ccc; font-size: 20px !important; font-family: 'proxima-nova', Helvetica, Arial, sans-serif; color: #000; font-weight: 400 !important; margin-top: 6px; line-height: 1em; padding: 14px 20px !important; width: 100%; box-sizing: border-box; display: block !important; border-radius: 3px; }

/* Password Icon */
.password-input-wrap { position: relative;}
a.btn-password-toggle {display: block;width: 24px;height: 17px;padding: 0 !important;opacity:.3;filter:alpha(opacity=30);position: absolute;right: 14px !important;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
a.btn-password-toggle.active, a.btn-password-toggle:hover { opacity:1; filter:alpha(opacity=100);}
a.btn-password-toggle svg { display: block; width: 24px; height: 17px; fill: #000; }

/* Buttons */
.circles-login-submit { float:left;  display: block !important; min-width: 160px; float: none !important; text-align: center; margin: 20px 0 0 0 !important; padding: 14px 30px; font-size: 18px !important; font-weight: 700 !important;  text-align: center; border: 0; background: #000; color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer; }
.circles-login-submit:hover { background: #444; }

/* Links */
.circles-login-form-links-inner { margin-top: 20px; }
.circles-login-form-links { margin-top: 16px; }
a.circles-login-footer-link { font-size: 1.6em; color: #000 !important; text-decoration: none; }
a.circles-login-footer-link:hover { text-decoration: underline; }

.marg-t-50 { margin-top: 50px !important;}
.marg-t-30 { margin-top: 30px !important;}
.marg-b-30 { margin-bottom: 30px !important;}

/* Message Status */
.message-status { padding: 10px !important; background-color: #fff4d1;  -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin: 30px 15px 10px 15px !important; transition: opacity 1s ease-in-out; opacity: 1;}
.message-status.success { background-color: #39b54a !important; color: #fff;}
.message-status p { margin: 0 !important; text-align: center; font-size: 1.6em !important;}
.message-status.show { opacity: 1; }
.page-template-page-login .message-status { margin-left: 0 !important; margin-right: 0 !important;}
.message-status.error-message { background-color: #ffe8e9 !important; color: #000;}
.message-status.error-message p { line-height: 1.3em !important; padding: 10px 20px;}

/* Placeholder styles */
.circles-login-input::placeholder {
    color: inherit; /* Uses the same color as the input's text color */
    font-size: inherit !important;
    opacity: 1; /* Ensures full opacity (some browsers reduce it by default) */
}

/* For cross-browser support */
.circles-login-input:-ms-input-placeholder { color: inherit; } /* IE 10+ */
.circles-login-input::-ms-input-placeholder { color: inherit; } /* Edge */
.circles-login-input::placeholder { color: inherit; } /* Modern browsers */


/* Style auto-filled input fields */
.circles-login-input:-webkit-autofill {
    background-color: #ffffff !important; /* Adjust background color */
    color: #000 !important; /* Text color */
    font-style: normal !important; /* Ensure text style matches */
    box-shadow: 0 0 0px 1000px #ffffff inset; /* Override browser's background highlight */
    border: 1px solid #ccc !important; /* Ensure consistent border */
}

/* Ensure the style is retained when focused */
.circles-login-input:-webkit-autofill:focus {
    background-color: #fff !important; /* Match the focused input background */
    box-shadow: 0 0 0px 1000px #ffffff inset; /* Ensure consistency */
    border: 1px solid #ccc !important; /* Match the regular input border */
}

/* Hides code in iframe */
#wp-auth-check-frame .circles-login-image {
    display: none !important;
}



@media only screen
and (max-width : 501px) and (orientation:portrait)  {
    
    .circles-login-image { position: relative !important; height: 80px !important; width: 100% !important; }
    .circles-login-content { float: none !important; display: block !important; width: 100%; position: relative; height: auto; padding: 30px !important; box-sizing: border-box; }
    .login-content { position: relative; top: auto; left: auto; max-width: 100%; height: auto; transform: none !important; }
    .circles-login-form-wrap.marg-t-50 { margin-top: 30px !important;}
    .circles-login-form-wrap { padding: 30px; }
    .circles-login-input,
    .circles-login-input:-webkit-autofill {  font-size: 18px !important;  padding: 12px 16px !important;  }
    .circles-login-page-title { font-size: 2em; }
    .circles-login-copy p { font-size: 1.6em !important; line-height: 1.2em !important;}
    .circles-login-form-form label { font-size: 16px; }

    .marg-t-50 { margin-top: 30px !important;}


}

/* Fields match the button's corners (owner, 2026-10-25): --cl-radius comes from Login Settings › Button Shape (set by the
   plugin, so every sign-in, forgot-password and reset page on every site matches). Softer border; clicking in darkens the
   border, no ring. */
.circles-login-wrap .circles-login-input{border-radius:var(--cl-radius,6px) !important;border:1px solid #d6d6dc !important;box-shadow:none !important;outline:none !important;transition:border-color .15s ease;}
.circles-login-wrap .circles-login-input:hover{border-color:#b9b9c2 !important;}
.circles-login-wrap .circles-login-input:focus{border-color:#111114 !important;box-shadow:none !important;outline:none !important;}

/* ── New look sign-in (owner, 2026-10-25): the admin's New look on every sign-in, forgot-password and reset page. Light gray
   page, a white card with big corners and no heavy shadow, tight bold title, muted helper text, 48px rounded fields and a
   full-width button (its colors still come from Login Settings). Sizes in px so no site setting can change them. ── */
html body .circles-login-wrap.circles-login-wrap .circles-login-content{background:#eeeef2;}
html body .circles-login-wrap.circles-login-wrap .circles-login-form-wrap{background:#fff;border:0 !important;border-radius:24px !important;box-shadow:none !important;padding:40px 40px 32px !important;margin-top:28px !important;}
html body .circles-login-wrap.circles-login-wrap .login-content{max-width:440px;}
html body .circles-login-wrap.circles-login-wrap .circles-login-page-title{font-size:30px !important;line-height:1.15 !important;font-weight:700 !important;letter-spacing:-.02em;color:#111114;margin:0 0 6px !important;}
html body .circles-login-wrap.circles-login-wrap .circles-login-copy p{font-size:15px !important;line-height:1.5 !important;color:#6b6b73 !important;margin:0 0 24px !important;}
html body .circles-login-wrap.circles-login-wrap .circles-login-form-copy{margin-bottom:0 !important;}
html body .circles-login-wrap.circles-login-wrap .circles-login-input-row{margin-top:16px !important;}
html body .circles-login-wrap.circles-login-wrap .circles-login-form-form label{display:block;font-size:14px !important;font-weight:600 !important;color:#111114 !important;margin:0 0 8px !important;letter-spacing:0;}
html body .circles-login-wrap.circles-login-wrap .circles-login-input{height:50px !important;padding:0 16px !important;font-size:18px !important;color:#111114 !important;background:#fff !important;border:1px solid #dcdce3 !important;}
/* Remember Me is a switch: still the real checkbox (name=rememberme), so the form posts it as before. */
html body .circles-login-wrap.circles-login-wrap #rememberme{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:40px !important;height:24px !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:100px !important;background:#d6d6dc !important;cursor:pointer;outline:none !important;box-shadow:none !important;transition:background .2s ease;}
html body .circles-login-wrap.circles-login-wrap #rememberme::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s ease;}
html body .circles-login-wrap.circles-login-wrap #rememberme::after{display:none !important;content:none !important;}
html body .circles-login-wrap.circles-login-wrap #rememberme:checked{background:#111114 !important;}
html body .circles-login-wrap.circles-login-wrap #rememberme:checked::before{transform:translateX(16px);}
@media (prefers-reduced-motion:reduce){html body .circles-login-wrap.circles-login-wrap #rememberme,html body .circles-login-wrap.circles-login-wrap #rememberme::before{transition:none;}}
@media (max-width:768px){html body .circles-login-wrap.circles-login-wrap{background:#eeeef2 !important;}html body .circles-login-wrap.circles-login-wrap .circles-login-content{min-height:calc(100vh - 80px);}}
html body .circles-login-wrap.circles-login-wrap .circles-login-input-row:has(#rememberme){display:flex !important;align-items:center;gap:10px;margin-top:18px !important;}
html body .circles-login-wrap.circles-login-wrap label[for=rememberme]{display:inline !important;margin:0 !important;font-weight:500 !important;color:#2c2c33 !important;cursor:pointer;}
html body .circles-login-wrap.circles-login-wrap .circles-login-submit{width:100% !important;min-width:0 !important;height:48px !important;padding:0 24px !important;font-size:15px !important;font-weight:600 !important;letter-spacing:0;margin-top:24px !important;border:0 !important;border-radius:var(--cl-radius,12px) !important;transition:opacity .15s ease;}
html body .circles-login-wrap.circles-login-wrap .circles-login-form-links-inner{margin-top:20px;text-align:left;}
html body .circles-login-wrap.circles-login-wrap .circles-login-footer-link{font-size:14px !important;font-weight:500 !important;color:#6b6b73 !important;text-decoration:none !important;}
html body .circles-login-wrap.circles-login-wrap .circles-login-footer-link:hover{color:#111114 !important;}
html body .circles-login-wrap.circles-login-wrap .circles-login-form-links{margin-top:20px;text-align:left;}
html body .circles-login-wrap.circles-login-wrap .circles-login-logo{max-width:200px;}
/* Notices: one compact row, icon on the left, soft tint (no border, no tall padding). */
html body .circles-login-wrap.circles-login-wrap .message-status{display:flex;align-items:flex-start;gap:10px;padding:11px 14px !important;margin:14px 0 20px !important;border:0 !important;border-radius:12px !important;background:#fdecec !important;color:#9f1d22 !important;text-align:left;}
html body .circles-login-wrap.circles-login-wrap .message-status::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center/contain no-repeat;}
html body .circles-login-wrap.circles-login-wrap .message-status p{margin:0 !important;padding:0 !important;font-size:14px !important;line-height:1.45 !important;font-weight:500 !important;text-align:left !important;color:inherit !important;}
html body .circles-login-wrap.circles-login-wrap .message-status p br{display:none;}

/* Live "Passwords match" line under Confirm New Password: gray hint until they match, then a green check that draws in. */
html body .circles-login-wrap.circles-login-wrap .cl-match{display:flex;align-items:center;gap:8px;margin:10px 0 0 !important;font-size:14px !important;line-height:1.3 !important;font-weight:500 !important;color:#6b6b73 !important;}
html body .circles-login-wrap.circles-login-wrap .cl-match[hidden]{display:none;}
html body .circles-login-wrap.circles-login-wrap .cl-match svg{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
html body .circles-login-wrap.circles-login-wrap .cl-match svg path{stroke-dasharray:16;stroke-dashoffset:16;}
html body .circles-login-wrap.circles-login-wrap .cl-match.is-match{color:#1a7f37 !important;}
html body .circles-login-wrap.circles-login-wrap .cl-match.is-match svg circle{fill:#1a7f37;stroke:#1a7f37;}
html body .circles-login-wrap.circles-login-wrap .cl-match.is-match svg path{stroke:#fff;stroke-dashoffset:0;transition:stroke-dashoffset .35s ease .05s;}
html body .circles-login-wrap.circles-login-wrap .cl-match.is-match svg{animation:cl-pop .3s ease;}
html body .circles-login-wrap.circles-login-wrap .circles-login-input.is-match,html body .circles-login-wrap.circles-login-wrap .circles-login-input.is-match:focus{border-color:#1a7f37 !important;}
@keyframes cl-pop{0%{transform:scale(.6);}60%{transform:scale(1.12);}100%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){html body .circles-login-wrap.circles-login-wrap .cl-match.is-match svg{animation:none;}html body .circles-login-wrap.circles-login-wrap .cl-match.is-match svg path{transition:none;}}

/* Sizes and fonts can't be changed by the theme (owner, 2026-10-25): base size and every text size above use this prefix + !important. */
html body .circles-login-wrap.circles-login-wrap{font-size:10px !important;}