/* /**
* Frontend Style.
*
* @package  haku-skin-for-wp-configurator-pro/assets/css/
* @since  1.0
* @version  1.0
*/

*,
*:before,
*:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.pswp {
   display: none;
}


body {
   margin: 0px;
   background: var(--wpc-body-bg);
   font-family: var(--wpc-secondary-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--wpc-primary-font);
}

ol,ul {
   list-style: none;
   padding: 0px;
   margin: 0px;
}

.wpc-header-parent-wrap {
   margin: 0px;
   padding: 20px 25px;
   display: inline-block;
   width: 100%;
}

.wpc-floating-icons {
   left: 30px;
}

.wpc-layer-description {
   display: none;
}

.wpc-layer-img {
   margin-right: 15px;
}
.wpc-sub-control .wpc-control-lists-inner .wpc-layer-title-wrap .wpc-layer-img img {
   margin-left: 0px;
}

.wpc-sub-controls,.wpc-sub-control {
   display: none;
   background: var(--wpc-haku-skin-control-bg);
}

.wpc-haku-skin-control {
   display: flex;
   flex-direction: column-reverse;
   width: 100%;
}

.wpc-controls-parent-wrap {
   background: var(--wpc-haku-skin-control-bg);
   position: fixed;
   bottom: 0;
   width: 100%;
   z-index: 9;
   color: #b0b5c0;
}

