/* ===== HH Modal Form (polished) ===== */

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff;
  color:#0f172a;
}

/* container */
.hh-modal-wrap{
  max-width: 680px;
  margin: 0 auto;
  padding: 18px 16px 26px;
}

.hh-modal-title{
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
  margin: 6px 0 6px;
  color:#0b1220;
}

.hh-modal-sub{
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 14px;
  color:#334155;
}

/* section card */
.hh-modal-card{
margin-top: 20px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(0, 0, 0, .74);
    background: rgba(0, 0, 0, .02);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 14px;
    padding: 10px 12px;

}

.hh-modal-card-title{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color:#111827;
  margin: 0 0 10px;
}

/* field block spacing */
.hh-field{
  margin-top: 14px;
}
.hh-field:first-child{ margin-top: 0; }

/* labels */
.hh-label{
  display:block;
  font-weight: 800;
  font-size: 13px;
  margin: 0 0 8px;
  color:#111827;
}

/* inputs */
.hh-input{
  width:100%;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  box-sizing:border-box;
  font-size: 14px;
  line-height: 1.25;
  background:#fff;
  color:#111827;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.hh-input:focus{
  outline:none;
  border-color: rgba(31,95,191,.70);
  box-shadow: 0 0 0 4px rgba(31,95,191,.14);
}

textarea.hh-input{
  min-height: 96px;
  resize: vertical;
}

/* section headings */
.hh-section{
  margin: 18px 0 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color:#111827;
}

/* disclaimer list */
.hh-list{
  margin: 0;
  padding-left: 18px;
}
.hh-list li{
  margin: 6px 0;
  color:#334155;
  line-height: 1.45;
  font-size: 13px;
}

/* RadioButtonList styling */
.hh-rbl{
  margin-top: 6px;
}
.hh-rbl table{
  width:auto;
  border-collapse: collapse;
}
.hh-rbl td{
  padding-right: 14px;
  padding-bottom: 6px;
}
.hh-rbl input{
  margin-right: 6px;
  transform: translateY(1px);
}
.hh-rbl label{
  font-size: 13px;
  color:#111827;
  font-weight: 700;
}

/* checkbox */
.hh-check{
  display:block;
  margin-top: 8px;
}
.hh-check input{
  margin-right: 8px;
  transform: translateY(1px);
}
.hh-check label, .hh-check span{
  font-size: 13px;
  color:#111827;
  font-weight: 800;
}

/* actions */
.hh-actions{
  margin-top: 18px;
}

/* primary button */
.hh-btn {
    width: 100%;
    padding: 6px 13px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    /* font-weight: 900; */
    font-size: 13px;
    letter-spacing: .01em;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(180deg, #0688fa 0%, #0061a7 100%);
    box-shadow: 0 1px 5px rgb(84 139 222 / 22%), 0px 1px 0 rgba(255, 255, 255, .18) inset;
    text-decoration: none;
}

.hh-btn:hover{ filter: brightness(.985); }
.hh-btn:active{ transform: translateY(1px); }

/* helper text */
.hh-note{
  font-size: 12px;
  line-height: 1.5;
  color:#475569;
  margin-top: 10px;
}

/* error/success */
.hh-error{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(185,28,28,.08);
  border: 1px solid rgba(185,28,28,.22);
  color: #7f1d1d;
  font-weight: 800;
  margin: 12px 0;
}

.hh-success{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.24);
  color:#064e3b;
  font-weight: 900;
  margin: 12px 0;
}

.hh-field {
    margin-top: 11px;
}


.hh-monthgrid{ margin-top:6px; font-size:11px; }
.hh-monthgrid input{ margin-right:6px; }
.hh-monthgrid label{ font-size:11px; color:#0f172a; font-weight:700; }

/* If ASP.NET renders it as a table, make it responsive-ish */
.hh-monthgrid table{ width:100%; border-collapse:separate; border-spacing:8px 8px; }
.hh-monthgrid td{ vertical-align:top; }

/* Better clickable area */
.hh-monthgrid label{ display:inline-block; padding:8px 10px; border:1px solid rgba(0,0,0,.12); border-radius:12px; background:#fff; }
.hh-monthgrid input:checked + label{ border-color: rgba(31,95,191,.45); box-shadow:0 0 0 4px rgba(31,95,191,.10); }
/* ===== chips for CheckBoxList / RadioButtonList ===== */
/* chips for month grid + team size rbl */
.hh-monthgrid input[type="checkbox"],
.hh-rbl input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.hh-monthgrid label,
.hh-rbl label{
  display:inline-block;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:999px;
  margin:6px 8px 0 0;
  font-weight:700;
  font-size:11px;
  cursor:pointer;
  user-select:none;
}

.hh-monthgrid input[type="checkbox"]:checked + label,
.hh-rbl input[type="radio"]:checked + label{
  border-color: rgba(31,95,191,.65);
  box-shadow: 0 0 0 4px rgba(31,95,191,.12);
}