* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0px;
}


#payment-form {
  min-width: 260px;
}

.buyer-inputs {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  border: none;
  margin: 0;
  padding: 0;
}

#card-container {
  min-height: 90px;
}

#gift-card-container {
  margin-top: 45px;
  min-height: 90px;
}

.gpay-button {
  width: 100%;
}

@media screen and (max-width: 500px) {
  #card-container {
    min-height: 140px;
  }
}

#card-input {
  margin-top: 0;
  margin-bottom: 40px;
}


button {
  color: #ffffff;
  background-color: #006aff;
  border-radius: 5px;
  cursor: pointer;
  border-style: none;
  user-select: none;
  outline: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding: 12px;
  width: 100%;
  box-shadow: 1px;
}

button:active {
  background-color: rgb(0, 85, 204);
}

button:disabled {
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.3);
  cursor: default;
}

#payment-status-container {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 8px;
  margin: 0 auto;
  width: 100%;
  min-height: 48px;
  visibility: hidden;
}

#payment-status-container.missing-credentials {
  width: 350px;
}

#payment-status-container.is-success:before {
  content: '';
  background-color: #00b23b;
  width: 16px;
  height: 16px;
  margin-right: 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.7071 6.70711C12.0968 6.31744 12.0978 5.68597 11.7093 5.29509C11.3208 4.90422 10.6894 4.90128 10.2973 5.28852L11 6C10.2973 5.28852 10.2973 5.28853 10.2973 5.28856L10.2971 5.28866L10.2967 5.28908L10.2951 5.29071L10.2886 5.29714L10.2632 5.32224L10.166 5.41826L9.81199 5.76861C9.51475 6.06294 9.10795 6.46627 8.66977 6.90213C8.11075 7.4582 7.49643 8.07141 6.99329 8.57908L5.70711 7.29289C5.31658 6.90237 4.68342 6.90237 4.29289 7.29289C3.90237 7.68342 3.90237 8.31658 4.29289 8.70711L6.29289 10.7071C6.68342 11.0976 7.31658 11.0976 7.70711 10.7071L11.7071 6.70711Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.7071 6.70711C12.0968 6.31744 12.0978 5.68597 11.7093 5.29509C11.3208 4.90422 10.6894 4.90128 10.2973 5.28852L11 6C10.2973 5.28852 10.2973 5.28853 10.2973 5.28856L10.2971 5.28866L10.2967 5.28908L10.2951 5.29071L10.2886 5.29714L10.2632 5.32224L10.166 5.41826L9.81199 5.76861C9.51475 6.06294 9.10795 6.46627 8.66977 6.90213C8.11075 7.4582 7.49643 8.07141 6.99329 8.57908L5.70711 7.29289C5.31658 6.90237 4.68342 6.90237 4.29289 7.29289C3.90237 7.68342 3.90237 8.31658 4.29289 8.70711L6.29289 10.7071C6.68342 11.0976 7.31658 11.0976 7.70711 10.7071L11.7071 6.70711Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
}

#payment-status-container.is-success:after {
  content: 'Payment successful';
  font-size: 12px;
  line-height: 1.8;
}

#payment-status-container.is-failure:before {
  content: '';
  background-color: #cc0023;
  width: 16px;
  height: 16px;
  margin-right: 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L6.58579 8L4.29289 10.2929C3.90237 10.6834 3.90237 11.3166 4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L8 9.41421L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071C12.0976 11.3166 12.0976 10.6834 11.7071 10.2929L9.41421 8L11.7071 5.70711C12.0976 5.31658 12.0976 4.68342 11.7071 4.29289C11.3166 3.90237 10.6834 3.90237 10.2929 4.29289L8 6.58579L5.70711 4.29289Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E%0A");
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L6.58579 8L4.29289 10.2929C3.90237 10.6834 3.90237 11.3166 4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L8 9.41421L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071C12.0976 11.3166 12.0976 10.6834 11.7071 10.2929L9.41421 8L11.7071 5.70711C12.0976 5.31658 12.0976 4.68342 11.7071 4.29289C11.3166 3.90237 10.6834 3.90237 10.2929 4.29289L8 6.58579L5.70711 4.29289Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E%0A");
}

#payment-status-container.is-failure:after {
  content: 'Payment failed' attr(data-error-type);
  font-size: 12px;
  line-height: 1.8;
}

