/**
 * NOTICE OF LICENSE
 *
 * This source code is subject to a commercial license from ECOM360AI S.L.
 * Use, copy, modification or distribution of this source file without written
 * license agreement from ECOM360AI S.L. is strictly forbidden.
 *
 * @author    PrestaImport
 * @copyright prestaimport.com - ECOM360AI S.L. all rights reserved.
 * @license   Commercial license
 *            https://prestaimport.com/licenses/prestaimport-license_es.pdf
 *            https://prestaimport.com/licenses/prestaimport-license_en.pdf
 */

/* Paleta de colores: https://colorhunt.co/palette/363062435585818fb4f5e8c7 */

.bestPrice span {
    font-size: 1.2857142857rem;
    font-style: normal;
    font-weight: bold;
    text-transform: none;
}

#form-display-custom-option-product,
.lef-section {
    padding: 0;
}

#container-productcustomization {
    margin-top: 20px;
}

.lef-section {
    margin-top: 0.5rem;
}

#container-nocustom,
#container-color,
#container-customization,
#container-position,
#container-techniqueandcolor,
#container-widthandheight,
#container-quantity,
#container-virtualsample,
#container-fileAttachment {
    display: grid;
    grid-template-columns: 5% 95%;
    align-items: center;
    margin-bottom: 5px;
}

#container-nocustom .container-nocustom_subtitle,
#container-color .container-color_subtitle,
#container-position .container-position_subtitle,
#container-techniqueandcolor .container-techniqueandcolor_subtitle,
#container-widthandheight .container-widthandheight_subtitle,
#container-quantity .container-quantity_subtitle,
#container-virtualsample .container-virtualsample_subtitle,
#container-fileAttachment .container-fileAttachment_subtitle {
    background-color: var(--styles_step_background_color);
    border-radius: 5px;
    grid-column: 2 / 3;
    grid-row: 1;
    display: flex;
    align-items: center;
}

#container-colors,
#container-positions,
#container-techniqueandcolors,
#container-widthandheights,
#container-quantities,
#container-virtualsamples,
#container-fileAttachments {
    grid-column: 2 / 3;
    margin: 2px 0 0;
}

#container-nocustom .container-nocustom_subtitle,
#container-color .container-color_subtitle .container-color_title,
#container-position .container-position_subtitle .container-position_title,
#container-techniqueandcolor .container-techniqueandcolor_subtitle .container-techniqueandcolor_title,
#container-widthandheight .container-widthandheight_subtitle .container-widthandheight_title,
#container-quantity .container-quantity_subtitle .container-quantity_title,
#container-virtualsample .container-virtualsample_subtitle .container-virtualsample_title,
#container-fileAttachment .container-fileAttachment_subtitle .container-fileAttachment_title {

    border-radius: 4px;
    color: var(--styles_step_text_color);
    font-size: 14px;
    padding: 5px 10px;
    margin-right: 5px;
    text-decoration: none;
}


#container-nocustom .container-nocustom_subtitle,
#container-color .container-color_subtitle.complete .container-color_title,
#container-position .container-position_subtitle.complete .container-position_title,
#container-techniqueandcolor .container-techniqueandcolor_subtitle.complete .container-techniqueandcolor_title,
#container-widthandheight .container-widthandheight_subtitle.complete .container-widthandheight_title,
#container-quantity .container-quantity_subtitle.complete .container-quantity_title,
#container-virtualsample .container-virtualsample_subtitle.complete .container-virtualsample_title,
#container-fileAttachment .container-fileAttachment_subtitle.complete .container-fileAttachment_title {
    color: var(--styles_completed_step_text_color) !important;
}


#container-color .container-color_subtitle .number-option,
#container-position .container-position_subtitle .number-option,
#container-techniqueandcolor .container-techniqueandcolor_subtitle .number-option,
#container-widthandheight .container-widthandheight_subtitle .number-option,
#container-quantity .container-quantity_subtitle .number-option,
#container-virtualsample .container-virtualsample_subtitle .number-option,
#container-fileAttachment .container-fileAttachment_subtitle .number-option {
    border-radius: 4px;
    color: var(--styles_number_option_text_color);
    font-size: 14px;
    padding: 5px 10px;
    margin-right: 5px;
    text-decoration: none;
}

