/**
* 2007-2024 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2024 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/
:root {
    --theme-deafult: #ff4c3b;
    --theme-gradient1: #01effc;
    --theme-gradient2: #485ff2;
}

.btn-new {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.32px;
    padding: 12px 20px;
    border-radius: 2px;
    border: 1px solid #E0E0E0;
    background: #FFF;
    width: 100%;
    display: block;
    text-align: center;
}

.product-right p {
    margin-bottom: 0;
    line-height: 1.5em
}

.freqently {
    background: #FAFAFA;
    border: 1px solid #EBEBEB;
    padding: 15px 0 24px;
}

.freqently .product-title {
    font-size: 16px;
    line-height: 24px;
    text-transform: math-auto;
    color: #000;
    padding: 0 20px 15px;
    border-bottom: 1px solid #EBEBEB;
}

.freqently .bundle {
    padding: 0 20px;
}

.product-right .product-title {
    color: #222;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 0
}

.product-right .product-title span a {
    cursor: pointer
}

.product-right .border-product {
    padding-top: 15px;
    padding-bottom: 20px;
    border-top: 1px dashed #ddd
}

.product-right .border-product .timer-box .timer-p span {
    color: #222
}

.product-right .h2,.product-right h2 {
    text-transform: uppercase;
    margin-bottom: 15px;
    font-size: 25px;
    line-height: 1.2em
}

.product-right .h3,.product-right h3 {
    font-size: 26px;
    color: #222;
    margin-bottom: 15px
}

.product-right .h4,.product-right h4 {
    font-size: 16px;
    margin-bottom: 7px
}

.product-right .h4 del,.product-right h4 del {
    color: #777
}

.product-right .h4 span,.product-right h4 span {
    padding-left: 5px;
    color: var(--theme-deafult)
}

.product-right .color-variant {
    margin-bottom: 10px
}

.product-right .color-variant li {
    height: 30px;
    width: 30px!important;
    cursor: pointer
}

.product-right .product-buttons {
    margin-bottom: 20px
}

.product-right .product-buttons .btn-outline,.product-right .product-buttons .btn-solid {
    padding: 7px 25px
}

.product-right .product-buttons a:last-child,.product-right .product-buttons button:last-child {
    margin-left: 10px
}

.product-right .product-description .h6 span,.product-right .product-description h6 span {
    float: right
}

.product-right .product-description .qty-box {
    display: flex;
    align-items: center;
    margin-top: 10px
}

.product-right .product-description .qty-box .input-group {
    justify-content: unset;
    width: unset
}

.product-right .product-description .qty-box .input-group .form-control {
    border-right: none
}

.product-right .size-box {
    margin-top: 10px;
    margin-bottom: 10px
}

.product-right .size-box ul li {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid #f7f7f7;
    text-align: center
}

.product-right .size-box ul li a {
    color: #222;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.product-right .size-box ul li.active {
    background-color: #f7f7f7
}

.product-right .product-icon {
    display: flex
}

.product-right .product-icon .product-social {
    margin-top: 5px
}

.product-right .product-icon .product-social li {
    padding-right: 30px
}

.product-right .product-icon .product-social li a {
    color: #333;
    transition: all .3s ease
}

.product-right .product-icon .product-social li a i {
    font-size: 18px
}

.product-right .product-icon .product-social li a:hover {
    color: var(--theme-deafult)
}

.product-right .product-icon .product-social li:last-child {
    padding-right: 0
}

.product-right .product-icon .wishlist-btn {
    background-color: transparent;
    border: none
}

.product-right .product-icon .wishlist-btn i {
    border-left: 1px solid #ddd;
    font-size: 18px;
    padding-left: 10px;
    margin-left: 5px;
    transition: all .5s ease
}

.product-right .product-icon .wishlist-btn span {
    padding-left: 10px;
    font-size: 18px
}

.product-right .product-icon .wishlist-btn:hover i {
    color: var(--theme-deafult);
    transition: all .5s ease
}

.product-right .payment-card-bottom {
    margin-top: 10px
}

.product-right .payment-card-bottom ul li {
    padding-right: 10px
}

.product-right .timer {
    margin-top: 10px;
    background-color: #f7f7f7
}

.product-right .timer p {
    color: #222
}

.product-right.product-form-box {
    text-align: center;
    border: 1px solid #ddd;
    padding: 20px
}

.product-right.product-form-box .product-description .qty-box {
    margin-bottom: 5px
}

.product-right.product-form-box .product-description .qty-box .input-group {
    justify-content: center;
    width: 100%
}

.product-right.product-form-box .product-buttons {
    margin-bottom: 0
}

.product-right.product-form-box .timer {
    margin-bottom: 10px;
    text-align: left
}
.bundle .bundle_img {
    flex-direction: column;
    display: flex;
    gap: 8px;
}

.bundle .img-box {
    display: flex;
    flex: 1;
}

.bundle .bundle_img .img-box img {
    max-width: 58px;
    border: 1px solid #ebebeb;
}

.bundle .product-price {
    color: #1D1C1A;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.32px;
    margin-bottom: 0;
}

.bundle .product-info {
     color: #413F3D;
    font-size: 14px;
    letter-spacing: -.32px;
    padding: 0;
    padding-left: 15px;
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    justify-content: space-between;
}



.theme_checkbox label {
    display: flex;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    color: #413F3D;
    text-align: left;
    align-items: center;
    padding-left: 30px;
}

.theme_checkbox .price_product {
    font-weight: 500;
    color: #1D1C1A;
}

.theme_checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.theme_checkbox input:checked~.checkmark:after {
    display: block
}

.theme_checkbox .checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    transform: translateY(-50%);
}

.theme_checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.btn-solid {
    padding: 12px 30px;
    color: #1D1C1A;
    letter-spacing: .05em;
    background-color: white;
    width: 100%;
    border-radius: 0;
    border: 1px solid #E0E0E0;
    font-weight: 600;
    line-height: 24px;
}

.btn-solid:hover {
   background-color: #A88466;
   color: white
}

.btn-solid.black-btn {
    background-image: linear-gradient(30deg,#222 50%,transparent 0);
    border: 2px solid #222
}


.saving_price {
    display: inline-block; /* Ensure it behaves like an inline element but can have padding/margins */
    font-size: 14px; /* Adjust the font size */
    font-weight: bold; /* Make the text bold */
    color: #d9534f; /* Set a color for the savings, such as a red tone to indicate a discount */
    background-color: #f8d7da; /* Light red background for contrast */
    padding: 5px 10px; /* Add some padding for a nicer appearance */
    border-radius: 4px; /* Rounded corners */
    margin-left: 10px; /* Space between the price and savings message */
    border: 1px solid #f5c6cb; /* Optional: Border to define the area */
    transition: background-color 0.3s, transform 0.3s; /* Add transitions for hover effects */
}

