/* FF noreverse extras. Home/order use official min.css + order.min.css. */

#select_label_from,
#select_label_to {
  cursor: pointer;
}

.dir-from .coin-value { color: #ff8a1a; }
.dir-to .coin-value { color: #26d0b6; }
.order-time.new > div > span:after { color: #3ee07a !important; }
.order-id { color: #4db7ff; }

/* Official .main-bg is left:50%; transform: translate(-50%, 16%). Any other transform = half-screen. */
img.ff-drift {
  animation: ff-bg-drift 120s ease-in-out infinite;
}
img.ff-drift-alt {
  animation: ff-bg-drift-alt 90s ease-in-out infinite;
}
@keyframes ff-bg-drift {
  0%, 100% { transform: translate(-50%, 16%); }
  50% { transform: translate(calc(-50% - 6px), calc(16% + 4px)); }
}
@keyframes ff-bg-drift-alt {
  0%, 100% { transform: translate(-50%, 16%); }
  50% { transform: translate(calc(-50% + 5px), calc(16% - 3px)); }
}
p.ff-status:empty { display: none; margin: 0; }

/* Official .order-qr img is width:100% + padding 1.2em. HTML height attr
   from createImgTag kept the box ~124px tall → squat card at the panel top. */
.order-qr-wrap {
  align-self: center;
  flex-shrink: 0;
}
.order-qr img {
  height: auto;
  aspect-ratio: 1;
}
.qr-switcher > label {
  text-align: center;
}

.ff-ccy {
  position: absolute;
  right: 10px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  color: #fff;
  font: 600 15px/1 Montserrat, sans-serif;
  cursor: pointer;
  z-index: 2;
}
.ff-ccy .svgcoin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
}
.ff-ccy sup {
  color: #8ad7ff;
  font-size: 10px;
  margin-left: 2px;
}
.ff-status { min-height: 1.2em; color: #8ad7ff; text-align: center; }
.ff-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 16, .72);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-modal[hidden] { display: none; }
.ff-modal__box {
  width: min(440px, 92vw);
  max-height: 70vh;
  overflow: auto;
  background: #12182a;
  border-radius: 12px;
  padding: 16px;
}
.ff-modal__box input {
  width: 100%;
  margin-bottom: 10px;
  background: #0b1020;
  border: 1px solid #2a3558;
  color: #fff;
  border-radius: 8px;
  padding: 10px 12px;
}
.ff-ccy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 8px 4px;
  cursor: pointer;
  text-align: left;
}
.ff-ccy-row .svgcoin { width: 28px; height: 28px; border-radius: 50%; }

.ff-cookies {
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: 320px;
  background: #12203c;
  border-radius: 10px;
  padding: 16px 16px 14px;
  z-index: 30;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font: 400 13px/1.45 Montserrat, sans-serif;
}
.ff-cookies a { color: #4db7ff; }
.ff-cookies button {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: #1aa3ff;
  color: #fff;
  font: 600 14px Montserrat, sans-serif;
  cursor: pointer;
}
.ff-chat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: #12b5ff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M4 4h16v12H7l-3 3V4z'/></svg>") center/26px no-repeat;
  z-index: 30;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(18,181,255,.35);
}

/* —— order page —— */
.ff-order-page { background: #070b14; }
.ff-order {
  width: min(1180px, 94vw);
  margin: 28px auto 80px;
}
.ff-order-bar {
  display: grid;
  grid-template-columns: 1fr 52px 36px 52px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 118px;
  padding: 18px 28px;
  border-radius: 14px;
  background:
    radial-gradient(1200px 180px at 20% 0%, rgba(80, 40, 140, .35), transparent 60%),
    linear-gradient(180deg, #141a33, #101628);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.ff-order-bar small {
  display: block;
  color: #8b93a7;
  letter-spacing: .08em;
  font: 500 11px Montserrat, sans-serif;
  margin-bottom: 4px;
}
.ff-amt { font: 700 28px/1.1 Montserrat, sans-serif; }
.ff-amt.is-send { color: #ff8a1a; }
.ff-amt.is-recv { color: #2fd3c2; }
.ff-amt sup { font-size: 12px; margin-left: 3px; }
.ff-order-bar code, .ff-recv-line code {
  display: block;
  margin-top: 6px;
  color: #7f889c;
  font: 400 12px/1.3 "Roboto Mono", monospace;
  word-break: break-all;
}
.ff-order-bar__arrow { color: #d9deea; font-size: 22px; text-align: center; }
.ff-bar-coin { width: 46px; height: 46px; border-radius: 50%; justify-self: center; }
.ff-order-bar__side.is-right { text-align: right; }

.ff-order-card {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 24px;
  margin-top: 22px;
  padding: 22px 8px 8px;
}
.ff-meta div { margin-bottom: 16px; }
.ff-meta span { display: block; color: #8b93a7; font-size: 13px; }
.ff-meta strong { color: #7ec8ff; font-size: 18px; }
.ff-meta .is-timer { color: #3ee07a; }
.ff-meta .is-float { color: #7ec8ff; }
.ff-pay h2 { font: 500 20px/1.35 Montserrat, sans-serif; margin: 8px 0 12px; }
.ff-pay h2 b { color: #ff8a1a; }
.ff-pay-addr {
  font: 700 22px/1.35 "Roboto Mono", Montserrat, sans-serif;
  color: #fff;
  word-break: break-all;
}
.ff-note { color: #9aa3b8; font-size: 13px; }
.ff-recv-line { color: #9aa3b8; font-size: 13px; margin-top: 18px; }
.ff-copy {
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ad7ff' stroke-width='2'><rect x='8' y='8' width='12' height='12' rx='2'/><path d='M4 16V6a2 2 0 0 1 2-2h10'/></svg>") center/16px no-repeat;
  cursor: pointer;
  vertical-align: middle;
}
.ff-qr { text-align: center; }
.ff-qr-box {
  width: 168px;
  height: 168px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  padding: 8px;
}
.ff-qr-box img, .ff-qr-box canvas { width: 100%; height: 100%; }
.ff-qr-tabs { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.ff-qr-tabs button {
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  background: #2a3148;
  color: #c5cbe0;
  cursor: pointer;
}
.ff-qr-tabs button.is-on { background: #eef1f7; color: #1b2233; }

.ff-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  list-style: none;
  padding: 28px 0 10px;
  margin: 10px 0 30px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.ff-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #8b93a7;
  font-size: 13px;
  position: relative;
}
.ff-steps li.is-on { color: #fff; }
.ff-steps li i {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #1a2238 center/28px no-repeat;
}
.ff-steps li.is-on i {
  background-color: #1aa3ff;
  box-shadow: 0 0 0 6px rgba(26,163,255,.18);
}
.ff-ico-wallet { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M3 7a2 2 0 0 1 2-2h12v2H5v10h14v-3h-6V9h8v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z'/></svg>"); }
.ff-ico-hour { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b93a7'><path d='M8 2h8v2H8zM7 6h10l-4 6 4 6H7l4-6z'/></svg>"); }
.ff-ico-swap { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b93a7'><path d='M7 7h11l-3-3 1.4-1.4L22 8l-5.6 5.4L15 12l3-3H7V7zm10 10H6l3 3-1.4 1.4L2 16l5.6-5.4L9 12l-3 3h11v2z'/></svg>"); }
.ff-ico-ok { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b93a7'><path d='M9.2 16.6 4.8 12.2 3.4 13.6 9.2 19.4 21 7.6 19.6 6.2z'/></svg>"); }

.ff-info-row {
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 18px;
}
.ff-know, .ff-notify {
  border-radius: 14px;
  padding: 22px 24px 18px;
  background:
    radial-gradient(400px 160px at 80% 120%, rgba(40,80,180,.25), transparent 60%),
    #12182c;
  min-height: 280px;
}
.ff-know h3, .ff-notify h3 { margin: 0 0 14px; font-size: 20px; }
.ff-know ul { list-style: none; padding: 0; margin: 0; }
.ff-know li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  color: #e6eaf4;
  font-size: 14px;
  line-height: 1.45;
}
.ff-know a { color: #4db7ff; }
.ff-k {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2a6dff center/16px no-repeat;
}
.ico-bolt { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M13 2 4 14h7l-1 8 10-14h-7z'/></svg>"); }
.ico-btc { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><circle cx='12' cy='12' r='9'/></svg>"); }
.ico-seg { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7 7h10v2H7zm0 8h10v2H7z'/></svg>"); }
.ico-calc { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><rect x='5' y='3' width='14' height='18' rx='2'/></svg>"); }
.ico-clock { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><circle cx='12' cy='12' r='9'/><path d='M12 7v6l4 2' stroke='%232a6dff' stroke-width='2'/></svg>"); }
.ff-notify { position: relative; overflow: hidden; }
.ff-notify form { display: flex; gap: 8px; margin-top: 10px; }
.ff-notify input {
  flex: 1;
  background: #0b1020;
  border: 1px solid #2a3558;
  color: #fff;
  border-radius: 8px;
  padding: 10px;
}
.ff-notify button[type=submit], .ff-link {
  background: transparent;
  border: 0;
  color: #8b93a7;
  cursor: pointer;
}
.ff-notify button[type=submit] {
  background: #1aa3ff;
  color: #fff;
  border-radius: 8px;
  padding: 0 14px;
}
.ff-robot {
  height: 140px;
  margin-top: 18px;
  background: url("assets/images/robots/fill.svg") center bottom / contain no-repeat;
  opacity: .95;
}

@media (max-width: 900px) {
  .ff-order-bar, .ff-order-card, .ff-info-row, .ff-steps { grid-template-columns: 1fr; }
  .ff-order-bar { text-align: left; }
  .ff-order-bar__side.is-right { text-align: left; }
  .nav.menu { display: none; }
  .ff-cookies { width: calc(100vw - 24px); left: 12px; right: 12px; }
  .exchange-amounts { display: block; }
  .col-middle { display: flex; justify-content: center; margin: 8px 0; }
}