/* Resets */
.regionalization-container * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'DM Sans', sans-serif;
}

.regionalization-container button {
  display: flex;
  outline: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

/* All */
.regionalization-container .badge {
  border-radius: 12px;
  padding: 2px 8px;
  background-color: var(--color-main, #004a93);
  color: var(--color-grayScale-white, #fff) !important;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

/* Container */
.regionalization-container {
  border: 1px solid var(--color-grayScale-lightest, #e8e8e8);
  width: 100%;
  max-width: 660px;
  margin: auto;
  padding: 24px 16px;
  background-color: var(--color-grayScale-white, #fff);
}

.regionalization-container .delivery-pickup-container {
  display: grid;
  gap: 8px 0;
}

@media screen and (min-width: 769px) {
  .regionalization-container {
    padding: 24px;
  }

  .regionalization-container .delivery-pickup-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 12px;
  }
}

/* PostalCodeInputScreen View */
/* PostalCodeInputScreen View - Delivery*/
.regionalization-container .title-container {
  display: flex;
  justify-content: space-between;
}

.regionalization-container .title-container h1 {
  margin-right: 16px;
  color: var(--color-grayScale, #1c1c1c);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.regionalization-container .title-container button {
  display: flex;
  outline: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.regionalization-container .more-infos-button {
  align-items: center;
  margin: 20px 0 28px;
  color: var(--color-main, #004a93);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}

.regionalization-container .more-infos-button span {
  display: inline-flex;
  margin-left: 8px;
}

.regionalization-container .content-container {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-grayScale-lightest, #e8e8e8);
  padding: 24px 16px;
}

.regionalization-container .content-container h2 {
  color: var(--color-grayScale, #1c1c1c);
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
}

.regionalization-container .content-container .warning-container {
  display: flex;
  align-items: center;
  border-radius: 4px;
  margin-top: 16px;
  padding: 8px 16px;
  background-color: var(--color-warning-faded, #fff8e5);
}

.regionalization-container .content-container .warning-container span {
  display: inline-block;
  margin-left: 16px;
  color: var(--color-warning-dark, #b28100);
  font-size: 14px;
  line-height: 18px;
}

.regionalization-container .delivery-container {
  margin: 12px 0 16px;
  color: var(--color-grayScale, #1c1c1c);
  font-size: 16px;
  line-height: 20px;
}

.regionalization-container .delivery-container .info-price {
  margin-bottom: 12px;
}

@media screen and (min-width: 769px) {
  .regionalization-container .delivery-container {
    margin: 16px 0;
  }

  .regionalization-container .delivery-container .info-price {
    margin-bottom: 16px;
  }
}

.regionalization-container .info-price {
  margin-bottom: 12px;
  color: var(--color-grayScale, #1c1c1c);
  font-size: 16px;
  line-height: 20px;
}

.regionalization-container .info-price span {
  color: var(--color-main, #004a93);
  font-weight: 700;
}

.regionalization-container .postal-code-container {
  display: flex;
}

.regionalization-container .postal-code-container input {
  display: inline-block;
  max-width: 218px;
  width: 100%;
  margin-right: 8px;
  padding: 9px 12px;
  border: 1px solid var(--color-grayScale-light, #c6c6c6);
  border-radius: 2px;
  color: var(--color-grayScale-darkest, #545454);
  font-size: 16px;
  line-height: 20px;
}

.regionalization-container .postal-code-container input::placeholder {
  color: var(--color-grayScale-light, #c6c6c6);
}

.regionalization-container .postal-code-container button {
  align-items: center;
  padding: 10px 11px;
  border-radius: 2px;
  background-color: var(--color-main, #004a93);
  color: var(--color-grayScale-white, #fff);
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
}

.regionalization-container .postal-code-container button:disabled {
  background-color: var(--color-grayScale-faded, #f4f4f4);
  color: var(--color-grayScale-light, #c6c6c6);
  cursor: wait;
}

.regionalization-container a {
  display: block;
  margin-top: 3px;
  color: var(--color-support-links, #00289c);
  font-size: 12px;
  line-height: 16px;
}

/* PostalCodeInputScreen View - Pickup*/
.regionalization-container .pickup-container {
  margin: 16px 0;
  color: var(--color-grayScale, #1c1c1c);
  font-size: 16px;
  line-height: 20px;
}

.regionalization-container .pickup-price {
  margin-bottom: 16px;
}

.regionalization-container .pickup-open-stores-container {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.regionalization-container .pickup-open-stores-container .pickup-open-stores {
  justify-content: center;
  width: 100%;
  border-radius: 2px;
  padding: 10px 21px;
  background-color: var(--color-main, #004a93);
  color: var(--color-grayScale-white, #fff);
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

@media screen and (min-width: 769px) {
  .regionalization-container .title-container h1 {
    font-size: 24px;
    line-height: 28px;
  }

  .regionalization-container .more-infos-button {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
  }

  .regionalization-container .content-container {
    padding: 24px;
  }

  .regionalization-container .content-container h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .regionalization-container .info-price {
    margin-bottom: 16px;
  }

  .regionalization-container .pickup-open-stores-container .pickup-open-stores {
    margin-bottom: 19px;
  }
}

/* MoreInfosScreen View */
.regionalization-container .opening-hours-container {
  margin: 16px 0;
}

.regionalization-container .opening-hours-container p,
.regionalization-container .opening-hours-container span {
  color: var(--color-grayScale, #1c1c1c);
  font-size: 16px;
  line-height: 20px;
}

.regionalization-container .opening-hours-container span {
  font-weight: 700;
}

.regionalization-container .container-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.regionalization-container .back-button {
  align-items: center;
  color: var(--color-main, #004a93);
  font-size: 14px;
  font-weight: 500;
  margin-right: 28px;
}

.regionalization-container .back-button-all-store{

  align-items: center;
  color: var(--color-main, #004a93);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  margin-right: 28px;

}
.regionalization-container .back-button-all-store span {
  transform: rotate(180deg);
  display: inline-flex;
  margin-right: 8px;
}


@media screen and (min-width: 769px) {
  .regionalization-container .back-button-all-store{
    align-items: center;
    color: var(--color-main, #004a93);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    margin-right: 28px;
  }
}


.regionalization-container .back-button span {
  transform: rotate(180deg);
  display: inline-flex;
  margin-right: 8px;
}

.regionalization-container .continue-button {
  padding: 10px 40px;
  border-radius: 2px;
  color: var(--color-grayScale-white, #fff);
  background-color: var(--color-main, #004a93);
  font-size: 16px;
  font-weight: 500;
  align-items: center;
  white-space: nowrap;
}

/* AllStoresScreen View */
.regionalization-container .stores-filter p {
  margin: 18px 0 2px;
  color: var(--color-grayScale, #1c1c1c);
  font-size: 14px;
  line-height: 18px;
}

.regionalization-container .stores-filter div {
  position: relative;
  display: flex;
}

.regionalization-container .stores-filter div input {
  display: block;
  width: 100%;
  border: 1px solid var(--color-grayScale-light, #c6c6c6);
  padding: 8px 40px 8px 12px;
  color: var(--color-grayScale-darkest, #545454);
  font-size: 16px;
  line-height: 24px;
}

.regionalization-container .stores-filter div .filter-ico-container {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 42px;
  padding: 12px;
}

.regionalization-container .stores-filter div input::placeholder {
  color: var(--color-grayScale-dark, #8d8d8d);
}

.regionalization-container .stores-filter div svg {
  overflow: unset;
}

.regionalization-container .divider {
  justify-content: center;
  height: 1px;
  margin-top: 26px;
  background-color: var(--color-grayScale-dark, #8d8d8d);
}

.regionalization-container .divider span {
  position: absolute;
  top: -10px;
  padding: 0 16px;
  background-color: var(--color-grayScale-white, #fff);
  color: var(--color-grayScale-dark, #8d8d8d);
  font-size: 16px;
  line-height: 20px;
}

.regionalization-container .stores-label {
  margin: 22px 0 14px;
  color: var(--color-grayScale, #1c1c1c);
  font-size: 14px;
  line-height: 18px;
}

.regionalization-container .stores-container {
  display: grid;
  gap: 16px;
}

.regionalization-container .store-container {
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 8px var(--color-support-shadow, rgba(0, 74, 147, 0.25));
}

.regionalization-container .store-container h3 {
  padding: 9px 16px;
  background-color: var(--color-main-faded, #e6edf4);
  color: var(--color-main, #004a93);
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
}

.regionalization-container .store-container div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}

.regionalization-container .store-container div p {
  margin-bottom: 16px;
  color: var(--color-grayScale-darkest, #545454);
  font-size: 14px;
  line-height: 18px;
}

.regionalization-container .store-container div .choose-store {
  justify-content: center;
  width: 100%;
  border: 1px solid var(--color-main, #004a93);
  border-radius: 2px;
  padding: 7px 8px;
  color: var(--color-main, #004a93);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}

@media screen and (min-width: 769px) {
  .regionalization-container .stores-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ConfirmScreen View */
.regionalization-container .address-container {
  margin-top: 24px;
  padding: 16px;
  background-color: var(--color-grayScale-faded, #f4f4f4);
}

.regionalization-container .address-container .address-title {
  display: flex;
  justify-content: space-between;
}

.regionalization-container .address-container span:not(.address-delivery) {
  display: block;
  margin-bottom: 2px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.regionalization-container .address-container span.address-delivery,
.regionalization-container .address-container .address-pickup {
  color: var(--color-grayScale-darkest, #545454);
  font-size: 16px;
  line-height: 20px;
}

.regionalization-container .address-container .edit-button {
  color: var(--color-support-links, #00289c);
  font-size: 16px;
  line-height: 20px;
  text-decoration: underline;
}