@charset "UTF-8";
:root {
  --default-space: 30px;
}

body {
  overflow-x: hidden !important;
}

/* Affectation layout : page + sidebar 480px on the right */
.affectation-layout .basket_form_container {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 480px;
  max-width: 480px;
  height: 100vh;
  overflow-y: auto;
  z-index: 1111;
  box-shadow: -2px 0 8px 4px rgba(17, 17, 17, 0.3764705882);
  background-color: #fff;
}
.affectation-layout .basket_form_container .basket_form {
  width: 100%;
  min-height: 100vh !important;
}
.affectation-layout #container {
  width: calc(100% - 480px) !important;
  margin: 0;
}
.affectation-layout #container #logo {
  margin-left: calc((100vw - min(75%, 1000px) - 480px) / 2) !important;
}
.affectation-layout #main_wrapinner, .affectation-layout #footer_wrapinner {
  width: 75% !important;
  max-width: 1000px;
}

#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Conteneur principal */
  /* Catégorie */
  /* Chaque ligne */
  /* Image */
  /* Texte du label */
  /* SELECT */
  /* Conteneur de l'input */
  /* Combobox grille + montant libre */
  /* Inputs */
  /* Quantité avec prix fixe */
  /* Symbole € */
}
#app .informations {
  margin-bottom: var(--default-space);
  background-color: var(--description-color);
  padding: 20px;
  border-radius: var(--border-radius, 0);
  border: 1px solid #ddd;
}
#app #affectations {
  font-size: var(--fontsize);
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--default-space);
}
#app .category-wrapper {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius, 0);
  width: 100%;
}
#app .affectation-list {
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background: #f1f1f1;
}
#app .affectation-description {
  font-size: calc(var(--fontsize) - 2px) !important;
  text-align: justify !important;
  color: #666 !important;
  margin-top: 10px !important;
}
#app .affectation-label-text {
  font-weight: 600 !important;
}
#app .category-container {
  margin-left: 10px;
  width: calc(100% - 20px);
}
#app .free-amount p.ira-form-item {
  margin-bottom: 16px !important;
}
#app .free-amount {
  padding-bottom: 0 !important;
}
#app .category-title {
  font-size: 18px;
  font-weight: bold;
  display: block;
  border-bottom: var(--border);
  width: 100%;
  margin-bottom: var(--default-space);
}
#app .affectation-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: var(--default-space);
  transition: background 0.3s ease;
  width: 100%;
  gap: 10px;
  height: 100%;
}
#app .affectation-item:last-child {
  margin-bottom: 10px;
}
#app .affectation-separator {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin-top: 0px;
  margin-bottom: var(--default-space);
}
#app .affectation-img {
  width: 150px;
  height: 150px;
  border-radius: 5px;
  margin-right: 10px;
  object-fit: cover;
}
#app .affectation-content {
  width: 100%;
  display: flex;
  height: 100%;
}
#app .affectation-text {
  display: flex;
  flex-direction: column;
  width: 40%;
}
#app .amount-selection-group {
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 60%;
  max-width: 100%;
}
#app .item-multi-affectations {
  width: auto;
  max-width: 250px;
}
#app .affectation-amount {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #fff;
  width: 150px;
}
#app .affectation-amount .free-amount {
  width: 100%;
}
#app .affectation-amount .free-amount p {
  height: 45px;
}
#app .affectation-amount .free-amount p ::placeholder {
  top: calc(50% - 10px) !important;
}
#app .affectation-amount.affectation-grid {
  overflow: visible;
}
#app .grid-combo-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 45px;
  margin-bottom: 16px;
  background: #fcfcfc;
  width: 100%;
  box-sizing: border-box;
}
#app .grid-combo-wrapper p.ira-form-item {
  margin-bottom: 0 !important;
}
#app .grid-combo-wrapper p.ira-form-item label {
  border-radius: 5px 0 0 5px !important;
  border-right: none !important;
}
#app .grid-combo-wrapper .grid-combo-toggle {
  width: 40px;
  height: 100%;
  border: 1px solid var(--border-color, #d1d1d1);
  border-left: none;
  background: transparent url("/themes/default/arya/dist/v4/assets/form-items/dropdown_arrow_down.svg") no-repeat center;
  background-size: 24px;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
  flex-shrink: 0;
  padding: 0;
}
#app .grid-combo-wrapper.open .grid-combo-toggle {
  background-image: url("/themes/default/arya/dist/v4/assets/form-items/dropdown_arrow_up.svg");
}
#app .grid-combo-wrapper .grid-combo-dropdown {
  position: absolute;
  top: calc(100% + 1px);
  left: -1px;
  right: -1px;
  background: #fff;
  border: 1px solid #d1d1d1;
  border-radius: 0 0 4px 4px;
  z-index: 9999;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
#app .grid-combo-wrapper .grid-combo-dropdown .grid-combo-option {
  padding: 6px 13px;
  cursor: pointer;
  font-size: 16px;
}
#app .grid-combo-wrapper .grid-combo-dropdown .grid-combo-option:hover {
  background: #e8e8e8;
}
#app .grid-combo-wrapper:has(input:disabled) {
  background-color: rgb(239, 239, 239) !important;
  cursor: not-allowed !important;
}
#app .grid-combo-wrapper:has(input:disabled) .grid-combo-toggle {
  cursor: not-allowed;
}
#app .affectation-quantity {
  display: flex;
  align-items: center;
  position: relative;
}
#app .affectation-quantity .item-quantity {
  width: 150px;
}
#app .affectation-quantity .item-quantity input.quantity {
  font-size: calc(var(--fontsize) + 10px) !important;
}
#app .affectation-quantity .item-quantity input.quantity.has-value {
  color: var(--amount-color, var(--main-action-color));
}
#app .affectation-quantity small {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: right;
  transform: translateY(50%);
}
#app .quantity {
  width: 60px;
  text-align: center;
}
#app .currency {
  padding: 8px 10px;
  background: #eee;
  font-size: 14px;
  font-weight: bold;
  color: #555;
}

