/* assets/css/frontend.css
   Monkey Puzzle Funding Calculator – Frontend Styles */

#funding-calculator{
  --fcalc-primary: #6f3ea8;   /* purple */
  --fcalc-blue-bg:#eaf3ff;    /* blue pill background */
  --fcalc-blue-tx:#0b3d7a;    /* blue pill text */
  --fcalc-accent: #2aa6a6;    /* teal accents */
  --fcalc-bg:     #ffffff;
  --fcalc-soft:   #f6f7fb;
  --fcalc-border: #e7e9ef;
  --fcalc-muted:  #64748b;
  --fcalc-radius: 14px;
  --fcalc-shadow: 0 6px 20px rgba(2, 6, 23, 0.07);
  font-size:16px; line-height:1.45;
  max-width: clamp(680px, 92vw, 980px);
  margin:24px auto; padding-inline:1rem;
}

#funding-calculator .fcalc-step{
  background:var(--fcalc-bg);
  border:1px solid var(--fcalc-border);
  border-radius: var(--fcalc-radius);
  box-shadow: var(--fcalc-shadow);
  padding: 40px;
}

#funding-calculator h2{
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  margin:0 0 .5rem;
}
#funding-calculator h3{ margin:0 0 .5rem; }

#funding-calculator p{ margin:0 0 .5rem;    font-family: 'filson-pro' !important;
    font-weight: 300 !important;
    letter-spacing: 0.4pt;
  line-height: 30px;}
#funding-calculator .fcalc-muted{     font-family: 'filson-pro' !important;
    font-weight: 300 !important;
    letter-spacing: 0.4pt; 
  line-height: 30px;}

/* Buttons */
#funding-calculator .button{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 10px; border:1px solid var(--fcalc-border);
  background:#fff; color:#0f172a;
  padding:.6rem .9rem; font-weight:600; text-decoration:none; cursor:pointer;
}
#funding-calculator .button:hover{ border-color:#cfd3df; }
#funding-calculator .button:disabled{ opacity:.6; cursor:not-allowed; }

#funding-calculator .button-primary{

    background: #8246af;

    color: #fff;
    border-radius: 25px;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: 400;

}

/* Actions row */
#funding-calculator .fcalc-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }

/* Fields */
#funding-calculator .fcalc-field select{
  width:100%; border:1px solid var(--fcalc-border); border-radius:10px; padding:.55rem .6rem; background:#fff;
}

/* Step 2 rows */
#funding-calculator .fcalc-eligibility-box{
     border: none;
    border-radius: 25px;
    padding: .5rem .65rem;
    background: #ddf1f0;
    width: 60%;
    text-align: center;
    color: #4896a8;
    font-size: 17px;
    letter-spacing: 0.7px;
    margin-top: 20px;
    margin-bottom: 20px;
}
#funding-calculator .fcalc-day-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center;
  border: 2.5px solid #4896a8; border-radius:12px; padding:.55rem .6rem; background:#fff; margin-bottom:8px;
}
#funding-calculator .fcalc-day-row legend{ min-width:88px; margin:0; font-weight:600; color: #4896a8; }
#funding-calculator .fcalc-day-options{ display:flex; gap:14px; flex-wrap:wrap; }
#funding-calculator .fcalc-fullday{ justify-self:end; }

/* Step 3 specifics */
#funding-calculator .fcalc-eligibility-line{ color:#2b5560; }
#funding-calculator .fcalc-pill{
    display: inline-block;
    margin: .2rem 0 .8rem;
    background: #ddf1f0;
    color: #4896a8;
    /* border: 1px solid #d6e7ff; */
    border-radius: 999px;
    padding: .55rem 2rem;
    letter-spacing: 0.9px;
    font-weight: 700!important;
}
#funding-calculator .fcalc-basedon{ margin-top:.1rem; color:#222222;  }
#funding-calculator .fcalc-disclaimer{ margin:.5rem 0 1rem; color:#222222; }
#funding-calculator .fcalc-cta-row{ margin:.25rem 0 1rem; }
#funding-calculator .fcalc-subheading{ font-size:1.05rem; margin: .5rem 0 .4rem; }
#funding-calculator .fcalc-notes p{ margin:0 0 .5rem; color:#222222;  }

/* Staff breakdown */
#funding-calculator .fcalc-staff-details{ margin-top:14px; }
#funding-calculator .fcalc-staff-tablewrap{ overflow:auto; }
#funding-calculator .fcalc-staff-tablewrap table{ min-width:520px; border-collapse:collapse; font-size:12px; }
#funding-calculator .fcalc-staff-tablewrap thead th{
      text-align: left;
    border-bottom: 1px solid var(--fcalc-border);
    padding: 10px 0;
    background-color: #4896a8;
    padding-left: 20px;
    color: white;
    font-family: 'filson-pro';
    font-size: 17px;
    font-weight: 200;
}
#funding-calculator .fcalc-callout-table tbody td {
    padding: 10px 20px;
    border-bottom: 1px solid #f2f3f7;
}


#funding-calculator .fcalc-callout-table tbody {
    background-color: #ddf1f0;
    color: #4896a8;
}

/* Callout block for under-9 info */
#funding-calculator .fcalc-callout{
  margin-top:10px; border-radius:10px;  background:#fff;
}
#funding-calculator .fcalc-callout-table .fcalc-callout-title{       color: #4797a8;
    font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
    margin: 0 0 .5rem;
    font-weight: 700;
    font-size: 20px;}
#funding-calculator .fcalc-callout-table table{ width:100%; border-collapse:collapse; font-size:.95rem; margin-top: 20px; margin-bottom: 20px;}



/* Responsive */
@media (max-width:760px){
  #funding-calculator{ margin:12px auto; }
  #funding-calculator .fcalc-step{ padding:1rem; }
  #funding-calculator .fcalc-day-row{ grid-template-columns:1fr; display: block;}
  #funding-calculator .fcalc-eligibility-box {     width: 100%;   }
}

/* Allow corner radii to render */
#funding-calculator .fcalc-callout-table table{
  border-collapse: separate !important;
  border-spacing: 0;
}

/* Top corners */
#funding-calculator .fcalc-callout-table thead th:first-child{
  border-top-left-radius: 15px;
  padding-left: 20px;
      padding-top: 10px;
    padding-bottom: 10px;
}
#funding-calculator .fcalc-callout-table thead th:last-child{
  border-top-right-radius: 15px;
      padding-top: 10px;
    padding-bottom: 10px;
}

#funding-calculator .fcalc-funding-options legend {
      color: #4797a8;
    font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
    margin: 0 0 .5rem;
    font-weight: 700;
    font-size: 20px;
}

#funding-calculator .fcalc-help {
     
  padding-bottom: 20px;
  padding-top: 20px;
}

#funding-calculator .fcalc-callout-table thead {
      text-align: left!important;
    border-bottom: 1px solid var(--fcalc-border);
    padding: 10px 10!important;
    background-color: #4896a8!important;
    padding-left: 20px!important;
    color: white!important;
    font-family: 'filson-pro';
    font-size: 17px!important;
    font-weight: 200!important;
}

/* Bottom corners */
#funding-calculator .fcalc-callout-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 15px;
}

#funding-calculator .fcalc-callout-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 15px;
}