: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}.wd-carousel-container{--wd-width: 100%;position:relative;width:var(--wd-width)}.wd-carousel-inner{position:relative;margin:-15px 0}.wd-carousel{position:relative;overflow-x:var(--wd-carousel-overflow, clip);overflow-y:var(--wd-carousel-overflow, unset);padding:15px 0;margin-inline:calc(var(--wd-gap)/-2);touch-action:pan-y}@supports not (overflow: clip){.wd-carousel{overflow:var(--wd-carousel-overflow, hidden)}}.wd-carousel-wrap{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:initial;box-sizing:content-box;transform:translate3d(0px, 0, 0)}.wd-carousel-item{position:relative;height:100%;flex:0 0 calc(100%/var(--wd-col));max-width:calc(100%/var(--wd-col));padding:0 calc(var(--wd-gap)/2);transition-property:transform;transform:translate3d(0px, 0, 0)}.wd-backface-hidden .wd-carousel-item{transform:translateZ(0);backface-visibility:hidden}.wd-carousel[data-center_mode=yes] .wd-carousel-wrap:not([style]){transform:translate3d(calc(-50% + 100% / var(--wd-col) / 2), 0, 0)}.wd-autoheight,.wd-autoheight .wd-carousel-item{height:auto}.wd-autoheight .wd-carousel-wrap{align-items:flex-start;transition-property:transform,height}@media(min-width: 1025px){.wd-carousel-container:not(.wd-off-lg) [style*="col-lg:1;"]:not(.wd-initialized)>.wd-carousel-wrap>.wd-carousel-item:nth-child(n+2){display:none}}@media(max-width: 768.98px){.wd-carousel-container:not(.wd-off-sm) [style*="col-sm:1;"]:not(.wd-initialized)>.wd-carousel-wrap>.wd-carousel-item:nth-child(n+2){display:none}}@media(min-width: 769px)and (max-width: 1024px){.wd-carousel-container:not(.wd-off-md) [style*="col-md:1;"]:not(.wd-initialized)>.wd-carousel-wrap>.wd-carousel-item:nth-child(n+2){display:none}}.wd-slide-bg{background-position:center center;background-size:cover;background-repeat:no-repeat}.wd-slide-bg :is(img,picture){display:block;width:100%;height:100%;object-fit:cover;object-position:center}.wd-slide-link{z-index:2}.wd-slider-arrows.wd-pos-sep{--wd-arrow-offset-h: calc(var(--wd-arrow-width, var(--wd-arrow-size, 50px)) / -1)}.wd-slider-pagin{position:absolute;inset-inline:15px;bottom:15px;z-index:2}.wd-slider.wd-container-full-width .wd-slide-container{max-width:none}.wd-slider>.wd-carousel-inner>.wd-carousel:not(.wd-fade)>.wd-carousel-wrap{transition-timing-function:cubic-bezier(0.22, 0.61, 0.36, 1)}.wd-carousel.wd-fade>.wd-carousel-wrap>.wd-carousel-item{pointer-events:none;transition-property:opacity}.wd-carousel.wd-fade>.wd-carousel-wrap>.wd-carousel-item.wd-active{pointer-events:auto}.swiper-notification{position:absolute;display:flex;justify-self:center;inset:15px 0 auto 0;padding:5px 10px;color:var(--color-gray-800);background:rgba(var(--bgcolor-white-rgb), 0.6);border-radius:var(--wd-brd-radius);z-index:2}.swiper-notification:empty{display:none}.wd-slider>.wd-carousel-inner{margin:0}.wd-slider>.wd-carousel-inner>.wd-carousel{padding:0;--wd-gap: 0.001px}.wd-slide{display:flex;overflow:hidden;aspect-ratio:var(--wd-aspect-ratio)}.wd-slide-container{z-index:2;display:flex;align-items:var(--wd-align-items, center);justify-content:var(--wd-justify-content, left);padding-block:35px}.wd-slide-inner{position:relative;width:100%;transform:translate3d(0, 0, 0)}.wd-slider.wd-section-container>.wd-carousel-inner>.wd-carousel{border-radius:var(--wd-brd-radius);overflow:var(--wd-carousel-overflow, clip)}.wd-slider{--wd-width: unset}.wd-slider[class*=wd-section-stretch]{--wd-width: calc(100vw - var(--wd-scroll-w) - var(--wd-sticky-nav-w))}.wd-slider.wd-section-stretch-content{margin-left:-15px;margin-right:-15px}:is(.vc_row-no-padding,.wd-section-stretch-content-no-pd) .wd-slider.wd-section-stretch-content{--wd-row-spacing: 0.001px;margin-left:0;margin-right:0}:is(.vc_row-no-padding,.wd-section-stretch-content-no-pd) .vc_row-fluid{margin-right:0;margin-left:0}.wd-slider:where(.wd-section-container) .wd-slide-container{padding-inline:5%}.wd-slide-container.wd-padding-off{padding:0}.wd-slider .wd-slide:is(.wd-slide-prev,.wd-slide-next):not(.wd-active) [class*=wd-animation]{opacity:0;transform:none}@media(max-width: 1024px){.wd-slider-arrows.wd-style-1{--wd-arrow-offset-h: calc((var(--wd-arrow-width, var(--wd-arrow-size, 50px)) - 10px ) / -1)}}.wd-slider-pagin.wd-style-number-2{--wd-pagin-gap: 30px;--wd-pagin-size: var(--wd-text-font-size);--wd-pagin-color: var(--color-gray-800);--wd-pagin-color-hover: var(--wd-pagin-color);--wd-pagin-color-act: var(--wd-pagin-color-hover)}.wd-slider-pagin.wd-style-number-2 li{display:flex;align-items:center;gap:5px;font-size:var(--wd-pagin-size);font-weight:600;line-height:1;color:var(--wd-pagin-color)}.wd-slider-pagin.wd-style-number-2 li:before{content:"";position:absolute;inset:-10px 0}.wd-slider-pagin.wd-style-number-2 li:after{content:"";width:1.3em;border-bottom:var(--wd-pagin-brd-width, 2px) var(--wd-pagin-brd-style, solid) var(--wd-pagin-brd-color, currentColor);transition:all .25s ease}.wd-slider-pagin.wd-style-number-2 li:hover{color:var(--wd-pagin-color-hover)}.wd-slider-pagin.wd-style-number-2 li:hover:after{width:2.5em;border-color:var(--wd-pagin-brd-color-hover, currentColor)}.wd-slider-pagin.wd-style-number-2 li.wd-active{color:var(--wd-pagin-color-act)}.wd-slider-pagin.wd-style-number-2 li.wd-active:after{width:3.2em;border-color:var(--wd-pagin-brd-color-act, currentColor)}