.wpc-layer-title {
   margin: 0px;
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 500;
   letter-spacing: 0.5px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

.wpc-layer-title-wrap {
   display: flex;
   align-items: center;
   width: 100%;
   padding-right: 20px;
   position: relative;
   color: var(--wpc-haku-skin-control-text-color);
}

.wpc-layer-title-wrap::after {
   font-family: 'wp-configurator' !important;
   content: '\7a';
   position: absolute;
   right: 0;
   font-size: 12px;
}

.wpc-control-lists-inner {
   display: flex;
   align-items: center;
   width: calc(100% - 420px);
   overflow: auto;
}

/* width */
.wpc-control-lists-inner::-webkit-scrollbar {
   height: 5px;
 }
 
 /* Track */
 .wpc-control-lists-inner::-webkit-scrollbar-track {
   background:var(--wpc-haku-skin-control-scroll-bg); 
 }
  
 /* Handle */
 .wpc-control-lists-inner::-webkit-scrollbar-thumb {
   background:var(--wpc-haku-skin-control-scroll-color); 
 }



.wpc-parent-control .wpc-control-lists-inner li {
   cursor: pointer;
   height: calc(100px - 15px);
   display: flex;
   align-items: center;
   padding: 0px 25px;
   line-height: 1;
   position: relative
}

.wpc-parent-control .wpc-control-lists-inner li:hover {
   color: #fff;
}

.wpc-parent-control .wpc-control-lists-inner li:after {
   content: "";
   background: var(--wpc-haku-skin-control-border-left);
   display: block;
   width: 1px;
   height: 80%;
   position: absolute;
   left: 100%;
}

.wpc-parent-control .wpc-control-lists-inner li .wpc-layer-img img {
   border-radius: 5px;
}

.wpc-control-lists-inner > li.wpc-control-item.wpc-group-active {
   background: #000;
}

.wpc-control-lists-inner li.wpc-group-active .wpc-layer-title-wrap::after {
   font-family: 'wp-configurator' !important;
   content: '\7a';
   transform: rotate(-90deg);
}

.wpc-sub-control .wpc-control-lists-inner li .wpc-current-opened-group.wpc-layer-title-wrap::after {
   font-family: 'wp-configurator' !important;
   content: '\7a';
   transform: rotate(-90deg);
}

.wpc-sub-controls.wpc-has-sub-group-active,.wpc-current-opened-group {
   display: flex;
   width: 100%;
}

.wpc-sub-control.wpc-group-opened {
   display: block;
   position: fixed;
   bottom: 0;
   width: 100%;
   bottom: 0px;
   width: calc(100% - 420px);
   
}

.wpc-sub-control.wpc-group-opened.wpc-current-opened-group {
   bottom: 85px;
   width: 100%;
}

.wpc-sub-control.wpc-group-opened .wpc-control-close {
   display: none;
}

.wpc-sub-control.wpc-current-opened-group .wpc-control-close {
   display: flex;
   min-width: auto;
   padding: 0;
   position: fixed;
   width: 80px;
   height: 85px;
   left: 0;
   z-index: 9;
   justify-content: center;
   border-radius: 0;
   background: var(--wpc-haku-skin-control-bg);
   color: var(--wpc-haku-skin-control-close);
   transition: all ease .3s;
}

.wpc-sub-control.wpc-current-opened-group .wpc-control-close:hover {
   background: #181818;
}

.wpc-sub-control .wpc-control-lists-inner li {
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 15px;
   line-height: 1;
   flex-direction: row-reverse;
   word-wrap: break-word;
   position: relative;
   border-radius: 5px;
}

.wpc-sub-controls .wpc-control-lists-inner li.wpc-cl-disable-layer:before,
.wpc-sub-controls .wpc-control-lists-inner li.wpc-cl-disable-group .wpc-controls-img-list .wpc-controls-list-img:before, .wpc-sub-controls .wpc-control-lists-inner li.wpc-cl-disable-layer:after,
.wpc-sub-controls .wpc-control-lists-inner li.wpc-cl-disable-group .wpc-controls-img-list .wpc-controls-list-img:after {
   left: auto;
   right: auto;
}

.wpc-sub-control .wpc-control-lists-inner li.wpc-layer-type-text {
   margin-bottom: 0px;
   justify-content: center;
   width: auto;
   cursor: pointer;
}

.wpc-sub-control .wpc-control-lists-inner li.wpc-control-type-inline-text {
   min-width: auto;
   padding: 0px 30px;
}

.wpc-text-layer-input-group {
   top: auto;
   bottom: 0;
}

.wpc-sub-control .wpc-control-lists-inner li img {
   border-radius: 4px;
   width: 40px;
   height: 40px;
}

.wpc-sub-control .wpc-control-lists-inner li .wpc-control-item-color {
   width: 40px;
   height: 40px;
   border-radius: 4px;
}

.wpc-control-lists-inner .wpc-control-item.wpc-layer-type-upload img {
   margin-right: 15px;
   margin-left: 0;
   max-width: 40px;
   height: 40px;
}

.wpc-sub-control .wpc-control-lists-inner li .wpc-control-type-inline-text {
   padding: 0;
   justify-content: center;
   min-width: 120px;
}

.wpc-sub-control .wpc-control-lists-inner li.current {
   color: #fff;
   background: var(--wpc-haku-skin-control-active);
   border-radius: 5px;
}

.wpc-sub-control .wpc-control-lists-inner li.current:has(.wpc-custom-field-form) {
   background: none;
   padding: 10px;
}

.wpc-sub-control .wpc-control-lists-inner li.wpc-control-close:hover {
   box-shadow:none;
}

.wpc-sub-control .wpc-control-lists-inner li .wpc-hover-price .amount {
   display: block;
   margin-top: 1px;
}

.wpc-sub-control .wpc-control-lists-inner {
   display: flex;
   width: 100%;
   overflow-x: auto;
   padding: 10px 20px;
   position: relative;
}

.wpc-control-lists.wpc-sub-control.wpc-current-opened-group .wpc-control-lists-inner {
   padding-left: 80px;
}

/* width */
.wpc-sub-control .wpc-control-lists-inner::-webkit-scrollbar {
   height: 5px;
}

/* Track */
.wpc-sub-control .wpc-control-lists-inner::-webkit-scrollbar-track {
   background:var(--wpc-haku-skin-control-scroll-bg); 
}

/* Handle */
.wpc-sub-control .wpc-control-lists-inner::-webkit-scrollbar-thumb {
   background:var(--wpc-haku-skin-control-scroll-color); 
} 


.wpc-control-lists.wpc-sub-control.wpc-current-opened-group {
   border-bottom: 1px solid var(--wpc-haku-skin-control-scroll-color);
}

.wpc-control-item-info, .wpc-icon-label {
   margin: 0px;
   font-size: 12px;
   line-height: initial;
   color: var(--wpc-haku-skin-control-text-color);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   flex-basis: 0;
   flex-grow: 1;
   padding-right: 10px;
}

.wpc-control-type-inline-text .wpc-icon-label {
   padding-right: 0;
}

.wpc-control-item-info {
   position: absolute;
   top: -10px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #000;
   padding: 5px 10px;
   border-radius: 3px;
   z-index: 9;
   opacity: 0;
   visibility: hidden;
   transition: all ease .3s;
}

.wpc-control-item-info .wpc-control-item-info-inner {
   display: flex;
   align-items: center;
   justify-content: center;
}

.wpc-control-lists-inner .wpc-control-item:hover {
   background: #181818;
}

.wpc-control-item:hover .wpc-control-item-info {
   opacity: 1;
   visibility: visible;
}

.wpc-hover-price {
   margin-left: 10px;
}

.wpc-hover-price .wpc-plus {
   display: none;
}

.wpc-active-layer-name {
   font-size: 10px;
   letter-spacing: 0.5px;
}

.wpc-parent-control .wpc-active-layer-name {
   margin-right: 8px;
   position: relative;
   padding-left: 10px;
}

.wpc-parent-control .wpc-active-layer-name:before {
   content: "";
   height: 6px;
   width: 6px;
   background: #fff;
   display: inline-flex;
   border-radius: 50px;
   position: absolute;
   top: 50%;
   margin-top: -3px;
   left: 0;
}

.wpc-parent-control {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.wpc-parent-control .wpc-quote-form-parent-wrap {
   margin-right: 20px;
}

.wpc-haku-skin-control .wpc-cart-form-wrapper {
   display: flex;
}

.wpc-haku-skin-control .wpc-form.wpc-cart-form.cart {
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
}

.wpc-haku-skin-control .screen-reader-text {
   display: none;
}

.wpc-show-details {
   left: 25px;
   bottom: 115px;
}

.haku-skin .wpc-form.wpc-cart-form.cart {
   margin: 0px;
}

.haku-skin .wpc-form.wpc-cart-form.cart .quantity,
.haku-skin .wpc-cart-form-wrapper [data-open-popup-id='cart-form-summary'],
.haku-skin.wpc-has-summary .wpc-form.wpc-cart-form.cart {
   display: none;
}

.haku-skin.wpc-has-summary .wpc-cart-form-wrapper [data-open-popup-id='cart-form-summary'] {
   display: flex;
   background: var(--wpc-primary-btn-bg);
   height: auto;
}

.wpc-haku-skin-control .wpc-cart-form-parent-wrap {
   padding-right: 25px;
}

.haku-skin .wpc-form.wpc-cart-form.cart .wpc-primary-btn {
   background: var(--wpc-primary-btn-bg);
}

.wpc-layer-title-inner {
   min-width: 100px;
   max-width: 150px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

.wpc-control-item-label {
   margin: 0;
   width: 100%;
}

.wpc-icon-label-inner {
   display: flex;
   justify-content: space-between;
   flex-direction: row-reverse;
   align-items: center;
}

.wpc-control-item-icon-wrap {
   display: flex;
}

.wpc-configurator {
   height: calc(100vh - 212px);
   display: flex;
   justify-content: center;
   align-items: center;
}

.wpc-sub-control .wpc-control-lists-inner li .wpc-upload-layer-input-wrap {
   width: 100%;
   justify-content: center;
}

.wpc-layer-type-form .wpc-custom-field-form {
   display: flex;
}

.wpc-layer-type-form .wpc-field-group {
   margin-bottom: 0;
}

.wpc-sub-control .wpc-control-lists-inner li.wpc-layer-type-form {
   height: auto;
   flex-direction: row;
   overflow-x: auto;
   padding: 0;
   box-shadow: none;
   cursor: default;
}

.wpc-layer-type-form .wpc-custom-field-form .wpc-field-group {
   margin-right: 30px;
   flex-basis: 0;
   flex-grow: 1;
}

@media screen and (max-width: 991px) {
   
   .wpc-control-lists-inner,.wpc-sub-control.wpc-group-opened {
      width: calc(100% - 220px);
  }

  .wpc-parent-control .wpc-control-lists-inner li {
      min-width: auto;
  }

}


@media screen and (max-width: 480px) {
   .wpc-configurator {
      height: calc(100vh - 272px);
   }
   
   .admin-bar .wpc-configurator {
      height: calc(100vh - 318px);
   }

   .wpc-control-lists-inner,.wpc-sub-control.wpc-group-opened {
      width: calc(100% - 120px);
   }

  .haku-skin.wpc-has-summary .wpc-cart-form-wrapper [data-open-popup-id='cart-form-summary'] .wpc-summary-btn-icon {
      display: block;
   }

  .haku-skin.wpc-has-summary .wpc-cart-form-wrapper [data-open-popup-id='cart-form-summary'] .wpc-summary-btn-text {
      display: none;
   } 

   .wpc-control-lists-inner {
      width: 100%;
   }

   .wpc-parent-control .wpc-quote-form-parent-wrap {
      width: 100%;
      padding: 20px 0;
      text-align: center;
      margin: 0;
   }

   .wpc-sub-control.wpc-group-opened {
      bottom: 80px;
      width: 100%;
   }

   .wpc-sub-control.wpc-group-opened.wpc-current-opened-group {
      bottom: 164px;
   }

   .wpc-sub-control.wpc-current-opened-group .wpc-control-close {
      width: 40px;
   }

   .wpc-control-lists.wpc-sub-control.wpc-current-opened-group .wpc-control-lists-inner {
      padding-left: 40px;
   }

}

.wpc-flyin-wrap {
   z-index: 99;
}

.wpc-field-textfield input[type="text"], .wpc-field-textfield input[type="email"], .wpc-field-textfield input[type="url"], .wpc-field-textfield input[type="password"], .wpc-field-textfield input[type="search"], .wpc-field-textfield input[type="number"], .wpc-field-textfield input[type="tel"], .wpc-field-textfield input[type="range"], .wpc-field-textfield input[type="date"], .wpc-field-textfield input[type="month"], .wpc-field-textfield input[type="week"], .wpc-field-textfield input[type="time"], .wpc-field-textfield input[type="datetime"], .wpc-field-textfield input[type="datetime-local"], .wpc-field-textfield input[type="color"], .wpc-field-select, .wpc-field-textarea {
   min-width: 210px;
}

.wpc-custom-field-form input[type=checkbox] + label, .wpc-custom-field-form input[type=radio] + label {
   white-space: nowrap;
}

.wpc-field-textarea textarea {
   resize: none;
}

.wpc-haku-single-configurator .wpc-range-layer-input-wrap {
   margin-bottom: 0;
}

.wpc-haku-skin .wc-block-components-notice-banner {
   position: absolute;
   width: 50%;
   z-index: 9;
   margin: 0 auto !important;
   right: 0;
   left: 0;
}