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

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
  font-family: "SomarSans";
  src: url("/fonts/SomarSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
} */

/* @font-face {
  font-family: "Tajawal";
  src: url("/fonts/Tajawal-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}  */

@font-face {
  font-family: "Tajawal";
  src: url("/fonts/Tajawal-Regular.ttf") format("truetype");
  font-weight: 400;
  /* Regular weight */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("/fonts/Tajawal-Medium.ttf") format("truetype");
  font-weight: 500;
  /* Medium weight */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saira";
  src: url("/fonts/Tajawal-Bold.ttf") format("truetype");
  font-weight: 700;
  /* Bold weight */
  font-style: normal;
  font-display: swap;
}
/* Define the Saira ExtraBold font */
@font-face {
  font-family: "Tajawal";
  src: url("/fonts/Tajawal-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  /* ExtraBold weight */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("/fonts/Tajawal-Black.ttf") format("truetype");
  font-weight: 900;
  /* Black weight */
  font-style: normal;
  font-display: swap;
}

[lang="en"] {
  font-family: "Roboto", sans-serif;
}

[lang="ar"] {
  font-family: "Tajawal", sans-serif;
}

/*---- BUTTONS------*/
.btn-prim {
  @apply text-white font-bold border border-white text-lg rounded-2xl px-8 py-3;
}
.btn-prim-lg {
  @apply text-white font-bold border border-white text-lg rounded-2xl px-32 py-3;
}
.btn-sec {
  @apply px-8 py-3 bg-white rounded-2xl text-primary text-lg font-bold;
}
.btn-third {
  @apply px-5  py-3 bg-white rounded-2xl text-primary border border-primary text-lg font-bold;
  /* &.disabled {
    @apply bg-red text-white cursor-not-allowed;
  } */
}
.btn-third-lg {
  @apply xl:px-24 lg:px-10 px-8 py-3 bg-white rounded-2xl text-primary border border-primary text-lg font-bold;
}

.btn-back-lg {
  @apply px-24  py-3 bg-white rounded-2xl text-primary border border-primary text-lg font-bold;
}
.btn-quadro {
  @apply text-white font-bold border border-white bg-sec rounded-2xl px-8  py-3 text-lg;
}

.btn-quadro-lg {
  @apply text-white font-bold border text-lg border-white bg-sec rounded-2xl px-28 py-3;
}
.btn-five-lg {
  @apply text-white font-bold border text-lg border-white bg-sec rounded-2xl 2xl:px-32 xl:px-20 px-8  py-3;
}

.btn-Active {
  @apply px-6 py-1 bg-white rounded-2xl text-green border border-green text-lg font-bold disabled:text-red disabled:border-red;
}
.btn-delete {
  @apply lg:px-6 px-28 py-3 bg-white rounded-2xl text-red border border-red text-lg font-bold;
}
/* ----------*/
/*----tabs---*/
.tab-login {
  @apply md:px-28 px-10 py-3 text-black bg-white rounded-3xl font-bold md:text-lg text-sm;
}
.tab-login.active {
  @apply text-primary bg-primary/15;
}

.btn-tab {
  @apply cent px-8 py-3 rounded-2xl font-bold border border-grayOpacity bg-primary text-white;
  @apply disabled:bg-white disabled:text-gray disabled:cursor-not-allowed;
}

/*-------*/
/*-----flex&Center-----*/
.cent {
  @apply flex items-center justify-center;
}

/*---- widht-and-height----*/
@media (min-width: 1024px) {
  .container-large {
    @apply px-20;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .container-tablet {
    @apply px-10;
  }
}

@media (max-width: 640px) {
  .container-small {
    @apply px-4;
  }
}

/*---- input-----*/
.input-footer {
  @apply h-[52px] border border-grayOpacity rounded-2xl w-full p-2  pl-4 focus:border-primary focus:border-2 focus:outline-none;
}

.input-footer::placeholder {
  font-size: 14px;
  color: #999;
  opacity: 1;
}
.input-footer::-webkit-outer-spin-button,
.input-footer::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*-----*/
.input-code {
  @apply w-14 h-14 text-center text-xl border border-grayOpacity rounded-2xl focus:border-primary focus:border-2 focus:outline-none;
}
.input-code::-webkit-outer-spin-button,
.input-code::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

[dir="rtl"] .flip {
  transform: rotateY(180deg);
}

.space-nav {
  @apply lg:pb-20 lg:pt-32 pb-8 pt-28;
}

/*-----------This-Style-ScrollBar---------*/

/*--------------------*/
.category-lists-slider {
  position: relative;
  height: auto;
}
.tab-swiper .swiper-slide {
  width: auto;
  height: auto;
}
.slider-button {
  position: absolute;
  top: 0px;
  z-index: 1;
  cursor: pointer;
}
.slider-button.swiper-button-disabled {
  opacity: 0;
  visibility: hidden;
}
/*-----------This-steps-dashboard---------*/
.steps-swiper {
  height: 120px;
  overflow: visible !important;
}
.steps-swiper .swiper-slide {
  width: auto;
  height: auto;
}

/*--------------------*/

.no-scrollbar::-webkit-scrollbar {
  @apply hidden;
}
/*--- de fe 1280 we 1204 ban3ml hide le 7agat mo3ina----*/

@media (min-width: 1024px) and (max-width: 1280px) {
  .hidden-logomain {
    @apply hidden;
  }
  .hidden-logo {
    @apply block;
  }
}
@media (min-width: 1024px) and (max-width: 1400px) {
  .navbar-showtexts {
    @apply hidden;
  }
}

@media (min-width: 1024px) and (max-width: 1400px) {
  .text-show {
    @apply block;
  }
}

/*--------*/

/*---width&height color in freecodegenerate--*/

.first-box {
  @apply h-[60px] w-[68px];
}

.sec-box {
  @apply w-9 h-9;
}
/*---------*/

/* no Scrollnar Inside Div */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* no Scrollnar Inside Div */

/* Custom Scrollnar in x Inside Div */
.scrollbar-inside::-webkit-scrollbar {
  width: 4px;
  height: 100px;
}
.scrollbar-inside::-webkit-scrollbar-thumb {
  background-color: rgb(163, 163, 163);
  border-radius: 24px;
  border: 3px solid rgb(163, 163, 163);
}
.scrollbar-inside::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* Custom Scrollnar in x Inside Div */

/* Custom Scrollnar in y Inside Div */
.scrollbar-insidey::-webkit-scrollbar {
  width: 100px;
  height: 6px;
}
.scrollbar-insidey::-webkit-scrollbar-thumb {
  background-color: rgb(229, 229, 229);
  border-radius: 24px;
  border: 3px solid rgb(229 229 229);
}
.scrollbar-insidey::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Custom Scrollnar in y Inside Div */

/* styles/Checkbox.css */
.checkbox-wrapper-4 * {
  box-sizing: border-box;
}
.checkbox-wrapper-4 .cbx {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;

  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
  display: inline-block;
}

.checkbox-wrapper-4 .cbx span {
  float: left;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}

.checkbox-wrapper-4 .cbx span:first-child {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  transform: scale(1);
  border: 1px solid #cccfdb;
  transition: all 0.2s ease;
  box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
}

.checkbox-wrapper-4 .cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 3px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}

.checkbox-wrapper-4 .inp-cbx {
  position: absolute;
  visibility: hidden;
}

.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child {
  background: #5c32d5;
  border-color: #5c32d5;
  animation: wave-4 0.4s ease;
}

.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}

