@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    /* font-family: 'DM Sans', sans-serif; */
    font-family: 'Outfit', sans-serif;
    @apply text-slate-700 bg-white overflow-x-hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    /* font-family: 'DM Sans', sans-serif; */
    font-family: 'Outfit', sans-serif;
    @apply text-primary font-bold leading-tight;
  }
}

/* @layer components {
  .highlight-span {
    @apply relative inline-block z-10;
  }

  .highlight-span::after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-[30%] bg-accent-light/80 -z-10;
  }

  .bg-primary .highlight-span::after,
  .dark .highlight-span::after {
    @apply bg-accent/40 h-[25%];
  }
} */

/* @layer utilities {
  .animate-spin-slow {
    animation: spin 8s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .text-shadow-xl {
    text-shadow: 0 10px 20px rgba(0,0,0,0.5);
  }
} */


.formError {
  /* position: relative !important; */
  overflow: visible !important; /* IMPORTANT */
  top: -21px !important;
  padding: 2px 5px;
  background: #5b80ea !important;
  border-radius: 10px;
  font-size: 12px !important;
  width: max-content;
}
.formError::after {
  content: "" !important;
  position: absolute !important;
  bottom: -14px !important;
  left: 20px !important;
  border-width: 8px !important;
  border-style: solid !important;
  border-color: #5b80ea transparent transparent transparent !important;
}
.formError .formErrorContent {
  font-size: 12px !important;
}
/* .modal-content {
  background: linear-gradient(135deg, #0d1020 0%, #151923 45%, #1e2340 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  padding: 0 !important;
} */
.modal-content {
  /* background: linear-gradient(135deg, #151a33 0%, #1c2140 45%, #2a2f5f 100%); */
  border-radius: 18px;
  /* border: 1px solid rgba(255, 255, 255, 0.08); */
  /* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); */
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* isolation: isolate; */
  /* background: rgba(255, 255, 255, 0.95); */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  border: 1px solid rgb(91, 128, 234, 0.8);
}

/* header spacing */
.modal-header {
  padding: 20px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* body spacing */
.modal-body {
  padding: 28px;
}

.modal-body {
  padding: 0 !important;
}
.modal-content .modal-header {
  border-bottom: none !important;
}
/* .modal-content .btn-close {
  background-color: #5b80ea;
  color: white;
} */
.modal-content #formID_popup {
  box-shadow: none !important;
}
.modal-content input,
.modal-content select,
.modal-content textarea {
  background-color: #0f1328;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

.modal-content input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.formErrorContent {
  color: white !important;
}
.custom-close {
  background-color: transparent;
  border-radius: 50%;
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-size: 12px;
}