@import "tailwindcss";

@theme {
  --color-border: #D1DEE1;
  --color-line: #D1DEE1;
  --color-main: #0B1A55;
  --color-secondary: #F88C43;
  --color-text: #3A3A3A;
  --color-sub: #8D8D8D;
  --color-primary-400: #00A9F4;
  --color-primary-500: #075FAA;
  --color-primary-600: #006591;
  --color-neutral-50: #FFFFFF;
  --color-neutral-100: #F1F1F1;
  --color-neutral-200: #E6E6E6;
  --color-neutral-300: #D4D4D4;
  --color-neutral-800: #333333;
  --color-neutral-900: #222625;
  --animate-floatgentle: floatgentle 2s infinite;
  --shadow-soft: 0 4px 20px -2px rgba(34, 38, 37, 0.08);
  --font-sans: "Inter", "IBM Plex Sans Arabic", sans-serif;
  --font-ibm: "IBM Plex Sans Arabic", sans-serif;

}



html {
  scroll-behavior: smooth;
}

body {
  background-color: #F1F1F1;
  font-family: var(--font-sans);

  &:has(.base-modal-content) {
    @apply overflow-hidden;
  }
}

body[dir="rtl"] {
  --font-sans: "IBM Plex Sans Arabic", sans-serif;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F1F1F1;
}

::-webkit-scrollbar-thumb {
  background: #075FAA;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #006591;
}

