:root {
  --disabled-background-color: #f9fafb;
  --border-radius: 0;
  --input-padding: .75rem;
  --line-height: normal;
  --border-color: #d1d5db;
  --border-width: 1px;
  --font-size: 1rem;
  --font-weight: 300;
  --label-font-size: 1.25rem;
  --text-color: #09090b;
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --spacing: 1rem;

  /* woocommerce override */
  --wc-red: #f05252;
  --wc-green: #008236;
}

#customer_details :disabled,
#customer_details input:read-only {
  background-color: var(--disabled-background-color) !important;
}

.radio.required_field > .required {
  visibility: hidden !important;
}

/* #region UTILS */
.hidden {
  display: none;
}

.grid {
  display: grid;
  gap: var(--spacing);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.col-span-1 {
  grid-column: span 1 / span 1 !important;
}
/* #endregion */

/* #region SELECT2 */ 
.select2-container {
  width: 100% !important;
}

.select2-container .select2-selection {
  border-color: var(--border-color);
}

.select2-container--default .select2-selection--single {
  position: relative;
  border-radius: var(--border-radius);
}

.select2-container .select2-selection--single .select2-selection__rendered {
  font-size: var(--font-size);
  color: var(--text-color);
  padding: 0 !important;
  line-height: normal;
}

.select2-results__message {
  padding: 0 !important;
}

.woocommerce-page .select2-container .select2-search--dropdown {
  padding: 0;
}

.woocommerce-page .select2-container .select2-search--dropdown .select2-search__field {
  height: auto;
  font-size: var(--font-size);
  color: var(--text-color);
  border-color: var(--border-color);
  padding: var(--input-padding);
  line-height: var(--line-height);
  margin-bottom: 0.75rem !important;
}

.woocommerce-page .select2-container .select2-selection {
  padding: var(--input-padding);
  height: auto;
}

.woocommerce-page .select2-container .select2-dropdown {
  border-color: var(--border-color);
  padding: var(--input-padding);
}

.woocommerce-page .select2-container .select2-results__option {
  padding: 0.5rem;
  font-size: var(--font-size);
}

.select2-selection__clear {
  margin-right: 20px;
}

.woocommerce-page .select2-container .select2-selection .select2-selection__arrow {
  height: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  right: var(--input-padding);
}

.woocommerce-page .select2-container .select2-dropdown {
  border-radius: var(--border-radius);
}
/* #endregion */

/* #region CHECKOUT */
#wp--skip-link--target {
  margin-top: 0 !important;
}

.woocommerce-NoticeGroup-checkout {
  grid-column: span 5;
}

#customer_details {
  background-color: white;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

#customer_details h3 {
  font-size: 1.4rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.woocommerce-billing-fields__field-wrapper {
  display: grid;
  gap: var(--spacing);
  grid-template-columns: repeat(2, 1fr);
}

.woocommerce form .form-row {
  grid-column: span 2;
  margin-bottom: 0;
}

#billing_first_name_field,
#billing_last_name_field,
#billing_city_field,
#billing_state_field,
#billing_postcode_field {
  grid-column: span 1;
}

#billing_phone_field,
#billing_email_field {
  grid-column: span 2;
}

.woocommerce form .form-row-first, 
.woocommerce-page form .form-row-last{
  width: auto;
}

.woocommerce form .form-row .optional {
  display: none;
}

.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout main .woocommerce {
  max-width: var(--wp--style--global--wide-size);
}

#billing_customer_type_field .woocommerce-input-wrapper {
  display: flex;
  align-items: center;
}

#billing_customer_type_field .woocommerce-input-wrapper > input[type="radio"] {
  margin-top: 0;
  margin-right: 0.5rem;
}

#billing_customer_type_field .woocommerce-input-wrapper > label.radio {
  font-size: calc(var(--font-size) * 1.125);
  margin-bottom: 0;
  margin-right: 1rem;
  line-height: normal;
}

.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
  float: none;
  width: 100%;
}

.checkout {
  display: block;
}

#order_review_heading {
  display: none;
}

.woocommerce-page table.shop_table {
  background-color: #fff;
  border-color: var(--border-color);
  width: 100%;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.woocommerce-checkout #payment {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.woocommerce-page form .form-row label {
  font-weight: var(--font-weight);
  font-size: var(--label-font-size);
  margin-bottom: 0;
}

.woocommerce-page form .form-row textarea.input-text,
.woocommerce-page form .form-row input.input-text {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--input-padding);
  font-size: var(--font-size);
  font-family: var(--wp--preset--font-family--work-sans) !important;
  color: var(--text-color);
  line-height: var(--line-height);
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
  border-color: var(--wc-green);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: var(--wc-red);
}

.woocommerce-additional-fields {
  margin-top: var(--spacing);
}

.woocommerce-additional-fields > h3 {
  display: none;
}

.woocommerce-checkout .checkout .checkout-inline-error-message {
  margin-top: 0;
}

/* #endregion */

/* #region ADDITIONAL PARTICIPANT */
.tabs {
  display: flex;
  width: fit-content;
  list-style: none;
  padding: 0.25rem;
  margin-top: var(--spacing);
  margin-bottom: 0;
  background-color: var(--disabled-background-color);
}

.tabs > li.has-error {
  color: var(--wc-red);
}

.tabs li {
  padding: var(--input-padding);
  font-size: var(--font-size);
  font-weight: 400;
  cursor: pointer;
  outline: none;
}

.tabs li[data-state="active"] {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}

[role="tabpanel"][data-state="inactive"] {
  display: none;
}
/* #endregion */

/* #region ORDER_REVIEW */
#order_review {
  font-size: 1.125rem;
}

#order_review .cart_item {
  font-weight: var(--font-weight);
}

.woocommerce-terms-and-conditions-checkbox-text {
  font-weight: var(--font-weight);
}
/* #endregion */

/* #region ERROR */
.wc-block-components-notice-banner>.wc-block-components-notice-banner__content {
  font-size: var(--font-size);
}

#billing_email_error {
  font-size: var(--font-size);
  color: var(--wc-red);
}
/* #endregion */

/* #region COUPON */
.wc-block-components-notice-banner.is-info {
  border-radius: var(--border-radius);
}

.woocommerce form.checkout_coupon {
  margin: 1rem 0;
  border-radius: var(--border-radius);
  border-color: var(--border-color);
  box-shadow: var(--shadow);
  background-color: white;
}

.woocommerce form.checkout_coupon p:first-child {
  margin-top: 0;
  margin-bottom: var(--spacing);
  font-size: var(--label-font-size);
}

.wt_coupon_wrapper {
  padding: 0 !important;
}
/* #endregion */

@media (min-width: 768px) {
  .checkout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(5, 1fr);
  }

  #customer_details {
    grid-column: span 3;
  }

  #order_review {
    grid-column:  span 2;
    align-self: start;
    position: sticky;
    top: 45px;
  }

  #billing_phone_field,
  #billing_email_field,
  .tab-contents > .additional-phone,
  .tab-contents > .additional-email {
    grid-column: span 1 !important;
  }
}