.container-color_subtitle .number-option,
.container-position_subtitle .number-option,
.container-techniqueandcolor_subtitle .number-option,
.container-widthandheight_subtitle .number-option,
.container-quantity_subtitle .number-option,
.container-virtualsample_subtitle .number-option,
.container-fileAttachment_subtitle .number-option {
    font-weight: bold;
}

.container-color_subtitle .container-color_title,
.container-position_subtitle .container-position_title,
.container-techniqueandcolor_subtitle .container-techniqueandcolor_title,
.container-widthandheight_subtitle .container-widthandheight_title,
.container-quantity_subtitle .container-quantity_title,
.container-virtualsample_subtitle .container-virtualsample_title,
.container-fileAttachment_subtitle .container-fileAttachment_title {
    display: inline-block;
}

/* Desactiva el evento del cursor */
#container-position .step-disabled,
#container-techniqueandcolor .step-disabled,
#container-widthandheight .step-disabled,
#container-virtualsample .step-disabled,
#container-fileAttachment .step-disabled {
    pointer-events: none;
    cursor: not-allowed;
    background-color: #E0E0E0;
}

#container-position .step-disabled a,
#container-position .step-disabled span,
#container-techniqueandcolor .step-disabled a,
#container-techniqueandcolor .step-disabled span,
#container-widthandheight .step-disabled a,
#container-widthandheight .step-disabled span,
#container-virtualsample .step-disabled a,
#container-virtualsample .step-disabled span,
#container-fileAttachment .step-disabled a,
#container-fileAttachment .step-disabled span {
    pointer-events: none;
    cursor: not-allowed;
    color: #707070 !important;
}

/* Oculta los pasos de personalización */
#container-position .step-none,
#container-techniqueandcolor .step-none,
#container-widthandheight .step-none,
#container-virtualsample .step-none,
#container-fileAttachment .step-none {
    display: none;
}

#container-colors {
    border: 1px solid #737373;
    border-radius: 5px;
    padding: 5px;
    justify-content: space-between;
    text-align: center;
}

#container-colors ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style-type: none;
}

#container-colors li {
    margin-right: 0.6rem;
    width: 3.2rem;
}

.product-variants #container-colors .color {
    border-radius: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
    margin: auto;
    position: relative;
}

.product-variants #container-colors .input-color~.tooltip-text {
    visibility: hidden;
    background-color: gray;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    white-space: nowrap;
}

.product-variants #container-colors .input-color:hover~.tooltip-text {
    visibility: visible;
}

#container-colors .color-name,
#container-colors .color-quantity {
    display: block;
}

#container-colors .color-quantity,
#container-quantities .container-sizes .product-size_item .available-stock {
    color: #008000;
    font-size: 9px;
    font-weight: 700;
}

#container-colors .color-quantity {
    min-height: 21px;
}

#container-positions .position-wrapper {
    border: 1px solid #737373;
    border-radius: 5px;
    padding: 5px;
    justify-content: space-between;
}


#customQuantity {
    font-size: 9px;
}

#container-positions .container-customization_options {
    margin: 10px 0 5px 0;
    display: flex;
    justify-content: space-between;
}

#container-textcustom {
    padding: 5px;
}

#container-quantities .per-radio.hidden {
    display: none;
}

.text-hidden {
    display: none;
}

#container-textcustom .text-custom {
    margin-left: 5%;
}

#container-textcustom .text-custom,
#container-positions .container-customization_options .text-continue {
    color: #00b900;
    text-decoration: underline;
    font-weight: bold;
}

#container-positions .container-customization_options .text-notcustom {
    color: #C21A21;
    text-decoration: underline;
    font-weight: bold;
}

.list-position {
    overflow-y: auto;
}

.list-position {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style-type: none;
    gap: 5px;
}

#container-position .list-position .input-container {
    border: 1px solid #737373;
    margin: 1px;
    padding: 5px;
}

.position-checked {
    border: 1px solid #C21A21 !important;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}

#container-position .list-position .input-container label {
    width: 100%;
}

#container-position .list-position .input-container .position-name {
    text-align: center;
}

#container-position .list-position .input-position {
    appearance: none;
}

.position-item {
    display: inline-block;
    width: 6.25rem;
    height: 6.25rem;
    background-size: contain;
    background-position: center;
}