@layer utilities {

  .container{
    @apply mx-auto;
  }
  .bg-pattern-arch-white {
    background-image: radial-gradient(circle at 20% 50%, rgba(241, 241, 241, 0.15) 0%, transparent 50%);
  }

  .bg-pattern-arch-blue {
    background-image: radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  }

  .pattern-1,
  .pattern-2,
  .pattern-1-reverse,
  .pattern-2-reverse,
  .pattern-duo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --pattern-opacity: 0.5;
  }

  .pattern-1::before,
  .pattern-2::before,
  .pattern-duo::before,
  .pattern-1-reverse::before,
  .pattern-2-reverse::before,
  .pattern-duo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    opacity: var(--pattern-opacity);
    z-index: 0;
  }

  .ql-container.ql-snow{
    height: 200px !important;
    overflow-y: auto !important;
  }
  /* Subtle magic background animation across patterned sections */
    /* @keyframes pattern-drift {
      0% {
        background-position: right -220px bottom -100px;
      }
      50% {
        background-position: right -200px bottom -160px;
      }
      100% {
        background-position: right -220px bottom -200px;
      }
    } */
    /* @keyframes pattern-drift-reverse {
      0% {
        background-position: left  calc(100% + 220px) bottom -200px;
      }
      50% {
        background-position: left  calc(100% + 220px) bottom -160px;
      }
      100% {
        background-position: left  calc(100% + 220px) bottom -200px;
      }
    }

  @keyframes pattern-drift-alt {
    0% {
      background-position: left -220px top -50px;
    } 
    50% {
      background-position: left -200px top -80px;
    }
    100% {
      background-position: left -220px top -50px;
    }
  } */

  .pattern-1::before {
    background-image: url("/patterns-1.svg");
    background-size: min(900px, 70vw) auto;
    background-position: right -220px bottom -100px;
    animation: pattern-drift 26s ease-in-out infinite alternate;
  }

  .pattern-2::before {
    background-image: url("/patterns-2.svg");
    background-size: min(1100px, 80vw) auto;
    background-position: left 0px top -50px;
    animation: pattern-drift-alt 30s ease-in-out infinite alternate;
  }
  .pattern-1-reverse::before {
    background-image: url("/patterns-1.svg");
    background-size: min(900px, 70vw) auto;
    background-position: left 100% bottom -200px;
    animation: pattern-drift-reverse 26s ease-in-out infinite alternate;
    transform: rotateY(180deg);
  }

  .pattern-2-reverse::before {
    background-image: url("/patterns-2.svg");
    background-size: min(1100px, 80vw) auto;
    background-position: left 0px top -50px;
    animation: pattern-drift-alt 30s ease-in-out infinite alternate;
  }

  .pattern-duo::before {
    background-image: url("/patterns-2.svg");
    background-size: min(1100px, 80vw) auto;
    background-position: left -220px bottom -140px;
    animation: pattern-drift-alt 28s ease-in-out infinite alternate;
  }

  .pattern-duo::after {
    background-image: url("/patterns-1.svg");
    background-size: min(900px, 70vw) auto;
    background-position: right -220px top -140px;
    animation: pattern-drift 24s ease-in-out infinite alternate;
  }

  /* Responsive adjustments for pattern-duo */
  @media (max-width: 1024px) {
    .pattern-duo::before {
      background-size: min(900px, 95vw) auto;
      background-position: left -140px bottom -90px;
    }

    .pattern-duo::after {
      background-size: min(750px, 90vw) auto;
      background-position: right -150px top -90px;
    }
  }

  @media (max-width: 640px) {
    .pattern-duo::before {
      background-size: 110vw auto;
      background-position: left -80px bottom -40px;
    }

    .pattern-duo::after {
      background-size: 100vw auto;
      background-position: right -80px top -40px;
    }
  }

  /* Responsive adjustments for pattern-duo-reverse */
  @media (max-width: 1024px) {
    .pattern-duo-reverse::before {
      background-size: min(900px, 95vw) auto;
      background-position: right -140px top -90px;
    }

    .pattern-duo-reverse::after {
      background-size: min(750px, 90vw) auto;
      background-position: left -150px bottom -90px;
    }

    body[dir="rtl"] .pattern-duo-reverse::before {
      background-position: left -140px top -90px;
    }

    body[dir="rtl"] .pattern-duo-reverse::after {
      background-position: right -150px bottom -90px;
    }
  }

  @media (max-width: 640px) {
    .pattern-duo-reverse::before {
      background-size: 110vw auto;
      background-position: right -80px top -40px;
    }

    .pattern-duo-reverse::after {
      background-size: 100vw auto;
      background-position: left -80px bottom -40px;
    }

    body[dir="rtl"] .pattern-duo-reverse::before {
      background-position: left -80px top -40px;
    }

    body[dir="rtl"] .pattern-duo-reverse::after {
      background-position: right -80px bottom -40px;
    }
  }

  /* Reverse direction variant */
  .pattern-duo-reverse {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --pattern-opacity: 0.7;
  }

  .pattern-duo-reverse::before,
  .pattern-duo-reverse::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    opacity: var(--pattern-opacity);
    z-index: 0;
  }

  .pattern-duo-reverse::before {
    /* Swap primary pattern to the right/top */
    background-image: url("/patterns-2.svg");
    background-size: min(1100px, 80vw) auto;
    background-position: right -220px top -140px;
    animation: pattern-drift 28s ease-in-out infinite alternate;
  }

  .pattern-duo-reverse::after {
    /* Swap secondary pattern to the left/bottom */
    background-image: url("/patterns-1.svg");
    background-size: min(900px, 70vw) auto;
    background-position: left -220px bottom -140px;
    animation: pattern-drift-alt 24s ease-in-out infinite alternate;
  }

  /* RTL (Arabic) support for pattern-duo-reverse */
  body[dir="rtl"] .pattern-duo-reverse::before {
    background-position: left -220px top -140px;
    animation: pattern-drift-alt 28s ease-in-out infinite alternate;
  }

  body[dir="rtl"] .pattern-duo-reverse::after {
    background-position: right -220px bottom -140px;
    animation: pattern-drift 24s ease-in-out infinite alternate;
  }

  .pattern-1 > *,
  .pattern-2 > *,
  .pattern-duo > *,
  .pattern-duo-reverse > * {
    position: relative;
    z-index: 1;
  }



  .input_wrapper {
    label {
      @apply text-sub text-sm block mb-1;
    }

    input,
    select,
    textarea {
      @apply border border-line bg-white font-medium rounded-md p-3! transition duration-300 ease-in-out focus:outline-none focus:shadow-none focus:border-main w-full caret-main;

      &::placeholder {
        @apply text-sm font-normal;
      }
    }

    .with_icon {
      @apply relative;

      .icon {
        @apply absolute top-1/2 -translate-y-1/2 z-10 inset-s-4;
      }

      input,
      .p-dropdown,
      .p-multiselect {
        @apply ps-14!;
      }

      .p-dropdown,
      .p-multiselect {
        @apply py-0 w-full;
        height: 58px !important;
      }

      &::before {
        content: "";

        @apply absolute bg-line w-px h-6 top-1/2 -translate-y-1/2 z-10 inset-s-12;
      }
    }

    &.prepend {

      input,
      textarea {
        @apply pe-20;
      }

      .prepend {
        @apply absolute top-1/2 -translate-y-1/2 z-20;
        inset-inline-end: 1rem;
      }
    }

    .p-multiselect {
      @apply border border-line font-medium rounded-xl py-0 px-2 h-[50px] focus:outline-none focus:shadow-none focus:border-main w-full caret-main;
      transition: border 0.3s ease-in-out;

      .p-dropdown-label {
        @apply py-4;
        line-height: 1.4 !important;
      }
    }

    .p-dropdown {
      @apply border border-line font-medium rounded-xl py-0 px-2 h-[50px] focus:outline-none focus:shadow-none focus:border-main w-full caret-main;
      transition: border 0.3s ease-in-out;

      .p-dropdown-label {
        @apply py-3;
        line-height: 1.4 !important;
      }
    }

    .p-focus {
      @apply border-main caret-main;
      box-shadow: none !important;
    }

    &.error {
      label {
        @apply text-red-500;
      }

      input,
      textarea {
        @apply text-red-500 border-red-500;
      }

      .p-dropdown,
      .p-multiselect {
        @apply border-red-500;
      }
    }
  }


  .base-btn {
    svg {
      path {
        transition: all 0.3s ease-in;
      }
    }

    &:hover {
      @apply text-main border-main;

      svg {
        path {
          @apply fill-main;
        }
      }
    }

    @apply hover:cursor-pointer min-w-[140px] text-white hover:bg-white flex items-center justify-center gap-3 hover:text-main hover:border-main border border-main rounded-full py-2 px-5 bg-main font-medium duration-300;

    &:disabled {
      @apply bg-[#FDB9331A] text-[#CACBD2] border-[#FDB9331A];

      &:hover {

        &::before,
        &::after {
          content: unset;
        }
      }
    }
  }

  .base-btn-red-bg {
    color: #fff !important;
    border: 1px solid red !important;
    @apply hover:cursor-pointer text-white hover:bg-white flex items-center justify-center gap-3 hover:text-red-500 hover:border-red-500 border border-red-500 rounded-full py-2 px-5 bg-red-500 font-medium duration-300;

    svg {
      path {
        @apply fill-white;
      }
    }

    &:hover {
      color: red !important;
      border-color: red;

      svg {
        path {
          @apply fill-red-500;
        }
      }
    }

    &:disabled {
      @apply bg-[#F0F0F0] text-[#CACBD2];

      &:hover {

        &::before,
        &::after {
          content: unset;
        }
      }
    }
  }

  .archive-btn {
    @apply border text-main border-line font-medium px-4 py-2 rounded-xl;

    box-shadow: 0px 7px 58px 0px #b1b1b11a;
  }

  .base-btn-white {
    @apply text-main;

    @apply hover:cursor-pointer flex items-center justify-center gap-3 hover:bg-main hover:text-white hover:border-white border border-main rounded-full py-2 px-5 bg-white text-main font-medium duration-300;

    &:disabled {
      @apply bg-[#F0F0F0] text-[#CACBD2];

      &:hover {

        &::before,
        &::after {
          content: unset;
        }
      }
    }
  }

  .base-btn-red {
    @apply hover:cursor-pointer flex items-center justify-center gap-3 hover:bg-red-500 hover:text-white hover:border-white border border-red-500 rounded-full py-2 px-5 bg-white text-red-500 font-medium duration-300;

    &:hover {
      @apply text-white;
    }

    &:disabled {
      @apply bg-[#F0F0F0] text-[#CACBD2];

      &:hover {

        &::before,
        &::after {
          content: unset;
        }
      }
    }
  }

}


@keyframes floatgentle {
  0%,
  100% {
    transform: translateY(-58.1503px) scale(1.47086);
  }
  50% {
    transform: translateY(-78.1503px) scale(1.57086);
  }
}

@layer base {

  @font-face {
    font-display: swap;
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 300;
    src: url("./fonts/ibm/IBMPlexSansArabic-Light.ttf") format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/ibm/IBMPlexSansArabic-Regular.ttf") format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 500;
    src: url("./fonts/ibm/IBMPlexSansArabic-Medium.ttf") format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 600;
    src: url("./fonts/ibm/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 700;
    src: url("./fonts/ibm/IBMPlexSansArabic-Bold.ttf") format("truetype");
  }
}

.swiper-pagination-bullet {
  @apply bg-sub;
}



.swiper-pagination-bullet {
  @apply w-2! h-2! rounded-md! bg-sub;
  &:hover {
    @apply bg-main;
  }
}
.swiper-pagination-bullet-active {
  @apply bg-main w-8!;
}

.swiper-wrapper {
  @apply pb-5;
}
.swiper-navigation-icon{
  @apply text-sub w-8! h-8! fill-sub cursor-pointer ;
}


input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

button{
  @apply cursor-pointer;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.font-arabic {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}

.font-inter {
  font-family: Inter, sans-serif;
}


.p-select {
  @apply w-full h-full;

  .p-select-label {
    @apply flex items-center
  }
}

input[type="number"] {
  --webkit-appearance: textfield !important;
  --moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Floating pulse effect for Calls (WhatsApp) button */
.pulse::before,
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid rgba(37, 211, 102, 0.6);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
}

.pulse::before {
  animation: call-pulse 1.6s ease-out infinite;
}

.pulse::after {
  animation: call-pulse 1.6s ease-out infinite;
  animation-delay: 0.4s;
}

@keyframes call-pulse {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  60% {
    transform: scale(1.6);
    opacity: 0.1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}