/*!
 * MEPCO Bill Checker — frontend styles
 * v2.0.0
 *
 * The design language is lifted from the printed MEPCO bill itself: a navy
 * header band, mint-tinted data boxes, and the company's green as the accent.
 * The motion theme is metering — a sweeping gauge, a segmented digit track and
 * a radar ping — rather than generic gradient drift.
 *
 * No font-family is declared anywhere in this file. Every heading, label and
 * input inherits the active theme, so the card sits inside your design.
 */

/* ===============================================================
   Tokens
   =============================================================== */
.mbc-wrap{
  --mbc-navy:#0d1f47;
  --mbc-navy-2:#173a72;
  --mbc-navy-3:#20509b;
  --mbc-green:#0a7d43;
  --mbc-green-2:#16a35a;
  --mbc-green-3:#4fc98a;
  --mbc-amber:#f2b134;

  --mbc-mint:#e9f6ee;
  --mbc-mint-2:#d3ecdd;
  --mbc-surface:#ffffff;
  --mbc-surface-2:#f5f8fc;

  --mbc-ink:#0e1c33;
  --mbc-muted:#54627a;
  --mbc-faint:#8593a8;
  --mbc-line:#e2e8f1;
  --mbc-line-2:#c8d4e4;

  --mbc-ok:#0a7d43;
  --mbc-danger:#c8362a;
  --mbc-danger-soft:#fdf3f1;
  --mbc-danger-line:#f2cdc7;

  --mbc-radius:14px;
  --mbc-ease:cubic-bezier(.2,.8,.3,1);
  --mbc-snap:cubic-bezier(.34,1.4,.5,1);

  max-width:565px;
  margin:26px auto;
  color:var(--mbc-ink);
  text-align:left;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

.mbc-wrap *,
.mbc-wrap *::before,
.mbc-wrap *::after{box-sizing:border-box}

.mbc-wrap button{font:inherit;letter-spacing:inherit}

/* ===============================================================
   Card
   =============================================================== */
.mbc-card{
  position:relative;
  background:var(--mbc-surface);
  border:1px solid var(--mbc-line-2);
  border-radius:var(--mbc-radius);
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(13,31,71,.04),
    0 10px 26px -16px rgba(13,31,71,.30),
    0 30px 60px -40px rgba(13,31,71,.26);
  animation:mbc-card-in .5s var(--mbc-ease) both;
}

@keyframes mbc-card-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* ===============================================================
   Header — navy band, drifting transmission lines, falling scan
   line, travelling energy dots, gauge that sweeps and pings
   =============================================================== */
.mbc-header{
  position:relative;
  padding:24px 21px 26px;
  text-align:center;
  color:#fff;
  background:linear-gradient(160deg,#0a1a3d 0%,var(--mbc-navy) 45%,var(--mbc-navy-2) 100%);
  border-bottom:3px solid var(--mbc-green);
  isolation:isolate;
  overflow:hidden;
}

.mbc-header::before{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:-2;
  background-image:repeating-linear-gradient(
    58deg,
    rgba(255,255,255,.05) 0 1px,
    transparent 1px 26px
  );
  animation:mbc-lines-drift 22s linear infinite;
}

@keyframes mbc-lines-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,52px,0)}
}

.mbc-header::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(42% 58% at 82% 88%,rgba(22,163,90,.42),transparent 68%),
    radial-gradient(38% 50% at 12% 16%,rgba(32,80,155,.5),transparent 70%);
  animation:mbc-glow-breathe 9s ease-in-out infinite alternate;
}

@keyframes mbc-glow-breathe{
  from{opacity:.65;transform:scale(1)}
  to{opacity:1;transform:scale(1.1)}
}

.mbc-sheen{
  position:absolute;
  left:0;right:0;top:0;
  height:2px;
  z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(79,201,138,.85),transparent);
  opacity:0;
  animation:mbc-scan 6.5s var(--mbc-ease) 1.2s infinite;
  pointer-events:none;
}

@keyframes mbc-scan{
  0%{opacity:0;transform:translateY(0)}
  10%{opacity:.9}
  60%{opacity:.5}
  100%{opacity:0;transform:translateY(190px)}
}

