/*!
 * IDwebhost Order
 * https://order.idwebhost.com
 * Designed by Degiam
 * Copyright (c) 2024
 */

@import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

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

@layer base {
	body {
		@apply flex flex-col min-h-screen overflow-y-auto cursor-default font-theme-1 bg-theme-100;
	}

	footer {
		@apply mt-auto;
	}
	footer a:hover {
		@apply text-white;
	}

	h1, h2, h3, h4, h5, h6 {
		@apply text-theme-700 !leading-[120%];
	}
	.slider::-webkit-slider-thumb {
		@apply appearance-none w-6 h-6 bg-theme-400 cursor-pointer rounded-full shadow-[0_2px_4px_rgba(0,0,0,0.2)] transition-all duration-200;
	}

	.slider::-webkit-slider-thumb:hover {
		@apply scale-110 shadow-[0_4px_8px_rgba(0,0,0,0.3)];
	}

	.slider::-moz-range-thumb {
		@apply z-10 w-6 h-6 bg-blue-500 cursor-pointer rounded-full border-none shadow-[0_2px_4px_rgba(0,0,0,0.2)] transition-all duration-200;
	}

	.slider::-moz-range-thumb:hover {
		@apply z-10 scale-110 shadow-[0_4px_8px_rgba(0,0,0,0.3)];
	}
}

@layer components {
	.title-gradient {
		@apply text-transparent bg-clip-text bg-gradient-to-r from-theme-400 to-theme-300;
	}

	.btn {
		@apply inline-block font-theme-1 cursor-pointer border-transparent px-4 py-2 sm:px-6 sm:py-3 relative border-2 font-medium sm:text-lg sm:leading-[1.223] transition rounded-lg [&[disabled]]:pointer-events-none [&.disabled]:pointer-events-none [&[disabled]]:text-slate-400 [&.disabled]:text-slate-400;
	}
	.primary {
		@apply text-white no-underline border-transparent hover:text-white bg-theme-400 hover:bg-theme-300 [&[disabled]]:bg-slate-100 [&.disabled]:bg-slate-100;
	}
	.secondary {
		@apply no-underline text-theme-400 border-theme-400 hover:text-theme-300 hover:border-theme-300 [&[disabled]]:border-slate-200 [&.disabled]:border-slate-200;
	}
	.tertiary, p a {
		@apply underline transition text-sky-500 hover:text-sky-400;
	}
	.priority {
		@apply font-semibold no-underline text-white bg-gradient-to-r from-red-500 to-orange-500 border border-transparent hover:text-white rounded-lg gap-x-2 hover:bg-gradient-to-l hover:scale-105 [&[disabled]]:border-slate-200 [&.disabled]:border-slate-200;
	}
	.light {
		@apply bg-white text-black no-underline border-transparent hover:bg-slate-100 [&[disabled]]:bg-slate-200 [&[disabled]]:text-slate-400 [&.disabled]:bg-slate-200 [&.disabled]:text-slate-400;
	}
	.dark {
		@apply bg-slate-700 text-white no-underline border-transparent hover:bg-slate-600 [&[disabled]]:bg-slate-200 [&[disabled]]:text-slate-400 [&.disabled]:bg-slate-200 [&.disabled]:text-slate-400;
	}
	.success {
		@apply text-white no-underline border-transparent hover:text-white bg-green-600 hover:bg-green-500 [&[disabled]]:bg-slate-100 [&.disabled]:bg-slate-100;
	}
	.danger {
		@apply text-white no-underline border-transparent hover:text-white bg-rose-600 hover:bg-rose-500 [&[disabled]]:bg-slate-100 [&.disabled]:bg-slate-100;
	}

	.form-label {
		@apply text-xs text-slate-600 bg-white py-1 px-1.5 rounded-md absolute -top-3 left-3 z-[1];
	}
	.form-control, .form-select, .form-checkbox {
		@apply block border border-slate-300 placeholder-slate-300 focus:border-theme-300 focus:ring-theme-300 focus:outline-0 disabled:bg-slate-200/50 disabled:opacity-100 disabled:cursor-default disabled:pointer-events-none [&.focus]:border-theme-300 [&.focus]:ring-theme-300 [&.focus]:ring-1 [&.focus]:outline-0;
	}
	.form-control, .form-select {
		@apply block w-full px-4 py-3 border rounded-lg border-slate-300 placeholder-slate-300 focus:border-theme-300 focus:ring-theme-300 focus:outline-0 disabled:bg-slate-200/50 disabled:opacity-100 disabled:cursor-default disabled:pointer-events-none;
	}
	.form-select {
		@apply appearance-none cursor-pointer pe-9;
	}
	.form-checkbox {
		@apply appearance-none cursor-pointer rounded-md p-2 mt-[2px] mr-2 ring-theme-300 checked:bg-theme-300 focus:checked:bg-theme-300 focus-within:checked:bg-theme-300 hover:checked:bg-theme-300;
	}

	.scrollbar-hidden {
		-ms-overflow-style: none;
		scrollbar-width: none;
		overflow-y: scroll;
	}
	.scrollbar-hidden::-webkit-scrollbar {
		display: none;
	}

	.swipe {
		@apply snap-x snap-mandatory;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.swipe::-webkit-scrollbar {
		@apply hidden;
	}
	.swipe > * {
		@apply snap-center;
	}

	.tab-dialog:after {
		@apply hidden lg:block content-[''] w-5 h-5 rounded-md rotate-45 bg-white absolute top-0 bottom-0 -right-10 m-auto transition scale-0;
	}
	.radio-default:before {
		@apply content-[''] block w-4 h-4 lg:w-6 lg:h-6 border border-slate-400 rounded-full absolute top-3 left-2 m-1;
	}
	/* Custom slider styles */
	.slider-track {
		@apply relative h-2 w-full bg-theme-400/20 rounded-full;
	}
}

@layer utilities {
	.max-w-8xl {
		max-width: 90rem;
	}
}

.error {
	@apply text-[14px] text-red-500;
}

textarea.error,
input.error,
.input-error {
	@apply border-red-500 text-[16px];
}

.sidebar-scroll {
	@apply max-h-screen !overflow-auto !top-0 pt-4 pb-7;
	-ms-overflow-style: none;
	scrollbar-width: none;
	overflow-y: scroll;
}
.sidebar-scroll::-webkit-scrollbar {
	display: none;
}