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

@layer components {
  html {
    @apply scroll-smooth scroll-pt-nav [-webkit-tap-highlight-color:transparent];
  }

  body {
    @apply text-text font-text text-base;
  }

  #wc-arrival-departure {
    @apply text-text;
  }

  .text {
    h1,
    h2 {
      @apply mb-10;
    }

    p {
      @apply mb-4;
    }

    p:last-child {
      @apply mb-0;
    }

    a:not(.btn, [class^="btn-"], [class*=" btn-"]) {
      @apply text-primary underline underline-offset-4 hover:text-light transition duration-300;
    }

    ul {
      @apply list-disc list-inside;
    }

    table, td {
      @apply border border-dark;
    }
  }

  .btn-effect {
    @apply
      overflow-hidden
      relative
      block
      w-max
      px-8
      font-text
      font-medium
      text-xl
      md:text-base
      text-light
      bg-ciel;

    &.inverse-color {
      @apply
        text-primary-50
        before:bg-light/60;
    }
  }

  .btn {
    @apply
      flex
      items-center
      gap-3
      w-max
      px-5
      py-3
      text-xl
      md:text-base
      font-medium
      text-light
      border
      border-light
      transition
      duration-300
      hover:text-light
      hover:bg-primary
      [&_svg]:w-1.5
      [&_svg]:h-3
      [&_svg]:fill-current
      [&_svg]:transition-transform
      [&_svg]:duration-300
      [&:hover_svg]:translate-x-1;

    &.inverse-color {
      @apply
        text-primary
        bg-light
        hover:text-light
        hover:bg-primary;
    }

    &.has-bordeaux {
      @apply
        text-light
        bg-bordeaux
        border-bordeaux
        hover:text-bordeaux
        hover:bg-light;
    }
    
    &.has-bg-bordeaux {
      @apply
        text-light
        bg-bordeaux
        border-light
        hover:text-bordeaux
        hover:bg-light;
    }

    &.has-text-bordeaux {
      @apply
        text-bordeaux
        bg-light
        hover:text-light
        hover:bg-bordeaux;
    }

    &.has-border-bordeaux {
      @apply
        text-bordeaux
        border-bordeaux
        hover:text-light
        hover:bg-bordeaux;
    }

    &.has-primary {
      @apply
        text-light
        bg-primary
        border-primary
        hover:text-primary
        hover:bg-light;
    }

    &.has-bg-primary {
      @apply
        text-light
        bg-primary
        border-light
        hover:text-primary
        hover:bg-light;
    }

    &.has-border-primary {
      @apply
        text-primary
        border-primary
        hover:text-light
        hover:bg-primary;
    }
  }

  .btn-bg {
    @apply
      block
      w-max
      px-5
      py-3
      text-primary
      text-xl
      md:text-base
      font-text
      font-bold
      bg-light
      uppercase
      transition
      duration-300
      hover:bg-light/50;
  }

  .btn-rounded-more {
    @apply
      aspect-square
      flex
      items-center
      justify-center
      w-8
      text-light
      bg-primary-50
      rounded-full;
  }

  h1,
  h2,
  .like-h1,
  .like-h2 {
    @apply
      relative
      font-title
      text-3xl
      text-text;
  }

  h1 + .subtitle,
  .like-h1 + .subtitle {
    @apply text-center;
  }

  .subtitle,
  h1 + h2,
  .like-h1 + .like-h2 {
    @apply font-text text-primary text-3xl;
  }

  h3 {
    @apply text-base mb-3;
  }

  .h2-simple {
    h2 {
      @apply after:content-none;
    }
  }

  .h2-light {
    h2 {
      @apply text-light;
    }
  }

  .h2-left {
    h2 {
      @apply items-start;
    }
  }

  .h3-underline {
    h3 {
      @apply
        mb-0
        text-base
        font-bold
        tracking-wider;
    }
  }

  .swiper-button-prev {
    @apply text-light;
  }

  .main-menu {
    ul li {
      svg {
        @apply size-[31px];
      }
    }
  }

  .quote {
    svg {
      @apply w-[60px] h-auto;
    }
  }

  section {
    @apply py-14 space-y-7;
  }

  body section h2 + .subtitle,
  body section h1 + .subtitle {
    @apply !mt-0;
  }

  p.subtitle {
    @apply mb-7;
  }

  .lazy-container {
    @apply !m-0;
  }

  .quote-container {
    @apply flex flex-col justify-center items-center space-y-7;
  }

  div > svg {
    @apply w-full h-auto;
  }

  html body .mosaic {
    .columns {
      @apply mt-10;

      h2 {
        @apply items-start;
      }
    }
  }

  .container-medium-columns {
    @apply max-w-screen-lg mx-auto;

    h3 {
      @apply mb-0 tracking-wider text-2xl font-bold after:block after:my-5
        after:bg-primary after:h-1 after:w-1/4 uppercase;
    }

    .columns-2 {
      .grid {
        @apply items-center grid-rows-[max-content_max-content] sm:grid-rows-1 sm:grid-cols-[33%_1fr];

        > div {
          @apply p-8;
        }
      }
    }

    svg {
      @apply fill-primary w-24 mx-auto;
    }
  }

  .loader-simple {
    @apply
      col-start-1
      sm:col-start-2
      block
      size-20
      m-2
      border-[6px]
      border-x-dark
      border-y-transparent
      rounded-full
      animate-spin
      after:block
      after:size-16;
  }

  .swiper-slide-thumb-active {
    @apply opacity-100 !filter-none;

    > div {
      @apply opacity-0;
    }
  }

  .form-error {
    @apply hidden text-red-500;
  }

  .ajax-form-error + .form-error {
    @apply block;
  }
}

html {
  body {
    &:not(.load-header) {
      main {
        @apply pt-nav;
      }

      .h-header {
        @apply h-[80vh] sm:h-safe;
      }
    }

    &.load-header {
      main {
        @apply pt-0;
      }

      .h-header {
        @apply h-[80vh];
      }
    }
  }

  main {
    &:has(.header:first-child) .header:first-child {
      @apply h-[80vh] sm:h-safe;
    }
  }

  .wc-widget {
    @apply hidden md:block;
  }
}

:root {
  --swiper-navigation-color: #f2eee8;
  --swiper-pagination-color: #f2eee8;
  --swiper-navigation-size: 65px;
  --height-navigation: 90px;
  --guest-suite-simple-0: theme('colors.primary.DEFAULT');
  --guest-suite-simple-100: theme('colors.primary.50');
}

@layer utilities {
  .scrollbar::-webkit-scrollbar {
    @apply size-[15px];
  }

  .scrollbar::-webkit-scrollbar-track {
    @apply bg-light rounded-[100vh];
  }

  .scrollbar::-webkit-scrollbar-thumb {
    @apply bg-dark/60 rounded-[100vh] border-solid border-2 border-light;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-dark/30;
  }

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

  .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
  }

  html body .swiper-pagination-bullet.bullet-line {
    @apply w-9 h-[3px] rounded-none;
  }
}

@media (max-width: 768px) {
  html body .swiper-pagination-bullet {
    @apply size-[15px];
  }
}

.parallax .swiper-slide-active {
  @apply z-[100] bg-[#f2eee8];
}

nav.pois {
  &::-webkit-scrollbar {
    @apply hidden;
  }
}

.circle {
  @apply
    [stroke:url("#gradientStyle")]
    stroke-[4px]
    [animation-timing-function:linear]
    [animation-fill-mode:forwards];
}

.container-medium-columns .css-columns-2 > div {
  @apply p-8;
}

html[lang="ar"] .text {
  @apply [direction:rtl];
}

#baguetteBox-overlay {
  @apply backdrop-blur-[10px];
}

.blue {
  @apply bg-primary text-light;

  h1,
  h2 {
    @apply text-light;
  }
}

.ecru {
  @apply bg-ecru text-bordeaux;

  h1,
  h2 {
    @apply text-bordeaux;
  }
}

.bordeaux {
  @apply bg-bordeaux text-light;

  h1,
  h2 {
    @apply text-light;
  }
}

.rouge {
  @apply bg-rouge text-primary;

  h1,
  h2 {
    @apply text-primary;
  }
}

.ciel {
  @apply bg-ciel text-primary;

  h1,
  h2 {
    @apply text-primary;
  }
}

.custom-label {
  position: absolute;
  background-color: #8B0000;
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-family: sans-serif;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transform: translateY(-10px);
}