/* ═══════════════════════════════════════════════════════════════════
   Extracted from resources/views/fares/route.blade.php
   Previously 1 inline <style> block, re-sent on every render and
   uncacheable. Blocks are concatenated in their original source order,
   so the cascade within the page is unchanged.
   ═══════════════════════════════════════════════════════════════════ */

.operator-fare-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 1.5rem; overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.02); transition: transform 0.2s, box-shadow 0.2s;
}
.operator-fare-card:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.05); border-color: var(--color-primary-light); }
.operator-fare-header {
  background: var(--color-surface-2); padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border-light);
}
.operator-fare-header h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--color-text); }

/* Price table mobile */
.price-table-futuristic { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table-futuristic table { min-width: 480px; }
@media (max-width: 640px) {
  .price-table-futuristic table { min-width: 380px; }
  .price-table-futuristic table td,
  .price-table-futuristic table th { padding: 0.75rem 0.75rem !important; font-size: 0.8rem !important; }
  .price-table-futuristic table td div[style*="font-size: 1.15rem"] { font-size: 1rem !important; }
}