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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 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;

    --wbm-primary: rgb(255, 147, 33);
    --wbm-primary-light: rgba(255, 147, 33, 0.5);
    --wbm-primary-ultra-light: rgba(255, 147, 33, 0.15);
    --wbm-secondary: rgb(109, 191, 81);
    --wbm-green: #0d7e13;
    --wbm-danger: #e31717;
    --wbm-gray-light: #e7e5e2;
    --wbm-black: rgb(28, 26, 23);
    --wbm-white: rgb(255, 255, 255);
    --wbm-default-font: 'Inter', sans-serif;
    --wbm-border-radius: 6px;

    /* #CA08EA */
    --accent-pink-rgb: 143, 0, 96;
    /* #0494F7 */
    --accent-blue-rgb: 4, 148, 247;

    /* default opacities */
    --accent-pink-alpha: 1;
    --accent-blue-alpha: 1;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --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%;
  }
}

.hide-scrollbar {
  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  &::-webkit-scrollbar-thumb {
    background: none;
  }
}

.custom-scrollbar {
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #cac7c7;
    border-radius: 3px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

.hide-scrollbar {
  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  &::-webkit-scrollbar-thumb {
    background: none;
  }
}

.custom-scrollbar {
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #cac7c7;
    border-radius: 3px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

.wbm-smart__blob,
.wbm-smart__blob svg,
.wbm-smart__blob-path {
  width: 100%;
  height: 100%;
}

.wbm-smart__blob {
  min-width: 100%;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wbm-smart__blob-path {
  animation: 6s ease-in-out infinite blob-morph;
}

.wbm-smart__blob-products-header > .wbm-smart__blob {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border: none;
  margin-right: 8px;
}

@keyframes blob-morph {
  0%,
  100% {
    d: path(
      'M37.5,-63.6C49.2,-58.3,59.6,-49.3,69.1,-38.1C78.7,-26.9,87.4,-13.5,84.2,-1.8C81.1,9.8,66,19.6,56.8,31.3C47.5,42.9,43.9,56.4,35.4,61.5C26.9,66.7,13.4,63.5,0,63.6C-13.5,63.7,-27.1,67,-39.3,64C-51.5,61,-62.5,51.7,-68.4,40C-74.3,28.3,-75.2,14.1,-72.9,1.3C-70.7,-11.5,-65.2,-23,-59.1,-34.4C-53,-45.8,-46.2,-57,-36.2,-63.3C-26.3,-69.5,-13.1,-70.9,-0.1,-70.7C12.9,-70.5,25.9,-68.9,37.5,-63.6Z'
    );
  }

  37% {
    d: path(
      'M40.3,-62.5C51.1,-57.2,59.7,-49.2,68.5,-38.8C77.4,-28.5,86.4,-15.9,83.3,-4.7C80.3,6.5,65.2,13.9,55.7,26.2C46.3,38.6,42.5,55.6,32.9,61.2C23.4,66.7,7.6,60.8,-5.8,61.3C-19.2,61.9,-38.4,68.8,-48.9,64.6C-59.4,60.4,-61.2,45,-68.3,32.4C-75.3,19.8,-87.6,9.9,-85.5,-3.2C-83.4,-16.3,-66.8,-32.6,-56.2,-46.7C-45.6,-60.8,-40.8,-72.7,-30.5,-70.9C-20.1,-69,-10,-53.4,-0.1,-52.6C10,-51.8,20,-65.5,40.3,-62.5Z'
    );
  }

  67% {
    d: path(
      'M36.5,-64.8C47.2,-58.5,55.3,-47.5,62.8,-36.4C70.3,-25.3,77.3,-14,74.8,-3.1C72.3,7.9,60.3,15.9,51.7,28C43.1,40.1,38,56.2,27.3,62.5C16.5,68.7,0.1,65.1,-13.4,61.4C-26.9,57.7,-37.6,53.9,-47.3,48.6C-57,43.2,-65.6,36.2,-68.7,27.4C-71.9,18.5,-69.7,7.8,-68.6,-3.8C-67.5,-15.4,-67.5,-30.8,-59.9,-41.4C-52.3,-52.1,-37.1,-57.9,-24.8,-63.4C-12.5,-68.9,-6.2,-73.9,3.3,-74.1C12.7,-74.2,25.3,-70.5,36.5,-64.8Z'
    );
  }
}

/* PDF Export - Hide badge styling, show only text */
.pdf-export .rounded-full[class*='bg-red'],
.pdf-report .rounded-full[class*='bg-red'],
.pdf-export .rounded-full[class*='bg-yellow'],
.pdf-report .rounded-full[class*='bg-yellow'],
.pdf-export .rounded-full[class*='bg-green'],
.pdf-report .rounded-full[class*='bg-green'],
.pdf-export .rounded-full[class*='bg-blue'],
.pdf-report .rounded-full[class*='bg-blue'],
.pdf-export span[class*='rounded-full'][class*='px-'],
.pdf-report span[class*='rounded-full'][class*='px-'],
.pdf-export span[class*='inline-block'][class*='rounded-full'],
.pdf-report span[class*='inline-block'][class*='rounded-full'] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.pdf-export span[class*='bg-red'],
.pdf-report span[class*='bg-red'] {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.pdf-export span[class*='bg-yellow'],
.pdf-report span[class*='bg-yellow'] {
  color: #d97706 !important;
  font-weight: 700 !important;
}

.pdf-export span[class*='bg-green'],
.pdf-report span[class*='bg-green'] {
  color: #16a34a !important;
  font-weight: 700 !important;
}

.pdf-export span[class*='bg-blue'],
.pdf-report span[class*='bg-blue'] {
  color: #2563eb !important;
  font-weight: 700 !important;
}

.wbm-smart__btn-animated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  gap: 0.25em 0;
  background-color: #ffffff;
  /* Light theme */
  color: #444;
  /* Dark theme */
  /* color: #FFF; */
  font-size: 1rem;
  font-weight: 600;
  padding: 14px;
  border-radius: 18px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  text-decoration: none;
  /* box-shadow: rgba(202, 8, 234, 0.1) 0em 0.25em 0.5em 0.25em; */
  box-shadow: rgba(var(--accent-pink-rgb), 0.1) 0em 0.45em 0.8em 0.45em;
  transition: box-shadow 0.3s ease;
}

.wbm-smart__btn-animated-text-wrapper {
  display: inline-flex;
  overflow: hidden;
  /* white-space: nowrap; */
  /* max-width: 150px; */
  opacity: 1;
  transition:
    max-width 0.25s ease,
    opacity 0.2s ease;
}

/* Expanded state (with text) */
.wbm-smart__btn-animated-text-wrapper--visible {
  /* max-width: 150px; */
  opacity: 1;
}

/* Collapsed state (no text) */
.wbm-smart__btn-animated-text-wrapper--hidden {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
}

@keyframes wbm-smart__rotation {
  0% {
    transform: rotate(0deg);
  }

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

.wbm-smart__btn-animated::before {
  /* Light theme */
  /* background: conic-gradient(white 50%, #CA08EA, #0494F7, white); */
  background: conic-gradient(
    white 50%,
    rgba(var(--accent-pink-rgb), var(--accent-pink-alpha, 1)),
    rgba(var(--accent-blue-rgb), var(--accent-blue-alpha, 1)),
    white
  );
  /* Dark theme */
  /* background: conic-gradient(#282A36 50%, #B5057B, #41B9FA, rgba(40, 42, 54, 1)); */
  z-index: -2;
  width: 130%;
  min-height: 120%;
  aspect-ratio: 1;
  animation: wbm-smart__rotation 4s linear infinite;
}

.wbm-smart__btn-animated::after {
  inset: 4px;
  border-radius: 18px;
  /* Light theme */
  background-color: rgba(255, 255, 255, 0.9);
  /* Dark theme */
  /* background-color: rgba(0, 0, 0, 0.7); */
  backdrop-filter: blur(2em);
  z-index: -1;
  transition: opacity 0.3s ease;
}

.wbm-smart__btn-animated-arrow-icon {
  display: none;
}

.wbm-smart__btn-animated:hover > .wbm-smart__btn-animated-arrow-icon {
  display: flex;
}

.wbm-smart__btn-animated > img {
  height: 1.5em;
  width: 1.5em;
  object-fit: contain;
  user-select: none;
}

.wbm-smart__btn-animated > svg {
  height: 1.5em;
  width: 1.5em;
  object-fit: contain;
  user-select: none;
  opacity: 0.4;
}

.wbm-smart__btn-animated > svg:hover {
  opacity: 1;
}

.wbm-smart__btn-animated > span {
  padding: 0 0.75em;
  font-size: 12px;
  user-select: none;
  max-width: 150px;
  text-align: left;
}

.wbm-smart__btn-animated::after,
.wbm-smart__btn-animated::before {
  content: '';
  position: absolute;
}

.wbm-smart__btn-animated:hover,
.wbm-smart__btn-animated:focus {
  box-shadow: rgba(0, 0, 0, 0.25) 0em 0em 0.5em 0.125em;
}

@keyframes wbm-smart__pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

.wbm-smart__pulse-animation {
  -webkit-animation: wbm-smart__pulse 1s infinite both;
  animation: wbm-smart__pulse 1s infinite both;
}

.wbm-smart__glow-text {
  font-size: 12px;
  font-weight: 600;
  max-width: 150px;
  min-width: 150px !important;
  color: #fff;
  font-family: var(--wbm-default-font);
  background: linear-gradient(
    135deg,
    rgba(var(--accent-pink-rgb), 1),
    rgba(var(--accent-blue-rgb), 1)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: left;
  filter: drop-shadow(0 2px 8px rgba(82, 43, 180, 0.3));
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.wbm-smart__custom-background {
  background: linear-gradient(
    180deg,
    rgba(var(--accent-blue-rgb), 0.55) 0%,
    rgba(var(--accent-pink-rgb), 0.55) 80%
  );
}

.wbm-smart__bg-pink {
  background: rgba(var(--accent-pink-rgb), 1);
}

.wbm-smart__card {
  position: relative;
  border-radius: 12px;
  /* height: -webkit-fill-available; */
  height: fit-content !important;
  /* min-height: 86px; */
  padding: 8px;
  border: 1.5x solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.02);
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  /* justify-content: center; */
  justify-content: space-between;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background 0.12s ease-out;
}

.wbm-smart__card:hover {
  border: 1px solid rgba(var(--accent-pink-rgb), 0.9);
}

.wbm-smart__card-still {
  border: none !important;
}

.wbm-smart__card-still:hover {
  border: none !important;
}

iframe[title='chat widget'] {
  /* adjust as needed */
  bottom: 10px !important;
  right: 10px !important;
}