:root {
--primary-color-woodplus: var(--main-color, #e91e63);
--secondary-color-woodplus: var(--red-5, #e91e63d4);
--background-color-woodplus: #f5f5f5;
--form-background-woodplus: rgba(255, 255, 255, 0.98);
--text-primary-woodplus: #333;
--text-secondary-woodplus: #666;
--border-color-woodplus: #eee;
}
.container-woodplus {
width: 100%; display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.form-box {
margin-top:20px ;
background: var(--form-background-woodplus);
padding: 0px; width: 100%;
max-width: 420px;
position: relative;
backdrop-filter: blur(10px); transform: translateY(0);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-area {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
}
.logo-container-woodplus {
width: 150px;
}
.logo-container-woodplus img {
width: 100%;
height: auto !important;
}
.logo {
font-size: 24px;
color: white;
}
.floating-input-field {
position: relative;
margin-bottom: 30px;
}
.floating-input-field input {
width: 100%;
padding: 16px 40px 16px 12px !important;
border: 2px solid var(--border-color-woodplus);
border-radius: 12px;
font-size: 14px;
background: transparent;
color: var(--text-primary-woodplus);
transition: all 0.3s ease;
height: unset;
}
.floating-input-field label {
position: absolute;
right: 45px;
top: 50%;
transform: translateY(-50%);
background: var(--form-background-woodplus);
padding: 0 5px;
color: var(--text-secondary-woodplus);
font-size: 14px;
transition: all 0.3s ease;
pointer-events: none;
}
.floating-input-field input:focus~label,
.floating-input-field input:valid~label {
top: 0;
font-size: 14px;
color: var(--primary-color-woodplus);
}
.floating-input-field i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--primary-color-woodplus);
font-size: 16px;
transition: all 0.3s ease;
}
.custom-checkbox {
position: relative;
width: 24px;
height: 24px;
}
.custom-checkbox input {
display: none;
}
.custom-checkbox label {
width: 24px;
height: 24px;
border: 2px solid var(--primary-color-woodplus);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
background: var(--form-background-woodplus);
}
.custom-checkbox label i {
color: white;
font-size: 14px;
opacity: 0;
transform: scale(0.5);
transition: all 0.3s ease;
}
.custom-checkbox input:checked+label {
background: var(--primary-color-woodplus);
}
.custom-checkbox input:checked+label i {
opacity: 1;
transform: scale(1);
}
.submit-btn {
width: 100%;
padding: 10px;
background: var(--primary-color-woodplus);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.submit-btn:hover {
transform: translateY(-2px);
background-color: var(--secondary-color-woodplus) !important;
color: white !important;
}
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid white;
border-top: 2px solid transparent;
border-radius: 50%;
position: absolute;
display: none;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.submit-btn.loading .btn-text,
.submit-btn.loading i {
opacity: 0;
}
.submit-btn.loading .loading-spinner {
display: block;
}
.tooltip-woodplus {
position: relative;
}
.tooltip-woodplus:before {
content: attr(data-tooltip-woodplus);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 8px 12px;
background: var(--text-primary-woodplus);
color: var(--form-background-woodplus);
font-size: 12px;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.tooltip-woodplus:hover:before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-10px);
}
@media (max-width: 480px) {
.form-box {
padding: 30px 20px;
}
.logo-area {
flex-direction: column;
text-align: center;
}
.extra-links {
flex-direction: column;
align-items: center;
gap: 15px;
}
}
.divider {
text-align: center;
margin: 30px 0;
position: relative;
}
.divider::before,
.divider::after {
content: '';
position: absolute;
top: 50%;
width: 45%;
height: 1px;
background: var(--border-color-woodplus);
}
.social-login {
margin-bottom: 30px;
}
.google-btn {
width: 100%;
padding: 14px;
background: var(--form-background-woodplus);
border: 2px solid var(--border-color-woodplus);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
color: var(--text-primary-woodplus);
transition: all 0.3s ease;
}
.extra-links {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.extra-links a {
color: var(--text-secondary-woodplus);
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
transition: color 0.3s ease;
}
.floating-input-field input:focus {
border-color: var(--primary-color-woodplus);
outline: none;
}
.checkbox {
display: flex;
align-items: center;
gap: 10px;
margin: 20px 0;
}
.checkbox span {
color: var(--text-secondary-woodplus);
font-size: 14px;
}
.top-header {
text-align: center;
margin-bottom: 0px;
}
.top-header h2 {
color: var(--text-primary-woodplus);
margin-bottom: 10px;
}
.top-header p {
color: var(--text-secondary-woodplus);
margin-bottom: 10px;
}
.otp-inputs {
display: flex;
gap: 10px;
justify-content: center;
margin-bottom: 30px;
}
.otp-inputs input {
width: 100%;
height: 50px;
text-align: center;
font-size: 24px;
letter-spacing: 12px;
border: 2px solid var(--border-color-woodplus);
border-radius: 12px;
background: transparent;
color: var(--text-primary-woodplus);
transition: all 0.3s ease;
}
.otp-inputs input:focus {
border-color: var(--primary-color-woodplus);
outline: none;
}
.action-links {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0 30px;
}
.edit-number {
color: var(--primary-color-woodplus);
text-decoration: none;
font-size: 14px;
}
.resend-code {
text-align: right;
}
.resend-code .timer {
margin-left: 15px;
color: var(--text-secondary-woodplus);
font-size: 14px;
}
.resend-code .resend-link {
color: var(--primary-color-woodplus);
text-decoration: none;
font-size: 14px;
}
.resend-code .resend-link.disabled {
color: var(--text-secondary-woodplus);
cursor: not-allowed;
opacity: 0.7;
}
#user-phone {
font-weight: bold;
}
.msg_strong {
font-size: 14px;
font-weight: 700;
color: var(--primary-color-woodplus);
}
.alert {
display: none;
align-items: center;
padding: 11px 20px;
border-radius: 8px;
margin: 25px 0;
font-size: 12px;
}
.alert.alert-success,
.alert.alert-error {
display: flex;
}
.alert-success {
background-color: #e7f6ed;
border: 1px solid #b7e4c7;
color: #1b4332;
}
.alert-error {
background-color: #fde8e8;
border: 1px solid #f8b4b4;
color: #981b1b;
}
.alert-icon {
display: inline-flex;
align-items: center;
margin-left: 10px;
line-height: 1;
}
.alert-icon svg {
vertical-align: middle;
}
.alert.slide-in {
animation: slideIn 0.5s ease forwards;
}
.svg_success {
display: none;
}
.alert-success .svg_success {
display: inline-block;
}
.svg_error {
display: none;
}
.alert-error .svg_error {
display: inline-block;
}
.floating-input-field .input-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--primary-color-woodplus);
transition: all 0.3s ease;
}
.login-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.login-popup {
position: relative;
max-height: 90vh;
overflow-y: auto;
background: #fff;
border-radius: 24px;
width: 470px
}
.close-popup {
position: absolute;
right: 12px;
top: 8px;
font-size: 24px;
cursor: pointer;
z-index: 1;
}
.create-account-question a,.create-account-question p {
display: none;
}
.login-form-side .floating-input-field label , .wd-dropdown .floating-input-field label{
font-size: 11px;
}
.login-form-side .floating-input-field input:focus~label ,.wd-dropdown .floating-input-field input:focus~label, .login-form-side .floating-input-field input:valid~label ,.wd-dropdown .floating-input-field input:valid~label
{
font-size: 12px;
}
.back_to_start{
font-size:12px;
}
.back_to_start{
display: flex;
justify-content: end;
margin-top: 21px;
margin-left: 10px;
}
.wd-dropdown a.create-account-link {
display: none;
}
.wd-dropdown .container.woodplus_login_register
{
padding-inline: unset !important;
margin-inline: unset !important;
}
.wd-dropdown .form-box{
border:unset !important;
}
body:not(.woodmartplus-myaccount) .woodplus_login_register .logo-area {
display: none;
}
.create-account-question {
display: none;
}
div#bd-root-birth_day table tbody td
{
padding: unset !important;
}
#bd-main-birth_day table{
margin-bottom: 0 !important;
}
div#bd-root-birth_day table thead th
{
padding: unset !important;
color: white !important;
font-style: unset !important;
font-family: unset !important;
vertical-align: unset !important;
}
#bd-month-birth_day,#bd-year-birth_day{
padding: unset !important;
padding-right: 14px !important;
}
#bd-table-days-birth_day tr td button.day {
position: unset !important;
display: unset !important;
align-items: unset !important;
justify-content: unset !important;
gap: unset !important;
outline: unset !important;
border-radius: unset !important;
vertical-align: unset !important;
text-decoration: unset !important;
text-shadow: unset !important;
line-height: unset !important;
cursor: unset !important;
transition: unset !important;
border: unset !important;
box-shadow: unset !important;
text-transform: var(--btn-transform, uppercase);
font-weight: unset !important;
font-family: unset !important;
font-style: unset !important;
padding: unset !important;
min-height: unset !important;
font-size: unset !important;
}
.bd-table-days button:hover:enabled {
color: red !important;
font-weight: 700 !important;
background-color: #e7e7e7 !important;
cursor: pointer !important;
}.wd-header-search{--wd-tools-icon: "\f130"}.wd-header-search .wd-tools-icon img,.wd-header-search .wd-tools-icon:before{transition:opacity .3s ease}.wd-header-search .wd-tools-icon:after{position:absolute;top:50%;left:50%;display:block;font-size:var(--wd-tools-icon-width, var(--wd-tools-icon-base-width));opacity:0;transform:translate(-50%, -50%);content:"\f112";font-family:"woodmart-font"}.wd-header-search:is(.wd-design-6.wd-with-wrap,.wd-design-7.wd-with-wrap,.wd-design-8){min-width:var(--wd-tools-icon-base-width)}.wd-header-search:is(.wd-design-6.wd-with-wrap,.wd-design-7.wd-with-wrap,.wd-design-8) .wd-tools-icon:after{inset-inline-start:var(--wd-tools-sp);inset-inline-end:auto;transform:translateY(-50%)}.wd-search-opened .wd-header-search .wd-tools-icon:after{opacity:1;transition:opacity .3s ease}.wd-search-opened .wd-header-search .wd-tools-icon img,.wd-search-opened .wd-header-search .wd-tools-icon:before{opacity:0;transition:none}.wd-search-dropdown{width:300px}.wd-search-dropdown input[type=text]{height:70px !important;border:none}.whb-col-right .wd-search-dropdown{right:auto;left:0;margin-left:calc(var(--nav-gap, 0.001px)/2*-1);margin-right:0}.wd-search-dropdown .wd-dropdown-results{inset-inline:calc(var(--wd-brd-radius)/1.5)}.form-style-underlined .wd-search-dropdown input[type=text]{padding-right:15px}.wd-header-cart{--wd-tools-icon: "\f105"}.wd-header-cart .wd-tools-icon.wd-icon-alt{--wd-tools-icon: "\f126"}.wd-header-cart :is(.wd-cart-subtotal,.subtotal-divider,.wd-tools-count){vertical-align:middle}.wd-header-cart .wd-cart-number>span,.wd-header-cart .subtotal-divider{display:none}.wd-header-cart .wd-cart-subtotal .amount{color:inherit;font-weight:inherit;font-size:inherit}.wd-tools-text-cart{display:flex;align-items:center;gap:7px}.wd-header-cart:is(.wd-design-2,.wd-design-5) .wd-tools-icon{margin-inline-end:6px}.wd-header-cart:is(.wd-design-6-text,.wd-design-7-text)>a>.wd-tools-text-cart{position:relative;display:flex;align-items:center;border:1px solid rgba(0,0,0,.105);height:42px;border-radius:42px;padding-inline:var(--wd-tools-sp)}.wd-header-cart.wd-design-6-text>a>.wd-tools-text-cart{border:1px solid rgba(0, 0, 0, 0.105)}.whb-color-light .wd-header-cart.wd-design-5-text>a>.wd-tools-text-cart{border-color:rgba(255, 255, 255, 0.25)}.wd-header-cart.wd-design-7-text>a>.wd-tools-text-cart{background-color:var(--wd-primary-color);color:#fff;transition:inherit}.wd-header-cart.wd-design-7-text:hover>a>.wd-tools-text-cart{color:rgba(255,255,255,.8)}.wd-dropdown-cart{padding:20px;width:330px}.whb-col-right .wd-dropdown-cart{right:auto;left:0;margin-left:calc(var(--nav-gap, 0.001px)/2*-1);margin-right:0}:is(.woocommerce-cart,.woocommerce-checkout) :is(.cart-widget-side,.wd-dropdown-cart){display:none}@media(max-width: 1024px){.wd-dropdown-cart{display:none}}.wd-custom-dropdown{padding-inline:10px}