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

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap");

:root {
	--primary-color: #11897d;
	--secondary-color: #114f56;
	--third-color: #11897d1a;
	--fourth-color: #11897d0f;
	--main-bg: #fff;

	--black-color: #15211d;
	--text-color: #0a2e36;
	--yellow-color: #deb00d;
	--yellow-bg-color: #fef9c3;
	--border-color: #00000014;
	--white-off: #f5f5f5;

	--shadow-color: #0a2e361a;
	--shadow-color-2: #114f5614;
	--line-color: #114f561a;
}

html {
	scroll-behavior: smooth;
}

/* Custom CSS */ 
@layer components {
	.to::after {
		content: "";
		position: absolute;
		width: 0%;
		height: 0%;
		top: 50%;
		left: 50%;

		transform: translate(-50%, -50%);
		transition: all 0.3s ease-in;
		z-index: -1;
		background-color: inherit;
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-ms-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
	}

	.to-primary:hover::after {
		width: 200%;
		height: 200%;
		border-radius: 50%;
		background-color: var(--primary-color);
	}

	.to-secondary:hover::after {
		width: 200%;
		height: 200%;
		border-radius: 50%;
		background-color: var(--main-bg);
	}

	.to-danger:hover::after {
		width: 200%;
		height: 200%;
		border-radius: 50%;
		background-color: #ca0000;
	}

	.to_yellow::after,
	.to_white::after,
	.to_white_hover::after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.5s ease-in-out;
		border-radius: 50%;
		z-index: -1;
	}

	.parent:hover .to_yellow::after {
		width: 120%;
		height: 120%;
		background-color: var(--yellow-color);
	}

	.parent:hover .to_white::after {
		width: 120%;
		height: 120%;
		background-color: var(--yellow-color);
	}

	.to_white_hover:hover::after {
		width: 120%;
		height: 120%;
		background-color: var(--yellow-color) !important;
	}

	.parent:hover .to_yellow img,
	.parent:hover .to_white img {
		z-index: 10;
	}

	/* .parent:hover .to_white img{ placeholder
		filter: invert(0%) sepia(91%) saturate(24%) hue-rotate(100deg) brightness(110%) contrast(100%) !important;
	} */

	.to_white_hover:hover::after svg {
		z-index: 10;
	}

	.contact_form input,
	.contact_form textarea {
		@apply px-5 rounded-[40px];
	}

	.arrow_en::after {
		@apply content-[""] absolute h-0 w-0 border-y-[22px] border-y-transparent border-r-[25px] border-r-[#333333] left-[-25px] top-1/2 -translate-y-1/2;
	}

	.arrow_ar::after {
		@apply content-[""] absolute h-0 w-0 border-y-[22px] border-y-transparent border-l-[25px] border-l-[#333333] right-[-25px] top-1/2 -translate-y-1/2;
	}
}

/* Custom CSS images and overlays */
@layer components {
	.auth_image {
		background-image: url("/images/shape-green.png");
		background-position: center;
		background-size: 50%;
		background-repeat: no-repeat;
	}

	.back_image {
		background-image: url("/images/about.webp");
		background-position: center;
		background-size: contain;
		/* background-repeat: no-repeat; */
	}

	.how_to_use_image,
	.chat_image {
		background-image: url("/images/shape-dark.png");
		background-position: center;
		background-size: 40%;
		background-repeat: no-repeat;
	}

	@media screen and (max-width: 768px) {

		.how_to_use_image,
		.chat_image {
			background-size: 70%;
		}
	}

	.chat_image {
		background-size: 30%;
	}

	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--text-color);
		opacity: 0.9;
		z-index: 3;
	}
}

