/* =====================================================================
 * cashout.css v3 — Altenar-style in-ticket cash-out bar
 * Full-width, two-step confirm, live re-price feedback, dark premium UI.
 * ====================================================================*/

.mb-cashout { margin-top: 8px; }

.cashout-cell.co,
.cashout-cell {
  display: block;
  width: 100%;
  --co-radius: 12px;
}
.co * { box-sizing: border-box; }

/* ---------------------------------------------------------------- *
 * primary bar
 * ---------------------------------------------------------------- */
.co-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 15px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: var(--co-radius);
  background: linear-gradient(180deg, #1c2635 0%, #131b28 100%);
  color: #e8eef7;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .25s ease, border-color .25s ease, filter .2s ease, background .25s ease;
}
.co-main__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.co-main__label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.co-main__delta { font-size: 11.5px; font-weight: 600; opacity: .82; font-variant-numeric: tabular-nums; line-height: 1; }
.co-main__val { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }

.co-main:not(:disabled):hover { transform: translateY(-1px); }
.co-main:not(:disabled):active { transform: translateY(0); }

/* live pulse dot — only while an offer is actionable */
.co-live { display: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
  box-shadow: 0 0 0 0 currentColor; }
.co:not(.co--off):not(.is-done) .co-main:not(:disabled) .co-live { display: inline-block; animation: coLive 1.6s ease-in-out infinite; }
.co-main__txt { margin-right: auto; }

/* ---------------------------------------------------------------- *
 * flavour states
 * ---------------------------------------------------------------- */
.co--profit .co-main {
  border-color: rgba(16, 185, 129, .55);
  background: linear-gradient(180deg, #0c3b30 0%, #08281f 100%);
  color: #d7fbe8;
  box-shadow: 0 0 0 1px rgba(16,185,129,.18) inset, 0 6px 20px -8px rgba(16,185,129,.55);
}
.co--profit .co-main__val { color: #34d399; }

.co--loss .co-main {
  border-color: rgba(245, 158, 11, .5);
  background: linear-gradient(180deg, #3a2a0d 0%, #251a08 100%);
  color: #fef1d6;
}
.co--loss .co-main__val { color: #fbbf24; }

.co--even .co-main { border-color: rgba(148,163,184,.28); }
.co--even .co-main:hover { border-color: rgba(139, 92, 246, .55); }

.co--off .co-main,
.co-main:disabled {
  cursor: not-allowed;
  filter: grayscale(.5);
  opacity: .5;
  transform: none;
  box-shadow: none;
}

/* re-price feedback */
.co--bump .co-main { animation: coBump .55s ease; }
.co--up .co-main   { box-shadow: 0 0 0 2px rgba(52,211,153,.65) inset, 0 0 18px -2px rgba(52,211,153,.6) !important; }
.co--down .co-main { box-shadow: 0 0 0 2px rgba(248,113,113,.6) inset, 0 0 18px -2px rgba(248,113,113,.55) !important; }
.co--flash .co-do  { animation: coFlash .9s ease; }

/* ---------------------------------------------------------------- *
 * confirm layer (two-step)
 * ---------------------------------------------------------------- */
.co-confirm { display: flex; gap: 8px; width: 100%; }
.co-confirm[hidden] { display: none; }
.co.is-confirming .co-main { display: none; }

.co-cancel {
  flex: 0 0 auto;
  width: 48px;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: var(--co-radius);
  background: #16202e;
  color: #cbd5e1;
  font-size: 15px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.co-cancel:hover { background: #2a1620; border-color: rgba(248,113,113,.6); color: #fca5a5; }

.co-do {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 14px;
  border: none;
  border-radius: var(--co-radius);
  background: linear-gradient(180deg, #16a34a 0%, #128040 100%);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 18px -6px rgba(22,163,74,.75);
  transition: filter .15s ease, transform .12s ease;
}
.co-do:hover { filter: brightness(1.06); }
.co-do:active { transform: translateY(1px); }
.co-do__txt { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.co-do__val { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* depleting "good for" timer */
.co-do__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255,255,255,.55); }

/* ---------------------------------------------------------------- *
 * busy / done
 * ---------------------------------------------------------------- */
.co.is-busy .co-do { pointer-events: none; background-size: 200% 100%;
  background-image: linear-gradient(90deg, #128040, #22c55e, #128040); animation: coBusy 1.1s linear infinite; }
.co.is-busy .co-do__txt::after { content: '…'; }

.co.is-done .co-main {
  cursor: default;
  border-color: rgba(34,197,94,.6);
  background: linear-gradient(180deg, #14532d, #0a2e18);
  color: #bbf7d0;
  filter: none; opacity: 1;
  box-shadow: 0 0 0 1px rgba(34,197,94,.35) inset;
}
.co.is-done .co-main__val { color: #86efac; }

/* ---------------------------------------------------------------- *
 * awaiting operator approval (manual cash-out)
 * ---------------------------------------------------------------- */
.co--pending .co-main {
  cursor: default;
  border-color: rgba(245, 158, 11, .5);
  background: linear-gradient(180deg, #33240b 0%, #201607 100%);
  color: #fde9c8;
  filter: none; opacity: 1;
  box-shadow: 0 0 0 1px rgba(245,158,11,.18) inset;
}
.co--pending .co-main__label { color: #fbbf24; }
.co--pending .co-main__val   { color: #fcd34d; font-size: 16px; }
.co--pending .co-live { display: inline-block !important; background: #fbbf24; animation: coLive 1.1s ease-in-out infinite; }
.co--pending .co-msg  { color: #fcd34d; }

/* ---------------------------------------------------------------- *
 * status / reason line
 * ---------------------------------------------------------------- */
.co-msg {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fca5a5;
  text-align: center;
  line-height: 1.35;
}
.co-msg[hidden] { display: none; }

/* ---------------------------------------------------------------- *
 * keyframes
 * ---------------------------------------------------------------- */
@keyframes coLive { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.55); } }
@keyframes coBump { 0% { transform: scale(1); } 35% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes coFlash { 0%,100% { box-shadow: 0 6px 18px -6px rgba(22,163,74,.75); } 40% { box-shadow: 0 0 0 3px rgba(255,255,255,.75) inset, 0 0 22px rgba(52,211,153,.8); } }
@keyframes coBusy { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes coTimer { from { width: 100%; } to { width: 0%; } }

@media (prefers-reduced-motion: reduce) {
  .co-live, .co--bump .co-main, .co.is-busy .co-do, .co-do__timer { animation: none !important; }
}