/* ── Fonts ─────────────────────────────────────────── */

@font-face {
  font-family: "S Bonus Display";
  src: url('../fonts/SBonusDisplay-Bold.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "S Bonus UX";
  src: url('../fonts/SBonusUXWEB-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "S Bonus UX";
  src: url('../fonts/SBonusUXWEB-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "S Bonus UX";
  src: url('../fonts/SBonusUXWEB-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* ── Reset ─────────────────────────────────────────── */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #D2FCD5;
  font-family: "S Bonus UX", Arial, sans-serif;
}

/* ── Responsive wrapper ────────────────────────────── */

.ad-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* ── Ad container — fixed 980×120 base, scaled by JS ─ */

.ad-container {
  position: relative;
  width: 980px;
  height: 120px;
  background: #D2FCD5;
  overflow: hidden;
  transform-origin: 0 0;
}

/* ── Logo ──────────────────────────────────────────── */

.ad-logo {
position: absolute;
    left: 124px;
    top: 71px;
    width: 106px;
    height: auto;
    z-index: 2;
}

/* ── Heading ───────────────────────────────────────── */

h1 {
position: absolute;
    left: 19px;
    top: 21px;
    width: 215px;
    font-family: "S Bonus Display", Arial, sans-serif;
    font-weight: 400;
    color: #007841;
    text-transform: uppercase;
    z-index: 2;
}

h1 span {
  display: block;
  font-size: 40.83px;
  line-height: 0.95;
}

/* ── White calc panel ─────────────────────────────── */

.calc-panel {
    position: absolute;
    left: 354px;
    right: 292px;
    top: 8px;
    bottom: 8px;
    background: #fff;
    border-radius: 20px;
    z-index: 1;
}

/* ── Calc labels ───────────────────────────────────── */

.calc-label {
    position: absolute;
    left: 393px;
    width: 100px;
    text-align: center;
    font-family: "S Bonus UX", Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #004421;
    line-height: 1.15;
    letter-spacing: -0.2px;
    z-index: 2;
}

.calc-label-amount { top: 12px; }
.calc-label-time   { top: 61px; }

/* ── Calc rows ─────────────────────────────────────── */

.calc-row {
position: absolute;
    left: 364px;
    width: 157px;
    height: 30px;
    z-index: 2;
}

.calc-row-amount { top: 29px; }
.calc-row-time   { top: 76px; }

/* ── +/− buttons ───────────────────────────────────── */

.btn-ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}

.btn-svg {
  display: block;
  width: 31px;
  height: 31px;
}

.btn-circle { fill: #91fa9b; }
.btn-icon   { fill: #004421; }

.btn-ctrl:hover  .btn-circle { fill: #00EB5A; }
.btn-ctrl:active .btn-circle { fill: #00EB5A; }
.btn-ctrl:active .btn-icon   { opacity: 0.6; }

.btn-ctrl:focus-visible .btn-svg {
  outline: 1px solid #000;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 50%;
}

.btn-ctrl.btn-minus { left: 0; }
.btn-ctrl.btn-plus  { right: 0; }

/* ── Value display ─────────────────────────────────── */

.calc-value {
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 155px;
  height: 26px;
  background: #c8fccd;
  border: none;
  border-radius: 8px;
  text-align: center;
  font-family: "S Bonus UX", Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #004421;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.calc-value[role="spinbutton"]:focus-visible {
  outline: 1px solid #000;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 8px;
}

/* ── Result label ──────────────────────────────────── */

.result-label {
position: absolute;
    left: 531px;
    width: 157px;
    top: 18px;
    text-align: center;
    font-family: "S Bonus UX", Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #004421;
    line-height: 1.2;
    letter-spacing: -0.3px;
    z-index: 2;
}

/* ── Result value ──────────────────────────────────── */

.calc-total {
    position: absolute;
    left: 531px;
    width: 157px;
    top: 35px;
    text-align: center;
    font-family: "S Bonus Display", Arial, sans-serif;
    font-weight: 400;
    font-size: 35px;
    color: #004421;
    line-height: 1;
    z-index: 2;
}

/* ── CTA button ────────────────────────────────────── */

.cta-btn {
  position: absolute;
  left: 539px;
  top: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 138px;
  text-decoration: none;
  z-index: 2;
}

.cta-bg {
  display: block;
  width: 138px;
  height: auto;
}

.cta-pill { fill: #91fa9b; }

.cta-btn:hover  .cta-pill { fill: #00EB5A; }
.cta-btn:active .cta-pill { fill: #00EB5A; }
.cta-btn:active .cta-text { opacity: 0.6; }

.cta-btn:focus-visible {
  outline: 1px solid #000;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 15px;
}

.cta-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #004421;
  white-space: nowrap;
}

.cta-label {
  font-family: "S Bonus UX", Arial, sans-serif;
  font-weight: 500;
  font-size: 15px;
  margin-top: -1px;
}

/* ── Disclaimer ────────────────────────────────────── */

.disclaimer {
position: absolute;
    left: 700px;
    right: 13px;
    top: 10px;
    font-family: "S Bonus UX", Arial, sans-serif;
    font-weight: 400;
    font-size: 12.4px;
    color: #004421;
    line-height: 1.0;
    letter-spacing: -0.2px;
    text-align: center;
    z-index: 2;
}

/* ── Example link ──────────────────────────────────── */

.example-link {
position: absolute;
    left: 755px;
    bottom: 9px;
    font-family: "S Bonus UX", Arial, sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    color: #004421;
    text-decoration: underline;
    text-underline-offset: 1px;
    z-index: 2;
}

.example-link:hover  { color: #007A32; }
.example-link:active { opacity: 0.6; }
.example-link:focus-visible {
  outline: 1px solid #000;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 2px;
}

/* ── Modal ─────────────────────────────────────────── */

.modal {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 10;
}

.modal.visible {
  display: block;
}

.modal-bg {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 4px;
  bottom: 4px;
  background: #FFFFFF;
  border-radius: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  z-index: 0;
  pointer-events: none;
}

.modal-close {
    position: absolute;
    top: 26px;
    right: 26px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 12;
}

.modal-close img {
  width: 18px;
  height: 18px;
  display: block;
}

.modal-close-label {
  display: block;
  font-family: "S Bonus UX", Arial, sans-serif;
  font-weight: 500;
  font-size: 7px;
  color: #004421;
  margin-top: 1px;
  text-align: center;
}

.modal-close:hover  img { opacity: 0.6; }
.modal-close:active img { opacity: 0.4; }
.modal-close:focus-visible {
  outline: 1px solid #000;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 4px;
}

.modal-body {
position: absolute;
    left: 33px;
    right: 50px;
    top: 17px;
    z-index: 11;
    overflow: hidden;
}

.modal-text {
font-family: "S Bonus UX", Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #004421;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: left;
}

.modal-heading {
    display: block;
    margin-bottom: 6px;
    font-family: "S Bonus Display", Arial, sans-serif;
    font-weight: 400;
    font-size: 21.67px;
    text-transform: uppercase;
    color: #004421;
    letter-spacing: 0;
    line-height: 1.1;
}

/* ── Screen-reader-only utility ────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}