/* HistoricJackpot — components.css */

.card{
  background:#fff;
  border: 1px solid #DDD5C0;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(13,59,68,0.06);
}
.card h3{ margin-top:0; }
.tag{
  display:inline-block;
  font-family: var(--font-head);
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  background: var(--color-surface);
  color: var(--color-text-dark);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom:0.6rem;
}
.tag.landmark{ background: var(--color-accent); color:#171C1B; }
.tag.viewpoint{ background: var(--color-success); }
.tag.historical-site{ background: var(--color-bg); }

/* Trail motif */
.trail-divider{
  display:block;
  width:100%;
  height: 28px;
  margin: 1rem 0;
}

/* Route builder form */
.rb-form{
  background: var(--color-surface);
  color: var(--color-text-dark);
  border-radius: 12px;
  padding: 1.75rem;
}
.rb-form fieldset{
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 1.25rem;
}
.rb-form legend{
  font-family: var(--font-head);
  font-weight:700;
  padding: 0 0.5rem;
  color: var(--color-accent);
}
.rb-form label{
  display:flex;
  align-items:flex-start;
  gap:0.6rem;
  margin: 0.5rem 0;
  cursor:pointer;
}
.rb-form input[type="radio"]{ margin-top:0.3rem; }
.rb-actions{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }

.btn{
  font-family: var(--font-head);
  font-weight:700;
  font-size:1rem;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  border: 2px solid var(--color-accent);
  background: var(--color-accent);
  color:#171C1B;
  cursor:pointer;
}
.btn:hover, .btn:focus{ background:#c26a3c; }
.btn.secondary{
  background: transparent;
  color: var(--color-text-dark);
}
.btn.secondary:hover, .btn.secondary:focus{ background: rgba(255,255,255,0.12); }

#route-result{
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  border: 1px solid #DDD5C0;
}
.route-summary{
  font-family: var(--font-head);
  font-weight:700;
  color: var(--color-bg);
  font-size:1.1rem;
  margin-bottom:1rem;
}
.route-list{
  list-style:none;
  margin:0;
  padding:0;
}
.route-list li{
  display:flex;
  gap:0.9rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed #CFC7AE;
}
.route-list li:last-child{ border-bottom:none; }
.stop-num{
  flex-shrink:0;
  width:2rem;
  height:2rem;
  border-radius:50%;
  background: var(--color-bg);
  color: var(--color-text-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-head);
  font-weight:700;
}
.transfer-note{
  font-size:0.85rem;
  color:#555;
  margin: 0.2rem 0 0 2.9rem;
}
.rb-note{
  font-size:0.9rem;
  color: var(--color-warning);
  margin-top:0.2rem;
}

.static-scenarios{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap:1.25rem;
  margin-top:1.5rem;
}
.static-scenarios .card ol{ padding-left:1.2rem; }

details.faq-item{
  background:#fff;
  border:1px solid #DDD5C0;
  border-radius:8px;
  padding: 0.9rem 1.2rem;
  margin-bottom:0.9rem;
}
details.faq-item summary{
  font-family: var(--font-head);
  font-weight:700;
  cursor:pointer;
  color: var(--color-bg);
}
details.faq-item p{ margin-bottom:0; }

.helpline-list{
  list-style:none;
  padding:0;
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}
.helpline-list li{
  background:#fff;
  border-left: 4px solid var(--color-success);
  border-radius:6px;
  padding:1rem 1.2rem;
}

table.data-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}
table.data-table th, table.data-table td{
  border:1px solid #DDD5C0;
  padding:0.6rem 0.8rem;
  text-align:left;
}
table.data-table th{ background: var(--color-bg); color: var(--color-text-dark); }