/* =========================================================
   Best Finance Calculator — Adsterra ad slot styles
   Loaded AFTER style.css / calculator.css.
   Adds new classes only: no existing rule is modified, so the
   site's design and structure stay exactly as they were.
   ========================================================= */

/* Wrapper around each sidebar ad position. */
.ad-slot { position: relative; }

/* The Adsterra mount is empty (and hidden) until a real ad is injected. */
.adsterra-mount { display: none; }

/* WHILE THE AD REQUEST IS IN FLIGHT the mount is rendered off-screen.
   The iframe still loads normally, but the visitor keeps seeing the house
   ad — so a slot that never fills (e.g. the editor preview, or an ad
   blocker) can never leave an empty grey rectangle in the sidebar, and
   there is no layout shift either. */
.adsterra-mount.is-loading {
  display: block;
  position: absolute;
  left: -10000px;
  top: 0;
  width: 300px;
  height: var(--ad-h, 250px);
  overflow: hidden;
}

/* Confirmed filled: bring it into the layout and centre it. */
.adsterra-mount.is-active {
  display: flex;
  position: static;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: var(--ad-h, 250px);
  border-radius: 8px;
  overflow: hidden;
}

.adsterra-mount iframe,
.adsterra-mount img {
  border: 0;
  display: block;
  max-width: 100%;
}

/* Native Banner stretches to the sidebar width instead of a fixed box. */
.adsterra-mount[data-ad-format="native"] {
  min-height: 200px;
  display: block;
  background: transparent;
}

/* Once a real Adsterra ad is mounted, the placeholder house ad steps aside. */
.ad-slot.adsterra-live .house-ad { display: none; }

/* =========================================================
   SPLIT-SIDE AD SLOTS (How It Works | Tips) & (Plan | Wealth)
   ---------------------------------------------------------
   These two boxes are 288px wide — 12px narrower than a 300x250
   creative — so ads.js scales the unit with the same .lb-scale
   wrapper the leaderboard uses. Nothing here changes the boxes'
   own appearance: the rules only apply once a real ad is live.
   ========================================================= */

/* The "Advertisement" caption above the Tips card is site content, not
   an advert, so the label stays hidden until a real ad replaces it. */
.label-when-live { display: none; }
.ad-slot.adsterra-live .label-when-live { display: block; }

/* Centre the scaled creative in the 288px track and keep the box the
   same height the house ad occupied, so nothing on the row shifts. */
.split-ad-slot.adsterra-live {
  justify-content: flex-start;
  align-items: center;
}
.split-ad-slot .adsterra-mount.is-active {
  width: 100%;
  justify-content: center;
}

/* =========================================================
   TALL SLOT — fills the long empty stretch at the sidebar bottom
   ---------------------------------------------------------
   The main column is ~780-940px taller than the sidebar, leaving a
   big blank area. This slot sits at the very bottom of .side-column
   and sticks to the viewport while the visitor scrolls that stretch,
   so the space earns instead of sitting empty.
   ========================================================= */
/* Wrapper holding the TWO 160x600 units side by side. It is the element
   that sticks, so the pair scrolls together. */
.tall-pair {
  /* 65px sticky header + 14px breathing room. */
  position: sticky;
  top: 79px;
  display: grid;
  grid-template-columns: 160px 160px;
  gap: 8px;
  /* Two 160px units + an 8px gap need 328px, but the sidebar track is
     315px. The page container has 18px of padding to the right of the
     sidebar, so the pair is allowed to use 13px of it — the ads stay
     fully inside the page and NOTHING in the existing grid moves. */
  width: 328px;
  margin-right: -13px;
}
.tall-pair .ad-slot { min-width: 0; }

/* The "Advertisement" label spans both columns, like the single slots. */
.tall-pair-label { grid-column: 1 / -1; }

/* House ad shown in the tall slots until real skyscrapers fill them.
   Sized for the narrow 160px column. */
