/* TF2 Sell panel — matches the site's purchase card (pink accent, rounded cards) but is a separate component. */
.tf2s-panel {
  --tf2s-pink: #f72564;
  --tf2s-pink-dark: #dc0e4e;
  --tf2s-pink-soft: #fff1f5;
  --tf2s-ink: #171a2b;
  --tf2s-muted: #747789;
  --tf2s-line: #ececf2;
  --tf2s-green: #129b63;
  --tf2s-green-soft: #eaf9f2;
  --tf2s-blue: #236bad;
  --tf2s-blue-soft: #f2f8ff;
  --tf2s-amber: #9a6a12;
  --tf2s-amber-soft: #fff6e3;
  position: relative;
  width: 100%;
  margin: 0 0 18px;
  padding: 20px;
  border: 1px solid rgba(247, 37, 100, .14);
  border-radius: 22px;
  background: radial-gradient(circle at 100% 0, rgba(247, 37, 100, .07), transparent 32%), #fff;
  box-shadow: 0 14px 38px rgba(24, 22, 48, .075);
  color: var(--tf2s-ink);
  direction: rtl;
  text-align: right;
  box-sizing: border-box;
}
.tf2s-panel *, .tf2s-panel *::before, .tf2s-panel *::after { box-sizing: border-box; }
.tf2s-panel svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.tf2s-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--tf2s-line); }
.tf2s-head__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--tf2s-ink), #3a3f5c); box-shadow: 0 8px 20px rgba(23, 26, 43, .22); }
.tf2s-head__icon svg { color: #ffcc35; }
.tf2s-head__copy { display: grid; gap: 2px; min-width: 0; }
.tf2s-head__copy strong { font-size: 16px; font-weight: 900; line-height: 1.5; }
.tf2s-head__copy small { color: var(--tf2s-muted); font-size: 12px; line-height: 1.6; }

.tf2s-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 16px; padding: 0; list-style: none; }
.tf2s-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tf2s-steps li { position: relative; display: grid; justify-items: center; gap: 4px; color: #8b93a3; font-size: 11px; font-weight: 750; text-align: center; }
.tf2s-steps li::after { content: ""; position: absolute; top: 14px; right: calc(50% + 18px); width: calc(100% - 36px); height: 2px; background: var(--tf2s-line); }
.tf2s-steps li:last-child::after { display: none; }
.tf2s-steps i { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #dfe2ea; border-radius: 50%; background: #fff; font-style: normal; font-size: 11px; }
.tf2s-steps .is-done { color: var(--tf2s-ink); }
.tf2s-steps .is-done i { border-color: #b8ead7; background: var(--tf2s-green-soft); color: var(--tf2s-green); }
.tf2s-steps .is-done::after { background: #b8ead7; }
.tf2s-steps .is-current { color: var(--tf2s-ink); }
.tf2s-steps .is-current i { border-color: var(--tf2s-pink); background: var(--tf2s-pink); color: #fff; box-shadow: 0 0 0 5px var(--tf2s-pink-soft); }

.tf2s-notice { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 650; line-height: 1.9; border: 1px solid transparent; }
.tf2s-notice--info { background: var(--tf2s-blue-soft); border-color: #d9e8f8; color: #2d435d; }
.tf2s-notice--ok { background: var(--tf2s-green-soft); border-color: #c9eedd; color: #1d6f4c; }
.tf2s-notice--warn { background: var(--tf2s-amber-soft); border-color: #f3e2bd; color: var(--tf2s-amber); }

.tf2s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 0 16px; border: 0; border-radius: 14px;
  font: inherit; font-size: 14px; font-weight: 900; text-decoration: none !important; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.tf2s-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.tf2s-btn--primary { color: #fff !important; background: linear-gradient(135deg, var(--tf2s-pink-dark), #ff3f74); box-shadow: 0 10px 24px rgba(247, 37, 100, .25); }
.tf2s-btn--steam { color: #fff !important; background: linear-gradient(135deg, #171a2b, #2a475e); box-shadow: 0 10px 22px rgba(23, 26, 43, .2); }
.tf2s-btn:disabled, .tf2s-btn.is-loading { opacity: .6; cursor: wait; transform: none; }
.tf2s-btn.is-loading::after { content: ""; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: tf2s-spin .8s linear infinite; }
@keyframes tf2s-spin { to { transform: rotate(360deg); } }

.tf2s-verified { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 11px; border-radius: 12px; background: var(--tf2s-green-soft); color: #1d6f4c; font-size: 12px; font-weight: 700; }
.tf2s-verified svg { width: 18px; height: 18px; }
.tf2s-verified a { color: inherit; font-weight: 800; }

.tf2s-form { display: grid; gap: 14px; margin: 0; }
.tf2s-field { display: grid; gap: 7px; }
.tf2s-field > label, .tf2s-label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 800; color: var(--tf2s-ink); }
.tf2s-step { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px; background: var(--tf2s-pink-soft); color: var(--tf2s-pink-dark); font-size: 11px; font-weight: 900; }
.tf2s-panel input[type="url"], .tf2s-panel input[type="text"], .tf2s-panel input[type="number"] {
  width: 100%; max-width: 100%; height: 50px; margin: 0; padding: 0 14px; border: 1px solid #e3e3eb; border-radius: 13px; background: #fafafd;
  color: var(--tf2s-ink); font: inherit; font-size: 13.5px; font-weight: 650; box-shadow: 0 4px 12px rgba(24, 22, 48, .035); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.tf2s-panel input[dir="ltr"] { text-align: left; font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; }
.tf2s-panel input:focus { border-color: var(--tf2s-pink); background: #fff; box-shadow: 0 0 0 4px rgba(247, 37, 100, .1); }
.tf2s-panel .is-invalid { border-color: #e53955 !important; background: #fff8f9 !important; }
.tf2s-hint { color: var(--tf2s-muted); font-size: 11px; font-weight: 600; line-height: 1.7; margin: 0; }
a.tf2s-hint { color: var(--tf2s-pink-dark); text-decoration: none; width: fit-content; }

.tf2s-qty { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; height: 50px; border: 1px solid #e3e3eb; border-radius: 13px; background: #fff; overflow: hidden; }
.tf2s-panel .tf2s-qty input[type="number"] { height: 100%; border: 0; border-radius: 0; border-inline: 1px solid #eeeef3; background: #fff; box-shadow: none; text-align: center; font-size: 16px; font-weight: 900; -moz-appearance: textfield; }
.tf2s-qty input::-webkit-outer-spin-button, .tf2s-qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.tf2s-qty__btn { border: 0; background: #fff; color: var(--tf2s-ink); font-size: 20px; font-weight: 700; cursor: pointer; }
.tf2s-qty__btn:hover { background: var(--tf2s-pink-soft); color: var(--tf2s-pink); }

.tf2s-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border: 1px solid var(--tf2s-line); border-radius: 13px; background: #fafafd; }
.tf2s-seg label { margin: 0; cursor: pointer; }
.tf2s-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tf2s-seg span { display: grid; place-items: center; height: 38px; border-radius: 10px; font-size: 12.5px; font-weight: 800; color: var(--tf2s-muted); transition: background .15s, color .15s; }
.tf2s-seg input:checked + span { background: #fff; color: var(--tf2s-pink-dark); box-shadow: 0 4px 12px rgba(24, 22, 48, .08); }
.tf2s-seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(247, 37, 100, .25); }

.tf2s-summary { position: relative; display: grid; gap: 6px; padding: 13px 15px; border: 1px solid rgba(18, 155, 99, .24); border-radius: 15px; background: linear-gradient(135deg, #f4fff9, #fff); overflow: hidden; }
.tf2s-summary::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; background: linear-gradient(#16ad70, #54d29d); }
.tf2s-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #595b69; font-weight: 700; }
.tf2s-summary b { color: var(--tf2s-ink); font-weight: 800; white-space: nowrap; }
.tf2s-summary__total b { color: var(--tf2s-green); font-size: clamp(16px, 4.6vw, 20px); font-weight: 950; }

.tf2s-terms { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12px; font-weight: 650; line-height: 1.8; color: #4d5263; cursor: pointer; }
.tf2s-terms input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--tf2s-pink); }
.tf2s-error { margin: 0; padding: 9px 12px; border-radius: 11px; background: #fff1f3; border: 1px solid #f7cdd5; color: #c0213f; font-size: 12.5px; font-weight: 700; line-height: 1.8; }

.tf2s-how { margin-top: 14px; padding: 10px 12px; border: 1px dashed #e1e2ea; border-radius: 13px; background: #fcfcfe; font-size: 12px; line-height: 1.9; color: #4d5263; }
.tf2s-how summary { cursor: pointer; font-weight: 800; color: var(--tf2s-ink); }
.tf2s-how ol { margin: 8px 0 0; padding-right: 18px; }
.tf2s-how p { margin: 6px 0 0; }

.tf2s-track { margin-bottom: 22px; }
.tf2s-track .tf2s-hint { margin-top: 6px; }
.tf2s-price-prefix { font-size: .8em; font-weight: 700; color: #747789; }

@media (max-width: 520px) {
  .tf2s-panel { padding: 15px; border-radius: 18px; }
  .tf2s-steps li { font-size: 10px; }
  .tf2s-btn { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .tf2s-panel * { transition: none !important; animation: none !important; } }
@media (max-width: 420px) {
  .tf2s-summary__total { flex-direction: column; align-items: flex-start !important; gap: 2px !important; }
}

/* ============================================================================================
   Buy / sell switch above the purchase card. Same visual language as the site's purchase card
   (white, pink border rgba(247,37,100,.14), radius 22px). Theme button styles are reset on purpose:
   themes style every <button> (padding, font-size, height, width, text-transform...).
   ============================================================================================ */
.tf2s-mode {
  --tf2s-pink: #f72564; --tf2s-pink-2: #ff4f86; --tf2s-ink: #171a2b; --tf2s-muted: #747789;
  display: block; width: 100%; max-width: 100%; margin: 0 0 14px; padding: 0; direction: rtl; text-align: right; box-sizing: border-box;
  flex: 1 1 100%; grid-column: 1 / -1; /* full row even if a theme makes the parent flex/grid */
}
.tf2s-mode *, .tf2s-mode *::before, .tf2s-mode *::after { box-sizing: border-box; }
.tf2s-mode .tf2s-mode__tabs {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  width: 100%; margin: 0; padding: 6px;
  border: 1px solid rgba(247, 37, 100, .14); border-radius: 20px;
  background: radial-gradient(circle at 100% 0, rgba(247, 37, 100, .06), transparent 40%), #fff;
  box-shadow: 0 10px 28px rgba(24, 22, 48, .06);
}
.tf2s-mode .tf2s-mode__tab,
.tf2s-mode button.tf2s-mode__tab {
  all: unset; box-sizing: border-box !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
  width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 58px !important; margin: 0 !important; padding: 9px 12px !important;
  border: 0 !important; border-radius: 15px !important; background: transparent !important; box-shadow: none !important;
  color: var(--tf2s-ink) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important;
  line-height: 1.45 !important; letter-spacing: 0 !important; text-transform: none !important; text-align: right !important; white-space: nowrap !important;
  cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tf2s-mode .tf2s-mode__tab:hover { background: rgba(247, 37, 100, .06) !important; }
.tf2s-mode .tf2s-mode__tab:focus-visible { outline: 2px solid var(--tf2s-pink) !important; outline-offset: 2px !important; }
.tf2s-mode .tf2s-mode__tab[aria-selected="true"] {
  background: linear-gradient(135deg, var(--tf2s-pink), var(--tf2s-pink-2)) !important; color: #fff !important;
  box-shadow: 0 10px 22px rgba(247, 37, 100, .30) !important;
}
.tf2s-mode__icon {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px;
  background: rgba(247, 37, 100, .09); color: var(--tf2s-pink);
}
.tf2s-mode__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tf2s-mode__tab[aria-selected="true"] .tf2s-mode__icon { background: rgba(255, 255, 255, .2); color: #fff; }
.tf2s-mode__text { display: grid; gap: 1px; min-width: 0; }
.tf2s-mode__text b { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; font-weight: 900; line-height: 1.5; color: inherit; }
.tf2s-mode__text small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--tf2s-muted); }
.tf2s-mode__tab[aria-selected="true"] .tf2s-mode__text small { color: rgba(255, 255, 255, .9); }
.tf2s-mode__sell { margin-top: 12px; }
.tf2s-mode__sell.tf2s-is-closed, .tf2s-mode__sell[hidden] { display: none !important; }
.tf2s-mode .tf2s-panel { margin: 0; }
/* Sized by the width of the purchase column itself (it is narrow on desktop, wide on tablets). */
.tf2s-mode { container-type: inline-size; container-name: tf2smode; }
@container tf2smode (max-width: 460px) {
  .tf2s-mode .tf2s-mode__tab { gap: 7px !important; padding: 8px 9px !important; }
  .tf2s-mode__icon { flex-basis: 28px; width: 28px; height: 28px; border-radius: 9px; }
  .tf2s-mode__icon svg { width: 16px; height: 16px; }
  .tf2s-mode__text b { font-size: 13.5px; }
  .tf2s-mode__text small { font-size: 11px; }
}
@container tf2smode (max-width: 330px) {
  .tf2s-mode__icon { display: none; }
  .tf2s-mode .tf2s-mode__tab { justify-content: center !important; text-align: center !important; }
}
/* Browsers without container queries */
@supports not (container-type: inline-size) {
  @media (max-width: 480px) { .tf2s-mode__icon { display: none; } }
}
@media (prefers-reduced-motion: reduce) { .tf2s-mode .tf2s-mode__tab { transition: none; } }