/* ── Grant Feedback Widget ────────────────────────────────────────────────── */

.gf-widget {
  --navy:       #00062f;
  --green:      #268f00;
  --cream:      #f5f3ee;
  --paper:      #fffef9;
  --text:       #0a1530;
  --text-soft:  rgba(10,21,48,.55);
  --sans:       'Outfit', system-ui, -apple-system, sans-serif;
  --serif:      'DM Serif Display', Georgia, serif;
  --shadow:     0 1px 3px rgba(0,6,47,.04), 0 8px 32px rgba(0,6,47,.06);

  font-family: var(--sans);
  background:  var(--cream);
  border-top:  1px solid rgba(0,6,47,.08);
  padding:     3rem 1.25rem;
  color:       var(--text);
}

.gf-inner {
  max-width: 760px;
  margin:    0 auto;
}

/* ── heading ── */
.gf-heading {
  font-family: var(--serif);
  font-size:   clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  color:       var(--navy);
  margin:      0 0 .5rem;
  line-height: 1.2;
}

.gf-sub {
  color:       var(--text-soft);
  font-size:   .95rem;
  margin:      0 0 2rem;
}

/* ── status buttons ── */
.gf-buttons {
  display:   flex;
  flex-wrap: wrap;
  gap:       .75rem;
  margin:    0 0 1.5rem;
}

.gf-btn {
  flex:            1 1 140px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             .35rem;
  padding:         1.1rem .75rem;
  background:      var(--paper);
  border:          1.5px solid rgba(0,6,47,.12);
  border-radius:   12px;
  cursor:          pointer;
  font-family:     var(--sans);
  font-size:       .9rem;
  font-weight:     500;
  color:           var(--text);
  box-shadow:      var(--shadow);
  transition:      border-color .15s, transform .12s, box-shadow .15s;
  text-align:      center;
  line-height:     1.3;
}

.gf-btn:hover {
  border-color: var(--navy);
  transform:    translateY(-2px);
  box-shadow:   0 4px 16px rgba(0,6,47,.1);
}

.gf-btn:active { transform: translateY(0); }

