@import "tailwindcss";

@plugin "../../../tailwind.forms.js";

@import "../../../node_modules/intl-tel-input/build/css/intlTelInput.css";
@import "../../../node_modules/air-datepicker/air-datepicker.css";

@theme{
    --color-teal-50: #eefffd;
    --color-teal-100: #c6fffa;
    --color-teal-200: #8dfff7;
    --color-teal-300: #4cfcf2;
    --color-teal-400: #18e9e4;
    --color-teal-500: #00cdcb;
    --color-teal-600: #00a3a5;
    --color-teal-700: #027f82;
    --color-teal-800: #076568;
    --color-teal-900: #0c5355;
    --color-teal-950: #003034;

    --color-linen: #f5eee9;

}

.font-raleway {
    font-family: "Raleway", sans-serif;
}

body {
    font-family: "Inter", sans-serif;
    color: #0c0c0c;
}

h1,
h2,
h3 {
    @apply font-bold leading-tight tracking-tight;
}

.btn-primary {
    @apply inline-flex items-center justify-center cursor-pointer rounded-md border border-emerald-700 bg-emerald-700 px-3 py-2 text-sm text-white shadow-xs hover:bg-emerald-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-emerald-700;
}

.btn-accent {
    @apply inline-flex items-center justify-center cursor-pointer rounded-md border border-blue-800 bg-blue-800 px-3 py-2 text-sm text-white shadow-xs hover:bg-blue-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-blue-700;
}


.btn-outline {
    @apply inline-flex items-center justify-center cursor-pointer rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-emerald-700;
}

.btn-danger {
    @apply inline-flex items-center justify-center cursor-pointer rounded-md border border-red-700 bg-red-700 px-3 py-2 text-sm text-white shadow-xs hover:bg-red-700/90 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-red-600;
}

.link-primary {
    @apply cursor-pointer text-emerald-700 hover:underline;
}

.btn-primary:disabled,
.btn-outline:disabled,
.btn-danger:disabled {
    @apply cursor-not-allowed opacity-50;
}


.iti {
    --iti-border-color: #ccc;
    /*--iti-border-gray: #000;*/
    --iti-path-flags-1x: url("/assets/intl-tel-input/flags-b939c200.webp");
    --iti-path-flags-2x: url("/assets/intl-tel-input/flags@2x-40b07c36.webp");
    --iti-path-globe-1x: url("/assets/intl-tel-input/globe-0e5991cb.webp");
    --iti-path-globe-2x: url("/assets/intl-tel-input/globe@2x-3e87d086.webp");
    width: 100%;
}

.iti .iti__selected-dial-code {
    @apply text-sm;
}

.iti .iti__dropdown-content {
    @apply rounded overflow-hidden shadow-sm;
}

.iti .iti__search-input {
    @apply focus:outline-0 focus-visible:outline-none focus-visible:ring-0 border-0 rounded-none py-2 text-sm;
}

.iti .iti__country {
    @apply text-xs;
}

.iti .iti__country-name {
    @apply truncate;
}

.ts-control input {
    min-width: auto !important;
    width: auto !important;
    font-size: 16px !important;
}

.plugin-dropdown_input .dropdown-input {
    box-shadow: none !important;

    @apply border-gray-200 rounded-none border-b;
}

.ts-control {
    background-image: none !important;
    box-shadow: none !important;
    @apply h-10 rounded bg-gray-50 border-gray-200;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.input-active .ts-control {
    @apply outline-none ring-1 ring-emerald-600 border-transparent;
}

.ts-dropdown {
    @apply border-gray-200 rounded-b-lg;
}


button {
    position: relative;
}

button .loading {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    background-color: #ffffff;
    animation: dot-flashing 0.7s infinite linear alternate;
    /* Reduced from 1s */
    animation-delay: 0.3s;
    /* Reduced from 0.5s */
}

button.btn-outline .loading {
    background-color: #4a4a4a;
    animation: dot-flashing-dark 0.7s infinite linear alternate;
}

button .loading::before,
button .loading::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    background-color: #ffffff;
}

button.btn-outline .loading::before,
button.btn-outline .loading::after {
    background-color: #4a4a4a;
}


button .loading::before {
    left: -12px;
    animation: dot-flashing 0.7s infinite alternate;
    /* Reduced from 1s */
    animation-delay: 0s;
    /* Same as original */
}

button.btn-outline .loading::before {
    animation: dot-flashing-dark 0.7s infinite alternate;
}


button .loading::after {
    left: 12px;
    animation: dot-flashing 0.7s infinite alternate;
    /* Reduced from 1s */
    animation-delay: 0.7s;
    /* Adjusted from 1s to match number_requests duration */
}

button.btn-outline .loading::after {
    animation: dot-flashing-dark 0.7s infinite alternate;
}


@keyframes dot-flashing-dark {
    0% {
        background-color: #4a4a4a;
    }

    50%,
    100% {
        background-color: rgba(74, 74, 74, 0.2);
    }
}

@keyframes dot-flashing {
    0% {
        background-color: #ffffff;
    }

    50%,
    100% {
        background-color: rgba(255, 255, 255, 0.2);
    }
}

button:has(.loading) {
    color: transparent;
}

.loading {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
}


dialog {
    margin: auto;
}

label.disabled {
    @apply opacity-60;
}

input:disabled,
select:disabled,
textarea:disabled {
    @apply opacity-60;
}


/* will_paginate pagination */

.pagination {
    @apply flex items-center;
}

.pagination > a,
.pagination > span,
.pagination em {
    @apply inline-flex items-center justify-center cursor-pointer border-y border-r border-gray-200 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-emerald-700;
}

.pagination .current {
    @apply hover:cursor-not-allowed hover:bg-white text-emerald-600 underline not-italic;
}

.previous_page {
    @apply rounded-l-md border-l;
}

.next_page {
    @apply rounded-r-md border-r;
}

.previous_page.disabled,
.next_page.disabled {
    @apply hover:bg-white text-gray-400 cursor-not-allowed;
}


.container {
    @apply mx-auto max-w-7xl px-4 xl:px-0;
}

/* Cloudflare Turnstile Widget*/
/* Target the outer container */
[id^="cf-chl-widget"] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* Target the iframe inside it */
[id^="cf-chl-widget"] iframe {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}