@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer components {

    @font-face {
        font-family: 'IBM Plex Sans';
        font-weight: normal;
        src: url('/content/fonts/inter/Inter-Light.ttf') format('truetype');
        font-display: swap;
    }

    
    @font-face {
        font-family: 'IBM Plex Sans';
        font-weight: 500;
        src: url('/content/fonts/inter/Inter-Medium.ttf') format('truetype');
        font-display: swap;
    }


    body {
        @apply text-text overflow-x-hidden;
        font-family: 'IBM Plex Sans', sans-serif;
    }

    #moreFiltersCloseIcon {
        position: absolute;
        top: 0.7rem;
        right: 0.7rem;
        font-size: 24px;
        font-family: Arial, sans-serif;
        color: #000;
    }


    @media(min-width:768px){
        .ResultCardAmenities {
            width: 85%;
        }
    }

    .dropdown-toggle + ul {
    }

    .dropdown-toggle + ul > li:first-child, .sub-item > a:first-child {
        @apply rounded-t-md;
    }

    .sub-item > a:not(:last-child) {
        @apply border-b border-gray-200;
    }
    
    .dropdown-toggle + ul > li:last-child, .sub-item:not(#accountMenu) > a:last-child {
        @apply rounded-b-md;
    }

    .toast-success {
        @apply bg-secondary;
    }

    #toast-container > div {
        @apply shadow-dark;
    }


    #moreFiltersModal {
        width: 430px;
    }



    @media (max-width: 576px) and (max-height: 700px){
        #registration-modal {
            .btn-login, input, select {
                @apply py-1.5;
            }
        }
    }

    .swiper-lazy-preloader {
        top: 150px;
        border-color: #868490;
        border-top-color: transparent;

    }
    .swiper-pagination-bullet {
        background: #fff;
        opacity: 0.8;
    }

    .swiper-pagination-bullet-active {
        @apply bg-secondary;
    }


    /* Mapbox markers */
    .marker {
        border: none;
        cursor: pointer;
        height: 44px;
        width: 32px;
        background-image: url('/content/overhaul/img/png/icons/marker-groceries.png');
        background-color: rgba(0, 0, 0, 0);
      }

      .marker-groceries {
        background-image: url('/content/overhaul/img/png/icons/marker-groceries.png');
      }

      .marker-Restaurant {
            background-image: url('/content/overhaul/img/png/icons/marker-restaurant.png');

      }
      .marker-school {
            background-image: url('/content/overhaul/img/png/icons/marker-school.png');

      }


    input, textarea {
        @apply text-graypurpledark;
    }

    header li > a {
        @apply inline-block w-full h-full;
    }

    *:focus {
        outline: 0;
    }

    .ui-slider-range {
        @apply cursor-pointer;
    }

    button:focus {
        outline: 0;
    }

    .container {
        @apply w-full mx-auto px-6 xl:px-0;
        max-width: 100% !important;
    }

    .searchContainer {
        @apply px-2 md:px-4 xl:px-0;
    }

    .detail-container {
        @apply px-0;
    }

    @media(min-width: 576px){
        .searchContainer, .devResultsContainer, .devFilters {
            width: 360px;
        }
    }

    @media(min-width: 768px){
        .searchContainer, .devResultsContainer, .devFilters {
            width: 100%;
        }
    }

    
    @media (min-width: 1200px){
        .container {
            width: 1050px;
            margin: 0 auto;
        }
    }




    a {
        @apply no-underline;
    }

    ul, ol {
        @apply list-none;
    }

    h1,.h1 {
        @apply text-lg font-medium lg:text-2xl;
    }

    h2, .h2 {
        @apply text-lg font-medium lg:text-xl;
    }
    
    h3,.h3 {
        @apply font-medium;
    }

    h4,.h4 {
        @apply text-graypurpledark;
    }

    h6,.h6 {
        @apply text-graypurpledark text-sm;
    }

    select, .dropdown-arrow {
        @apply appearance-none cursor-pointer;
        background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05LjkyNjI5IDAuODc1MDAxTDYgNS45NzU0TDIuMDczNzEgMC44NzVMOS45MjYyOSAwLjg3NTAwMVoiIGZpbGw9IiNDMUJGQ0MiIHN0cm9rZT0iI0MxQkZDQyIgc3Ryb2tlLXdpZHRoPSIxLjI1Ii8+Cjwvc3ZnPgo=") no-repeat center right 1rem;
    }

    option, input[type="submit"] {
        @apply cursor-pointer;
    }

    .vcenter {
        text-align: center;
        position: relative;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .vcenterFlex {
        @apply flex flex-row items-center;
    }

    .col-count-2 {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }


    button, .btn, input[type='submit'] {
        @apply transition-all;
    }

    button, .btn{
        @apply border border-inputborder text-graypurpledark rounded-md px-4 py-2 transition-all;
    }

    button.secondary, .btn.secondary {
        @apply bg-secondary border-secondary text-white;
    }

    button.submit, .btn.submit {
        @apply bg-button border-button text-white;
    }


    /*** CSS triange arrow ****/

    .arrow-r {
        width: 0; 
        height: 0; 
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;

        border-left: 10px solid black;
    }

    .arrow-l {
        width: 0; 
        height: 0; 
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent; 
        border-right:10px solid black; 
    }


    /*** Alerts ***/

    .alert-danger {
        position: relative;
        padding: 0.75rem 1.25rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }

    /*************** Checkbox and radio fancy ****************/
    .checkboxItem {
        @apply block relative pl-8 mb-4 cursor-pointer select-none; 
    }
    .checkboxItem.small {
        padding-left: 1.375rem;
    }
    .checkboxItem input {
        @apply absolute cursor-pointer opacity-0 h-0 w-0;
    }
    .checkmark {
        @apply absolute top-0 left-0 rounded-md border border-inputborder; 
        height: 22px;
        width: 22px;
    }
    .checkmark.small {
        height: 16px;
        width: 16px;
    }
    .checkmark.radio {
        @apply rounded-xl;
    }
    .checkboxItem:hover input ~ .checkmark {
        @apply bg-gray-100;
    }
    .checkboxItem input:checked ~ .checkmark:not(.radio) {
        @apply bg-secondary border-secondary;
    }
    .checkboxItem input:checked ~ .checkmark.radio {
        @apply bg-white border-secondary;
    }
    .checkmark:after {
        @apply absolute hidden;
        content: "";
    }
    .checkboxItem input:checked ~ .checkmark:after {
        @apply block;
    }
    .checkboxItem .checkmark:not(.radio):after {
        @apply border border-white transform rotate-45;
        height: 11px;
        width: 7px;
        top: 3px;
        left: 7px;
        border-width: 0 3px 3px 0;
    }

    .checkboxItem.small .checkmark:not(.radio):after {
        height: 8px;
        width: 5px;
        top: 2px;
        left: 5px;
        border-width: 0 2px 2px 0;
    }

    .checkboxItem .checkmark.radio:after {
        @apply bg-secondary;
        top: 4px;
        left: 4px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .checkboxItem.small .checkmark.radio:after {
        top: 3px;
        left: 3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    /************* Custom scrollbar ************/

    .scrollWindow {
        @apply overflow-y-auto overflow-x-hidden w-full p-4 h-3/5;
    }

    .scrollWindow::-webkit-scrollbar {
        @apply w-1;
    }
     
    .scrollWindow::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 1px 0 0 #eee;
    }
     
    .scrollWindow::-webkit-scrollbar-thumb {
        @apply bg-graypurpledark;
    }

    /********* loading animation  ***********/

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 12px;
}

.lds-ellipsis.small {
    width: 40px;
    height: 40px;
}

.lds-ellipsis div {
    @apply bg-graypurpledark;
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis.light div {
    @apply bg-white;
}

.lds-ellipsis.small div {
    top: 16px;
    width: 6px;
    height: 6px;
}
.SearchButton .lds-ellipsis div {
    top: 22%;
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}



    /************ Move everything below to inline once finalized *************/


    /*** breadcrumb ***/

    .breadcrumb {        
        li:not(:last-child)::after {
            content:"";
            @apply relative inline-block w-1.5 h-1.5 bottom-0.5 border-t border-r border-graypurpledark transform rotate-45;
        }
    }


    /*** general ***/

    header {
        li {
            @apply block relative h-8 lg:inline-block;
        }

        ul li ul {
            @apply absolute invisible hidden opacity-0 left-0 top-8; 
        }

        ul li ul li {
            @apply clear-both w-full whitespace-nowrap transition-all px-2;
        }
    }

    .filters-container {
        /* keep this here as it needs to apply to Select2's dynamic select box */
        input, button, select {
            @apply h-12 xl:h-16 mb-2 lg:mb-4 pl-3;
        }

        select {
            -moz-appearance:none; /* Firefox */
            -webkit-appearance:none; /* Safari and Chrome */
            appearance:none;
        }

        /* keep here because dynamic */
        .selected > a {
            @apply border-b-4 border-button pb-1;
        }
    }

    /*** Modals ***/
    
    .modal {
        @apply w-full h-full md:w-80;

        .modal-header {
            @apply hidden md:block text-lg font-medium mb-4;
        }

        .btn-login, input, select {
            @apply block w-full mb-2 px-4 py-2 border border-inputborder rounded-md text-graypurpledark;
        }

        .two-col {
            @apply flex;

            select {
                @apply w-2/5;
            }

            input {
                @apply w-3/5;
            }
        }

        .submit {
            @apply bg-button text-white border-button w-full;
        }
    }


    .contactEmail {
        input:not([type='radio']), select {
            @apply block w-full mb-2 px-4 py-2 border border-inputborder rounded-md text-graypurpledark;
        }

        textarea {
            @apply block w-full mb-2 px-4 py-2 border border-inputborder rounded-md text-graypurpledark;
        }

        button {
            @apply w-full;
        }

        form {
            @apply w-full md:w-96;
        }

        .two-col {
            @apply grid grid-rows-1 grid-cols-12 gap-1;

            select {
                @apply col-span-4;
            }

            input {
                @apply col-span-8;
            }
        }
    }



    .OnShowLabel > div > div::before {
        @apply bg-secondary;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        opacity: .4;
        content: "";
        z-index: -1;
    }





}