/* ==========================================================================
   /buy-youtube-shoutouts — the on-page campaign builder

   Split out of shoutout-landing.css (which was at its 1,500-line limit) and
   loaded only when the builder actually renders. Everything the builder needs
   comes from buy-youtube-subscribers-checkout.css, which this page loads
   unchanged; this file is only what that shared file cannot know.
   ========================================================================== */


/* Section rhythm and the small-screen refinements the subscribers and views
   pages carry under their own body class (body.bys-page / body.byv-page in
   buy-youtube-subscribers.css). Duplicated here rather than loading that
   2,500-line stylesheet for forty lines of it. Change them there, change
   them here too.

   Everything the builder needs comes from buy-youtube-subscribers-checkout.css,
   which this page loads unchanged. What lives here is only what that file
   cannot know: the page's own section rhythm around it, and the small-screen
   refinements the subscribers and views pages carry under their own body
   class (body.bys-page / body.byv-page in buy-youtube-subscribers.css). Those
   are duplicated here rather than loading that 2,500-line stylesheet for
   forty lines of it. If you change them there, change them here too.
   ========================================================================== */
.sol-checkout {
  padding-top: var(--space-8);
  /* .home-section sets position:relative. That makes offsetTop inside this
     section measure from the section instead of the document, which is what
     threw every scroll-to-checkout thousands of pixels off. Nothing in here
     is absolutely positioned, so static is safe and keeps the site-wide
     anchor scroll in main.js correct. */
  position: static;
}
.sol-checkout__anchor {
  display: block;
  height: 0;
  /* Stripe returns a cancelled payment to /buy-youtube-shoutouts#checkout.
     That is a browser-native jump with no header offset, so without this the
     heading lands underneath the fixed header. */
  scroll-margin-top: calc(var(--header-height, 60px) + 20px);
}
.sol-checkout .section-header { margin-bottom: var(--space-8); }

@media (max-width: 767px) {
  /* Tactile depress, matching every other tap target on the page */
  body.sol-page .bys-budget-pill:active,
  body.sol-page .tier-card:active,
  body.sol-page .bys-freq-toggle__btn:active,
  body.sol-page .bys-mobile-checkout-btn:active,
  body.sol-page .bys-cta-card__btn:active {
    transform: scale(0.985);
    transition: transform 80ms ease;
  }

  body.sol-page .bys-checkout-layout { gap: 14px; }
  body.sol-page .bys-checkout-left,
  body.sol-page .bys-checkout-right {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08),
                0 8px 22px rgba(15, 23, 42, 0.06);
  }
  body.sol-page .bys-checkout-left__body {
    padding: 16px;
    gap: 18px;
  }

  /* "Most Popular" flag was clipping the pill's top border */
  body.sol-page .bys-budget-pill { position: relative; }
  body.sol-page .bys-budget-pill__popular { top: -9px; }

  /* Estimate bar: drop the top edge-stripe, rebuild as a soft-tint card */
  body.sol-page .bys-estimate-bar {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    border: 1px solid var(--color-gray-100);
    border-top: 1px solid var(--color-gray-100);
    border-radius: 14px;
    padding: 16px;
    background: rgba(var(--color-primary-rgb), 0.05);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  }
  body.sol-page .bys-estimate-bar__number {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }

  body.sol-page .bys-cta-card { padding: 16px; }
  .sol-checkout { padding-top: var(--space-6); }
  .sol-checkout .section-header { margin-bottom: var(--space-6); }
}