@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: currentColor!important;
  }

  .tiptap.ProseMirror a {
    color: #6229ff;
    text-decoration-line: underline;
    text-decoration-color: currentColor;
  }

  .render-table-tiptap p {
    margin-top: 0px!important;
  }

  .render-table-tiptap {
    white-space: normal;
    word-wrap: break-word;
  }

  .tiptap.ProseMirror a span {
    color: #6229ff;
    text-decoration-line: underline;
    text-decoration-color: currentColor;
  }

  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
  .error-message {
    @apply text-red-500 text-xs;
  }
  .success-message {
    @apply text-green-500 text-xs;
  }
  .px-35-important {
    padding: 35px !important;
  }

  .p-9px {
    padding: 9px 10px !important;
  }

  @media (min-width: 768px) {
    .md\:px-35-important {
      padding-left: 35px !important;
      padding-top: 35px !important;
    }

    .text-label {
      font-size: 12px !important;
    }
  }

  .text-header-active {
    font-size: 16px;
    font-weight: 600;
    color: #007aff;
  }

  .text-header {
    font-size: 16px;
    font-weight: 400;
  }
  .term-user .ti-btn {
    cursor: pointer !important;
  }

  .tearm-user .ti-btn {
    margin: 0.25rem;
    margin-inline-start: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    padding: 0.375rem 0.75rem !important;
  }

  .term-user .ti-btn-info {
    background-color: rgb(0 122 255);
    color: rgb(255 255 255) !important;
  }

  .term-user .btn-wave {
    padding: 0.375rem 0.75rem !important;
  }

  .term-user .ti-btn-info:hover {
    background-color: rgb(0 122 255 / 0.9);
  }

  .term-user .ti-btn-info:focus {
    --tw-ring-color: rgb(0 122 255);
  }

  .term-user .ti-btn-info:focus:is(.dark *) {
    --tw-ring-offset-color: rgb(255 255 255 / 0.1);
  }

  .term-user .bg-info {
    background-color: rgb(0 122 255);
  }

  .term-user .text-info {
    color: rgb(0 122 255) !important;
  }

  @media (max-width: 768px) {
    .text-header,
    .text-header-active {
      font-size: 10px;
    }

    .bg-step-by-step-mobile {
      background-image: url("/assets/landing_page_second/bg_step_by_step_mobile-5655d644.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 1;
    }

    .bg-step-by-step-mobile-company {
      background-image: url("/assets/landing_page_third/images/step_by_step_mobile-d4fee689.svg");
      z-index: 1;
    }
  }

  .relative {
    position: relative;
  }

  .flex {
    display: flex;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .w-full {
    width: 100%;
  }

  .h-96 {
    height: 24rem;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .object-cover {
    object-fit: cover;
  }

  .gap-10 {
    gap: 2.5rem;
  }

  .custom-hover-bg {
    position: relative;
    overflow: hidden;
  }

  .custom-hover-bg:hover {
    background-image: url("/assets/landing_page_first/ai_line-d4318ec2.png");
    background-size: 58px 58px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .custom-hover-bg img:first-child {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  .custom-hover-bg:hover img:first-child {
    transform: translateX(-40px);
    opacity: 0;
  }

  .custom-hover-bg img:nth-child(2) {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
  }

  .custom-hover-bg:hover img:nth-child(2) {
    transform: translateX(0);
  }

  .bg-section-first {
    background-image: url("/assets/landing_page_first/bg_section_first-487d5b8d.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
  }

  .bg-section-second {
    background-image: url("/assets/landing_page_first/bg_section_second-93f9d98e.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
  }

  .bg-section-4 {
    background-image: url("/assets/landing_page_first/bg_section_4-fa09d7d5.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
  }

  .bg-section-5 {
    background-image: url("/assets/landing_page_first/bg_section_5-4484e689.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
  }
  .wizard-step.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
  }
}
.form-input {
  width: 100%;
  border: 0;
}
.form-row,
.row-short,
.form-row-2-postcode {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 1rem;
  align-items: center;
}
.form-row-postcode {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 1rem;
  align-items: center;
}
.form-label {
  display: inline-block;
}
.form-postcode-button {
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .form-row {
    grid-template-columns: 2fr 7fr 3fr;
  }

  .row-short {
    grid-template-columns: 2fr 4fr 3fr 3fr;
  }

  .form-row-postcode {
    grid-template-columns: 2fr 5fr 3fr 2fr;
  }

  .form-row-2-postcode {
    grid-template-columns: 17fr 4fr;
  }
}
@media (max-width: 768px) {
  .form-row-2-postcode {
    display: flex;
  }
}