/* ==========================================================================
   LAYOUT GÉNÉRAL
   ========================================================================== */

#quick_order_container {
  padding-bottom: 2rem;
}

#quick_order_container .p-1 {
  padding: 0.75rem !important;
}

#header .header-top .row,
#header .header-top-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header .header-top-right {
  justify-content: flex-end;
  gap: 1rem;
}

.header-top-left a {
  display: flex;
  align-items: center;
  /* aligne verticalement */
  gap: 10px;
  /* espace entre les deux images */
}

.header-top-left img {
  max-height: 50px;
  /* ajuste la taille si nécessaire */
}

#product_data_wrapper {
  margin-bottom: 1rem;
}

#products .products {
  flex-direction: column;
}

#cart,
#main-filter {
  position: sticky;
  top: -1px;
  z-index: 2;
}

#cart,
#main-filter,
#search-history-items {
  border: 1px solid #ddd;
}

@media (max-width: 992px) {
  .card {
    background: white;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .row.d-flex {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    margin: 0;
  }

  .row.d-flex #right-column,
  .row.d-flex #products-data-container,
  .row.d-flex #filter-container-d,
  .row.d-flex #content-wrapper {
    float: none;
    padding: 0;
  }

  .row.d-flex::after {
    display: none;
  }
}

/* ==========================================================================
   SOUS-CATÉGORIES
   ========================================================================== */

.quickorder-subcat-header,
.quickorder-subcat-header-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quickorder-subcat-header-name {
  justify-content: flex-start;
  gap: 0.5rem;
}

.quickorder-subcat-header-name h1 {
  margin: 0;
}

.quickorder-subcat-container {
  display: flex;
  --items: 2;
  --gap: 1rem;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: calc(var(--gap) * 0.5);
  margin: calc(var(--gap) * -0.5);
  scroll-padding-inline: calc(var(--gap) * 0.5);
  margin-top: 5px;
}

.quickorder-subcat-container .subcategory {
  min-width: calc((100% - (var(--items) - 1) * var(--gap)) / var(--items));
  scroll-snap-align: start;
  text-align: left;
  margin: 0;
}

.quickorder-subcat-container .subcategory .subcategory-card {
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.quickorder-subcat-container .subcategory .subcategory-card .subcategory-image {
  width: 100%;
  height: 70px;
  overflow: hidden;
}

.quickorder-subcat-container .subcategory .subcategory-card .subcategory-image a {
  width: 100%;
  height: 100%;
  display: block;
}

.quickorder-subcat-container .subcategory .subcategory-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quickorder-subcat-container .subcategory .subcategory-card h5 {
  font-size: 0.875rem;
  margin: 0;
  padding: 12px 10px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  background: #fff;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .quickorder-subcat-container {
    --items: 3;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .quickorder-subcat-container {
    --items: 4;
  }
}


/* ==========================================================================
   FILTRES PRINCIPAUX
   ========================================================================== */

#main-filter {
  display: flex;
  align-items: flex-start;
  font-size: 0.875rem;
}

#main-filter strong {
  margin-top: -2px;
  display: inline-block;
  vertical-align: text-top;
}

.quickorder-filter-top-facet .btn-link,
#main-filter .btn-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  padding: 0.3em 0.5em !important;
  margin: 0 0 0 5px;
  background: #f5f5f5;
  border-radius: 5px !important;
  cursor: pointer;
  text-decoration: none !important;
}

#main-filter .btn-link:hover,
#main-filter .btn-link:focus,
#main-filter .btn-link:after {
  outline: 0;
  text-decoration: none;
}

#main-filter .btn-link svg {
  margin-right: 3px;
}

#main-filter .btn-link.dark {
  background: #f2f2f2;
}

#main-filter .btn-link.dark span {
  color: #333;
}

#main-filter .btn-link .hidden {
  display: none;
}

@media (max-width: 992px) {
  #main-filter {
    flex-direction: column;
    align-items: flex-start;
  }

  #main-filter.fixed-top {
    position: fixed;
    border: none;
    width: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11);
  }

  #active-facette .active-filter-container {
    padding: 0.5rem 0 0 0 !important;
  }

  #active-facette .active-filter-container strong {
    display: block;
  }

  #active-facette .active-filter-container button {
    margin: 0 0 0.5rem 0;
  }
}

/* ==========================================================================
   FILTRES DE RECHERCHE
   ========================================================================== */

#search-filters {
  display: flex;
  align-items: flex-start;
}

#search-filters input[type="text"] {
  border: 1px solid #ddd;
  padding: 0.3em 0.5em;
}

#search_filters .facet-dropdown {
  padding: 0.5rem 0;
  background: #fff;
}

#search_filters .facet a {
  display: block;
  width: 100%;
  padding: 3px 0.5rem;
  clear: both;
  font-weight: 400;
  background: none;
  border: 0;
}

