/* reisgids-estimate.css — reusable trip-estimate + vehicle-picker widget for
 * guide articles. Relies on the design tokens each reisgids page defines in
 * :root (--ink, --paper, --line, --accent, --serif, --sans, --radius*).
 * Rendered by js/reisgids-estimate.js into <div class="rg-estimate">.
 */

.rg-estimate{
  --rg-gap:1.25rem;
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.5rem);
  display:flex;
  flex-direction:column;
  gap:var(--rg-gap);
}

.rg-est-head{display:flex;flex-direction:column;gap:.35rem}
.rg-est-eyebrow{
  font-family:var(--serif);font-size:.7rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:.6rem;
}
.rg-est-route{
  font-family:var(--serif);font-weight:500;letter-spacing:-0.02em;
  font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.15;color:var(--paper);
}
.rg-est-route .rg-arrow{color:var(--accent);margin:0 .35rem}

/* Distance + time readout */
.rg-est-metrics{
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;
  padding:1rem 0;border-top:1px solid rgba(244,244,242,.12);
  border-bottom:1px solid rgba(244,244,242,.12);
}
.rg-metric{display:flex;flex-direction:column;gap:.2rem}
.rg-metric .rg-metric-lbl{
  font-family:var(--serif);font-size:.62rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(244,244,242,.5);
}
.rg-metric .rg-metric-val{
  font-family:var(--serif);font-size:1.4rem;font-weight:500;letter-spacing:-0.02em;color:var(--paper);
}
.rg-metric .rg-metric-val.rg-delayed{color:var(--accent)}
.rg-corridor-note{
  display:flex;align-items:flex-start;gap:.55rem;
  font-size:.78rem;line-height:1.5;color:rgba(244,244,242,.7);
}
.rg-corridor-note .mi{color:var(--accent);font-size:1.05rem;flex-shrink:0;margin-top:1px}

/* Sliders */
.rg-est-controls{display:flex;flex-direction:column;gap:1rem}
.rg-tile{
  background:rgba(244,244,242,.05);
  border:1px solid rgba(244,244,242,.1);
  border-radius:var(--radius);
  padding:1rem 1.15rem;
}
.rg-tile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.rg-tile-lbl{
  font-family:var(--serif);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(244,244,242,.7);
  display:flex;align-items:center;gap:.5rem;
}
.rg-tile-lbl .mi{font-size:1rem;color:var(--accent)}
.rg-tile-count{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--paper);min-width:1.5ch;text-align:right}
.rg-range{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;
  outline:none;cursor:pointer;background:rgba(244,244,242,.18);accent-color:var(--accent);
}
.rg-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;background:var(--accent);
  border-radius:50%;cursor:pointer;transition:transform .15s;border:3px solid var(--ink);
}
.rg-range:active::-webkit-slider-thumb{transform:scale(1.18)}
.rg-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(227,6,19,.4)}
.rg-range::-moz-range-thumb{
  width:22px;height:22px;background:var(--accent);border:3px solid var(--ink);
  border-radius:50%;cursor:pointer;
}

/* Vehicle picker */
.rg-veh-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.rg-veh{
  position:relative;display:flex;flex-direction:column;gap:.3rem;text-align:left;
  background:rgba(244,244,242,.05);border:1.5px solid rgba(244,244,242,.12);
  border-radius:var(--radius);padding:.85rem .9rem;cursor:pointer;
  transition:border-color .2s,background .2s,transform .15s;color:var(--paper);
}
.rg-veh:hover{border-color:rgba(244,244,242,.4);transform:translateY(-2px)}
.rg-veh.rg-active{border-color:var(--accent);background:rgba(227,6,19,.12)}
.rg-veh.rg-disabled{opacity:.4;pointer-events:none}
.rg-veh-type{font-family:var(--serif);font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,244,242,.5)}
.rg-veh-name{font-family:var(--serif);font-size:.95rem;font-weight:600;color:var(--paper);line-height:1.1}
.rg-veh-cap{font-size:.72rem;color:rgba(244,244,242,.6);display:flex;align-items:center;gap:.5rem}
.rg-veh-cap .mi{font-size:.85rem;vertical-align:-1px}
.rg-veh-pick{
  position:absolute;top:.55rem;right:.6rem;font-size:.5rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;font-family:var(--serif);color:var(--accent);
  background:rgba(227,6,19,.15);padding:.18rem .45rem;border-radius:9999px;display:none;
}
.rg-veh.rg-active .rg-veh-pick{display:inline-block}

/* Book CTA */
.rg-est-foot{display:flex;flex-direction:column;gap:.65rem}
.rg-book-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  background:var(--accent);color:#fff;padding:1.05rem 1.75rem;border-radius:9999px;
  font-family:var(--serif);font-weight:600;font-size:1rem;letter-spacing:.01em;
  cursor:pointer;transition:background .2s,transform .15s;width:100%;border:none;
}
.rg-book-btn:hover{background:var(--accent-dark);transform:translateY(-2px)}
.rg-book-btn .rg-arrow{transition:transform .2s}
.rg-book-btn:hover .rg-arrow{transform:translateX(4px)}
.rg-book-hint{font-size:.74rem;color:rgba(244,244,242,.45);text-align:center;line-height:1.5}

@media (max-width:560px){
  .rg-veh-row{grid-template-columns:1fr}
  .rg-est-metrics{gap:.75rem 1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .rg-veh,.rg-book-btn,.rg-range::-webkit-slider-thumb{transition:none}
}