:root {
  --green: #28a745;
}
html, body {
  overflow-x: visible;
}
.text-green {
  color: var(--green);
}
.bg-green {
  background-color: var(--green);
  color: var(--white);
}


/* for positioning the modal relative to the page, not the viewport */
main {
  position: relative;
}

.loading {
  opacity: 0.5;
  pointer-events: none;
}
.loading::after {
  content: "...";
}
.cart-item {
  margin-bottom: 1em;
}

.product-image {
  width: 80px;
  height: auto;
}

.submit-button-wrapper {
  display: block;
  position: relative;
  
}

/* loading animation for the cart */
.loading-cart-animation {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}
.loading-cart-animation::after {
  content: "";
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  transform: translate(-50%, -50%);
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid var(--primary); /* Blue */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;

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

body:not(.user-logged-in) .no-custom-donation-option {
  .form-item {
    label:not(.form-required) {
      margin-top: 6px;
    }
  }
}

.ucg-order-handler-user-registration {
  input[type="submit"] {
    width: 100%;
  }
}
#checkout-login-form-wrapper {
  .form-item-name label[for="edit-name"] {
    margin-top: 0px!important;
  }
}

.ucg-order-handler-modal-checkout {
  .js-form-item-contact-email label {
    margin-top: 6px!important;
  }
}

.ucg-order-handler-user-registration {
  .form-item-name {
    label[for="edit-name"] {
      margin-top: 0px!important;
    }
  }
}

.ucg-order-handler-checkout, .ucg-order-handler-modal-checkout, #checkout-login-modal, .ucg-order-handler-user-registration {

  /* @todo-L Apply appropriate styles to *all* address elements simultaneously,
  instead of this super hacky method... */

  .form-item-shipping-address-address-line1, .form-item-billing-address-address-line1 {
      position: relative;
  }

  .is-valid.form-control {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%23008000' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>")!important;
    
  }

  .form-item-shipping-address-address-line1.fancy-autocomplete, .form-item-billing-address-address-line1.fancy-autocomplete {
    svg {
      position: absolute;
      right: 1em;
      top: 1.25em;
    }

    .is-valid.form-control {
      background-position: right calc(2.4em + 0.1875rem) center;
    }
  }

  .form-item-name label[for="edit-name"] {
      margin-top: 6px;
  }
  #edit-actions {
    input[type="submit"] {
      color: var(--white);
      font-size: calc(16px + 6 *(100vw - 320px)/1600);
      &:hover {
        color: var(--charcoal);
      }
    }
  }

  .messages-container {
    .alert-error {
      margin: 0;
      margin-bottom: 2em;

      ul {
        ul {
          margin-left: 20px;
        }
      }
    }
  }

  .form-item--error-message {
    color: var(--bs-danger);
    font-weight: normal;
    font-size: .9em;
    strong {
      font-weight: normal;
    }
  }
  .form-item--error-message::before {
    content: none;
  }


  .is-invalid, .is-invalid.form-control, .form-item.error, .form-control.error {
    border-color: var(--bs-danger)!important;
  }
  .form-item-shipping-address-address-line1.fancy-autocomplete:after, .form-item-billing-address-address-line1.fancy-autocomplete:after {
      content: "\f002";
      position: absolute;
      top: 18px;
      right: 15px;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: var(--fa-display, inline-block);
      font-style: normal;
      font-variant: normal;
      line-height: 1;
      text-rendering: auto;
      font-family: var(--fa-style-family, "Font Awesome 6 Pro");
      font-weight: var(--fa-style, 900);
      pointer-events: none;
      
  }
  .form-item-shipping-address-address-line1.fancy-autocomplete .is-invalid, .form-item-billing-address-address-line1.fancy-autocomplete .is-invalid {
    background-position: right calc(2.4em + 0.1875rem) center;
  }

  .form-required::after,
  .is-conditionally-required label::after {
      content: "*";
      background: none;
      color: var(--bs-danger);
      position: relative;
      top: 5px;
  }
  /*.is-conditionally-required label::after {
    top: 5px;
    left: 1px;
  }*/

  /*#ach-payment-container {
   .form-item:not(.is-conditionally-required) {
      label {
        margin-top: 6px;
      }
    }
  }*/

  .address-container-inline {
      display: flex;
      gap: 1em;
      > .form-item {
          margin: 0;
          flex: 1 50%;
      }
  }

  .shipping-container.contact-container {
    label {
      margin-top: 5px;
    }
    .js-form-type-email {
      label {
        margin-top: 1px;
      }
    }
  }
  .form-item:not(.js-form-type-checkbox):not(.js-form-type-radio) {
      position: relative;

      .form-control {
          padding: 17px 8px 8px 12px;
          border: var(--bs-border-width) solid var(--bs-border-color);
      }
      .form-select,.form-number, #edit-shipping-address-address-line2, #edit-billing-address-address-line2 {
          padding: 12px;
          border: var(--bs-border-width) solid var(--bs-border-color);
          
      }

      label {
          position: absolute;
          top: 7px;
          left: 12px;
          font-size: 1em;
          color: var(--body-text);
          transition: all 0.2s ease-out;
          pointer-events: none;
      }
      input:focus ~ label,
      input:not(:placeholder-shown) ~ label {
          top: -1px;
          left: 8px;
          font-size: 12px;
          color: var(--body-text);
          padding: 0 4px;
          opacity: .6;
      }
  }
  .form-type-select:not(.form-item-shipping-address-administrative-area):not(.form-item-billing-address-administrative-area) {
    
      label {
          visibility: hidden;
          position: absolute;
          top: -999em;
      }
  }

  .fancy-autocomplete > div {
    width: 100%;
  }
  .js-form-item-contact-phone {

    .iti {
      width: 100%;
      .iti__country-container {
        top: 8px;
      }
      .iti__dropdown-content {
        background-color: var(--bs-body-bg);
      }
    }
    label {
      top: -1px!important;
      left: 8px!important;
      font-size: 12px!important;
      color: var(--body-text);
      padding: 0 4px!important;
      opacity: .6;
    }
    input {
      text-indent: 12px;
    }
    &:before {
      content: "+";
      position: absolute;
      top: 18px;
      left: 12px;
      color: var(--body-text);
    }
  }
  .form-item-shipping-address-administrative-area.form-type-select.form-item, .form-item-billing-address-administrative-area.form-type-select.form-item {
    select.form-control {
      padding-top: 17px;
      padding-bottom: 8px;
    }
    label {
      top: -1px;
      left: 8px;
      font-size: 12px;
      color: var(--body-text);
      padding: 0 4px;
      opacity: .6;
    }
  }
  
}

/* dark theme overrides */
[data-bs-theme="dark"] {
  --green: green;
}
[data-bs-theme="dark"] .cart-items-wrapper .text-danger {
  color: #c06568!important;
}
[data-bs-theme="dark"] .address-autocomplete-dropdown {
  background: var(--bs-body-bg);
  color: var(--white);
}