#search_filters>p,
#search_filters .facet .dropdown-menu,
#search_filters #_desktop_search_filters_clear_all {
  width: 100%;
  font-weight: bold;
  background: #fff;
}

#search_filters .facet .facet-title,
#search_filters .facet .dropdown-menu {
  border-color: #ddd;
}

@media (max-width: 992px) {
  #search-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  #search-filters>div:first-child {
    display: flex;
    min-width: 0;
    max-width: none;
  }

  #search-filters>div:first-child input[type="text"] {
    width: 100%;
    min-width: 60px;
    max-width: none;
    box-sizing: border-box;
  }

  #search-filters .btn-link {
    white-space: nowrap;
    flex-shrink: 0;
    height: auto;
  }

  #search-filters>div:not(:first-child) {
    flex-shrink: 0;
  }
}

/* Facet top */
/*
.facet-top #search_filters {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.facet-top #search_filters .facet {
  flex: 1 0 15%;
  padding: 0.625rem;
}
*/
.facet-top #search_filters .facet .facet-title,
.facet-top #search_filters .facet .dropdown-menu,
.facet-top #search_filters .facet .dropdown-menu {
  width: 100%;
}

/* Facet left */
.facet-left #search_filters .facet .facet-title,
.facet-left #search_filters .facet .dropdown-menu,
.facet-left #search_filters .facet .dropdown-menu {
  width: 100%;
}

/* ==========================================================================
   FILTRES AVANCÉS
   ========================================================================== */

/* #quickorder-filter-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
} */

#quickorder-filter-top .quickorder-filter-top-facet {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

#quickorder-filter-top .dropdown-menu {
  width: 100%;
  padding: 0.5rem;
  min-width: 11rem;
}

#quickorder-filter-top .dropdown-menu label {
  display: block;
  text-align: left;
}

#div-facette .form-check-input {
  margin-left: 0;
}

.facet-title {
  font-weight: bold;
  margin-bottom: 1em;
  font-size: 1.1em;
}

.filter-titre-group {
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
}

/* Slider de prix */
#slider-range {
  margin: 1em 0;
  padding: 0 1em;
}

.price-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.95em;
}

.price-values span {
  font-weight: bold;
}

.apply-price-filter {
  margin-top: 1em;
  padding: 0.5em 1em;
  background-color: #2a8fbd;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}

/* Filtres de couleur */
.color-checkbox-group,
.color-radio-group {
  display: flex;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.color-checkbox-group .form-check,
.color-radio-group .form-check {
  margin: 0 !important;
}

.color-radio-group input[type="radio"],
.color-checkbox-group input[type="checkbox"] {
  display: none;
}

.color-radio,
.color-checkbox {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ccc;
  cursor: pointer;
  transition: 0.2s ease;
  text-indent: -9000px;
  text-align: left;
  margin-bottom: 0;
}

.color-radio-group input[type="radio"]:checked+.color-radio,
.color-checkbox-group input[type="checkbox"]:checked+.color-checkbox {
  border-color: #000;
  box-shadow: 0 0 0 2px #00000044;
}

/* Toggle filters */
#filter-toggle-checkbox {
  display: none;
}

#filter-container {
  display: none;
}

#filter-toggle-checkbox:checked+#toggle-label+#filter-container,
#filter-toggle-checkbox:checked+#toggle-label2+#filter-container {
  display: block;
}

.disable-clicks {
  pointer-events: none;
  opacity: 0.6;
}

@media (max-width: 992px) {
  .facet-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
  }


  #quickorder-filter-top .quickorder-filter-top-facet {
    gap: 0.5rem;
  }

  .quickorder-filter-top-facet .facet-block {
    margin-bottom: 0;
  }

  .filter-titre-group {
    flex-basis: 100%;
    margin: 0;
  }

  .form-check {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0;
  }

  .quickorder-filter-top-facet .facet-block .form-check {
    margin-bottom: 0.3rem;
  }

  .form-check-input {
    margin: 0;
    position: relative;
  }

  .form-check-label {
    padding: 0;
  }
}


@media (min-width: 993px) {
  .facet-block {
    margin-bottom: 1rem;
  }
}

/* ==========================================================================
   TABLEAU DE DONNÉES
   ========================================================================== */

#content-wrapper .product_datatable {
  margin-bottom: 1rem;
  background: #fff;
  /* Forcer le tableau à ajuster automatiquement ses colonnes */
  table-layout: auto !important;
  width: 100%;
}

#content-wrapper .product_datatable th,
#content-wrapper .product_datatable td {
  vertical-align: middle;
  white-space: nowrap;
  /* Permettre au contenu de déterminer la largeur */
  width: auto !important;
  /* Largeur minimale pour éviter que ce soit trop serré */
  min-width: fit-content;
  /* Padding réduit pour optimiser l'espace */
  padding: 0.5rem 0.25rem !important;
}