#type-b.arya .swal2-container {
  margin: 10px;
}
#type-b.arya .swal2-container .accessibility_options_modal {
  margin: 29px 480px 0 0;
}

/* Handle disabled inputs style */
.affectation-quantity input.quantity:disabled {
  background-color: rgb(239, 239, 239) !important;
  cursor: not-allowed !important;
}

.affectation-amount .free-amount label:has(input:disabled) {
  background-color: rgb(239, 239, 239) !important;
  cursor: not-allowed !important;
}

.select2-container--disabled .select2-selection {
  background-color: rgb(239, 239, 239) !important;
  cursor: not-allowed !important;
}

#type-b.arya .free-amount p.ira-form-item label input:not(:placeholder-shown):disabled {
  background-color: rgb(239, 239, 239) !important;
  cursor: not-allowed !important;
}

/* Responsive Design (breakpoints: 1600px, 1200px, 766px) */
/* Réduction des marges + affichage des champs sous la description (flex row -> column) */
@media (max-width: 1600px) {
  /* Réduction des marges */
  .affectation-layout #container #logo {
    margin-left: calc((100vw - min(90%, 1000px) - 480px) / 2) !important;
  }
  .affectation-layout #main_wrapinner, .affectation-layout #footer_wrapinner {
    width: 90% !important;
    max-width: 1000px;
    margin: 0 auto !important;
  }
  /* Affichage des champs sous la description (flex row -> column) */
  #app .affectation-content:not(.with-image) {
    flex-direction: row;
  }
  #app .affectation-content:not(.with-image) .affectation-text {
    width: 50%;
  }
  #app .affectation-content:not(.with-image) .amount-selection-group {
    width: 50%;
  }
  #app .affectation-content.with-image {
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    min-height: 100%;
  }
  #app .affectation-content.with-image .affectation-text {
    width: 100%;
  }
  #app .affectation-content.with-image .amount-selection-group {
    width: 100%;
    justify-content: flex-end;
  }
}
/* Affichage récap panier en dessous des affectations*/
/* Le .basket_form_container est déplacé en js dans le app pour apparaitre au dessus du footer */
@media (max-width: 1200px) {
  #app {
    margin: 30px 30px 0 30px;
    width: calc(100% - 60px) !important;
  }
  .affectation-layout {
    display: flex;
    flex-direction: column;
  }
  .affectation-layout .basket_form_container {
    position: relative;
    width: calc(100% - 60px) !important;
    max-width: calc(100% - 60px) !important;
    border-radius: var(--border-radius, 0);
    border: 1px solid #ddd;
    z-index: 1;
    box-shadow: none;
    margin: 0 30px 30px 30px;
    height: auto;
  }
  .affectation-layout .basket_form_container .basket_form {
    max-width: 480px !important;
    min-height: unset !important;
  }
  .affectation-layout #container {
    width: 100% !important;
    padding-bottom: var(--default-space) !important;
  }
  .affectation-layout #container #logo {
    margin-left: 30px !important;
  }
  .affectation-layout #main_wrapinner, .affectation-layout #footer_wrapinner {
    width: 100% !important;
    max-width: 100% !important;
  }
  .affectation-layout #footer {
    position: relative !important;
    z-index: 999 !important;
  }
  #type-b.arya .swal2-container {
    margin: 10px;
  }
  #type-b.arya .swal2-container .accessibility_options_modal {
    margin: 40px 10px 0 0;
  }
}
/* MODE MOBILE avec tous les champs en 100% de la largeur */
@media (max-width: 766px) {
  .affectation-layout .basket_form_container {
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #app {
    margin: 0;
    padding: 0;
    width: 100% !important;
  }
  #app .informations {
    text-align: center;
  }
  #app .affectation-item {
    flex-direction: column;
    align-items: flex-start;
  }
  #app .affectation-img {
    width: 100px;
    height: 100px;
  }
  #app .category-container {
    margin-left: 0;
    width: 100%;
  }
  #app .affectation-content:not(.with-image) {
    flex-direction: column;
    gap: 20px;
  }
  #app .affectation-content:not(.with-image) .affectation-text {
    width: 100%;
  }
  #app .affectation-content:not(.with-image) .amount-selection-group {
    width: 100%;
  }
  #app .affectation-amount,
  #app .affectation-quantity {
    width: 100%;
  }
  #app .affectation-amount .item-quantity,
  #app .affectation-quantity .item-quantity {
    width: 100%;
  }
  #app .affectation-amount .item-quantity input,
  #app .affectation-quantity .item-quantity input {
    text-align: left;
  }
  #app .item-multi-affectations {
    width: 100%;
    max-width: 100%;
  }
  #app .item-multi-affectations .select2 {
    width: 100% !important;
  }
}
/* Total fixe en bas pour mobile */
.mobile-total-fixed {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--main-action-color);
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1112;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

@media (max-width: 1200px) {
  .mobile-total-fixed {
    display: inline-block;
    width: 250px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px 5px 0 0;
  }
}
@media (max-width: 766px) {
  .mobile-total-fixed {
    display: inline-block;
    left: 0;
    transform: translateX(0);
    border-radius: 0;
    width: 100%;
    padding: 10px 0;
  }
}
@media only screen and (max-width: 1080px) {
  #type-b.arya .swal2-container .accessibility_options_modal {
    margin: 29px auto 0;
  }
}

/*# sourceMappingURL=app.css.map */