/* /smm-letter/: additions to the approved letter's look (/smm-new/style.css) for the old funnel addresses:
   the page's own price line, inline order forms inside the navy-dashed order boxes, and the old page's link row. */

/* The sticky menu bar must not cover an order box reached by #anchor. */
.order-box, .buy-mid { scroll-margin-top: 70px; }

/* A page's own price under the hero line */
.hero-offer { display: inline-block; margin: -8px 0 22px; background: #fff8e1; border: 2px solid var(--smm-btn-2); border-radius: 10px; padding: 10px 16px; font: 700 18px/1.4 var(--smm-sans); color: var(--smm-ink); }
.hero-offer s { font-weight: 500; }
.hero-offer b { color: var(--smm-red-deep); }

/* Inline order form (the old page's own form: same name, action and fields, restyled) */
.lt-order { max-width: 460px; margin: 18px auto 0; display: grid; gap: 14px; text-align: left; }
.lt-order label { display: grid; gap: 6px; font: 500 15px/1.35 var(--smm-sans); color: var(--smm-ink); }
.lt-order select { width: 100%; font: 500 18px/1.3 var(--smm-sans); color: var(--smm-ink); padding: 13px 44px 13px 14px; border: 2px solid var(--smm-blue); border-radius: 8px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%231c5094' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
  -webkit-appearance: none; appearance: none; }
.lt-order select:focus { outline: 3px solid rgba(28, 80, 148, .3); outline-offset: 1px; }
button.smm-buy { cursor: pointer; }
.lt-order .smm-buy { width: 100%; display: flex; }
.buy-mid .lt-order { margin-top: 6px; }
.lt-pack { display: block; width: 100%; max-width: 320px; margin: 4px auto 6px; }
.lt-final { margin: 40px auto 0; }

/* The old page's own row of links, above the footer */
.lt-links { background: #fff; border-top: 1px solid #e4e4e4; }
.lt-links p { max-width: 1000px; margin: 0 auto; padding: 18px 16px; text-align: center; font: 14px/1.9 var(--smm-sans); color: var(--smm-muted); }
.lt-links a { color: var(--smm-blue); text-decoration: none; white-space: nowrap; }
.lt-links a:hover { text-decoration: underline; }
.lt-links a + a::before { content: "|"; color: #b8b8b8; margin: 0 10px; display: inline-block; }

@media (max-width: 560px) {
  .hero-offer { font-size: 16.5px; }
  .lt-order select { font-size: 17px; }
}
