.desktop-search .filter-select{
  position: relative;
  padding: 0px 25px;
}

.filter-select .filter-elements{
  display: none;
}

.filter-select.open .filter-elements{
  left: 0px;
  top: 41px;
  position: absolute;
  background: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 20px 20px;
}

.filter-select.open .filter-toggel{
  transform: rotate(180deg);
}

.desktop-search .produit-filters-container{
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
}

.filter-select .filter-titel{
  font-size: 18px;
  color: #fff;
  font-weight: 300;
  margin: 0;
}

.filter-select .filter-select-label{
  display: flex;
  align-items: center;
  cursor: pointer;
}

.filter-select .filter-toggel{
    margin-bottom: 0px;
    margin-left: 10px;
}

.filter-select .fiter-option{
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 17px 0;
}

.filter-elements-container{
  max-width: 90%;
}

.filter-select .filter-label{
  margin: 0;
  font-size: 17px;
}

.produit-attribue-recherche {
    width: calc(100% - 40px);
}

.accessoir-title {
    text-transform:lowercase;
}

.accessoir-title::first-letter {
  text-transform: uppercase;
}

#produit-list .produit-card .produit-accessoir .accessoir-image{
    min-width: 68px;
}

#produit-list .produit-card .accessoir-price{
    white-space: nowrap;
}

#modal-filter{
  display: none;
}

.produit-filters-container .filtre-btn{
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 6px 22px;
}

.produit-filters-container .filtre-btn:hover{
  color: #f26638;
  background: #fff;
}

.produit-informations .produit-title{
  margin-top: 0;
}

.produit-attribue-recherche {
  position: relative;
  z-index: 10;
}

.mobile-search .produit-attribue-recherche {
    cursor: pointer;
}

#produit-filter{
  overflow: visible;
}

.filter-count{
  position: absolute;
  top: -14px;
  right: 18px;
  background: #223881;
  color: #fff;
  font-size: 14px;
  width: 27px;
  text-align: center;
  height: 27px;
  line-height: 27px;
  border-radius: 50%;
}

.select-count{
  right: 39px;
  top: -24px;
  position: absolute;
  background: #223881;
  color: #fff;
  font-size: 12px;
  width: 22px;
  text-align: center;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
}

#modal-filter{
  display: none;
  border-radius: 20px;
  max-width: 90vw;
  width: 700px;
  background: #fff;
  position: fixed;
  top: 50%;
  right: 50%;
  z-index: 105;
  transform: translate(50%, -50%);
}

#modal-filter .modal-header{
  background: #F26638;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-radius: 20px 20px 0 0;
}

#modal-filter .modal-titel{
  display: flex;
  align-items: center;
}

#modal-filter .modal-titel h6{
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-left: 15px;
}

#modal-filter .modal-body{
  padding: 20px;
  max-height: calc(100vh - 220px);
  overflow: auto;
}

#modal-filter .filter-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#modal-filter .filter-titel{
  margin-top: 0px;
  font-size: 21px;
  color: #1e3274;
  cursor: pointer;
}

#modal-filter .modal-action{
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a.main-color.rev-hover{
  text-decoration: underline !important;
}

a.main-color.rev-hover:hover{
  text-decoration: none !important;
}

#modal-filter .filter-list{
  border-bottom: 1px solid #c9cee0;
  margin-bottom: 20px;
}

#modal-filter .filter-toggel,
#modal-filter .btn-close-filter{
  cursor: pointer;
}

#modal-filter .fiter-option{
  display: flex;
  align-items: center;
  margin: 7px 0;
  cursor: pointer;
  width: fit-content;
}

#modal-filter .filter-label{
    margin: 0;
    color: #223881;
}


#modal-filter .filter-elements {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  flex-direction: column;
}

#modal-filter .filter-list.open .filter-elements {
  max-height: 1000px;
  display: flex;
  opacity: 1;
}

#modal-filter .filter-list .filter-toggel {
  transition: transform 0.3s ease;
  transform: rotate(180deg);
  margin-bottom: 15px;
}

#modal-filter .filter-list.open .filter-toggel {
  transform: rotate(0deg);
}

