/* Outfit-fonten indlæses som afhængighed i class-shortcode.php (ikke @import – det hentede den to gange). */

.eb-widget *, .eb-widget *::before, .eb-widget *::after,
.eb-result *,  .eb-result *::before,  .eb-result *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.eb-step                { display: none !important; }
.eb-step.active         { display: block !important; animation: eb-up .25s cubic-bezier(.22,1,.36,1); }
@keyframes eb-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.eb-loading             { display: none !important; }
.eb-loading.show        { display: flex !important; }
.eb-consent             { display: none !important; }
.eb-consent.show        { display: flex !important; }
.eb-result              { display: none !important; }
.eb-result.show         { display: block !important; }


    :root {
      --bg:          #F0F4F8;
      --surface:     #FFFFFF;
      --surface2:    #F8FAFC;
      --border:      #E2EAF2;
      --text:        #0F1923;
      --muted:       #6B7E96;
      --accent:      #1A6FD4;
      --accent-bg:   rgba(26,111,212,.07);
      --accent-dark: #1558AC;
      --accent-lt:   #EEF4FD;
      --green:       #16A34A;
      --green-bg:    #F0FDF4;
      --green-bd:    #BBF7D0;
      --shadow:      0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);
      --shadow-sm:   0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.06);
      --r:           14px;
      --r-sm:        9px;
      --f:           'Outfit', sans-serif;
    }


    .eb-brand { font-size: 12px; font-weight: 700; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); display:flex; align-items:center; gap:6px; }
    .eb-brand svg { color: var(--accent); }
    .eb-progress { display:flex; align-items:center; gap:5px; }
    .eb-pip { height:4px; border-radius:2px; background:var(--border); transition:all .35s cubic-bezier(.34,1.56,.64,1); }
    .eb-pip.on { background:var(--accent); width:22px !important; }

    /* ── INTRO BLOCK (step 1) ──────────────────── */
    .eb-intro {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 22px 20px;
      margin-bottom: 14px;
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
    }
    .eb-intro::before {
      content: '';
      position: absolute; top:0; left:0; right:0; height:3px;
      background: linear-gradient(90deg, var(--accent), #5BA8F5);
      border-radius: 18px 18px 0 0;
    }
    .eb-intro-title {
      font-size: 20px; font-weight: 800; letter-spacing:-.02em;
      line-height: 1.25; margin-bottom: 6px;
    }
    .eb-intro-sub { font-size: 13px; color: var(--muted); line-height: 1.55; }
    .eb-intro-hint {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 600; color: var(--accent);
      background: var(--accent-bg); border: 1px solid rgba(26,111,212,.15);
      border-radius: 20px; padding: 4px 10px;
      margin-top: 10px;
    }

    /* ── SECTION LABEL ─────────────────────────── */
    .eb-section { font-size: 11px; font-weight: 700; letter-spacing:.07em; text-transform:uppercase; color: var(--muted); margin: 16px 0 9px; }

    /* ── HOUSING GRID ──────────────────────────── */
    .eb-housing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
    .eb-house-btn {
      background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r);
      padding: 14px 6px 12px; text-align: center; cursor: pointer; transition: all .18s;
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      font-family: var(--f); box-shadow: var(--shadow-sm);
    }
    .eb-house-btn:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
    .eb-house-btn.sel { border-color: var(--accent); background: var(--accent-lt); box-shadow: 0 0 0 3px var(--accent-bg); }
    .eb-house-btn svg { color: #A0BACF; transition: color .18s; }
    .eb-house-btn.sel svg, .eb-house-btn:hover svg { color: var(--accent); }
    .eb-house-name { font-size: 12px; font-weight: 600; color: var(--text); display: block; }
    .eb-house-size { font-size: 10px; color: var(--muted); display: block; }

    /* ── ROW CARDS ──────────────────────────────── */
    .eb-row {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
      padding: 12px 15px; margin-bottom: 7px;
      display: flex; align-items: center; justify-content: space-between;
      box-shadow: var(--shadow-sm);
    }
    .eb-row-left { display: flex; align-items: center; gap: 11px; }
    .eb-row-icon { width:34px; height:34px; border-radius:8px; background:var(--accent-lt); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; }
    .eb-row-label { font-size: 14px; font-weight: 600; color: var(--text); }
    .eb-row-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

    /* Counter */
    .eb-counter { display:flex; align-items:center; gap:2px; }
    .eb-cnt { width:30px; height:30px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface2); color:var(--text); font-family:var(--f); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; user-select:none; }
    .eb-cnt:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-lt); }
    .eb-cnt-val { width:36px; text-align:center; font-size:20px; font-weight:700; color:var(--text); }

    /* Toggle */
    .eb-toggle { position:relative; width:42px; height:23px; flex-shrink:0; }
    .eb-toggle input { opacity:0; width:0; height:0; position:absolute; }
    .eb-track { position:absolute; inset:0; background:#D1DCE8; border-radius:12px; cursor:pointer; transition:all .22s; }
    .eb-track::after { content:''; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:all .22s; }
    .eb-toggle input:checked + .eb-track { background:var(--accent); }
    .eb-toggle input:checked + .eb-track::after { transform:translateX(19px); }

    /* ── CTA BUTTON ────────────────────────────── */
    .eb-cta { width:100%; padding:16px 20px; background:var(--accent); color:#fff; font-family:var(--f); font-size:15px; font-weight:700; border:none; border-radius:var(--r); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; margin-top:14px; transition:all .2s; letter-spacing:-.01em; box-shadow:0 4px 14px rgba(26,111,212,.3); }
    .eb-cta:hover { background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(26,111,212,.35); }
    .eb-cta:active { transform:none; }
    .eb-note { text-align:center; font-size:12px; color:var(--muted); margin-top:12px; }

    /* ── BACK ──────────────────────────────────── */
    .eb-back { display:inline-flex; align-items:center; gap:5px; background:none; border:none; color:var(--muted); font-family:var(--f); font-size:13px; cursor:pointer; padding:0; margin-bottom:24px; transition:color .15s; }
    .eb-back:hover { color:var(--text); }

    /* ── STEP 2: PREFERENCE ────────────────────── */
    .eb-step-title { font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin-bottom:7px; color:var(--text); }
    .eb-step-sub { font-size:14px; color:var(--muted); margin-bottom:22px; line-height:1.6; }
    .eb-step-sub strong { color:var(--accent); }

    .eb-pref-btn { width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); padding:15px 16px; margin-bottom:9px; display:flex; align-items:center; gap:13px; cursor:pointer; transition:all .18s; text-align:left; font-family:var(--f); box-shadow:var(--shadow-sm); }
    .eb-pref-btn:hover { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg), var(--shadow-sm); }
    .eb-pref-icon { width:40px; height:40px; border-radius:10px; background:var(--accent-lt); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent); }
    .eb-pref-name { display:block; font-size:14px; font-weight:700; color:var(--text); }
    .eb-pref-desc { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
    .eb-pref-arrow { margin-left:auto; color:var(--border); flex-shrink:0; transition:color .18s; }
    .eb-pref-btn:hover .eb-pref-arrow { color:var(--accent); }

    /* ── STEP 3: EMAIL ─────────────────────────── */
    .eb-kwh-recap-mini {
      background: var(--accent-lt); border: 1px solid rgba(26,111,212,.15);
      border-radius: var(--r-sm); padding: 11px 15px;
      display: flex; align-items: center; gap: 11px; margin-bottom: 20px;
    }
    .eb-recap-kwh { font-size:19px; font-weight:700; color:var(--accent); }
    .eb-recap-label { font-size:11px; color:var(--muted); margin-top:2px; }

    .eb-email-input { width:100%; padding:14px 16px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-sm); color:var(--text); font-family:var(--f); font-size:15px; outline:none; transition:border-color .2s, box-shadow .2s; margin-bottom:10px; box-shadow:var(--shadow-sm); }
    .eb-email-input::placeholder { color:var(--muted); }
    .eb-email-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }

    .eb-consent { display:none !important; gap:9px; align-items:flex-start; margin-bottom:4px; font-size:12px; color:var(--muted); line-height:1.55; }
    .eb-consent.show { display:flex !important; }
    .eb-consent input[type="checkbox"] { margin-top:2px; accent-color:var(--accent); flex-shrink:0; }
    .eb-consent a { color:var(--accent); }

    .eb-skip { width:100%; text-align:center; background:none; border:none; color:var(--muted); font-family:var(--f); font-size:13px; cursor:pointer; padding:11px; margin-top:4px; text-decoration:underline; transition:color .15s; }
    .eb-skip:hover { color:var(--accent); }

    /* ── LOADING ───────────────────────────────── */
    .eb-loading { display:none !important; position:fixed; inset:0; background:rgba(240,244,248,.92); backdrop-filter:blur(4px); z-index:9999; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
    .eb-loading.show { display:flex !important; }
    .eb-spin { width:52px; height:52px; }
    .eb-spin-track { opacity:.15; }
    .eb-spin-arc { transform-origin:26px 26px; animation:spin 1s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .eb-loading-txt { font-size:15px; font-weight:600; color:var(--text); }
    .eb-loading-stxt { font-size:12px; color:var(--muted); }

    /* ── RESULTS ───────────────────────────────── */
    #ebResult { display:none !important; }
    #ebResult.show { display:block !important; animation:up .3s ease; }

    /* kWh reveal block */
    .eb-kwh-reveal {
      background: var(--surface); border: 1.5px solid var(--accent);
      border-radius: 18px; padding: 22px 20px; margin-bottom: 14px;
      box-shadow: 0 4px 20px rgba(26,111,212,.1);
      position: relative; overflow: hidden;
    }
    .eb-kwh-reveal::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), #5BA8F5); border-radius:18px 18px 0 0; }
    .eb-reveal-eyebrow { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
    .eb-reveal-row { display:flex; align-items:baseline; gap:5px; line-height:1; margin-bottom:4px; }
    .eb-reveal-num { font-size:60px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--accent); }
    .eb-reveal-unit { font-size:16px; font-weight:500; color:var(--muted); padding-bottom:4px; }
    .eb-reveal-price { font-size:16px; font-weight:600; color:var(--text); margin-bottom:12px; }
    .eb-reveal-price span { color:var(--muted); font-weight:400; }
    .eb-reveal-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
    .eb-rtag { font-size:11px; font-weight:500; padding:3px 9px; border-radius:20px; background:var(--accent-bg); color:var(--accent); border:1px solid rgba(26,111,212,.2); }
    .eb-reveal-source { font-size:11px; color:var(--muted); border-top:1px solid var(--border); padding-top:9px; margin-top:2px; }

    /* Result header */
    .eb-res-tag { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); margin:0 0 7px 0 !important; }
    .eb-res-title { font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin:0 0 4px 0 !important; padding:0 !important; }
    .eb-res-sub { font-size:13px; color:var(--muted); margin:0 0 12px 0 !important; padding:0 !important; }

    /* Winner */
    .eb-winner { background:var(--surface); border:1.5px solid var(--accent); border-radius:18px; overflow:hidden; margin-bottom:12px; box-shadow:0 4px 20px rgba(26,111,212,.1); }
    .eb-winner-bar { background:var(--accent); padding:8px 18px; display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:#fff; letter-spacing:.04em; text-transform:uppercase; }
    .eb-winner-body { padding:14px 16px; }
    .eb-co-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
    .eb-co-logo { width:40px; height:40px; border-radius:9px; background:var(--accent-lt); border:1px solid rgba(26,111,212,.15); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; color:var(--accent); flex-shrink:0; }
    .eb-co-name { font-size:17px; font-weight:700; }
    .eb-co-badges { display:flex; gap:5px; margin-top:4px; flex-wrap:wrap; }
    .eb-badge { font-size:11px; font-weight:500; padding:3px 8px; border-radius:20px; }
    .eb-badge-g { background:var(--green-bg); color:var(--green); border:1px solid var(--green-bd); }
    .eb-badge-s { background:#FFFBEB; color:#D97706; border:1px solid #FDE68A; }

    .eb-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; background:var(--surface2); border-radius:var(--r-sm); padding:11px 13px; margin-bottom:12px; border:1px solid var(--border); }
    .eb-metric-label { font-size:11px; color:var(--muted); margin-bottom:3px; }
    .eb-metric-val { font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
    .eb-metric-val.ac { color:var(--accent); }
    .eb-metric-unit { font-size:12px; font-weight:400; color:var(--muted); }

    .eb-saving { background:var(--green-bg); border:1px solid var(--green-bd); border-radius:var(--r-sm); padding:9px 12px; display:flex; align-items:center; gap:7px; font-size:13px; color:var(--green); font-weight:500; margin-bottom:12px; }

    .eb-winner-cta { width:100%; padding:13px; background:var(--accent); color:#fff !important; font-family:var(--f); font-size:14px; font-weight:700; border:none; border-radius:var(--r-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; transition:all .2s; text-decoration:none !important; }
    .eb-winner-cta:hover { background:var(--accent-dark); color:#fff !important; text-decoration:none !important; }
    .eb-reassure { display:flex; justify-content:center; gap:16px; margin-top:11px; flex-wrap:wrap; }
    .eb-ri { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); }

    /* Alts */
    .eb-alts-head { font-size:14px; font-weight:700; margin:20px 0 10px; display:flex; align-items:center; justify-content:space-between; color:var(--text); }
    .eb-alts-cnt { font-size:12px; color:var(--muted); font-weight:400; }
    .eb-alt { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px 13px; display:flex; align-items:center; gap:11px; margin-bottom:6px; box-shadow:var(--shadow-sm); transition:border-color .15s; }
    .eb-alt:hover { border-color:#B6CDED; }
    .eb-alt-rank { font-size:13px; font-weight:700; color:var(--accent); width:18px; text-align:center; flex-shrink:0; }
    .eb-alt-logo { width:34px; height:34px; border-radius:7px; background:var(--accent-lt); border:1px solid rgba(26,111,212,.1); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--accent); flex-shrink:0; }
    .eb-alt-name { font-size:14px; font-weight:600; flex:1; }
    .eb-alt-price { font-size:13px; color:var(--muted); white-space:nowrap; }
    .eb-alt-cta { padding:7px 12px; border:1.5px solid var(--accent); border-radius:7px; background:none; color:var(--accent) !important; font-family:var(--f); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; text-decoration:none !important; white-space:nowrap; }
    .eb-alt-cta:hover { background:var(--accent); color:#fff !important; text-decoration:none !important; }

    .eb-disc { font-size:12px; color:var(--muted); line-height:1.65; border-top:1px solid var(--border); padding-top:18px; margin-top:22px; }
    .eb-recalc-wrap { display:flex; justify-content:center; margin-top:20px; }
    .eb-recalc { display:flex; align-items:center; gap:7px; background:none; border:1.5px solid var(--border); color:var(--muted); font-family:var(--f); font-size:13px; padding:9px 18px; border-radius:100px; cursor:pointer; transition:all .2s; }
    .eb-recalc:hover { border-color:var(--accent); color:var(--accent); }

    @media (max-width:360px) { .eb-reveal-num { font-size:50px; } }
  
/* ── Logo image constraints ─────────────────────────────────── */
.eb-co-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 9px;
}
.eb-co-logo {
  width: 44px;
  height: 44px;
  min-width: 44px;
  overflow: hidden;
}
.eb-alt-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

    
/* ── Logo image: hard-constrain regardless of theme ──────── */
.eb-co-logo {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.eb-co-logo img,
.eb-co-logo-img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 0 !important;
}
.eb-alt-logo {
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.eb-alt-logo img,
.eb-alt-logo-img {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ── WordPress widget wrapper ───────────────────────────────── */
.eb-widget {
  max-width: 480px;
  margin: 0 auto;
  font-family: var(--f);
  color: var(--text);
}
.eb-result {
  display: none !important;
  max-width: 480px;
  margin: 0 auto;
  font-family: var(--f);
  color: var(--text);
}
.eb-result.show { display: block; animation: up .3s ease; }

/* ── Theme override: links inside plugin ────────────────────── */
.eb-widget a,
.eb-result a {
  text-decoration: none;
}
.eb-cta, .eb-cta:hover, .eb-cta:visited, .eb-cta:focus,
.eb-winner-cta, .eb-winner-cta:hover, .eb-winner-cta:visited, .eb-winner-cta:focus {
  color: #fff !important;
  text-decoration: none !important;
}
.eb-alt-cta, .eb-alt-cta:visited, .eb-alt-cta:focus {
  color: var(--accent) !important;
  text-decoration: none !important;
}
.eb-alt-cta:hover {
  color: #fff !important;
  text-decoration: none !important;
}
.eb-reveal-source a,
.eb-consent a,
.eb-disc a {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Prevent WordPress theme from adding margin to headings inside plugin ── */
.eb-widget h1, .eb-widget h2, .eb-widget h3, .eb-widget h4,
.eb-result h1, .eb-result h2, .eb-result h3, .eb-result h4 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--f) !important;
}