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

@layer base {
    input,
    textarea{
        width: 100%;
    }
}

/* utility classes */
@layer components {
  .primary-green-btn {
    @apply bg-suitegreen text-white text-sm lg:text-lg font-medium font-suiteoutfit py-2 px-5 text-center rounded-sm focus:outline-none focus:bg-transparent focus:text-suitegreen focus:border border border-suitegreen hover:bg-opacity-75 transition-colors !important;
  }
  .secondary-green-btn {
    @apply bg-suitelightgreen text-suitegreen text-xs font-medium py-2 px-5 text-center rounded-sm focus:outline-none focus:bg-transparent focus:text-suitegreen focus:border border border-suitelightgreen hover:bg-opacity-80 transition-colors !important;
  }
  .golden-btn {
    @apply bg-suitegolden text-sm lg:text-lg text-white font-medium text-center py-2 px-5 rounded-md font-suiteoutfit focus:outline-none focus:bg-transparent focus:text-suitegolden focus:border border border-suitegolden hover:bg-opacity-80 hover:text-white;
  }
  .golden-outline-btn {
    @apply bg-transparent text-sm lg:text-lg text-suitegolden font-medium text-center py-2 px-5 rounded-md font-suiteoutfit border border-suitegolden focus:outline-none focus:bg-suitegolden focus:text-white hover:opacity-80 hover:text-suitegolden;
  }
  .btn-full {
    @apply w-full !important;
  }
  .btn-bold {
    @apply text-sm font-bold !important;
  }
  .btn-uppercase {
    @apply uppercase !important;
  }
  .underline-text {
    @apply text-suitegreen uppercase font-suiteoutfit underline hover:text-suitegreen hover:text-opacity-80 text-xs;
  }
  .underline-text-grey {
    @apply text-suitemedgrey text-[10px] w-fit mx-auto leading-normal uppercase font-suiteoutfit underline hover:text-opacity-80;
  }
  .underline-input {
    @apply mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-suitegreen placeholder:text-suitemedgrey placeholder:text-opacity-5 placeholder:text-xs text-sm font-light bg-transparent text-suitecharcoal font-suiteoutfit;
  }
  .underline-input--label {
    @apply mb-0 text-suitemedgrey text-[10px] uppercase font-bold;
  }
  .border-input {
    @apply border border-gray-300 rounded-lg border-solid !important;
  }
  .reset-input-default {
    @apply border-none border-0 mb-0 outline-0 h-full shadow-none focus:border-0 focus:shadow-none focus:ring-0 p-0 !important;
  }
  .default-input {
    @apply text-suitemedgrey border-solid border border-gray-300 rounded-md shadow-sm p-3 font-suiteoutfit h-full box-border focus:ring-suitegreen !important;
  }
  .default-input.input-error{
    @apply border-red-500 focus:ring-red-500 !important;
  }
  .field-wrap {
    @apply flex flex-col gap-y-1;
  }
  .green-checkbox {
    @apply checked:bg-suitegreen rounded-sm appearance-none border-suitegreen static visible cursor-pointer !important;
  }
  .green-radio-wrap + label::after,
  .green-radio-wrap + label::before {
    content: unset;
  }
  .green-radio-wrap + label {
    padding-left: 0;
    height: auto;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0;
  }
  input[type="radio"] + label .green-radio {
    border: 2px solid rgb(125 125 125 / 1);
    max-width: 1.5rem;
    max-height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: relative;
    display: block;
    background-color: #fff;
  }
  input[type="radio"] + label .green-radio::after {
    --parentDimension: 1.5rem;
    content: "";
    background-color: rgb(40 125 130 / 1);
    border: none;
    border-radius: 50%;
    width: calc(var(--parentDimension) / 2);
    height: calc(var(--parentDimension) / 2);
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  input[type="radio"]:checked + label strong {
    color: rgb(40 125 130 / 1);
  }
  input[type="radio"]:checked + label strong + span {
    color: rgb(68 68 68 / 1);
  }
  input[type="radio"]:checked + label .green-radio {
    border-color: rgb(40 125 130 / 1);
  }
  input[type="radio"]:checked + label .green-radio::after {
    opacity: 1;
  }
  .tab-btn {
    @apply text-suitegreen rounded-sm h-[35px] capitalize text-base font-medium font-suiteoutfit aria-selected:bg-suitegreen aria-selected:text-white aria-selected:hover:text-white hover:text-suitegreen;
  }
  .tab-active {
    @apply bg-suitegreen text-white;
  }
  .fade-enter-active {
    @apply opacity-100;
  }
  .fade-enter-from {
    @apply opacity-0;
  }
  .fade-enter-to {
    @apply opacity-100;
  }
  .fade-leave-active {
    @apply opacity-0;
  }
  .fade-leave-from {
    @apply opacity-100;
  }
  .fade-leave-to {
    @apply opacity-0;
  }
  .modal-enter-from {
    @apply opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95;
  }
  .modal-enter-to {
    @apply opacity-100 translate-y-0 sm:scale-100;
  }

  .footer-tab-active {
    @apply transition-all aria-selected:text-suitegolden aria-selected:border-b-2 aria-selected:border-suitegolden aria-selected:opacity-100 !important;
  }
  .fave-label {
    @apply absolute -top-[9px] lg:top-[-15px] left-3 text-center bg-suitegolden w-[20px] h-[20px] lg:w-[35px] lg:h-[35px] pt-5 z-10 
        before:absolute before:top-0 before:-left-[0.32rem] lg:before:-left-2 before:border-suitedarkgolden before:border-[2.5px] lg:before:border-[4.5px] before:border-t-transparent before:border-r-transparent before:border-l-suitedarkgolden before:-rotate-90
        after:w-full after:absolute after:top-[20px] lg:after:top-[35px] after:left-0 after:border-suitegolden after:border-b-transparent after:border-t-0 after:border-r-[10px] after:border-b-[10px] after:border-l-[10px] 
        lg:after:border-r-[17px] lg:after:border-b-[17px] lg:after:border-l-[17px];
  }
  .fave-label img {
    @apply w-[13px] h-[13px] lg:w-[20px] lg:h-[20px] absolute top-1/2 left-1/2 animate-pulse -translate-y-1/2 -translate-x-1/2;
  }
}

/* header */

.tw-main-menu{
    @apply flex flex-col gap-6 lg:gap-7;
}
.tw-main-menu--item a{
    @apply text-xl lg:text-3xl font-semibold lg:font-medium text-suitemedgrey font-suiteoutfit group-[.current-menu-item]:text-suitegreen;
}
.tw-main-menu--item.current-menu-item a{
    @apply text-suitegreen;
}
.tw-main-menu {
  @apply flex flex-col gap-6 lg:gap-7 !important;
}
.tw-main-menu--item a {
  @apply text-xl lg:text-3xl font-semibold lg:font-medium text-suitemedgrey font-suiteoutfit group-[.current-menu-item]:text-suitegreen px-0 !important;
}
.tw-main-menu--item:hover {
  @apply bg-transparent !important;
}
.tw-main-menu--item:hover a {
  @apply text-suitegreen !important;
}
.tw-main-menu--item.current-menu-item a {
  @apply text-suitegreen !important;

}

.single-locations .single_request_price {
  @apply text-sm text-suitecharcoal font-medium capitalize text-left font-suiteoutfit;
}

.single-locations .single_request_price i {
  @apply text-suitegreen text-2xl;
}


/* horizontal custom scrollbar */
.custom-horizontal-scrollbar::-webkit-scrollbar {
  height: 3px;
}

/* Track */
.custom-horizontal-scrollbar::-webkit-scrollbar-track {
  background: transparent; 
}

/* Handle */
.custom-horizontal-scrollbar::-webkit-scrollbar-thumb {
  background: transparent; 
}

/* Handle on hover */
.custom-horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: transparent; 
}

