/* ===== RESET & LAYOUT ==================================================== */
body{
  margin:0; padding:0;
  background:#e8f5e9;
  display:flex; justify-content:center; align-items:center;
  min-height:100vh;
  font-family:'Segoe UI',sans-serif;
}

/* ===== CALCULATOR CARD =================================================== */
.calculator{
  background:#fff;
  padding:2rem;
  border-radius:1rem;
  width:90%; max-width:500px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  position:relative;
}

/* UI blocată în timpul fetch-urilor */
.loading input,
.loading select,
.loading button{
  opacity:.5;
  pointer-events:none;
}

/* ===== HEADER ============================================================ */
.calc-header{
  display:flex; align-items:center; justify-content:center;
  color:#2e7d32;             /* accent verde */
  margin-bottom:1.5rem;
}
.calc-header .icon{
  width:2rem; height:2rem; fill:currentColor;
}
.calc-header .icon:first-child{ margin-right:.5rem; }
.calc-header .icon-right     { margin-left :.5rem; }
.calc-header h1{
  margin:0; font-size:1.75rem;
}

/* ===== FORM ELEMENTS ===================================================== */
.form-group{ margin-bottom:1rem; }
label{ display:block; margin-bottom:.3rem; color:#333; }
input,select{
  width:100%;
  padding:.6rem;
  border:1px solid #ccc;
  border-radius:.5rem;
  font-size:1rem;
  box-sizing:border-box;
}

/* ===== AUTOCOMPLETE DROPDOWN ============================================ */
.autocomplete{ position:relative; }
.suggestions{
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border:1px solid #ccc;
  max-height:150px; overflow-y:auto;
  list-style:none; margin:0; padding:0; z-index:1000;
}
.suggestions li{ padding:.5rem; cursor:pointer; }
.suggestions li:hover{ background:#eee; }

/* ===== BUTTON ============================================================ */
button{
  width:100%; padding:.8rem;
  background:#388e3c; border:none; border-radius:.5rem;
  color:#fff; font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
button:hover{ background:#2e7d32; }
.icon.small{
  width:1.4rem; height:1.4rem;
  margin-right:.5rem; fill:currentColor;
}

/* ===== SPINNER OVERLAY =================================================== */
.spinner{
  display:none;               /* ascuns implicit */
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.9);
  padding:1rem 1.5rem;
  border-radius:.5rem;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  color:#2e7d32;
  align-items:center;
}
.spinner .icon{ width:1.5rem; height:1.5rem; margin-right:.5rem; }

/* ===== MAP, RESULT, STOPS =============================================== */
.map{
  margin-top:1rem; height:300px;
  border-radius:.5rem;
  opacity:0; transition:opacity .5s ease-in-out;
}
.map.fade-in{ opacity:1; }

.result{
  margin-top:1rem;
  font-size:1rem;
  color:#1b5e20;
  text-align:center;
  opacity:0; transition:opacity .5s ease-in-out;
}
.result.fade-in{ opacity:1; }

/* evidenţiere sumă cost în lei */
.result .cost{ color:#0d47a1; font-weight:600; }

.stops{
  margin-top:1rem;
  opacity:0; transition:opacity .5s ease-in-out;
}
.stops.fade-in{ opacity:1; }
.stops h2{ margin-bottom:.5rem; }
.stops ul{ list-style:disc inside; padding-left:0; }
.stops li{ margin-bottom:.3rem; }

/* ===== SPINNER ANIMATION ================================================ */
.fa-spin{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }