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

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hide scrollbars for horizontal scroll on mobile */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* Allow reCAPTCHA to be visible within the modal */

/* Fix reCAPTCHA z-index issues within modals */
[data-radix-popper-content-wrapper] {
  z-index: 10001 !important;
}

/* Ensure reCAPTCHA elements stay within modal bounds and below dialog */
.grecaptcha-badge {
  z-index: 9998 !important;
}

iframe[src*="recaptcha"] {
  z-index: 9998 !important;
}

/* Target reCAPTCHA widget specifically in modals */
[data-radix-dialog-content] iframe[src*="recaptcha"] {
  position: static !important;
  z-index: 1 !important;
}

/* Constrain reCAPTCHA widget container */
[data-radix-dialog-content] div[style*="position: absolute"] {
  position: relative !important;
  z-index: 1 !important;
}

/* Style reCAPTCHA container within modals */
#recaptcha-container-modal {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 304px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
}

#recaptcha-container-modal > div {
  max-width: 100% !important;
  pointer-events: auto !important;
}

#recaptcha-container-modal iframe {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Ensure reCAPTCHA elements are clickable within modal */
[data-radix-dialog-content] #recaptcha-container-modal,
[data-radix-dialog-content] #recaptcha-container-modal *,
[data-radix-dialog-content] #recaptcha-container-modal iframe {
  pointer-events: auto !important;
  position: relative !important;
}

/* Hide Google reCAPTCHA challenge overlays when modal is open */
body:has([data-radix-dialog-overlay]) > div[style*="position: absolute"][style*="z-index"],
body:has([data-radix-dialog-overlay]) > div[style*="position: fixed"][style*="z-index"] {
  display: none !important;
}

/* Alternative approach for browsers that don't support :has() */
[data-radix-dialog-overlay] ~ div[style*="position: absolute"],
[data-radix-dialog-overlay] ~ div[style*="position: fixed"] {
  display: none !important;
}

/* Hide scrollbar for horizontal scroll */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

/* Custom slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
  background: transparent;
  height: 8px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 0;
  width: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  background: transparent;
  height: 8px;
  border: none;
}

input[type="range"]::-moz-range-thumb {
  background: transparent;
  height: 0;
  width: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

/* Font Faces */
@font-face {
  font-family: 'Libre Franklin';
  src: url('/fonts/LibreFranklin-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Franklin';
  src: url('/fonts/LibreFranklin-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Youth Bold';
  src: url('/fonts/Youth-Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Hide scrollbar for horizontal scroll */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

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

  body {
    @apply font-sans antialiased bg-background text-foreground;
    font-family: 'Libre Franklin', system-ui, Avenir, Helvetica, Arial, sans-serif;
  }
}

@layer utilities {
  /* Typography utilities */
  .font-youth {
    font-family: 'Youth Bold', sans-serif !important;
  }

  /* Semantic typography classes */
  .text-display-2xl { @apply text-display-2xl font-bold; }
  .text-display-xl { @apply text-display-xl font-bold; }
  .text-display-lg { @apply text-display-lg font-bold; }
  .text-display-md { @apply text-display-md font-bold; }
  .text-display-sm { @apply text-display-sm font-bold; }
  
  .text-heading-xl { @apply text-heading-xl font-semibold; }
  .text-heading-lg { @apply text-heading-lg font-semibold; }
  .text-heading-md { @apply text-heading-md font-medium; }
  .text-heading-sm { @apply text-heading-sm font-medium; }
  
  .text-body-lg { @apply text-body-lg font-normal; }
  .text-body-md { @apply text-body-md font-normal; }
  .text-body-sm { @apply text-body-sm font-normal; }
  .text-body-xs { @apply text-body-xs font-normal; }
  
  .text-caption { @apply text-caption font-medium; }
  .text-overline { @apply text-overline font-semibold uppercase tracking-widest; }

  /* Brand typography */
  .text-brand-hero {
    @apply font-youth text-display-lg md:text-display-xl;
  }
  
  .text-brand-heading {
    @apply font-youth text-display-sm md:text-display-md;
  }

  /* Design utilities */
  .emoji-bg {
    background-color: #CFEBD6;
  }

  .group:hover .emoji-bg-hover {
    background-color: #BCE4C5;
  }

  .card-radial-bg {
    background: radial-gradient(ellipse 100% 150% at center, rgba(156, 163, 175, 0.12) 0%, rgba(156, 163, 175, 0.06) 50%, transparent 80%);
  }

  .card-floating-shadow {
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  }

  /* Remove default focus outline for better custom focus styles */
  *:focus {
    outline: none;
  }

  /* Hide scrollbar but keep scroll functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }
}