/* ═══════════════════════════════════════════════════
   VIRTUARY v2 — custom.css
   Overrides for m2-*, wc-* and page-specific styles
   ═══════════════════════════════════════════════════ */

/* ── Theme-level accent variables ── */
.virtuary-body {
  --m2-accent: var(--vr-accent);
  --accent: var(--vr-accent);
  --accent-color: var(--vr-accent);
  --sw-accent: var(--vr-accent);
  --nv-primary: var(--vr-accent);
  --nv-primary-2: var(--vr-accent-hover);
}

/* ══════════════════════════════════════════════════
   M2-BTN — full override to purple accent
   ══════════════════════════════════════════════════ */
.virtuary-body .m2-btn,
.virtuary-body .btn {
  background: var(--vr-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--vr-r) !important;
  box-shadow: 0 4px 16px var(--vr-accent-glow) !important;
  font-family: inherit;
  font-weight: 600;
  transition: background .15s, box-shadow .15s, transform .1s !important;
}
.virtuary-body .m2-btn:hover,
.virtuary-body .btn:hover {
  background: var(--vr-accent-hover) !important;
  box-shadow: 0 6px 24px var(--vr-accent-glow) !important;
  transform: translateY(-1px);
}
.virtuary-body .m2-btn:active,
.virtuary-body .btn:active {
  transform: translateY(0) !important;
}

.virtuary-body .m2-btn-ghost,
.virtuary-body .btn-secondary {
  background: transparent !important;
  color: var(--vr-text-2) !important;
  border: 1px solid var(--vr-border-strong) !important;
  box-shadow: none !important;
}
.virtuary-body .m2-btn-ghost:hover,
.virtuary-body .btn-secondary:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--vr-text) !important;
  border-color: var(--vr-border-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

.virtuary-body .m2-btn-danger,
.virtuary-body .btn-danger {
  background: var(--vr-danger-bg) !important;
  border: 1px solid rgba(248,113,113,0.3) !important;
  color: var(--vr-danger) !important;
  box-shadow: none !important;
}
.virtuary-body .m2-btn-danger:hover,
.virtuary-body .btn-danger:hover {
  background: rgba(248,113,113,0.18) !important;
  border-color: rgba(248,113,113,0.5) !important;
  color: #fca5a5 !important;
  box-shadow: none !important;
}

.virtuary-body .m2-btn-warn {
  background: var(--vr-warn-bg) !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
  color: var(--vr-warn) !important;
  box-shadow: none !important;
}
.virtuary-body .m2-btn-warn:hover {
  background: rgba(251,191,36,0.18) !important;
  border-color: rgba(251,191,36,0.5) !important;
  color: #fcd34d !important;
  box-shadow: none !important;
}

.virtuary-body .m2-btn-outline {
  background: transparent !important;
  border: 1px solid var(--vr-accent-border) !important;
  color: var(--vr-accent) !important;
  box-shadow: none !important;
}
.virtuary-body .m2-btn-outline:hover {
  background: var(--vr-accent-subtle) !important;
  border-color: var(--vr-accent) !important;
  color: var(--vr-accent-hover) !important;
  box-shadow: none !important;
}

.virtuary-body .m2-btn-trial {
  background: var(--vr-success-bg) !important;
  border: 1px solid rgba(74,222,128,0.3) !important;
  color: var(--vr-success) !important;
  box-shadow: none !important;
}
.virtuary-body .m2-btn-trial:hover {
  background: rgba(74,222,128,0.18) !important;
  border-color: rgba(74,222,128,0.5) !important;
  color: #86efac !important;
}

.virtuary-body .m2-btn-sm {
  padding: 5px 11px !important;
  font-size: 12px !important;
  min-height: 30px !important;
}

.virtuary-body .m2-btn-create-cta {
  background: var(--vr-accent-subtle) !important;
  border: 1px solid var(--vr-accent-border) !important;
  color: var(--vr-accent) !important;
  box-shadow: none !important;
}
.virtuary-body .m2-btn-create-cta:hover {
  background: rgba(124,106,247,0.18) !important;
  border-color: var(--vr-accent) !important;
  color: var(--vr-accent-hover) !important;
}

.virtuary-body .m2-btn-connect-cta {
  background: var(--vr-accent) !important;
  color: #fff !important;
}

.virtuary-body .m2-btn[disabled],
.virtuary-body .m2-btn:disabled,
.virtuary-body .btn[disabled],
.virtuary-body .btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ── Links ── */
.virtuary-body .m2-content a,
.virtuary-body .m2-body a {
  color: var(--vr-accent);
  transition: color .15s;
}
.virtuary-body .m2-content a:hover,
.virtuary-body .m2-body a:hover {
  color: var(--vr-accent-hover);
}

/* ── Focus ring for all interactive elements ── */
.virtuary-body .m2-btn:focus-visible,
.virtuary-body .btn:focus-visible,
.virtuary-body .vr-btn:focus-visible {
  outline: 2px solid var(--vr-accent);
  outline-offset: 2px;
}

/* ── VR-BTN — force white text regardless of link color inheritance ── */
.virtuary-body .vr-btn,
.virtuary-body a.vr-btn {
  color: #fff !important;
  text-decoration: none !important;
}
.virtuary-body .vr-btn.vr-btn-ghost,
.virtuary-body a.vr-btn.vr-btn-ghost {
  color: var(--vr-text-2) !important;
}
.virtuary-body .vr-btn.vr-btn-ghost:hover,
.virtuary-body a.vr-btn.vr-btn-ghost:hover {
  color: var(--vr-text) !important;
}
.virtuary-body .vr-btn.vr-btn-warn,
.virtuary-body a.vr-btn.vr-btn-warn {
  color: #1a1000 !important;
}

/* ── Sidebar nav — force correct icon/link colors ── */
.virtuary-body .vr-nav-link,
.virtuary-body a.vr-nav-link {
  color: var(--vr-muted) !important;
  text-decoration: none !important;
}
.virtuary-body .vr-nav-link:hover,
.virtuary-body a.vr-nav-link:hover {
  color: var(--vr-text) !important;
}
.virtuary-body .vr-nav-link.is-active,
.virtuary-body a.vr-nav-link.is-active {
  color: var(--vr-accent) !important;
}
.virtuary-body .vr-logout-btn {
  color: var(--vr-muted) !important;
}
.virtuary-body .vr-logout-btn:hover {
  color: var(--vr-danger) !important;
}

/* ══════════════════════════════════════════════════
   SUPPORT WIDGET
   ══════════════════════════════════════════════════ */
.virtuary-body .wc-support-fab {
  background: var(--vr-bg-2) !important;
  border: 1px solid var(--vr-border-strong) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  color: var(--vr-text) !important;
}
.virtuary-body .wc-support-fab:hover {
  border-color: var(--vr-accent-border) !important;
}
.virtuary-body .wc-support-widget {
  background: var(--vr-bg-1) !important;
  border: 1px solid var(--vr-border-strong) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
  border-radius: var(--vr-r-xl) !important;
}
.virtuary-body .wc-support-widget * {
  box-sizing: border-box;
}
.virtuary-body .wc-sw-send-btn {
  background: var(--vr-accent) !important;
  color: #fff !important;
}
.virtuary-body .wc-sw-send-btn:hover {
  background: var(--vr-accent-hover) !important;
}

/* ── Body lock (sidebar open) ── */
.wc-neo-lock { overflow: hidden !important; }

/* ── Dropdown select ── */
.virtuary-body select option {
  background: var(--vr-bg-2);
  color: var(--vr-text);
}

/* ── Code / pre ── */
.virtuary-body code,
.virtuary-body pre {
  font-family: var(--vr-mono);
  font-size: 12px;
  background: var(--vr-bg-2);
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-r);
  padding: 2px 6px;
  color: var(--vr-text);
  word-break: break-all;
}
.virtuary-body pre {
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre-wrap;
  display: block;
}