.mbc-spark{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--mbc-green-3);
  box-shadow:0 0 9px 2px rgba(79,201,138,.8);
  opacity:0;
  pointer-events:none;
}
.mbc-spark--1{top:26%;left:-6px;animation:mbc-travel 7s linear .4s infinite}
.mbc-spark--2{top:62%;left:-6px;width:3px;height:3px;background:var(--mbc-amber);box-shadow:0 0 8px 2px rgba(242,177,52,.75);animation:mbc-travel 9.5s linear 2.8s infinite}
.mbc-spark--3{top:80%;left:-6px;width:3px;height:3px;animation:mbc-travel 8.2s linear 5s infinite}

@keyframes mbc-travel{
  0%{opacity:0;transform:translateX(0)}
  8%{opacity:1}
  88%{opacity:.85}
  100%{opacity:0;transform:translateX(560px)}
}

.mbc-bolt{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  margin:0 auto 11px;
  border-radius:50%;
  color:#fff;
  background:
    conic-gradient(from -125deg,rgba(79,201,138,.75) 0deg,rgba(79,201,138,.16) 95deg,rgba(255,255,255,.05) 150deg,rgba(255,255,255,.05) 360deg),
    rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.05);
  animation:mbc-gauge-in .5s var(--mbc-snap) .05s both;
}

.mbc-bolt::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  animation:mbc-gauge-spin 4.5s linear infinite;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.55) 18deg,transparent 40deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
}

.mbc-bolt::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(79,201,138,.6);
  animation:mbc-ping 3.2s var(--mbc-ease) 1s infinite;
}

@keyframes mbc-gauge-in{
  from{opacity:0;transform:scale(.7)}
  to{opacity:1;transform:none}
}
@keyframes mbc-gauge-spin{
  to{transform:rotate(360deg)}
}
@keyframes mbc-ping{
  0%{opacity:.8;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(1.85)}
}

.mbc-title{
  margin:0 0 7px;
  padding:0;
  font-size:22px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.015em;
  color:#fff;
  animation:mbc-title-in .55s var(--mbc-ease) .1s both;
}

@keyframes mbc-title-in{
  from{opacity:0;transform:translateY(8px);letter-spacing:.04em}
  to{opacity:1;transform:none;letter-spacing:-.015em}
}

.mbc-subtitle{
  margin:0 auto;
  max-width:46ch;
  padding:0;
  font-size:13.2px;
  line-height:1.55;
  color:rgba(255,255,255,.9);
  animation:mbc-sub-in .55s var(--mbc-ease) .18s both;
}

@keyframes mbc-sub-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

.mbc-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:13px;
  padding:5px 12px 5px 9px;
  border-radius:5px;
  background:rgba(10,125,67,.5);
  border:1px solid rgba(79,201,138,.55);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  animation:mbc-badge-in .5s var(--mbc-snap) .26s both;
}

@keyframes mbc-badge-in{
  from{opacity:0;transform:translateY(5px) scale(.95)}
  to{opacity:1;transform:none}
}

.mbc-badge-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--mbc-green-3);
  animation:mbc-dot-blink 2.2s ease-in-out infinite;
}

@keyframes mbc-dot-blink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(79,201,138,.7)}
  50%{opacity:.55;box-shadow:0 0 0 5px rgba(79,201,138,0)}
}

/* ===============================================================
   Body
   =============================================================== */
.mbc-body{padding:19px 19px 5px}

/* ===============================================================
   Tabs — underline indicator with an icon beside each label
   =============================================================== */
.mbc-tabs{
  position:relative;
  display:flex;
  padding:0 5px;
  margin-bottom:19px;
  border-bottom:2px solid var(--mbc-line);
}

.mbc-tab-pill{
  position:absolute;
  left:0;bottom:-2px;
  height:2px;
  width:0;
  background:linear-gradient(90deg,var(--mbc-green),var(--mbc-green-2));
  border-radius:2px 2px 0 0;
  transition:transform .32s var(--mbc-ease),width .32s var(--mbc-ease);
}

