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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* Hide scrollbars for header navigation */
.scrollbar-hide {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;     /* Firefox */
}

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

div.field_with_errors > label {
  @apply text-red-500;
}

div.field_with_errors > :is(input, textarea, select) {
  @apply border border-red-300 placeholder-red-300;
}
/* Google Places Autocomplete Styling */

/* Container for the autocomplete suggestions */
.pac-container {
  background-color: white;
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 0.75rem; /* rounded-xl to match your form fields */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif; /* Match your font */
  font-size: 1rem;
  margin-top: 4px;
  overflow: hidden;
  z-index: 1000;
  /* Smooth entrance animation */
  opacity: 0;
  transform: translateY(-8px);
  animation: slideInDown 0.15s ease-out forwards;
}

/* Force hide when display is none */
.pac-container[style*="display: none"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Entrance animation */
@keyframes slideInDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Individual suggestion items */
.pac-item {
  background-color: white;
  border: none;
  border-bottom: 1px solid #f3f4f6; /* gray-100 */
  cursor: pointer;
  padding: 12px 16px;
  transition: all 0.15s ease-in-out;
  position: relative;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif; /* Match your form typography */
  font-size: 1.125rem; /* text-lg - match your form inputs */
  line-height: 1.5;
}

/* Remove border from last item */
.pac-item:last-child {
  border-bottom: none;
}

/* Hover state with subtle scale */
.pac-item:hover {
  background-color: #f9fafb; /* gray-50 */
  transform: translateX(2px);
}

/* Selected/focused state - match your vibrant green */
.pac-item.pac-item-selected {
  background-color: #ecfdf5; /* green-50 */
  border-left: 3px solid #39b57a; /* Your vibrant green */
  transform: translateX(4px);
}

/* Main text styling */
.pac-item-query {
  color: #111827; /* gray-900 - match your form text color */
  font-weight: 400; /* Normal weight to match form inputs */
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.125rem; /* text-lg */
  line-height: 1.5;
  margin-right: 8px;
  transition: color 0.15s ease-in-out;
}

/* Matched query text */
.pac-matched {
  color: #39b57a; /* Your vibrant green */
  font-weight: 600;
}

/* Secondary text (city, country etc) */
.pac-item .pac-item-query .pac-matched + span {
  color: #6b7280; /* gray-500 */
  font-weight: 400;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem; /* Slightly smaller than main text */
}

/* Icon styling - Hide all pin icons */
.pac-icon {
  display: none !important; /* Completely hide the pin icons */
}

.pac-icon::before {
  display: none !important; /* Hide any pseudo-content */
}

/* Custom GRM-specific enhancements for the input field */
.places-autocomplete-input {
  position: relative;
  transition: all 0.15s ease-in-out;
  /* Ensure long addresses display properly */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Ensure the label is always visible for address fields */
.places-autocomplete-input + label,
.places-autocomplete-input ~ label,
label + .places-autocomplete-input ~ label,
[data-controller*="places-autocomplete"] label {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  position: absolute;
  top: -12px;
  left: 20px;
  background: white;
  padding: 0 4px;
  font-size: 0.875rem;
  color: #6b7280;
  z-index: 10;
}

/* When focused, allow text to wrap if needed */
.places-autocomplete-input:focus {
  outline: none;
  ring: 2px;
  ring-color: #39b57a; /* Your vibrant green */
  ring-opacity: 0.5;
  white-space: normal;
  height: auto;
  min-height: 3.5rem; /* Maintain minimum height */
}

/* When the input has a value (address selected), keep normal styling */
.places-autocomplete-input:not(:placeholder-shown) {
  /* Keep the same color and weight as other form fields */
  color: inherit;
  font-weight: inherit;
}

/* Add a subtle checkmark indicator when address is selected */
.places-autocomplete-input.has-address {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  padding-right: 40px; /* Make room for the checkmark */
}

/* Enhance the container to better integrate with your form design */
.pac-container {
  border-color: #d1d5db; /* gray-300 - matches your ring-gray-300 */
  margin-top: 2px;
}

/* Add custom class for additional control */
.grm-places-container {
  /* Any additional GRM-specific styling */
  backdrop-filter: blur(2px); /* Subtle backdrop blur */
}

/* Loading state */
.pac-container.pac-loading {
  background-color: #f9fafb; /* gray-50 */
}

/* Style the "Powered by Google" text if present */
.pac-container .pac-logo {
  padding: 4px 8px;
  font-size: 0.75rem;
  color: #9ca3af; /* gray-400 */
  background-color: #f9fafb; /* gray-50 */
  border-top: 1px solid #f3f4f6; /* gray-100 */
}

/* Mobile responsiveness with enhanced touch targets */
@media (max-width: 768px) {
  .pac-container {
    border-radius: 0.5rem; /* slightly less rounded on mobile */
    margin: 4px -8px 0 -8px; /* extend slightly beyond input on mobile */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* stronger shadow on mobile */
  }
  
  .pac-item {
    padding: 16px 20px; /* more padding on mobile for easier tapping */
    min-height: 48px; /* ensure minimum touch target size */
    font-size: 1.125rem; /* Maintain text-lg on mobile */
  }
  
  /* Allow multiline on mobile for long addresses */
  .places-autocomplete-input {
    white-space: normal;
    height: auto;
    min-height: 3.5rem;
    line-height: 1.4;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .pac-container {
    background-color: #1f2937; /* gray-800 */
    border-color: #374151; /* gray-700 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  }
  
  .pac-item {
    background-color: #1f2937; /* gray-800 */
    border-bottom-color: #374151; /* gray-700 */
    color: #f9fafb; /* gray-50 */
  }
  
  .pac-item:hover {
    background-color: #374151; /* gray-700 */
  }
  
  .pac-item.pac-item-selected {
    background-color: #064e3b; /* green-900 */
    border-left-color: #10b981; /* green-500 */
  }
  
  .pac-item-query {
    color: #f9fafb; /* gray-50 */
  }
  
  .pac-matched {
    color: #10b981; /* green-500 */
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .pac-container,
  .pac-item,
  .pac-icon,
  .places-autocomplete-input {
    transition: none;
    animation: none;
    transform: none;
  }
  
  .pac-container {
    opacity: 1;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 
 *= require font-awesome

 @keyframes glow-green {
  0% {
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.2),
                0 0 10px rgba(34, 197, 94, 0.2),
                0 0 15px rgba(34, 197, 94, 0.2);
  }
  50% {
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5),
                0 0 20px rgba(34, 197, 94, 0.3),
                0 0 30px rgba(34, 197, 94, 0.3);
  }
  100% {
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.2),
                0 0 10px rgba(34, 197, 94, 0.2),
                0 0 15px rgba(34, 197, 94, 0.2);
  }
}

@keyframes glow-orange {
  0% {
    box-shadow: 0 0 5px rgba(249, 115, 22, 0.2),
                0 0 10px rgba(249, 115, 22, 0.2),
                0 0 15px rgba(249, 115, 22, 0.2);
  }
  50% {
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.5),
                0 0 20px rgba(249, 115, 22, 0.3),
                0 0 30px rgba(249, 115, 22, 0.3);
  }
  100% {
    box-shadow: 0 0 5px rgba(249, 115, 22, 0.2),
                0 0 10px rgba(249, 115, 22, 0.2),
                0 0 15px rgba(249, 115, 22, 0.2);
  }
}

@keyframes glow-red {
  0% {
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.2),
                0 0 10px rgba(239, 68, 68, 0.2),
                0 0 15px rgba(239, 68, 68, 0.2);
  }
  50% {
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5),
                0 0 20px rgba(239, 68, 68, 0.3),
                0 0 30px rgba(239, 68, 68, 0.3);
  }
  100% {
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.2),
                0 0 10px rgba(239, 68, 68, 0.2),
                0 0 15px rgba(239, 68, 68, 0.2);
  }
}

.glow-green {
  animation: glow-green 2s ease-in-out infinite;
}

.glow-orange {
  animation: glow-orange 2s ease-in-out infinite;
}

.glow-red {
  animation: glow-red 2s ease-in-out infinite;
}