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

@layer components {
  .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) {
    .word-break-keep-all {
      word-break: keep-all;
      overflow-wrap: break-word;
    }
    .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-89bb1d5a.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-63f4bcde.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-73865f0b.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-bd5941e8.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-e50ab3d8.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-b94aefac.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-e5fe6235.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;
  }
}