/**
 * Frontend styles for Addons plugin.
 */

 .addons-wrapper {margin: 40px 0; padding: 30px 0; clear: both; }
 .addons-title {font-size: 28px; font-weight: 700; margin-bottom: 30px; color: #333; text-align: left; }
.addons-products {display: flex; flex-direction: column; row-gap: 10px; margin-top: 20px; }
.addon-product-item {display: flex; border: 1px solid #e5e5e5; border-radius: 12px; overflow: hidden; background: #fff; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.addon-product-item:hover {box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); border-color: #d0d0d0; }
.addon-product-image {max-height: 220px; overflow: hidden; background: #f8f8f8; display: flex; align-items: center; justify-content: center; flex: 0 0 110px; }
.addon-product-image img {width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; }
.addon-product-item:hover .addon-product-image img {transform: scale(1.03); }
.addon-product-content {padding: 20px; flex: 1; display: flex; } 
.addon-product-name {margin: 0 0 12px 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: #333; }
.addon-product-description {font-size: 14px; color: #666; line-height: 1.6; flex: 1; }
.addon-product-controls {display: flex; align-items: center; gap: 12px; }
.addon-quantity-selector {display: flex; align-items: center; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #fff; flex-shrink: 0; }
.addon-quantity-selector > strong {display: flex;}
.addon-qty-btn {width: 26px; height: 36px; border: none; background: #f5f5f5; color: #333; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.addon-qty-btn:hover {background: #e8e8e8; color: #000; } .addon-qty-btn:active {background: #ddd; } 
.addon-qty-input {width: 50px; height: 36px; border: none; text-align: center; font-size: 16px; font-weight: 600; color: #333; background: #fff; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.addon-qty-input::-webkit-outer-spin-button,
.addon-qty-input::-webkit-inner-spin-button {-webkit-appearance: none; appearance: none; margin: 0; }
.addon-show-quantity-button,
.addon-add-button {flex: 1; padding: 10px 20px; background: #333; color: #fff; text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; text-align: center; display: inline-block; min-height: 36px; line-height: 1.4; width: 103px; }
.addon-show-quantity-button:hover,
.addon-add-button:hover {background: #000; color: #fff; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } 
.addon-show-quantity-button:active,
.addon-add-button:active {transform: translateY(0); }
.addon-add-button:disabled {opacity: 0.5; cursor: not-allowed; transform: none; }

/* Disabled state for main product add to cart button */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled {opacity: 0.5; cursor: not-allowed; pointer-events: none; background: #ccc !important; color: #666 !important; }
.single_add_to_cart_button.disabled:hover,
.single_add_to_cart_button:disabled:hover {transform: none; box-shadow: none; background: #ccc !important; }

/* Hide main product price when bundle products exist */
body.has-addons-bundle-products.single-product .summary .price,
body.has-addons-bundle-products.single-product .summary .woocommerce-Price-amount,
body.has-addons-bundle-products.single-product .summary p.price,
body.has-addons-bundle-products.single-product .summary .woocommerce-price,
body.has-addons-bundle-products.single-product .summary .price-wrapper,
body.has-addons-bundle-products.single-product .summary .product-price,
body.has-addons-bundle-products.single-product .entry-summary .price,
body.has-addons-bundle-products.single-product .entry-summary .woocommerce-Price-amount,
body.has-addons-bundle-products.single-product .entry-summary p.price,
body.has-addons-bundle-products .single-product .summary .price,
body.has-addons-bundle-products .single-product .summary .woocommerce-Price-amount,
body.has-addons-bundle-products .single-product .summary p.price {display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }

/* Hide main product quantity field when bundle products exist */
body.has-addons-bundle-products.single-product .summary .quantity,
body.has-addons-bundle-products.single-product .summary form.cart .quantity,
body.has-addons-bundle-products.single-product .entry-summary .quantity,
body.has-addons-bundle-products.single-product .entry-summary form.cart .quantity,
body.has-addons-bundle-products .single-product .summary .quantity,
body.has-addons-bundle-products .single-product .summary form.cart .quantity {display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }


/* Responsive styles */
@media (max-width: 768px) {
    .addons-products {grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
    .addon-product-image {height: 180px; }
    .addons-title {font-size: 24px; }
}

@media (max-width: 480px) {
    .addons-products {grid-template-columns: 1fr; gap: 15px; }
    .addons-title {font-size: 22px; margin-bottom: 20px; }
    .addon-product-image {height: 200px; }
    .addon-product-controls {flex-direction: column; width: 100%; }
    .addon-quantity-selector { justify-content: start; }
    .addon-add-button {width: 100%; }
}

/* Progress Bar Styles */
.addons-progress-bar-wrapper {margin: 30px 0; padding: 20px; background: #f5f5f5; border-radius: 12px; }
.addons-progress-container {position: relative; width: 100%; }
.addons-progress-line {position: relative; width: 100%; height: 3px; background: #e0e0e0; border-radius: 2px; margin: 50px 0 30px 0; }
.addons-progress-fill {position: absolute; top: 0; left: 0; height: 100%; background: #0D4031; border-radius: 2px; transition: width 0.3s ease; }
.addons-progress-options {display: flex; justify-content: space-between; position: relative; width: 100%; margin-top: -76px; }
.addons-progress-option {position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: all 0.3s ease; }
.addons-progress-dot {width: 16px; height: 16px; border-radius: 50%; background: #e0e0e0; border: 3px solid #fff; position: absolute; top: 35px; left: 50%; transform: translateX(-50%); transition: all 0.3s ease; z-index: 2; }
.addons-progress-option.addons-progress-active .addons-progress-dot,
.addons-progress-option.addons-progress-reached .addons-progress-dot {background: #0D4031; border-color: #fff; box-shadow: 0 0 0 3px rgb(13 64 49 / 31%); }
.addons-progress-label {font-size: 16px; font-weight: 700; color: #333; margin-bottom: 8px; position: relative; top: 0px; }
.addons-progress-price {font-size: 14px; color: #666; position: relative; top: 0px; transition: color 0.3s ease; }
.addons-progress-option.addons-progress-active .addons-progress-price {color: #6B46C1; font-weight: 600; }
.addons-progress-best-deal {position: relative; }
.addons-best-deal-badge {position: absolute; top: -27px; right: -10px; background: #dc2626; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; transform: rotate(12deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); z-index: 3; }


/* Responsive progress bar */
@media (max-width: 768px) {
    .addons-progress-bar-wrapper {padding: 15px; }
    .addons-progress-label {font-size: 14px; }
    .addons-progress-price {font-size: 12px; }
    .addons-best-deal-badge {font-size: 10px; padding: 3px 6px; top: -70px; }
}

/* .wc-block-components-product-price__regular{
    display: none !important;
} */

/* ----------- Single product Addons Section ------------  */
.addons-wrapper .addons-title {font: 900 18px/26px 'filsonpro-bold'; color: #000; margin-bottom: -17px;}
.addons-wrapper .addons-progress-bar-wrapper {padding: 10px 10px 15px;}
.addons-wrapper .addons-progress-bar-wrapper .addons-progress-option .addons-progress-label {font: normal 14px/26px 'filsonpro-bold'; color: #000; margin-bottom: 35px; text-transform: capitalize;}
.addons-wrapper .addons-progress-bar-wrapper .addons-progress-option .addons-progress-dot {background: #fff; border: 2px solid #D9D9D9; width: 18px; height: 18px;}
.addons-wrapper .addons-progress-bar-wrapper .addons-progress-option .addons-progress-price {font: normal 14px/26px 'filsonpro-regular'; color: #888795;}

.addons-wrapper .addons-products {display: block; overflow-y: scroll; max-height: 650px; padding-right: 15px; }
.addons-wrapper .addons-products .addon-product-item {margin-bottom: 10px; border: 1px solid #F4F4F4;}
.addons-wrapper .addons-products .addon-product-item .addon-product-content {justify-content: space-between; align-items: center; flex-wrap: wrap; row-gap: 13px;}
.addons-wrapper .addons-products .addon-product-item .addon-product-content .addon-product-info {flex: 0 0 390px;}
.addons-wrapper .addons-products .addon-product-item .addon-product-content .addon-product-info .addon-product-name {font: normal 16px/16px 'filsonpro-bold'; color: #000; margin-bottom: 8px;}
.addons-wrapper .addons-products .addon-product-item .addon-product-content .addon-product-info .addon-product-description {font: normal 14px/19px 'filsonpro-regular'; color: #000;}

.addons-wrapper .addon-show-quantity-button, 
.addons-wrapper .addon-add-button {background: #0D4031; border-radius: 50px; font: normal 16px/16px 'filsonpro-bold'; color: #fff; padding: 11px 20px;}
.addons-wrapper .addon-show-quantity-button:hover, 
.addons-wrapper .addon-add-button:hover {background: #402B23;}





@media screen and (max-width: 1299px){
}

@media screen and (max-width: 1199px){
}

@media screen and (max-width: 1024px){
	
}

@media screen and (max-width: 991px){

}

@media screen and (max-width: 767px){

	.addons-wrapper .addon-product-image {height: 170px;}
	.addons-wrapper .addons-products .addon-product-item .addon-product-content {row-gap: 5px;}
	.addons-wrapper .addons-products .addon-product-item .addon-product-content .addon-product-info {flex: 0 0 100%;}
	.addons-wrapper .addons-products .addon-product-item .addon-product-controls {align-items: flex-start;}

}

@media screen and (max-width: 575px){

}

@media screen and (max-width: 400px){
}