.pannier-separator{
  border-bottom: 3px dashed #818eb5;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 30px;
}

.subtitel_icon{
  width: fit-content;
  margin: auto;
}

.mobile-search{
  display: none;
}


@media (max-width: 1024px) {
  .desktop-search{
    display: none;
  }

  .mobile-search{
    display: block;
  }

  .Search-date-form-wrap {
    padding-right: 24px !important;
  }

  #produit-list .produit-card .produit-image {
      margin: auto;
  }

  #produit-filter{
      padding: 0;
  }

  .produit-card .produit-image{
    display: none;
  }

  #produit-list .produit-card .produit-accessoir{
    padding-left: 0;
    padding-right: 0;
  }

  #produit-list .produit-card .produit-informations-container{
    margin: 20px 20px;
    padding: 0;
  }

  .subtitel_icon svg {
    height: 70px !important;
    margin-bottom: 89px;
  }
}


@media (max-width: 950px) {
    .pannier-table-produit div:has(img){
      display: none;
    }

    .modal-left-part .produit-image{
      display: none;
    }

    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .modal-pannier-body .modal-action.show-mobile,
    .modal-left-part-info.show-mobile {
        display: flex !important;
    }

    .modal-left-part-info.show-mobile {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #pannier-modal-form {
        flex-direction: column;
    }

    .modal-pannier-body .modal-left-part,
    .modal-pannier-body .modal-right-part {
        padding: 20px;
        width: 100%;
        border: none;
    }

    .modal-pannier-body .modal-right-part-total,
    .modal-pannier-body .pack-user-info {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .modal-pannier-body .modal-left-part {
        padding-bottom: 0px;
    }

    .modal-pannier-body .modal-right-part {
        padding-top: 0px;
    }

    .tow-input-container > div {
        width: 100%;
    }

    .pannier-table-produit{
        flex-direction: column;
        margin-bottom: 0px;
    }

    .pannier-table-produit > div:has(h5){
        margin: 0;
    }

    #pannier-table tbody th {
        padding: 30px 5px;
    }

    #pannier-table .pannier-table-action{
        width: 25px;
        height: 25px;
    }

    .e-con-boxed:has(#pannier-table){
        padding: 10px;
    }

    .sous-total-cart{
        justify-content: start;
        padding-left: 10px;
    }

    .total-cart{
        justify-content: start;
        padding-right: 0px;
    }

    .paiment_container{
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .paiment_container>*{
        margin-top: 10px;
    }

    .accompte-container{
        flex-direction: column;
        align-items: start;
    }

    .accompte-part h4 {
        font-size: 18px;
        font-weight: 500;
        margin-left: 12px;
    }

    .accompte-part{
        font-size: 21px;
        flex-wrap: wrap;
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .accompte-part h4{
        margin-top: 12px;
        margin-right: 12px;
    }

    .accompte-part .price-card{
        min-width: unset;
        margin-left: 12px;
        margin-top: 8px;
    }

    #pannier-table{
        margin-bottom: 0;
    }

    .accompte-container{
        margin-top: 15px;
    }

    .paiment_container{
        margin-bottom: 0px;
    }

    #produit-list .produit-card .produit-image{
        padding: 10px;
    }

    .produit-price-contianer{
        min-height: 150px;
    }

    .produit-price-contianer{
        padding-top: 0;
    }

    .modal-pannier-body .modal-left-part,
    .modal-pannier-body .modal-right-part{
        padding: 5px;
    }

    #pannier-modal-form{
        margin-top: 0;
    }

    .modal-pannier-body .total-pannier-container{
        margin: 20px 0px;
    }

}

@media (max-width: 722px) {
    .produit-attribue-recherche {
        flex-direction: row;
    }
}

