.otp-auth-container {
background: #fff;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
margin: 20px auto;
max-width: 400px;
width: 100%;
} .otp-auth-container h2 {
font-size: 24px;
font-weight: 600;
margin: 0 0 16px 0;
color: #333;
} .otp-auth-description {
color: #666;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.6;
} .otp-auth-form {
margin: 0;
}
.otp-auth-form p {
margin-bottom: 16px;
}
.otp-auth-form label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
font-size: 14px;
}
.otp-auth-form input[type="text"],
.otp-auth-form input[type="email"],
.otp-auth-form input[type="tel"],
.otp-auth-form input.input {
width: 100% !important;
padding: 12px 16px !important;
border: 1px solid #ddd !important;
border-radius: 4px !important;
font-size: 16px !important;
transition: border-color 0.3s ease;
box-sizing: border-box !important;
display: block !important;
height: auto !important;
line-height: 1.5 !important;
margin: 0 !important;
}
.otp-auth-form input[type="text"]:focus,
.otp-auth-form input[type="email"]:focus,
.otp-auth-form input[type="tel"]:focus,
.otp-auth-form input.input:focus {
border-color: #0073aa !important;
outline: none !important;
box-shadow: 0 0 0 1px #0073aa !important;
} .otp-auth-button,
input.otp-auth-button,
button.otp-auth-button {
display: inline-block !important;
width: 100% !important;
padding: 12px 24px !important;
background: #0073aa !important;
color: #fff !important;
border: none !important;
border-radius: 4px !important;
font-size: 16px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: background-color 0.3s ease;
text-decoration: none !important;
text-align: center !important;
box-shadow: none !important;
text-shadow: none !important;
height: auto !important;
line-height: 1.5 !important;
}
.otp-auth-button:hover,
input.otp-auth-button:hover,
button.otp-auth-button:hover {
background: #005a87 !important;
color: #fff !important;
border-color: #005a87 !important;
}
.otp-auth-button-secondary {
background: #f7f7f7;
color: #333;
border: 1px solid #ddd;
}
.otp-auth-button-secondary:hover {
background: #e9e9e9;
color: #333;
} .otp-auth-links {
margin-top: 16px;
text-align: center;
}
.otp-auth-links a {
color: #0073aa;
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.otp-auth-links a:hover {
color: #005a87;
text-decoration: underline;
} .otp-auth-toggle {
text-align: center;
margin: 20px 0;
padding: 16px;
background: #f9f9f9;
border-radius: 4px;
}
.otp-auth-toggle-button {
display: inline-block;
padding: 10px 20px;
background: #0073aa;
color: #fff;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.3s ease;
}
.otp-auth-toggle-button:hover {
background: #005a87;
color: #fff;
} .otp-auth-error {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
padding: 12px 16px;
border-radius: 4px;
margin-bottom: 16px;
font-size: 14px;
} .otp-auth-success {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
padding: 12px 16px;
border-radius: 4px;
margin-bottom: 16px;
font-size: 14px;
} .woocommerce .otp-auth-container {
max-width: 100%;
}
.woocommerce-form-login .otp-auth-toggle {
margin: 20px 0;
} .woocommerce-page #customer_login {
max-width: 500px;
margin: 0 auto;
}
.woocommerce-page #customer_login .u-column1,
.woocommerce-page #customer_login .u-column2 {
width: 100%;
float: none;
margin: 0 auto 30px;
} .woocommerce-page .woocommerce-form-login {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e5e5;
} .woocommerce-page .otp-auth-myaccount-wrapper,
.woocommerce-page .otp-auth-myaccount-only {
max-width: 500px;
margin: 0 auto;
}
.woocommerce-page .otp-auth-container {
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e5e5;
} body.otp-auth-active .woocommerce-form-login:not(.otp-auth-container) {
display: none !important;
}
body.otp-auth-active .login {
display: none !important;
} .otp-login-active .woocommerce-form-login {
display: none !important;
}
.otp-login-active .u-column2 {
display: none !important;
} .shoptimizer-theme .otp-auth-container {
border: 1px solid #e1e1e1;
}
.shoptimizer-theme .otp-auth-button {
background: var(--shoptimizer-primary-color, #0073aa);
padding: 14px 28px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.shoptimizer-theme .otp-auth-button:hover {
background: var(--shoptimizer-primary-hover, #005a87);
} @media (max-width: 768px) {
.otp-auth-container {
padding: 16px;
}
.otp-auth-container h2 {
font-size: 20px;
}
.otp-auth-form input[type="text"],
.otp-auth-form input[type="email"],
.otp-auth-form input[type="tel"] {
font-size: 16px;
padding: 10px 14px;
}
.otp-auth-button {
width: 100%;
padding: 12px;
}
} .otp-auth-loading {
opacity: 0.6;
pointer-events: none;
}
.otp-auth-loading::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-left: 8px;
border: 2px solid #fff;
border-radius: 50%;
border-top-color: transparent;
animation: otp-auth-spin 0.6s linear infinite;
}
@keyframes otp-auth-spin {
to { transform: rotate(360deg); }
} .otp-auth-form input[inputmode="numeric"] {
font-size: 24px;
letter-spacing: 8px;
text-align: center;
font-weight: 600;
} .otp-auth-divider {
position: relative;
text-align: center;
margin: 24px 0;
}
.otp-auth-divider::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #ddd;
}
.otp-auth-divider span {
position: relative;
background: #fff;
padding: 0 16px;
color: #666;
font-size: 14px;
} .otp-auth-fade-in {
animation: otpAuthFadeIn 0.3s ease-in;
}
@keyframes otpAuthFadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} body.login #login {
width: 400px;
} body.login.otp-auth-active #loginform {
display: none !important;
}
body.login.otp-auth-active .login h1 {
margin-bottom: 24px;
} body.login .otp-auth-container {
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
padding: 26px 24px;
margin: 0;
border-radius: 0;
}
body.login .otp-auth-divider {
max-width: 400px;
margin: 24px auto;
}
body.login .otp-auth-toggle {
max-width: 400px;
margin: 20px auto;
} body.login .otp-auth-button {
width: 100%;
padding: 12px 16px;
font-size: 16px;
height: auto;
} body.login.otp-auth-active #backtoblog {
margin-top: 20px;
} body.login .otp-auth-form input.input {
background: #fff !important;
visibility: visible !important;
opacity: 1 !important;
} body.login form.otp-auth-form {
background: transparent;
box-shadow: none;
padding: 0;
margin: 0;
}
body.login .otp-auth-form p {
margin-bottom: 16px;
} .woocommerce-form-login,
.otp-auth-myaccount-wrapper,
.otp-auth-container,
.u-column2,
.otp-auth-toggle,
.otp-auth-divider {
transition: opacity 0.3s ease, transform 0.3s ease;
} .woocommerce-page .entry-title {
text-align: center;
margin-bottom: 30px;
font-size: 28px;
color: #333;
} .woocommerce-page .woocommerce-form-login .form-row,
.woocommerce-page .otp-auth-form p {
margin-bottom: 20px;
} .woocommerce-page .woocommerce-form-login input.input-text,
.woocommerce-page .otp-auth-form input.input {
width: 100%;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
.woocommerce-page .woocommerce-form-login input.input-text:focus,
.woocommerce-page .otp-auth-form input.input:focus {
border-color: #0073aa;
outline: none;
box-shadow: 0 0 0 1px #0073aa;
} .woocommerce-page .woocommerce-form-login .button,
.woocommerce-page .otp-auth-button {
width: 100%;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
transition: background-color 0.3s ease;
} .woocommerce-page .woocommerce-form-login .woocommerce-form-login__rememberme {
margin-bottom: 15px;
}
.woocommerce-page .woocommerce-form-login .lost_password {
text-align: center;
margin-top: 15px;
}
.woocommerce-page .woocommerce-form-login .lost_password a {
color: #0073aa;
text-decoration: none;
font-size: 14px;
}
.woocommerce-page .woocommerce-form-login .lost_password a:hover {
text-decoration: underline;
} .woocommerce-page #customer_login .u-column2 h2 {
margin-bottom: 20px;
font-size: 22px;
color: #333;
} .otp-auth-myaccount-wrapper[style*="display: none"] {
height: 0;
overflow: hidden;
} @keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.otp-auth-myaccount-wrapper,
.otp-auth-container {
animation: slideIn 0.3s ease-out;
}