/* SSCD Premium Earnings Credit calculator — shortcode styles.
   Scoped under .pec-calc so it won't collide with the page.
   Mirrors the PEC hero card (navy/gold, Cera Pro). */

.pec-calc, .pec-calc * { box-sizing: border-box; }
.pec-calc {
  --navy:#002D72; --au-1:#FFE9B0; --au-2:#FFBF3F; --au-3:#D99A22; --au-4:#A86F18;
  --hero-ink:#F7FAFF; --hero-muted:rgba(210,222,245,0.72);
  font-family:'Cera Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
.pec-calc .counter-card {
  margin:0; position:relative; width:100%;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(140,170,235,0.14), transparent 60%),
    linear-gradient(168deg, #0B3F8F 0%, #073372 55%, #052A5E 100%);
  border:1px solid rgba(255,191,63,0.22);
  border-radius:20px; padding:34px 36px;
  box-shadow:0 1px 0 0 rgba(255,255,255,0.06) inset, 0 -2px 0 0 rgba(0,0,0,0.3) inset, 0 34px 70px -30px rgba(0,20,60,0.55);
}
.pec-calc .counter-card::before {
  content:''; position:absolute; left:12%; right:12%; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,191,63,0.45), transparent); pointer-events:none;
}
.pec-calc .counter-value {
  font-size:clamp(40px,7vw,82px); font-weight:700; letter-spacing:-0.03em; line-height:1; margin:10px 0 6px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, var(--au-1) 2%, var(--au-2) 40%, var(--au-3) 70%, var(--au-4) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  position:relative; display:inline-block;
}
.pec-calc .counter-value::after {
  content:attr(data-val); position:absolute; inset:0; z-index:2; letter-spacing:inherit; pointer-events:none;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.5) 44%, #fff 50%, rgba(255,255,255,0.5) 56%, transparent 66%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  background-size:300% 100%; background-position:120% 0; opacity:0;
}
.pec-calc .counter-value.shine::after { animation:pec-sheen 2.2s linear forwards; }
@keyframes pec-sheen { 0%{opacity:0;background-position:120% 0;} 8%{opacity:1;} 92%{opacity:1;} 100%{opacity:0;background-position:-40% 0;} }
.pec-calc .counter-cap { font-size:14px; color:var(--hero-muted); }

.pec-calc .fallback-eyebrow {
  font-size:12px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
  background:linear-gradient(180deg, #FFE9B0, #FFBF3F 60%, #D99A22);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  margin-bottom:14px;
}
.pec-calc .fallback-h { font-size:clamp(24px,3vw,30px); font-weight:700; color:#EAF0FB; letter-spacing:-0.02em; line-height:1.12; margin:0 0 14px; }
.pec-calc .fallback-p { font-size:15.5px; color:#C3CEE4; line-height:1.6; margin:0 0 24px; }

.pec-calc .calc { margin-top:24px; display:grid; gap:18px; }
.pec-calc .calc-field label { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--hero-muted); margin-bottom:9px; }
.pec-calc .calc-val { color:var(--au-2); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; }
.pec-calc .calc-note { margin-top:8px; font-size:11.5px; color:var(--hero-muted); letter-spacing:0.01em; }
.pec-calc .rate-display { padding-top:4px; }
.pec-calc .rate-main { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pec-calc .rate-label { font-size:13px; color:var(--hero-muted); }
.pec-calc .rate-big { font-size:30px; font-weight:700; color:#FFBF3F; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.pec-calc .rate-compare { margin-top:6px; font-size:12px; color:var(--hero-muted); text-align:right; }
.pec-calc .calc input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px; outline:none; cursor:pointer; background:rgba(255,255,255,0.16); }
.pec-calc .calc input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:linear-gradient(180deg, var(--au-1), var(--au-3)); border:none; box-shadow:0 2px 8px rgba(0,0,0,0.4); cursor:pointer; }
.pec-calc .calc input[type=range]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; border:none; background:linear-gradient(180deg, var(--au-1), var(--au-3)); box-shadow:0 2px 8px rgba(0,0,0,0.4); cursor:pointer; }

.pec-calc .btn { font-family:inherit; font-size:15px; font-weight:500; cursor:pointer; padding:14px 28px; border-radius:6px; border:none; text-decoration:none; display:inline-flex; align-items:center; gap:9px; transition:all .2s ease; }
.pec-calc .btn-primary { background:#FFBF3F; color:var(--navy); }
.pec-calc .btn-primary:hover { filter:brightness(1.08); }
.pec-calc .btn-block { display:flex; width:100%; justify-content:center; padding-top:16px; padding-bottom:16px; font-size:16px; font-weight:600; }
.pec-calc .card-cta { margin-top:28px; }
.pec-calc .btn .arw { transition:transform .2s ease; }
.pec-calc .btn:hover .arw { transform:translateX(3px); }