/* ============= general-css ============= */
:root {
    --primary-color: #88D2D9;
    --secondary-color: #b79752;
    --dark-grey-color: #495057;
    --dark-grey-hover-color: #747474;
    --input-field-bg-color: #f3f3f3;
    --box-shadow-color: #e4e4e4;
    --disabled-color: #c2c2c2;
}

.wcbb__page-title {
    text-align: center;
}


/* filter-css */
#items__filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding-bottom: 20px;
    margin-bottom: 35px;
    border-bottom: 1px solid var(--box-shadow-color);
}

.wcbb__filter--wrapper select {
    flex: 1 1 calc(25% - 15px);
    background: var(--input-field-bg-color);
    border: 0 none;
    height: 55px;
    width: 100%;
    padding: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.item__filter-button {
    display: none;
}

.no-item--wrapper {
    flex: 1 1 100%;
}

.no-item--wrapper p {
    font-size: 20px;
    color: var(--primary-color);
    text-align: center;
}

@media ( max-width: 425px ) {
    .wcbb__filter--wrapper select {
        flex: 1 1 100%;
    }
}

/* step-nav-css */
.wcbb__page .wcbb__steps--wrapper {
    justify-content: center;
    margin-bottom: 50px;
    border-bottom: 1px solid var(--box-shadow-color);
}

.wcbb__steps--wrapper li{
    position: relative;
    padding: 20px 30px;
}

.wcbb__steps--wrapper li a {
    color: var(--dark-grey-color);
}

.wcbb__steps--wrapper li a:after{
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--dark-grey-color);
    background: var(--input-field-bg-color);
    color: var(--dark-grey-color);
    border-radius: 50px;
    transition: 0.3s all ease-in-out;
}

.wcbb__steps--wrapper li a.disabled {
    color: var(--disabled-color);
}

.wcbb__steps--wrapper li a.disabled:after {
    border: 2px solid var(--box-shadow-color);
    color: var(--box-shadow-color);
}

.wcbb__steps--wrapper li a.active {
    color: var(--primary-color);
}

.wcbb__steps--wrapper li a.active:after {
    background: var(--primary-color);
    width: 25px;
    height: 25px;
    bottom: -12px;
    border-color: var(--dark-grey-hover-color);
}

@media (max-width: 475px) {
    .wcbb__page .wcbb__steps--wrapper {
        flex-wrap: nowrap;
    }

    .wcbb__steps--wrapper li {
        padding: 10px 10px 20px;
    }
}

/* step-content-css */
.wcbb__tab-content {
    text-align: center;
}

.wcbb__step-desc {
    max-width: 900px;
    margin: auto;
}

.wcbb__steps-items--wrapper {
    margin: 50px;
}

.wcbb__page .wcbb-button {
    min-width: 100px;
    height: 55px;
    padding: 15px;
    background: var(--dark-grey-color);
    color: white;
    border: 0 none;
    font-size: 18px;
    font-weight: 400;
    border-radius: 3px;
    transition: 0.3s all ease-in-out;
}

.wcbb__page .wcbb-button:hover {
    background-color: var(--dark-grey-hover-color);
    color: white;
}

.wcbb__page .wcbb-button.disabled {
    background: var(--disabled-color);
    color: var(--dark-grey-hover-color);
    pointer-events: none;
}

.product-img--wrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

.product-img--wrapper img {
    transition: 0.3s all ease-in-out;
}

.product-img--wrapper .product-img {
    height: 300px;
	margin: 0 auto;
	object-fit: contain;
	display: block;
}

.product-img--wrapper:hover img {
    transform: scale(1.1);
}

.product-status-ribbon {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 0;
    padding: 0 10px;
    font-size: 20px;
    text-align: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    color: var(--secondary-color);
}

.product-brand--wrapper h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark-grey-color);
}

.product-title--wrapper h4 {
    font-size: 18px;
    font-weight: 400;
    color: var(--dark-grey-color);
}

.product-price--wrapper p {
    font-size: 18px;
    font-weight: 400;
    color: var(--secondary-color);
}

@media (max-width: 767px) {
    .wcbb__steps-items--wrapper {
        margin: 30px 0;
    }

    .wcbb__page .wcbb-button {
        height: 40px;
        padding: 0 15px;
    }
}


/* ============= choose-box-css ============= */
.wcbb-products-box__listing--wrapper {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 15px;
    text-align: left;
    justify-content: space-evenly;
}

.product-box--wrapper {
    flex: 0 1 calc(30% - 20px);
}

.product-box--wrapper.sold-out {
    pointer-events: none;
    position: relative;
}

.product-box--wrapper:hover {
    cursor: pointer;
}

.product-box--wrapper.sold-out .product-img--wrapper:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #aeaeae5d;
}

@media (max-width: 425px) {
    .product-box--wrapper {
        flex: 0 1 100%;
    }
}


/* ============= choose-items-css ============= */
.wcbb-basket__display-table--wrapper {
    margin: 30px 0;
}

.wcbb__box-size-choice--row {
    display: flex;
    flex-wrap: wrap;
}

