/* Container */
.fsg-wrap { padding: 1rem 1rem; }
.fsg-header { text-align: center; margin-bottom: 2rem; }
.fsg-header h1 { font-size: 2rem; margin: 0 0 .5rem; }
.fsg-header p { color: #475569; }

/* Grid */
.fsg-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 1100px; margin: 0 auto; }
@media (min-width: 992px){ .fsg-grid { grid-template-columns: 1fr 1fr; } }
.fsg-grid-2 { display:grid; grid-template-columns:1fr; gap: .75rem; }
@media (min-width: 640px){ .fsg-grid-2 { grid-template-columns:1fr 1fr; } }

/* Cards */
.fsg-card { background:#F9F9F9; border:1px solid #CCCCCC; border-radius: 16px; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.fsg-card.small { padding: 1rem; }
.fsg-card-title { font-size: 18px; margin: 0 0 1rem; display:flex; align-items:center; gap:.5rem; }

/* Fields */
.fsg-field { margin-bottom: 1rem; }
.fsg-field label { display:block; font-weight:600; margin-bottom:.35rem; }
.fsg-field input, .fsg-field select {
  width:100%; height:42px; border:1px solid #cbd5e1; border-radius:8px; padding:0 .75rem;
  background:#fff; color:#111827; outline:none;
}
.fsg-field small { color:#64748b; display:block; margin-top:.25rem; }

.fsg-days { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.4rem; }
.fsg-day { display:flex; align-items:center; gap: .4rem; }
.fsg-cap { text-transform: capitalize; }

/* Buttons */
.fsg-btn {
  appearance:none; border:0; border-radius:10px; padding:.75rem 1rem;
  background:#6d28d9; color:#fff; font-weight:600; width:100%; cursor:pointer;
}
.fsg-btn[disabled] { opacity:.6; cursor:not-allowed; }
.fsg-btn-secondary { background:#0ea5e9; width:auto; }

/* Alerts */
.fsg-alert { margin-top: .75rem; padding:.75rem; border-radius:8px; background:#fee2e2; color:#991b1b; }

/* Result blocks */
.fsg-stats { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1rem; }
.fsg-stat { background:#f1f5f9; border-radius:10px; padding:1rem; }
.fsg-stat-number { font-size:1.75rem; font-weight:800; }

.fsg-details h3 { margin-bottom:.5rem; }
.fsg-periods { max-height:350px; overflow:auto; display:flex; flex-direction:column; gap:.5rem; }
.fsg-period {
  display:flex; gap:.75rem; padding:.6rem; border-radius:8px; border-left:4px solid #10b981; background:#ecfdf5;
}
.fsg-period.fasting { border-color:#8b5cf6; background:#f5f3ff; }
.fsg-pill { min-width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#e0e7ff; font-weight:700; }

.fsg-center { text-align:center; margin-top:.75rem; }
.fsg-empty-icon { font-size:48px; opacity:.35; margin-bottom:.5rem; }
.fsg-info { max-width:900px; margin:2rem auto 0; }

/* Result Card - Center contents when empty */
#fsg-result-card {
  display: flex;
  align-items: center;   /* vertical centering */
  justify-content: center; /* horizontal centering */
  min-height: 350px;     /* ensure enough height for centering */
  position: relative;
}

/* Empty state content centered */
#fsg-empty {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Emoji icon larger & spaced */
.fsg-empty-icon {
  font-size: 64px;
  margin-bottom: 1rem;
}
.fsg-empty-icon img {
  width: 64px;
  height: 64px;
  opacity: 0.6;
}

/* When result is visible, reset layout */
#fsg-result {
  width: 100%;
}