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

@layer base {
  * {
    @apply box-border list-none p-0 m-0 scroll-smooth;
  }

  body {
    @apply bg-[#f8f6fa] text-black min-h-screen overflow-x-hidden;
  }
}

@layer utilities {
  header {
    @apply absolute py-8 w-full flex justify-center items-center;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.02);
  }

  .mainHeading {
    @apply text-[2.5rem] font-bold m-0;
  }

  .description {
    @apply text-[1rem] text-[#272634] mb-6;
  }

  .textWrapper {
    @apply absolute top-5 text-[13rem] whitespace-nowrap text-white z-10 left-2/4 -translate-x-2/4 uppercase;
    text-shadow: 0 20px 10px rgba(0, 0, 0, 0.03);
  }

  .inputCont {
    @apply mb-3;
  }

  .inputCont input,
  .inputCont textarea {
    @apply w-full rounded-lg text-[1rem] px-4 py-2 outline-none;
  }

  .inputCont label {
    @apply text-[#4d4d58] text-[1rem] font-medium mb-1 block;
  }

  .themeBtn {
    @apply bg-black rounded-3xl flex items-center justify-center w-full text-white text-[1rem] py-3 mt-4 border-[1px] border-[#000] transition-all;
  }

  .themeBtn:hover,
  .themeBtn.alternate {
    @apply bg-white text-black;
  }

  .themeBtn.alternate:hover {
    @apply bg-black text-white;
  }

  .footer {
    @apply flex items-center justify-center absolute bottom-[20px] z-10 w-[99%] py-3 rounded-xl left-[50%] translate-x-[-50%] shadow-lg;
    background-color: rgba(255, 255, 255, 0.375);
    backdrop-filter: blur(2px);
  }


  @media screen and (max-width: 575.98px) {
    .footer {
      bottom: 5rem;
    }

    .footer p {
      margin: auto;
    }
  }

  .min-h-screen {
    overflow: hidden;
  }

  .footer p {
    margin-right: auto;
  }





  .formCont {
    @apply absolute inset-0 flex items-center justify-center w-full h-screen flex-col;
  }

  .imgCont {
    @apply flex items-center justify-center;
  }

  .imgCont img {
    @apply max-h-[100vh] rounded-2xl w-[calc(100%-20px)] h-[calc(100%-20px)] overflow-hidden object-cover border-[10px] mx-auto border-[#fff] shadow-lg;
  }

  .industryItems {
    @apply grid grid-cols-4 gap-3 h-[500px] overflow-y-auto w-[80%] mx-auto;
  }

  .industryItems::-webkit-scrollbar {
    display: none;
  }

  .industryItems li {
    @apply relative min-h-[120px] overflow-hidden rounded-3xl;
  }

  .industryItems li::before {
    content: "";
    @apply absolute inset-0;
    background: linear-gradient(
      to right bottom,
      rgba(0, 0, 0, 0.35),
      #f8f6fa,
      #f8f6fa,
      rgba(0, 0, 0, 0.35)
    );
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
  }

  .industryItems li::after {
    content: "";
    @apply absolute inset-[1px] rounded-3xl;
    background-color: #f8f6fa;
    transition: all 0.3s ease-in-out;
  }

  .industryItems li label {
    @apply text-black relative z-10 flex items-center justify-center h-full w-full capitalize flex-col;
    transition: all 0.3s ease-in-out;
  }

  .industryItems li label i {
    @apply text-black text-[1.5rem] mb-2;
  }

  .industryItems li label span {
    @apply text-black text-[1rem] font-medium block;
  }

  .industryItems li label input {
    @apply absolute inset-0 cursor-pointer opacity-0;
  }

  .industryItems li label:has(input:checked),
  .industryItems li label:hover {
    background-color: #000;
    @apply text-white;
  }

  .industryItems li label:has(input:checked) i,
  .industryItems li label:hover i,
  .industryItems li label:has(input:checked) span,
  .industryItems li label:hover span {
    @apply text-white;
  }

  .industryItems.colorItems {
    @apply grid-cols-3;
  }

  .colorItems li {
    @apply p-3;
  }

  .colorItems li::after {
    @apply bg-white;
  }

  .colorItems li:hover label {
    @apply text-black bg-transparent;
  }

  .colorItems li:hover label span {
    @apply text-black;
  }

  .colorItems li:hover::before {
    transform: rotate(90deg);
  }

  .colorItems li:hover:has(input:checked)::before {
    transform: none;
  }

  .colorItems li:has(input:checked)::before {
    background: linear-gradient(
      to right bottom,
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.35)
    );
  }

  .colorItems li:has(input:checked)::after {
    inset: 2%;
  }

  .colorItems li:has(input:checked) label {
    @apply bg-transparent;
  }

  .colorItems li:has(input:checked) label span {
    @apply text-black;
  }

  .colorItems .imgContainer img {
    @apply rounded-3xl;
  }

  .styleItems .imgHolder {
    @apply flex items-center justify-center flex-col h-full w-full relative;
  }

  .styleItems .example {
    @apply relative top-[-100%] transition-all cursor-pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  }

  .styleItems .title {
    @apply absolute top-[50%] translate-y-[-50%] transition-all;
  }

  .styleItems label {
    @apply relative;
  }

  .styleItems li {
    /* @apply p-0; */
  }

  .styleItems li:hover .example,
  .styleItems li:has(input:checked) .example {
    @apply top-0;
  }

  .styleItems li:hover .title,
  .styleItems li:has(input:checked) .title {
    top: 95%;
    transform: translateY(-95%) scale(0.75);
  }
  .industryItemSelect {
    @apply flex flex-col gap-4;
    label {
      @apply text-[#4d4d58] text-[1rem] font-medium block;
    }
    select {
      --border-color: rgba(0, 0, 0, 0.35);
      @apply w-[450px] text-[#4d4d58] py-3 bg-transparent rounded-xl border border-[var(--border-color)] border-solid px-4;
    }
  }
  .colorBox {
    @apply max-w-[500px] w-full;
    h3 {
      @apply text-[1.25rem] text-[#000] text-center font-black mb-2;
    }
    .industryItemSelect {
      select {
        @apply w-auto;
      }
    }
    & + .colorBox {
      @apply mt-6;
    }
  }
}