/* Time Calculator — stili specifici */

/* ---- Accenti per separare visivamente i 3 tool ------------------------- */
.wg-panel--t1 {
  background: linear-gradient(180deg, #f7edd3, #f1e3c3);
  border-left: 8px solid var(--wg-gold);
}
.wg-panel--t1 .wg-panel-title { color: #9c6b13; border-bottom-color: var(--wg-gold); }

.wg-panel--t2 {
  background: linear-gradient(180deg, #edf0dc, #e3e8cb);
  border-left: 8px solid var(--wg-green);
}
.wg-panel--t2 .wg-panel-title { color: var(--wg-green); border-bottom-color: var(--wg-green); }

.wg-panel--t3 {
  background: linear-gradient(180deg, #f7e6d9, #f2d9c6);
  border-left: 8px solid var(--wg-blood);
}
.wg-panel--t3 .wg-panel-title { color: var(--wg-blood); border-bottom-color: var(--wg-blood); }


/* ---- Feature 1: lista tempi -------------------------------------------- */
.wg-time-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wg-time-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--wg-leather);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
}
.wg-time-item__op { color: var(--wg-blood); font-weight: 700; }
.wg-time-item__val { font-family: var(--font-mono); font-size: 1.05rem; }
.wg-time-item__human { color: var(--text-soft); font-size: 0.85rem; flex: 1 1 auto; }

.wg-total {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 0.75rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, var(--wg-wood-light), var(--wg-wood));
  color: var(--wg-parchment);
  border-radius: 8px;
  border: 2px solid var(--wg-gold);
}
.wg-total__label {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--wg-gold);
  font-size: 1rem;
}
.wg-total__value { font-size: 1.8rem; font-weight: 700; }
.wg-total__human { color: var(--wg-sand-dark) !important; }

/* ---- Feature 2: coordinate --------------------------------------------- */
.wg-coord-block {
  border: 1px dashed var(--wg-leather);
  border-radius: 8px;
  padding: 0.75rem 1rem 1rem;
  margin: 0 0 1rem;
}
.wg-coord-block legend {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--wg-wood);
  padding: 0 0.5rem;
  font-size: 1rem;
}

.wg-travel-result {
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface-2);
  border: 2px solid var(--wg-gold);
  border-radius: 8px;
}
.wg-travel-result__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
}
.wg-travel-result__row + .wg-travel-result__row { border-top: 1px dashed rgba(123,74,43,.35); }
.wg-travel-result__time { font-size: 1.6rem; color: var(--wg-blood); }

/* Feature 2 — orario di partenza (evidenziato in verde) */
.wg-depart-input-row { flex-wrap: wrap; }
.wg-depart-row {
  background: rgba(77, 106, 58, .14);
  border: 1px solid rgba(77, 106, 58, .45);
  border-radius: 6px;
  padding: .5rem .75rem !important;
  margin-top: .35rem;
}
.wg-depart-row > span:first-child {
  color: var(--wg-green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.wg-depart-row strong { font-size: 1.25rem; color: var(--wg-green); }

/* Rientro previsto: leggermente più piccolo + tasto copia */
.wg-return-dt { display: inline-flex; align-items: center; gap: .4rem; }
#ret-datetime { font-size: 1.25rem; color: var(--wg-blood); }

/* Riga "Rientro previsto" più evidente */
.wg-return-row {
  background: rgba(163, 50, 35, .10);
  border: 1px solid rgba(163, 50, 35, .35);
  border-radius: 6px;
  padding: .5rem .75rem !important;
  margin-top: .35rem;
}
.wg-return-row > span:first-child {
  color: var(--wg-blood);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}