/* ── 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 300×300 base, scaled by JS ─ */

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

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

.ad-logo {
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 65px;
  height: auto;
  z-index: 2;
}

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

h1 
{
    position: absolute;
    left: 15px;
    right: 10px;
    top: 9px;
    text-align: left;
    font-family: "S Bonus Display", Arial, sans-serif;
    font-weight: 400;
    color: #007841;
    text-transform: uppercase;
    font-size: 34px;
    line-height: 1.0;
    letter-spacing: 0.4px;
    z-index: 2;
}

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

.calc-panel {
 position: absolute;
    left: 11px;
    right: 11px;
    top: 50px;
    height: 141px;
    background: #fff;
    border-radius: 18px;
    z-index: 1;
}

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

.calc-label {
position: absolute;
    left: 24px;
    width: 138px;
    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.7px;
    z-index: 2;
}

.calc-label-amount { top: 55px; }
.calc-label-time   { top: 103px; }

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

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

.calc-row-amount { top: 70px; }
.calc-row-time   { top: 118px; }

/* ── +/− 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: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 134px;
    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: 170px;
    right: 8px;
    top: 85px;
    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.7px;
    z-index: 2;
}

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

.calc-total {
    position: absolute;
    left: 170px;
    right: 6px;
    top: 102px;
    text-align: center;
    font-family: "S Bonus Display", Arial, sans-serif;
    font-weight: 400;
    font-size: 26px;
    color: #004421;
    line-height: 1.0;
    z-index: 2;
    letter-spacing: -0.6px;
}

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

.cta-btn {
  position: absolute;
  left: 82px;
  top: 155px;
  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;
  color: #004421;
  white-space: nowrap;
}

.cta-label {
  font-family: "S Bonus UX", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.2px;
  margin-top: 0px;
}

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

.disclaimer {
position: absolute;
    left: 9px;
    right: 8px;
    top: 199px;
    font-family: "S Bonus UX", Arial, sans-serif;
    font-weight: 400;
    font-size: 11.67px;
    color: #004421;
    line-height: 1.06;
    letter-spacing: -0.1px;
    text-align: center;
    z-index: 2;
}

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

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

.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: 8px;
  right: 8px;
  top: 5px;
  bottom: 10px;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
  z-index: 0;
  pointer-events: none;
}

.modal-close {
position: absolute;
    top: 23px;
    right: 22px;
    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: 2px;
  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: 18px;
    right: 36px;
    top: 25px;
    z-index: 11;
    overflow: hidden;
    max-height: 250px;
}

.modal-text {
     font-family: "S Bonus UX", Arial, sans-serif;
    font-weight: 400;
    font-size: 15.0px;
    color: #004421;
    line-height: 1.1;
    letter-spacing: -0.2px;
    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.0;
}

/* ── 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;
}