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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  input,
  textarea {
    border: none;
    outline: none;
    resize: none;
  }

  @font-face {
    font-family: "Dana";
    src: local("Dana"), url("../fonts/Dana/woff2/DanaFaNum-Regular.woff2");
    font-display: swap;
  }

  @font-face {
    font-family: "Dana Medium";
    src: local("Dana"), url("../fonts/Dana/woff2/DanaFaNum-Medium.woff2");
    font-display: swap;
  }

  @font-face {
    font-family: "Dana DemiBold";
    src: local("Dana"), url("../fonts/Dana/woff2/DanaFaNum-DemiBold.woff2");
    font-display: swap;
  }

  @font-face {
    font-family: "Morabba Light";
    src: local("Morabba"), url("../fonts/Morabba/woff2/Morabba-Light.woff2");
    font-display: swap;
  }

  @font-face {
    font-family: "Morabba Bold";
    src: local("Morabba"), url("../fonts/Morabba/woff2/Morabba-Bold.woff2");
    font-display: swap;
  }

  @font-face {
    font-family: "Morabba Medium";
    src: local("Morabba"), url("../fonts/Morabba/woff2/Morabba-Medium.woff2");
    font-display: swap;
  }
}


@layer components {
  .main-btn {
    @apply  bg-green-500 rounded-lg hover:bg-green-600 text-white transition-all flex items-center justify-center
  }
  .header {
    width: 100%;
    height: 90vh;
  }

  .nav-item {
    position: relative;
  }

  .nav-item a {
    display: inline-block;
    position: relative;
    font-weight: 500;
  }

  .nav-item a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -3px;
    left: 50%;
    background-color: #22c55e;
    transition: width 0.3s, left 0.3s;
  }

  .nav-item a:hover::after,
  .nav-item.active a::after {
    width: 100%;
    left: 0;
  }

  .banner-1 {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.6) 33.85%, rgba(0, 0, 0, 0.1) 100%), url('../Images/categories/category-right.jpg');
  }

  .banner-2 {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.6) 33.85%, rgba(0, 0, 0, 0.1) 100%), url('../Images/categories/category-left.jpg');
  }

  .banner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .swiper {
    padding: 0 .6rem !important;
  }

  .cl-checkbox {
    position: relative;
    display: inline-block;
  }

  /* Input */
  .cl-checkbox>input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    z-index: -1;
    position: absolute;
    left: -10px;
    top: -8px;
    display: block;
    margin: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: none;
    outline: none;
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.2s;
  }

  /* Span */
  .cl-checkbox>span {
    display: inline-block;
    width: 100%;
    cursor: pointer;
  }

  /* Box */
  .cl-checkbox>span::before {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    margin: 3px 11px 3px 1px;
    border: solid 2px;
    /* Safari */
    border-color: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    width: 18px;
    height: 18px;
    vertical-align: top;
    transition: border-color 0.2s, background-color 0.2s;
  }

  /* Checkmark */
  .cl-checkbox>span::after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 1px;
    width: 10px;
    height: 5px;
    border: solid 2px transparent;
    border-right: none;
    border-top: none;
    transform: translate(3px, 4px) rotate(-45deg);
  }

  /* Checked, Indeterminate */
  .cl-checkbox>input:checked,
  .cl-checkbox>input:indeterminate {
    background-color: #10b981;
  }

  .cl-checkbox>input:checked+span::before,
  .cl-checkbox>input:indeterminate+span::before {
    border-color: #10b981;
    background-color: #10b981;
  }

  .cl-checkbox>input:checked+span::after,
  .cl-checkbox>input:indeterminate+span::after {
    border-color: #fff;
  }

  .cl-checkbox>input:indeterminate+span::after {
    border-left: none;
    transform: translate(4px, 3px);
  }

  /* Hover, Focus */
  .cl-checkbox:hover>input {
    opacity: 0.04;
  }

  .cl-checkbox>input:focus {
    opacity: 0.12;
  }

  .cl-checkbox:hover>input:focus {
    opacity: 0.16;
  }

  /* Active */
  .cl-checkbox>input:active {
    opacity: 1;
    transform: scale(0);
    transition: transform 0s, opacity 0s;
  }

  .cl-checkbox>input:active+span::before {
    border-color: #85b8b7;
  }

  .cl-checkbox>input:checked:active+span::before {
    border-color: transparent;
    background-color: rgba(0, 0, 0, 0.6);
  }

  /* Disabled */
  .cl-checkbox>input:disabled {
    opacity: 0;
  }

  .cl-checkbox>input:disabled+span {
    color: rgba(0, 0, 0, 0.38);
    cursor: initial;
  }

  .cl-checkbox>input:disabled+span::before {
    border-color: currentColor;
  }

  .cl-checkbox>input:checked:disabled+span::before,
  .cl-checkbox>input:indeterminate:disabled+span::before {
    border-color: transparent;
    background-color: currentColor;
  }

  /* The switch - the box around the slider */
  .switch {
    font-size: 13px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
  }

  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 1px solid #adb5bd;
    transition: .4s;
    border-radius: 30px;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 20px;
    left: 0.27em;
    bottom: 0.25em;
    background-color: #adb5bd;
    transition: .4s;
  }

  input:checked+.slider {
    background-color: #10b981;
    border: 1px solid #10b981;
  }

  input:focus+.slider {
    box-shadow: 0 0 1px #10b981;
  }

  input:checked+.slider:before {
    transform: translateX(1.4em);
    background-color: #fff;
  }



  /* tooltip */
  .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .tooltip button {
    transition: background-color 0.3s, transform 0.2s ease-out;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }

  .tooltiptext {
    visibility: hidden;
    width: 120px;
    text-align: center;
    border-radius: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    padding: .3rem;
  }

  .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
  }

  .custom-input {
    -moz-appearance: textfield;
  }

  .custom-input::-webkit-outer-spin-button,
  .custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .tailwind-input {
    @apply w-full mb-4 p-2 shadow rounded-lg ring-1 ring-gray-200 dark:ring-white/20 focus:ring-green-500 dark:focus:ring-green-400 focus:pr-4 duration-300 transition-all bg-transparent
  }


  /* range */
  
.wrapper {
  width: 100%;
  direction: ltr;
}

.wrapper .price-input {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.wrapper .price-input .field {
  display: flex;
  width: 100%;
  align-items: end;
}

.price-input input {
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 18px;
}

.price-input input::-webkit-outer-spin-button,
.price-input input::-webkit-inner-spin-button {
  display: none;
}



.wrapper .slider-bar {
  height: 5px;
  position: relative;
  background-color: #ddd;
  border-radius: 5px;
}

.wrapper .progress {
  position: absolute;
  height: 100%;
  left: 5%;
  right: 65%;
  background-color: #10b981;
  border-radius: 5px;
}

.wrapper .range-input {
  position: relative;
}

.wrapper .range-input input {
  position: absolute;
  width: 100%;
  height: 5px;
  top: -5px;
  pointer-events: none;
  background: none;
  appearance: none;
  accent-color: #10b981;
}

.wrapper .range-input input::-webkit-slider-thumb {
  height: 15px;
  width: 15px;
  background-color: #10b981;
  border-radius: 50%;
  pointer-events: auto;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

.swiper-pagination-wrapper {
  @apply absolute -bottom-2 flex items-center justify-center left-1/2 transform -translate-x-1/2 w-36 h-9 bg-gray-50 dark:bg-zinc-900 rounded-t-lg z-10;
}
}