@media (max-width: 720px) {
    #modal-filter .filter-titel{
      font-size: 21px;
    }

    .filter-toggel svg{
      width: 25px;
    }

    #modal-filter .filter-label{
      font-size: 17px;
    }
    
    a.btn-main-color .spinner,
    button.btn-main-color .spinner {
        top: -46px;
        right: 7px;
    }
    .tow-inputs {
        flex-direction: column;
    }

    .tow-inputs > * {
        width: 100% !important;
    }

    .tow-inputs span:has(#reg_password) {
        padding-bottom: 5px;
    }

    .tow-inputs span:has(#reg_password2) {
        padding-top: 5px;
    }

    .pannier-table-info h5 {
        font-size: 18px;
    }

    .pannier-table-produit h5{
        font-size: 17px;
        margin-bottom: 10px;
    }

    .pannier-table-produit p {
        font-size: 17px;
        margin-bottom: 5px;
        line-height: 1.1;
    }

    .pannier-table-info h5{
        text-align: start;
    }

    .pannier-table-info .user-infos{
        flex-direction: column;
        align-items: start;
    }

    .pannier-table-info .info-val {
      line-height: 24px;
      margin-left: 5px;
    }

    .pannier-table-info .user-info{
        flex-direction: row;
        margin-right: 0px;
    }

    #produit-list .produit-card .produit-accessoir{
        padding: 5px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 550px) {
  #produit-list .produit-card .accessoir-price{
    margin-top: 5px;
  }

  #produit-list .category-group__title {
    font-size: 26px;
  }

  #produit-list .produit-card .produit-title {
    font-size: 25px;
  }

  #produit-list .produit-card .produit-short-description {
    font-size: 15px;
  }

  #produit-list .produit-card .accessoir-title {
    font-size: 12px;
    line-height: 11px;
    margin-bottom: 0px;
  }

  #produit-list .produit-card .accessoir-price {
    font-size: 16px;
  }

  .custom-checkbox {
    width: 27px;
    height: 27px;
  }

  #produit-list .produit-card .produit-accessoir .accessoir-image {
    height: 70px;
    width: 70px;
  }

  .produit-price-contianer .price-text {
    font-size: 18px;
  }

  .produit-price-contianer .produit-price-val {
    font-size: 30px;
  }

  .produit-price-contianer .label {
    font-size: 13px;
  }


  .modal-pannier-body .pack-user-info {
    font-size: 24px;
  }

  #pannier-modal-form {
    margin-top: 0px;
  }

  .modal-pannier-body .pack-name{
    margin-bottom: 5px;
  }

  .modal-pannier-body .left-part-header{
    margin-bottom: 20px;
  }

  .modal-pannier-body .modal-section-header {
    font-size: 24px;
  }

  .modal-pannier-body .modal-section-header {
    font-size: 20px;
  }

  .modal-pannier-body .pack-name {
    font-size: 24px;
    text-align: center;
  }

  .modal-pannier-body .sous-total-label,
  .modal-pannier-body .accessoir-label h5,
  .modal-pannier-body .sous-total,
  .input-option input::placeholder {
    font-size: 16px;
  }

  .modal-pannier-body .price-lable {
    font-size: 20px;
  }

  .modal-pannier-body .price-text {
    font-size: 32px;
  }

  .modal-pannier-body .total-pannier-container {
    margin: 30px 0;
  }

  .btn-main-color {
    font-size: 15px;
    padding: 15px 20px;
    text-align: center;
  }

  .pannier-table-price-container{
    flex-direction: column-reverse;
    align-items: end;
  }

  #produit-list .produit-card .produit-accessoir{
    width: 100%;
  }

  a.btn-main-color, 
  .main-color button, 
  button.btn-main-color{
    font-size: 13px !important;
    padding: 8px 20px !important;
  }

  .main-color a,
  a.main-color {
    font-size: 14px;
  }
}



@media (max-width: 400px) {
  .pannier-table-info h5{
    font-size: 18px;
  }

  .pannier-table-price{
    font-size: 15px;
  }

  .pannier-table-info .info-label{
    font-size: 14px;
  }

  .pannier-table-info .info-val{
    font-size: 15px;
    line-height: 19px;
    margin-left: 5px;
  }

  .price-card span{
    font-size: 20px;
  }  

  a.btn-edit-cart.btn-main-color {
    padding: 8px 8px !important;
  }

  a.btn-main-color, .main-color button, button.btn-main-color {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
}