/**
 * app.css — Custom overrides sobre Bootstrap 5.3.8
 * Bootstrap provee: grid, navbar, forms, buttons, badges, cards, alerts.
 * Aquí solo añadimos lo que Bootstrap no cubre:
 *   - CSS custom properties del sistema de temas (colors.css / light.css / dark.css)
 *   - Hero section
 *   - Gateway option cards (interacción JS)
 *   - Stripe card element
 *   - Navbar backdrop blur + tema
 */

/* ── Navbar styling ───────────────────────────────────────────────────────── */

[data-bs-theme="dark"] #main-navbar {
  background: var(--nav-bg, rgba(15,23,42,0.95));
  border-bottom-color: var(--nav-border, rgba(255,255,255,.08));
}

/* ── Hero section ─────────────────────────────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg,
    var(--bg-surface, #ffffff) 0%,
    var(--bg-subtle, #f8fafc) 100%);
  min-height: 80vh;
  display: flex;
  align-items: center;
}

[data-bs-theme="dark"] .hero-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* ── Gateway option cards ─────────────────────────────────────────────────── */
.gateway-option {
  transition: border-color .2s, box-shadow .2s, transform .15s;
}

.gateway-option:hover {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), .15) !important;
  transform: translateY(-1px);
}

.gateway-option.selected {
  border-color: var(--bs-primary) !important;
  background: var(--bs-primary-bg-subtle);
}

/* ── Stripe card element ──────────────────────────────────────────────────── */
#stripe-card-element {
  padding: 10px 14px;
  height: 42px;
  box-sizing: border-box;
}

/* ── Theme toggle icon swap ───────────────────────────────────────────────── */
[data-bs-theme="dark"] #icon-light  { display: none !important; }
[data-bs-theme="dark"] #icon-dark   { display: inline-block !important; }
[data-bs-theme="light"] #icon-dark  { display: none !important; }
[data-bs-theme="light"] #icon-light { display: inline-block !important; }

/* ── Tenant bar (tenant-demo theme) ──────────────────────────────────────── */
.tenant-bar {
  background: var(--bs-primary);
  color: #fff;
  text-align: center;
  padding: 6px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
}