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

@layer components {
  .favorite-button-submit {
    @apply bg-transparent border-0 cursor-pointer transition-transform duration-100 ease-in-out;
    /* Icon size: smaller for mobile, larger for desktop */
    @apply text-base sm:text-xl;
    /* Padding: smaller for mobile, larger for desktop */
    @apply p-0.5 sm:p-0;
    /* Positioning: ensure button is visible in small mobile containers and correctly positioned on desktop */
    @apply sm:absolute -top-4 right-0;
    /* Add background and shadow for better visibility on mobile, remove on desktop */
    @apply rounded-full sm:rounded-none;
    /* Ensure proper z-index - button should be above the triangle */
    @apply z-20 sm:z-20;
    /* Make it a proper touch target on mobile */
    @apply min-w-[32px] min-h-[32px] sm:min-w-0 sm:min-h-0;
    /* Center the icon within the button */
    @apply flex items-center justify-center;
  }

  .favorite-button-submit.favorited {
    @apply text-yellow-500;
    /* Gold for favorited */
    /* If a more specific color is needed, use custom CSS below */
    /* color: #eab308; */
  }

  .favorite-button-submit.favorited:hover {
    color: #facc15;
    /* Slightly brighter gold on hover (custom, as Tailwind may not have this exact shade) */
  }

  .favorite-button-submit.not-favorited {
    color: #e5e7eb;
    /* Light gray/off-white star for dark button */
  }

  .favorite-button-submit.not-favorited:hover {
    color: #e5e7eb;
    /* White star on hover */
    /* Background hover is handled by the general .favorite-button-submit:hover */
  }

  .favorite-button-submit:active {
    @apply scale-95;
  }

  /* Container styles for positioning */
  .favorite-button-container {
    /* Mobile: bottom left positioning */
    @apply absolute bottom-3 left-3 z-10;
    /* Desktop: top right positioning */
    @apply sm:top-0 sm:right-0 sm:bottom-auto sm:left-auto;
    /* Ensure container doesn't get clipped */
    @apply pointer-events-none;
    /* Revert size and overflow hidden from previous attempt */
    @apply sm:w-auto sm:h-auto sm:overflow-visible;
  }

  .favorite-button-container form {
    @apply pointer-events-auto;
  }

  .car-details-container .favorite-button-container {
    @apply relative py-1 px-2;
    @apply scale-125;
  }

  .car-details-container .favorite-button-container .favorite-button-submit {}

  /* Desktop triangle background on the image container */
  @screen sm {
    .car-image-container {
      @apply overflow-hidden relative;

      &::before {
        content: '';
        @apply absolute top-0 right-0 w-0 h-0 border-t-[40px] border-l-[40px] border-solid;
        border-top-color: white;
        /* Color of the triangle */
        border-left-color: transparent;
        @apply pointer-events-none z-0;
        /* Ensure triangle is behind button and not interactive */
      }
    }
  }
}

/* Mobile-specific optimizations */
@layer utilities {

  /* Ensure touch targets meet accessibility guidelines (44x44px minimum) */
  .touch-target {
    @apply min-w-[44px] min-h-[44px];
  }

  /* Prevent text selection on touch devices */
  .touch-manipulation {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Smooth scrolling for better mobile experience */
  .smooth-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Prevent zoom on input focus on iOS */
  @media (max-width: 640px) {

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
      font-size: 16px !important;
    }
  }
}

/* PWA-specific styles */
@media (display-mode: standalone) {

  /* Add extra padding for iOS status bar in standalone mode */
  .standalone-padding {
    padding-top: env(safe-area-inset-top);
  }

  /* Adjust for home indicator on iOS */
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}