/* IEP Calculator styles (clean, complete) */
.iep-card {
  max-width: 920px;
  margin: 24px auto;
  padding: 22px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #fff;
  color: #222;
  box-sizing: border-box;
}

.iep-card h2 {
  margin: 0 0 24px 0; /* space below heading */
  font-size: 35px;
  line-height: 1.1;
}

.iep-card p.lead {
  margin: 0 0 24px 0; /* space below subheading before the input block */
  color: #444;
  font-size: 17px;
}

.iep-row { margin-bottom: 14px; }

/* Emphasized label */
.iep-row label[for="iep-month"] {
  font-size: 27px;
  font-weight: 700;
  color: #2b2b2b;
  display: block;
  margin-bottom: 8px;
  line-height: 1.05;
}

/* Other labels */
.iep-row label:not([for="iep-month"]) {
  font-size: 22px;
  color: #2b2b2b;
  display: block;
  margin-bottom: 6px;
}

/* Triple inputs */
.iep-triple {
  display: flex;
  gap: 8px;
  align-items: center;
}
.iep-triple select,
.iep-triple input[type="number"] {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  box-sizing: border-box;
}

/* widths */
.iep-month { flex: 0 0 42%; }
.iep-day   { flex: 0 0 18%; }
.iep-year  { flex: 0 0 32%; }

/* calendar input */
.iep-card input[type="date"] {
  width: 100%;
  padding: 10px;
  font-size: 22px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  box-sizing: border-box;
}

/* actions */
.iep-actions { display:flex; gap:10px; margin-top: 8px; }
.iep-card button {
  background: #0073aa;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 17px;
}
.iep-card button.secondary { background: #e9e9e9; color: #222; }

/* Add 24px spacing above the Calculate/Reset buttons */
.iep-actions {
  display: flex;
  gap: 10px;
  margin-top: 44px; /* increased from 8px to 44px */
}

/* result */
.iep-result {
  margin-top: 14px;
  padding: 12px;
  border-radius: 6px;
  background: #f7f9fb;
  border: 1px solid #e6eef6;
  font-size: 17px;
  display: none;
}

.iep-result-top { display:block; }
.iep-result-label { font-size: 22px; font-weight:600; color:#222; margin-bottom:8px; }
.iep-range { font-size: 22px; font-weight:600; color:#222; margin-bottom:8px; }
.iep-start { color: #0073aa; font-weight: 600; }
.iep-end { color: #b00020; font-weight: 600; }

.iep-small { font-size:15px; color:#444; margin-top:8px; }
.iep-error { color:#b00020; font-size:15px; margin-top:8px; display:none; }

/* red first-of-month button */
.iep-first-link {
  display:inline-block;
  margin-top:10px;
  color:#fff;
  background:#b00020;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size:15px;
  text-decoration: none;
}

/* modal */
.iep-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.iep-modal {
  background: #fff;
  border-radius: 8px;
  max-width: 720px;
  width: 92%;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.iep-modal h3 { margin: 0 0 8px 0; font-size: 20px; }
.iep-modal p { margin: 8px 0; color:#333; font-size:15px; }
.iep-modal .iep-modal-actions { text-align: right; margin-top: 12px; }
.iep-modal button { background: #0073aa; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 15px; }

@media (max-width:640px) {
  .iep-card { padding:12px; }
  .iep-card h2 { font-size:26px; }
  .iep-range, .iep-result-label { font-size:20px; }
  .iep-triple { flex-direction:column; gap:6px; }
  .iep-month, .iep-day, .iep-year { flex: 1 1 auto; width:100%; }
  .iep-modal { padding: 12px; }
}

@media (min-width:641px) {
  #iep-date {
    font-size: 18px !important;
    padding: 12px 14px !important;
    height: 46px !important;
    box-sizing: border-box !important;
  }
}

/* Larger desktop date input — keeps mobile behavior */
@media (min-width: 641px) {
  /* Target the calendar input */
  #iep-date {
    font-size: 18px;      /* larger text inside the control */
    padding: 12px 14px;   /* larger hit area */
    height: 46px;         /* increases visible control height */
    box-sizing: border-box;
  }

  /* If browser shows a calendar icon inside input, give extra right padding */
  #iep-date::-webkit-calendar-picker-indicator {
    transform: scale(1.1);
    margin-right: 4px;
  }
}