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

/*

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

*/
/* Custom Mapbox Geocoder Styles */
.mapboxgl-ctrl-geocoder {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
}

.mapboxgl-ctrl-geocoder--input {
    height: 42px !important;
    padding: 0.625rem !important;
    background-color: rgb(249 250 251) !important;
    border: 1px solid rgb(209 213 219) !important;
    border-radius: 0.5rem !important;
    color: rgb(17 24 39) !important;
    font-size: 0.875rem !important;
    padding-left: 0.625rem !important; /* Reset left padding */
}

.mapboxgl-ctrl-geocoder--input:focus {
    outline: none !important;
    border-color: rgb(59 130 246) !important;
    box-shadow: 0 0 0 2px rgb(59 130 246 / 0.25) !important;
}

/* Hide the search icon */
.mapboxgl-ctrl-geocoder--icon-search {
    display: none !important;
}

/* Adjust the clear button position */
.mapboxgl-ctrl-geocoder--button {
    background: none !important;
    top: 7px !important;
}

/* Suggestions box */
.mapboxgl-ctrl-geocoder--suggestion-title {
    font-size: 0.875rem !important;
}

.mapboxgl-ctrl-geocoder--suggestion-address {
    font-size: 0.75rem !important;
}

/* Custom Waypoint Marker Styles */
.waypoint-marker {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #4F46E5;
}

.waypoint-marker svg {
    width: 16px;
    height: 16px;
    color: #4F46E5;
}
/*
 * 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.
 *


 */

/* Disable link hover text decoration */
a:hover {
  text-decoration: none !important;
}

/* Mapbox Directions Styles */
.mapbox-directions-route-line {
  stroke: #4A90E2 !important;
  stroke-width: 4 !important;
  stroke-opacity: 0.8 !important;
}

.mapboxgl-ctrl-directions {
  display: none !important;
}

/* Geocoder Position */
.mapboxgl-ctrl-geocoder {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
}

/* Custom Marker Styles */
.marker {
  background-color: #4A90E2;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
}