/* Colonnes spécifiques qui peuvent avoir des largeurs fixes */
#content-wrapper .product_datatable th:first-child,
#content-wrapper .product_datatable td:first-child {
  /* Colonne image - largeur fixe */
  width: calc(125px + 0.5rem) !important;
  min-width: calc(125px + 0.5rem);
  max-width: calc(125px + 0.5rem);
}

#content-wrapper .product_datatable th[data-dt-column="2"],
#content-wrapper .product_datatable td:nth-child(3) {
  white-space: normal !important;
  max-width: 30% !important;
  width: 30% !important;
}

#content-wrapper select.form-control {
  height: auto !important;
  /*padding: 0.25rem 0.75rem;*/
  padding: 0.25rem, 0.75rem, 0.75rem 0.75rem !important;
}

#content-wrapper .form-control {
  border-color: #ddd;
  background: #fff;
}

#content-wrapper .product_datatable {
  margin-bottom: 1rem;
  background: #fff;
}

#content-wrapper .product_datatable th {
  vertical-align: middle;
  white-space: nowrap;
}

#content-wrapper .product_datatable form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

#content-wrapper .product_datatable input[type="number"] {
  width: 70px;
  display: block;
}

#content-wrapper .product_datatable .btn {
  padding: 0.5rem 0.75rem;
}

#content-wrapper .dt-layout-end {
  text-align: right;
}

#content-wrapper .dt-layout-end .page-item {
  display: inline-block;
}

#content-wrapper .product_datatable td {
  position: relative;
  vertical-align: middle;
}

#content-wrapper .product_datatable td .btn {
  display: block;
  width: 100%;
}

#content-wrapper .product_datatable td .alert {
  position: absolute;
  display: block;
  width: auto !important;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  text-align: center;
  z-index: 10;
  white-space: nowrap;
}

@media (max-width: 992px) {
  #content-wrapper .product_datatable td .alert {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    transform: none;
    margin-bottom: 0.75rem;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #content-wrapper .product_datatable {
    font-size: 0.875rem;
  }

  #content-wrapper .product_datatable td .imgswitch img {
    max-width: 80px;
    height: auto;
  }
}

@media (max-width: 992px) {
  #content-wrapper .product_datatable td {
    text-align: left;
   /* display: flex;*/
    gap: 0 0.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  @media (max-width: 992px) {
    #content-wrapper .product_datatable td .product-content a {
      white-space: normal;
      word-wrap: break-word;
      display: block;
    }
  }

  @media (max-width: 992px) {
    .row.d-flex {
      flex-wrap: wrap !important;
    }
    
    #right-column {
      order: 2;
      margin-top: 1rem;
    }
    
    #products-data-container {
      order: 1;
    }
  }

  #content-wrapper .product_datatable td .imgswitch {
    flex-shrink: 0;
  }

  #content-wrapper .product_datatable td .imgswitch img {
    max-width: 100px;
    height: auto;
  }

  #content-wrapper .product_datatable td .product-content {
    flex: 1;
  }

  #content-wrapper .product_datatable td .product-content .js-product-availability {
    font-size: 0.875rem;
  }

  #content-wrapper .product_datatable td .product-btn {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    margin-top: 0.5rem;
    gap: 0.5rem 1rem;
  }

  #content-wrapper .product_datatable td .product-btn form {
    flex: 1;
  }

  #content-wrapper .product_datatable td .product-btn .btn {
    padding: 0.3em 0.5em;
  }

  #content-wrapper .product_datatable td .product-btn a,
  #content-wrapper .product_datatable td .product-btn .btn {
    font-size: 0.875rem;
  }
}

table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date {
  text-align: left !important;; 
}


@media (max-width: 479px) {

  #content-wrapper .dt-length,
  #content-wrapper .dt-search {
    text-align: left;
  }

  #content-wrapper .dt-length label,
  #content-wrapper .dt-search label {
    padding: 0;
  }

  #content-wrapper .dt-layout-table {
    margin-bottom: 1rem;
  }

  /*
  #content-wrapper .dt-info,
  #content-wrapper .dt-paging {
    margin-bottom: 0.5rem;
    white-space: normal;
  }
  */

  #content-wrapper .pagination {
    justify-content: center;
    /* ou flex-start si tu veux à gauche */
  }

  #content-wrapper .pagination li {
    float: none !important;
  }

  #content-wrapper .dt-layout-full {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   PANIER
   ========================================================================== */

#right-column #cart {
  margin: 0;
  font-size: 12px;
}

#right-column #cart .product-line-grid-body a.label {
  font-size: 1em;
}

