@tailwind base;
@tailwind components;
@tailwind utilities;
/* @use "typography" as *; */



@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 20 51% 4%;
    --muted: 20 25% 86%;
    --muted-foreground: 20 7% 25%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 51% 3%;
    --card: 0 0% 100%;
    --card-foreground: 20 51% 3%;
    --border: 20 15% 94%;
    --input: 217 54% 92%;
    --primary: var(--brand-500);
    /* Updated to hsl(var(--primary)) */
    --primary-foreground: 0 0% 100%;
    /* Adjusted for contrast */
    --secondary: 46 50% 94%;
    /* Adjusted for related secondary tone */
    --secondary-foreground: 46 50% 30%;
    /* Adjusted */
    --accent: 261 98% 25%;
    /* Updated */
    --accent-foreground: 0 0% 100%;
    /* Adjusted */
    --destructive: 11 80% 22%;
    --destructive-foreground: 11 80% 82%;
    --ring: 261 98% 25%;
    /* Updated */
    --radius: 0.5rem;
    --chart-1: 261 98% 25%;
    /* Updated */
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --sidebar-background: 0, 0%, 100%, 1;
    --sidebar-foreground: 236, 24%, 26%, 1;
    --sidebar-primary: 261 98% 25%;
    /* Updated */
    --sidebar-primary-foreground: 0 0% 100%;
    /* Adjusted for contrast */
    --sidebar-accent: 261 98% 25%;
    /* Updated */
    --sidebar-accent-foreground: 0 0% 100%;
    /* Adjusted for contrast */
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 261 98% 25%;
    /* Updated */
    --hover: 261, 90%, 45%, 1;
    /* Adjusted for hover */

    /* Brand Palette */
    --brand-50: 261 95% 96%;
    --brand-100: 261 95% 90%;
    --brand-200: 261 95% 80%;
    --brand-300: 261 90% 65%;
    --brand-400: 261 90% 45%;
    --brand-500: 261 98% 25%;
  }

  .dark {
    --background: 253 43% 3%;
    --foreground: 253 31% 98%;
    --muted: 253 7% 13%;
    --muted-foreground: 253 13% 63%;
    --popover: 253 43% 3%;
    --popover-foreground: 253 31% 98%;
    --card: 253 43% 4%;
    --card-foreground: 253 31% 99%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --primary: var(--brand-500);
    /* Updated */
    --primary-foreground: 0 0% 100%;
    /* Adjusted for dark mode */
    --secondary: 46 20% 30%;
    /* Adjusted for dark mode */
    --secondary-foreground: 46 50% 80%;
    /* Adjusted for contrast */
    --accent: 261 98% 25%;
    /* Updated */
    --accent-foreground: 0 0% 100%;
    /* Adjusted for dark mode */
    --destructive: 339.2 90.36% 51.18%;
    --destructive-foreground: 0 0% 100%;
    --ring: 261 98% 25%;
    /* Updated */
    --chart-1: 261 98% 25%;
    /* Updated */
    --chart-2: 46 20% 70%;
    /* Adjusted for dark mode */
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 261 98% 25%;
    /* Updated */
    --sidebar-primary-foreground: 0 0% 100%;
    /* Adjusted for dark mode */
    --sidebar-accent: 261 98% 25%;
    /* Updated */
    --sidebar-accent-foreground: 0 0% 100%;
    /* Adjusted for contrast */
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 261 98% 25%;
    /* Updated */

    /* Brand Palette */
    --brand-50: 261 95% 96%;
    --brand-100: 261 95% 90%;
    --brand-200: 261 95% 80%;
    --brand-300: 261 90% 65%;
    --brand-400: 261 90% 45%;
    --brand-500: 261 98% 25%;
  }
}

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

  body {
    @apply box-border bg-background text-foreground;
  }

  /* Custom Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--primary) / 0.3);
    border-radius: 10px;
    transition: background 0.3s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary));
  }

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--primary) / 0.3) transparent;
  }
}

@layer utilities {
  .min-h-screen {
    min-height: 100vh;
    /* Fallback */
    min-height: 100dvh;
  }

  .h-screen {
    height: 100vh;
    /* Fallback */
    height: 100dvh;
  }
}

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

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