/* Custom Phone Number in Contact us */
@layer components {
	.phone {
		@apply !w-full;
	}

	.phone_contact,
	.phone_contact_ar {
		@apply !h-[64px] !w-full;
	}

	.phone_contact input,
	.phone_contact_ar input {
		@apply !w-full !h-full !pl-[65px] !rounded-[40px] !text-[16px] !text-textColor !tracking-wider !font-normal;
	}

	.phone_contact_ar input {
		@apply !pr-[65px] !pl-5;
	}

	.phone_contact .flag-dropdown,
	.phone_contact_ar .flag-dropdown {
		@apply !border-r !border-border !w-[60px] !bg-white !border-white !rounded-l-[40px];
	}

	.phone_contact_ar .flag-dropdown {
		@apply !border-l !border-border !rounded-r-[40px] !rounded-l-none;
	}

	.phone_contact .react-tel-input .selected-flag:hover,
	.phone_contact .react-tel-input .selected-flag:focus,
	.phone_contact .react-tel-input .flag-dropdown.open,
	.phone_contact .react-tel-input .flag-dropdown.open .selected-flag {
		@apply !bg-[""] !rounded-l-[40px];
	}

	.phone_contact_ar .react-tel-input .selected-flag:hover,
	.phone_contact_ar .react-tel-input .selected-flag:focus,
	.phone_contact_ar .react-tel-input .flag-dropdown.open,
	.phone_contact_ar .react-tel-input .flag-dropdown.open .selected-flag {
		@apply !bg-[""] !rounded-r-[40px] !rounded-l-none;
	}

	.phone_contact .flag-dropdown .selected-flag {
		@apply !pl-5 !rounded-l-[40px] !w-[60px];
	}

	.phone_contact_ar .flag-dropdown .selected-flag {
		@apply !rounded-r-[40px] !rounded-l-none !pr-5 !pl-0;
	}

	.phone_contact_ar .selected-flag .arrow {
		@apply !right-[20px];
	}

	.phone_auth {
		@apply !w-full !bg-whiteOff border !border-whiteOff !rounded-[40px] !h-[50px];
	}

	.phone_auth .flag-dropdown {
		@apply !border-r !w-[60px] !bg-whiteOff !border-whiteOff !rounded-l-[40px];
	}

	.phone_auth .react-tel-input .selected-flag:hover,
	.phone_auth .react-tel-input .selected-flag:focus,
	.phone_auth .react-tel-input .flag-dropdown.open,
	.phone_auth .react-tel-input .flag-dropdown.open .selected-flag {
		@apply !bg-whiteOff !rounded-l-[40px];
	}

	.phone_auth input {
		@apply !bg-whiteOff !border-whiteOff;
	}
}

/* Custom Filter Input  */
@layer base {
	.textarea textarea {
		@apply !rounded-[25px] !bg-whiteOff !border-whiteOff;
	}

	.filter_input_search .ant-input-affix-wrapper,
	.filter_input_search .ant-picker-outlined,
	.filter_input_search_white .ant-input-affix-wrapper,
	.filter_input_search_white .ant-picker-outlined {
		@apply !rounded-[25px] !h-[40px] md:h-[50px] !bg-whiteOff !border-whiteOff !important;
	}

	.filter_input_search_white .ant-input-affix-wrapper,
	.filter_input_search_white .ant-picker-outlined {
		@apply !bg-white !border-white !shadow-[0px_0px_20px_#0A2E360F];
	}

	.filter_input_search .ant-form-item,
	.filter_input_search_white .ant-form-item {
		@apply !mb-3;
	}

	.ant-input:hover,
	.ant-input:focus {
		z-index: 0 !important;
	}

	.ant-input-affix-wrapper {
		z-index: 0 !important;
	}


	/* !ps-9 */
	.filter_select .ant-select-selector,
	.filter_select_multiple .ant-select-selector {
		@apply !h-[40px] !rounded-[25px] !bg-whiteOff !ps-9 !w-full !border-whiteOff;
	}

	.filter_select .ant-select-selection-search {
		@apply !ps-6 !m-0;
	}

	.filter_select_multiple .ant-select-selection-search {
		@apply !ps-0 !m-0;
	}

	/* .filter_select .ant-select-selection-placeholder, */
	/* .filter_select_multiple .ant-select-selection-placeholder { */
	/* @apply !start-9; */
	/* padding: 4px !important; */
	/* } */

	.filter_select .ant-select-selector input,
	.filter_select_multiple .ant-select-selector input,
	.ant-select-single {
		@apply !h-full;
	}
}

.ant-image {
	width: 100% !important;
}

.tox-statusbar {
	display: none !important;
}

.ant-table-cell {
	text-align: center !important;
}

.ant-dropdown {
	max-height: 400px !important;
	height: fit-content !important;
	overflow-y: auto !important;
	box-shadow: 0px 0px 10px var(--shadow-color) !important;
	border-radius: 15px !important;
}

@media (max-width: 768px) {
	.ant-dropdown {
		margin-left: 50px !important;
	}

	html[dir="rtl"] .ant-dropdown {
		left: unset !important;
		margin-right: 50px !important;
	}
}

.ant-table-thead>tr>th,
.ant-table-tbody>tr>td {
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--primary-color) !important;
}

.ant-table-tbody>tr>td {
	color: var(--text-color) !important;
}

.ant-picker-input {
	padding-inline-start: 25px !important;
}

.ant-modal .ant-modal-content {
	border-radius: 40px !important;
}

.ant-switch.ant-switch-checked {
	background-color: var(--yellow-color) !important;
}