.mbc-tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  padding:11px 6px 12px;
  border:0;
  background:none;
  cursor:pointer;
  color:var(--mbc-faint);
  transition:color .2s var(--mbc-ease);
}

.mbc-tab:hover{color:var(--mbc-muted)}
.mbc-tab.is-active{color:var(--mbc-navy)}
.mbc-tab:focus-visible{outline:2px solid var(--mbc-navy-3);outline-offset:-3px;border-radius:5px}

.mbc-tab-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
}

.mbc-tab-ico{
  display:inline-flex;
  opacity:.6;
  transform:translateY(.5px);
  transition:opacity .2s var(--mbc-ease),transform .3s var(--mbc-snap);
}
.mbc-tab.is-active .mbc-tab-ico{opacity:1;transform:translateY(.5px) scale(1.08)}

.mbc-tab-sub{
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  opacity:.75;
}

/* ===============================================================
   Field
   =============================================================== */
.mbc-field[hidden]{display:none}

.mbc-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
  font-size:13px;
  font-weight:700;
  color:var(--mbc-ink);
}

.mbc-note{
  flex:none;
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-left:2px solid var(--mbc-amber);
  background:rgba(242,177,52,.14);
  color:#8a6212;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  animation:mbc-note-in .3s var(--mbc-snap) both;
}
.mbc-note[hidden]{display:none}

@keyframes mbc-note-in{
  from{opacity:0;transform:translateX(6px)}
  to{opacity:1;transform:none}
}

.mbc-input-shell{
  position:relative;
  display:flex;
  align-items:center;
}

.mbc-input{
  width:100%;
  padding:14px 78px 14px 14px;
  border:1.5px solid var(--mbc-line-2);
  border-left:4px solid var(--mbc-line-2);
  border-radius:8px;
  background:var(--mbc-surface-2);
  color:var(--mbc-ink);
  font-size:19px;
  font-weight:700;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  transition:border-color .22s var(--mbc-ease),background .22s var(--mbc-ease),box-shadow .22s var(--mbc-ease);
}

.mbc-input::placeholder{color:#9fadc2;font-weight:500;letter-spacing:.08em}
.mbc-input:hover{border-color:var(--mbc-navy-3)}

.mbc-input:focus{
  outline:none;
  background:var(--mbc-surface);
  border-color:var(--mbc-navy-3);
  border-left-color:var(--mbc-navy-3);
  box-shadow:0 0 0 3px rgba(32,80,155,.14);
}

.mbc-input.is-ready{
  border-color:var(--mbc-green);
  border-left-color:var(--mbc-green);
  background:var(--mbc-mint);
}
.mbc-input.is-ready:focus{box-shadow:0 0 0 3px rgba(10,125,67,.16)}

.mbc-input.is-error{
  border-color:var(--mbc-danger);
  border-left-color:var(--mbc-danger);
  background:var(--mbc-danger-soft);
  animation:mbc-shake .4s var(--mbc-ease);
}

@keyframes mbc-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(2px)}
}

.mbc-clear{
  position:absolute;
  right:44px;
  width:24px;height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:5px;
  background:var(--mbc-line);
  color:var(--mbc-muted);
  cursor:pointer;
  transition:background .18s var(--mbc-ease),color .18s var(--mbc-ease);
}
.mbc-clear[hidden]{display:none}
.mbc-clear:hover{background:var(--mbc-line-2);color:var(--mbc-navy)}

.mbc-tick{
  position:absolute;
  right:13px;
  width:24px;height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--mbc-green);
  color:#fff;
  opacity:0;
  transform:scale(.5);
  transition:opacity .22s var(--mbc-ease),transform .3s var(--mbc-snap);
  pointer-events:none;
}

.mbc-tick svg path{
  stroke-dasharray:24;
  stroke-dashoffset:24;
}

.mbc-input.is-ready ~ .mbc-tick{opacity:1;transform:scale(1)}
.mbc-input.is-ready ~ .mbc-tick svg path{animation:mbc-tick-draw .35s var(--mbc-ease) .1s forwards}

