/* EPC Near Me: free Home Energy Model CPD session page
   (/cpd/home-energy-model-30-minutes-cpd/). Builds on cpd.css (.enm-cpdp). */

.enm-hem-hero { margin-top: 10px !important; }
.enm-hem-hero .enm-cpdp-blurb { max-width: 820px; }
.enm-hem-flag {
  display: inline-block; background: #FFD21F; color: #0b1c12; font-size: 12.5px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; border-radius: 999px; padding: 5px 14px; margin: 0 8px 10px 0;
}
.enm-hem-steps { list-style: none; counter-reset: hs; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.enm-hem-steps li { counter-increment: hs; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--enm-body); background: #fff; border: 1px solid var(--enm-line); border-radius: 14px; padding: 12px 14px; }
.enm-hem-steps li::before {
  content: counter(hs); flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--enm-tint);
  border: 1px solid var(--enm-line); color: var(--enm-deep); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

/* the dark stage: gate, player, quiz, done */
.enm-hem-stage {
  background: var(--enm-deep); border-radius: var(--enm-radius); padding: 34px 38px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .22); color: #fff; scroll-margin-top: 90px;
}
.enm-hem-stage h2 { color: #fff !important; margin-top: 0; }
.enm-hem-stage p { color: rgba(255, 255, 255, .86); }
.enm-hem-stage [hidden] { display: none !important; }
.enm-hem-small { font-size: 13.5px !important; color: rgba(255, 255, 255, .65) !important; margin-top: 12px; }
.enm-hem-stage a:not(.enm-btn) { color: #4ade80 !important; }

.enm-hem-gate { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center; }
.enm-hem-gate img { display: block; width: 100%; height: auto; border-radius: 14px; }
.enm-hem-gate-form { display: flex; gap: 8px; max-width: 500px; background: #fff; border-radius: 14px; padding: 6px; margin-top: 18px; }
.enm-hem-gate-form input { flex: 1; min-width: 0; border: none; outline: none; padding: 0 16px; font-size: 16px; height: 52px; border-radius: 10px; color: #16241d; }
.enm-hem-gate-form button, .enm-hem-stage .enm-hem-btn {
  border: none; border-radius: 10px; background: var(--enm-cta); color: #fff; font-size: 15.5px; font-weight: 800;
  padding: 0 22px; min-height: 52px; cursor: pointer; white-space: nowrap;
}
.enm-hem-gate-form button:hover, .enm-hem-stage .enm-hem-btn:hover { background: #31D957; }
.enm-hem-gate-form button:disabled, .enm-hem-stage .enm-hem-btn:disabled { opacity: .6; cursor: wait; }

.enm-hem-msg { display: none; margin-top: 12px; font-size: 14.5px; font-weight: 700; color: #4ade80 !important; }
.enm-hem-msg.bad { color: #FFD21F !important; }

.enm-hem-player-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; margin-bottom: 14px; }
.enm-hem-player-head h2 { margin: 0 !important; font-size: 24px !important; }
.enm-hem-who { font-size: 13.5px; color: rgba(255, 255, 255, .65); }
.enm-hem-video { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.enm-hem-video video { display: block; width: 100%; height: 100%; background: #000; }
.enm-hem-progress { margin-top: 14px; }
.enm-hem-track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.enm-hem-fill { height: 100%; width: 100%; background: #4ade80; border-radius: 99px; transform: scaleX(0); transform-origin: left center; transition: transform .4s ease; }
.enm-hem-progress-label { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255, 255, 255, .7); margin-top: 6px; }

/* quiz */
.enm-hem-quiz { margin-top: 30px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .16); scroll-margin-top: 90px; }
.enm-hem-name { display: block; margin: 0 0 18px; max-width: 460px; }
.enm-hem-name span { display: block; font-weight: 700; margin-bottom: 6px; }
.enm-hem-name input { width: 100%; border: none; border-radius: 10px; height: 48px; padding: 0 14px; font-size: 16px; color: #16241d; }
.enm-hem-q { border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 16px 18px 10px; min-width: 0; margin: 0 0 14px; background: rgba(255, 255, 255, .04); }
.enm-hem-q legend { float: left; width: 100%; margin: 0 0 8px; font-weight: 700; font-size: 16px; padding: 0; color: #fff; line-height: 1.45; }
.enm-hem-q legend + label { clear: both; }
.enm-hem-q legend span { color: #4ade80; }
.enm-hem-q label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: 8px; cursor: pointer; color: rgba(255, 255, 255, .9); font-size: 15px; line-height: 1.45; }
.enm-hem-q label:hover { background: rgba(255, 255, 255, .06); }
.enm-hem-q input { margin-top: 3px; accent-color: #25C146; width: 17px; height: 17px; flex: 0 0 auto; }
.enm-hem-q.wrong { border-color: #FFD21F; background: rgba(255, 210, 31, .07); }

/* done */
.enm-hem-badge { display: block; margin: 0 auto 10px; width: 150px; height: auto; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .35)); }
.enm-hem-pill { display: inline-block; background: #FFD21F; color: #0b1c12; font-weight: 800; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; padding: 7px 18px; margin-bottom: 4px; }
.enm-hem-share { max-width: 560px; margin: 8px auto 18px; padding: 18px 18px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; background: rgba(255, 255, 255, .05); }
.enm-hem-share-h { font-weight: 800; font-size: 17px; color: #fff !important; margin: 0 0 2px; }
.enm-hem-stage a.enm-hem-li { display: inline-block; margin: 5px; padding: 12px 20px; border-radius: 10px; background: #0A66C2; color: #fff !important; font-weight: 800; font-size: 15px; text-decoration: none !important; border: 2px solid #0A66C2; }
.enm-hem-stage a.enm-hem-li:hover { background: #0b74dc; }
.enm-hem-stage a.enm-hem-li.ghost { background: #fff; color: #0A66C2 !important; border-color: #fff; }
.enm-hem-stage a.enm-hem-cert { color: #4ade80 !important; font-weight: 800; }
.enm-hem-done { text-align: center; padding: 10px 0; scroll-margin-top: 90px; }
.enm-hem-done-tick {
  width: 64px; height: 64px; border-radius: 50%; background: #25C146; color: #fff; font-size: 34px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.enm-hem-done dl { display: inline-grid; grid-template-columns: auto auto; gap: 6px 18px; text-align: left; margin: 10px auto 16px; font-size: 15px; }
.enm-hem-done dt { color: rgba(255, 255, 255, .65); }
.enm-hem-done dd { margin: 0; font-weight: 700; }
.enm-hem-done .enm-hem-btn { background: transparent; border: 1px solid rgba(255, 255, 255, .55); min-height: 44px; }
.enm-hem-done .enm-hem-btn:hover { background: rgba(255, 255, 255, .08); }

.enm-hem-chapters { columns: 2; column-gap: 30px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.enm-hem-chapters li { break-inside: avoid; padding: 3px 0; color: var(--enm-body); }
.enm-hem-chapters b { display: inline-block; min-width: 46px; color: var(--enm-deep); }
.enm-hem-note { font-size: 13.5px !important; color: var(--enm-muted) !important; }

@media (max-width: 860px) {
  .enm-hem-gate { grid-template-columns: 1fr; gap: 22px; }
  .enm-hem-steps { grid-template-columns: 1fr 1fr; }
  .enm-hem-stage { padding: 24px 18px; }
  .enm-hem-chapters { columns: 1; }
}
@media (max-width: 520px) {
  .enm-hem-steps { grid-template-columns: 1fr; gap: 8px; }
  .enm-hem-gate-form { flex-direction: column; }
  .enm-hem-gate-form input { height: 48px; }
}