/* 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);}
}

#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;
    }



/* in global CSS or Tailwind @layer utilities */
.btn-nav {
  @apply block w-full text-left px-4 py-3
          hover:bg-gray-100 dark:hover:bg-gray-700
          rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
}




</style>