/* Help screen overflow fix */
html, body {
  overflow-x: hidden;
}
#help-view {
  max-width: 100vw;
  overflow-x: auto;
}
nav {
  width: 100vw;
  box-sizing: border-box;
  overflow-x: auto;
  white-space: nowrap;
}



.import-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7fafd;
  padding: 6px 10px 6px 6px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(20,40,60,0.05);
}
.import-input {
  flex: 1;
  min-width: 130px;
  max-width: 200px;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  background: #fff;
  transition: border 0.18s, box-shadow 0.18s;
}
.import-input:focus {
  border-color: #1d72e8;
  box-shadow: 0 0 0 2px #b3d1f7;
}
.import-btn {
  background: linear-gradient(90deg,#2176ff 80%,#30b6ff 100%);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 13px;
  padding: 8px 20px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(20,40,60,0.08);
  transition: background 0.2s, box-shadow 0.15s;
}
.import-btn:hover, .import-btn:focus {
  background: linear-gradient(90deg,#1558b0 70%,#2498ce 100%);
  box-shadow: 0 2px 10px rgba(30,60,100,0.13);
}



/* Make the collapsed search icon stand out */
.leaflet-control-geocoder-icon {
  background: linear-gradient(120deg, #2176ff 80%, #30b6ff 100%);
  border-radius: 50%;
  border: none;
  width: 32px;
  height: 32px;
  box-shadow: 0 1px 5px rgba(30,60,120,0.11);
  transition: background 0.18s;
}
.leaflet-control-geocoder-icon:hover,
.leaflet-control-geocoder-icon:focus {
  background: linear-gradient(120deg, #185bcc 80%, #2498ce 100%);
  box-shadow: 0 3px 10px rgba(30,60,120,0.16);
}

/* The input box and Go button */
.leaflet-control-geocoder-form {
  display: flex !important;
  align-items: center;
  gap: 7px;
  background: #f7fafd;
  border-radius: 7px;
  padding: 6px 10px 6px 8px;
  box-shadow: 0 2px 8px rgba(20,40,60,0.08);
  border: 1px solid #e3e8f1;
}
.leaflet-control-geocoder-form input.leaflet-control-geocoder-form-input {
  flex: 1 1 120px;
  font-size: 14px;
  border: 1.5px solid #d3d3d3;
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
  background: #fff;
  transition: border 0.17s, box-shadow 0.15s;
  min-width: 80px;
}
.leaflet-control-geocoder-form input.leaflet-control-geocoder-form-input:focus {
  border-color: #2176ff;
  box-shadow: 0 0 0 2px #b3d1f7;
}

.leaflet-control-geocoder-form .go-btn {
  padding: 7px 18px;
  background: linear-gradient(90deg,#2176ff 80%,#30b6ff 100%);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(20,40,60,0.11);
  transition: background 0.18s, box-shadow 0.13s;
}
.leaflet-control-geocoder-form .go-btn:hover,
.leaflet-control-geocoder-form .go-btn:focus {
  background: linear-gradient(90deg,#1558b0 70%,#2498ce 100%);
  box-shadow: 0 3px 10px rgba(30,60,100,0.18);
}

/* pulse “you are here” dot  */
.leaflet-location-pulse{
  width:16px;height:16px;border-radius:50%;
  background:#2563eb;
  box-shadow:0 0 0 0 rgba(37,99,235,.5);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%  {box-shadow:0 0 0 0   rgba(37,99,235,.5);}
  70% {box-shadow:0 0 0 12px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0   rgba(37,99,235,0);}
}

/* Wrap container for the three actions */
.leaflet-draw-actions {
  background: rgba(15, 23, 42, 0.96);  /* slate-900-ish */
  border-radius: 999px;                 /* pill */
  padding: 4px 6px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.6); /* slate-400 */
}

/* Reset list look */
.leaflet-draw-actions li {
  list-style: none;
}

/* Base style for all three links */
.leaflet-draw-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  color: #e5e7eb;          /* text-slate-200 */
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Finish */
.leaflet-draw-actions a.leaflet-draw-actions-finish {
  background: #16a34a;     /* green-600 */
  color: #ffffff;
  border-color: #16a34a;
}
.leaflet-draw-actions a.leaflet-draw-actions-finish:hover {
  background: #15803d;     /* green-700 */
}

/* Delete last point */
.leaflet-draw-actions a.leaflet-draw-actions-undo {
  background: rgba(30, 64, 175, 0.15);   /* indigo tint */
  color: #e5e7eb;
  border-color: rgba(129, 140, 248, 0.6);
}
.leaflet-draw-actions a.leaflet-draw-actions-undo:hover {
  background: rgba(79, 70, 229, 0.35);   /* darker indigo */
}

/* Cancel */
.leaflet-draw-actions a.leaflet-draw-actions-cancel {
  background: transparent;
  color: #f97373;   /* soft red */
  border-color: rgba(248, 113, 113, 0.5);
}
.leaflet-draw-actions a.leaflet-draw-actions-cancel:hover {
  background: rgba(248, 113, 113, 0.12);
}


#destinationMap {
  height: 38vh !important;
}

<!-- put this AFTER the tailwind CDN script -->

  /* BIGGER summary-row text (still fine) */

  /* ——— Bigger summary row ——— */
  .summary-row {
    @apply gap-3 px-4 py-4;      /* more padding */
    min-height: 3.5rem;          /* extra click area */
  }

  /* ——— Larger text inside summary ——— */
  .summary-row input,
  .summary-row span#tripTypeSummary,
  .summary-row span#timeSummary,
  .summary-row span#fareSummary {
    font-size: 1rem;             /* Tailwind text-base */
    line-height: 1.5rem;
    font-weight: 500;
  }

  /* ——— Make action icons & buttons bigger ——— */
  .action-icon {                 /* map 📍, book 📘, etc. */
    @apply p-3 text-3xl;         /* more padding + larger glyph */
  }
  .summary-row .btn-primary,
  .summary-row .btn-success {
    @apply px-3 py-2 text-sm;    /* keeps buttons aligned if you ever put them here */
  }

  /* ——— Inline error style (works with your showInlineError helper) ——— */
  .inline-error {
    @apply block mt-1 pl-4 text-red-600 text-xs;
  }
  
 .form-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
}


  /* Sticky, centered “Submit” CTA */
/* === PaTran: core button style (pure CSS, no Tailwind build needed) === */
.btn-submit-sticky {
  position: fixed;             /* keep it sticky to the viewport */
  left: 0;
  right: 0;
  bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 1000;

  width: 100%;
  padding: 1rem 3rem;
  border: none;
  border-radius: 999px;
  text-align: center;
  cursor: pointer;

  background: linear-gradient(135deg, #fee2e2, #fca5a5);
  color: #111;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.75rem;

  box-shadow: inset 0 1px 3px rgba(255,255,255,0.6), 0 4px 10px rgba(0,0,0,0.15);
  backdrop-filter: blur(6px);
  overflow: hidden;            /* keep shine/arrow contained */
  transition: all .25s ease-in-out;
}

.btn-submit-sticky:hover {
  background: linear-gradient(135deg, #fca5a5, #f87171);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.4), 0 6px 14px rgba(0,0,0,0.2);
}

/* Right arrow */
.btn-submit-sticky::after {
  content: "➜";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  opacity: 0.85;
  transition: transform .25s ease, opacity .25s ease;
}

.btn-submit-sticky:hover::after {
  transform: translate(4px, -50%);
  opacity: 1;
}

@media (min-width: 640px) {
  .btn-submit-sticky {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    width: 380px;
  }
}

/* TIP: everything below here must be valid CSS. 
   Remove any HTML comments like <!-- ... --> and any <style> tags. 
   If you want Tailwind utilities via @apply, that file must go through a Tailwind build. */
    /* License scan area styled to mimic driver's license (credit card dimensions) */
    .license-scan-area {
      width: 100%;
      aspect-ratio: 85.6 / 54;
      background: #000;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }


  /* --- inlined error style (no @apply) --- */
  .inline-error {
    display: block;
    margin-top: 0.25rem;  /* mt-1 */
    padding-left: 1rem;   /* pl-4 */
    color: #dc2626;       /* tailwind red-600 */
    font-size: 0.75rem;   /* text-xs */
  }

  /* visual highlight when wrapper gets .error-ring */
  .error-ring {
    box-shadow: 0 0 0 2px #dc2626; /* 2-px red ring */
    border-color: #dc2626;
  }







  /* 📱 56 × 56 px touch-friendly “action-icon” */
  .action-icon {
    width: 3.5rem;           /* = 56 px */
    height: 3.5rem;
    font-size: 2rem;         /* emoji ~32 px */
    padding: 0;              /* remove Tailwind p-2 */
    display: flex;           /* center the emoji */
    align-items: center;
    justify-content: center;
    border: 2px solid #2563eb;   /* blue-600 */
    border-radius: 0.5rem;       /* rounded-md */
    background: #ffffff;
    transition: background-color .15s;
  }
  .action-icon:hover { background: #eff6ff; } /* blue-50 */
 
 
  
..idcard {
  width: 320px;              /* Adjustable base width */
  height: calc(320px / 1.586);  /* Maintain card aspect ratio */
  object-fit: cover;
  border: 2px solid #333;
  border-radius: 8px;
  background-color: #fef3c7;   /* Optional: light amber background */
  margin: 1rem auto;
  display: block;
}
  
  video, canvas {
      width: 100%;
      max-width: 320px;
      border: 2px solid #333;
      margin-bottom: 1rem;
      border-radius: 8px;
    }



/* /* Override gradient header to a richer light-grey / silver tone */
.bg-gradient-to-r.from-indigo-600.to-violet-600 {
  background-image: linear-gradient(to right, #d1d5db, #9ca3af) !important; /* gray-300 → gray-400 */
  color: #111827 !important; /* dark gray text */
}








</style>