#payment-status-container.missing-credentials:before {
  content: '';
  background-color: #cc0023;
  width: 16px;
  height: 16px;
  margin-right: 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L6.58579 8L4.29289 10.2929C3.90237 10.6834 3.90237 11.3166 4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L8 9.41421L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071C12.0976 11.3166 12.0976 10.6834 11.7071 10.2929L9.41421 8L11.7071 5.70711C12.0976 5.31658 12.0976 4.68342 11.7071 4.29289C11.3166 3.90237 10.6834 3.90237 10.2929 4.29289L8 6.58579L5.70711 4.29289Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E%0A");
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L6.58579 8L4.29289 10.2929C3.90237 10.6834 3.90237 11.3166 4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L8 9.41421L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071C12.0976 11.3166 12.0976 10.6834 11.7071 10.2929L9.41421 8L11.7071 5.70711C12.0976 5.31658 12.0976 4.68342 11.7071 4.29289C11.3166 3.90237 10.6834 3.90237 10.2929 4.29289L8 6.58579L5.70711 4.29289Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E%0A");
}

#payment-status-container.missing-credentials:after {
  content: 'applicationId and/or locationId is incorrect';
  font-size: 14px;
  line-height: 16px;
}

#payment-status-container.is-success.store-card-message:after {
  content: 'Store card successful';
}

#payment-status-container.is-failure.store-card-message:after {
  content: 'Store card failed';
}

#afterpay-button {
  height: 40px;
}


#apple-pay-button {
  height: 48px;
  width: 100%;
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;  
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: plain;
  -apple-pay-button-style: black;
}

#google-pay-button {
  height: 48px;
  width: 100%;
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;  
}

.header {
  width: 100%;
  height: 60px;
  box-shadow: 0px 10px 8px #C0C0C0;
  display: flex;
  align-items: center;
}

.header-title {
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  margin-left: 10px;
  text-decoration: none;
}


.page-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 20px;
  width: 100%;
  position: absolute;
  height: calc(100% - 60px);
  column-gap: 20px;
  justify-content: center;
  align-items: start;
  padding-top: 20px;
  padding-bottom: 15px;
}

.column-1 {
  height: 100%;
  background-color: #ffffff;
  position: relative;
  box-shadow: 0px 1px 10px #C0C0C0;
  z-index: 1;
  width: 470px;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #69b1b0 #cdcdcd;
  border-radius: 8px;
  transition: opacity 0.5s ease-out; /* Smooth fade effect */
  opacity: 1;
}

.column-2 {
  height: 100%;
  background-color: #ffffff;
  position: relative;
  box-shadow: 0px 1px 10px #C0C0C0;
  z-index: 1;
  width: 470px;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #69b1b0 #cdcdcd;
  border-radius: 8px;
  transition: opacity 0.5s ease-out; /* Smooth fade effect */
  opacity: 1;
}



.product-title {
  font-size: 22px;
  margin-top: 10px;
  font-weight: bold;
  font-family: 'arial';
  color: rgb(0, 0, 0);
  text-align: left;
}

.product-price {
  font-size: 22px;
  margin-top: 10px;
  font-family: 'arial';
  color: rgb(0, 0, 0);
  text-align: left;  
}

p {
  line-height: 1.8;
  color: #212529;
  font-size: 12px;
  font-family: 'arial';
  text-align: justify;
}

ol {

  text-align: justify;
  font-family: 'arial';
  line-height: 1.8;
  color: #212529;
  font-size: 12px;
}

ol > li::marker {
  font-weight: bold;
  color: #000000;
}

ul {
  text-align: justify;
  font-family: 'arial';
  line-height: 1.8;
  color: #212529;
  font-size: 12px;
}

ul > li::marker {
  font-weight: bold;
  color: #000000;
}


.product-variations-select {
  font-family: 'arial';
  border: 2px solid #69b1b04a;
  border-radius: 8px;
  height: 48px;
  width: 100%;
  color: rgba(0, 0, 0, 1);
  background-color: #ffffff;
  font-size: 12px;
  line-height: 1.2;
  padding: 0 40px 0 16px;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  margin-top: 12px;
}

.separator {
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 22px;
  margin-top: 22px;
  border-bottom: 1px solid #d99ec94f;
  width: 100%;
}

.separator-or-text {
  font-size: 12px;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
}
.separator-or-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;

}

.separator-diamond {
  color: #69b1b0;
  font-size: 16px;
  text-align: center;
  width: 100%;
  line-height: 1.5;
}

.form-group-container {
  max-width: 100%;
  padding-top: 16px;
  margin-left:10px;
  margin-right:10px;
}

.form-group-title {
  font-size: 14px;
  margin-top: 10px;
  font-weight: bold;
  font-family: 'arial';
  color: rgb(0, 0, 0);
  text-align: left;
}

.form-sub-group-container {
  width:100%;
  display:flex;
  flex-direction: row;
  margin-top: 12px;
}