@keyframes mbc-tick-draw{
  to{stroke-dashoffset:0}
}

/* ---------- segmented digit track ---------- */
.mbc-meter{
  --n:14;
  position:relative;
  height:6px;
  margin-top:9px;
  border-radius:3px;
  background:var(--mbc-line);
  overflow:hidden;
}

.mbc-field[data-panel="cid"] .mbc-meter{--n:10}

.mbc-meter-fill{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--mbc-navy-3),var(--mbc-navy-2));
  transition:width .3s var(--mbc-ease),background .25s var(--mbc-ease);
}

.mbc-meter.is-full .mbc-meter-fill{
  background:linear-gradient(90deg,var(--mbc-green),var(--mbc-green-2));
}

/* notches cut the bar into one segment per expected digit */
.mbc-meter::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0 calc(100% / var(--n) - 2px),
    var(--mbc-surface) calc(100% / var(--n) - 2px) calc(100% / var(--n))
  );
}

.mbc-hint{
  display:block;
  margin-top:9px;
  font-size:12.2px;
  line-height:1.55;
  color:var(--mbc-muted);
}

/* ===============================================================
   Status line
   =============================================================== */
.mbc-status{
  min-height:17px;
  margin-top:9px;
  font-size:12.4px;
  font-weight:700;
  color:var(--mbc-muted);
}
.mbc-status:not(:empty){animation:mbc-status-in .25s var(--mbc-ease) both}
.mbc-status.is-ready{color:var(--mbc-ok)}

@keyframes mbc-status-in{
  from{opacity:0;transform:translateY(-3px)}
  to{opacity:1;transform:none}
}

/* ===============================================================
   Remember checkbox
   =============================================================== */
.mbc-save{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  margin:12px 0 14px;
  padding:10px 12px;
  border:1px solid var(--mbc-line);
  border-left:3px solid var(--mbc-line-2);
  border-radius:7px;
  background:var(--mbc-surface-2);
  cursor:pointer;
  transition:border-color .2s var(--mbc-ease),background .2s var(--mbc-ease);
}
.mbc-save:hover{border-left-color:var(--mbc-green);background:var(--mbc-mint)}

.mbc-save-toggle{position:absolute;opacity:0;width:0;height:0}

.mbc-save-box{
  flex:none;
  width:18px;height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid var(--mbc-line-2);
  border-radius:4px;
  background:var(--mbc-surface);
  color:#fff;
  transition:background .2s var(--mbc-ease),border-color .2s var(--mbc-ease);
}
.mbc-save-box svg{opacity:0;transform:scale(.6);transition:opacity .18s,transform .22s var(--mbc-snap)}

.mbc-save-toggle:checked ~ .mbc-save-box{background:var(--mbc-green);border-color:var(--mbc-green)}
.mbc-save-toggle:checked ~ .mbc-save-box svg{opacity:1;transform:none}
.mbc-save-toggle:focus-visible ~ .mbc-save-box{box-shadow:0 0 0 3px rgba(32,80,155,.2)}

.mbc-save-text{font-size:12.8px;color:var(--mbc-muted);font-weight:600}

/* ===============================================================
   Submit — navy slab with an energy line running under it
   =============================================================== */
.mbc-submit{
  position:relative;
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:15px 18px;
  border:0;
  border-radius:8px;
  background:linear-gradient(135deg,var(--mbc-navy) 0%,var(--mbc-navy-2) 100%);
  color:#fff;
  font-size:15.5px;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 6px 16px -9px rgba(13,31,71,.85);
  transition:transform .2s var(--mbc-ease),box-shadow .2s var(--mbc-ease);
}

.mbc-submit::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--mbc-green-3),transparent);
  transform:translateX(-100%);
  animation:mbc-btn-flow 3s var(--mbc-ease) infinite;
}

@keyframes mbc-btn-flow{
  0%{transform:translateX(-100%)}
  55%,100%{transform:translateX(100%)}
}

