/* ============================================================
   Sellgist — shared form details (index.html payment window + account.html).
   Goes with forms.js. Uses the page's own colour tokens.
   ============================================================ */

/* Input with something inside it on the right (eye, ✓ / ✗) */
.fx-field { position: relative; }
.fx-field input { padding-right: 46px !important; }
/* These inputs already light up on focus (border + glow); a second outline looked doubled. */
.fx-field input:focus-visible { outline: none; }
.fx-eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted); border-radius: 9px; cursor: pointer;
  transition: color .15s ease-out, background-color .15s ease-out;
}
.fx-eye:hover { color: var(--text); background: rgba(16,28,48,.06); }
.fx-eye svg { width: 18px; height: 18px; }
.fx-state {
  position: absolute; right: 15px; top: 50%; width: 18px; height: 18px;
  transform: translateY(-50%) scale(.5); opacity: 0; pointer-events: none;
  transition: opacity .18s ease-out, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.fx-state svg { width: 18px; height: 18px; display: block; }
.fx-state.ok { color: var(--green); }
.fx-state.bad { color: var(--red); }
.fx-field.is-ok .fx-state.ok,
.fx-field.is-bad .fx-state.bad { opacity: 1; transform: translateY(-50%) scale(1); }
.fx-field.is-ok input { border-color: rgba(21,128,61,.5) !important; }
.fx-field.is-bad input { border-color: rgba(198,40,40,.5) !important; }

/* Password strength */
.fx-meter { display: flex; align-items: center; gap: 10px; margin: 2px 2px 14px; min-height: 16px; }
.fx-meter-bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fx-meter-bars i { height: 4px; border-radius: 2px; background: var(--border); transition: background-color .25s ease-out, transform .25s ease-out; transform-origin: left; }
.fx-meter-label { font-size: 11.5px; font-weight: 600; min-width: 74px; text-align: right; color: var(--muted); transition: color .2s; }
.fx-meter[data-level="0"] i:nth-child(-n+1) { background: var(--red); }
.fx-meter[data-level="1"] i:nth-child(-n+2) { background: #d97706; }
.fx-meter[data-level="2"] i:nth-child(-n+3) { background: #65a30d; }
.fx-meter[data-level="3"] i { background: var(--green); }
.fx-meter[data-level="0"] .fx-meter-label { color: var(--red); }
.fx-meter[data-level="1"] .fx-meter-label { color: #b45309; }
.fx-meter[data-level="2"] .fx-meter-label { color: #4d7c0f; }
.fx-meter[data-level="3"] .fx-meter-label { color: var(--green); }

/* A block that opens and closes smoothly instead of popping (still toggled
   with the pages' own .hidden class). */
.fx-collapse {
  display: grid !important; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows .34s cubic-bezier(.16,1,.3,1), opacity .24s ease-out, visibility 0s;
}
.fx-collapse.hidden {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .26s cubic-bezier(.4,0,.2,1), opacity .15s ease-out, visibility 0s .26s;
}
/* Room for focus rings and the meter: overflow would clip them otherwise */
.fx-collapse > .fx-inner { overflow: hidden; min-height: 0; padding: 6px; margin: -6px; }

/* Waiting for an answer: a spinner in place of the label */
.is-busy { color: transparent !important; pointer-events: none; position: relative; }
.is-busy::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: fxSpin .7s linear infinite;
}
@keyframes fxSpin { to { transform: rotate(360deg); } }

/* Wrong answer: a short shake */
.fx-shake { animation: fxShake .42s cubic-bezier(.36,.07,.19,.97) both !important; }
@keyframes fxShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* New text (title on mode switch, a message) eases in */
.fx-swap { animation: fxSwap .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes fxSwap { from { opacity: 0; transform: translateY(5px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .fx-collapse, .fx-collapse.hidden, .fx-state, .fx-meter-bars i { transition: none; }
  .fx-shake, .fx-swap { animation: none !important; }
}