.box-size {
    flex: 1 1 33.33%;
}

@media (max-width: 600px) {
    .box-size {
        flex: 1 1 100%;
    }   
}

.box-size .wcbb-basket__button {
    background: var(--input-field-bg-color);
    width: 100%;
    height: 100%;
    border: 0;
    padding: 10px;
    transition: 0.3s all ease-in-out;
}

.box-size .wcbb-basket__button.selected {
    background: var(--secondary-color);
    color: white;
}

.row.wcbb__item-basket--row {
    border: 1px solid var(--box-shadow-color);    
    margin: 0;
}

.wcbb__page .item-basket__slots--col{
    padding: 15px 5px;
    border-right: 1px solid var(--box-shadow-color);
}

.item-basket__info--col {
    padding: 15px 10px;
}

.item-basket__slots-listing {
    display: flex;
    list-style: none;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
}

.item-basket__slots-listing li {
    flex: 0 1 25%;
    gap: 10px;
    position: relative;
}

.content .item-basket__slots-listing img, .item-basket__slots-listing img {
    max-width: 120px;
}

.item-slot .remove {
    position: absolute;
    top: 0;
    left: 5px;
    color: red;
    border: 1px solid red;
    border-radius: 100px;
    padding: 2px 6px;
    line-height: 1;
    transition: 0.3s all ease-in-out;
    cursor: pointer;
}

.item-slot .remove:hover {
    color: white;
    background: red;
}

.item-basket__slot-wrapper .item-qty {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    padding: 3px 0;
    background-color: white;
    border: 1px solid var(--dark-grey-color);
    border-radius: 100px;
    line-height: 1;
}

.basket__remaining-slot--wrapper {
    border-top: 1px solid var(--box-shadow-color);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.remaining-slot--display {
    margin: 20px 0;
}

.slot-alert, .item-stock-alert {
    display: none;
    color: red;
}

.items-info--isting {
    list-style: none;
    padding: 0;
}

.items__list-title {
    font-weight: 600;
}

.item-info--wrapper {
    display: flex;
    text-align: left;
}

.item-info--wrapper .item-name {
    flex: 3 3 calc(60% - 25px);
}

.item-info--wrapper .item-qty {
    flex: 0 1 25px;
    padding: 0 5px;
}

.item-info--wrapper .price {
    flex: 1 1 10%;
    text-align: end;
}

.item-info--wrapper .action, .item-info--wrapper .remove {
    flex: 1 1 25px;
    text-align: end;
}

.item-info--wrapper .remove {
    cursor: pointer;
}

.item-info--wrapper .remove:hover {
    color: red;
}

.items__list-info--inner-row {
    border-bottom: 1px solid var(--box-shadow-color);
    margin-bottom: 20px;
}

.subtotal-label {
    font-weight: 600;
}

.wcbb__page .wcbb-confirm-items {
    width: 100%;
}

.wcbb-items__listing--wrapper {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.product-item--wrapper {
    flex: 0 1 calc(25% - 20px);
    position: relative;
    text-align: left;
}

.product-item--wrapper.sold-out {
    pointer-events: none;
    position: relative;
}

.product-item--wrapper:hover {
    cursor: pointer;
}

@media (min-width: 1200px) {
    .product-item__info--wrapper {
        min-height: 370px;
    }
}

@media (max-width: 1199px) { 
    .product-item__info--wrapper {
        min-height: 325px;
    }
}

.product-item--wrapper.sold-out .product-img--wrapper:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #aeaeae5d;
}

.product-item--wrapper .product-add-button__wrapper {
    position: sticky;
    width: 100%;
    top: 100%;
    margin: 15px auto 0;
    text-align: center;
}

.product-item--wrapper .wcbb-button {
    width: 100%;
    padding: 3px 6px;
    height: 35px;
}

.modal-add-button__wrapper {
    max-width: 280px;
}

.product-item--wrapper .qty-button--wrapper, .modal-add-button__wrapper .qty-button--wrapper {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
}

.product-item--wrapper .qty-button {
    flex: 1 1 25%;
    min-width: auto;
}
.modal-add-button__wrapper .qty-button {
    flex: 0 1 35px;
    min-width: auto;
}

.product-item--wrapper .wcbb__item-qty-input {
    flex: 1 1 50%;
    max-height: 35px;
    text-align: center;
    pointer-events: none;
}
.modal-add-button__wrapper .wcbb__item-qty-input {
    flex: 0 1 55px;
    max-height: 35px;
    text-align: center;
    pointer-events: none;
}

.product-item--wrapper .wcbb__item-qty-input::-webkit-outer-spin-button, .product-item--wrapper .wcbb__item-qty-input::-webkit-inner-spin-button,
.modal-add-button__wrapper .wcbb__item-qty-input::-webkit-outer-spin-button, .modal-add-button__wrapper .wcbb__item-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.product-item--wrapper input[type=number], .modal-add-button__wrapper input[type=number] {
    -moz-appearance: textfield;
} 

@media (max-width: 991px) {
    .product-item__info--wrapper {
        min-height: auto;
    }
    
    .item-basket__slots-listing li {
        flex: 0 1 auto;
    }
        
    .product-item--wrapper .qty-button, .modal-add-button__wrapper .qty-button {
        flex: 1 1 40px;
    }

    .product-item--wrapper .wcbb__item-qty-input, .modal-add-button__wrapper .wcbb__item-qty-input {
        flex: 1 1 calc(100% - 90px);
    }
    
}

@media (max-width: 767px) {
    .product-item--wrapper {
        flex: 0 1 calc(50% - 20px);
        margin-bottom: 50px;
    }

    .basket__remaining-slot--wrapper {
        position: relative;
        border-bottom: 1px solid var(--box-shadow-color);
    }
    
}

@media (max-width: 425px) {
    .wcbb-items__listing--wrapper {
        gap: 14px;
    }
    
    .product-item--wrapper {
        flex: 0 1 calc(50% - 7px);
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--box-shadow-color);
    }
    
    .product-title--wrapper h4 {
        font-size: 18px;
    }
    
    .product-item--wrapper .qty-button, .modal-add-button__wrapper .qty-button {
        flex: 1 1 0px;
    }
}


