/* Import Lato font from Google CDN */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

:root {
  --adt-primary-color: #E63D78;
  --adt-white-color: #ffffff;
  --adt-gray-color: #D5D4DC;
  --adt-dark-gray-color: #666666;
  --adt-light-gray-color: #F9FAFB;
  --adt-black-color: #000000;
  --adt-light-black-color: #333333;
  --adt-red-color: #D91A1A;

  /* border color */
  --adt-border-gray-color: #DBDBDB;
  
  --adt-label-default-bg-color: #eff0f1;
  --adt-label-default-text-color: #666666;
  --adt-label-success-bg-color: #F0FFF8;
  --adt-label-success-text-color: #00974F;
}

/* Custom styles for manage-feeds page */
.adt-tw-wrapper {
  /* This wrapper ensures Tailwind doesn't affect other elements */
  /* You can add any global Tailwind overrides here */
  /* Apply Lato font family to all elements within the wrapper */
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Ensure Tailwind box-sizing is applied to all elements within the wrapper */
.adt-tw-wrapper *, 
.adt-tw-wrapper ::before, 
.adt-tw-wrapper ::after {
//   box-sizing: border-box;
//   border-width: 0;
//   border-style: solid;
//   border-color: #e5e7eb;
}

.adt-tw-wrapper a {
  text-decoration: none;

  &:focus,
  &:active {
    outline: none;
    box-shadow: none;
  }
}

.wrap {
}

.adt-pfp-manage-feeds {
}

.toplevel_page_woo-product-feed #wpwrap {
  @apply adt-tw-bg-gray-100;
}

.adt-button {
  @apply adt-tw-bg-white adt-tw-text-base adt-tw-text-gray-700 adt-tw-font-medium adt-tw-px-4 adt-tw-py-2 adt-tw-rounded adt-tw-transition adt-tw-duration-200;
  @apply adt-tw-inline-flex adt-tw-items-center adt-tw-justify-center adt-tw-shadow-sm;
  @apply adt-tw-border adt-tw-border-gray-300;
  @apply adt-tw-rounded-lg;
  @apply adt-tw-cursor-pointer;
  
  /* Disable text selection */
  user-select: none;
  -webkit-user-select: none;

  border-style: solid;
  text-decoration: none;
  white-space: nowrap;

  &:disabled {
    @apply adt-tw-bg-gray-200 adt-tw-text-gray-400 !important;
    cursor: not-allowed !important;
  }

  &:hover {
    @apply adt-tw-bg-gray-50;
  }
  
  &:active,
  &:focus {
    @apply adt-tw-bg-gray-50;
    @apply adt-tw-text-gray-700;
    box-shadow: none;
  }

  &.adt-button-primary {
    @apply adt-tw-bg-primary adt-tw-border adt-tw-border-transparent;
    @apply adt-tw-text-white;

    &:hover {
      @apply adt-tw-bg-primary-dark;
      @apply adt-tw-text-white;
    }
  }
  
  &.adt-button-outline {
    @apply adt-tw-bg-transparent adt-tw-text-primary adt-tw-border;
    border-color: var(--adt-border-gray-color);
    color: var(--adt-light-black-color);
    box-shadow: none;
    border-width: 1px;
    outline: 0;
    
    &:hover {
      @apply adt-tw-bg-primary adt-tw-text-white;
      border-color: var(--adt-primary-color);
    }

    &.adt-button-outline-primary {
      @apply adt-tw-bg-transparent adt-tw-text-primary adt-tw-border adt-tw-border-primary;

      &:hover {
        @apply adt-tw-bg-primary adt-tw-text-white;
        border-color: var(--adt-primary-color);
      }
    }
  }

  &.adt-button-disabled {
    @apply adt-tw-bg-gray-200 adt-tw-text-gray-400;
    cursor: not-allowed;
  }

  &.adt-button-lg {
    @apply adt-tw-px-6 adt-tw-py-3;
    @apply adt-tw-text-base;
  }

  &.adt-button-sm {
    @apply adt-tw-px-3 adt-tw-py-2;
    @apply adt-tw-text-sm;
  }

  &.adt-button-xs {
    @apply adt-tw-px-2 adt-tw-py-1;
  }

  [class*="adt-tw-icon-"] {
    @apply adt-tw-h-[22px] adt-tw-w-[22px];
  }

}

.wp-admin .adt-tw-wrapper .adt-select2-container {
  @apply adt-tw-text-sm adt-tw-border adt-tw-border-gray-300 adt-tw-rounded-md;
  @apply adt-tw-py-3 adt-tw-px-4;
  @apply adt-tw-flex adt-tw-items-center adt-tw-justify-between;
  border-width: 1px;
  border-radius: 12px;
  border-style: solid;
  border-color: var(--adt-gray-color);
  box-sizing: border-box;
  margin: 0;
  text-decoration: none;
  height: auto;
  background-color: var(--adt-light-gray-color);

  &:active,
  &:focus {
    box-shadow: none;
    @apply adt-tw-border-primary;
  }

  .select2-selection__rendered{
    line-height: 22px;
    padding: 0 3.5rem 0 0;
  }

  .select2-selection__arrow {
    right: 0.5rem;
    top: 10px;
  }
}

