/* GONZOWIRE OS - BTC ticker widget */

.btc-widget {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background: #000;
  border: 2px solid var(--neon-yellow);
  font-family: var(--mono);
  font-size: 14px;
  color: var(--neon-yellow);
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 10px rgba(255,226,26,.4), inset 0 0 8px rgba(255,226,26,.15);
  transition: all .2s;
  min-width: 200px;
  height: 24px;
}
.btc-widget:hover {
  box-shadow: 0 0 18px rgba(255,226,26,.7), inset 0 0 12px rgba(255,226,26,.25);
  transform: translateY(-1px);
}
.btc-widget .bp-icon {
  font-family: var(--display);
  font-size: 18px;
  color: #ff7a00;
  text-shadow: 0 0 8px rgba(255,122,0,.8);
  font-weight: 900;
  margin-right: 2px;
}
.btc-widget .bp-label {
  font-family: var(--display);
  font-size: 11px;
  color: #d9b16c;
  letter-spacing: .15em;
}
.btc-widget .bp-price {
  font-family: var(--mono);
  font-weight: bold;
  font-size: 15px;
  color: #ffe21a;
  text-shadow: 0 0 6px rgba(255,226,26,.6);
  letter-spacing: .03em;
}
.btc-widget .bp-change {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 2px;
}
.btc-widget.up    .bp-change { background: rgba(6,255,165,.18); color: #06FFA5; border: 1px solid #06FFA5; }
.btc-widget.down  .bp-change { background: rgba(255,42,31,.18); color: #ff2a1f; border: 1px solid #ff2a1f; }
.btc-widget .bp-spark { display: block; }

.btc-widget.up    { border-color: #06FFA5; box-shadow: 0 0 12px rgba(6,255,165,.5), inset 0 0 8px rgba(6,255,165,.15); }
.btc-widget.down  { border-color: #ff2a1f; box-shadow: 0 0 12px rgba(255,42,31,.5), inset 0 0 8px rgba(255,42,31,.15); }
.btc-widget.flat  .bp-price { color: #d9b16c; }
.btc-widget.loading .bp-price { animation: btcLoading 1s ease-in-out infinite; }
@keyframes btcLoading { 50% { opacity: .35; } }

.btc-widget.flash-up   { animation: btcFlashUp .8s ease-out; }
.btc-widget.flash-down { animation: btcFlashDown .8s ease-out; }
@keyframes btcFlashUp {
  0%   { background: #06FFA5; color: #000; transform: scale(1.05); }
  100% { background: #000; transform: scale(1); }
}
@keyframes btcFlashDown {
  0%   { background: #ff2a1f; color: #fff; transform: scale(1.05); }
  100% { background: #000; transform: scale(1); }
}

/* BTC detail window */
.btc-detail { text-align: center; }
.btc-detail h1 {
  font-family: var(--psy);
  color: #ff7a00 !important;
  text-shadow: 3px 3px 0 #ffe21a, 6px 6px 0 #ff2b8f, 0 0 30px rgba(255,122,0,.6) !important;
  font-size: 36px !important;
}
.btc-detail .bp-big {
  font-family: var(--mono);
  font-size: 48px;
  color: #ffe21a;
  text-shadow: 0 0 24px rgba(255,226,26,.8);
  margin: 14px 0 4px;
  letter-spacing: .03em;
  font-weight: bold;
}
.btc-detail .bp-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sand);
  margin-bottom: 8px;
}
.btc-detail .bp-meta span { color: var(--neon-cyan); }
.btc-detail .bp-change-big {
  font-family: var(--display);
  font-size: 22px;
  padding: 4px 16px;
  display: inline-block;
  border: 2px solid;
  margin-bottom: 14px;
}
.btc-detail .bp-change-big.up   { color: #06FFA5; border-color: #06FFA5; background: rgba(6,255,165,.1); }
.btc-detail .bp-change-big.down { color: #ff2a1f; border-color: #ff2a1f; background: rgba(255,42,31,.1); }
.btc-detail #bp-spark-big {
  display: block;
  margin: 0 auto 14px;
  border: 2px solid var(--sand);
  max-width: 100%;
}
.btc-detail .bp-sources {
  text-align: left;
  background: rgba(0,0,0,.4);
  border: 1px dashed var(--sand);
  padding: 12px 16px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 13px;
}
.btc-detail .bp-sources h3 {
  color: var(--neon-yellow);
  font-family: var(--display);
  font-size: 13px;
  margin: 0 0 8px;
}
.btc-detail .bp-sources ul { padding-left: 18px; margin: 0; color: var(--bone); }

/* mobile */
@media (max-width: 820px) {
  .btc-widget {
    min-width: 0;
    font-size: 12px;
    padding: 1px 6px;
  }
  .btc-widget .bp-label { display: none; }
  .btc-widget .bp-spark { display: none; }
  .btc-widget .bp-price { font-size: 13px; }
  .btc-widget .bp-change { font-size: 10px; }
}
@media (max-width: 480px) {
  .btc-widget .bp-change { display: none; }
}