/* ============= card-message-css ============= */
.wcbb-cards__listing--wrapper {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.product-card--wrapper {
    flex: 0 1 calc(25% - 20px);
}

.product-card--wrapper.sold-out {
    pointer-events: none;
    position: relative;
}

.product-card--wrapper.selected {
    border: 3px solid var(--primary-color);
}

.product-card--wrapper:hover {
    cursor: pointer;
}

.product-card--wrapper.sold-out .product-img--wrapper:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #6458585d;
}

.selected-ribbon {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    padding: 3px 10px;
    background: white;
    color: var(--primary-color);
    border: 5px solid var(--primary-color);
    border-radius: 100px;
}

.product-card--wrapper.selected .selected-ribbon {
    display: block;
}

@media (max-width: 767px) {
    .product-card--wrapper {
        flex: 0 1 calc(50% - 8px);
    }
}

@media (max-width: 425px) {
    .product-card--wrapper {
        flex: 0 1 100%;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--box-shadow-color);
    }
}

/* ============= finishing-css ============= */
.wcbb__prep-status {
    margin: 45px;
}

.wcbb__prep-status i.fa-check {
    color: #34a348;
    border: 2px solid #34a348;
    border-radius: 100px;
    font-size: 30px;
    padding: 15px;
}

.wcbb__page .wcbb__view-cart, .wcbb__page .wcbb__build-new {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 18px auto;
    color: white;
}


/* ============= Item-popup-css ============= */
#product__detail-modal .modal-dialog {
    max-width: 967px;
}

.modal__product-attribute--wrapper, .item-attribute--wrapper, .modal__product-weight--wrapper {
    margin-bottom: 15px;
}

.modal__product-brand {
    font-size: 16px;
}

.modal__product-title {
    font-weight: 700;
    font-size: 16px;
}

.modal__product-price p {
    font-size: 16px;
    font-weight: 400;
    color: var(--secondary-color);
}

.modal__product-excerpt, .item-detail__value--wrapper {
    font-size: 14px;
}

.item-detail__label--wrapper {
    font-weight: 600;
    font-size: 14px;
}

#product__detail-modal .slick-initialized .slick-track {
    display: flex;
}

#product__detail-modal .slick-initialized .slick-track .slick-slide {
    align-self: center;
    margin: 0 15px;
}

#product__detail-modal .slick-initialized img {
    width: 100% !important;
    height: auto;
    margin: auto;
}

.slick-initialized .slick-prev:before, .slick-initialized .slick-next:before {
    color: var(--secondary-color);
    font-family: 'fontawesome';
    font-size: 18px;
    border: 3px solid;
    border-radius: 100px;
    padding: 5px;
}

.slick-initialized .slick-prev:before {
    content: '\f060'
}

.slick-initialized .slick-next:before {
    content: '\f061'
}

.modal__product-detail--wrapper .item-stock-alert {
    text-align: center;
}

@media (max-width: 767px) {
    #product__detail-modal .slick-initialized img {
        max-width: 250px;
    }
}


/* ============= pagination-css ============= */
.items-pagination--wrapper {
    margin-top: 50px;
    text-align: center;
}

.items-pagination--wrapper .page-numbers:not(.current) {
	border: 0;
}

.items-pagination--wrappers .current.page-numbers {
	margin: 0 5px;
	padding: 10px 15px;
	min-width: 20px;
	background: var(--secondary-color);
	color: white;
}

.items-pagination--wrapper .page-numbers {
    display: inline-block;
	margin: 0 5px;
	padding: 10px 15px;
	min-width: 20px;
	color: var(--secondary-color);
	transition: 0.2s all ease-in-out;
}

.items-pagination--wrapper span.page-numbers.current, .items-pagination--wrapper a.page-numbers:hover {
	background: var(--secondary-color);
	color: white;
}

@media (max-width: 767px) {
    .items-pagination--wrapper {
        margin-bottom: 30px;
    }
    
}