/* ── m2-modal backdrop ── */
.virtuary-body .m2-modal-backdrop,
.virtuary-body [data-modal-backdrop] {
  background: rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(4px) !important;
}

/* ── m2-alert (promo codes) ── */
.virtuary-body .m2-alert {
  padding: 8px 12px;
  border-radius: var(--vr-r);
  font-size: 12.5px;
  border: 1px solid transparent;
}
.virtuary-body .m2-alert-ok  {
  background: var(--vr-success-bg) !important;
  border-color: rgba(74,222,128,0.2) !important;
  color: var(--vr-success) !important;
}
.virtuary-body .m2-alert-err {
  background: var(--vr-danger-bg) !important;
  border-color: rgba(248,113,113,0.2) !important;
  color: var(--vr-danger) !important;
}

/* ── m2-promo-block ── */
.virtuary-body .m2-promo-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── m2-expiry-bar ── */
.virtuary-body .m2-expiry-bar {
  height: 3px;
  background: var(--vr-border-strong);
  border-radius: 2px;
  overflow: hidden;
}
.virtuary-body .m2-expiry-bar-fill {
  height: 100%;
  background: var(--vr-accent);
  border-radius: 2px;
}

/* ── Status badges compatibility ── */
.virtuary-body .m2-status-active  { color: var(--vr-success) !important; }
.virtuary-body .m2-status-expired,
.virtuary-body .m2-status-inactive { color: var(--vr-danger) !important; }