.sky-house {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  min-height: 600px;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(165deg, #1f3c88 0%, #16306e 55%, #0f2350 100%);
}
/* Second card in the pair gets a different tone so the two do not look
   like one duplicated block. */
.sky-house.sky-alt {
  background: linear-gradient(165deg, #12704f 0%, #0e5c43 55%, #083f30 100%);
}
.sky-house .sky-ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.14);
  margin-bottom: 14px;
}
.sky-house h4 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 9px;
}
.sky-house p {
  font-size: 12px;
  line-height: 1.55;
  opacity: 0.9;
  margin-bottom: 16px;
}
.sky-house .sky-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.sky-house .sky-list li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 9px;
}
.sky-house .sky-list i {
  color: var(--gold, #f5b301);
  font-size: 11px;
  margin-top: 2px;
  flex-shrink: 0;
}
.sky-house.sky-alt .sky-list i { color: #7ff0c0; }
.sky-house .sky-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--gold, #f5b301);
  color: #16314f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  line-height: 1.2;
}
.sky-house.sky-alt .sky-btn { background: #23d18b; color: #063a2a; }

/* The tall pair only makes sense beside a long main column. On phones the
   sidebar stacks under the content, where 600px units would be a wall of
   ad — so it is hidden there, exactly like the other desktop-only slots. */
@media (max-width: 1000px) {
  .tall-pair { display: none; }
}

/* On phones the sidebar is full width; keep the 300x250 unit centred. */
@media (max-width: 1000px) {
  .adsterra-mount.is-active { justify-content: center; }
}

/* =========================================================
   LEADERBOARD SLOT — 728x90 in-content banner
   ---------------------------------------------------------
   The main column is 809px on desktop, so 728px fits. But the column
   narrows to ~724px at 760px viewport and ~653px at 1024px, and down to
   354px on a phone. An iframe cannot reflow, so the mount SCALES the unit
   down proportionally with a transform instead of letting it overflow.
   ========================================================= */
.ad-slot-leader { position: relative; }

/* Keep the leaderboard centred in the column. */
.adsterra-mount[data-ad-format^="leaderboard"].is-active {
  min-height: 90px;
  justify-content: center;
  background: transparent;
}

/* Proportional downscale wrapper: transform keeps the ad's own pixel
   dimensions intact (Adsterra requires exactly 728x90) while making it
   visually fit a narrower column.

   The scale factor is NOT set with media queries — fixed breakpoints
   cannot know the real column width (this site's main column is 809px at
   1280px but 964px at 1000px, because the sidebar stacks). js/ads.js
   measures the column and sets --lb-scale per slot, then keeps it in sync
   on resize. That is exact at every width, including 320px phones.

   The unit's own pixel size is written into --lb-w / --lb-h by ads.js,
   so the same wrapper serves the 728x90 leaderboard AND the 320x50
   mobile banner used in the footer bar. */
.lb-scale {
  width: var(--lb-w, 728px);
  height: var(--lb-h, 90px);
  transform: scale(var(--lb-scale, 1));
  transform-origin: top center;
  flex: 0 0 auto;
}

/* Collapse the reserved box down to the scaled height so no blank strip
   is left under the banner. Applies to the scaled 300x250 "banner-fit"
   units too, which use the very same .lb-scale wrapper. */
.adsterra-mount[data-ad-format^="leaderboard"].is-active,
.adsterra-mount[data-ad-format^="banner-fit"].is-active {
  min-height: calc(var(--lb-h, 90px) * var(--lb-scale, 1));
  height: calc(var(--lb-h, 90px) * var(--lb-scale, 1));
  overflow: hidden;
}

/* =========================================================
   FIXED FOOTER BAR (anchor ad) — mobile + desktop
   ---------------------------------------------------------
   Injected into <body> by js/ads.js, so no page markup changed.
   Pinned to the bottom of the viewport on every page.
   ========================================================= */
.sticky-ad-bar {
  /* !important because an ad network's own stylesheet (Adsterra injects
     CSS for some formats) must never be able to knock the bar back into
     the normal document flow — that is what makes it slide down to the
     footer instead of staying pinned on a phone. */
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Width is tied to the VISUAL viewport, not the layout box. If any
     element makes the page wider than the screen, `left/right:0` would
     stretch the bar across that wider box and push the creative out of
     sight; 100vw + a hard max keeps it on screen regardless. */
  width: 100vw;
  max-width: 100vw;
  /* Above page content, but BELOW #toast (z-index 100) so toast messages
     are never hidden behind the ad. The sticky header uses 50. */
  z-index: 90;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--gray-200, #e2e8f0);
  box-shadow: 0 -2px 14px rgba(15, 35, 80, 0.12);
  /* Keep clear of the iPhone home-indicator bar. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Its own compositing layer: stops mobile Safari/Chrome repainting it
     one frame late while scrolling, which reads as the bar "lagging"
     down the page. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sticky-ad-inner {
  position: relative;
  display: flex;
  align-items: center;
  /* The close button is a real flex item pinned to the right end, and the
     mount takes all remaining space and centres the creative inside it.
     This keeps the ad optically centred in its own area while GUARANTEEING
     the button can never sit on top of it — even at 320px, where an
     absolutely-positioned button used to overlap the creative. */
  justify-content: space-between;
  gap: 6px;
  min-height: 56px;
  padding: 5px 6px;
}

/* The mount fills the space left of the close button and centres the
   creative within it. */
.sticky-ad-bar .adsterra-mount.is-active {
  flex: 1 1 auto;
  min-width: 0;          /* allows the flex item to shrink below 320px */
  justify-content: center;
  border-radius: 0;
  background: transparent;
}

/* While loading, ads.js parks the mount off-screen; the bar would then
   be an empty white strip, so keep it collapsed until the ad is live. */
.sticky-ad-bar:not(.adsterra-live) .sticky-ad-inner { min-height: 0; padding: 0; }
.sticky-ad-bar:not(.adsterra-live) { border-top: none; box-shadow: none; background: none; }
.sticky-ad-bar:not(.adsterra-live) .sticky-ad-close { display: none; }

.sticky-ad-close {
  /* A flex item, not absolute: it now occupies real space at the right
     end so the creative is laid out beside it instead of underneath. */
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 50%;
  background: #fff;
  color: #475569;
  font-size: 17px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sticky-ad-close:hover { background: #f1f5f9; color: #0f172a; }

/* Give the page bottom room so the bar never covers the footer's last
   line. --sticky-ad-pad is written by js/ads.js from the bar's MEASURED
   height + 16px (a 728x90 bar is ~101px tall with padding and border,
   not 90), so the clearance always matches the real bar.

   It defaults to 0 and is only set once a creative is CONFIRMED, so
   while the ad request is in flight — or if it never fills — the page
   reserves nothing and there is no empty strip under the footer. */
body.has-sticky-ad .site-footer {
  padding-bottom: var(--sticky-ad-pad, 0px);
}

/* Lift the toast above the bar so the two never overlap. */
body.has-sticky-ad #toast {
  bottom: max(22px, var(--sticky-ad-pad, 22px));
}

@media (max-width: 780px) {
  /* Padding stays SYMMETRIC — the close button is absolutely positioned,
     so reserving space for it on the right only pushed the creative
     12px off centre on every phone. */
  .sticky-ad-inner { min-height: 52px; padding: 4px; }
}