@import 'react-quill/dist/quill.snow.css';


/* ...............typography................ */
.header {
  background-color: #FFFEFA;
}

.bg-card {
  border-color: hsla(217, 54%, 92%, 1);
}

.fs-10 {
  font-size: 10px;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-40 {
  font-size: 40px !important;
}

.h-60 {
  height: 60px;
}

.gray {
  color: #BBBBBB;
}

.yellow {
  color: hsl(var(--primary));
}

.yellow-border {
  border-color: #FFB836;
}

.text-warning {
  color: #FFB836;
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.common-bg {
  background-color: hsl(var(--primary));
}

.border-primary {
  border-color: hsl(var(--primary));
}

.border-common {
  border-color: #E1E9F6;
}

.medium-black {
  color: #2A2A2A;
}

.bg-gray {
  background-color: #BBBBBB;
}

.bg-light {
  background-color: #eceaea;

}

.text-primary {
  color: hsl(var(--primary));
}

.text-gray {
  color: #808080;
}

.light-black {
  color: #333333;
}

.text-yellow {
  color: #e9c31d;
  ;
}

.border-yellow {
  border-color: #e9c31d;
}

.border-light {
  border-color: #F1F6FF;
}

.light-green {
  color: #56CDAD;
}

.light-green-border {
  border-color: #56CDAD;
}

.bg-yellow {
  background-color: hsl(var(--primary));
}

.text-danger {
  color: #FF4545;
}

.border-danger {
  border-color: #FF4545;
}

.error-border {
  border-color: #DC2626;
}

.error-text {
  color: #DC2626;
}

.bg-danger {
  background-color: #FF4545;
}

.heading {
  font-size: 24px;
  font-weight: 600;
  color: #1C1D22;
}

.fs-10 {
  font-size: 10px;
}


.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ....................sidebar-layout................... */




/* profile card */
.profile-card {
  background-color: #fff;
  padding: 7px;
  border-radius: 34px;
}

.profile-card-1 {
  background-color: #fff;
  border-radius: 34px;
}

.status-blue {
  border: 1px solid hsl(var(--primary));
  color: hsl(var(--primary));
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 400;
  font-size: 12px;
  display: inline-block;
}

.status-pill {
  border: 1px solid green;
  color: green;
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 500;
  display: inline-block;
}

.auth-page {
  background-image: url("../assets/images/background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

main {
  height: 100%;
}

.theme-color {
  color: hsl(var(--primary));
}

.text-black {
  color: #000 !important;
}

.theme-border {
  border-color: hsl(var(--primary));
}

.theme-background {
  background-color: hsl(var(--primary));
  color: #000 !important;
}

/* hover card */
.credit-hover:hover {
  background-color: hsl(var(--primary));
}

.credit-hover:hover .credit-amount {
  color: #fff !important;
}

.credit-hover:hover .credit-title {
  color: #fff;
}

.credit-hover:hover .credit-button {
  background-color: hsl(var(--primary));
}

.subscription:hover {
  .card {
    background-color: hsl(var(--primary));
  }

  .card-title {
    color: #fff;
  }

  .card-amount {
    color: #fff;
  }

  .card-button {
    background-color: hsl(var(--primary));
  }

}


/* phone input */
.react-tel-input .form-control {
  position: relative;
  font-size: 14px;
  margin-left: 0;
  background: #fff;
  border: 1px solid #E1E9F6;
  border-radius: 6px !important;
  line-height: 25px;
  height: 48px !important;
  width: 100% !important;
  outline: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.react-tel-input .flag-dropdown {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0;
  background-color: #fff !important;
  border: 1px solid #E1E9F6 !important;
  border-radius: 6px 0 0 6px !important;
}

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

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

thead tr {
  /* background: hsl(var(--primary)) !important; */

}

thead th {
  /* color: #fff !important; */
}

[aria-expanded]::after {
  display: none !important;
}


/* hide timer icon from input tag */
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 1;
}

input[type="time"]::-moz-calendar-picker-indicator {
  opacity: 0;
}

.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.progress-ring {
  width: 80px;
  height: 80px;
  position: relative;
}

.progress-svg {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.progress-circle {
  stroke: #4285F4;
  stroke-dasharray: 282.6, 282.6;
  stroke-dashoffset: 282.6;
  animation: loading-indicator 1s linear infinite;
}

@keyframes loading-indicator {
  0% {
    stroke-dashoffset: 282.6;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.select-trigger>svg:last-child {
  display: none;
}


.active {
  background-color: hsl(var(--primary));
  color: #fff;
}

.textfield {
  .ql-editor {
    min-height: 200px !important;
  }
}

.h-12__input {
  outline: none !important;
  min-height: 48px !important;
  border: 0px !important
}

.description {
  div:first-of-type {
    overflow-x: hidden;
  }
}

/* NewCss */

.auth-image-bg {
  background-color: #FEE398 !important;
}

.btn-text-color {
  color: #fff !important;
}

.steps-divider {
  height: 70%;

  margin-top: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 2.5rem;
  /* Same as top-10 in Tailwind */
  left: auto;
  transform: translateX(-50%);
  border-left-width: 2px;
  border-color: #d1d5db;
  /* Same as border-gray-300 */
}

.steps-proceed-btn {
  background-color: hsl(var(--primary) / 0.15) !important;
  border-radius: 7.06px !important;
  color: hsl(var(--primary));
  box-shadow: none !important;
}

.map-styled-wrapper {
  height: 73vh;
  margin: 0px !important;

  @media all and (min-width:320px) and (max-width:991px) {
    height: 500px;
  }
}

.pac-container {
  z-index: 9999 !important;
}

.res-add {
  height: 48px !important;
  border: 0 !important;
}

.map-wrapper {
  height: 90%;
  width: 100%;

  iframe {
    height: 90%;
    width: 100%;
  }
}

.menu-avatar {
  height: 57px !important;
  width: 57px !important;
}

.add-category-btn {
  border-radius: 2000px !important;
}

.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: transparent;
  height: calc((100% - 30px) / 2) !important;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-button-next,
.swiper-button-prev {
  color: #ffffff !important;
}

.home-restros-swiper .swiper-button-prev,
.home-restros-swiper .swiper-button-next {
  color: black !important;
}

/* Swiper Pagination Styles */
.swiper-pagination {
  position: relative;
  margin-top: 10px !important;
}

.swiper-pagination-bullet {
  background-color: hsl(var(--primary)) !important;
}

.swiper-pagination-bullet-active {
  background-color: hsl(var(--primary)) !important;
}


/* Make pagination go below the slider */
.nearby-swiper .swiper-pagination {
  position: relative !important;
  bottom: 0 !important;
  margin-top: 10px !important;
  text-align: center !important;
}

/* Normal bullets */
.nearby-swiper .swiper-pagination-bullet {
  background-color: hsl(var(--primary)) !important;
  width: 10px;
  height: 10px;
  opacity: 0.5;
}

/* Active bullet */
.nearby-swiper .swiper-pagination-bullet-active {
  background-color: hsl(var(--primary)) !important;
  opacity: 1;
  width: 10px;
  height: 10px;
}

/* Global Pagination Styles */
.pagination-container {
  @apply flex justify-center mt-8;
}

.pagination-btn {
  @apply cursor-pointer hover:bg-primary hover:text-white transition-colors;
}

.pagination-link {
  @apply cursor-pointer hover:bg-primary hover:text-white transition-colors;
}

.pagination-link-active {
  @apply bg-primary text-white hover:bg-primary/90 hover:text-white transition-colors;
}