.form-input-text {
  font-family: "arial";
  border: 2px solid #69b1b04a;
  border-radius: 8px;
  height: 48px;
  width: 100%;
  color: #000;
  font-size: 12px;
  line-height: 1.2;
  padding: 0 40px 0 16px;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.form-input-text:focus {
  outline: none;
  border-color: #ddd1ec !important; 
  transition: border-color .15s ease  
}

.form-input-text-resizable {
  font-family: "arial";
  border: 2px solid #69b1b04a;
  border-radius: 8px;
  min-height: 48px;
  width: 100%;
  color: #000;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 40px 0 16px;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  resize: vertical;
}

.form-input-text-resizable:focus {
  outline: none;
  border-color: #ddd1ec !important;
  transition: border-color .15s ease;
}

.payment-description {
  font-size: 12px;
}

.payment-lock-icon {
  vertical-align: text-bottom;
}

.payment-button {
  min-height: 48px;
  max-height: 48px;
  background-color: #2996cc;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  padding: 5px 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

}

.payment-button:disabled {
  background-color: #2996cc;
  color: #fff;
  cursor: default;
}


.payment-button-spinner {
  border: 5px solid #ffff; /* Light grey */
  border-top: 5px solid #69b1b0; /* Blue */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
  margin: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}





/*--------------------------------------------------*/
/*Image Slider                                      */
/*--------------------------------------------------*/

.slider-container {
  position: relative;
  margin-bottom: 10px;
}

.slide {
  position: relative;
  width: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  max-height: 350px;
  display: none;
}

.active {
  opacity: 1;
  display: block;
}

.slider-navigation-container {
  display: flex;
  row-gap: 20px;
  column-gap: 20px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.nav-button {
  background-color: rgb(255, 255, 255);
  color: black;
  border: 2px solid #69b1b04a;
  cursor: pointer;
  font-size: 12px;
  width: 100%;
  border-radius: 8px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-button:hover {
  border-color: #ddd1ec;
}

#prev {
  left: 10px;
}

#next {
  right: 10px;
}


/*--------------------------------------------------*/
/*Payment Recipt                                    */
/*--------------------------------------------------*/

.hide-divs {
  opacity: 0; 
  pointer-events: none; 
}

.show-payment-receipt {
  opacity: 1 !important; 
}

.payment-receipt {
  height: 100%;
  background-color: #ffffff;
  position: relative;
  box-shadow: 0px 1px 10px #C0C0C0;
  z-index: 1;
  width: 470px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #69b1b0 #cdcdcd;
  border-radius: 8px;
  transition: opacity 1.5s ease; /* Smooth fade effect */
  opacity: 0;
}

.payment-receipt-image {
  width: 100%;
  object-fit: contain;
  margin-bottom: 10px;
}

.payment-receipt-header {
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #69b1b0;
  box-shadow: 0px 10px 8px #C0C0C0;
  text-align: center;
  line-height: 1.8;
  min-height: 48px;
  padding: 0px 5px;
  margin-bottom: 20px;
}

.payment-receipt-body {
  padding: 0px 20px;
}

.payment-receipt-entry {
  width: 100%;
  border-left: 2px solid #68afa7;
  padding-left: 10px;
  margin: 10px 0px 10px 0px;
}

.payment-receipt-entry p {
  margin: 0px;
  margin-top: 5px;
}

.payment-receipt-entry-row {
  display: flex;
  justify-content: space-between;
}


.payment-receipt-date-of-purchase-purchase {
  width: 100%;
  padding-left: 10px;
  margin: 10px 0px 10px 0px;
}

.payment-receipt-date-of-purchase-purchase p {
  margin: 0px;
  margin-top: 5px;
}

.payment-receipt-date-of-purchase-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*--------------------------------------------------*/
/*Dynamic Settings                                  */
/*--------------------------------------------------*/

@media (max-width: 1000px) {

  .column-1 {
    width: calc(50% - 20px);
  }

  .column-2 {
    width: calc(50% - 20px);
  }

}

@media (max-width: 920px) {

  .page-layout {
    position: relative;
    flex-direction: column;
    align-items: center;
  }

  .column-1 {
    height: auto;
    min-width: 420px;
  }

  .column-2 {
    height: auto;
    min-width: 420px;
  }

  .payment-receipt {
    padding-bottom: 20px;
  }

}

@media (max-width: 490px) {

  .payment-receipt {
    width: calc(100% - 20px);
  }

  .payment-receipt-entry p {
    text-align: left;
  }

  .payment-receipt-date-of-purchase-purchase p {
    text-align: left;
  }

}

@media (max-width: 460px) {

  .column-1 {
    min-width: calc(100% - 20px);
    padding: 10px 5px 10px 5px;
  }

  .column-2 {
    min-width: calc(100% - 20px);
    padding: 10px 5px 10px 5px;
  }


}

@media (max-width: 350px) {

  .payment-button {
    font-size: 15px;
  }

}