ul.list-position li.input-container label {
    width: 6.25rem;
}

ul.list-position li.input-container label:hover {
    cursor: pointer;
}

#container-techniqueandcolors {
    border: 1px solid #737373;
    border-radius: 5px;
    padding: 5px;
}

#container-techniqueandcolors .list-techniques_container>ul {
    display: flex;
    flex-direction: column;
}

#container-techniqueandcolors .list-techniques_container>ul li {
    padding: 5px;
    border-bottom: 1px solid #D9D9D9;
}

#container-techniqueandcolors .list-techniques_container>ul label {
    display: flex;
    margin: 0;
}

#container-techniqueandcolors.list-techniques_container>ul label input {
    margin-right: 5px;
}

#container-techniqueandcolors .toggle-subtitle,
#container-techniqueandcolors .toggle-subtitle:hover {
    text-decoration: none;
    font-size: 9px;
    font-weight: 600;
    color: black;
    opacity: 0.8;
    cursor: default;
}

#container-techniqueandcolors .toggle-subtitle,
#container-techniqueandcolors .toggle-subtitle:hover {
    text-decoration: none;
    font-size: 9px;
    font-weight: 600;
    color: black;
    opacity: 0.8;
    cursor: default;
}

#container-techniqueandcolors .row {
    margin: 5px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

#container-techniqueandcolors .row .col-md-8,
#container-techniqueandcolors .row .col-md-4 {
    padding: 0;
}

#container-techniqueandcolors .form-group {
    margin: 0
}

#container-techniqueandcolors select {
    padding: 5px 7px;
    border-radius: 4px;
    background-color: #fff;
    height: auto;
}

/* TOOLTIP imitar title en móvil */
.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-container[data-title]:hover:after {
    content: attr(data-title);
    position: absolute;
    bottom: 100%;
    /* Ajusta para posicionar sobre el elemento */
    left: 50%;
    transform: translateX(-50%);
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 3px;
    white-space: normal;
    /* Permite el salto de línea */
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
    visibility: hidden;
    max-width: 300px;
    /* Ajusta el ancho máximo según sea necesario */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    /* Añade una sombra para mejor visibilidad */
}

.tooltip-container[data-title]:hover:after {
    visibility: visible;
    opacity: 1;
}

#container-widthandheights {
    border: 1px solid #737373;
    border-radius: 5px;
    padding: 5px;
}

#container-quantities {
    border: 1px solid #737373;
    border-radius: 5px;
    padding: 5px;
}

#container-quantities .per-radio {
    margin: 0;
    display: grid;
    grid-template-columns: 40% 35% 25%;
    border-bottom: 1px solid #D9D9D9;
    padding: 5px 0px;
    align-items: center;
    height: 30px;
}

#container-quantities .form-check-label {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 3px;
}

#container-quantities .form-check-input {
    position: static;
    margin: 0;
}

#container-quantities div:nth-last-child(-n+1) {
    grid-template-columns: repeat(2, 50%);
}

#container-quantities .container-sizes {
    grid-template-columns: 60% 40%;
}

#container-quantities .container-sizes .product-variants-size {
    border: none;
}

#container-quantities div:last-child {
    border-bottom: none;
}

#container-quantities .descpercentage:not(.cantidad-minima) {
    color: #259559;
}

#container-quantities .cantidad-minima {
    font-weight: 600;
    font-style: normal;
    font-size: 11px;
}

#container-quantities div>span:nth-child(3) {
    justify-self: center;
    font-weight: 400;
    color: #259559;
}

#container-quantities div>span:last-child {
    justify-self: end;
    font-weight: 600;
    font-size: 11px;
}

/*
* Cantidad y tallas
*/

#container-quantities .product-variants-size {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-bottom: 10px;
}

#container-quantities .tallas-column {
    margin-left: 5px;
}

#container-quantities .container-sizes .product-size_item>label,
#container-quantities .container-sizes .product-size_item>input {
    margin: 0;
}

#container-quantities .container-sizes .product-size_item>label {
    width: 25px;
    text-align: left;
}

#container-quantities .container-sizes .product-size_item>input {
    border-radius: 2px;
    border: 1px solid #737373;
    height: 25px;
    font-size: 13px;
    text-align: right;
    padding: 5px;
}