/* ── Payment status pills compatibility ── */
.virtuary-body .m2-pay-status-pill { font-size: 11px; font-weight: 600; border-radius: 12px; padding: 2px 8px; border: 1px solid; }
.virtuary-body .m2-pay-status-pill[data-status="success"],
.virtuary-body .m2-pay-status-pill.status-success {
  color: var(--vr-success) !important; background: var(--vr-success-bg) !important; border-color: rgba(74,222,128,0.2) !important;
}
.virtuary-body .m2-pay-status-pill[data-status="pending"],
.virtuary-body .m2-pay-status-pill.status-pending {
  color: var(--vr-warn) !important; background: var(--vr-warn-bg) !important; border-color: rgba(251,191,36,0.2) !important;
}
.virtuary-body .m2-pay-status-pill[data-status="failed"],
.virtuary-body .m2-pay-status-pill.status-failed {
  color: var(--vr-danger) !important; background: var(--vr-danger-bg) !important; border-color: rgba(248,113,113,0.2) !important;
}

/* ── Provider / method cards ── */
.virtuary-body .m2-provider-card,
.virtuary-body .m2-method-card {
  border: 1px solid var(--vr-border) !important;
  background: var(--vr-surface-2) !important;
  border-radius: var(--vr-r-md) !important;
  cursor: pointer;
  transition: border-color .15s, background .15s !important;
  color: var(--vr-text) !important;
}
.virtuary-body .m2-provider-card:hover,
.virtuary-body .m2-method-card:hover,
.virtuary-body .m2-provider-card.selected,
.virtuary-body .m2-method-card.selected,
.virtuary-body .m2-provider-card[data-selected="1"],
.virtuary-body .m2-method-card[data-selected="1"] {
  border-color: var(--vr-accent-border) !important;
  background: var(--vr-accent-subtle) !important;
}

/* ── Keys table actions ── */
.virtuary-body .vr-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ── Platform tabs (connect modal) ── */
.virtuary-body .m2-platform-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.virtuary-body .m2-platform-tab {
  padding: 7px 10px;
  background: none;
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-r);
  color: var(--vr-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s, border-color .12s;
}
.virtuary-body .m2-platform-tab:hover {
  background: rgba(255,255,255,0.04);
  color: var(--vr-text);
  border-color: var(--vr-border-strong);
}
.virtuary-body .m2-platform-tab.is-active {
  background: var(--vr-accent-subtle);
  border-color: var(--vr-accent-border);
  color: var(--vr-accent);
}

/* ── Apps grid (connect modal) ── */
.virtuary-body .m2-apps-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.virtuary-body .m2-app-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: none;
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-r);
  color: var(--vr-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s, border-color .12s;
}
.virtuary-body .m2-app-btn:hover {
  background: rgba(255,255,255,0.04);
  color: var(--vr-text);
  border-color: var(--vr-border-strong);
}
.virtuary-body .m2-app-btn.is-active {
  background: var(--vr-accent-subtle);
  border-color: var(--vr-accent-border);
  color: var(--vr-accent);
}

/* ── Copy buttons ── */
.virtuary-body .m2-key-copy-btn,
.virtuary-body .m2-copy-btn {
  background: var(--vr-surface-2) !important;
  border: 1px solid var(--vr-border) !important;
  color: var(--vr-muted) !important;
  border-radius: var(--vr-r) !important;
  transition: color .15s, border-color .15s !important;
}
.virtuary-body .m2-key-copy-btn:hover,
.virtuary-body .m2-copy-btn:hover {
  color: var(--vr-text) !important;
  border-color: var(--vr-border-strong) !important;
}

/* ── Promo badge ── */
.virtuary-body .m2-promo-badge {
  background: var(--vr-surface-2) !important;
  border: 1px solid var(--vr-accent-border) !important;
  color: var(--vr-accent) !important;
  border-radius: var(--vr-r) !important;
  font-family: var(--vr-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}

/* ── Chip ── */
.virtuary-body .m2-chip {
  font-family: var(--vr-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: var(--vr-r) !important;
}

/* ── Keys search input (compatibility) ── */
.virtuary-body .m2-keys-search input {
  background: var(--vr-bg-2) !important;
  border-color: var(--vr-border) !important;
  color: var(--vr-text) !important;
}

/* ── Dropdown section border ── */
.virtuary-body .m2-dropdown-section {
  border-bottom: 1px solid var(--vr-border) !important;
}

/* ── QR code block ── */
.virtuary-body .m2-qr-block,
.virtuary-body [class*="qr-"] {
  background: #fff;
  border-radius: var(--vr-r-md);
  display: inline-block;
  padding: 8px;
}

/* ── Instructions block ── */
.virtuary-body .m2-instructions {
  font-size: 13px;
  color: var(--vr-text-2);
  line-height: 1.6;
}
.virtuary-body .m2-instructions h3,
.virtuary-body .m2-instructions h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--vr-text);
  margin: 12px 0 6px;
}
.virtuary-body .m2-instructions p {
  margin: 0 0 8px;
  color: var(--vr-text-2);
}
.virtuary-body .m2-instructions ol,
.virtuary-body .m2-instructions ul {
  margin: 0 0 8px;
  padding-left: 20px;
}
.virtuary-body .m2-instructions li {
  margin-bottom: 4px;
}

