/**
 * NOTICE OF LICENSE
 *
 * All right is reserved,
 * Please go through LICENSE.txt file inside our module
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this module to newer
 * versions in the future. If you wish to customize this module for your
 * needs please refer to CustomizationPolicy.txt file inside our module for more information.
 *
 * @author Martimotos
 * @copyright Martimotos
 * @license LICENSE.txt
 */

#back {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
#size-chart-button {
    margin-top: 2rem !important;
}
#size-chart-view {
    margin-top: 1rem;
    padding : 15px;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
    background-color: white;
}
.wk-set-option {
    font-weight: 600;
    text-align: center;
    padding-top: 6px;
}
.wk-border-radius {
    border-radius : 0px !important;
}
.wk-row-padding {
    padding: 10px;
}
.wk_set_row_margin {
    margin: 5px;
    /* margin-left: 5px !important; */
}
.wk-size-chart-container {
    max-width: 100%;
    min-width: 800px;
    overflow-x: auto;
    overflow-y: auto;
}
.wk-col-margin {
    margin: 0 3px;
}
.wk-float-left {
    float: left;
}
.wk-border {
    border : 1px solid rgb(156, 145, 145);
    border-radius : 3px !important;
}
.wk-font-size {
    font-size: 12px;
}
.wk-table-row-border {
    border-top: 1px solid rgb(212, 203, 203) !important;
}
.wk-height {
    height: 160px;
    margin-bottom: 1rem;
}
.wk-img-height {
    height: 100%;
    max-width:100%;
    width: auto;
}
.wk-min-height {
    min-height: 0px !important;
}
.wk-scroll-vertical {
    overflow-x: auto;
}
.wk-scroll-horizontal {
    overflow-y: auto;
}
.wk-table-margin {
    margin-bottom: 0rem !important;
}
.wk-table-text-align {
    text-align: center !important;
}

@media (max-width:575.98px)
{
    .wk-size-chart-container {
        width: 100%;
        min-width: 500px;
    }
    .wk-row-width {
        width: 100%;
        min-width: 500px;
    }
}
@media (min-width:576px) and (max-width:767.98px)
{
    .wk-size-chart-container {
        width: 100%;
        min-width: 700px;
    }
    .wk-row-width {
        width: 100%;
        min-width: 700px;
    }
}
@media (min-width:768px) and (max-width:991.98px)
{
    .wk-size-chart-container, .wk-size-chart-container .wk-row-width {
        width: 100%;
        min-width: 900px;
    }
}
@media (min-width:992px)
{
    #wk_img_div {
        padding-right: 0px !important;
    }
    .wk-size-chart-container, .wk-size-chart-container .wk-row-width {
        width: 100%;
        min-width: 100%;
    }
}
.wk-size-chart-unit-btn .btn {

    white-space: nowrap;
}
.bootstrap .wk-size-chart-unit-btn .dropdown-menu{
    top: unset !important;
    left: unset !important;
    /* right: -80px !important; */
}

.m-2{
    margin-top: 2px;
    margin-bottom: 2px;
}

.text-left {
    text-align: left;
}

/* Estilos para tabla de tallas más ancha - Martimotos */

/* Forzar el contenedor del formulario a ser más ancho */
.wk-size-chart-data {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding: 0 !important;
}

.wk-size-chart-data .col-lg-12 {
    width: 100% !important;
    max-width: none !important;
    padding: 0 10px !important;
    flex: 0 0 100% !important;
}

#wk_size_chart_container {
    width: 100% !important;
    max-width: none !important;
    overflow-x: auto;
    padding: 10px 0 !important;
}

/* Hacer el form-group padre más ancho */
.form-group:has(#wk_size_chart_container),
.form-wrapper:has(#wk_size_chart_container) {
    max-width: none !important;
    width: 100% !important;
}

/* Para navegadores que no soportan :has() - clase en el padre */
.wk-size-chart-data,
.wk-size-chart-data .row,
.wk-size-chart-data .col-lg-12,
.wk-size-chart-data .form-group {
    max-width: none !important;
}

/* Forzar el panel de PrestaShop a ser más ancho */
.bootstrap .panel:has(.wk-size-chart-data) {
    max-width: none !important;
}


/* Row de opciones - no saltar de línea */
#wk_attr_option {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: max-content !important;
    min-width: 100% !important;
}

#wk_attr_option > div {
    flex-shrink: 0 !important;
}

/* Forzar el form-group que contiene la tabla a ocupar 100% */
.form-group .wk-size-chart-data,
.form-horizontal .form-group:has(.wk-size-chart-data) {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Quitar el offset del label en PrestaShop */
.form-horizontal .form-group:has(.wk-size-chart-data) .col-lg-9,
.form-horizontal .form-group:has(.wk-size-chart-data) .col-lg-offset-3 {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    flex: 0 0 100% !important;
}

/* Para el contenedor del input html de PrestaShop */
.form-group > .col-lg-9:has(.wk-size-chart-data) {
    width: 100% !important;
    margin-left: 0 !important;
    flex: 0 0 100% !important;
}

#wk_size_chart_container .fixed-width-sm {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
}

#wk_size_chart_container input.wk-border-radius,
#wk_size_chart_container input[type="text"] {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}

#wk_attr_option .wk-set-option {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
}

.wk-row-width {
    width: auto !important;
    min-width: 800px;
    display: flex;
    flex-wrap: nowrap;
}

/* Asegurar que las filas no se compriman */
.wk_set_row_margin {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

.wk-measurement-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
}