/* TPS VIP on the cart and at checkout (STORE-INTEGRATION 3.4; the store's look from section 6).
   Two rows in the totals table: .tpsvip-credit (the card) and .tpsvip-earn-row (the earn line).
   Mobile first at 390px; the checkout makeover's --co-* variables with fallbacks for the plain theme. */

.tpsvip-credit > td,
.tpsvip-earn-row > td {
  text-align: left !important;
  padding: 6px 0 !important;
  border: 0 !important;
  vertical-align: top;
}
.tpsvip-credit > td::before,
.tpsvip-earn-row > td::before { content: none !important; display: none !important; }

/* ---- the card ---- */
.tpsvip-co-card {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #fff;
  border: 1px solid var(--co-line, #e6ebef);
  border-radius: var(--co-r, 12px);
  padding: 14px 14px 12px;
  margin: 2px 0;
  width: 100%;
  color: var(--co-ink, #0f172a);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  box-sizing: border-box;
}
.tpsvip-co-card *,
.tpsvip-co-card *::before,
.tpsvip-co-card *::after { box-sizing: border-box; }
.tpsvip-co-card.is-busy { opacity: .7; pointer-events: none; }

.tpsvip-co-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.tpsvip-co-mark {
  flex: 0 0 28px; width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--co-ink, #0f172a);
  color: #d4a843;
  display: inline-flex; align-items: center; justify-content: center;
}
.tpsvip-co-mark svg { width: 16px; height: 16px; display: block; }
.tpsvip-co-titles { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tpsvip-co-brand {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--co-mute, #5b6a78);
}
.tpsvip-co-who {
  font-size: 14px; font-weight: 600; color: var(--co-ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpsvip-co-signout {
  margin-left: auto; flex: 0 0 auto; align-self: center;
  background: none; border: 0; padding: 2px 2px;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--co-mute, #8a97a3); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.tpsvip-co-signout:hover { color: var(--co-ink, #5b6a78); }

.tpsvip-co-balance { margin: 0 0 12px; }
.tpsvip-co-pill {
  display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--co-fill, #f7fafc);
  border: 1px solid var(--co-line, #e6ebef);
  color: var(--co-ink, #0f172a);
  font-size: 14px; font-weight: 600; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.tpsvip-co-pill-pts { color: var(--co-mute, #5b6a78); font-weight: 500; font-size: 12.5px; }

.tpsvip-co-label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin: 0 0 6px; line-height: 1.3; }
.tpsvip-co-row { display: flex; align-items: center; gap: 10px; }
.tpsvip-co-card input.tpsvip-credit-input,
.tpsvip-co-card .tpsvip-co-field input {
  display: block; width: 100%; height: 44px; min-height: 44px;
  margin: 0; padding: 0 12px;
  border: 1px solid #dfe5ea; border-radius: 10px;
  background: #fff; color: var(--co-ink, #0f172a);
  font-family: inherit; font-size: 16px; line-height: 42px;
  box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.tpsvip-co-card input.tpsvip-credit-input {
  flex: 1 1 auto; min-width: 0; font-weight: 600;
  -moz-appearance: textfield; appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.tpsvip-co-card input.tpsvip-credit-input::-webkit-outer-spin-button,
.tpsvip-co-card input.tpsvip-credit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tpsvip-co-card input.tpsvip-credit-input:focus,
.tpsvip-co-card .tpsvip-co-field input:focus {
  outline: none;
  border-color: var(--co-blue, #2f8fc4);
  box-shadow: 0 0 0 3px rgba(47, 143, 196, .15);
}
.tpsvip-co-preview {
  flex: 0 0 auto; min-width: 64px; text-align: right;
  font-size: 15px; font-weight: 700; color: var(--co-ink, #0f172a);
  font-variant-numeric: tabular-nums;
}

.tpsvip-co-card input.tpsvip-credit-slider {
  display: block; width: 100%; height: 44px;
  margin: 2px 0 6px; padding: 0;
  background: transparent; border: 0; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  accent-color: var(--co-blue, #2f8fc4);
  cursor: pointer;
}
.tpsvip-co-card input.tpsvip-credit-slider:focus { outline: none; }
.tpsvip-co-card input.tpsvip-credit-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--co-line, #e6ebef); }
.tpsvip-co-card input.tpsvip-credit-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--co-blue, #2f8fc4);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}
.tpsvip-co-card input.tpsvip-credit-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--co-line, #e6ebef); }
.tpsvip-co-card input.tpsvip-credit-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--co-blue, #2f8fc4);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}
.tpsvip-co-card input.tpsvip-credit-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(47, 143, 196, .25); }

.tpsvip-co-actions { display: flex; gap: 8px; margin: 0; }
.tpsvip-co-card button.tpsvip-co-btn {
  flex: 1 1 0; height: 44px; min-height: 44px;
  margin: 0; padding: 0 14px;
  border-radius: 12px;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
  cursor: pointer; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.tpsvip-co-card button.tpsvip-co-btn-primary {
  border: 0;
  background: linear-gradient(#1b8ab8, #12688f);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.tpsvip-co-card button.tpsvip-co-btn-secondary {
  border: 1px solid var(--co-line, #e6ebef);
  background: #fff;
  color: var(--co-ink, #0f172a);
}
.tpsvip-co-card button.tpsvip-co-btn:hover { filter: brightness(1.04); }
.tpsvip-co-card button.tpsvip-co-btn-secondary:hover { background: var(--co-fill, #f7fafc); }
.tpsvip-co-card button.tpsvip-co-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 143, 196, .25); }
.tpsvip-co-card button.tpsvip-co-btn[disabled] { opacity: .6; cursor: default; }

/* the two states of a recognised card: picking, or applied */
.tpsvip-credit-box.is-applied .tpsvip-co-pick { display: none; }
.tpsvip-credit-box:not(.is-applied) .tpsvip-co-using { display: none; }
.tpsvip-co-using { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.tpsvip-co-using .tpsvip-credit-value {
  flex: 0 0 auto; max-width: 100%;
  display: inline-block;
  padding: 5px 11px; border-radius: 999px;
  background: #e8f6ee; color: #12694a;
  font-size: 13px; font-weight: 700; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.tpsvip-co-using .tpsvip-co-actions { flex: 1 1 100%; }

.tpsvip-co-note { font-size: 13px; color: var(--co-mute, #5b6a78); }
.tpsvip-co-error { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #b42318; line-height: 1.35; }
.tpsvip-co-error:empty { display: none; }
.tpsvip-co-foot { margin: 10px 0 0; font-size: 12.5px; color: var(--co-mute, #5b6a78); line-height: 1.4; }

/* ---- the sign-in state ---- */
.tpsvip-co-sub { margin: -4px 0 10px; font-size: 13px; color: var(--co-mute, #5b6a78); line-height: 1.4; }
.tpsvip-signin-form { display: flex; flex-direction: column; gap: 8px; }
.tpsvip-co-field { display: block; margin: 0; font-weight: normal; }
.tpsvip-signin-form button.tpsvip-co-btn { width: 100%; flex: none; margin-top: 2px; }
.tpsvip-signin-form .tpsvip-co-error { margin-top: 0; }
.tpsvip-co-app {
  display: block; margin: 12px 0 0;
  font-size: 13px; font-weight: 600;
  color: var(--co-blue, #2f8fc4); text-decoration: none;
}
.tpsvip-co-app:hover { text-decoration: underline; color: var(--co-blue, #2f8fc4); }

/* ---- the earn row (its own class names: the product block owns .tpsvip-earn) ---- */
.tpsvip-earnline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--co-fill, #f7fafc);
  border: 1px solid var(--co-line, #e6ebef);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px; line-height: 1.4;
  color: var(--co-ink, #0f172a);
  text-align: left;
}
.tpsvip-earnline-figure {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--co-ink, #0f172a);
  color: #d4a843;
  font-size: 12.5px; font-weight: 700; line-height: 1.5;
  white-space: nowrap; vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}
.tpsvip-earnline[data-covered="1"] { color: var(--co-mute, #5b6a78); }

/* ---- wider screens: the buttons stop stretching ---- */
@media (min-width: 640px) {
  .tpsvip-co-card { padding: 16px 16px 14px; }
  .tpsvip-co-using .tpsvip-credit-value { flex: 1 1 auto; }
  .tpsvip-co-using .tpsvip-co-actions { flex: 0 0 auto; }
  .tpsvip-co-using .tpsvip-co-actions button.tpsvip-co-btn { flex: 0 0 auto; min-width: 96px; }
}

/* Won-product panel on cart and checkout (Prizes). No codes: the member adds their own won product here. */
.tpsvip-prizes{border:1px solid var(--tps-line,#e4e4ea);border-radius:10px;padding:12px 14px;margin:14px 0;background:#fff}
.tpsvip-prizes-head{font-weight:700;margin-bottom:8px}
.tpsvip-prize-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.tpsvip-prize-row img{border-radius:6px;object-fit:cover;flex:0 0 auto}
.tpsvip-prize-name{flex:1 1 auto;font-size:14px}
.tpsvip-prize-add{flex:0 0 auto}
.tpsvip-prizes-foot{font-size:12px;color:#6b6b76;margin-top:8px}
.tpsvip-prize-free{font-weight:700;color:#1a7f37}

/* ---- light reskin (John, 25 Sep 2026): the cart/checkout VIP card matches the store's clean
   light look (product-page direction), gold accents instead of the earlier velvet pass. No art/
   image dependencies (they 404'd on staging), so the star mark and wordmark are inline/text. ---- */
.tpsvip-co-card {
  background: linear-gradient(180deg, #fffdf8, #fbfcfd);
  border: 1px solid #e8ddc4;
  border-radius: 14px;
  color: #0f172a;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
  position: relative;
}
.tpsvip-co-mark { background: #0f172a; color: #f0d078; box-shadow: 0 2px 6px rgba(15, 23, 42, .25); }
.tpsvip-co-mark svg { display: block; fill: #f0d078; color: #f0d078; }
.tpsvip-co-brand { width: auto; height: auto; text-indent: 0; background: none; color: #b8860b; }
.tpsvip-co-who { color: #0f172a; }
.tpsvip-co-pill { background: #f7fafc; border: 1px solid #e6ebef; color: #0f172a; }
.tpsvip-co-pill-pts { color: #5b6a78; }
.tpsvip-co-label { color: #334155; }
.tpsvip-co-card input.tpsvip-credit-input,
.tpsvip-co-card .tpsvip-co-field input { background: #fff; border-color: #dbe3ea; color: #0f172a; }
.tpsvip-co-card input.tpsvip-credit-input:focus,
.tpsvip-co-card .tpsvip-co-field input:focus { border-color: #d4a843; box-shadow: 0 0 0 3px rgba(212, 168, 67, .18); }
.tpsvip-co-preview { color: #b8860b; }
.tpsvip-co-card input.tpsvip-credit-slider { accent-color: #d4a843; }
.tpsvip-co-card input.tpsvip-credit-slider::-webkit-slider-runnable-track { background: #e6ebef; }
.tpsvip-co-card input.tpsvip-credit-slider::-webkit-slider-thumb { background: #d4a843; border-color: #a07c2e; }
.tpsvip-co-card input.tpsvip-credit-slider::-moz-range-track { background: #e6ebef; }
.tpsvip-co-card input.tpsvip-credit-slider::-moz-range-thumb { background: #d4a843; border-color: #a07c2e; }
.tpsvip-co-card input.tpsvip-credit-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(212, 168, 67, .25); }
.tpsvip-co-card button.tpsvip-co-btn-primary { background: linear-gradient(135deg, #f7e2a3, #d4a843 55%, #f0d078); color: #3a2c05; box-shadow: 0 10px 24px -12px rgba(212, 168, 67, .8), inset 0 1px 0 rgba(255, 255, 255, .5); }
.tpsvip-co-card button.tpsvip-co-btn-secondary { background: #fff; border-color: #e6ebef; color: #33404d; }
.tpsvip-co-card button.tpsvip-co-btn-secondary:hover { background: #f7fafc; }
.tpsvip-co-card button.tpsvip-co-btn:focus-visible { box-shadow: 0 0 0 3px rgba(212, 168, 67, .25); }
.tpsvip-co-using .tpsvip-credit-value { background: rgba(18, 150, 92, .1); border: 1px solid rgba(18, 150, 92, .3); color: #12965c; }
.tpsvip-co-note, .tpsvip-co-foot, .tpsvip-co-sub { color: #5b6a78; }
.tpsvip-co-error { color: #dc2626; }
.tpsvip-co-app { color: #b8860b; }
.tpsvip-co-app:hover { color: #a9760a; }
/* the earn figure is clean gold text, not a black pill (John: "the black pill doesn't look great") */
.tpsvip-earnline-figure { background: none; border: 0; padding: 0; color: #a9760a; font-weight: 800; }
.tpsvip-earnline-figure::before { content: none; display: none; }
.tpsvip-prizes { border-color: #e8ddc4; background: linear-gradient(180deg, #fffdf8, #fbfcfd); color: #0f172a; }
.tpsvip-prizes-head { color: #b8860b; }
.tpsvip-prizes-foot { color: #5b6a78; }
.tpsvip-prize-free { color: #12965c; }

/* ---- points top-up at checkout (the upsell: docs/LIVE-GAME-PROPOSAL.md, markup contract in docs/BOILOVER-HANDOFF.md).
   The same card idiom as .tpsvip-co-card; three packs, an own amount, and the line once it is in the basket. ---- */
.tpsvip-topup {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #fff;
  border: 1px solid var(--co-line, #e6ebef);
  border-radius: var(--co-r, 12px);
  padding: 14px 14px 12px;
  margin: 10px 0;
  width: 100%;
  color: var(--co-ink, #0f172a);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  box-sizing: border-box;
}
.tpsvip-topup *,
.tpsvip-topup *::before,
.tpsvip-topup *::after { box-sizing: border-box; }
.tpsvip-topup.is-busy { opacity: .7; pointer-events: none; }

.tpsvip-topup-h { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; }
.tpsvip-topup-mark {
  flex: 0 0 36px; width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--co-ink, #0f172a);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.tpsvip-topup-mark img { width: 28px; height: 28px; display: block; object-fit: contain; }
.tpsvip-topup-h > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpsvip-topup-h b { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--co-ink, #0f172a); }
.tpsvip-topup-h span { font-size: 12.5px; color: var(--co-mute, #5b6a78); line-height: 1.4; }

.tpsvip-topup-c { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tpsvip-topup button.tpsvip-topup-b {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 58px; margin: 0; padding: 0 6px;
  border-radius: 12px;
  border: 1px solid #dfe5ea;
  background: var(--co-fill, #f7fafc);
  color: var(--co-ink, #0f172a);
  font-family: inherit; line-height: 1; letter-spacing: 0; text-transform: none;
  cursor: pointer; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.tpsvip-topup button.tpsvip-topup-b b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tpsvip-topup button.tpsvip-topup-b span { font-size: 12px; font-weight: 600; color: var(--co-mute, #5b6a78); }
.tpsvip-topup button.tpsvip-topup-b:hover { border-color: var(--co-blue, #2f8fc4); }
.tpsvip-topup button.tpsvip-topup-b.is-on { border-color: var(--co-blue, #2f8fc4); background: #eaf5fb; box-shadow: inset 0 0 0 1px var(--co-blue, #2f8fc4); }
.tpsvip-topup button.tpsvip-topup-b.is-on span { color: #12688f; }
.tpsvip-topup button.tpsvip-topup-b:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 143, 196, .25); }
.tpsvip-topup button.tpsvip-topup-b[disabled] { opacity: .6; cursor: default; }

.tpsvip-topup-own { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 2px; }
.tpsvip-topup-own input {
  flex: 1 1 auto; min-width: 0; width: auto; height: 44px; min-height: 44px;
  margin: 0; padding: 0 12px;
  border: 1px solid #dfe5ea; border-radius: 10px;
  background: #fff; color: var(--co-ink, #0f172a);
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 42px;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  -webkit-appearance: none; -moz-appearance: textfield; appearance: textfield;
}
.tpsvip-topup-own input::-webkit-outer-spin-button,
.tpsvip-topup-own input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tpsvip-topup-own input::placeholder { color: #94a3b8; font-weight: 500; }
.tpsvip-topup-own input:focus { outline: none; border-color: var(--co-blue, #2f8fc4); box-shadow: 0 0 0 3px rgba(47, 143, 196, .15); }
.tpsvip-topup-own button {
  flex: 0 0 auto; height: 44px; min-height: 44px;
  margin: 0; padding: 0 18px;
  border: 0; border-radius: 12px;
  background: linear-gradient(#1b8ab8, #12688f);
  color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  -webkit-appearance: none; appearance: none;
}
.tpsvip-topup-own button:hover { filter: brightness(1.04); }
.tpsvip-topup-own button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 143, 196, .25); }
.tpsvip-topup-own button[disabled] { opacity: .6; cursor: default; }

.tpsvip-topup-line {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 0; padding: 10px 12px;
  border-radius: 10px;
  background: #e8f6ee; border: 1px solid #cdeedb;
  color: #12694a;
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.tpsvip-topup-line[hidden] { display: none; }
.tpsvip-topup-line > span:first-child { flex: 1 1 auto; min-width: 0; }
.tpsvip-topup-line > span:nth-child(2) { flex: 0 0 auto; font-weight: 800; }
.tpsvip-topup-line b { font-weight: 800; }
.tpsvip-topup button.tpsvip-topup-x {
  flex: 0 0 auto; height: 30px; min-height: 30px;
  margin: 0; padding: 0 10px;
  border: 1px solid #b9dfc9; border-radius: 999px;
  background: #fff; color: #12694a;
  font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none;
  cursor: pointer; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.tpsvip-topup button.tpsvip-topup-x:hover { background: #f3fbf6; }
.tpsvip-topup-err { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #b42318; line-height: 1.35; }
.tpsvip-topup-err:empty { display: none; }
.tpsvip-topup-foot { margin: 10px 0 0; font-size: 12px; color: var(--co-mute, #5b6a78); line-height: 1.4; }
@media (max-width: 359px) {
  .tpsvip-topup button.tpsvip-topup-b b { font-size: 14px; }
  .tpsvip-topup-own button { padding: 0 14px; }
}

/* ---- app-generated checkout code (OTP) sign-in: compact collapsible rows (mobile-friendly) ---- */
.tpsvip-acc{border:1px solid #e6e6e6;border-radius:10px;margin:0 0 8px;background:#fff;overflow:hidden}
.tpsvip-acc>summary{cursor:pointer;list-style:none;padding:11px 12px;font-weight:600;font-size:14px;color:#1b1b1b;display:flex;align-items:center;gap:8px}
.tpsvip-acc>summary::-webkit-details-marker{display:none}
.tpsvip-acc>summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid #9a9a9a;border-bottom:2px solid #9a9a9a;transform:rotate(45deg);transition:transform .15s}
.tpsvip-acc[open]>summary::after{transform:rotate(-135deg)}
.tpsvip-acc-otp>summary{background:#fff8e8;color:#8a6d1f}
.tpsvip-acc-otp[open]>summary{border-bottom:1px solid #f0e2bb}
.tpsvip-acc-ic{font-size:15px;line-height:1}
.tpsvip-acc-body{padding:12px}
.tpsvip-otp-hint{margin:0 0 10px;font-size:13px}
.tpsvip-otp-row{display:flex;gap:8px;align-items:stretch}
.tpsvip-otp-input{flex:1;min-width:0;font-size:20px;letter-spacing:5px;text-align:center;font-weight:700;padding:10px;border:1.5px solid #cbb069;border-radius:9px;background:#fff;color:#1b1b1b}
.tpsvip-otp-input::placeholder{letter-spacing:4px;color:#c9b894;font-weight:600}
.tpsvip-otp-row .tpsvip-co-btn{white-space:nowrap;flex:none}