#container-quantities .container-sizes .product-size_item .available-stock {
    text-align: right;
}

#container-quantities .container-sizes .product-size_item p.not-stock,
#container-colors .not-stock {
    color: #C21A21;
}

#container-quantities .container-sizes .product-size_item .input-no-stock {
    background-color: #e9e9e9;
    cursor: not-allowed;
}

#container-quantities .container-sizes .product-size_item .value-error {
    border: 2px solid #ff0000;
}

#container-quantities .quantity-not-available {
    cursor: not-allowed;
}

#container-quantities .minimal-quantity-textil {
    font-weight: bold;
}

#container-quantities .container-quantity_selected {
    display: flex;
    flex-direction: column;
    border: none;
}

#container-quantities div.form-check.per-radio.radio-talla {
    display: none;
}

#container-quantities .container-quantity_selected .msg-quantity {
    display: flex;
    border: none;
    padding: 0;
}

#container-quantities .container-quantity_selected .msg-quantity .quantity-selected {
    margin-left: 10px;
}

#container-quantities .container-quantity_selected .quantity.confirm {
    background: #F5E8C7;
    color: #000;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 6px 0;
    padding: 8px;
    border-radius: 25px;
    font-size: 15px;
    width: 50%;
}

#container-quantities .container-quantity_selected .quantity.confirm:hover {
    background: #435585;
    color: #fff;
}

#container-quantities .container-quantity_selected .msg-quantity-error {
    display: block;
    color: #C21A21;
    border-radius: 5px;
    background: rgba(225, 37, 27, 0.05);
    padding: 5px;
}

#container-quantities .container-quantity_selected .msg-sample-order.msg-no-visible,
#container-quantities .container-quantity_selected .msg-quantity-error.msg-no-visible {
    display: none;
}

#container-virtualsamples {
    margin: 5px 0;
}

#container-widthandheights p,
#container-virtualsamples p {
    font-size: 12px;
    line-height: 15px;
    color: #000000;
    background: #fff5cb;
    padding: 14px;
    margin-top: 0.5rem;
    text-align: center;
}

#container-virtualsamples .container-phone-email {
    border: 1px solid #424343;
    border-radius: 5px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

#container-virtualsamples .container-phone-email.requested {
    background: rgba(37, 149, 89, 0.05);
    border-color: #259559;
    display: grid;
    grid-template-columns: 10% 90%;
}

#container-virtualsamples .container-phone-email.requested::before {
    content: url(/tienda/themes/child_theme_sneaker4/assets/img/icono-virtual-sample-requeted.png);
}

#phone-email-formfields,
#mensaje-phone-virtualsample,
#phone-virtualsample {
    width: 100%;
}

#phone-validation-message {
    display: block;
    color: #C21A21;
    text-align: center;
    margin-top: 10px;
}

#container-virtualsamples .container-phone-email.requested #mensaje-phone-virtualsample {
    margin-left: 10px;
}

#container-virtualsamples .container-phone-email input {
    border: none;
}

#container-virtualsamples .container-phone-email input[type=tel] {
    font-size: 13px;
}

#container-virtualsamples .container-phone-email input[type=button] {
    background-color: #C21A21;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    padding: 0.5rem;
    cursor: pointer;
}

#container-virtualsamples .container-phone-email input[type=button]:hover {
    background-color: #259559;
}

#container-virtualsamples .container-phone-email input[type=button]:active {
    border: 1px solid #C21A21;
}

#phone-email-formfields {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#phone-email-formfields input[type=text] {
    width: 100%;
}

#phone-email-formfields input[type=submit] {
    max-width: 40%;
}

#container-virtualsamples .container-novirtualsample {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
}

#container-virtualsamples .container-novirtualsample a {
    background-color: #505257;
    color: #fff;
    border-radius: 15px;
    padding: 10px;
}

#container-fileAttachments {
    border: 1px solid #737373;
    border-radius: 5px;
    padding: 5px;
}

#container-color .container-color_subtitle.complete,
#container-position .container-position_subtitle.complete,
#container-techniqueandcolor .container-techniqueandcolor_subtitle.complete,
#container-widthandheight .container-widthandheight_subtitle.complete,
#container-quantity .container-quantity_subtitle.complete,
#container-virtualsample .container-virtualsample_subtitle.complete,
#container-fileAttachment .container-fileAttachment_subtitle.complete {
    background-color: var(--styles_completed_step_background_color);
    color: var(--styles_completed_step_text_color);
    border: 1px solid var(--styles_completed_step_background_color);
    border-left: 0;
}

