/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Mobile-friendly select dropdown styling */
select {
  /* Ensure proper sizing on mobile */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem;
}

/* Ensure consistent height for touch targets */
@media (max-width: 640px) {
  select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Reserved for future global CSS overrides */