.mbc-submit:hover{transform:translateY(-2px);box-shadow:0 12px 22px -10px rgba(13,31,71,.9)}
.mbc-submit:active{transform:translateY(0)}
.mbc-submit:focus-visible{outline:3px solid rgba(32,80,155,.45);outline-offset:2px}
.mbc-submit:disabled{cursor:default;opacity:.9;transform:none}

.mbc-submit-arrow{display:inline-flex;transition:transform .25s var(--mbc-snap)}
.mbc-submit:hover .mbc-submit-arrow{transform:scale(1.12)}

.mbc-spinner{
  display:none;
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:mbc-spin .7s linear infinite;
}
.mbc-submit.is-loading .mbc-spinner{display:block}
.mbc-submit.is-loading .mbc-submit-arrow{display:none}

@keyframes mbc-spin{to{transform:rotate(360deg)}}

/* ===============================================================
   Error
   =============================================================== */
.mbc-error{
  margin-top:11px;
  padding:10px 12px;
  border-left:3px solid var(--mbc-danger);
  border-radius:0 6px 6px 0;
  background:var(--mbc-danger-soft);
  color:#8f2418;
  font-size:12.6px;
  font-weight:700;
  line-height:1.5;
  animation:mbc-status-in .25s var(--mbc-ease) both;
}
.mbc-error[hidden]{display:none}

/* ===============================================================
   Bill alert opt-in
   =============================================================== */
.mbc-ask{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-top:15px;
  padding:13px 14px;
  border:1px solid var(--mbc-line);
  border-left:3px solid var(--mbc-navy-3);
  border-radius:7px;
  background:var(--mbc-surface-2);
  animation:mbc-ask-in .4s var(--mbc-snap) both;
}
.mbc-ask[hidden]{display:none}

@keyframes mbc-ask-in{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}

.mbc-ask-bell{
  flex:none;
  width:30px;height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:var(--mbc-navy);
  color:#fff;
}

.mbc-ask-body{flex:1;min-width:0}
.mbc-ask-title{display:block;font-size:13px;font-weight:800;color:var(--mbc-ink)}
.mbc-ask-text{margin:3px 0 0;font-size:12.2px;line-height:1.5;color:var(--mbc-muted)}

.mbc-ask-actions{display:flex;flex-direction:column;gap:6px;flex:none}

.mbc-ask-yes,
.mbc-ask-no{
  padding:7px 13px;
  border-radius:6px;
  font-size:12.2px;
  font-weight:700;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .18s var(--mbc-ease),transform .18s var(--mbc-ease);
}

.mbc-ask-yes{background:var(--mbc-green);color:#fff}
.mbc-ask-yes:hover{background:var(--mbc-green-2);transform:translateY(-1px)}
.mbc-ask-yes:disabled{opacity:.7;cursor:default;transform:none}

.mbc-ask-no{background:transparent;border-color:var(--mbc-line-2);color:var(--mbc-muted)}
.mbc-ask-no:hover{background:var(--mbc-line);color:var(--mbc-navy)}

.mbc-ask.is-done{border-left-color:var(--mbc-green);background:var(--mbc-mint)}
.mbc-ask.is-done .mbc-ask-bell{background:var(--mbc-green)}

/* ===============================================================
   Saved numbers
   =============================================================== */
.mbc-saved{margin-top:15px}
.mbc-saved[hidden]{display:none}

.mbc-saved-heading{
  display:block;
  margin-bottom:8px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--mbc-faint);
}

.mbc-saved-list{display:flex;flex-wrap:wrap;gap:7px}

.mbc-chip{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--mbc-line-2);
  border-radius:6px;
  overflow:hidden;
  background:var(--mbc-surface-2);
  animation:mbc-chip-in .35s var(--mbc-snap) both;
  transition:border-color .18s var(--mbc-ease),transform .18s var(--mbc-ease);
}
.mbc-chip:hover{border-color:var(--mbc-green);transform:translateY(-1px)}

@keyframes mbc-chip-in{
  from{opacity:0;transform:translateY(6px) scale(.96)}
  to{opacity:1;transform:none}
}

.mbc-chip-use{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:0;
  background:none;
  color:var(--mbc-ink);
  font-size:12.6px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
  cursor:pointer;
}