.gf-btn[data-status="received"]  { --accent: var(--green); }
.gf-btn[data-status="pending"]   { --accent: #b07a00; }
.gf-btn[data-status="rejected"]  { --accent: #c0392b; }
.gf-btn[data-status="applied"]   { --accent: #0071bc; }

.gf-btn.selected {
  border-color:   var(--accent, var(--navy));
  background:     color-mix(in srgb, var(--accent, var(--navy)) 8%, var(--paper));
  box-shadow:     0 0 0 3px color-mix(in srgb, var(--accent, var(--navy)) 20%, transparent);
}

.gf-btn-emoji { font-size: 1.6rem; line-height: 1; }
.gf-btn-label { font-size: .85rem; }

/* ── wait slider ── */
.gf-wait-section {
  background:    var(--paper);
  border:        1px solid rgba(0,6,47,.08);
  border-radius: 12px;
  padding:       1.25rem 1.5rem;
  margin:        0 0 1.25rem;
  box-shadow:    var(--shadow);
}

.gf-wait-label {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  font-size:       .9rem;
  font-weight:     500;
  color:           var(--text);
  margin:          0 0 .75rem;
}

.gf-wait-value {
  font-weight: 700;
  color:       var(--navy);
  font-size:   1.1rem;
}

.gf-wait-skip {
  font-size:  .8rem;
  color:      var(--text-soft);
  cursor:     pointer;
  text-decoration: underline;
  background: none;
  border:     none;
  padding:    0;
  font-family: var(--sans);
}
.gf-wait-skip:hover { color: var(--navy); }

input[type="range"].gf-slider {
  -webkit-appearance: none;
  appearance:         none;
  width:              100%;
  height:             6px;
  background:         linear-gradient(to right, var(--navy) 0%, var(--navy) var(--pct, 15%), rgba(0,6,47,.15) var(--pct, 15%));
  border-radius:      3px;
  outline:            none;
  cursor:             pointer;
}

input[type="range"].gf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:              20px;
  height:             20px;
  background:         var(--navy);
  border:             3px solid #fff;
  border-radius:      50%;
  box-shadow:         0 1px 4px rgba(0,6,47,.25);
  cursor:             pointer;
}

input[type="range"].gf-slider::-moz-range-thumb {
  width:        20px;
  height:       20px;
  background:   var(--navy);
  border:       3px solid #fff;
  border-radius: 50%;
  box-shadow:   0 1px 4px rgba(0,6,47,.25);
  cursor:       pointer;
  border:       none;
}

/* ── submit button ── */
.gf-submit-row {
  display:    flex;
  gap:        .75rem;
  align-items: center;
  flex-wrap:  wrap;
  margin:     0 0 .5rem;
}

.gf-submit-btn {
  background:    var(--navy);
  color:         #fff;
  border:        none;
  border-radius: 8px;
  padding:       .75rem 1.75rem;
  font-family:   var(--sans);
  font-size:     .95rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .15s, transform .1s;
}
.gf-submit-btn:hover   { background: #0a1a6e; }
.gf-submit-btn:active  { transform: scale(.98); }
.gf-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

.gf-region-select {
  flex:        1 1 160px;
  padding:     .7rem .9rem;
  border:      1.5px solid rgba(0,6,47,.15);
  border-radius: 8px;
  font-family: var(--sans);
  font-size:   .88rem;
  color:       var(--text);
  background:  var(--paper);
  cursor:      pointer;
}
.gf-region-select:focus { outline: none; border-color: var(--navy); }

/* ── messages ── */
.gf-msg {
  font-size:   .88rem;
  color:       var(--text-soft);
  margin:      .5rem 0 0;
}

.gf-error {
  color: #c0392b;
}

/* ── stats panel ── */
.gf-stats {
  margin: 0;
}

.gf-stats-header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  flex-wrap:       wrap;
  gap:             .5rem;
  margin:          0 0 1.5rem;
}

.gf-stats-total {
  font-size:   .9rem;
  color:       var(--text-soft);
}

.gf-stats-total strong {
  font-size:  1.05rem;
  color:      var(--navy);
  font-weight: 700;
}

.gf-stats-rate {
  font-family:  var(--serif);
  font-size:    2rem;
  color:        var(--green);
  line-height:  1;
}

.gf-headline-stats {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
  margin:    0 0 2rem;
}

.gf-stat-card {
  flex:          1 1 130px;
  background:    var(--paper);
  border:        1px solid rgba(0,6,47,.08);
  border-radius: 10px;
  padding:       1rem 1.25rem;
  box-shadow:    var(--shadow);
}

.gf-stat-card .val {
  font-family:  var(--serif);
  font-size:    1.7rem;
  line-height:  1;
  margin:       0 0 .2rem;
  color:        var(--navy);
}
.gf-stat-card.green .val  { color: var(--green); }
.gf-stat-card.amber .val  { color: #b07a00; }
.gf-stat-card.red   .val  { color: #c0392b; }
.gf-stat-card.blue  .val  { color: #0071bc; }

.gf-stat-card .lbl {
  font-size: .8rem;
  color:     var(--text-soft);
}

/* ── bar chart ── */
.gf-chart-title {
  font-size:   .85rem;
  font-weight: 600;
  color:       var(--text);
  margin:      0 0 .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.gf-chart {
  display:       flex;
  flex-direction: column;
  gap:           .6rem;
}

.gf-chart-row {
  display:     grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center;
  gap:         .6rem;
  font-size:   .82rem;
}

.gf-chart-label {
  color:       var(--text);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.gf-chart-bar-wrap {
  background:    rgba(0,6,47,.06);
  border-radius: 4px;
  height:        10px;
  overflow:      hidden;
}

.gf-chart-bar-fill {
  height:        100%;
  border-radius: 4px;
  background:    var(--green);
  transition:    width .6s ease;
}

.gf-chart-pct {
  color:       var(--text-soft);
  text-align:  right;
}

/* ── thank you state ── */
.gf-thankyou {
  text-align:    center;
  padding:       1rem 0 2rem;
}

.gf-thankyou .tick {
  font-size:  2.5rem;
  margin:     0 0 .5rem;
}

.gf-thankyou h3 {
  font-family: var(--serif);
  font-size:   1.4rem;
  color:       var(--navy);
  margin:      0 0 .3rem;
  font-weight: 400;
}

.gf-thankyou p {
  font-size:  .9rem;
  color:      var(--text-soft);
  margin:     0 0 1.5rem;
}

/* ── already submitted notice ── */
.gf-already {
  background:    var(--paper);
  border:        1px solid rgba(0,6,47,.08);
  border-radius: 10px;
  padding:       1rem 1.25rem;
  font-size:     .9rem;
  color:         var(--text-soft);
  margin:        0 0 1.5rem;
}

/* ── loading spinner ── */
.gf-loading {
  text-align:  center;
  padding:     2rem;
  color:       var(--text-soft);
  font-size:   .9rem;
}

.gf-spinner {
  display:      inline-block;
  width:        24px;
  height:       24px;
  border:       3px solid rgba(0,6,47,.15);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation:    gf-spin .7s linear infinite;
  margin:       0 .5rem -5px;
}
@keyframes gf-spin { to { transform: rotate(360deg); } }

/* ── responsive ── */
@media (max-width: 520px) {
  .gf-buttons { gap: .5rem; }
  .gf-btn     { flex: 1 1 calc(50% - .25rem); padding: .9rem .5rem; }
  .gf-chart-row { grid-template-columns: 100px 1fr 50px; }
}