.wp-admin .adt-tw-wrapper .select2-container.select2-container--open {
  &.select2-container--above {
    .adt-select2-container {
      border-top-color: transparent
    }
  }
  
  &.select2-container--below {
    .adt-select2-container {
      border-bottom-color: transparent;
    }
  } 
}

.wp-admin .select2-container .adt-select2-dropdown {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  border-color: var(--adt-primary-color);

  &.select2-dropdown--above {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  &.select2-dropdown--below {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.wp-admin .adt-tw-wrapper .select2-container--focus.select2-container .adt-select2-container,
.wp-admin .adt-tw-wrapper .select2-container--focus.select2-container .adt-select2-container,
.wp-admin .adt-select2-dropdown {
  box-shadow: none;
  @apply adt-tw-border-primary;
}

.adt-label {
  @apply adt-tw-text-sm adt-tw-text-gray-500;
  @apply adt-tw-inline-flex adt-tw-items-center adt-tw-justify-center;
  @apply adt-tw-px-2 adt-tw-py-1;
  @apply adt-tw-rounded-lg;
  
  background-color: var(--adt-label-default-bg-color);
  color: var(--adt-label-default-text-color);

  &.adt-label-success {
    background-color: var(--adt-label-success-bg-color);
    color: var(--adt-label-success-text-color);
  }
}

.adt-tooltip {
  @apply adt-tw-relative adt-tw-flex adt-tw-items-center;

  .adt-tooltip-content {
    @apply adt-tw-hidden adt-tw-absolute adt-tw-left-1/2 adt-tw-bottom-full adt-tw-mb-2 adt-tw-px-2 adt-tw-py-1 adt-tw-bg-gray-800 adt-tw-text-white adt-tw-text-xs adt-tw-rounded adt-tw-whitespace-nowrap;
    transform: translateX(-50%);
    z-index: 100;

    &::before {
      @apply adt-tw-content-[''] adt-tw-absolute adt-tw-w-0 adt-tw-h-0;
      @apply adt-tw-left-1/2 adt-tw-bottom-[-5px] adt-tw-transform adt-tw-translate-x-[-50%];
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #1f2937; /* matches the bg-gray-800 color */
    }
  }

  &:hover {
    .adt-tooltip-content {
      @apply adt-tw-block;
    }
  }

}

.adt-help-button {
  @apply adt-tw-relative adt-tw-hidden sm:adt-tw-block;

  .adt-help-button-content {
    @apply adt-tw-z-10 adt-tw-absolute adt-tw-right-0 adt-tw-pt-2 adt-tw-w-72;

    .adt-help-button-content-inner {
      @apply adt-tw-bg-white adt-tw-rounded-lg adt-tw-shadow-lg adt-tw-border adt-tw-border-gray-200 adt-tw-py-2 adt-tw-z-50;
      
      .adt-help-button-content-inner-title {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        @apply adt-tw-px-4 adt-tw-py-2 adt-tw-mb-2 adt-tw-text-sm adt-tw-font-semibold adt-tw-text-gray-700 adt-tw-border-b adt-tw-border-gray-200;
      
        &:not(:first-child) {
          @apply adt-tw-border-t adt-tw-border-gray-200 adt-tw-mt-2;
        }
      }

      .adt-help-button-content-inner-link {
        @apply adt-tw-flex adt-tw-items-center adt-tw-gap-3 adt-tw-px-4 adt-tw-py-2 adt-tw-text-gray-700 hover:adt-tw-bg-gray-50 adt-tw-transition-colors;
      
        .adt-help-button-content-inner-link-icon {
          @apply adt-tw-w-4 adt-tw-h-4 adt-tw-text-primary;
        }
      }
    }
  }
}


// Upsell modal
.vex.vex-theme-plain.adt-pfp-upsell-modal {

  .vex-content {
    border-radius: 8px;
  }

  img {
    max-width: 100%;
    height: 80px;
  }

  h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 18px;
  }

  p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;

    font-size: 14px;
  }

  .vex-dialog-buttons{
    .vex-dialog-button {
      border-radius: 8px;
      @apply adt-tw-bg-primary adt-tw-text-white;
      background-color: var(--adt-primary-color);
      color: var(--adt-white-color);

      &:hover {
        @apply adt-tw-bg-primary-dark;
        @apply adt-tw-text-white;
      }
    }
  }
}

// Spinner
.adt-loader {
  width: 48px;
  height: 48px;
  border: 5px solid var(--adt-gray-color);
  border-bottom-color: var(--adt-primary-color);
  border-radius: 50%;
  display: none;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;

  &.adt-loader-secondary {
    border-bottom-color: var(--adt-dark-gray-color);
  }

  &.adt-loader-sm {
    width: 24px;
    height: 24px;
    border-width: 4px;
  }

  &.adt-loader-xs {
    width: 16px;
    height: 16px;
    border-width: 3px;
  }
}

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