#mensaje-phone-virtualsample p {
    border: 1px solid #C21A21;
    background-color: #ff8a8e;
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    padding: 5px;
}

.budget-title {
    display: flex;
    justify-content: center;
    background-color: #fdf5e2;
    border-radius: 5px 5px 0 0;
    border-bottom: 3px solid #363062;

}

.budget-title p {
    text-align: center;
    color: #000000;
    font-size: 20px;
    line-height: 47px;
    font-weight: 600;
    margin-bottom: 0;

}

.budget-content {
    background: #fdf5e2 0% 0% no-repeat padding-box;
    border-radius: 5px;
    color: #505257;
    font-size: 16px;
    line-height: 27px;
    font-weight: normal;
    padding: 30px;
}

.budget-content__total {
    margin-bottom: 14px;
}

.budget-content__product-name span {
    text-transform: lowercase;
}

.budget-content::first-letter,
.budget-content__product-name::first-letter {
    text-transform: capitalize;
}

.budget-content__product-name,
.budget-content__summary {
    padding-bottom: 14px;
    border-bottom: 1px solid #B2B2B2;
    margin-bottom: 14px;
}

#form-display-custom-option-product>div.right-section.col-md-12.col-xl-5>div>div.budget-content>div.budget-content__marking>div>p:nth-child(1) {
    padding-bottom: 14px;
    border-bottom: 1px solid;
}

.budget-content__productprice,
.budget-content__pricequantity,
.budget-content__customization,
.budget-content__setup,
div.total-price-tax-excl>.budget_total_price,
div.total-price-tax-incl>.budget_total_tax_incl_price {
    float: right;
}

.budget-content__option {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
    margin-top: 20px;
}

.budget-content__option button,
.budget-content__option a#virtualsamplelogo {
    background-color: #505257;
    color: #fff;
    padding: 12px;
    border: 2px solid #000;
    border-radius: 5px;
    text-align: center;
}

.budget-content__option button#buynow,
.budget-content__option button#addforbuy {
    background-color: #435585;
    border-radius: 25px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-weight: 700;
    font-size: 20px;
    line-height: 23px;
}

.budget-content__option button:hover,
.budget-content__option button:active,
.budget-content__option button#buynow:hover,
.budget-content__option button#addforbuy:hover,
.budget-content__option a#virtualsamplelogo:hover,
.budget-content__option a#virtualsamplelogo:active {
    background-color: #363062;
}

#downloadpdf {
    border-radius: 25px;
    border: 1px solid #363062;
    text-align: center;
    background: #F5E8C7;
    color: #000;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 6px 0;
    padding: 8px;
    border-radius: 25px;
    font-size: 15px;
}

#downloadpdf:hover {
    background-color: #f8e4b0;
}

/* Botón presupuesto desactivado */
.not-active {
    cursor: not-allowed;
    pointer-events: none;
    background: #E0E0E0 !important;
    color: #707070 !important;
    border: 1px solid #363062 !important;
    box-shadow: none !important;
}

/* ESTILOS CARRITO */

.container-summary-cart {
    border: 1px solid #737373;
}

.customization {
    margin: 10px 0;
}

.container-summary-cart .form-control,
.container-summary-cart .col-form-label {
    padding: 5px;
    font-size: 9px;
}

.customization-header {
    cursor: pointer;
}

/* Oculta el mensaje de error al no haber seleccionado al menos una posición */
.noError {
    display: none;
}

/* Virtual Sample Messages */

.vsm-container {
    display: flex;
    flex-direction: column;
    height: 60vh;
}

.vsm-top {
    display: flex;
    flex: 1;
    border-bottom: 1px solid #ccc;
    max-height: 460px;
}

.vsm-left,
.vsm-right {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 10px;
}

.vsm-left img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 440px;
    object-fit: contain;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
    border: 2px solid lightgray;
    border-radius: 5px;
}

.vsm-right {
    overflow-y: auto;
    padding-right: 20px;
    /* Añadido para que el contenido no se esconda detrás del scroll */
    height: 450px;
    flex-direction: column;
}