.ant-checkbox-checked .ant-checkbox-inner {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

.ant-table-container::before,
.ant-table-container::after {
	box-shadow: none !important;
}

@layer base {
	.react-calendar {
		@apply !w-full !border !border-border !rounded-[40px];
	}

	.react-calendar .react-calendar__navigation {
		@apply !bg-border !border-b !border-b-border !rounded-t-[40px] !h-[65px] !p-0 !m-0;
	}

	.react-calendar .react-calendar__navigation button:first-child,
	.react-calendar .react-calendar__navigation button:last-child {
		@apply !hidden;
	}

	.react-calendar .react-calendar__navigation button:nth-child(2),
	.react-calendar .react-calendar__navigation button:nth-child(4) {
		@apply !w-[65px] !h-[65px] !text-primary text-4xl hover:bg-transparent;
	}

	.react-calendar .react-calendar__navigation span {
		@apply !text-textColor !text-lg !font-[600];
	}

	.react-calendar .react-calendar__viewContainer .react-calendar__month-view__weekdays {
		@apply !h-[70px] !flex !items-center !justify-center !bg-[#F1F8F7] !text-primary !font-[600];
	}

	.react-calendar .react-calendar__viewContainer .react-calendar__month-view__weekdays .react-calendar__month-view__weekdays__weekday {
		@apply !h-full flex items-center justify-center !border-e !border-e-border !border-b !border-b-border !no-underline;
	}

	.react-calendar .react-calendar__viewContainer .react-calendar__month-view__weekdays .react-calendar__month-view__weekdays__weekday abbr {
		@apply !no-underline !text-[15px] !font-[600];
	}

	.react-calendar .react-calendar__viewContainer .react-calendar__month-view__days button {
		@apply !h-[60px] !text-lg !border !border-border;
	}

	.react-calendar .react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--now {
		@apply !bg-transparent hover:bg-[#e6e6e6] !text-inherit !important;
	}

	.react-calendar .react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--active {
		@apply !bg-primary !text-white hover:bg-primary/90 !important;
	}
}

.swiper {
	width: 100%;
	height: 100%;
	position: static !important;
}

.teacher .swiper {
	overflow: unset !important;
}

.swiper-button-prev,
.swiper-button-next {
	width: 40px !important;
	height: 40px !important;
	background-color: var(--primary-color);
	border-radius: 50%;
	top: auto !important;
	margin-top: 15px !important;
	overflow: hidden !important;
}

@media (max-width: 992px) {

	.swiper-button-prev,
	.swiper-button-next {
		margin-top: 0px !important;
	}
}

.swiper-button-prev:after,
.swiper-button-next:after {
	font-size: 15px !important;
	font-weight: bold;
	color: var(--yellow-color);
}

.teacher .swiper-button-prev,
.teacher .swiper-button-next {
	bottom: 20px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swiper-button-prev {
	right: calc(50% - 50px) !important;
}

.swiper-button-next {
	left: calc(50% - 50px) !important;
}

html[dir="ltr"] .swiper-button-next {
	left: unset !important;
	right: calc(50% - 50px) !important;
}

html[dir="ltr"] .swiper-button-prev {
	right: unset !important;
	left: calc(50% - 50px) !important;
}

.teacher .swiper-button-next {
	right: -40px !important;
	left: auto !important;
}

.teacher .swiper-button-prev {
	left: -40px !important;
	right: auto !important;
}

@media screen and (max-width: 576px) {
	.teacher .swiper-button-next {
		right: -20px !important;
	}

	.teacher .swiper-button-prev {
		left: -20px !important;
	}
}

.ant-radio-wrapper span.ant-radio+* {
	width: 100% !important;
}

.sidebar-scroll::-webkit-scrollbar {
	width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
	background: #0b2d35;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
	background-color: #0b2d35;
	border-radius: 10px;
}

.parent:hover .to_white img::after {
	filter: invert(11%) sepia(23%) saturate(3064%) hue-rotate(155deg) brightness(96%) contrast(92%) !important;
}

@keyframes moveX {
	0% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(8px);
		/* Adjust value as needed */
	}

	100% {
		transform: translateX(0);
	}
}

.logo-move {
	animation: moveX 2s ease-in-out infinite;
	/* Adjust duration and easing */
}

/* For WebKit (Chrome, Safari, Edge) */
.custom-scrollbar::-webkit-scrollbar {
	width: 1px; /* Vertical scrollbar width */
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
	background-color: #11897d; 
	border-radius: 1px;
  }
  
  /* For Firefox */
  .custom-scrollbar {
	scrollbar-width: thin; /* "auto" or "thin" */
	scrollbar-color: #11897d transparent; 
  }