/* Ready-made baskets (the box sets on the Short tab) and the Pay with ETH panels (app-short.js, app-eth.js). */

/* Box sets: small black tape boxes with the stock's colour band down the spine, like the shelf. */
.presets-note { margin: 2px 0 6px; font-size: 18px; color: #55557a; }
.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.preset {
  position: relative; display: grid; gap: 3px; align-content: start; text-align: left; cursor: pointer;
  padding: 12px 12px 13px 22px; border: 0; border-radius: 8px; font: inherit; color: var(--label); background: var(--tape);
  box-shadow: inset 0 0 0 2px var(--tape-edge), 0 4px 0 rgba(0, 0, 0, .28); transition: transform .12s ease;
}
.preset::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 6px; border-radius: 3px; background: var(--band, var(--sticker)); }
.preset .p-studio { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--soft); }
.preset b { font-weight: 900; font-stretch: 112%; font-size: 16px; line-height: 1.15; }
.preset .p-tickers { font-size: 13px; font-weight: 700; color: var(--sticker); }
.preset .hand { font-size: 15.5px; line-height: 1.15; color: var(--mint); }
.preset:hover { transform: translateY(-2px); }
.preset[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--sticker), 0 4px 0 rgba(0, 0, 0, .28); }
@media (prefers-reduced-motion: reduce) { .preset { transition: none; } .preset:hover { transform: none; } }

/* The Terminal ticket's box set links, under "Short a basket instead". */
.t-presets { margin: 6px 0 0; font-size: 13.5px; color: var(--soft); }
.t-presets a { color: var(--sticker); }

/* Pay with ETH: a link under the amount, opening a panel inside the card. */
.ethpay { margin: -4px 0 14px; }
.ethpay-toggle { padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 800; color: #b3124f; text-decoration: underline; cursor: pointer; }
.ethpay-body { margin-top: 8px; padding: 12px 14px 14px; border: 2px dashed #b9b4a2; border-radius: 10px; background: #f1ecdc; }
.ethpay-what { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.ethpay .facts { margin-top: 8px; }
.ethpay-slip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 12px; font-size: 14px; color: #55557a; }
.ethpay-slip .chip { padding: 3px 11px; border: 2px solid var(--ink); border-radius: 999px; background: transparent; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.ethpay-slip .chip[aria-pressed="true"] { background: var(--ink); color: var(--label); }
.ethpay .help { margin-top: 10px; }