.logo_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Theme helpers for new React UI */
:root {
  --nublock-primary: #d28fdb;
  --nublock-primary-hover: #c26ec8;
  --nublock-accent: #8e44ad;
}

.btn-primary,
.btn-success {
  background-color: var(--nublock-primary);
  border-color: var(--nublock-primary);
}

.btn-primary:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-success:focus {
  background-color: var(--nublock-primary-hover);
  border-color: var(--nublock-primary-hover);
}

.btn-outline-primary {
  color: var(--nublock-primary);
  border-color: var(--nublock-primary);
}

.btn-outline-primary:hover {
  background-color: var(--nublock-primary);
  border-color: var(--nublock-primary);
}

.text-primary,
.btn-link.text-primary {
  color: var(--nublock-primary) !important;
}

.page-link.active,
.active > .page-link {
  background-color: var(--nublock-primary);
  border-color: var(--nublock-primary);
}

.nav-tabs-custom.nav-success .nav-link.active {
  color: var(--nublock-primary);
  border-bottom-color: var(--nublock-primary);
}

.card.border-theme {
  border-color: #eccaf5 !important;
}

/* Portal modals — centered overlay, independent of Bootstrap .modal positioning */
.app-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 34, 58, 0.55);
}

.app-modal-root {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
  pointer-events: none;
}

.app-modal-panel {
  pointer-events: auto;
  width: 100%;
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  margin: auto;
}

.app-modal-panel-sm {
  max-width: 360px;
}

.app-modal-panel-md {
  max-width: 520px;
}

.app-modal-panel-lg {
  max-width: 800px;
}

.app-modal-panel-xl {
  max-width: 1140px;
}

.app-modal-panel .modal-content {
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 34, 58, 0.18);
  background: var(--in-card-bg, #fff);
  color: var(--in-body-color);
}

.app-modal-panel .modal-header {
  border-bottom: 1px solid var(--in-border-color, #eef0f3);
}

.app-modal-panel .modal-footer {
  border-top: 1px solid var(--in-border-color, #eef0f3);
}

/* Dark mode overrides for app-modal */
[data-bs-theme=dark] .app-modal-panel .modal-content,
[data-topbar=dark] .app-modal-panel .modal-content {
  background: var(--in-secondary-bg, #17191a);
  color: var(--in-body-color, #ced4da);
}

[data-bs-theme=dark] .app-modal-panel .modal-header,
[data-bs-theme=dark] .app-modal-panel .modal-footer {
  border-color: var(--in-border-color, #242627);
}

[data-bs-theme=dark] .app-modal-panel .modal-title {
  color: var(--in-heading-color, #ced4da);
}

[data-bs-theme=dark] .app-modal-panel .form-label {
  color: var(--in-body-color, #ced4da);
}

[data-bs-theme=dark] .app-modal-panel .form-control {
  background-color: var(--in-tertiary-bg, #1c1e1e);
  border-color: var(--in-border-color, #242627);
  color: var(--in-body-color, #ced4da);
}

[data-bs-theme=dark] .app-modal-panel .form-control::placeholder {
  color: var(--in-secondary-color, #76797e);
}

[data-bs-theme=dark] .app-modal-panel .list-group-item {
  background-color: var(--in-secondary-bg, #17191a);
  color: var(--in-body-color, #ced4da);
  border-color: var(--in-border-color, #242627);
}

[data-bs-theme=dark] .app-modal-panel .list-group-item:hover {
  background-color: var(--in-tertiary-bg, #1c1e1e);
}

[data-bs-theme=dark] .app-modal-panel hr {
  border-color: var(--in-border-color, #242627);
}

[data-bs-theme=dark] .app-modal-panel span[style*="color: #666"] {
  color: var(--in-secondary-color, #76797e) !important;
}

[data-bs-theme=dark] .app-modal-panel .btn-light {
  background-color: var(--in-tertiary-bg, #1c1e1e);
  border-color: var(--in-border-color, #242627);
  color: var(--in-body-color, #ced4da);
}

/* Support floating button */
.support-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;
  background-color: var(--nublock-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  width: 48px;
  height: 48px;
  box-shadow: 0 8px 20px rgba(210, 143, 219, 0.35);
}

.support-fab:hover {
  background-color: var(--nublock-primary-hover);
  color: #fff;
}

/* Calendly — only raise z-index; do not override Calendly layout */
.calendly-overlay {
  z-index: 100000 !important;
}

.calendly-popup {
  z-index: 100001 !important;
}

/* Schedule intro modal (on-off ramp) */
.schedule-intro-modal .modal-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.schedule-intro-link {
  color: #3b00ff;
  font-size: 14.5px;
  font-weight: 700;
}

.checkout-api-btn {
  background: rgb(210 143 219) !important;
  border: none !important;
  color: #fff !important;
}

.checkout-api-btn:hover {
  background: #c26ec8 !important;
  color: #fff !important;
}

/* Keep sidebar settings submenu visible */
.sidebar-settings-toggle {
  border: 0;
  background: transparent;
  text-align: inherit;
  cursor: pointer;
}

.sidebar-settings-toggle::after {
  display: block;
  content: "\f105";
  font-family: "Line Awesome Free";
  font-weight: 900;
  margin-right: auto;
  transition: transform 0.2s;
  font-size: 0.813rem;
  position: absolute;
  left: 20px;
  color: var(--in-vertical-menu-title-color);
}

.sidebar-settings-toggle[aria-expanded="true"]::after {
  transform: rotate(-90deg);
}

.navbar-menu .sidebar-settings-menu.show {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

[data-layout="vertical"][data-sidebar-size="sm-hover"] .navbar-menu:hover .sidebar-settings-menu.show,
[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .nav-item:hover > .sidebar-settings-menu.show {
  display: block !important;
}

.copied-btn {
  background-color: #28a745 !important;
  color: #fff !important;
  border-color: #28a745 !important;
}

.copied-input {
  border: 2px solid #28a745 !important;
  background-color: #e6ffed !important;
}

.disabled-card {
  opacity: 0.5;
  pointer-events: none;
}

/* Theme toggle icon (moon → sun in dark mode) — mirrors Velzon .light-dark-mode */
[data-bs-theme="dark"] .theme-toggle-btn .la-moon::before {
  content: "\f185";
}