*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  background-color: var(--rr-bg-page);
  color: var(--rr-text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.loader {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 5px solid var(--rr-border);
  border-radius: 50%;
  border-top-color: var(--rr-accent);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   FLOATING (FIXED) HEADER REPRO MODE — opt-in via ?floatingHeader=1
   Reproduces integrations whose header is position:fixed, where the SDK's
   scroll-to-top lands content underneath the header. Only the existing
   #app-header's size and positioning change; its markup is untouched.
   Height is responsive so the snippet's scrollOffset function form (resolved
   per scroll) can be exercised by resizing the window across the breakpoint.
   ============================================================ */

.rr-floating-header {
  --rr-header-h: var(--rr-floating-header-height, 100px);
}

@media (max-width: 963px) {
  .rr-floating-header {
    --rr-header-h: 56px;
  }
}

.rr-floating-header #app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1021;
  height: var(--rr-header-h);
}

.rr-floating-header main {
  padding-top: var(--rr-header-h);
}

/* ============================================================
   THEME: CSS CUSTOM PROPERTIES
   Light mode (default) uses standard Tailwind-compatible grays.
   Dark mode uses a Dracula-inspired developer-friendly palette.
   ============================================================ */

:root {
  --rr-bg-page: #f3f4f6;
  --rr-bg-card: #ffffff;
  --rr-bg-input: #e5e7eb;
  --rr-bg-section: #f9fafb;
  --rr-text-primary: #111827;
  --rr-text-secondary: #374151;
  --rr-text-muted: #6b7280;
  --rr-border: #e5e7eb;
  --rr-divider: #d1d5db;
  --rr-header-bg: #ffffff;
  --rr-footer-bg: #ffffff;
  --rr-accent: #2563eb;
  --rr-accent-hover: #1d4ed8;
  --rr-accent-ring: rgba(37, 99, 235, 0.3);
  --rr-input-focus-bg: #ffffff;
  --rr-toggle-active: #2563eb;
  --rr-btn-disabled-bg: #9ca3af;
  --rr-btn-disabled-text: #ffffff;
  --rr-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Dracula-inspired dark theme */
html.dark {
  --rr-bg-page: #1a1b23;
  --rr-bg-card: #282a36;
  --rr-bg-input: #383a59;
  --rr-bg-section: #21222c;
  --rr-text-primary: #f8f8f2;
  --rr-text-secondary: #cdd6f4;
  --rr-text-muted: #6272a4;
  --rr-border: #44475a;
  --rr-divider: #44475a;
  --rr-header-bg: #21222c;
  --rr-footer-bg: #21222c;
  --rr-accent: #bd93f9;
  --rr-accent-hover: #caa9fa;
  --rr-accent-ring: rgba(189, 147, 249, 0.3);
  --rr-input-focus-bg: #44475a;
  --rr-toggle-active: #50fa7b;
  --rr-btn-disabled-bg: #44475a;
  --rr-btn-disabled-text: #6272a4;
  --rr-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   LAYOUT CHROME (header, footer)
   ============================================================ */

#app-header {
  background-color: var(--rr-header-bg) !important;
  border-bottom-color: var(--rr-divider) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#app-footer {
  background-color: var(--rr-footer-bg) !important;
  border-top-color: var(--rr-divider) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#app-footer p {
  color: var(--rr-text-muted);
}

/* Debug panel */
#debug-panel {
  background-color: var(--rr-bg-card) !important;
  border-color: var(--rr-border) !important;
}

#debug-panel p {
  color: var(--rr-text-muted) !important;
}

#debug-panel button {
  color: var(--rr-text-primary) !important;
}

#debug-panel button:hover {
  background-color: var(--rr-bg-input) !important;
}

/* ============================================================
   FORM CONTAINER & CARD
   ============================================================ */

#readyremit-form-container {
  background-color: var(--rr-bg-page) !important;
  transition: background-color 0.2s ease;
}

#readyremit-form {
  background-color: var(--rr-bg-card) !important;
  border: 1px solid var(--rr-border) !important;
  box-shadow: var(--rr-shadow) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* ============================================================
   FORM TYPOGRAPHY
   ============================================================ */

#readyremit-form p,
#readyremit-form label,
#readyremit-form h2,
#readyremit-form span:not([class*="after"]) {
  color: var(--rr-text-primary);
}

html.dark #readyremit-form p.text-gray-500,
html.dark #readyremit-form .text-gray-500 {
  color: var(--rr-text-muted) !important;
}

html.dark #readyremit-form h2 {
  color: var(--rr-accent) !important;
}

/* ============================================================
   FORM INPUTS, SELECTS, TEXTAREAS
   ============================================================ */

html.dark #readyremit-form input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="submit"]):not([type="hidden"]),
html.dark #readyremit-form select,
html.dark #readyremit-form textarea {
  background-color: var(--rr-bg-input) !important;
  color: var(--rr-text-primary) !important;
  border-color: var(--rr-border) !important;
}

html.dark #readyremit-form input:focus:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]),
html.dark #readyremit-form select:focus,
html.dark #readyremit-form textarea:focus {
  background-color: var(--rr-input-focus-bg) !important;
  border-color: var(--rr-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--rr-accent-ring) !important;
}

html.dark #readyremit-form input::placeholder,
html.dark #readyremit-form textarea::placeholder {
  color: var(--rr-text-muted) !important;
  opacity: 1;
}

html.dark #readyremit-form select option {
  background-color: var(--rr-bg-input);
  color: var(--rr-text-primary);
}

/* ============================================================
   FORM BORDERS & SECTIONS
   ============================================================ */

html.dark #readyremit-form .border-gray-200,
html.dark #readyremit-form .border-t,
html.dark #readyremit-form .border-b,
html.dark #readyremit-form .border {
  border-color: var(--rr-border) !important;
}

html.dark #readyremit-form .divide-y > * {
  border-color: var(--rr-border) !important;
}

html.dark #readyremit-form section {
  border-color: var(--rr-border) !important;
  background-color: var(--rr-bg-section) !important;
}

html.dark #customSourceAccountsSection {
  background-color: var(--rr-bg-section) !important;
  border-color: var(--rr-border) !important;
}

/* ============================================================
   SUBMIT BUTTON
   ============================================================ */

html.dark #submitButton:not(:disabled) {
  background-color: var(--rr-accent) !important;
  color: #1a1b23 !important;
}

html.dark #submitButton:not(:disabled):hover {
  background-color: var(--rr-accent-hover) !important;
}

html.dark #submitButton:disabled {
  background-color: var(--rr-btn-disabled-bg) !important;
  color: var(--rr-btn-disabled-text) !important;
}

/* ============================================================
   TOGGLE SWITCHES
   Dracula green (#50fa7b) for active state in dark mode
   ============================================================ */

html.dark #readyremit-form .peer:checked ~ div {
  background-color: var(--rr-toggle-active) !important;
}

html.dark #readyremit-form .peer:focus ~ div {
  box-shadow: 0 0 0 4px var(--rr-accent-ring) !important;
}

/* ============================================================
   DARK MODE TOGGLE BUTTON (header)
   ============================================================ */

/* Header toggle - in the wrapper app header */
#wrapper-dark-toggle {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 0.375rem;
  color: var(--rr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

#wrapper-dark-toggle:hover {
  color: var(--rr-text-primary);
  border-color: var(--rr-border);
  background-color: var(--rr-bg-input);
}