/* Mobile sticky sheet: one component for the landing page and the checkout.
   Moved verbatim from the landing page's sticky-CTA block (plus its badge colour rule);
   the checkout fills the button slot with the step's own action bar. */
/* The base the sheet inherited from the landing page body, carried here so it renders the same on any page. */
.mobile-sticky-cta { font-size: 14px; line-height: 20px; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
  .mobile-sticky-cta { display: none; }
  @media screen and (max-width: 767px) {
    .mobile-sticky-cta {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      background: #fff;
      border-top: 1px solid #e0e0e0;
      box-shadow: 0 -4px 16px rgba(0,0,0,.14);
      padding: 10px 12px;
      padding-bottom: calc(10px + env(safe-area-inset-bottom));
      font-family: Roboto, sans-serif;
      /* Hidden while the hero is in view; slides up once the hero scrolls away */
      transform: translateY(120%);
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: transform .35s ease, opacity .35s ease, visibility 0s linear .35s;
      will-change: transform;
    }
    .mobile-sticky-cta.is-visible {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transition-delay: 0s;
    }
    /* bottom sheet: rounded top, grab handle, soft upward shadow (same look as the hero price sheet and terms sheet) */
    .mobile-sticky-cta { border-top: 0 !important; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(30,29,87,.22) !important; padding-top: 6px !important; overflow: hidden; }
    .msc-grab { display: block; width: 40px; height: 5px; margin: 0 auto 4px; border-radius: 3px; background: #c9d1dc; }
    .msc-badge { translate: -101% 0; transition: translate .6s cubic-bezier(.22,.8,.24,1); }
    .msc-badge.is-out { translate: 0 0; }
    @media (prefers-reduced-motion: reduce) { .msc-badge { translate: 0 0; transition: none; } }
    /* Info row sits above the full-width button */
    .msc-info { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
    /* Discount badge pinned to the leading (left) screen edge, before the title */
    .msc-badge {
      flex: 0 0 auto;
      align-self: center;
      margin-left: -12px;
      background:linear-gradient(135deg,#406EB6,#0C1F48); color: #fff;
      font-weight: 800; text-transform: uppercase; text-align: center;
      font-size: 13px; line-height: .95;
      padding: 8px 12px 8px 10px;
      border-radius: 0 30px 30px 0;
    }
    .msc-info-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .msc-days { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #1E1D57; }
    .msc-pkg { font-size: 15px; font-weight: 700; color: #1E1D57; text-transform: uppercase; line-height: 1.15; }
    .msc-price { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 0 0 auto; padding-left: 26px; padding-right: 16px; margin-left: 14px; border-left: 1px solid #e0e0e0; }
    .msc-retail { order: 0; font-size: 12px; font-weight: 600; color: #777; }
    .msc-retail s { color: #E8134F; }
    .msc-off { order: 2; font-size: 15px; font-weight: 800; color: #E8134F; }
    .msc-amount { order: 1; font-size: 30px; font-weight: 900; color: #1E1D57; line-height: 1; }
    .msc-per { order: 3; font-size: 11px; font-weight: 600; color: #444; }
    /* Full-width CTA in the thumb zone */
    .msc-cta {
      display: block; width: 100%; text-align: center;
      background:linear-gradient(135deg,#E8134F,#AC4384); color: #fff; text-decoration: none;
      font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
      padding: 12px; border-radius: 30px; white-space: nowrap;
      transition: background-color .2s;
    }
    @media (hover: hover) { .msc-cta:hover { background: #AC4384; color: #fff; } }
  }
.msc-badge{background:#FFC114!important;color:#1E1D57!important}
