/*!
 * ResellerCamp
 * https://resellercamp.com
 * Designed by Degiam [https://degiam.github.io]
 * Copyright (c) 2022
 */

@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700&family=Rubik:wght@300;400;700&display=swap');

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

@layer base {
	* {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	::-moz-selection {
		@apply text-white bg-cyan-400;
	}
	::selection {
		@apply text-white bg-cyan-400;
	}
	body {
		@apply font-theme-2 cursor-default;
	}
	h1, h2, h3, h4, h5, h6 {
		@apply font-theme-1 font-bold;
	}
	img {
		/* image-rendering: -webkit-optimize-contrast;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: crisp-edges; */
	}
	.break-words {
		word-break: break-word;
	}
	.w-fit {
		width: -moz-fit-content;
	}
	select option {
		@apply dark:text-black;
	}

	.text-magenta-500 {
		@apply text-cyan-500;
	}
}

@layer components {
	/* Base */
		body {
			@apply text-black/80 dark:text-white bg-white dark:bg-blue-dark-800 transition-all duration-100;
		}
		header {
			@apply sticky top-0 z-10 bg-white/80 lg:bg-white/80 dark:bg-blue-dark-800/80 dark:lg:bg-blue-dark-800/70 backdrop-blur-md transition-all duration-300;
		}
		footer > *:not([class*="bg"]) {
			@apply text-white bg-blue-dark-500 dark:bg-blue-dark-700;
		}

		a, button {
			@apply transition-all duration-300 outline-0;
		}

		.section {
			@apply max-w-[1536px] mx-auto px-5 lg:px-10;
		}

	/* Navbar */
		.navbar > .nav-item {
			@apply block lg:inline-block py-1;
		}
		.navbar > .nav-item > .nav-link {
			@apply block py-2 lg:px-4 hover:text-cyan-500 dark:hover:text-yellow-400;
		}
		.dropdown-menu .nav-item {
			@apply block relative;
		}
		.dropdown-menu .nav-link {
			@apply block py-2 px-4 hover:text-cyan-500 dark:hover:text-yellow-400;
		}
		.dropdown {
			@apply relative;
		}
		.dropdown-toggle > a {
			@apply block py-2 lg:px-4 mr-4;
		}
		.dropdown-toggle > button {
			@apply absolute top-0 bottom-0 right-0 md:right-2;
		}
		.dropdown-toggle:hover > * {
			@apply text-cyan-500 dark:text-yellow-400;
		}
		.dropdown-toggle {
			@apply relative block;
		}
		.dropdown-menu .dropdown-toggle > a {
			@apply block py-2 px-4 lg:pr-7;
		}
		.dropdown-menu .dropdown-toggle > button {
			@apply absolute top-0 right-0 lg:mr-3;
		}
		.dropdown-first {
			@apply block text-left lg:absolute lg:top-auto lg:right-0 lg:mt-2 lg:rounded-lg lg:border lg:border-slate-100 dark:lg:border-blue-dark-600 lg:shadow-lg lg:py-2 lg:bg-white dark:lg:bg-blue-dark-700;
		}
		.nav-item.active,
		.dropdown-toggle.active > * {
			@apply text-cyan-500 dark:text-yellow-500;
		}

	/* Button */
		.button {
			@apply inline-block font-theme-1 rounded-full px-6 py-3 hover:shadow-lg text-white bg-gradient-to-b from-blue-light-300 to-blue-light-600;
		}
		.button.yellow {
			@apply text-black bg-gradient-to-b from-yellow-300 to-yellow-500;
		}
		.button.red {
			@apply bg-gradient-to-b from-red-400 to-red-600;
		}
		.button.green {
			@apply bg-gradient-to-b from-green-400 to-green-600;
		}

		.link {
			@apply inline-block text-cyan-500 hover:text-black/80 dark:text-yellow-400 dark:hover:text-white/80;
		}
		.link.green {
			@apply text-green-600 dark:text-green-500;
		}
		.link.red {
			@apply text-red-600 dark:text-red-500;
		}

	/* Badge */
		.badge {
			@apply inline-block bg-slate-200 text-[10px] leading-none font-bold uppercase tracking-widest rounded-md p-2;
		}
		.badge.yellow {
			@apply text-black/80 bg-yellow-400;
		}
		.badge.red {
			@apply text-white bg-red-600 dark:bg-red-700;
		}
		.badge.green {
			@apply text-white bg-green-600 dark:bg-green-700;
		}
		.badge.cyan {
			@apply text-white bg-cyan-500 dark:bg-cyan-600;
		}

	/* Form */
		fieldset {
			@apply mb-5 last:mb-0;
		}
		.label {
			@apply text-xs uppercase tracking-widest opacity-70;
		}
		.input {
			@apply focus:ring-0 focus:outline-none w-full py-2 px-1 bg-transparent rounded-none border-0 border-b border-[rgba(0,0,0,.25)] focus:border-cyan-500 dark:border-[rgba(255,255,255,.5)] dark:focus:border-yellow-400 placeholder:font-light placeholder:tracking-wide placeholder:text-current placeholder:opacity-50;
		}
		.checkbox > *,
		.radio > * {
			@apply cursor-pointer;
		}

	/* Pagin */
		.pagination {
			@apply md:text-center;
		}
		.pagination .page-item {
			@apply inline-block leading-none my-2;
		}
		.pagination .page-link {
			@apply flex items-center justify-center min-w-[2.5rem] h-10 leading-none p-3 border-b-4 border-slate-400/50 dark:border-slate-100/20 hover:border-cyan-500 dark:hover:border-yellow-400;
		}
		.pagination .disabled .page-link {
			@apply pointer-events-none opacity-50;
		}
		.pagination .active .page-link {
			@apply pointer-events-none border-cyan-500 dark:border-yellow-400;
		}

	/* Card */
		.card {
			@apply bg-white dark:bg-black/30 rounded-xl lg:rounded-3xl p-7 shadow-lg border border-gray-100 dark:border-black/10;
		}
		.card.inverse {
			@apply dark:bg-white/5;
		}

	/* List */
		.list {
			@apply pl-5 mb-5 last:mb-0;
		}
		.list li {
			@apply mb-3 last:mb-0;
		}
		.list ul,
		.list ol {
			@apply mt-3 pl-5;
		}

		.list-underline > li {
			@apply border-b last:border-none border-slate-200 dark:border-white/30 pt-7 pb-7 last:pb-0;
		}

	/* Table */
		.table-standard {
			@apply text-left;
		}
		.table-standard th,
		.table-standard td {
			@apply align-top p-1 first:pl-0 last:pr-0;
		}

		.table-border th,
		.table-border td {
			@apply border-b border-slate-300/50 dark:border-slate-100/10 p-2;
		}
		.table-border tr:last-child th,
		.table-border tr:last-child td {
			@apply border-b-0;
		}

		.table-responsive th,
		.table-responsive td {
			@apply block px-0 first:pb-0 last:pt-0 md:table-cell md:px-2 md:first:pb-2 md:last:pt-2;
		}
		.table-responsive th:not(:last-child),
		.table-responsive td:not(:last-child) {
			@apply border-b-0 md:border-b;
		}

	/* Tab Content */
		.tab-nav-item {
			@apply inline-block rounded-lg px-4 py-2 bg-black/5 dark:bg-white/5 transition-none;
		}
		.tab-nav-item.active {
			@apply dark:text-black/80 bg-gradient-to-b from-yellow-200 to-yellow-400;
		}
		.tab-nav > .tab-nav-item {
			@apply rounded-full px-6 py-3;
		}
		.tab-nav > .tab-nav-item.active {
			@apply text-white from-blue-light-300 to-blue-light-600;
		}
		[role="tablist"] select {
			@apply focus:ring-0 focus:outline-none appearance-none cursor-pointer w-full bg-black/5 dark:bg-white/5 rounded-lg py-3 pl-4 pr-8 border-transparent focus:border-cyan-500 dark:focus:border-yellow-400;
		}

	/* Tooltip */
		.tooltip-inner {
			@apply absolute rounded-lg p-3 text-xs w-fit max-w-[300px] text-left bg-black text-white;
		}
		.tooltip-inner:before {
			content: '';
			width: 0;
			height: 0;
			border-left: .5rem solid transparent;
			border-right: .5rem solid transparent;
			border-top: .5rem solid #000;
			bottom: -.5rem;
			@apply absolute left-0 right-0 mx-auto;
		}

	/* Alert */
		.alert {
			@apply flex gap-1 bg-green-200 text-green-800 rounded-xl p-3;
		}
		.alert.success {
			@apply bg-green-200 text-green-800;
		}
		.alert.danger {
			@apply bg-red-200 text-red-800;
		}
		.coupon-code .alert {
			@apply absolute w-[calc(100%-55px)];
		}

	/* Accordion */
		.accordion > * {
			@apply border-b last:border-b-0 border-slate-300/50 dark:border-slate-100/10;
		}
		.accordion .active {
			@apply bg-yellow-400 dark:bg-yellow-400 dark:text-black/80;
		}

	/* Content */
		p:not(:last-child) {
			@apply mb-5;
		}
		img {
			@apply h-auto max-w-full;
		}

		.list-oddeven\/2 > *:nth-child(even) > *:first-child {
			@apply md:order-2;
		}
		.list-oddeven\/2 > *:nth-child(even) > *:last-child {
			@apply md:order-1 md:text-right;
		}

		.table-domain th,
		.table-domain td {
			@apply first:pl-2 last:pr-2;
		}
		.table-domain thead th,
		.table-domain thead td {
			@apply align-middle;
		}
    /* slider */
        .swiper-button-next::after, .swiper-button-prev::after{
            @apply text-[90%] font-bold;
        }
        .swiper-button-next, .swiper-button-prev {
            @apply bg-white w-[35px] h-[35px] rounded-xl p-4;
        }
        .swiper-pagination-bullet-active{
            @apply bg-white;
        }
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

[type=checkbox],
[type=radio] {
	display: inline-block;
	vertical-align: middle;
	background-origin: border-box;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: #06b6d4;
	background-color: white;
	border: 1px solid rgba(0,0,0,.25);
	border-radius: 5px;
	padding: 0;
	margin-top: -3px;
	cursor: pointer;
	-webkit-print-color-adjust: exact;
	color-adjust: exact;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
[type=checkbox] + label,
[type=radio] + label {
	cursor: pointer;
}
[type=checkbox]:checked,
[type=radio]:checked {
	border-color: transparent;
	background-color: currentColor;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}
[type=checkbox]:checked {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
[type=radio]:checked {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.dark [type=checkbox],
.dark [type=radio] {
	background-color: rgba(255,255,255,.1);
	border: rgba(255,255,255,.25);
}

#chatonomy-widget input,
#chatonomy-chat-input {
	@apply bg-white;
}