@import "tailwindcss";
@import "./colors.css";
@config "../../tailwind.config";




:root {
  --background: #ffffff;
  --foreground: #171717;
  /* --border: oklch(0.922 0 0); */
  --ring: oklch(0.708 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* --color-border: var(--border); */
  --color-ring: var(--ring);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    /* --border: var(--neutral-200); */
    --ring: oklch(0.439 0 0);
  }
}


:root {
  --body-bg: #FFFF;
  /* =======================
     Neutral Colors
  ========================== */
  --neutral-50: #FFFFFF;
  --neutral-100: #F7F7F7;
  --neutral-200: #EDEDED;
  --neutral-300: #D9D9D9;
  --neutral-400: #BFBFBF;
  --neutral-500: #9E9E9E;
  --neutral-600: #7A7A7A;
  --neutral-700: #555555;
  --neutral-800: #333333;
  --neutral-900: #000000;
  --neutral-950: #000000 !important;
  --border: var(--neutral-200);
}

* {
  scroll-behavior: smooth;
  font-family: var(--font-candal);
  border-color: var(--border) !important;
}

.dark * {
  border-color: var(--neutral-700) !important;
}

.theme-transition-off,
.theme-transition-off * {
  transition: none !important;
}


html {
  scroll-behavior: smooth;
}

/* this one is added to prevent scollbar hide on shadcn select is active */
html body[data-scroll-locked] {
  overflow: visible !important;
  margin-right: 0 !important;
}

body {
  background: var(--body-bg);
  color: var(--neutral-900);
}

.dark body {
  color: var(--neutral-100);
  background: #000000;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
}


@utility bodyBg {
  background: var(--body);
}

@utility container {
  @apply max-575:max-w-full! between-576-767:max-w-[540px] between-768-991:max-w-[720px] between-992-1199:max-w-[944px] between-1200-1399:max-w-[1140px] between-1400-1620:max-w-[1320px] min-1620:max-w-[1320px];
}

@media screen and (min-width: 1620px) and (max-width: 1779px) {
  .container {
    padding-inline: 50px;
  }
}


@utility commonBg {
  @apply surfaceContainerLowBg
}

@utility primaryBtn {
  @apply primaryBg text-white transition-all duration-300;
}

@utility secondaryBtn {
  @apply bg-[#000000] text-white;
}

@utility btn_outline {
  @apply border bg-transparent;
}

@utility btn_xs {
  @apply py-2 px-4 rounded-[30px] text-sm font-bold font-nunito;
}

@utility btn_sm {
  @apply py-2 px-4 rounded-[12px] text-sm;
}

@utility btn_md {
  @apply py-3 px-6 rounded-2xl font-bold;
}

@utility btn_lg {
  @apply py-3 px-6 rounded-2xl text-lg font-extrabold;
}

@utility flexCenter {
  @apply flex items-center justify-center;
}

@utility flexColCenter {
  @apply flex items-center justify-center flex-col;
}

@utility flexCol {
  @apply flex flex-col;
}

@utility commonTextGap {
  @apply flex flex-col sm:gap-6 gap-4;
}

@utility commonMT {
  @apply mt-6 md:mt-12 lg:mt-20;
}

@utility commonTextContentGap {
  @apply flex flex-col gap-6 md:gap-8 lg:gap-16;
}

@utility commonPT {
  @apply pt-6 md:pt-12 lg:pt-20;
}

@utility commonPY {
  @apply py-6 md:py-12 lg:py-20;
}

@utility headerMT {
  @apply mt-[66px] sm:mt-[92px] md:mt-[132px] between-1200-1399:mt-[140px] xl:mt-[140px];
}

@utility headerPT {
  @apply pt-24 sm:pt-28;
}

@utility lgFlexCol {
  @apply flex flex-col lg:flex-row;
}

@utility commonGap {
  @apply gap-[30px];
}

@utility commonBorderB {
  @apply border-b-4! border-(--neutral-200);
}

@utility primaryBorder {
  @apply border-(--primary-500)!;
}

/* .border {
  border-color: var(--neutral-200) !important;
} */

button {
  cursor: pointer;
}

@keyframes shimmer {
  0% {
    left: -120%;
  }

  100% {
    left: 140%;
  }
}

@utility animate-shimmer {
  animation: shimmer 1.5s ease-in-out infinite alternate;
}

.otto {
  background: transparent;
  color: white;
  text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, .1),
    0 0 5px rgba(0, 0, 0, .1),
    0 1px 3px rgba(0, 0, 0, .3),
    0 3px 5px rgba(0, 0, 0, .2),
    0 5px 10px rgba(0, 0, 0, .25),
    0 10px 10px rgba(0, 0, 0, .2),
    0 20px 20px rgba(0, 0, 0, .15);
}

/* custom scrollbar  */
/* width */
.customScrollbar::-webkit-scrollbar {
  width: 4px;
  height: 6px;
  display: none;
  transition: all 0.3s;
  cursor: pointer;
}

.customScrollbar:hover::-webkit-scrollbar {
  display: block;
}

/* Track */
.customScrollbar::-webkit-scrollbar-track {
  border-radius: 12px;
}

/* Handle */
.customScrollbar::-webkit-scrollbar-thumb {
  background: var(--primary-500);
  border-radius: 10px;
}

