@charset "UTF-8";

/* === Fonts === */
@font-face {font-family: "Peyda";font-style: normal;font-weight: normal;src: url("../../assets/fonts/PeydaWebFaNum-Regular.woff2") format("woff2");}
@font-face {font-family: "Peyda";font-style: normal;font-weight: bold;src: url("../../assets/fonts/PeydaWebFaNum-Bold.woff2") format("woff2");}

/*
 * === Scoped reset ===
 * Everything below is deliberately scoped under .login-register-page instead
 * of bare tag/universal selectors. This plugin's stylesheet is loaded both on
 * its own dedicated full-page template AND embedded inline into arbitrary
 * theme pages (replacing the default WP/WooCommerce login forms) — an
 * unscoped `*`, `body`, `a`, `img` reset would leak onto and break the host
 * page's own layout/typography in that second case.
 */
.login-register-page,
.login-register-page *,
.login-register-page *::before,
.login-register-page *::after {
    box-sizing: border-box;
}
.login-register-page img {max-width: 100%;display: block;}
.login-register-page a {text-decoration: none;transition: all .2s ease-in-out;}

/* === Layout: page + form card === */
.login-register-page {
    min-height: 100vh;
    background-color: var(--page-background, #121212);
    color: var(--form-text-color, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl;
    overflow-wrap: break-word;
    font-size: 14px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
}
.login-register-page,
.login-register-page input,
.login-register-page button,
.login-register-page select,
.login-register-page textarea {
}
.login-register-page .login-register-form {position: relative;min-width: 400px;max-width: 400px;padding: 30px;margin-bottom: 80px;border-radius: 20px;border: 1px solid #333;background: var(--form-background, #1e1e1e);color: var(--form-text-color, inherit);}
.login-register-page .logo {text-align: center;margin-bottom: 20px;}
.login-register-page .logo img {width: 260px;height: 110px;margin: 0 auto;object-fit: contain;}
.login-register-page.text-align-right {text-align: right;}
.login-register-page.text-align-center {text-align: center;}
.login-register-page.text-align-left {text-align: left;}
.login-register-page h1, .login-register-page h2, .login-register-page h3 {color: var(--heading-color, inherit);}

form#submit-login {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

/* === Inputs === */
.login-register-page.login-register-page input {
    width: 100%;
    background-color: var(--input-background, #1a1a1a);
    border: 2px solid var(--input-border-color, #444);
    color: var(--input-text-color, #FFF);
    height: 50px;
    border-radius: 12px;
    margin-top: 15px;
    padding: 0 15px;
    text-align: left;
    font-size: 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.login-register-page input:focus {outline: none;border-color: #3858e9;box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.25);}
.login-register-page input::placeholder {color: #888;opacity: 1;font-style: italic;}
.login-register-page input[name="full_name"],.login-register-page input[name="password"] {text-align: center;}
.login-register-page input[type="password"] {letter-spacing: 2px;}

/* === Buttons & links === */
.login-register-page input.serpira-submit {font-size: 16px;border: none;cursor: pointer;text-align: center;color: var(--submit-text-color, #FFF);background-color: var(--submit-background, #3858e9);transition: opacity .2s ease;}
.login-register-page input.serpira-submit:hover {opacity: .9;}
.login-register-page .serpira-change-link {width: auto;display: block;cursor: pointer;border: none;height: auto;background-color: transparent;padding: 0 4px 0 10px;color: #f5f5f5;margin-top: 15px;font-size: 12px;position: relative;font-weight: 300;}
.login-register-page .serpira-change-link::after {border-color: #f5f5f5;left: 0;}
.login-register-page .serpira-footer-text {font-size: 12px;text-align: center;margin-top: 15px;}
.login-register-page .serpira-footer-text a {text-decoration: underline;}

/* === Messages / alerts === */
.login-register-page .serpira-error-text {color: #D60053;text-align: center;margin-top: 20px;}
.login-register-page .serpira-success-text {color: #419941;text-align: center;margin-top: 20px;}
.login-register-page .serpira-error-text.error-fixed {position: fixed;top: 20px;right: 20px;z-index: 99999;background-color: #D60053;padding: 15px;border-radius: 12px;color: #FFF;}
.login-register-page .text-error {display: none;}
.login-register-page .has-error .text-error {display: block;color: red;margin-top: 4px;}
.login-register-page .has-error input[type="text"] {border-color: red;}

/* === Loading / success spinner === */
.login-register-page .btn-loading {width: 100%;height: 50px;border-radius: 12px;margin-top: 15px;padding: 0 15px;background-color: #D60053;display: flex;align-items: center;justify-content: center;}
.login-register-page .btn-loading > div {position: relative;width: 70px;height: 50px;}
.login-register-page .btn-loading div div {position:absolute;top: 20px;width:11px;height:11px;border-radius:50%;background-color: #FFF;animation-timing-function:cubic-bezier(0,1,1,0);}
.login-register-page .btn-loading div div:nth-child(1) {left:8px;animation:btn-ellipsis1 0.6s infinite;}
.login-register-page .btn-loading div div:nth-child(2) {left:8px;animation:btn-ellipsis2 0.6s infinite;}
.login-register-page .btn-loading div div:nth-child(3) {left:32px;animation:btn-ellipsis2 0.6s infinite;}
.login-register-page .btn-loading div div:nth-child(4) {left:56px;animation:btn-ellipsis3 0.6s infinite;}
@keyframes btn-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes btn-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes btn-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(24px,0)}}
.login-register-page .success-login {background-color: transparent;}
.login-register-page .success-login div div {background-color: #419941;}

/* === Back icon / timer / loading dots === */
.login-register-page .serpira-back {position: absolute;top: 42px;right: 32px;fill: #D60053;color: #D60053;}
.login-register-page .serpira-back svg {width: 25px;height: 25px;}
.login-register-page #serpira-timer {color: #D60053;}
.login-register-page .serpira-loading {margin: 0;}
.login-register-page .serpira-loading div {background-color: #D60053;}
.login-register-page .serpira-countdown-timer {margin-top: 50px;}
.login-register-page .serpira-timer-text {margin-right: 8px;font-size: 13px;}

/* === OTP digit inputs === */
.login-register-page .serpira-otp-inputs {display: flex;gap: 5px;justify-content: center;margin-bottom: 20px;direction: ltr;}
.login-register-page .serpira-otp-inputs .otp-digit {text-align: center !important;font-size: 24px !important;}

/* === Embedded variant (shortcode replacing default WP/WooCommerce forms) === */
.serpira-inline-login-wrapper {width: 100%;}
.login-register-page.serpira-embedded-login {min-height: auto;display: block;justify-content: unset;padding: 0;background: transparent;}
.login-register-page.serpira-embedded-login .login-register-form {max-width: 500px;width: 100%;margin: 0 auto;}
.login-register-page.serpira-embedded-login .logo img {max-width: 220px;height: auto;}

/* === Responsive: the dedicated full-page template uses a fixed-width card
   that would overflow narrow phone screens; the embedded variant above is
   already fluid (no min-width) and needs no adjustment here. === */
@media (max-width: 480px) {
    .login-register-page {padding: 16px;}
    .login-register-page .login-register-form {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        margin-bottom: 40px;
        padding: 24px 20px;
    }
}