/* 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:#18181B; border:1px solid #334155; 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: 22px; color:#fff; font-weight: 700; 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; color: #fff; }
.fsg-field input, .fsg-field select {
  width:100%; height:42px; border:1px solid #cbd5e1; border-radius:8px; padding:0 .75rem;
  background:#18181B; color:#fff; 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:#18181B; border-radius:10px; padding:1rem; }
.fsg-stat-number { font-size:1.75rem; font-weight:800; }

.fsg-stat h3 {
    color: #fff;
	font-weight: 700;
}
#fsg-daily-avg {
	background:#2D1823;
}
p.fsg-stat-number {
    color: #818CF8;
}
.fsg-details h3 {
    color: #fff;
    font-weight: 700;
}

.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:100; margin-bottom:.5rem; }
.fsg-empty-icon img {
    opacity: 100;
}
.fsg-info { max-width:900px; margin:2rem auto 0; }
div#fsg-empty h3 {
    color: #fff;
}
div#fsg-empty p {
    color: #fff;
}

/* 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%;
}



.fsg-btn {
        width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    border: none !important;
    background: #4F46E5 !important;
    color: #fff !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 6px;
    transition: transform .03s ease, box-shadow .2s ease !important;
    box-shadow: 0 6px 18px rgba(91, 124, 250, .35);
}

.fsg-period.fasting {
	margin-right: 10px;
}
.fsg-period {
	margin-right: 10px;
}

.fsg-day input {
	    display: block;
    width: auto;
}
.fsg-field label {
	  display: flex;
}
#fsg-daily-avg p {
    color: #F472B6;
}


/* Make native icons white */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Optional: resize the icons */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
}