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

:root {
  --font-family: "Manrope", sans-serif;
  --primary-color: #087c7c;
  --primary-background: #f5f5f4;
  --primary-category-background: #087c7c14;
  --primary-sell: #0186d8;
  --primary-rent: #db9305;
  --primary-sell-bg: #d6ebf9;
  --primary-rent-bg: #ffffff;
  --border-color: #e1e1e1;
  --primary-text-color01: #fff;
  --primary-text-color02: #282f39;
  --primary-text-color03: #000;
  --card-bg-color: #fff;
  --blue-color: #4267b2;
  --green-color: #25d366;
  --orange-color: #ff6b18;
  --brand-color: #181818;
  --lead-color: #595f65;
  --premium-color: #f9edd7;
  --new-border-color: #e7e7e7;
  --featured-animated-color: #969696;
  --facilities-icon-color: #595f65;
  --shadow-color: #adb3b83d;
  --red-color: #DB3D26;
}

/* @media (prefers-color-scheme: dark) {
  :root {}
} */

body {
  font-family: var(--font-family);
  /* background-color: var(--primary-background); */
  background-color: #ffffff;
  pointer-events: auto !important;
  /* overflow-x: hidden; */
}

body[data-scroll-locked].antialiased {
  margin-right: 0px !important;
}



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

  .primaryColor {
    color: var(--primary-color);
  }

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

  .primaryBgLight {
    background-color: color-mix(in srgb, var(--primary-color) 4%, white);
  }

  .primaryBgLight08 {
    background-color: color-mix(in srgb, var(--primary-color) 8%, white);
  }

  .primaryBgLight12 {
    background-color: color-mix(in srgb, var(--primary-color) 12%, white);
  }


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

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

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

  .primaryRentText {
    color: var(--primary-rent);
  }

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

  .primarySellText {
    color: var(--primary-sell);
  }

  .primarySellColorBg {
    background-color: var(--primary-sell);
  }

  .primarySellBgLight12 {
    background-color: color-mix(in srgb, var(--primary-sell) 12%, white);
  }

  .cardBorder {
    border: 1px solid var(--border-color);
  }

  .btnBorder {
    border: 1px solid var(--primary-text-color02);
  }

  .secondaryBorderColor {
    border-color: var(--primary-text-color02);
  }

  .newBorder {
    border: 1.5px solid var(--new-border-color);
  }

  .newBorderColor {
    border-color: var(--new-border-color);
  }

  .primaryCatBg {
    background-color: var(--primary-category-background);
  }

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

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

  .secondaryTextBg {
    background-color: var(--primary-text-color02);
  }

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

  .cardBg {
    background-color: var(--card-bg-color);
  }

  .blackBgColor {
    background-color: var(--primary-text-color03);
  }

  .blueBgLight {
    background-color: color-mix(in srgb, var(--blue-color) 8%, white);
  }

  .blueBorder {
    border-color: var(--blue-color);
  }

  .blueTextColor {
    color: var(--blue-color);
  }

  .greenBgLight {
    background-color: color-mix(in srgb, var(--green-color) 8%, white);
  }

  .greenBorder {
    border-color: var(--green-color);
  }

  .greenTextColor {
    color: var(--green-color);
  }

  .orangeBgLight {
    background-color: color-mix(in srgb, var(--orange-color) 6%, white);
  }

  .orangeBorder {
    border-color: var(--orange-color);
  }

  .orangeTextColor {
    color: var(--orange-color);
  }

  .videoBgContainer {
    background: rgba(0, 0, 0, 0.4) no-repeat padding-box;
  }

  .videoBgContainer .videoPlayBtn {
    text-decoration: none;
    transition: all 0.3s ease-in-out 0s;
    color: var(--primary-text-color01);
    border-radius: 100%;
    box-shadow: #fff 0px 0px 0px 0px;
    animation: 2s cubic-bezier(0.8, 0, 0, 1) 0s infinite normal none running pulse;
  }

  .authDialogFooter {
    @apply flex items-center justify-center border-t px-8 py-5 text-center sm:px-10 md:px-[100px] md:py-3 lg:px-[100px] lg:py-5;
  }

  .advanceFeatures input[type="checkbox"]:checked {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
  }

  .primaryCheckbox {
    @apply accent-[var(--primary-color)] checked:outline-2 checked:outline-black;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

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

  .brandColor {
    color: var(--brand-color);
  }

  .brandBg {
    background-color: var(--brand-color);
  }

  .brandBorder {
    border-color: var(--brand-color);
  }

  .brandBgLight {
    background-color: color-mix(in srgb, var(--brand-color) 8%, white);
  }

  .leadColor {
    color: var(--lead-color);
  }

  .leadBorder {
    border-color: var(--lead-color);
  }

  .leadBg {
    background-color: var(--lead-color);
  }

  .premiumBgColor {
    background-color: var(--premium-color);
  }

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

  .lightBgWhite {
    background-color: white;
    opacity: 0.24;
  }

  .my-clip-path {
    clip-path: path("M 10,48 L 94,48 A 10,10 0,0,0 80,48 L 111,10 A 10,10 0,0,1 120,0 L 387,0 A 10,10 0,0,1 508,10 L 508,668 A 10,10 0,0,1 0,200 L 10,200 A 10,10 0,0,1 0,668 L 0,60 A 10,10 0,0,1 10,48 Z"
      );
  }

  .my-clip-path-rtl {
    clip-path: path("M 10,46 L 81,48 A 10,10 0,0,0 93,39 L 94,10 A 10,10 0,0,1 100,0 L 387,0 A 10,10 0,0,1 508,10 L 508,668 A 10,10 0,0,1 0,200 L 10,200 A 10,10 0,0,1 0,668 L 0,60 A 10,10 0,0,1 10,48 Z"
      );
  }

  .my-clip-path-dual-badges {
    /* Clip path adjusted for both premium and featured badges in featured projects (215px total width) */
    clip-path: path("M 10,48 L 210,48 A 10,10 0,0,0 217,40 L 217,10 A 10,10 0,0,1 228,0 L 387,0 A 10,10 0,0,1 508,10 L 508,668 A 10,10 0,0,1 0,200 L 10,200 A 10,10 0,0,1 0,668 L 0,60 A 10,10 0,0,1 10,48 Z"
      );
  }

  .my-clip-path-dual-badges-rtl {
    /* Clip path adjusted for both premium and featured badges in featured projects (215px total width) */
    clip-path: path("M 10,48 L 160,48 A 10,10 0,0,0 171,37 L 171,10 A 10,10 0,0,1 180,0 L 387,0 A 10,10 0,0,1 508,10 L 508,668 A 10,10 0,0,1 0,200 L 10,200 A 10,10 0,0,1 0,668 L 0,60 A 10,10 0,0,1 10,48 Z"
      );
  }

  .ltr-number {
    direction: ltr;
    unicode-bidi: isolate;
  }

  .cardHoverShadow {
    box-shadow: 0px 7px 28px 2px var(--shadow-color);
  }

  .leadBorderColor {
    border-color: var(--lead-color);
  }

  .redBgLight12 {
    background-color: color-mix(in srgb, var(--red-color) 12%, white);
  }

  .redBgLight04 {
    background-color: color-mix(in srgb, var(--red-color) 4%, white);
  }

  .bgRed {
    background-color: var(--red-color);
  }

  .redColor {
    color: var(--red-color);
  }

  .borderRed {
    border: 1px solid var(--red-color);
  }

  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }


}

