/**
 * sota-interactive.css
 * SOTA Interactive Component Styles — Trading Hub v2
 * Prefixed: .sota-  (isolated, additive — does NOT clobber existing styles)
 * Colors: --bg:#06090F  --gold:#D4A853  --accent:#4CC2FF  --text:#E8EDF5
 * All animations guarded with @media(prefers-reduced-motion:reduce)
 */

/* ─────────────────────────────────────────────
   1. INPUT WITH FLOATING LABEL
   ───────────────────────────────────────────── */

.sota-field {
  position: relative;
  margin-bottom: 20px;
}

.sota-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px 16px 6px;
  color: #E8EDF5;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 180ms, box-shadow 180ms;
}

.sota-input:focus {
  border-color: rgba(212, 168, 83, 0.6);
  box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.08);
}

.sota-input-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #4A5568;
  font-size: 14px;
  pointer-events: none;
  transition: all 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sota-input:focus ~ .sota-input-label,
.sota-input:not(:placeholder-shown) ~ .sota-input-label {
  top: 8px;
  transform: none;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #D4A853;
}

@media (prefers-reduced-motion: reduce) {
  .sota-input {
    transition: none;
  }
  .sota-input-label {
    transition: none;
  }
}

/* ─────────────────────────────────────────────
   2. BUTTONS
   ───────────────────────────────────────────── */

.sota-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  user-select: none;
}

.sota-btn:active {
  transform: scale(0.97);
}

/* Primary */
.sota-btn-primary {
  background: linear-gradient(135deg, #D4A853, #B8902A);
  color: #0a0d12;
  box-shadow: 0 4px 12px rgba(212, 168, 83, 0.35);
}

.sota-btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(212, 168, 83, 0.45);
}

/* Ghost */
.sota-btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #E8EDF5;
}

.sota-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Danger */
.sota-btn-danger {
  background: rgba(242, 110, 110, 0.15);
  border: 1px solid rgba(242, 110, 110, 0.3);
  color: var(--color-directional-bearish, #f26e6e);
}

/* Size variants */
.sota-btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

.sota-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .sota-btn {
    transition: none;
  }
  .sota-btn:active {
    transform: none;
  }
  .sota-btn-primary:hover {
    filter: none;
  }
}

/* ─────────────────────────────────────────────
   3. TABS
   ───────────────────────────────────────────── */

.sota-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 3px;
}

.sota-tab {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #8B95A8;
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
  border: none;
  background: none;
}

.sota-tab.active {
  background: rgba(255, 255, 255, 0.07);
  color: #E8EDF5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .sota-tab {
    transition: none;
  }
}

/* ─────────────────────────────────────────────
   4. TOGGLE SWITCH
   ───────────────────────────────────────────── */

.sota-toggle {
  position: relative;
  width: 44px;
  height: 24px;
}

.sota-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sota-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  cursor: pointer;
  transition: background 200ms;
}

.sota-toggle input:checked ~ .sota-toggle-track {
  background: rgba(212, 168, 83, 0.7);
}

.sota-toggle-thumb {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #E8EDF5;
  border-radius: 50%;
  transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.sota-toggle input:checked ~ .sota-toggle-track .sota-toggle-thumb {
  transform: translateX(20px);
}

@media (prefers-reduced-motion: reduce) {
  .sota-toggle-track {
    transition: none;
  }
  .sota-toggle-thumb {
    transition: none;
  }
}

/* ─────────────────────────────────────────────
   5. FOCUS RING (global, scope-safe via specificity)
   ───────────────────────────────────────────── */

*:focus-visible {
  outline: 2px solid rgba(212, 168, 83, 0.7);
  outline-offset: 2px;
  border-radius: 4px;
}