/* Tribe Tickets Styles */

:root {
  --tec-color-accent-primary: #323db8;
  --tec-color-accent-primary-200: #161f81;
  --tec-color-accent-disabled: #9d9b9b;
  --tec-color-button-disabled-background: #3e54fb11;
  --tec-color-button-disabled-border: #384ce056;
  --tec-font-weight-medium: 500;
  --tec-font-weight-semi-bold: 600;
  --tec-color-alt: #d7daffa9;
  --tec-color-alt-200: #d9d9dd2b;
  --tec-color-alt-300: #e8e9f745;
}

.hide-ticket-modal .close {
  display: none;
}

.tet_plugin {
  /* button styles */
  * {
    font-family: "Work Sans", sans-serif;
  }

  .hide-ticket-modal {
    #tribe-tickets__tickets-form,
    .modal-header {
      display: none;
    }

    .modal-body {
      padding: 0;
    }

    .modal-content {
      border: none;
    }

    .tribe-common-b2.tribe-tickets__tickets-item-total-wrap {
      font-weight: 600 !important;
    }
  }
  .modal-title {
    line-height: normal;
    display: -webkit-box;
    /* Required for WebKit line clamp */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    max-width: 100%;

    /* Modern line clamp (supported in modern browsers) */
    line-clamp: 1;
    /* ✅ Standard property */
    -webkit-line-clamp: 1;
    /* ✅ WebKit fallback */
  }

  .venue {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-clamp: 1;
    -webkit-line-clamp: 1;
  }
  .tribe-tickets__tickets-form {
    .tribe-tickets__tickets-item {
      column-gap: 1rem;

      /* Fade all non-active items */
      &.fe-ticket--inactive {
        opacity: 0.5;
        pointer-events: none;
        /* If you also want to block mouse interaction without JS (optional): */
        /* If you do this, consider leaving links focusable for a11y. */
      }

      .tribe-tickets__tickets-item-content-title-container {
        .tribe-tickets__tickets-item-content-title {
          font-weight: var(--tec-font-weight-semi-bold);
          /* color: var(--bs-gray-900); */
        }

        .tribe-tickets__tickets-item-content-sale-label {
          background-color: var(--tec-color-button-disabled-background);
          font-weight: var(--tec-font-weight-medium);
          color: var(--bs-altPrimary);
        }
      }

      .tribe-tickets__tickets-item-details-content {
        display: block;

        .event-end-date {
          margin: unset;
          line-height: unset;
          color: unset;
        }
      }

      .tribe-tickets__tickets-item-extra {
        align-self: unset;
        padding: 0rem;

        .tribe-tickets__tickets-sale-price {
          font-weight: var(--tec-font-weight-medium);
          color: var(--bs-gray-900);
        }

        .tribe-tickets__tickets-item-extra-available {
          display: none;
        }
      }

      .tribe-tickets__tickets-item-quantity {
        align-self: unset;

        .tribe-tickets__tickets-item-quantity-number {
          height: unset;
        }

        .tribe-tickets__tickets-item-quantity-add {
          background-color: var(--bs-altPrimary);
          color: #fff;
          width: unset;
          height: unset;
          margin: unset;
          border-radius: var(--bs-border-radius);
          padding: 0.25rem;
        }

        .tribe-tickets__tickets-item-quantity-remove {
          background-color: var(--tec-color-button-disabled-background);
          color: var(--tec-color-accent-disabled);
          width: unset;
          height: unset;
          margin: unset;
          border-radius: var(--bs-border-radius);
          border: 0.5px solid var(--tec-color-button-disabled-border);
          padding: 0.25rem;
        }
      }
    }

    .tribe-tickets__tickets-footer {
      /* justify-content: space-between; */

      .tribe-tickets__tickets-buy.tribe-common-c-btn {
        border-radius: var(--bs-border-radius);
        padding: 1rem 2rem;
        background-color: var(--bs-altPrimary);
        margin: 0rem 0rem 0rem auto;

        &:disabled,
        &.disable-checkout {
          background-color: var(--tec-color-button-disabled-background);
          color: var(--tec-color-text-disabled);
          cursor: not-allowed;
          border-radius: var(--bs-border-radius);
          padding: 1rem 2rem;
        }

        &:hover {
          background-color: var(--tec-color-accent-primary-200);
        }

        .tribe-tickets__tickets-footer-quantity-number {
          color: inherit;
          font-weight: inherit;
        }
      }
      .tribe-formatted-currency-wrap {
        font-weight: var(--tec-font-weight-medium);
        font-size: 0.9rem;
      }
    }
  }

  .tribe-dialog {
    .tribe-dialog__wrapper.tribe-modal__wrapper--ar {
      max-width: 1100px;
      display: flex;
      flex-direction: column;
      height: 85vh;
      padding: 2.5rem;
      width: 70vw;

      div[role="document"] {
        height: 100%;
        justify-content: flex-start;

        .tribe-dialog__close-button:focus {
          outline: none !important;
        }

        .tribe-dialog__content.tribe-modal__content {
          flex-grow: 1;
          overflow: hidden;
          padding: 0;
        }

        #tribe-tickets__modal-form {
          height: 100%;
          display: flex;
          flex-direction: column;
          overflow: hidden;

          .tribe-modal-cart {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            .tribe-tickets__tickets-item {
              padding: 1rem;
              border-radius: 1rem;
              border: 1px solid var(--tec-color-alt);
              column-gap: 1rem;
              background-color: var(--tec-color-alt-300);
              grid-template-columns: 0.5fr 10fr 2fr 2fr 2fr;

              .tribe-tickets__tickets-item-content-title {
                font-weight: var(--tec-font-weight-medium);
              }

              .event-end-date {
                margin: unset;
              }

              .tribe-tickets__tickets-item-extra {
                align-self: unset;
                padding: 0rem;
                align-items: end;

                .tribe-tickets__tickets-sale-price {
                  font-weight: var(--tec-font-weight-medium);
                }
              }

              .tribe-tickets__tickets-item-total-wrap {
                font-weight: var(--tec-font-weight-medium);
              }

              .tribe-tickets__tickets-item-quantity {
                .tribe-tickets__tickets-item-quantity-number {
                  height: unset;
                }

                .tribe-tickets__tickets-item-quantity-add {
                  background-color: var(--bs-altPrimary);
                  color: #fff;
                  width: unset;
                  height: unset;
                  margin: unset;
                  border-radius: var(--bs-border-radius);
                  padding: 0.25rem;
                }

                .tribe-tickets__tickets-item-quantity-remove {
                  background-color: var(--tec-color-button-disabled-background);
                  color: var(--tec-color-accent-disabled);
                  width: unset;
                  height: unset;
                  margin: unset;
                  border-radius: var(--bs-border-radius);
                  padding: 0.25rem;
                }
              }
            }

            .tribe-tickets__tickets-footer {
              padding: 0.5rem 1rem;

              .tribe-tickets__tickets-footer-total {
                display: flex;
                gap: 1rem;

                .tribe-tickets__tickets-footer-total-wrap {
                  font-weight: var(--tec-font-weight-semi-bold);
                }
              }
            }
          }

          .tribe-tickets__attendee-tickets {
            margin: 0rem;
            flex-grow: 1;
            overflow-y: scroll;

            #tribe-modal__attendee-registration {
              margin: 0rem;

              .tribe-tickets__attendee-tickets-item {
                background-color: var(--tec-color-alt-200);
                display: flex;
                flex-wrap: wrap;
                border-width: 1px;
                border-radius: 15px;

                .tribe-tickets__attendee-tickets-item-header {
                  flex-basis: 100%;
                }

                .tribe-tickets__form-field {
                  width: 50%;
                  flex-flow: column;
                  --input-x-padding: 1rem;
                }

                .tribe-tickets__form-field--text,
                .tribe-tickets__form-field--email,
                .tribe-tickets__form-field--url {
                  position: relative;

                  .tribe-tickets__form-field-label {
                    position: absolute;
                    top: 8px;
                    left: var(--tec-spacer-3);
                    font-size: 0.625rem;
                    color: #666;
                    opacity: 0;
                    pointer-events: none;
                    transition: all 0.2s ease;
                    font-weight: var(--tec-font-weight-regular);
                  }

                  &:has(.tribe-tickets__form-field-input:not(:placeholder-shown)) .tribe-tickets__form-field-label,
									/* &:has(.tribe-tickets__form-field-input:focus) .tribe-tickets__form-field-label, */
									&:has(.tribe-tickets__form-field-input:-webkit-autofill) .tribe-tickets__form-field-label {
                    top: 4px;
                    opacity: 1;
                  }

                  input {
                    padding: var(--tec-spacer-2) var(--tec-spacer-3)
                      var(--tec-spacer-1);

                    &:focus {
                      outline: none;
                      border: 1px solid var(--tec-color-alt);
                    }
                  }
                }

                .tribe-tickets__attendee-tickets input[type="text"],
                .tribe-tickets__attendee-tickets input[type="email"],
                .tribe-tickets__attendee-tickets input[type="number"],
                .tribe-tickets__attendee-tickets input[type="url"] {
                  height: 48px;
                }
              }

              .ticket_terms {
                font-size: 0.8rem;
              }

              .tribe-tickets__attendee-tickets-footer {
                position: sticky;
                bottom: 0;
                padding: 1rem;
                background: var(--tec-color-background);
                border-top: solid var(--tec-color-border-secondary);
                gap: 1rem;

                button {
                  width: 100%;
                  border-radius: var(--bs-border-radius);
                  padding: 1rem 2rem;
                  background-color: var(--bs-altPrimary);
                  color: var(--bs-light);
                  text-decoration: none;
                  border: 1px solid var(--bs-altPrimary);
                  font-weight: 700;

                  &:disabled {
                    background-color: var(
                      --tec-color-button-disabled-background
                    );
                    color: var(--tec-color-text-disabled);
                    cursor: not-allowed;
                    border-radius: var(--bs-border-radius);
                    padding: 1rem 2rem;
                  }

                  &:hover {
                    background-color: var(--tec-color-accent-primary-200);
                    color: var(--bs-light);
                  }
                  &.tribe-tickets__attendee-tickets-footer-cart-button {
                    background-color: unset;
                    color: var(--bs-altPrimary);
                  }
                }
                & > span {
                  margin: 0 !important;
                }
              }
            }
          }
        }
      }
    }
  }

  @media only screen and (max-width: 732px) {
    .tribe-tickets__tickets-form {
      .tribe-tickets__tickets-item {
        .tribe-tickets__tickets-item-details-content {
          grid-column: span 3;
        }
      }
    }

    .tribe-dialog {
      height: 100dvh;

      .tribe-dialog__wrapper.tribe-modal__wrapper--ar {
        padding: 2rem 1rem 1rem;
        height: 100dvh;
        width: 100dvw;

        div[role="document"] {
          #tribe-tickets__modal-form {
            .tribe-modal-cart {
              .tribe-tickets__tickets-item {
                grid-template-columns: 5fr 1fr 1fr;

                .tribe-common-b2.tribe-tickets__tickets-item-total-wrap {
                  display: none;
                }

                .tribe-tickets__tickets-item-quantity {
                  align-self: unset;
                  padding: 0rem;

                  .tribe-tickets__tickets-item-quantity-number {
                    margin: 0rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.tribe-tickets__tickets-item .event-date span {
  position: relative;
  top: -3px;
}

.tribe-modal__title {
  margin-bottom: 30px !important;
}

@media only screen and (max-width: 732px) {
  .tribe-modal__wrapper--ar {
    padding-left: 15px !important;
  }

  #tribe-tickets__modal-form {
    .tribe-tickets__tickets-item-quantity-number {
      width: 25px !important;
      height: 25px !important;
    }

    .tribe-tickets__tickets-item-quantity-add {
      width: 25px !important;
      height: 25px !important;
      padding-bottom: 7px !important;
    }

    .hide-ticket-modal .tribe-common-b2.tribe-tickets__tickets-item-total-wrap {
      position: relative;
      top: -3px;
    }
  }
}

@media (min-width: 576px) {
  #register-now .modal-dialog {
    max-width: 580px;
  }
}

/* .tribe-tickets__attendee-tickets input[type="text"],
.tribe-tickets__attendee-tickets input[type="email"],
.tribe-tickets__attendee-tickets input[type="number"],
.tribe-tickets__attendee-tickets input[type="url"] {
	height: 48px;
} */

.tribe-tickets__form-field-input-wrapper {
  position: relative;
}

.disable-checkout {
  pointer-events: none;
}

@media only screen and (max-width: 732px) {
  .tribe-common a.tribe-common-c-btn {
    width: auto !important;
  }

  .tribe-tickets__commerce-checkout-header-link-back-to-event {
    left: 15px !important;
  }

  .event-tickets .tribe-tickets__form .tribe-tickets__form-field {
    width: 100% !important;
  }

  #tec-tc-purchaser-email {
    height: 44px;
  }

  .page-template-template-page footer .container,
  .page-tribe-attendee-registration footer .container {
    padding-top: 30px;
  }

  .page-tribe-attendee-registration .navbar {
    top: 0;
  }

  .page-tribe-attendee-registration
    .entry
    .entry-content
    .event-tickets
    .tribe-tickets__tickets-item,
  .page-tribe-attendee-registration
    .event-tickets
    .tribe-tickets__tickets-item {
    display: block;
  }

  .page-tribe-attendee-registration .tribe-tickets__tickets-item-extra,
  .page-tribe-attendee-registration .tribe-ticket-quantity,
  .page-tribe-attendee-registration .tribe-tickets__tickets-item-total-wrap {
    width: 33%;
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .page-tribe-attendee-registration .tribe-tickets__tickets-footer {
    display: block;
    overflow: hidden;
    width: 100%;
  }
}

.tribe-dialog__wrapper.tribe-modal__wrapper--ar {
  .tribe-dialog__title.tribe-modal__title.tribe-common-h5.tribe-common-h--alt.tribe-modal--ar__title {
    font-size: 16px;
    font-weight: 600;
  }

  .tribe-tickets__tickets-footer.tribe-tickets__tickets-footer--active {
    border: none;
  }

  .tribe-tickets__tickets-item.post-3530.tec_tc_ticket.type-tec_tc_ticket.status-publish.hentry {
    border: none;
    border: 1px solid #f1f1f1;
    padding: 20px;
    border-radius: 10px;

    .tribe-common-h4.tribe-tickets__tickets-item-quantity {
      .tribe-common-h3.tribe-common-h4--min-medium.tribe-tickets__tickets-item-quantity-number-input {
        font-weight: 600;
      }

      .tribe-tickets__tickets-item-quantity-remove {
        background: #f1f1f1;
        height: 24px;
        width: 24px;
        display: flex;
        justify-content: center;
        align-items: end;
        color: #fff;
        border-radius: var(--bs-border-radius);
      }

      .tribe-tickets__tickets-item-quantity-add {
        background: #7067e6;
        height: 24px;
        width: 24px;
        display: flex;
        justify-content: center;
        align-items: end;
        color: #fff;
        border-radius: var(--bs-border-radius);
      }
    }

    .tribe-tickets__form-field-label {
      font-weight: 500;
      margin-bottom: 10px;
    }
  }

  .tribe-common-h5.tribe-common-h5--min-medium.tribe-common-h--alt.tribe-ticket__tickets-heading {
    font-size: 20px;
    font-weight: 600;
  }

  .event-tickets
    .tribe-tickets__attendee-tickets-item.tribe-tickets__form
    .tribe-tickets__form-field {
    float: inline-start;
    display: inline-block;
    width: 50%;
  }

  .tickets__attendee-tickets-item {
    &::before {
      display: none;
    }

    border: none;
  }

  .tickets__attendee-tickets-item {
    overflow: hidden;
    border-width: 1px;
    border-radius: 10px;
  }

  .event-tickets
    .tribe-tickets__attendee-tickets-item.tribe-tickets__form
    .tribe-tickets__form-field {
    flex-flow: column;
    width: 50%;
    float: inline-start;
  }

  .tribe-tickets__attendee-tickets-item {
    overflow: hidden;
    border-width: 1px;
    border-radius: 10px;
  }

  .tribe-tickets__attendee-tickets-item.tribe-tickets__form
    .tribe-tickets__form-field-label {
    flex: 0 !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
  }

  .tribe-tickets__form .tribe-tickets__form-field-input-wrapper {
    width: 97% !important;
  }
}

@media only screen and (max-width: 768px) {
  .tribe-common-b1.tribe-common-b2--min-medium {
    width: 100% !important;
  }

  .tribe-tickets__tickets-item.post-3530.tec_tc_ticket.type-tec_tc_ticket.status-publish.hentry {
    border: 1px solid rgb(241, 241, 241);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;

    .tribe-tickets__tickets-item-quantity-number {
      height: 25px;
      width: 25px;
    }

    .event-tickets .tribe-tickets__attendee-tickets-item {
      border-width: 1px;
    }
  }
}