#right-column #cart .has-discount .discount {
  margin-left: 0;
  padding: 0.2125rem 0.325rem;
}

#right-column #cart .product-line-grid-left {
  padding: 0;
}

/* Items du panier */
#quick_order_container .cart-item {
  padding-top: 0;
}

#quick_order_container .cart-items .product-line-grid-container {
  display: block;
}

#quick_order_container .cart-items .product-line-grid-left {
  width: 16.66667%;
}

#quick_order_container .cart-items .product-line-grid-body {
  width: 50%;
}

#quick_order_container .cart-items .product-line-grid-right {
  width: 33.33333%;
}

#quick_order_container .cart-items .product-line-grid-right .qty {
  width: 100%;
  padding: 0;
}

#quick_order_container .cart-items .product-line-grid-right .qty .bootstrap-touchspin {
  transform: scale(0.7);
}

#quick_order_container .cart-items .product-line-grid-body,
#quick_order_container .cart-items .product-line-grid-body .label {
  font-size: 0.75rem !important;
  line-height: 0.75rem !important;
}

#quick_order_container .cart-items .product-line-grid-body br {
  display: none;
}

#quick_order_container .cart-items .product-line-grid-right .qty {
  padding: 0;
}

.cart-items .product-line-grid-right .text-xs-right {
  position: absolute;
  right: 0;
}

@media (min-width: 1200px) {
  .product-line-grid {
    display: flex;
    gap: 0.5rem;
  }

  .cart-items .product-line-grid-left,
  .cart-items .product-line-grid-body,
  .cart-items .product-line-grid-right {
    width: auto;
    padding: 0;
  }
}

@media (max-width: 479px) {
  .cart-items .product-line-grid-left {
    width: 25%;
  }

  .cart-items .product-line-grid-body {
    width: 75%;
  }

  .cart-items .product-line-grid-right {
    width: 100%;
    margin-top: 0;
    padding: 0;
  }

  .cart-items .product-line-grid-right div {
    padding: 0;
  }

  #quick_order_container .cart-items .product-line-grid-right .qty {
    width: 75%;
    padding: 0;
  }

  .cart-items .product-line-grid-right .col-xs-4.hidden-md-up {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  #right-column {
    margin: 0 auto;
    float: none;
  }

  #right-column::before {
    content: "";
    display: table;
    width: 100%;
    height: 0;
    padding-top: 0.5rem;
    clear: both;
  }
}

/* ==========================================================================
   BOOTSTRAP BREAKPOINTS
   ========================================================================== */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* sm */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* md */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* lg */
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* xl */
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /* xxl */
}

/* ==========================================================================
   MAX-WIDTH BREAKPOINTS (pour override mobile-first)
   ========================================================================== */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  /* xs only */
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  /* sm and down */
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  /* md and down */
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  /* lg and down */
}

/* Extra large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
  /* xl and down */
}

/* ==========================================================================
   BREAKPOINTS SPÉCIFIQUES (between)
   ========================================================================== */

/* Small devices only */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* sm only */
}

/* Medium devices only */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* md only */
}

/* Large devices only */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* lg only */
}

/* Extra large devices only */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* xl only */
}

/* ==========================================================================
   product-features
   ========================================================================== */

.product-features-tab {
  background: #f9f9f9;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 15px;
}

.product-features-tab ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-features-tab li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.product-features-tab li:last-child {
  border-bottom: none;
}

.product-features-tab .feature-icon {
  width: 22px;
  height: 22px;
  background: #4cafef;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-right: 10px;
  flex-shrink: 0;
}

.product-features-tab strong {
  color: #333;
  margin-right: 5px;
}

.product-features-tab span {
  color: #666;
}

/*
#search-history {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 4px;
}
*/

.list-group li {
  display: inline;
}

#module-gtquickorder-quicklist .card {
  margin-bottom: 1rem;
}
/* ==========================================================================
   BOUTON FAVORIS (STYLE IDENTIQUE À LA LOUPE)
   ========================================================================== */

.gtquickorder-favorite-btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.gtquickorder-favorite-btn:hover {
  text-decoration: none;
}

.gtquickorder-favorite-btn i.material-icons {
  font-size: 1.5rem;
  vertical-align: middle;
}

/* Couleur par défaut (cœur vide) */
.gtquickorder-favorite-btn i.material-icons {
  color: inherit; /* Hérite de la couleur du thème */
}

/* Couleur du thème pour le cœur actif */
.gtquickorder-favorite-btn.is-favorite i.material-icons {
  color: #2fb5d2; /* Couleur principale du thème - à ajuster selon votre thème */
}

/* Icônes côte à côte (loupe et cœur) */
.product-actions-inline {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

/* taille du input panier*/
.js-cart-line-product-quantity {
  width:50px  !important;
}