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

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  /* 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 */
  }
  /* Custom focus box shadow for discount input */
  .discount-input-focus:focus {
    box-shadow: 0 0 0 3px hsla(0, 0%, 4%, 25%), 0 1px 1px 0 rgba(0, 0, 0, 0.08) !important;
  }
}

@layer base {
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
  }
  
  body {
    background: var(--background);
    color: var(--foreground);
  }

  input:-webkit-autofill:not([data-stripe]):not([name*="__privateStripe"]),
  input:-webkit-autofill:hover:not([data-stripe]):not([name*="__privateStripe"]),
  input:-webkit-autofill:focus:not([data-stripe]):not([name*="__privateStripe"]),
  input:-webkit-autofill:active:not([data-stripe]):not([name*="__privateStripe"]) {
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: inherit; */
    -webkit-text-fill-color: var(--foreground) !important;
    background-color: transparent !important;
    -webkit-background-clip: text !important;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px transparent;
  }

  /* Ensure Stripe iframes are visible and properly rendered */
  iframe[name*="__privateStripe"],
  iframe[title*="Google autocomplete"],
  iframe[src*="stripe.com"] {
    opacity: 1 !important;
    /* Remove background styling - let Appearance API handle content styling */
  }

  /* Specific positioning for Stripe autocomplete iframe to appear below input field */
  iframe[name*="__privateStripe"][title*="Google autocomplete suggestions"] {
    transform: translateY(4px) !important; /* Push iframe down by 4px */
    margin-top: 0 !important;
  }

  /* DIAGNOSTIC & FIX: Direct styling of Google Places API elements */
  /* These might be rendered outside of Stripe's control */
  .pac-container {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -1px rgba(0,0,0,0.06) !important;
    z-index: 9999 !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  }

  .pac-item {
    background-color: #ffffff !important;
    color: #0a0a0a !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    font-size: 14px !important;
    cursor: pointer !important;
  }

  .pac-item:hover,
  .pac-item.pac-item-selected {
    background-color: #f3f4f6 !important;
    color: #0a0a0a !important;
  }

  .pac-item-query {
    color: #0a0a0a !important;
    font-weight: 500 !important;
  }

  /* Additional Google Maps autocomplete styling */
  .pac-matched {
    font-weight: 600 !important;
    color: #0a0a0a !important;
  }

  /* Ensure Stripe Elements containers allow proper iframe positioning */
  .StripeElement {
    position: relative;
  }

  :root {
    --radius: 0.625rem;
    --background: 0 0% 98.5%;
    --foreground: 0 0% 14.5%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 14.5%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 14.5%;
    --primary: 0 0% 20.5%;
    --primary-foreground: 0 0% 98.5%;
    --secondary: 0 0% 94%;
    --secondary-foreground: 0 0% 20.5%;
    --muted: 0 0% 97.5%;
    --muted-foreground: 0 0% 55.6%;
    --accent: 0 0% 94%;
    --accent-foreground: 0 0% 20.5%;
    --destructive: 15 85% 58%;
    --border: 0 0% 92.2%;
    --input: 0 0% 92.2%;
    --ring: 0 0% 70.8%;
    --chart-1: 35 75% 65%;
    --chart-2: 195 40% 60%;
    --chart-3: 225 25% 40%;
    --chart-4: 85 65% 83%;
    --chart-5: 75 65% 77%;
    --sidebar: 0 0% 98.5%;
    --sidebar-foreground: 0 0% 14.5%;
    --sidebar-primary: 0 0% 20.5%;
    --sidebar-primary-foreground: 0 0% 98.5%;
    --sidebar-accent: 0 0% 94%;
    --sidebar-accent-foreground: 0 0% 20.5%;
    --sidebar-border: 0 0% 92.2%;
    --sidebar-ring: 0 0% 70.8%;
  }

  .dark {
    --background: 0 0% 7.5%;
    --foreground: 0 0% 98.5%;
    --card: 0 0% 11.5%;
    --card-foreground: 0 0% 98.5%;
    --popover: 0 0% 13.5%;
    --popover-foreground: 0 0% 98.5%;
    --primary: 0 0% 92.2%;
    --primary-foreground: 0 0% 10.5%;
    --secondary: 0 0% 12.5%;
    --secondary-foreground: 0 0% 98.5%;
    --muted: 0 0% 100% / 10%;
    --muted-foreground: 0 0% 70.8%;
    --accent: 0 0% 100% / 7.5%;
    --accent-foreground: 0 0% 98.5%;
    --destructive: 12 75% 70%;
    --border: 0 0% 100% / 10%;
    --input: 0 0% 100% / 15%;
    --ring: 0 0% 55.6%;
    --chart-1: 270 85% 49%;
    --chart-2: 155 50% 70%;
    --chart-3: 75 65% 77%;
    --chart-4: 310 80% 63%;
    --chart-5: 20 85% 65%;
    --sidebar: 0 0% 10.5%;
    --sidebar-foreground: 0 0% 98.5%;
    --sidebar-primary: 270 85% 49%;
    --sidebar-primary-foreground: 0 0% 98.5%;
    --sidebar-accent: 0 0% 100% / 7.5%;
    --sidebar-accent-foreground: 0 0% 98.5%;
    --sidebar-border: 0 0% 100% / 10%;
    --sidebar-ring: 0 0% 55.6%;
  }
}



.tiptap {
  :first-child {
    margin-top: 0;
  }
  &:focus-visible {
    outline: none;
  }
}

input:-internal-autofill-selected:not([data-stripe]):not([name*="__privateStripe"]) {
  background-color: hsl(var(--input)) !important;
}

input:-webkit-autofill:not([data-stripe]):not([name*="__privateStripe"]) {
  background-color: hsl(var(--input)) !important;
}

input {
  -webkit-text-fill-color: inherit !important;
}



@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    overscroll-behavior: none;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
}