.mbc-chip-tag{
  padding:2px 5px;
  border-radius:3px;
  background:var(--mbc-navy);
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.07em;
}

.mbc-chip-del{
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  border:0;
  border-left:1px solid var(--mbc-line-2);
  background:none;
  color:var(--mbc-faint);
  cursor:pointer;
  transition:background .18s var(--mbc-ease),color .18s var(--mbc-ease);
}
.mbc-chip-del:hover{background:var(--mbc-danger-soft);color:var(--mbc-danger)}

/* ===============================================================
   Help
   =============================================================== */
.mbc-help{
  margin-top:16px;
  border-top:1px solid var(--mbc-line);
  padding-top:4px;
}

.mbc-help-toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 2px;
  border:0;
  background:none;
  cursor:pointer;
  color:var(--mbc-ink);
  font-size:13.4px;
  font-weight:700;
  text-align:left;
}

.mbc-help-icon{
  flex:none;
  width:26px;height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:var(--mbc-mint);
  color:var(--mbc-green);
}

.mbc-help-chevron{
  margin-left:auto;
  display:inline-flex;
  color:var(--mbc-faint);
  transition:transform .3s var(--mbc-ease);
}
.mbc-help-toggle[aria-expanded="true"] .mbc-help-chevron{transform:rotate(180deg)}

.mbc-help-panel{padding:2px 0 14px;animation:mbc-panel-drop .32s var(--mbc-ease) both}
.mbc-help-panel[hidden]{display:none}

@keyframes mbc-panel-drop{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

/* mini bill — mirrors the real MEPCO consumer detail box */
.mbc-mini-bill{
  border:1px solid var(--mbc-line-2);
  border-radius:7px;
  overflow:hidden;
  background:var(--mbc-surface);
}

.mbc-mini-top{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  background:var(--mbc-navy);
  color:#fff;
}

.mbc-mini-brand{font-size:13px;font-weight:800;letter-spacing:.04em}
.mbc-mini-tag{font-size:9px;font-weight:700;letter-spacing:.08em;opacity:.8;text-transform:uppercase}

.mbc-mini-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 11px;
  border-bottom:1px dashed var(--mbc-line);
}

.mbc-mini-row--ref{background:var(--mbc-mint)}

.mbc-mini-key{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--mbc-muted);
  text-transform:uppercase;
}

.mbc-mini-val{
  font-size:13.4px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:.05em;
  color:var(--mbc-ink);
}

.mbc-mini-val em{
  font-style:normal;
  padding:1px 4px;
  border-radius:3px;
  background:rgba(10,125,67,.16);
  color:var(--mbc-green);
}

.mbc-mini-lines{padding:10px 11px;display:grid;gap:5px}
.mbc-mini-lines span{height:5px;border-radius:3px;background:var(--mbc-line)}
.mbc-mini-lines span:nth-child(1){width:76%}
.mbc-mini-lines span:nth-child(2){width:58%}
.mbc-mini-lines span:nth-child(3){width:67%}

.mbc-help-list{
  margin:13px 0 0;
  padding:0;
  list-style:none;
  counter-reset:mbc-step;
}

.mbc-help-list li{
  position:relative;
  counter-increment:mbc-step;
  padding:0 0 0 27px;
  margin-bottom:9px;
  font-size:12.4px;
  line-height:1.6;
  color:var(--mbc-muted);
}

.mbc-help-list li::before{
  content:counter(mbc-step);
  position:absolute;
  left:0;top:1px;
  width:18px;height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  background:var(--mbc-navy);
  color:#fff;
  font-size:10px;
  font-weight:800;
}

/* ===============================================================
   Footer
   =============================================================== */
.mbc-footer{
  padding:13px 19px 15px;
  border-top:1px solid var(--mbc-line);
  background:var(--mbc-surface-2);
  font-size:11.2px;
  line-height:1.6;
  color:var(--mbc-faint);
  text-align:center;
}

/* ===============================================================
   Overlay — radar ping stack
   =============================================================== */
