@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import 'tailwindcss';
@config "../../tailwind.config.ts";

/*
 * Helvetica Neue is a licensed font with no free source, so the
 * font-helvetica stack (Helvetica Neue, Helvetica, Arial, sans-serif)
 * intentionally renders as Arial — accepted as final per product decision.
 * These @font-face rules stay inactive (no files exist) but will activate
 * automatically without further code changes if licensed files are ever
 * added to public/fonts/, named:
 *   HelveticaNeue-Regular.woff2 / .woff
 *   HelveticaNeue-Medium.woff2 / .woff
 */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeue-Regular.woff2') format('woff2'),
       url('/fonts/HelveticaNeue-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeue-Medium.woff2') format('woff2'),
       url('/fonts/HelveticaNeue-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html {
  scrollbar-gutter: stable;
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

button {
  cursor: pointer;
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-full text-base font-medium whitespace-nowrap transition duration-200 cursor-pointer;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-full text-lg font-medium whitespace-nowrap transition duration-200 cursor-pointer border-2 border-[#009FE3] bg-[#009FE3] text-white hover:bg-[#007ab0] focus:ring-4 focus:ring-[#009FE3]/50;
  }

  .btn-outline-primary {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-full text-lg font-medium whitespace-nowrap transition duration-200 cursor-pointer border-2 border-[#009FE3] text-[#009FE3] hover:bg-[#009FE3] hover:text-white focus:ring-4 focus:ring-[#009FE3]/50;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-full text-lg font-medium whitespace-nowrap transition duration-200 cursor-pointer border-2 border-[#1D1D1B] bg-[#1D1D1B] text-white hover:bg-[#000000] focus:ring-4 focus:ring-[#1D1D1B]/50;
  }

  .btn-outline-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-full text-lg font-medium whitespace-nowrap transition duration-200 cursor-pointer border-2 border-[#1D1D1B] text-[#1D1D1B] hover:bg-[#1D1D1B] hover:text-white focus:ring-4 focus:ring-[#1D1D1B]/50;
  }

  .heading {
    @apply font-semibold leading-[62px] text-[44px] md:text-[36px] md:leading-[52px] sm:text-[28px] sm:leading-[40px];
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
}

/* Range slider styling */
.range-input {
  appearance: none;
  background: transparent;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.range-input::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background-color: white;
  border: 3px solid #FF3A44;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 30;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.range-input::-moz-range-thumb {
  appearance: none;
  pointer-events: auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background-color: white;
  border: 3px solid #FF3A44;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 30;
}

/* Change the white to whatever background color you want */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: black !important; /* Keep the text color as you want it */
    transition: background-color 5000s ease-in-out 0s;
}