.vsm-messages {
    width: 100%;
    max-height: 100%;
}

.vsm-message {
    margin-bottom: 10px;
}

.vsm-date {
    font-size: 0.8em;
    color: #666;
}

.vsm-bottom {
    padding: 10px;
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: column;
}

.vsm-message-input {
    flex: 1;
    height: 50px;
    resize: none;
    margin-right: 10px;
    width: 100%;
    border: solid 1px darkgrey;
    border-radius: 5px;
    padding: 5px;
}

.vsm-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.vsm-approve-button,
.vsm-send-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    margin-left: 10px;
    border-radius: 3px;
}

.vsm-approve-button:hover,
.vsm-send-button:hover {
    background-color: #0056b3;
}

.vsm-alert-success {
    margin-top: 10px;
    padding: 10px;
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    border: 1px solid transparent;
    border-radius: 4px;
}

.vsm-card {
    margin: 0 0 10px 0;
    border-radius: 5px;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
}

.sketch-sent-wrapper {
    display: grid;
    grid-template-columns: 5% 95%;
    align-items: center;
    margin-bottom: 5px;
}

.noshow {
    display: none !important;

}

#fileAttachmentComments {
    padding: 6px;
}

.toast-container-custom {
    position: fixed;
    top: 20px;
    left: 40%;
    width: 20%;
    /* Posición inicial fuera de la pantalla (arriba) */
    z-index: 9999;
    /* Para que quede por encima de todos los elementos */
    transition: transform 0.4s ease-in-out;
    transform: translate(0, -150%);
    /* Transición suave */
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.05);
    border-radius: 3px 3px 3px 3px;
    border: 1px solid lightgray;
}

.tembleque {
    animation: agitar 0.4s ease-in-out;
}

@keyframes agitar {
    0% {
        transform: rotate(-2deg);
    }

    20% {
        transform: rotate(2deg);
    }

    40% {
        transform: rotate(-2deg);
    }

    60% {
        transform: rotate(2deg);
    }

    80% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.toast.show {
    transform: translateX(-50%) translateY(150%);
    /* Posición final visible (dentro de la pantalla) */
}

.loading-gradient {
    min-width: 73px;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #ffffff 8%, #e7e7e7 38%, #ffffff 54%);
    background-size: 200% 100%;
    /* Hacemos el fondo más grande para suavizar la transición */
    border-radius: 3px;
    position: relative;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: 200% 0;
        /* Empieza fuera del contenedor */
    }

    100% {
        background-position: -200% 0;
        /* Termina fuera del contenedor del otro lado */
    }
}

/* Modo guiado */

.container-guidedmode .text-error {
    font-size: 9px;
    margin-top: 6px;
    padding: 6px;
}

.container-guidedmode .hidden-error {
    display: none;
}

.container-guidedmode {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px auto;
}

.container-guidedmode .btn-continue-step {
    border-radius: 7px;
    border: none;
    box-shadow: none;
    padding: 5px;
    font-weight: bold;
    width: 50%;
    cursor: pointer;

    transition: box-shadow 0.3s ease;
    /* Para una transición suave */
}

.container-guidedmode .btn-continue-step:hover {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    /* El efecto box-shadow en hover */
}

.container-guidedmode p {
    width: 100%;
}

.loader {
    width: 20px;
    height: 20px;
    border: 5px solid #505257;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#disableCustomizationText,
#enableCustomizationText {
    color: gray;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    width: auto;
    margin: auto;
    line-height: 35px;
    white-space: nowrap;
}

.dnone {
    display: none;
}

/* 
.current-step {
    color: var(--styles_current_step_text_color) !important;
    background-color: var(--styles_current_step_background_color) !important;
}
 */

.budget_units_label {
    font-weight: var(--styles_budget_units_label_font_weight);
    color: var(--styles_budget_units_label_text_color);
}

.budget_customization_label {
    font-weight: var(--styles_budget_customization_label_font_weight);
    color: var(--styles_budget_customization_label_text_color);
}

.budget_setup_label {
    font-weight: var(--styles_budget_setup_label_font_weight);
    color: var(--styles_budget_setup_label_text_color);
}

.budget_total_label {
    font-weight: var(--styles_budget_total_label_font_weight);
    color: var(--styles_budget_total_label_text_color);
}

