/* Japanese Holiday Finder – front-end styles */
.jhf-container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 16px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  box-sizing: border-box;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
.jhf-form {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.jhf-row { grid-column: span 6; display: flex; flex-direction: column; gap: 6px; }
.jhf-actions { grid-column: span 12; display: flex; justify-content: flex-start; }
.jhf-form label { font-size: 13px; color: #334155; font-weight: 600; }
.jhf-form select {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
}
.jhf-btn {
  appearance: none;
  border: none;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  background: linear-gradient(180deg, #4f46e5, #4338ca);
  color: #fff;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease;
  box-shadow: 0 6px 16px rgba(79,70,229,.3);
}
.jhf-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(79,70,229,.35); }

.jhf-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.jhf-card {
  grid-column: span 12;
  padding: 16px;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  background: linear-gradient(180deg,#ffffff,#fbfbfe);
}
@media (min-width: 700px) {
  .jhf-card { grid-column: span 6; }
}
@media (min-width: 980px) {
  .jhf-card { grid-column: span 4; }
}
.jhf-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jhf-date { font-weight: 700; color: #0f172a; }
.jhf-badge {
  font-size: 12px; padding: 4px 8px; border-radius: 999px;
  background: #ecfeff; color: #0891b2; border: 1px solid #a5f3fc;
}
.jhf-title { margin: 4px 0 6px; font-size: 18px; color: #111827; }
.jhf-kanji { font-weight: 800; }
.jhf-romaji { color: #6b7280; font-weight: 600; }
.jhf-meaning { color: #334155; margin: 8px 0; }
.jhf-list { padding-left: 18px; margin: 0; color: #334155; }
.jhf-subtext { font-size: 12px; color: #64748b; }
.jhf-loading, .jhf-empty, .jhf-error { padding: 18px; text-align: center; color: #475569; }