.fill-primary {
  fill: var(--primary-500) !important;
}


/* ─── Uiverse.io by alexruix — rolling shadow loader ─────────────────── */
.shadow-rolling-loader {
  --ballcolor: #EF5388;
  --shadow: 0px 0 rgba(0, 0, 0, 0);
  width: 10px;
  height: 10px;
  left: -120px;
  border-radius: 50%;
  position: relative;
  color: var(--ballcolor);
  animation: shadowRolling 2s linear infinite;
}

@keyframes shadowRolling {
  0% {
    box-shadow: var(--shadow), var(--shadow), var(--shadow), var(--shadow);
  }

  12% {
    box-shadow: 100px 0 var(--ballcolor), var(--shadow), var(--shadow), var(--shadow);
  }

  25% {
    box-shadow: 110px 0 var(--ballcolor), 100px 0 var(--ballcolor), var(--shadow), var(--shadow);
  }

  36% {
    box-shadow: 120px 0 var(--ballcolor), 110px 0 var(--ballcolor), 100px 0 var(--ballcolor), var(--shadow);
  }

  50% {
    box-shadow: 130px 0 var(--ballcolor), 120px 0 var(--ballcolor), 110px 0 var(--ballcolor), 100px 0 var(--ballcolor);
  }

  62% {
    box-shadow: 200px 0 rgba(0, 0, 0, 0), 130px 0 var(--ballcolor), 120px 0 var(--ballcolor), 110px 0 var(--ballcolor);
  }

  75% {
    box-shadow: 200px 0 rgba(0, 0, 0, 0), 200px 0 rgba(0, 0, 0, 0), 130px 0 var(--ballcolor), 120px 0 var(--ballcolor);
  }

  87% {
    box-shadow: 200px 0 rgba(0, 0, 0, 0), 200px 0 rgba(0, 0, 0, 0), 200px 0 rgba(0, 0, 0, 0), 130px 0 var(--ballcolor);
  }

  100% {
    box-shadow: 200px 0 rgba(0, 0, 0, 0), 200px 0 rgba(0, 0, 0, 0), 200px 0 rgba(0, 0, 0, 0), 200px 0 rgba(0, 0, 0, 0);
  }
}


/* ─── react-phone-input-2 ─────────────────────────────────────────────── */
.react-tel-input {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  transition: border-color 0.2s;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.react-tel-input:focus-within {
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 1px var(--primary-500);
}

.react-tel-input .form-control {
  height: 46px !important;
  border: none !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  background: var(--neutral-100) !important;
  color: var(--neutral-900) !important;
  transition: none !important;
}

.react-tel-input .flag-dropdown {
  border: none !important;
  border-right: 1px solid #d1d5db !important;
  border-radius: 0.5rem 0 0 0.5rem !important;
  background: transparent !important;
}

.dark .react-tel-input .form-control {
  background: #000000 !important;
  color: var(--neutral-100) !important;
}

.dark .react-tel-input .selected-flag {
  background: transparent !important;
}

.react-tel-input .selected-flag {
  border-radius: 0.5rem 0 0 0.5rem !important;
}

.react-tel-input .selected-flag:hover {
  background-color: transparent !important;
}

.react-tel-input .selected-flag:hover,
.react-tel-input .selected-flag:focus,
.react-tel-input .selected-flag.open {
  background-color: transparent !important;
}

.react-tel-input.phone-input-error {
  border-color: var(--error-color) !important;
}

.react-tel-input.phone-input-error .form-control {
  border-radius: 0.5rem !important;
}

.react-tel-input.phone-input-error .flag-dropdown {
  border-right-color: var(--error-color) !important;
}

.react-tel-input.phoneCustomInput {
  overflow: visible !important;
}

.requireInput::after {
  color: var(--error-color);
  content: "*";
  margin-left: 4px;
}

[dir="rtl"] .requireInput::after {
  margin-left: 0;
  margin-right: 4px;
}

[dir="rtl"] .react-tel-input .form-control {
  text-align: end !important;
  padding-left: 0px !important;
  padding-right: 48px !important;
}

[dir="rtl"] .react-tel-input .selected-flag {
  padding: 0px !important;
  padding-right: 20px !important;
}

[dir="rtl"] .react-tel-input .selected-flag .arrow {
  left: 12px !important;
}

[dir="rtl"] .react-tel-input .flag-dropdown {
  border-radius: 6px !important;
}

.react-tel-input .country-list {
  z-index: 999999 !important;
  background-color: #FFFFFF !important;
}

.dark .react-tel-input .country-list {
  background-color: #000000 !important;
  color: var(--neutral-100) !important;
}

.dark .react-tel-input .country-list .search {
  background-color: #000000 !important;
}

.dark .react-tel-input .country-list .country:hover,
.dark .react-tel-input .country-list .country.highlight {
  background-color: var(--neutral-800) !important;
}

.react-tel-input .selected-flag .arrow {
  border-top: 4px solid #555 !important;
  border-left: 3px solid #0000 !important;
  border-right: 3px solid #0000 !important;
}

/* ─── react-phone-input-2 end ─────────────────────────────────────────────── */

/*
Source - https://stackoverflow.com/a/22306944
Posted by JayD, modified by community. See post 'Timeline' for change history
Retrieved 2026-07-11, License - CC BY-SA 4.0
*/

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}