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



@layer base {
  :root {
    /* Core brand colors - matching Cab app */
    --background: 0 0% 100%;
    --foreground: 0 0% 4%;

    /* Cards with subtle warmth */
    --card: 0 0% 100%;
    --card-foreground: 0 0% 4%;

    /* Popover */
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 4%;

    /* Primary: Deep black */
    --primary: 0 0% 4%;
    --primary-foreground: 0 0% 100%;

    /* Secondary: Soft gray */
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 4%;

    /* Muted: Light gray */
    --muted: 0 0% 94%;
    --muted-foreground: 0 0% 40%;

    /* Accent: Premium yellow */
    --accent: 42 100% 55%;
    --accent-foreground: 0 0% 4%;

    /* Destructive */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    /* Borders & inputs */
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 42 100% 55%;

    --radius: 0.75rem;
    --chart-1: 0 0% 4%;
    --chart-2: 0 0% 30%;
    --chart-3: 0 0% 50%;
    --chart-4: 42 100% 55%;
    --chart-5: 0 0% 70%;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 0 0% 4%;
    --sidebar-primary: 0 0% 4%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 96%;
    --sidebar-accent-foreground: 0 0% 4%;
    --sidebar-border: 0 0% 90%;
    --sidebar-ring: 42 100% 55%;
    --hover: 0 0% 20%;

    /* Brand Palette */
    --brand-50: 0 0% 98%;
    --brand-100: 0 0% 95%;
    --brand-200: 0 0% 88%;
    --brand-300: 0 0% 70%;
    --brand-400: 0 0% 25%;
    --brand-500: 0 0% 4%;
  }

  .dark {
    --background: 0 0% 4%;
    --foreground: 0 0% 98%;

    --card: 0 0% 8%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 4%;

    --secondary: 0 0% 14%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 14%;
    --muted-foreground: 0 0% 60%;

    --accent: 42 100% 55%;
    --accent-foreground: 0 0% 4%;

    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 18%;
    --input: 0 0% 18%;
    --ring: 42 100% 55%;

    --chart-1: 0 0% 98%;
    --chart-2: 0 0% 70%;
    --chart-3: 0 0% 50%;
    --chart-4: 42 100% 55%;
    --chart-5: 0 0% 30%;
    --sidebar-background: 0 0% 6%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 42 100% 55%;
    --sidebar-primary-foreground: 0 0% 4%;
    --sidebar-accent: 0 0% 14%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 18%;
    --sidebar-ring: 42 100% 55%;

    /* Brand Palette */
    --brand-50: 0 0% 12%;
    --brand-100: 0 0% 18%;
    --brand-200: 0 0% 30%;
    --brand-300: 0 0% 60%;
    --brand-400: 0 0% 85%;
    --brand-500: 0 0% 98%;
  }
}

@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;
}