.checkbox-wrapper-4 .inline-svg {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}

@media screen and (max-width: 640px) {
  .checkbox-wrapper-4 .cbx {
    width: 100%;
    display: inline-block;
  }
}

@keyframes wave-4 {
  50% {
    transform: scale(0.9);
  }
}

/* styles/Checkbox.css */

/* styles/Switch.css */
.checkbox-wrapper-22 .switch {
  display: inline-block;
  height: 25px;
  position: relative;
  width: 48px;
}

.checkbox-wrapper-22 .switch input {
  display: none;
}

.checkbox-wrapper-22 .slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.checkbox-wrapper-22 .slider:before {
  background-color: #fff;
  bottom: 2px;
  content: "";
  height: 20px;
  left: 3px;
  position: absolute;
  transition: 0.4s;
  width: 20px;
}

.checkbox-wrapper-22 input:checked + .slider {
  background-color: #00ae92;
}

.checkbox-wrapper-22 input:checked + .slider:before {
  transform: translateX(20px);
}

.checkbox-wrapper-22 .slider.round {
  border-radius: 34px;
}

.checkbox-wrapper-22 .slider.round:before {
  border-radius: 50%;
}

.select {
  @apply p-3   rounded-xl  w-full cursor-pointer border border-grayOpacity text-black appearance-none focus:border-primary focus:border-2 focus:outline-none;
}

input[type="radio"] {
  accent-color: #5c32d5;
  cursor: pointer;
  width: 15px;
  height: 15px;
}

.table-no-padding {
  padding: 0 !important;
}

.filter-image {
  filter: hue-rotate(90deg);
}