.mbc-overlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(13,31,71,.93);
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px);
  animation:mbc-status-in .25s var(--mbc-ease) both;
}
.mbc-overlay[hidden]{display:none}

.mbc-overlay-inner{text-align:center;padding:20px}

.mbc-meter-anim{
  position:relative;
  width:56px;height:56px;
  margin:0 auto 15px;
}

.mbc-meter-anim span{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--mbc-green-3);
  opacity:0;
  animation:mbc-ripple 2s var(--mbc-ease) infinite;
}
.mbc-meter-anim span:nth-child(2){animation-delay:.5s}
.mbc-meter-anim span:nth-child(3){animation-delay:1s}
.mbc-meter-anim span:nth-child(4){animation-delay:1.5s}

@keyframes mbc-ripple{
  0%{opacity:.9;transform:scale(.25)}
  100%{opacity:0;transform:scale(1)}
}

.mbc-overlay-text{
  margin:0;
  color:#fff;
  font-size:13.6px;
  font-weight:700;
}

.mbc-overlay-link{
  display:inline-block;
  margin-top:11px;
  color:var(--mbc-green-3);
  font-size:12.4px;
  font-weight:700;
  text-decoration:underline;
}
.mbc-overlay-link[hidden]{display:none}

/* ===============================================================
   Responsive
   =============================================================== */
@media(max-width:620px){
  .mbc-wrap{margin:18px auto}
  .mbc-header{padding:21px 16px 23px}
  .mbc-title{font-size:19.5px}
  .mbc-subtitle{font-size:12.6px}
  .mbc-body{padding:16px 15px 5px}
  .mbc-input{font-size:17px;padding:13px 74px 13px 12px}
  .mbc-footer{padding:12px 15px 14px}
  .mbc-ask{flex-wrap:wrap}
  .mbc-ask-actions{flex-direction:row;width:100%}
  .mbc-ask-actions button{flex:1}
}

@media(max-width:400px){
  .mbc-tab-label{font-size:13px;gap:5px}
  .mbc-tab-sub{font-size:10px}
  .mbc-input{font-size:15.5px;letter-spacing:.05em}
  .mbc-save-text{font-size:12px}
}

@media(max-width:330px){
  .mbc-tab-ico{display:none}
  .mbc-input{font-size:14.5px;padding-right:70px}
}

/* ===============================================================
   Optional auto dark mode — enable with [mepco_bill_checker dark="auto"]
   =============================================================== */
@media(prefers-color-scheme:dark){
  .mbc-auto-dark{
    --mbc-mint:#0f2a1d;
    --mbc-mint-2:#17402c;
    --mbc-surface:#0c1626;
    --mbc-surface-2:#111d31;
    --mbc-ink:#e6edf8;
    --mbc-muted:#9fb0c9;
    --mbc-faint:#7a8ba5;
    --mbc-line:#1c2b42;
    --mbc-line-2:#283a55;
    --mbc-danger-soft:#2a1614;
    --mbc-danger-line:#5a2a24;
  }
  .mbc-auto-dark .mbc-input::placeholder{color:#5e7091}
  .mbc-auto-dark .mbc-mini-lines span{background:#1c2b42}
  .mbc-auto-dark .mbc-clear{background:#1c2b42;color:#9fb0c9}
  .mbc-auto-dark .mbc-clear:hover{background:#283a55;color:#e6edf8}
  .mbc-auto-dark .mbc-error{color:#ffb3a6}
  .mbc-auto-dark .mbc-note{background:rgba(242,177,52,.12);color:#e6b055}
  .mbc-auto-dark .mbc-help-icon{background:#0f2a1d;color:#4fc98a}
  .mbc-auto-dark .mbc-mini-val em{background:rgba(79,201,138,.16);color:#4fc98a}
  .mbc-auto-dark .mbc-overlay{background:rgba(6,12,24,.94)}
}

/* ===============================================================
   Reduced motion
   =============================================================== */
@media(prefers-reduced-motion:reduce){
  .mbc-wrap *,
  .mbc-wrap *::before,
  .mbc-wrap *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .mbc-input.is-ready ~ .mbc-tick svg path{stroke-dashoffset:0}
}