.light-scrollbar::-webkit-scrollbar-thumb{
  background: #e7e7e7 !important;
}

/* custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

/* Handle */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.map-location-name::after{
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #287D82;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;

}

/* Track */
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


.ml--map-smm::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #287d82;
}

.ml--map-fave::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #d0b762;
}


.ml--map-fave {
  @apply bg-white text-suitegreen border-[3px] border-suitegolden p-1 text-[10px] w-[50px] h-[50px] rounded-full block text-center bg-no-repeat bg-center bg-cover shadow-map;
}

.ml--map-smm {
  @apply bg-white text-suitegreen border-[3px] border-suitegreen p-1 text-[10px] w-[50px] h-[50px] rounded-full block text-center bg-no-repeat bg-center bg-cover shadow-map;
}

.map-location-name--active {
  @apply bg-suitegreen text-white;
}

/* bidding range slider */
.bid-range-slider.ui-widget.ui-widget-content {
  @apply h-2 bg-suitegreen rounded-lg;
}

div.ui-slider-horizontal .ui-slider-range {
  --tw-bg-opacity: 1;
  background: rgb(229 231 235 / var(--tw-bg-opacity));
  height: 0.5rem;
  transform: unset;
  top: 0;
}
div.ui-state-default,
div.ui-widget-content .ui-state-default {
  @apply border-suitegreen;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  @apply bg-suitegreen !important;
}

.declined-offer{
    @apply bg-suitelightgray;
}

.ios-pullover{
    height: calc(100vh - 150px);
}

.android-pullover{
    height: calc(100vh - 125px);
}

.heading_cms,
.login_date{
  @apply hidden;
}

@media screen and (max-width: 976px) {
  /* .daterangepicker.show-calendar{
    @apply !w-full;
  } */
  .daterangepicker .calendar-table td{
    @apply !p-0;
  }
  .daterangepicker .calendar-table th{
    @apply !py-1
  }
  .daterangepicker .drp-calendar{
    @apply !max-w-full !float-none;
  }
}