@layer base {
  :root {
    --background: 0 0% 100%;
    --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: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --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;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .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: 0 0% 98%;
    --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%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

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

  *::selection {
    @apply primaryBg text-white;
  }

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

.hover-underline-animation {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.hover-underline-animation::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: white;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* For Video Play Button Animation */
@keyframes pulse {
  100% {
    box-shadow: 0 0 0 45px rgba(193, 244, 246, 0);
  }
}

/* Phone Number Input CSS */
.custom-phone-input {
  /* margin-top: 10px; */
  border: 1px solid #e7e7e7;
  padding: 0 10px;
  width: 100%;
  height: 54px;
  background: var(--primary-background);
  border-radius: 8px;
}

.custom-phone-input.user-profile:disabled:hover,
.custom-phone-input.user-profile .PhoneInputCountry:disabled:hover,
.PhoneInputInput:disabled:hover {
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

.PhoneInputInput {
  border: none;
  height: 4vh;
  background-color: var(--primary-background);
}

:dir(rtl) .PhoneInputInput {
  direction: ltr;
  text-align: right;
}

.PhoneInput .PhoneInputCountry .PhoneInputCountryIcon {
  width: 24px !important;
  height: 16px !important;
}

.PhoneInputInput:focus-visible {
  outline: none !important;
}

.custom-phone-input.user-profile {
  width: 100%;
  height: 50px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.custom-phone-input.user-profile:focus-visible {
  border: 1px solid var(--new-border-color) !important;
}

/* SWAL CSS */

.Swal-confirm-buttons {
  background-color: var(--primary-color) !important;
}

.Swal-confirm-buttons:focus {
  box-shadow: var(--primary-color) !important;
}

.Swal-cancel-buttons {
  background-color: transparent !important;
  border: 1px solid gray !important;
  color: var(--primary-text-color02) !important;
}

.Swal-cancel-buttons:hover {
  background-image: none !important;
}

.custom-loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#recaptcha-container {
  position: absolute !important;
  z-index: 9999 !important;
}

/* Rich Text Content CSS */

/* In your global CSS file */
.rich-text-content {
  width: 100%;
}

/* Reset Tailwind's default styling for HTML elements within rich-text-content */
.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3,
.rich-text-content h4,
.rich-text-content h5,
.rich-text-content h6,
.rich-text-content p,
.rich-text-content ul,
.rich-text-content ol,
.rich-text-content li,
.rich-text-content blockquote,
.rich-text-content pre,
.rich-text-content table,
.rich-text-content tr,
.rich-text-content td,
.rich-text-content th {
  all: revert;
  /* This resets all properties to their natural values */
}

/* Ensure images don't exceed container width */
.rich-text-content img {
  max-width: 100%;
  height: auto;
}

/* Ensure proper spacing between elements */
.rich-text-content>*:not(:last-child) {
  margin-bottom: 1em;
}

/* Area Converter  */

.areaConverterInput::-webkit-outer-spin-button,
.areaConverterInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

/* Status Badge Classes */
.status-badge {
  @apply rounded-[100px] px-3 py-1 text-sm font-medium capitalize;
}

.status-badge-approved {
  @apply bg-[#EBFBF1] text-[#1AB759];
}

.status-badge-pending {
  @apply bg-[#EEF2FF] text-[#3B82F6];
}

.status-badge-rejected {
  @apply bg-[#FEF2F2] text-[#EF4444];
}

/* Status Icon Classes */
.status-icon {
  @apply h-4 w-4 cursor-help;
}

.status-icon-rejected {
  @apply text-[#EF4444];
}

/* Status Tooltip Classes */
.status-tooltip {
  @apply max-w-[200px] rounded-lg border bg-white p-2 shadow-lg;
}

.status-tooltip-text {
  @apply text-sm text-gray-700;
}

.custom-search-box div:first-child {
  width: 100% !important;
}

.gm-style .gm-style-iw {
  overflow: visible !important;
}

.gm-style .gm-style-iw-c {
  min-height: 300px !important;
  max-height: unset !important;
  /* top: -2px; */
  padding: 0 !important;
  border-radius: 16px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.gm-style-iw-d {
  overflow: unset !important;
}

.gm-style-iw-chr {
  display: none !important;
}

/* Fix for Google Places Autocomplete Dropdown not working on mobile */
.pac-item {
  pointer-events: auto !important;
  touch-action: auto !important;
}

/* Prevent map interactions when autocomplete is active */
.pac-container~.gm-style {
  pointer-events: none;
}

/* Re-enable map interactions when not interacting with autocomplete */
.gm-style {
  pointer-events: auto;
}

.gmaps-infowindow-content {
  font-family: "Manrope", sans-serif;
}

/* Hide Street View, its navigation and Full Screen Control */
.gm-svpc,
.gm-control-active {
  display: none !important;
}

/* Style for KM Range */

input[type="range"].location-slider {
  --thumb-size: 20px;
}

input[type="range"].location-slider::-webkit-slider-runnable-track {
  height: 18px;
  border-radius: 9999px;
  background: linear-gradient(to right,
      var(--primary-color) 0%,
      var(--primary-color) var(--range-progress),
      #e5e7eb var(--range-progress),
      #e5e7eb 100%);
}

/* RTL support for webkit slider */
[dir="rtl"] input[type="range"].location-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to left,
      var(--primary-color) 0%,
      var(--primary-color) var(--range-progress),
      #e5e7eb var(--range-progress),
      #e5e7eb 100%);
}

input[type="range"].location-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: white;
  border: 3px solid var(--primary-color);
  border-radius: 9999px;
  margin-top: -1px;
  cursor: pointer;
}

input[type="range"].location-slider::-moz-range-track {
  height: 18px;
  border-radius: 9999px;
  background: linear-gradient(to right,
      var(--primary-color) 0%,
      var(--primary-color) var(--range-progress),
      #e5e7eb var(--range-progress),
      #e5e7eb 100%);
}

/* RTL support for moz slider */
[dir="rtl"] input[type="range"].location-slider::-moz-range-track {
  background: linear-gradient(to left,
      var(--primary-color) 0%,
      var(--primary-color) var(--range-progress),
      #e5e7eb var(--range-progress),
      #e5e7eb 100%);
}

input[type="range"].location-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: white;
  border: 3px solid var(--primary-color);
  border-radius: 9999px;
  cursor: pointer;
}


/* NProgress CSS Start */

#nprogress .bar {
  height: 5px !important;
  /* Adjust the height as per your preference */
  background: var(--primary-color) !important;
}

#nprogress .peg {
  box-shadow: none;
}

/* Customize the color of the spinner */
#nprogress .spinner-icon {
  display: none;
}

/* NProgress CSS End */

/* Custom Scrollbar Styles for Sidebar */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

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

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

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

.scrollbar-thumb-gray-300::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
}

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



/* Overrides for react-phone-input-2 */
.react-tel-input .flag-dropdown .selected-flag:hover {
  background-color: transparent;
}

.react-tel-input .flag-dropdown.open .selected-flag {
  border-radius: inherit !important;
}

/* RTL Overrides for react-input-number-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;
}