web/app/globals.css

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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: #ffffff;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: #00b2ca;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: #f6f5fa;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: #dc3545;
    --destructive-foreground: 0 0% 98%;
    --border: #d3d3d3;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: #00b2ca;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --font-color: #ffffff;
    --light-font-color: #595b6c;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-[background] text-foreground;
  }
}

@layer utilities {


  .landingSecHeader {
    @apply text-center text-4xl lg:text-5xl font-light;
  }

  .outlinedSecHead {
    @apply p-3 px-4 border border-primary text-primary rounded-md font-semibold text-center;
  }

  .storeIcons {
    @apply max-w-max w-full sm:w-[170px] md:w-[215px] lg:w-[235px] h-auto;
  }

  .footerSocialLinks {
    @apply flex items-center justify-center w-[40px] h-[40px] rounded-md p-2 transition-all duration-500 bg-white/15;
  }

  .footerContactIcons {
    @apply flex items-center justify-center min-w-[48px] w-[48px] h-[48px] rounded-md p-[10px] transition-all duration-500 bg-white/15;
  }


  .footerSocialLinks:hover,
  .footerContactIcons:hover {
    background-color: var(--primary-color);
    box-shadow: 0px 8px 28px 0px var(--primary-color);
  }

  .footerLabel {
    @apply text-white opacity-65 text-sm transition-colors;
  }

  .footerLabel:hover {
    color: var(--primary-color);
  }

  .space-between {
    @apply flex items-center justify-between;
  }

  .labelInputCont {
    @apply flex flex-col gap-2;
  }

  .requiredInputLabel {
    @apply after:content-['*'] after:text-destructive;
  }

  .loader-container-otp {
    @apply flex items-center justify-center h-7 py-1 px-2;
  }

  .loader-otp {
    @apply border-4 border-t-[var(--primary-color)] border-[#f3f3f3] rounded-full w-5 h-5 animate-spin;
  }

  .profileActiveTab {
    @apply py-2 px-4 bg-primary rounded-full text-white w-max
  }

  .sectionTitle {
    @apply text-xl sm:text-2xl font-medium capitalize
  }

  .loader {
    @apply w-full h-full relative flex items-center justify-center m-auto
  }

  .text_ellipsis {
    @apply overflow-hidden text-ellipsis whitespace-nowrap
  }

  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge, and Firefox */
  .scrollbar-none {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
}

/* .place_search div {
  width: 100%;
} */

.formWrapper .react-tel-input .special-label {
  display: none !important;
}

.react-tel-input .form-control {
  width: 100% !important;
  height: 40px !important;
  border: 1px solid lightgray !important;
  outline: none !important;
  border-radius: 4px !important;
}

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

/* Update focus styles to match shadcn Input */
.react-tel-input .form-control:focus,
.react-tel-input .form-control:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary) !important;
  border-color: transparent !important;
}


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


::-webkit-scrollbar {
  width: 5px !important;
  width: 5px !important;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px !important;
  background-color: lightgray;
  border-radius: 10px !important;
  background-color: lightgray;
}

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


/* RTL overrides for react-phone-input-2*/
[dir='rtl'] .react-tel-input .form-control {
  padding-left: inherit;
  padding-right: 48px;
}

[dir='rtl'] .react-tel-input .selected-flag {
  padding: 0 8px 0 0;
}

[dir='rtl'] .react-tel-input .selected-flag .arrow {
  left: auto;
  right: 20px;
}

[dir=rtl] input[type=tel i] {
  direction: rtl;
}

.perspective-1000 {
  perspective: 1000px;
}

.transform-style-preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}