/* GPX Routeplanner — front-end widget styling.
   Alles is genest onder .gpxrp-wrap zodat het thema van de site niet wordt
   overschreven (in tegenstelling tot de originele losse HTML-pagina, die de
   hele <body> mocht overnemen). */

.gpxrp-wrap{
  --gpxrp-red:#e2001a;
  --gpxrp-red-dark:#b3001b;
  --gpxrp-panel-bg:#ffffff;
  --gpxrp-page-bg:#f5f5f5;
  --gpxrp-border:#dddddd;
  --gpxrp-text:#1f2937;
  --gpxrp-muted:#6b7280;
  --gpxrp-accent:#e2001a;

  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--gpxrp-text);
  background:var(--gpxrp-page-bg);
  border:1px solid var(--gpxrp-border);
  border-radius:10px;
  overflow:hidden;
  height:75vh;
  min-height:520px;
  max-height:820px;
}
.gpxrp-wrap *{box-sizing:border-box;}

/* Grid met benoemde gebieden: op desktop een linkerkolom (top+bottom
   gestapeld) naast de kaart; op mobiel alles onder elkaar met de kaart
   direct onder de padkeuze (stap 1), zodat je hem niet hoeft weg te
   scrollen om te vinden. De volgorde in de HTML zelf (top, kaart, bottom)
   volgt daarmee meteen de mobiele weergave. */
.gpxrp-wrap .gpxrp-layout{
  display:grid;
  height:100%;
  min-height:0;
  grid-template-columns:340px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "top    map"
    "bottom map";
}
.gpxrp-wrap .gpxrp-panel-top{
  grid-area:top;
  background:var(--gpxrp-panel-bg);
  border-right:1px solid var(--gpxrp-border);
  border-bottom:1px solid var(--gpxrp-border);
  padding:18px;
  overflow-y:auto;
}
.gpxrp-wrap .gpxrp-panel-bottom{
  grid-area:bottom;
  background:var(--gpxrp-panel-bg);
  border-right:1px solid var(--gpxrp-border);
  padding:18px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:0;
}
.gpxrp-wrap .gpxrp-step{
  border:1px solid var(--gpxrp-border);
  border-radius:10px;
  padding:14px;
  background:#fafbfc;
}
.gpxrp-wrap .gpxrp-step.gpxrp-disabled{
  opacity:0.5;
  pointer-events:none;
}
.gpxrp-wrap .gpxrp-step-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14px;
  margin-bottom:10px;
}
.gpxrp-wrap .gpxrp-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--gpxrp-red);
  color:#fff;
  font-size:12px;
  flex-shrink:0;
}
.gpxrp-wrap select, .gpxrp-wrap input[type=text]{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--gpxrp-border);
  border-radius:6px;
  font-size:14px;
  background:#fff;
  color:var(--gpxrp-text);
}
.gpxrp-wrap .gpxrp-file-row{
  margin-top:8px;
}
.gpxrp-wrap .gpxrp-hint{
  font-size:12px;
  color:var(--gpxrp-muted);
  margin-top:8px;
  line-height:1.4;
}
.gpxrp-wrap .gpxrp-km-display{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:12px;
  padding:10px 12px;
  background:#fdecee;
  border:1px solid #f3c2c8;
  border-radius:8px;
}
.gpxrp-wrap .gpxrp-km-value{
  font-size:24px;
  font-weight:800;
  color:var(--gpxrp-red-dark);
}
.gpxrp-wrap .gpxrp-km-label{
  font-size:13px;
  color:var(--gpxrp-muted);
}
.gpxrp-wrap .gpxrp-total-line{
  font-size:12px;
  color:var(--gpxrp-muted);
  margin-top:6px;
}
.gpxrp-wrap button{
  width:100%;
  padding:10px 12px;
  border:none;
  border-radius:6px;
  background:var(--gpxrp-red);
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.gpxrp-wrap button:hover:not(:disabled){background:var(--gpxrp-red-dark);}
.gpxrp-wrap button:disabled{
  background:#c6cdd6;
  cursor:not-allowed;
}
.gpxrp-wrap button.gpxrp-secondary{
  background:#fff;
  color:var(--gpxrp-red);
  border:1px solid var(--gpxrp-red);
}
.gpxrp-wrap button.gpxrp-secondary:hover:not(:disabled){background:#fdecee;}
.gpxrp-wrap .gpxrp-status-msg{
  font-size:13px;
  margin-top:8px;
  min-height:16px;
}
.gpxrp-wrap .gpxrp-status-msg.ok{color:#1a7f37;}
.gpxrp-wrap .gpxrp-status-msg.err{color:#b3001b;}
.gpxrp-wrap .gpxrp-map{
  grid-area:map;
  min-width:0;
  min-height:0;
  height:100%;
}
.gpxrp-wrap .leaflet-popup-content{font-size:13px;}
.gpxrp-wrap .gpxrp-demo-note{
  font-size:11.5px;
  background:#fff7e6;
  border:1px solid #f0d9a6;
  color:#8a6116;
  padding:8px 10px;
  border-radius:6px;
  line-height:1.4;
}

@media (max-width: 640px){
  .gpxrp-wrap{ height:auto; min-height:0; max-height:none; }
  .gpxrp-wrap .gpxrp-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "top"
      "map"
      "bottom";
    height:auto;
  }
  .gpxrp-wrap .gpxrp-panel-top,
  .gpxrp-wrap .gpxrp-panel-bottom{
    width:100%;
    border-right:none;
    max-height:none;
    overflow-y:visible;
  }
  .gpxrp-wrap .gpxrp-panel-top{ border-bottom:1px solid var(--gpxrp-border); }
  .gpxrp-wrap .gpxrp-map{ height:60vh; min-height:340px; }
}

/* Knoppenbalk onder de kaart (Opnieuw beginnen / Installeer als app).
Op desktop staat de balk rechts onder de kaart; het onderste paneel
loopt links door. Op mobiel komt de balk tussen kaart en stap 2. */
.gpxrp-wrap .gpxrp-layout{
grid-template-rows:auto 1fr auto;
grid-template-areas:
"top map"
"bottom map"
"bottom actions";
}
.gpxrp-wrap .gpxrp-map-actions{
grid-area:actions;
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:8px;
padding:10px 12px;
background:var(--gpxrp-panel-bg);
border-top:1px solid var(--gpxrp-border);
}
.gpxrp-wrap .gpxrp-map-actions button{
width:auto;
flex:0 1 220px;
}
.gpxrp-wrap .gpxrp-install-help{
flex:1 1 100%;
font-size:12.5px;
line-height:1.4;
color:var(--gpxrp-muted);
}
@media (max-width: 640px){
.gpxrp-wrap .gpxrp-layout{
grid-template-rows:auto auto auto auto;
grid-template-areas:
"top"
"map"
"actions"
"bottom";
}
.gpxrp-wrap .gpxrp-map-actions{ border-bottom:1px solid var(--gpxrp-border); }
.gpxrp-wrap .gpxrp-map-actions button{ flex:1 1 0; }
}
@media (max-width: 420px){
.gpxrp-wrap .gpxrp-map-actions{ flex-direction:column; justify-content:flex-start; }
.gpxrp-wrap .gpxrp-map-actions button{ flex:none; width:100%; }
.gpxrp-wrap .gpxrp-install-help{ flex:none; }
}