.budget_total_tax_incl_label {
    font-weight: var(--styles_budget_total_tax_incl_label_font_weight);
    color: var(--styles_budget_total_tax_incl_label_text_color);
}

.budget_price_ud_label {
    font-weight: var(--styles_budget_price_ud_label_font_weight);
    color: var(--styles_budget_price_ud_label_text_color);
}

.budget_price_ud_tax_label {
    font-size: var(--styles_budget_price_ud_tax_label_font_size);
}

#container-colors .input-color {
    opacity: 0;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50%;
    height: 50%;
    z-index: 1000;
}

#add-to-cart-modal .modal-dialog {
    top: 200px;
    z-index: 1100;
}

#add-to-cart-modal .close {
    border-radius: 50%;
    height: 30px;
    width: 30px;
    border: 1px solid black;
    background-color: white;
}

#container-colors .color-name.hidden {
    display: none;
}

#container-productcustomization .toggle-section {
    margin: 0;
}

#container-textcustom {
    padding: 0;
}

#container-productcustomization .toggle-section .step:not(.step-none) {
    margin-top: 5px;
}


#btnStartBudget {
    background-color: var(--styles_completed_step_background_color);
    color: white;
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 3px;
}

#btnStartBudget:hover {
    box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.3);
}

#startBudgetModal .modal-dialog {
    max-width: unset;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
}

#startBudgetModal .closeBudgetModal {
    border-radius: 50%;
    font-size: 18px;
    font-weight: normal;
    background-color: white;
    color: var(--styles_completed_step_background_color);
    padding: 0;
    height: 30px;
    width: 30px;
    margin: 0;
    border: 1px solid gray
}

#startBudgetModal .startModalButton {
    background-color: white;
    border: 1px solid var(--styles_completed_step_background_color);
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    color: var(--styles_completed_step_background_color);

}

#startBudgetModal .startModalButton:hover {
    box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.2);
}

#startBudgetModal #btnBudgetContinue.startModalButton {
    background-color: var(--styles_completed_step_background_color);
    color: white;
}

#budget-actions .budget-actions-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.budget-actions-buttons .first-button-block,
.budget-actions-buttons .second-button-block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.budget-actions-buttons button {
    background-color: var(--styles_completed_step_background_color);
    color: white;
    font-weight: 600;
    font-size: 12px;
    border: none;
    border-radius: 3px;
    width: 50%;
}

.budget-actions-buttons button:hover {
    outline: none;
    border: none;
    box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
    background-color: var(--styles_completed_step_background_color);
    color: white;
}


#budget-actions .budget-actions-separator {
    width: 30%;
    height: 1px;
    background-color: lightgray;
}

.budget-actions-buttons button#btnFinalizeBudget {
    border: 1px solid var(--styles_completed_step_background_color);
    background-color: var(--styles_step_background_color);
    color: var(--styles_completed_step_background_color);

}

.b-product-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    min-height: 100px;
}

.b-product-image {
    width: 15%;
    height: 100%;
}

.b-product-image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.b-product-data {
    width: 70%;
    padding-left: 10px;
}

.b-product-data p {
    margin: 0;
    font-size: 12px;
}

.b-product-customization {
    font-size: 12px;
}

.b-product-actions {
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.b-product-container .b-product-name {
    font-size: 18px;
    font-weight: bold;
}

#budgetProductsModal tr {
    line-height: 12px;
    font-size: 12px;
}

.b-products-section {
    max-height: 70vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.b-product-section {
    border: 1px solid lightgray;
    padding: 5px;
    border-radius: 3px;
}

.b-prices-separator {
    height: 1px;
    width: 30%;
    background-color: lightgray;
    margin: auto;
    margin-top: 1rem;

}

.table .thead-light th.first-th {
    background-color: white;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 1px;

}

#budget-product-list th {
    width: 30%;
}

#budget-product-list th:first-child {
    width: 10%;
}

#budget-product-list .b-product-section th {
    width: 20%;
}

#budget-product-list .b-product-section th:first-child {
    width: 40%;
}

#budget-product-list .table .thead-light th {
    color: #495057;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.select2-container{
  z-index: 9999999;
  width: 100% !important;
}

.form-group:has(#customerSelect){
   margin-bottom: 10px;
}