/* Color for the link to open the modal */
#openModalLink {
  color: #fab938;
}

#openModalLink:hover {
  color: #ffcf2e;
}

/* Horizontal Line for the Store Detail Modal */
.hl {
  border-bottom: 1px solid #c3c3c3;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Hide the Store Selector in the product screen*/
#select_store_front.select_store_front {
  display: none;
}

/* Style for the modal */
.ssp-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 100px;
  animation: fadeIn 0.5s forwards;
}

/* Modal Content */
.ssp-modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 10px;
  text-align: center;
  position: relative;
}
/* Style for the input in the modal */
#modalTextInput {
  width: 100%;
  padding: 10px;
  margin: 20px 0;
  border: 1px solid #ccc;
  border-radius: 5px; /* Rounded border */
  box-sizing: border-box;
}

/* Modal Footer */
.ssp-modal-footer {
  text-align: right;
}

/* Modal Buttons */
.ssp-modal-btn {
  position: relative;
  background-color: #fab938;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-left: 10px;
}

.ssp-modal-btn:hover {
  background-color: #ffcf2e;
}

.ssp-modal-description {
  margin-top: 20px;
}
/* Add fade-in animation to the error message */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Add border color change animation */
@keyframes borderFlash {
  from {
    border-color: #ccc;
  } /* Original border color */
  to {
    border-color: #ff4d4d;
  } /* Error border color */
}

.ssp-error-message {
  position: absolute;
  color: #ff4d4d;
  font-size: 14px;
  margin-top: -8px;
  text-align: left;
  animation: fadeIn 0.5s forwards;
}

.ssp-error-border {
  border: 1px solid #ff4d4d !important; /* Red border color */
  animation: borderFlash 0.3s forwards;
}

.close-btn {
  background-color: #878787;
}

/* Spinning animation for buttons */

.ssp-button-loading .ssp-button-text {
  visibility: hidden;
  opacity: 0;
}

.ssp-button-loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s linear infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

/* Styling the Order Screen a little better */

dd.variation-ServicesAdditionnels {
  padding-bottom: 10px;
}

tbody tr td.product-name {
  display: flex !important;
  width: 100% !important;
  align-items: flex-start !important;
  align-self: baseline !important;
  padding-right: 0 !important;
  flex-direction: column !important;
}

table.shop_table thead {
  text-wrap: nowrap;
}

.ssp-relative {
  position: relative;
}

.ssp-selector-absolute {
  position: absolute;
  top: 58%;
  left: 50%;
}

.ssp-selector-dim {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

.ssp-margin-top-buttons {
  margin-top: 20px;
}