.saving_price:hover {
    background-color: #f5c6cb; /* Change background on hover for interaction */
    transform: scale(1.05); /* Slightly increase size on hover for emphasis */
}


#attributeForm .bundle {
    padding: 20px; /* Add padding to the modal body */
    background-color: #f9f9f9; /* Light background for contrast */
    border-radius: 8px; /* Rounded corners for the modal */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

#attributeForm .product-actions {
    display: flex; /* Flexbox for better layout */
    justify-content: space-between; /* Space between image and attributes */
    align-items: flex-start; /* Align items at the start */
}

#attributeForm .bundle_img {
    flex: 0 0 40%; /* Set image width */
 /* Limit max width of the image */
    margin-right: 20px; /* Space between image and attributes */
}

#attributeForm .img-box {
    border: 1px solid #ddd; /* Light border around the image */
    border-radius: 4px; /* Rounded corners for the image box */
    overflow: hidden; /* Clip the image if it overflows */
    margin-right: 20px;

}

#attributeForm .img-fluid {
    width: 100%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
}

#attributeForm .product-variants {
    flex: 1; /* Take remaining space for product variants */
}

#attributeForm .product-variants-item {
    margin-bottom: 10px; /* Space between each variant */
    display: flex; /* Flexbox to align items in a row */
    align-items: center; /* Center items vertically */
}

#attributeForm .control-label {
    font-weight: bold; /* Bold label text */
    margin-right: 10px; /* Space between label and select */
    width: fit-content;

}

#attributeForm .form-control-select {
    width: 80%; /* Full width for the select element */
    padding: 8px; /* Padding for comfort */
    border: 1px solid #ccc; /* Border color */
    border-radius: 4px; /* Rounded corners */
    background-color: #fff; /* White background */
    transition: border-color 0.3s; /* Transition for focus effect */
}

#attributeForm .form-control-select:focus {
    border-color: #007bff; /* Change border color on focus */
    outline: none; /* Remove default outline */
}

#attributeForm #group_2 {
    list-style-type: none; /* Remove list bullets */
    padding: 0; /* Remove padding */
    display: flex; /* Flexbox for color options */
    gap: 10px; /* Space between color options */
}

#attributeForm .input-container {
    position: relative; /* Position for custom radio styling */
    display: flex; /* Align label and color circle in a row */
    align-items: center; /* Center items vertically */
    margin-right: 10px; /* Space between color options */
}

#attributeForm .input-color {
    display: none; /* Hide the default radio button */
}

#attributeForm .color {
    width: 15px; /* Fixed width for color circles */
    height: 15px; /* Fixed height for color circles */
    border: 2px solid #000; /* Border for the color circle */
    border-radius: 50%; /* Make it circular */
    cursor: pointer; /* Pointer on hover */
    transition: border-color 0.3s; /* Transition for border color */
}

#attributeForm .input-color:checked + .color {
    border-color: #007bff; /* Highlight selected color */
}

#attributeForm .input-container label {
    display: flex; /* Flexbox for better alignment */
    align-items: center; /* Center items vertically */
    cursor: pointer; /* Pointer on hover */
}

@media (max-width: 991px) {
    .bundle .bundle_img {
        justify-content: center;
    }
    .bundle .bundle_detail .theme_checkbox {
        padding: 0 20%;
    }
}

@media (max-width: 577px) {
.bundle .bundle_img .img-box img {
    max-width: 70px
}

.bundle .bundle_detail .theme_checkbox {
    padding: 0
}

}