/* Tips (pages/tips.js). Every rule starts .stp-tips; colours only from the studio's variables. */

/* The advert, before the add-on is on. */
.stp-tips-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: center; padding: 30px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(245, 194, 27, .13), rgba(245, 194, 27, .03)); border: 1px solid rgba(245, 194, 27, .38); }
.stp-tips-promo-words { display: grid; gap: 12px; min-width: 0; }
.stp-tips-eyebrow { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.stp-tips-promo-title { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.stp-tips-lede { margin: 0; font-size: 17px; max-width: 56ch; }
.stp-tips-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.stp-tips-points li { position: relative; padding-left: 28px; color: var(--muted); }
.stp-tips-points li b { color: var(--text); }
.stp-tips-points li::before { content: '\2713'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--green); color: var(--green-ink); }
.stp-tips-example { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-weight: 600; }
.stp-tips-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.stp-tips-promo-pics { position: relative; padding: 0 0 40px 0; }
.stp-tips-pic-tv { display: block; width: 100%; height: auto; border-radius: 10px; border: 8px solid #050505; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.stp-tips-pic-phone { position: absolute; right: -6px; bottom: 0; width: 30%; height: auto; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .55)); }
.stp-tips-pic-one { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.stp-tips-head .stp-tips-onoff { margin: 12px 0 0; }
.stp-tips-other { margin-top: 12px; }

/* On: the title and how it stands. */
.stp-tips-head { display: grid; gap: 14px; padding: 22px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.stp-tips-head h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.01em; }
.stp-tips-banner { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 14px; background: rgba(245, 194, 27, .08); border: 1px solid rgba(245, 194, 27, .35); }
.stp-tips-banner.ok { background: rgba(46, 212, 122, .1); border-color: rgba(46, 212, 122, .45); }
.stp-tips-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); }
.stp-tips-banner.ok .stp-tips-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(46, 212, 122, .18); }

.stp-tips-section { display: grid; gap: 12px; padding: 22px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.stp-tips-h { margin: 0; font-size: 20px; }

/* The three steps: three cards exactly the same size. */
.stp-tips-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stp-tips-step { display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: start; gap: 8px; padding: 18px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.stp-tips-step.done { border-color: rgba(46, 212, 122, .45); }
.stp-tips-step > b { font-size: 17px; }
.stp-tips-mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid var(--line); color: var(--muted); }
.stp-tips-mark.done { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.stp-tips-step-act { align-self: end; }
.stp-tips-step-act .st-btn { width: 100%; }
.stp-tips-done { margin: 0; font-weight: 800; color: var(--green); }
.stp-tips-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stp-tips-amounts .st-q { margin-top: 0; font-size: 13px; }
.stp-tips-money { position: relative; display: block; }
.stp-tips-money i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 700; color: var(--muted); pointer-events: none; }
.stp-tips-money input { padding-left: 28px !important; min-height: 48px; font-size: 18px; font-weight: 700; background: var(--surface) !important; }

/* How it looks: the board on a TV, the choices beside it. */
.stp-tips-look { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.stp-tips-preview { display: grid; gap: 12px; min-width: 0; }
.stp-tips-tvset { width: 100%; }
.stp-tips-tvset.tall { width: min(300px, 70%); justify-self: center; }
.stp-tips-tvset .st-tv.tall { width: 100%; }
.stp-tips-noboard { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 20px; border-radius: 14px; border: 2px dashed var(--line); text-align: center; }
.stp-tips-controls { display: grid; gap: 6px; min-width: 0; }
.stp-tips-controls .st-q { margin-top: 0; }
.stp-tips-controls .st-q input { font-weight: 500; }
.stp-tips-act { margin-top: 4px; }
.stp-tips-fits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stp-tips-fit { min-height: 104px; align-content: start; }
.stp-tips-fit.on { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.stp-tips-fit:disabled { cursor: default; opacity: .6; }
.stp-tips-tvs, .stp-tips-onoff { margin-top: 0; padding: 6px 16px; gap: 0; }
.stp-tips-tvs .st-toggle + .st-toggle { border-top: 1px solid var(--line); }
.stp-tips-onoff { margin-top: 10px; }
.stp-tips-boards { margin-bottom: 2px; }

.stp-tips-foot { display: grid; gap: 6px; padding: 0 4px; }
.stp-tips-foot p { margin: 0; }
.stp-tips-foot a { overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  .stp-tips-look { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .stp-tips-promo { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .stp-tips-promo-title { font-size: 24px; }
  .stp-tips-buy .st-btn { width: 100%; }
  .stp-tips-head, .stp-tips-section { padding: 18px; }
  .stp-tips-head h2 { font-size: 22px; }
  .stp-tips-steps { grid-template-columns: 1fr; }
  .stp-tips-fits { grid-template-columns: 1fr; }
  .stp-tips-fit { min-height: 84px; }
}