/* Land Registry frontend (shortcodes) */

/* Map risk flags + legend */
.lpr-flag-pin{display:inline-block;color:#fff;font-size:15px;line-height:1;padding:1px 3px;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.lpr-legend-bar{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:13px;color:#3d3a33}
.lpr-legend-bar .lg{display:flex;align-items:center;gap:6px}
.lpr-legend-bar .lg i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* Parcels: 3 risk columns + search */
.lpr-parcels{margin:8px 0}
.lpr-parcels-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.lpr-parcels-tools #lpr-search{flex:1;min-width:200px;padding:12px 14px;border:1px solid #cfc8b6;border-radius:8px;font-size:16px;min-height:46px;box-sizing:border-box}
.lpr-parcels-count{font-size:13px;color:#6b6656}
.lpr-risk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lpr-risk-col{background:#f5f2ea;border:1px solid #e0d9c6;border-radius:10px;padding:16px}
.lpr-risk-col h3{margin:0 0 12px;font-size:15px;display:flex;align-items:center;gap:8px;color:#14342B}
.lpr-risk-col h3 small{font-weight:400;color:#8a8577;font-size:12px}
.rflag{width:12px;height:12px;border-radius:3px;display:inline-block}
.rflag.red{background:#C0392B}.rflag.yellow{background:#E8A317}.rflag.green{background:#22A06B}
.lpr-risk-list{display:flex;flex-direction:column;gap:10px}
.lpr-pcard{display:block;background:#fff;border:1px solid #e7e0cf;border-radius:8px;padding:12px 14px;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
.lpr-pcard:hover{border-color:#B8752E;transform:translateY(-1px)}
.lpr-pcard-top{display:flex;justify-content:space-between;align-items:baseline}
.lpr-pcard-top strong{color:#14342B;font-size:15px}
.lpr-pcard-alt{font-size:12px;color:#2E5E8C;font-weight:600}
.lpr-pcard-gps{font-size:12px;color:#2E5E8C;margin:4px 0}
.lpr-pcard-meta{font-size:11px;color:#8a8577}
.lpr-empty{color:#a49f90;font-style:italic;font-size:13px}
.lpr-more{margin-top:12px;width:100%;padding:8px;border:1px solid #cfc8b6;background:#fff;border-radius:8px;cursor:pointer;font-size:13px;color:#14342B}
.lpr-more:hover{background:#f0ead9}
@media(max-width:820px){.lpr-risk-grid{grid-template-columns:1fr}}

/* Signup form + capture */
.lpr-signup{max-width:520px;margin:0 auto}
.lpr-step h3{color:#14342B;margin:0 0 6px}
.lpr-hint{color:#6b6656;font-size:14px;margin:0 0 18px}
.lpr-step label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#14342B;margin-bottom:14px}
.lpr-step input,.lpr-step select{padding:12px 12px;border:1px solid #cfc8b6;border-radius:8px;font-size:16px;font-weight:400;min-height:46px;box-sizing:border-box}
.lpr-btn{padding:13px 20px;border-radius:8px;border:1.5px solid #14342B;background:#fff;color:#14342B;font-size:16px;cursor:pointer;min-height:48px;-webkit-tap-highlight-color:transparent}
.lpr-btn.primary{background:#14342B;color:#fff}
.lpr-btn.success{background:#22A06B;border-color:#22A06B;color:#fff}
.lpr-btn:disabled{opacity:.6;cursor:default}
.lpr-capture-readout{background:#0f1a24;color:#8FBEFF;font-family:ui-monospace,monospace;font-size:14px;padding:14px;border-radius:8px;margin-bottom:14px}
.lpr-capture-readout small{color:#7B8FA1}
.lpr-captured{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.lpr-cap-row{display:flex;justify-content:space-between;gap:10px;font-family:ui-monospace,monospace;font-size:12px;padding:8px 12px;background:#f0ead9;border-radius:6px;color:#3d3a33}
.lpr-capture-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Region search control on the map */
.lpr-region-search{background:#fff;padding:4px;border-radius:8px;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.lpr-region-search input{border:1px solid #cfc8b6;border-radius:6px;padding:7px 10px;font-size:14px;width:190px;outline:none}
.lpr-region-search input:focus{border-color:#14342B}

/* Storm drain markers */
.lpr-drain-arrow{color:#1565C0;font-size:13px;line-height:1;text-align:center}
.lpr-drain-arrow span{display:inline-block}
.lpr-inlet{color:#1565C0;font-size:14px;text-shadow:0 0 2px #fff}
.lpr-outfall{color:#0D3C78;font-size:18px;text-shadow:0 0 3px #fff}
.lpr-drain-node{text-align:center}

/* Trunk drain arrow + discharge markers */
.lpr-drain-arrow.trunk{color:#0D47A1;font-size:15px}
.lpr-discharge{font-size:18px;text-shadow:0 0 3px #fff}
.lpr-discharge.sea{color:#0E7C86}
.lpr-discharge.river{color:#0D47A1}

/* ---- Friendly map navigation & scroll handling ---- */
#lpr-map{position:relative}
.lpr-map-embed{height:520px;border-radius:12px;overflow:hidden}

/* Scroll hint overlay: appears when scrolling over an inactive map */
.lpr-map-hint{
  position:absolute;inset:0;z-index:450;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,52,43,0);
  pointer-events:none;opacity:0;transition:opacity .2s ease;
}
.lpr-map-hint.show{opacity:1;background:rgba(20,52,43,.35)}
.lpr-map-hint span{
  background:rgba(20,52,43,.92);color:#fff;
  font-size:14px;font-weight:500;padding:10px 18px;border-radius:24px;
  box-shadow:0 2px 12px rgba(0,0,0,.25);letter-spacing:.2px;
}
/* When active, a subtle ring shows the map is capturing scroll */
#lpr-map.lpr-map-active{box-shadow:0 0 0 2px #2E5E8C inset}

/* Home / reset-view button matches Leaflet's zoom bar */
.lpr-home-ctrl a{
  font-size:18px;line-height:30px;font-weight:400;text-align:center;
  display:block;width:30px;height:30px;color:#14342B;text-decoration:none;
}
.lpr-home-ctrl a:hover{background:#f4f4f4}

/* Larger, easier-to-tap zoom controls */
.leaflet-touch .leaflet-bar a{width:34px;height:34px;line-height:34px;font-size:20px}
.leaflet-bar a{transition:background .12s}

/* Region search: give it breathing room from the zoom bar */
.lpr-region-search{margin-top:6px !important}

@media (max-width:600px){
  .lpr-map-hint span{font-size:13px;padding:8px 14px}
  .lpr-region-search input{width:150px}
}

/* ---- Per-city maps (regional capitals) ---- */
.lpr-city-maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px;margin:8px 0}
.lpr-city-card{background:#fff;border:1px solid #e0d9c6;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(20,52,43,.06)}
.lpr-city-head{display:flex;align-items:baseline;justify-content:space-between;padding:12px 16px;background:#14342B;color:#fff}
.lpr-city-head strong{font-size:16px}
.lpr-city-head span{font-size:12px;color:#cfe0d8}
.lpr-city-map{height:280px;width:100%}
.lpr-city-note{padding:10px 16px;font-size:13px;color:#6b6656;border-top:1px solid #eee5d3}
@media(max-width:560px){.lpr-city-maps{grid-template-columns:1fr}}

/* ---- Signup validation & GPS accuracy UI ---- */
.lpr-signup-errors{background:#FCEBEB;border:1px solid #E24B4A;color:#791F1F;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px}
.lpr-signup-errors div{margin:2px 0}
.lpr-field-hint{display:block;font-weight:400;color:#8a8577;font-size:12px;margin-top:4px}
.lpr-acc{font-weight:600}
.lpr-acc.green{color:#1f8a53}
.lpr-acc.yellow{color:#a06a12}
.lpr-acc.red{color:#C0392B}
.lpr-acc-hint{color:#a06a12;font-weight:400}
.lpr-capture-readout{min-height:52px}

/* ============================================================
   MOBILE RESPONSIVE
   Owners register land on-site from phones, so touch targets are
   large, inputs are 16px (no iOS auto-zoom), and layouts stack.
   ============================================================ */

/* Tablets and below */
@media (max-width:820px){
  .lpr-risk-grid{grid-template-columns:1fr;gap:12px}
  .lpr-parcels-tools{gap:10px}
  #lpr-map{height:440px !important}
}

/* Phones */
@media (max-width:600px){
  /* Map: shorter but still usable; controls stay reachable */
  #lpr-map{height:380px !important;border-radius:10px}
  .lpr-legend-bar{gap:10px 14px;font-size:12px}

  /* Parcels tools stack: full-width search, count below */
  .lpr-parcels-tools{flex-direction:column;align-items:stretch;gap:8px}
  .lpr-parcels-tools #lpr-search{width:100%;min-width:0}
  .lpr-parcels-count{font-size:12px}
  .lpr-risk-col{padding:14px}
  .lpr-pcard{padding:14px}
  .lpr-pcard-top strong{font-size:16px}

  /* Signup: full width, generous spacing for outdoor tapping */
  .lpr-signup{max-width:100%}
  .lpr-step label{font-size:14px;margin-bottom:16px}
  .lpr-capture-actions{flex-direction:column;gap:10px}
  .lpr-capture-actions .lpr-btn{width:100%}
  .lpr-btn{width:100%}
  #lpr-step-details .lpr-btn{width:100%}
  .lpr-cap-row{font-size:12px;gap:6px;flex-wrap:wrap}
  .lpr-cap-row span:first-child{flex:1 0 100%;font-weight:600;color:#14342B}
  .lpr-capture-readout{font-size:13px}

  /* City maps: single column, comfortable height */
  .lpr-city-maps{grid-template-columns:1fr;gap:16px}
  .lpr-city-map{height:260px}

  /* Region search control sits neatly, doesn't overrun the map */
  .lpr-region-search input{width:150px;font-size:16px}

  /* Bigger tap targets on Leaflet controls */
  .leaflet-touch .leaflet-bar a{width:40px;height:40px;line-height:40px;font-size:22px}
  .lpr-home-ctrl a{width:40px;height:40px;line-height:40px}
}

/* Small phones */
@media (max-width:380px){
  #lpr-map{height:340px !important}
  .lpr-city-map{height:220px}
  .lpr-region-search input{width:120px}
  .lpr-map-hint span{font-size:12px;padding:8px 12px;text-align:center;line-height:1.3}
  .lpr-step h3{font-size:18px}
}

/* Landscape phones: keep the map from eating the whole screen */
@media (max-height:500px) and (orientation:landscape){
  #lpr-map{height:300px !important}
}

/* Respect users who reduce motion */
@media (prefers-reduced-motion:reduce){
  .lpr-pcard{transition:none}
}