/* ── Admin area ── */
.virtuary-body.wc-admin-route .m2-card {
  padding: 14px !important;
}

/* ── Row between helper ── */
.virtuary-body .m2-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* ── Subscription URL display ── */
.virtuary-body .vr-sub-url-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--vr-bg-2);
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-r-md);
  margin: 12px 0;
  flex-wrap: wrap;
}
.virtuary-body .vr-sub-url {
  flex: 1;
  min-width: 0;
  font-family: var(--vr-mono);
  font-size: 11px;
  color: var(--vr-muted);
  word-break: break-all;
}

/* ── Muted text compatibility ── */
.virtuary-body .m2-muted {
  color: var(--vr-muted) !important;
}

/* ── m2-input compatibility ── */
.virtuary-body .m2-input,
.virtuary-body .m2-field input,
.virtuary-body .m2-field select,
.virtuary-body .m2-field textarea {
  background: var(--vr-bg-2) !important;
  border: 1px solid var(--vr-border-strong) !important;
  border-radius: var(--vr-r) !important;
  color: var(--vr-text) !important;
  font-family: inherit;
}
.virtuary-body .m2-input:focus,
.virtuary-body .m2-field input:focus,
.virtuary-body .m2-field select:focus,
.virtuary-body .m2-field textarea:focus {
  border-color: var(--vr-accent) !important;
  box-shadow: 0 0 0 3px rgba(124,106,247,0.12) !important;
  outline: none;
}
.virtuary-body .m2-input::placeholder,
.virtuary-body .m2-field input::placeholder {
  color: var(--vr-muted-2) !important;
}

/* ── m2-field label ── */
.virtuary-body .m2-field > span,
.virtuary-body .m2-field > label {
  color: var(--vr-muted) !important;
  font-size: 12px;
  font-weight: 600;
}

/* ── m2-card ── */
.virtuary-body .m2-card {
  background: var(--vr-surface) !important;
  border: 1px solid var(--vr-border) !important;
  border-radius: var(--vr-r-lg) !important;
  color: var(--vr-text) !important;
}

/* ── m2-stack ── */
.virtuary-body .m2-stack-16 {
  margin-top: 16px;
}

/* ── m2-actions-wrap ── */
.virtuary-body .m2-actions-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── m2-form-grid ── */
.virtuary-body .m2-form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Segmented control (keys) ── */
.virtuary-body .m2-keys-segmented .m2-btn {
  background: transparent !important;
  color: var(--vr-muted) !important;
  border: none !important;
  border-right: 1px solid var(--vr-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.virtuary-body .m2-keys-segmented .m2-btn:last-child {
  border-right: none !important;
}
.virtuary-body .m2-keys-segmented .m2-btn:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--vr-text) !important;
  transform: none !important;
}
.virtuary-body .m2-keys-segmented .m2-btn.is-active {
  background: var(--vr-accent) !important;
  color: #fff !important;
}

/* ── HWID unbind ── */
.virtuary-body .m2-hwid-unbind-btn {
  background: var(--vr-danger-bg) !important;
  border: 1px solid rgba(248,113,113,0.3) !important;
  color: var(--vr-danger) !important;
  box-shadow: none !important;
}
.virtuary-body .m2-hwid-unbind-btn:hover {
  background: rgba(248,113,113,0.18) !important;
  border-color: rgba(248,113,113,0.5) !important;
}

/* ── HWID copy ── */
.virtuary-body .m2-hwid-copy-btn {
  background: var(--vr-surface-2) !important;
  border: 1px solid var(--vr-border) !important;
  color: var(--vr-muted) !important;
  box-shadow: none !important;
}
.virtuary-body .m2-hwid-copy-btn:hover {
  color: var(--vr-text) !important;
  border-color: var(--vr-border-strong) !important;
}

/* ══════════════════════════════════════════════════
   TARIFF CARD — featured ring glow
   ══════════════════════════════════════════════════ */
.virtuary-body .vr-tariff-card-v2.featured {
  box-shadow: 0 0 0 1px rgba(124,106,247,0.3), 0 8px 32px rgba(124,106,247,0.12);
}
.virtuary-body .vr-tariff-card-v2.featured:hover {
  box-shadow: 0 0 0 1px rgba(124,106,247,0.5), 0 12px 40px rgba(124,106,247,0.2);
}

/* ══════════════════════════════════════════════════
   BENTO CELL — accent inner decoration
   ══════════════════════════════════════════════════ */
.virtuary-body .vr-bento-cell--accent {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}