/* ============================================================
   BillDiary Auth — Premium Next-Level Styling
   ============================================================ */

/* ---------- Root Tokens ---------- */
:root {
  --bd-auth-primary: #4f46e5;
  --bd-auth-primary-light: #818cf8;
  --bd-auth-accent: #06b6d4;
  --bd-auth-bg-start: #0f0c29;
  --bd-auth-bg-mid: #302b63;
  --bd-auth-bg-end: #24243e;
  --bd-auth-glass-bg: rgba(255, 255, 255, 0.07);
  --bd-auth-glass-border: rgba(255, 255, 255, 0.12);
  --bd-auth-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  --bd-auth-card-bg: rgba(255, 255, 255, 0.95);
  --bd-auth-card-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.1);
  --bd-auth-text: #1e1b4b;
  --bd-auth-text-muted: #6b7280;
  --bd-auth-input-border: #e5e7eb;
  --bd-auth-input-focus: #4f46e5;
  --bd-auth-radius: 20px;
  --bd-auth-radius-sm: 12px;
  --bd-auth-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Animated Background ---------- */
.bd-auth-body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, var(--bd-auth-bg-start) 0%, var(--bd-auth-bg-mid) 50%, var(--bd-auth-bg-end) 100%);
  position: relative;
}

/* Animated mesh gradient overlay */
.bd-auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bd-auth-bg::before {
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  background:
    radial-gradient(ellipse 600px 600px at 20% 30%, rgba(79, 70, 229, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 75% 20%, rgba(6, 182, 212, 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 400px 400px at 50% 80%, rgba(168, 85, 247, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 350px 350px at 85% 70%, rgba(236, 72, 153, 0.15) 0%, transparent 70%);
  animation: bd-auth-mesh 20s ease-in-out infinite alternate;
}

@keyframes bd-auth-mesh {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(30px, -20px) rotate(1deg); }
  66%  { transform: translate(-20px, 20px) rotate(-1deg); }
  100% { transform: translate(10px, -10px) rotate(0.5deg); }
}

/* Floating orbs */
.bd-auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: bd-auth-float 15s ease-in-out infinite;
}

.bd-auth-orb--1 {
  width: 400px;
  height: 400px;
  background: rgba(99, 102, 241, 0.4);
  top: -10%;
  left: -5%;
  animation-duration: 18s;
}

.bd-auth-orb--2 {
  width: 300px;
  height: 300px;
  background: rgba(6, 182, 212, 0.3);
  top: 60%;
  right: -5%;
  animation-duration: 22s;
  animation-delay: -5s;
}

.bd-auth-orb--3 {
  width: 250px;
  height: 250px;
  background: rgba(168, 85, 247, 0.25);
  bottom: -5%;
  left: 30%;
  animation-duration: 20s;
  animation-delay: -10s;
}

@keyframes bd-auth-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(40px, -30px) scale(1.05); }
  50%  { transform: translate(-20px, 20px) scale(0.95); }
  75%  { transform: translate(30px, 10px) scale(1.02); }
}

/* Subtle grid pattern overlay */
.bd-auth-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---------- Page Wrapper ---------- */
.bd-auth-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 16px 40px;
}

/* Center the split login/register container in remaining space */
.bd-login-split,
.bd-register-split {
  margin-top: auto;
  margin-bottom: auto;
}

/* ---------- Top Bar ---------- */
.bd-auth-topbar {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.bd-auth-topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bd-auth-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language dropdown override */
.bd-auth-topbar .tw-dw-dropdown summary {
  color: rgba(255,255,255,0.85) !important;
  font-size: 14px;
  font-weight: 500;
  transition: var(--bd-auth-transition);
}
.bd-auth-topbar .tw-dw-dropdown summary:hover {
  color: #fff !important;
}
.bd-auth-topbar .tw-dw-dropdown .tw-dw-menu {
  border-radius: var(--bd-auth-radius-sm);
  box-shadow: var(--bd-auth-glass-shadow);
  border: 1px solid var(--bd-auth-glass-border);
}

/* Topbar icon for buttons */
.bd-auth-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Topbar outline button (Register) */
.bd-auth-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 22px;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.08);
  transition: var(--bd-auth-transition);
  letter-spacing: 0.01em;
}
.bd-auth-btn-outline:hover,
.bd-auth-btn-outline:focus {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.7);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.35);
}

/* Topbar ghost button (Pricing, Sign In) */
.bd-auth-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border: none;
  border-radius: 50px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  transition: var(--bd-auth-transition);
  letter-spacing: 0.01em;
}
.bd-auth-btn-ghost:hover,
.bd-auth-btn-ghost:focus {
  background: rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Old topbar-link kept for backwards compat */
.bd-auth-topbar-link {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: var(--bd-auth-transition);
  padding: 8px 4px;
}
.bd-auth-topbar-link:hover,
.bd-auth-topbar-link:focus {
  color: #fff;
  text-decoration: none;
}

/* ---------- Logo ---------- */
.bd-auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.bd-auth-logo-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--bd-auth-primary-light), var(--bd-auth-accent));
  box-shadow: 0 0 30px rgba(79, 70, 229, 0.3), 0 0 60px rgba(6, 182, 212, 0.15);
  animation: bd-auth-logo-glow 4s ease-in-out infinite alternate;
}

.bd-auth-logo-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

@keyframes bd-auth-logo-glow {
  0%   { box-shadow: 0 0 30px rgba(79, 70, 229, 0.3), 0 0 60px rgba(6, 182, 212, 0.15); }
  100% { box-shadow: 0 0 40px rgba(79, 70, 229, 0.45), 0 0 80px rgba(6, 182, 212, 0.25); }
}

/* ---------- Card ---------- */
.bd-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bd-auth-card-bg);
  border-radius: var(--bd-auth-radius);
  padding: 40px 36px 36px;
  box-shadow: var(--bd-auth-card-shadow);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.2);
  animation: bd-auth-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
  overflow: hidden;
}

/* Subtle top gradient accent line */
.bd-auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bd-auth-primary), var(--bd-auth-accent), var(--bd-auth-primary-light));
  background-size: 200% 100%;
  animation: bd-auth-shimmer-line 3s linear infinite;
}

@keyframes bd-auth-shimmer-line {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes bd-auth-card-in {
  0%   { opacity: 0; transform: translateY(30px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Wide card for register */
.bd-auth-card--wide {
  max-width: 800px;
}

/* ---------- Card Header ---------- */
.bd-auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.bd-auth-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--bd-auth-text);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.bd-auth-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--bd-auth-text-muted);
  margin: 0;
}

/* ---------- Form Fields ---------- */
.bd-auth-field {
  margin-bottom: 20px;
  position: relative;
}

.bd-auth-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.bd-auth-label-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-auth-text);
  letter-spacing: 0.01em;
}

.bd-auth-label-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-auth-primary);
  text-decoration: none;
  transition: var(--bd-auth-transition);
}
.bd-auth-label-link:hover {
  color: var(--bd-auth-accent);
  text-decoration: none;
}

.bd-auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.bd-auth-input-icon {
  position: absolute;
  left: 14px;
  width: 20px;
  height: 20px;
  color: #9ca3af;
  pointer-events: none;
  transition: var(--bd-auth-transition);
  z-index: 2;
}

.bd-auth-input {
  width: 100%;
  height: 50px;
  padding: 0 44px 0 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--bd-auth-text);
  background: #f9fafb;
  border: 1.5px solid var(--bd-auth-input-border);
  border-radius: var(--bd-auth-radius-sm);
  outline: none;
  transition: var(--bd-auth-transition);
  -webkit-appearance: none;
}

.bd-auth-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.bd-auth-input:hover {
  border-color: #d1d5db;
  background: #fff;
}

.bd-auth-input:focus {
  border-color: var(--bd-auth-input-focus);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1), 0 1px 2px rgba(0,0,0,0.05);
}

.bd-auth-input:focus ~ .bd-auth-input-icon,
.bd-auth-input:focus + .bd-auth-input-icon {
  color: var(--bd-auth-primary);
}

/* Focus state for icon when input is focused - using parent */
.bd-auth-input-wrap:focus-within .bd-auth-input-icon {
  color: var(--bd-auth-primary);
}

/* Toggle password button */
.bd-auth-toggle-pw {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #9ca3af;
  transition: var(--bd-auth-transition);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-auth-toggle-pw:hover {
  color: var(--bd-auth-primary);
}
.bd-auth-toggle-pw svg {
  width: 20px;
  height: 20px;
}

/* ---------- Checkbox ---------- */
.bd-auth-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 24px;
  cursor: pointer;
}

.bd-auth-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: var(--bd-auth-transition);
  position: relative;
  flex-shrink: 0;
}

.bd-auth-checkbox:checked {
  background: var(--bd-auth-primary);
  border-color: var(--bd-auth-primary);
}

.bd-auth-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bd-auth-checkbox:focus {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.bd-auth-remember-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--bd-auth-text-muted);
  user-select: none;
}

/* ---------- Submit Button ---------- */
.bd-auth-submit {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: var(--bd-auth-radius-sm);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bd-auth-primary), #6366f1, var(--bd-auth-accent));
  background-size: 200% 200%;
  animation: bd-auth-btn-gradient 4s ease infinite;
  transition: var(--bd-auth-transition);
  letter-spacing: 0.02em;
  text-transform: none;
}

@keyframes bd-auth-btn-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shimmer overlay */
.bd-auth-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: 0.5s;
}

.bd-auth-submit:hover::after {
  left: 100%;
}

.bd-auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4), 0 4px 6px -2px rgba(0,0,0,0.1);
}

.bd-auth-submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
}

.bd-auth-submit:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3), 0 10px 25px -5px rgba(79, 70, 229, 0.4);
}

/* ---------- Divider ---------- */
.bd-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bd-auth-divider::before,
.bd-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* ---------- Footer Link ---------- */
.bd-auth-footer {
  text-align: center;
  margin-top: 24px;
}

.bd-auth-footer-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--bd-auth-text-muted);
}

.bd-auth-footer-link {
  font-weight: 700;
  background: linear-gradient(135deg, var(--bd-auth-primary), var(--bd-auth-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  transition: var(--bd-auth-transition);
}
.bd-auth-footer-link:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* ---------- Error / Alert ---------- */
.bd-auth-error {
  font-size: 12px;
  font-weight: 500;
  color: #ef4444;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bd-auth-alert {
  padding: 12px 16px;
  border-radius: var(--bd-auth-radius-sm);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}

.bd-auth-alert--info {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.bd-auth-alert--success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.bd-auth-alert--danger {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ---------- reCAPTCHA ---------- */
.bd-auth-recaptcha {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.bd-auth-recaptcha .g-recaptcha {
  transform: scale(0.95);
  transform-origin: center;
}

/* ---------- Demo Panel (for demo env) ---------- */
.bd-auth-demo-panel {
  width: 100%;
  max-width: 440px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--bd-auth-radius);
  padding: 24px;
  animation: bd-auth-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.bd-auth-demo-panel h4 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  text-align: center;
}

.bd-auth-demo-panel .demo-sub {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.5;
}

.bd-auth-demo-panel .demo-sub b {
  color: rgba(255,255,255,0.85);
}

.bd-auth-demo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.bd-auth-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  transition: var(--bd-auth-transition);
  cursor: pointer;
}

.bd-auth-demo-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.bd-auth-demo-btn i {
  font-size: 14px;
  opacity: 0.8;
}

.bd-auth-demo-divider {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 12px 0;
}

.bd-auth-demo-section-label {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .bd-auth-wrapper {
    padding: 20px 12px 30px;
  }
  .bd-auth-topbar {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }
  .bd-auth-card {
    padding: 28px 20px 24px;
    border-radius: 16px;
  }
  .bd-auth-card--wide {
    max-width: 100%;
  }
  .bd-auth-title {
    font-size: 20px;
  }
  .bd-auth-logo-ring {
    width: 56px;
    height: 56px;
  }
  .bd-auth-demo-panel {
    padding: 16px;
  }
}

/* ---------- Particles (Optional JS-free) ---------- */
.bd-auth-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bd-auth-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: bd-auth-particle-rise linear infinite;
}

.bd-auth-particle:nth-child(1)  { left: 5%;  animation-duration: 20s; animation-delay: 0s;    width: 3px; height: 3px; }
.bd-auth-particle:nth-child(2)  { left: 15%; animation-duration: 25s; animation-delay: -3s;   width: 5px; height: 5px; }
.bd-auth-particle:nth-child(3)  { left: 25%; animation-duration: 18s; animation-delay: -7s;   width: 3px; height: 3px; }
.bd-auth-particle:nth-child(4)  { left: 35%; animation-duration: 22s; animation-delay: -2s;   width: 4px; height: 4px; }
.bd-auth-particle:nth-child(5)  { left: 45%; animation-duration: 28s; animation-delay: -5s;   width: 6px; height: 6px; }
.bd-auth-particle:nth-child(6)  { left: 55%; animation-duration: 19s; animation-delay: -8s;   width: 3px; height: 3px; }
.bd-auth-particle:nth-child(7)  { left: 65%; animation-duration: 24s; animation-delay: -1s;   width: 5px; height: 5px; }
.bd-auth-particle:nth-child(8)  { left: 75%; animation-duration: 21s; animation-delay: -6s;   width: 4px; height: 4px; }
.bd-auth-particle:nth-child(9)  { left: 85%; animation-duration: 26s; animation-delay: -4s;   width: 3px; height: 3px; }
.bd-auth-particle:nth-child(10) { left: 92%; animation-duration: 17s; animation-delay: -9s;   width: 5px; height: 5px; }

@keyframes bd-auth-particle-rise {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

/* ---------- Register Page Overrides (wider card, inner styles) ---------- */
.bd-auth-card--wide .box {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
}

.bd-auth-card--wide .box-header {
  background: transparent;
  border: none;
  padding: 0 0 12px;
}

.bd-auth-card--wide .box-title {
  color: var(--bd-auth-text);
  font-weight: 600;
}

.bd-auth-card--wide .box-body {
  padding: 0;
}

.bd-auth-card--wide .form-group {
  margin-bottom: 16px;
}

.bd-auth-card--wide .form-control {
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--bd-auth-input-border);
  font-size: 14px;
  transition: var(--bd-auth-transition);
  background: #f9fafb;
}

.bd-auth-card--wide .form-control:focus {
  border-color: var(--bd-auth-input-focus);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  background: #fff;
}

.bd-auth-card--wide label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-auth-text);
}

.bd-auth-card--wide .input-group-addon {
  border-radius: 10px 0 0 10px;
  border: 1.5px solid var(--bd-auth-input-border);
  background: #f3f4f6;
  color: #6b7280;
}

.bd-auth-card--wide .input-group .form-control {
  border-radius: 0 10px 10px 0;
}

.bd-auth-card--wide hr {
  border-color: #e5e7eb;
  margin: 20px 0;
}

.bd-auth-card--wide .box-footer {
  background: transparent;
  border-top: 1px solid #e5e7eb;
  padding: 16px 0 0;
}

.bd-auth-card--wide .box-footer .btn-success,
.bd-auth-card--wide .box-footer .btn-primary {
  background: linear-gradient(135deg, var(--bd-auth-primary), var(--bd-auth-accent));
  border: none;
  height: 44px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  padding: 0 32px;
  color: #fff;
  transition: var(--bd-auth-transition);
}

.bd-auth-card--wide .box-footer .btn-success:hover,
.bd-auth-card--wide .box-footer .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3);
}

/* Select2 inside register card */
.bd-auth-card--wide .select2-container--default .select2-selection--single {
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--bd-auth-input-border);
  background: #f9fafb;
}

.bd-auth-card--wide .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  padding-left: 12px;
  color: var(--bd-auth-text);
}

.bd-auth-card--wide .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
}

/* Wizard steps override (register has steps) */
.bd-auth-card--wide .wizard > .content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.bd-auth-card--wide .wizard > .steps .current a,
.bd-auth-card--wide .wizard > .steps .current a:hover,
.bd-auth-card--wide .wizard > .steps .current a:active {
  background: linear-gradient(135deg, var(--bd-auth-primary), var(--bd-auth-accent)) !important;
  border-radius: 8px;
}

/* ---------- Copyright / Bottom ---------- */
.bd-auth-bottom {
  margin-top: 32px;
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 12px;
  font-weight: 400;
}

/* ---------- Fix bootstrap overrides within auth ---------- */
.bd-auth-body .help-block {
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
}

.bd-auth-body .has-error .bd-auth-input {
  border-color: #ef4444;
}

.bd-auth-body .has-error .bd-auth-input:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ============================================================
   Pricing Page — Premium Styling
   ============================================================ */

/* ---------- Pricing Header ---------- */
.bd-auth-pricing-header {
  text-align: center;
  margin-bottom: 40px;
  animation: bd-auth-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bd-auth-pricing-title {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}

.bd-auth-pricing-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin: 0 0 28px;
}

/* ---------- Monthly/Annual Toggle ---------- */
.bd-auth-pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 20px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
}

.bd-auth-pricing-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  transition: var(--bd-auth-transition);
  cursor: default;
}

.bd-auth-pricing-toggle-label.active {
  color: #fff;
  font-weight: 700;
}

/* Custom toggle switch */
.bd-auth-pricing-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  cursor: pointer;
}

.bd-auth-pricing-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.bd-auth-pricing-switch-track {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 26px;
  transition: var(--bd-auth-transition);
}

.bd-auth-pricing-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: var(--bd-auth-transition);
}

.bd-auth-pricing-switch input:checked + .bd-auth-pricing-switch-track {
  background: linear-gradient(135deg, var(--bd-auth-primary), var(--bd-auth-accent));
}

.bd-auth-pricing-switch input:checked + .bd-auth-pricing-switch-track::after {
  transform: translateX(22px);
}

/* ---------- Pricing Grid ---------- */
.bd-auth-pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1100px;
  width: 100%;
  padding-bottom: 40px;
}

/* ---------- Pricing Card Column ---------- */
.bd-pricing-card-col {
  flex: 0 0 320px;
  max-width: 340px;
}

@media (max-width: 768px) {
  .bd-pricing-card-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---------- Pricing Card ---------- */
.bd-pricing-card {
  position: relative;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--bd-auth-radius);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  animation: bd-auth-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  overflow: hidden;
}

.bd-pricing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e5e7eb, #d1d5db);
  transition: var(--bd-auth-transition);
}

.bd-pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.1);
}

/* Popular card accent */
.bd-pricing-card--popular {
  border-color: rgba(79,70,229,0.3);
  box-shadow: 0 4px 24px rgba(79,70,229,0.15), 0 0 0 1px rgba(79,70,229,0.1);
}

.bd-pricing-card--popular::before {
  background: linear-gradient(90deg, var(--bd-auth-primary), var(--bd-auth-accent), var(--bd-auth-primary-light));
  background-size: 200% 100%;
  animation: bd-auth-shimmer-line 3s linear infinite;
}

.bd-pricing-card--popular:hover {
  box-shadow: 0 20px 50px rgba(79,70,229,0.2), 0 0 0 1px rgba(79,70,229,0.2);
}

/* ---------- Popular Badge ---------- */
.bd-pricing-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, var(--bd-auth-primary), var(--bd-auth-accent));
  border-radius: 50px;
}

.bd-pricing-badge svg {
  flex-shrink: 0;
}

/* ---------- Plan Name ---------- */
.bd-pricing-plan-name {
  margin-bottom: 8px;
}

.bd-pricing-plan-name h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--bd-auth-text);
  margin: 0;
  letter-spacing: -0.01em;
}

/* ---------- Price ---------- */
.bd-pricing-price {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}

.bd-pricing-amount {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--bd-auth-primary), var(--bd-auth-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bd-pricing-period {
  font-size: 14px;
  font-weight: 500;
  color: var(--bd-auth-text-muted);
}

.bd-pricing-free {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Description ---------- */
.bd-pricing-desc {
  font-size: 13px;
  font-weight: 500;
  color: var(--bd-auth-text-muted);
  line-height: 1.5;
  margin: 0 0 4px;
}

/* ---------- Divider ---------- */
.bd-pricing-divider {
  width: 100%;
  height: 1px;
  background: #e5e7eb;
  margin: 16px 0;
}

/* ---------- Feature List ---------- */
.bd-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.bd-pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bd-auth-text);
  line-height: 1.4;
}

/* Check icon */
.bd-pricing-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #10b981;
  margin-top: 1px;
}

.bd-pricing-card--popular .bd-pricing-check {
  color: var(--bd-auth-primary);
}

/* ---------- CTA Button ---------- */
.bd-pricing-cta {
  margin-top: auto;
}

.bd-pricing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: var(--bd-auth-radius-sm);
  font-size: 14px;
  font-weight: 700;
  color: var(--bd-auth-primary);
  background: rgba(79, 70, 229, 0.08);
  border: 1.5px solid rgba(79, 70, 229, 0.2);
  text-decoration: none;
  transition: var(--bd-auth-transition);
  cursor: pointer;
}

.bd-pricing-btn:hover {
  background: rgba(79, 70, 229, 0.14);
  border-color: rgba(79, 70, 229, 0.4);
  color: var(--bd-auth-primary);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.15);
}

/* Primary CTA for popular plans */
.bd-pricing-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--bd-auth-primary), #6366f1, var(--bd-auth-accent));
  background-size: 200% 200%;
  animation: bd-auth-btn-gradient 4s ease infinite;
  border: none;
  position: relative;
  overflow: hidden;
}

.bd-pricing-btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: 0.5s;
}

.bd-pricing-btn--primary:hover::after {
  left: 100%;
}

.bd-pricing-btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.35);
}

/* ---------- Pricing Responsive ---------- */
@media (max-width: 640px) {
  .bd-auth-pricing-title {
    font-size: 28px;
  }
  .bd-auth-pricing-subtitle {
    font-size: 14px;
  }
  .bd-auth-pricing-grid {
    gap: 16px;
    padding: 0 4px 30px;
  }
  .bd-pricing-card {
    padding: 24px 20px 20px;
  }
  .bd-pricing-amount {
    font-size: 28px;
  }
}

/* ---------- Stagger card animation ---------- */
.bd-pricing-card-col:nth-child(1) .bd-pricing-card { animation-delay: 0.05s; }
.bd-pricing-card-col:nth-child(2) .bd-pricing-card { animation-delay: 0.12s; }
.bd-pricing-card-col:nth-child(3) .bd-pricing-card { animation-delay: 0.19s; }
.bd-pricing-card-col:nth-child(4) .bd-pricing-card { animation-delay: 0.26s; }
.bd-pricing-card-col:nth-child(5) .bd-pricing-card { animation-delay: 0.33s; }
.bd-pricing-card-col:nth-child(6) .bd-pricing-card { animation-delay: 0.40s; }

/* ============================================================
   Pricing Page — Premium Styling
   ============================================================ */

/* ---------- Pricing Header ---------- */
.bd-auth-pricing-header {
  text-align: center;
  margin-bottom: 40px;
  animation: bd-auth-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bd-auth-pricing-title {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}

.bd-auth-pricing-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin: 0 0 28px;
}

/* ---------- Monthly/Annual Toggle ---------- */
.bd-auth-pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 20px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
}

.bd-auth-pricing-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.bd-auth-pricing-toggle-label.active {
  color: #fff;
  font-weight: 700;
}

/* Custom toggle switch */
.bd-auth-pricing-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  cursor: pointer;
}

.bd-auth-pricing-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.bd-auth-pricing-switch-track {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 26px;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bd-auth-pricing-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bd-auth-pricing-switch input:checked + .bd-auth-pricing-switch-track {
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
}

.bd-auth-pricing-switch input:checked + .bd-auth-pricing-switch-track::after {
  transform: translateX(22px);
}

/* ---------- Pricing Grid ---------- */
.bd-auth-pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1100px;
  width: 100%;
  padding-bottom: 40px;
}

/* ---------- Pricing Card Column ---------- */
.bd-pricing-card-col {
  flex: 0 0 320px;
  max-width: 340px;
}

@media (max-width: 768px) {
  .bd-pricing-card-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---------- Pricing Card ---------- */
.bd-pricing-card {
  position: relative;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  animation: bd-auth-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  overflow: hidden;
  height: 100%;
}

.bd-pricing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e5e7eb, #d1d5db);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bd-pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.1);
}

/* Popular card accent */
.bd-pricing-card--popular {
  border-color: rgba(79,70,229,0.3);
  box-shadow: 0 4px 24px rgba(79,70,229,0.15), 0 0 0 1px rgba(79,70,229,0.1);
}

.bd-pricing-card--popular::before {
  background: linear-gradient(90deg, #4f46e5, #06b6d4, #818cf8);
  background-size: 200% 100%;
  animation: bd-auth-shimmer-line 3s linear infinite;
}

.bd-pricing-card--popular:hover {
  box-shadow: 0 20px 50px rgba(79,70,229,0.2), 0 0 0 1px rgba(79,70,229,0.2);
}

/* ---------- Popular Badge ---------- */
.bd-pricing-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  border-radius: 50px;
}

.bd-pricing-badge svg {
  flex-shrink: 0;
}

/* ---------- Plan Name ---------- */
.bd-pricing-plan-name {
  margin-bottom: 8px;
}

.bd-pricing-plan-name h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1e1b4b;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ---------- Price ---------- */
.bd-pricing-price {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}

.bd-pricing-amount {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bd-pricing-period {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.bd-pricing-free {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Description ---------- */
.bd-pricing-desc {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.5;
  margin: 0 0 4px;
}

/* ---------- Divider ---------- */
.bd-pricing-divider {
  width: 100%;
  height: 1px;
  background: #e5e7eb;
  margin: 16px 0;
}

/* ---------- Feature List ---------- */
.bd-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.bd-pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #1e1b4b;
  line-height: 1.4;
}

/* Check icon */
.bd-pricing-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #10b981;
  margin-top: 1px;
}

.bd-pricing-card--popular .bd-pricing-check {
  color: #4f46e5;
}

/* ---------- CTA Button ---------- */
.bd-pricing-cta {
  margin-top: auto;
}

.bd-pricing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.08);
  border: 1.5px solid rgba(79, 70, 229, 0.2);
  text-decoration: none;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.bd-pricing-btn:hover {
  background: rgba(79, 70, 229, 0.14);
  border-color: rgba(79, 70, 229, 0.4);
  color: #4f46e5;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.15);
}

/* Primary CTA for popular plans */
.bd-pricing-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #6366f1, #06b6d4);
  background-size: 200% 200%;
  animation: bd-auth-btn-gradient 4s ease infinite;
  border: none;
  position: relative;
  overflow: hidden;
}

.bd-pricing-btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: 0.5s;
}

.bd-pricing-btn--primary:hover::after {
  left: 100%;
}

.bd-pricing-btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.35);
}

/* ---------- Pricing Responsive ---------- */
@media (max-width: 640px) {
  .bd-auth-pricing-title {
    font-size: 28px;
  }
  .bd-auth-pricing-subtitle {
    font-size: 14px;
  }
  .bd-auth-pricing-grid {
    gap: 16px;
    padding: 0 4px 30px;
  }
  .bd-pricing-card {
    padding: 24px 20px 20px;
  }
  .bd-pricing-amount {
    font-size: 28px;
  }
}

/* ---------- Stagger card animation ---------- */
.bd-pricing-card-col:nth-child(1) .bd-pricing-card { animation-delay: 0.05s; }
.bd-pricing-card-col:nth-child(2) .bd-pricing-card { animation-delay: 0.12s; }
.bd-pricing-card-col:nth-child(3) .bd-pricing-card { animation-delay: 0.19s; }
.bd-pricing-card-col:nth-child(4) .bd-pricing-card { animation-delay: 0.26s; }
.bd-pricing-card-col:nth-child(5) .bd-pricing-card { animation-delay: 0.33s; }
.bd-pricing-card-col:nth-child(6) .bd-pricing-card { animation-delay: 0.40s; }


/* ============================================================
   SPLIT LOGIN LAYOUT — Artwork + Form
   ============================================================ */

/* Split container */
.bd-login-split {
  display: flex;
  width: 100%;
  max-width: 1060px;
  min-height: 580px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: bd-auth-card-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- LEFT: Artwork Side ---------- */
.bd-login-artwork {
  flex: 1 1 50%;
  background: linear-gradient(160deg, #1e1b4b 0%, #312e81 35%, #4338ca 70%, #6366f1 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

.bd-login-artwork-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  width: 100%;
  max-width: 380px;
}

/* Grid pattern background */
.bd-login-grid-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
}

/* Floating geometric shapes */
.bd-login-shape {
  position: absolute;
  border-radius: 20%;
  opacity: 0.08;
  background: #fff;
  z-index: 1;
}

.bd-login-shape--1 {
  width: 120px;
  height: 120px;
  top: 8%;
  right: 12%;
  transform: rotate(25deg);
  animation: bd-login-float-shape 16s ease-in-out infinite;
  border-radius: 30%;
}

.bd-login-shape--2 {
  width: 80px;
  height: 80px;
  bottom: 15%;
  left: 8%;
  transform: rotate(-15deg);
  animation: bd-login-float-shape 20s ease-in-out infinite reverse;
  border-radius: 50%;
  opacity: 0.06;
}

.bd-login-shape--3 {
  width: 60px;
  height: 60px;
  top: 55%;
  right: 5%;
  transform: rotate(45deg);
  animation: bd-login-float-shape 14s ease-in-out infinite;
  border-radius: 25%;
  opacity: 0.05;
}

.bd-login-shape--4 {
  width: 40px;
  height: 40px;
  top: 20%;
  left: 15%;
  transform: rotate(60deg);
  animation: bd-login-float-shape 18s ease-in-out infinite reverse;
  border-radius: 40%;
  opacity: 0.07;
}

@keyframes bd-login-float-shape {
  0%, 100% { transform: rotate(25deg) translateY(0); }
  50% { transform: rotate(30deg) translateY(-20px); }
}

/* Decorative rings */
.bd-login-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 1;
}

.bd-login-ring--1 {
  width: 300px;
  height: 300px;
  top: -80px;
  right: -100px;
  animation: bd-login-ring-pulse 8s ease-in-out infinite;
}

.bd-login-ring--2 {
  width: 200px;
  height: 200px;
  bottom: -60px;
  left: -60px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.04);
  animation: bd-login-ring-pulse 10s ease-in-out infinite reverse;
}

@keyframes bd-login-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.6; }
}

/* Brand section */
.bd-login-brand {
  position: relative;
  z-index: 3;
}

.bd-login-brand-icon {
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 20px rgba(99, 102, 241, 0.4));
}

.bd-login-brand-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.bd-login-brand-tagline {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Feature highlights */
.bd-login-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  position: relative;
  z-index: 3;
}

.bd-login-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.bd-login-feature:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(4px);
}

.bd-login-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  color: #c7d2fe;
  font-size: 1.125rem;
}

.bd-login-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bd-login-feature-text strong {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.bd-login-feature-text span {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

/* ---------- RIGHT: Form Side ---------- */
.bd-login-form-side {
  flex: 1 1 50%;
  background: var(--bd-auth-card-bg, rgba(255, 255, 255, 0.97));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  position: relative;
}

.bd-login-form-inner {
  width: 100%;
  max-width: 380px;
}

/* Adjust form side elements to left-align */
.bd-login-form-side .bd-auth-header {
  text-align: left;
  margin-bottom: 28px;
}

.bd-login-form-side .bd-auth-title {
  font-size: 1.625rem;
}

.bd-login-form-side .bd-auth-subtitle {
  font-size: 0.875rem;
}

.bd-login-form-side .bd-auth-footer {
  text-align: left;
  margin-top: 20px;
}

/* ---------- Split Login Responsive ---------- */
@media (max-width: 900px) {
  .bd-login-split {
    flex-direction: column;
    max-width: 480px;
    min-height: auto;
    border-radius: 24px;
  }

  .bd-login-artwork {
    flex: 0 0 auto;
    padding: 32px 28px;
    min-height: auto;
  }

  .bd-login-artwork-content {
    gap: 20px;
    max-width: none;
    align-items: center;
    text-align: center;
  }

  .bd-login-brand {
    text-align: center;
  }

  .bd-login-brand-name {
    font-size: 1.375rem;
  }

  .bd-login-brand-tagline {
    font-size: 0.8125rem;
  }

  .bd-login-features {
    display: none;
  }

  .bd-login-form-side {
    padding: 32px 28px;
  }

  .bd-login-form-side .bd-auth-header {
    text-align: center;
  }

  .bd-login-form-side .bd-auth-footer {
    text-align: center;
  }

  .bd-login-ring--1,
  .bd-login-ring--2 {
    display: none;
  }
}

@media (max-width: 480px) {
  .bd-login-split {
    border-radius: 20px;
    margin: 0 4px;
  }

  .bd-login-artwork {
    padding: 24px 20px;
  }

  .bd-login-form-side {
    padding: 24px 20px;
  }

  .bd-login-form-side .bd-auth-title {
    font-size: 1.375rem;
  }
}


/* ============================================================
   SPLIT LOGIN LAYOUT — Artwork + Form
   ============================================================ */

.bd-login-split {
  display: flex;
  width: 100%;
  max-width: 1060px;
  min-height: 580px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
  animation: bd-auth-card-in 0.7s cubic-bezier(0.16,1,0.3,1) both;
}

.bd-login-artwork {
  flex: 1 1 50%;
  background: linear-gradient(160deg, #1e1b4b 0%, #312e81 35%, #4338ca 70%, #6366f1 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

.bd-login-artwork-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  width: 100%;
  max-width: 380px;
}

.bd-login-grid-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
}

.bd-login-shape {
  position: absolute;
  border-radius: 20%;
  opacity: 0.08;
  background: #fff;
  z-index: 1;
}

.bd-login-shape--1 {
  width: 120px; height: 120px; top: 8%; right: 12%;
  transform: rotate(25deg);
  animation: bd-login-float-shape 16s ease-in-out infinite;
  border-radius: 30%;
}

.bd-login-shape--2 {
  width: 80px; height: 80px; bottom: 15%; left: 8%;
  transform: rotate(-15deg);
  animation: bd-login-float-shape 20s ease-in-out infinite reverse;
  border-radius: 50%;
  opacity: 0.06;
}

.bd-login-shape--3 {
  width: 60px; height: 60px; top: 55%; right: 5%;
  transform: rotate(45deg);
  animation: bd-login-float-shape 14s ease-in-out infinite;
  border-radius: 25%;
  opacity: 0.05;
}

.bd-login-shape--4 {
  width: 40px; height: 40px; top: 20%; left: 15%;
  transform: rotate(60deg);
  animation: bd-login-float-shape 18s ease-in-out infinite reverse;
  border-radius: 40%;
  opacity: 0.07;
}

@keyframes bd-login-float-shape {
  0%, 100% { transform: rotate(25deg) translateY(0); }
  50% { transform: rotate(30deg) translateY(-20px); }
}

.bd-login-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 1;
}

.bd-login-ring--1 {
  width: 300px; height: 300px; top: -80px; right: -100px;
  animation: bd-login-ring-pulse 8s ease-in-out infinite;
}

.bd-login-ring--2 {
  width: 200px; height: 200px; bottom: -60px; left: -60px;
  border-width: 2px;
  border-color: rgba(255,255,255,0.04);
  animation: bd-login-ring-pulse 10s ease-in-out infinite reverse;
}

@keyframes bd-login-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.6; }
}

.bd-login-brand { position: relative; z-index: 3; }

.bd-login-brand-icon {
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 20px rgba(99,102,241,0.4));
}

.bd-login-brand-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.bd-login-brand-tagline {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.6);
  margin: 0;
  font-weight: 400;
}

.bd-login-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  position: relative;
  z-index: 3;
}

.bd-login-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.bd-login-feature:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
  transform: translateX(4px);
}

.bd-login-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  color: #c7d2fe;
  font-size: 1.125rem;
}

.bd-login-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bd-login-feature-text strong {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #ffffff;
}

.bd-login-feature-text span {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.5);
}

.bd-login-form-side {
  flex: 1 1 50%;
  background: var(--bd-auth-card-bg, rgba(255,255,255,0.97));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  position: relative;
}

.bd-login-form-inner {
  width: 100%;
  max-width: 380px;
}

.bd-login-form-side .bd-auth-header {
  text-align: left;
  margin-bottom: 28px;
}

.bd-login-form-side .bd-auth-title {
  font-size: 1.625rem;
}

.bd-login-form-side .bd-auth-subtitle {
  font-size: 0.875rem;
}

.bd-login-form-side .bd-auth-footer {
  text-align: left;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .bd-login-split {
    flex-direction: column;
    max-width: 480px;
    min-height: auto;
    border-radius: 24px;
  }
  .bd-login-artwork {
    flex: 0 0 auto;
    padding: 32px 28px;
  }
  .bd-login-artwork-content {
    gap: 20px;
    max-width: none;
    align-items: center;
    text-align: center;
  }
  .bd-login-brand { text-align: center; }
  .bd-login-brand-name { font-size: 1.375rem; }
  .bd-login-brand-tagline { font-size: 0.8125rem; }
  .bd-login-features { display: none; }
  .bd-login-form-side { padding: 32px 28px; }
  .bd-login-form-side .bd-auth-header { text-align: center; }
  .bd-login-form-side .bd-auth-footer { text-align: center; }
  .bd-login-ring--1, .bd-login-ring--2 { display: none; }
}

@media (max-width: 480px) {
  .bd-login-split { border-radius: 20px; margin: 0 4px; }
  .bd-login-artwork { padding: 24px 20px; }
  .bd-login-form-side { padding: 24px 20px; }
  .bd-login-form-side .bd-auth-title { font-size: 1.375rem; }
}


/* ============================================================ SPLIT LOGIN ============================================================ */
.bd-login-split{display:flex;width:100%;max-width:1060px;min-height:580px;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);animation:bd-auth-card-in .7s cubic-bezier(.16,1,.3,1) both}
.bd-login-artwork{flex:1 1 50%;background:linear-gradient(160deg,#1e1b4b 0%,#312e81 35%,#4338ca 70%,#6366f1 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:48px 40px}
.bd-login-artwork-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:36px;width:100%;max-width:380px}
.bd-login-grid-pattern{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 30%,transparent 80%)}
.bd-login-shape{position:absolute;border-radius:20%;opacity:.08;background:#fff;z-index:1}
.bd-login-shape--1{width:120px;height:120px;top:8%;right:12%;transform:rotate(25deg);animation:bd-login-float-shape 16s ease-in-out infinite;border-radius:30%}
.bd-login-shape--2{width:80px;height:80px;bottom:15%;left:8%;transform:rotate(-15deg);animation:bd-login-float-shape 20s ease-in-out infinite reverse;border-radius:50%;opacity:.06}
.bd-login-shape--3{width:60px;height:60px;top:55%;right:5%;transform:rotate(45deg);animation:bd-login-float-shape 14s ease-in-out infinite;border-radius:25%;opacity:.05}
.bd-login-shape--4{width:40px;height:40px;top:20%;left:15%;transform:rotate(60deg);animation:bd-login-float-shape 18s ease-in-out infinite reverse;border-radius:40%;opacity:.07}
@keyframes bd-login-float-shape{0%,100%{transform:rotate(25deg) translateY(0)}50%{transform:rotate(30deg) translateY(-20px)}}
.bd-login-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.06);z-index:1}
.bd-login-ring--1{width:300px;height:300px;top:-80px;right:-100px;animation:bd-login-ring-pulse 8s ease-in-out infinite}
.bd-login-ring--2{width:200px;height:200px;bottom:-60px;left:-60px;border-width:2px;border-color:rgba(255,255,255,.04);animation:bd-login-ring-pulse 10s ease-in-out infinite reverse}
@keyframes bd-login-ring-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.6}}
.bd-login-brand{position:relative;z-index:3}
.bd-login-brand-icon{margin-bottom:16px;filter:drop-shadow(0 4px 20px rgba(99,102,241,.4))}
.bd-login-brand-name{font-size:1.75rem;font-weight:800;color:#fff;margin:0 0 6px;letter-spacing:-.02em;line-height:1.2}
.bd-login-brand-tagline{font-size:.9375rem;color:rgba(255,255,255,.6);margin:0;font-weight:400}
.bd-login-features{display:flex;flex-direction:column;gap:16px;width:100%;position:relative;z-index:3}
.bd-login-feature{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:14px;backdrop-filter:blur(10px);transition:all .3s ease}
.bd-login-feature:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);transform:translateX(4px)}
.bd-login-feature-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));color:#c7d2fe;font-size:1.125rem}
.bd-login-feature-text{display:flex;flex-direction:column;gap:2px}
.bd-login-feature-text strong{font-size:.8125rem;font-weight:700;color:#fff}
.bd-login-feature-text span{font-size:.6875rem;color:rgba(255,255,255,.5)}
.bd-login-form-side{flex:1 1 50%;background:var(--bd-auth-card-bg,rgba(255,255,255,.97));display:flex;align-items:center;justify-content:center;padding:48px 40px;position:relative}
.bd-login-form-inner{width:100%;max-width:380px}
.bd-login-form-side .bd-auth-header{text-align:left;margin-bottom:28px}
.bd-login-form-side .bd-auth-title{font-size:1.625rem}
.bd-login-form-side .bd-auth-subtitle{font-size:.875rem}
.bd-login-form-side .bd-auth-footer{text-align:left;margin-top:20px}
@media(max-width:900px){.bd-login-split{flex-direction:column;max-width:480px;min-height:auto;border-radius:24px}.bd-login-artwork{flex:0 0 auto;padding:32px 28px}.bd-login-artwork-content{gap:20px;max-width:none;align-items:center;text-align:center}.bd-login-brand{text-align:center}.bd-login-brand-name{font-size:1.375rem}.bd-login-brand-tagline{font-size:.8125rem}.bd-login-features{display:none}.bd-login-form-side{padding:32px 28px}.bd-login-form-side .bd-auth-header{text-align:center}.bd-login-form-side .bd-auth-footer{text-align:center}.bd-login-ring--1,.bd-login-ring--2{display:none}}
@media(max-width:480px){.bd-login-split{border-radius:20px;margin:0 4px}.bd-login-artwork{padding:24px 20px}.bd-login-form-side{padding:24px 20px}.bd-login-form-side .bd-auth-title{font-size:1.375rem}}


/* ============================================================ SPLIT REGISTER WIZARD ============================================================ */
.bd-register-split{display:flex;width:100%;max-width:1100px;max-height:85vh;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);animation:bd-auth-card-in .7s cubic-bezier(.16,1,.3,1) both}
.bd-register-artwork{flex:0 0 320px;background:linear-gradient(160deg,#1e1b4b 0%,#312e81 35%,#4338ca 70%,#6366f1 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:40px 28px}
.bd-register-artwork-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:28px;width:100%}
.bd-register-form-side{flex:1 1 0%;background:var(--bd-auth-card-bg,rgba(255,255,255,.97));display:flex;align-items:flex-start;justify-content:center;padding:32px 24px;overflow-y:auto}
.bd-register-form-inner{width:100%;max-width:100%}

/* Step header */
.bd-reg-step-header{text-align:left;margin-bottom:24px}
.bd-reg-step-badge{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#4f46e5,#06b6d4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;margin-bottom:14px;box-shadow:0 4px 16px rgba(79,70,229,.25)}
.bd-reg-step-title{font-size:1.5rem;font-weight:800;color:var(--bd-auth-text,#1e1b4b);margin:0 0 4px;letter-spacing:-.02em}
.bd-reg-step-desc{font-size:.875rem;color:var(--bd-auth-text-muted,#6b7280);margin:0}
/* Progress bar */
.bd-reg-progress{height:4px;background:rgba(0,0,0,.06);border-radius:4px;margin-bottom:28px;overflow:hidden}
.bd-reg-progress-bar{height:100%;background:linear-gradient(90deg,#4f46e5,#06b6d4);border-radius:4px;transition:width .4s cubic-bezier(.16,1,.3,1)}

/* Left side step indicators */
.bd-reg-steps-visual{display:flex;flex-direction:column;gap:12px;width:100%;position:relative;z-index:3}
.bd-reg-step-visual{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);transition:all .3s ease}
.bd-reg-step-visual.active{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.bd-reg-step-visual.completed{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.2)}
.bd-reg-step-visual-num{width:32px;height:32px;min-width:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.1);transition:all .3s ease}
.bd-reg-step-visual.active .bd-reg-step-visual-num{color:#fff;background:linear-gradient(135deg,#818cf8,#06b6d4);border-color:transparent;box-shadow:0 2px 10px rgba(99,102,241,.4)}
.bd-reg-step-visual.completed .bd-reg-step-visual-num{color:#fff;background:#10b981;border-color:transparent}
.bd-reg-step-visual-info{display:flex;flex-direction:column;gap:1px}
.bd-reg-step-visual-info strong{font-size:.8125rem;font-weight:700;color:rgba(255,255,255,.5);transition:color .3s ease}
.bd-reg-step-visual.active .bd-reg-step-visual-info strong{color:#fff}
.bd-reg-step-visual.completed .bd-reg-step-visual-info strong{color:rgba(255,255,255,.7)}
.bd-reg-step-visual-info span{font-size:.6875rem;color:rgba(255,255,255,.35)}
.bd-reg-step-visual.active .bd-reg-step-visual-info span{color:rgba(255,255,255,.55)}

/* Form fields */
.bd-reg-field-group{margin-bottom:18px}
.bd-reg-label{display:block;font-size:.8125rem;font-weight:600;color:var(--bd-auth-text,#1e1b4b);margin-bottom:6px}
.bd-reg-label .text-danger{color:#ef4444}
.bd-reg-input-wrap{position:relative;display:flex;align-items:center}
.bd-reg-input-icon{position:absolute;left:14px;font-size:1rem;color:var(--bd-auth-text-muted,#9ca3af);z-index:1;pointer-events:none}
.bd-reg-input{height:44px!important;border:1.5px solid var(--bd-auth-input-border,#e5e7eb)!important;border-radius:10px!important;padding-left:42px!important;font-size:.875rem!important;background:#f9fafb!important;transition:all .25s ease!important;width:100%!important}
.bd-reg-input:focus{border-color:var(--bd-auth-input-focus,#4f46e5)!important;box-shadow:0 0 0 3px rgba(79,70,229,.1)!important;background:#fff!important}
.bd-reg-input-wrap.bd-reg-error{animation:bd-reg-shake .4s ease}
.bd-reg-input-wrap.bd-reg-error .bd-reg-input{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.1)!important}
select.bd-reg-input{appearance:auto;-webkit-appearance:auto;padding-right:12px!important}
.bd-reg-file-wrap .bd-reg-input{padding:8px 14px 8px 42px!important;height:auto!important;line-height:1.5}
/* Section label */
.bd-reg-section-label{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--bd-auth-text-muted,#6b7280);display:flex;align-items:center;gap:6px;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.06)}
.bd-reg-section-label i{color:#4f46e5;font-size:.8125rem}

/* Row layouts */
.bd-reg-row{display:flex;gap:16px;margin-bottom:0}
.bd-reg-col{flex:1 1 0%}
.bd-reg-row-3 .bd-reg-col{flex:1 1 0%}
/* Action buttons */
.bd-reg-actions{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid rgba(0,0,0,.06)}
.bd-reg-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:12px;font-size:.875rem;font-weight:700;border:none;cursor:pointer;transition:all .25s ease}
.bd-reg-btn-next{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.25)}
.bd-reg-btn-next:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(79,70,229,.35);color:#fff}
.bd-reg-btn-back{background:transparent;color:var(--bd-auth-text-muted,#6b7280);padding:12px 20px}
.bd-reg-btn-back:hover{color:var(--bd-auth-text,#1e1b4b);background:rgba(0,0,0,.04)}
.bd-reg-btn-submit{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 14px rgba(16,185,129,.25);padding:14px 32px;font-size:.9375rem}
.bd-reg-btn-submit:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(16,185,129,.35);color:#fff}
/* Footer link */
.bd-reg-footer-link{text-align:center;margin-top:24px;font-size:.8125rem;color:var(--bd-auth-text-muted,#6b7280)}
.bd-reg-footer-link a{color:#4f46e5;font-weight:600;text-decoration:none}
.bd-reg-footer-link a:hover{text-decoration:underline}
/* Shake animation */
@keyframes bd-reg-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.bd-reg-shake{animation:bd-reg-shake .4s ease}

/* Register responsive */
@media(max-width:900px){.bd-register-split{flex-direction:column;max-width:520px;max-height:none;border-radius:24px}.bd-register-artwork{flex:0 0 auto;padding:28px 24px}.bd-register-artwork-content{gap:16px;align-items:center;text-align:center}.bd-reg-steps-visual{flex-direction:row;gap:8px;justify-content:center}.bd-reg-step-visual{padding:8px 12px;flex:1}.bd-reg-step-visual-info span{display:none}.bd-register-form-side{padding:28px 24px}}
@media(max-width:480px){.bd-register-split{border-radius:20px;margin:0 4px}.bd-register-artwork{padding:20px 16px}.bd-reg-steps-visual .bd-reg-step-visual-info{display:none}.bd-register-form-side{padding:20px 16px}.bd-reg-row,.bd-reg-row-3{flex-direction:column;gap:0}.bd-reg-step-title{font-size:1.25rem}}


/* ============================================================
   jQuery Steps Wizard — Inside Split Register
   ============================================================ */

/* Hide generated step tabs */
.bd-register-form-inner .wizard > .steps { display: none !important; }

/* Content area reset */
.bd-register-form-inner .wizard > .content {
  min-height: auto !important; padding: 0 !important; margin: 0 !important;
  overflow: visible !important; background: transparent !important;
  border: none !important; position: relative !important;
}
.bd-register-form-inner .wizard > .content > .body {
  width: 100% !important; padding: 0 !important;
  position: relative !important; float: none !important;
}

/* Fieldset & legend */
.bd-register-form-inner .wizard > .content fieldset { padding: 0; margin: 0; border: none; }
.bd-register-form-inner .wizard > .content legend {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--bd-auth-text-muted, #6b7280);
  margin-bottom: 14px; padding-bottom: 8px; width: 100%;
  border: none; border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Grid columns */
.bd-register-form-inner .wizard > .content .clearfix { clear: both; }
.bd-register-form-inner .wizard > .content [class*="col-"] { padding-left: 6px; padding-right: 6px; }

/* Form groups & labels */
.bd-register-form-inner .wizard > .content .form-group { margin-bottom: 14px; }
.bd-register-form-inner .wizard > .content .form-group > label {
  font-size: 0.8125rem; font-weight: 600;
  color: var(--bd-auth-text, #1e1b4b); margin-bottom: 4px; display: block;
}

/* Input group (Bootstrap 3 table layout) */
.bd-register-form-inner .wizard > .content .input-group { display: table; width: 100%; border-collapse: separate; }
.bd-register-form-inner .wizard > .content .input-group-addon {
  display: table-cell; width: 40px; text-align: center; vertical-align: middle;
  border: 1.5px solid var(--bd-auth-input-border, #e5e7eb); border-right: none;
  border-radius: 10px 0 0 10px; background: #f3f4f6;
  color: var(--bd-auth-text-muted, #6b7280); font-size: 1rem; padding: 0 8px;
}
.bd-register-form-inner .wizard > .content .input-group .form-control {
  display: table-cell; border-radius: 0 10px 10px 0;
}

/* Form controls */
.bd-register-form-inner .wizard > .content .form-control {
  height: 42px; border: 1.5px solid var(--bd-auth-input-border, #e5e7eb);
  border-radius: 10px; font-size: 0.875rem; background: #f9fafb;
  transition: all 0.25s ease; box-shadow: none;
}
.bd-register-form-inner .wizard > .content .form-control:focus {
  border-color: var(--bd-auth-input-focus, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1); background: #fff;
}

/* ---- Select2 inside wizard ---- */
.bd-register-form-inner .select2-container { width: 100% !important; }
.bd-register-form-inner .select2-container--default .select2-selection--single {
  height: 42px !important; border: 1.5px solid var(--bd-auth-input-border, #e5e7eb) !important;
  border-radius: 0 10px 10px 0 !important; display: flex; align-items: center;
  background: #f9fafb !important;
}
.bd-register-form-inner .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px; color: var(--bd-auth-text, #1e1b4b); font-size: 0.875rem;
}
.bd-register-form-inner .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.bd-register-form-inner .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--bd-auth-input-focus, #4f46e5) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important; background: #fff !important;
}

/* ---- Action Buttons (full-width) ---- */
.bd-register-form-inner .wizard > .actions {
  padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.06); margin-top: 20px;
}
.bd-register-form-inner .wizard > .actions ul {
  display: flex; gap: 12px; list-style: none; padding: 0; margin: 0;
}
.bd-register-form-inner .wizard > .actions li { flex: 1; }
.bd-register-form-inner .wizard > .actions a,
.bd-register-form-inner .wizard > .actions a.tw-dw-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 24px; border-radius: 12px;
  font-size: 0.9375rem; font-weight: 700; border: none;
  cursor: pointer; transition: all 0.25s ease; text-decoration: none;
}
.bd-register-form-inner .wizard > .actions a[href="#next"],
.bd-register-form-inner .wizard > .actions a[href="#finish"] {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: #fff !important; box-shadow: 0 4px 14px rgba(79,70,229,0.25);
}
.bd-register-form-inner .wizard > .actions a[href="#next"]:hover,
.bd-register-form-inner .wizard > .actions a[href="#finish"]:hover {
  transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79,70,229,0.35);
}
.bd-register-form-inner .wizard > .actions a[href="#previous"] {
  background: #f3f4f6 !important; color: var(--bd-auth-text-muted, #6b7280) !important;
  border: 1.5px solid var(--bd-auth-input-border, #e5e7eb);
}
.bd-register-form-inner .wizard > .actions a[href="#previous"]:hover {
  color: var(--bd-auth-text, #1e1b4b) !important; background: #e5e7eb !important;
}
.bd-register-form-inner .wizard > .actions li:first-child { order: 0; }
.bd-register-form-inner .wizard > .actions li:last-child { order: 1; }
.bd-register-form-inner .wizard > .actions li[aria-disabled="true"] { display: none; }

/* ---- Validation errors ---- */
.bd-register-form-inner label.error { color: #ef4444; font-size: 0.75rem; font-weight: 500; margin-top: 4px; display: block; }
.bd-register-form-inner .form-control.error { border-color: #ef4444 !important; }


/* ============================================================
   Select2 Dropdown — Auth Pages Global
   ============================================================ */
.select2-container--default .select2-dropdown {
  background: #ffffff !important;
  border: 1.5px solid var(--bd-auth-input-border, #e5e7eb) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04) !important;
  margin-top: 4px;
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown {
  padding: 10px 12px 6px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--bd-auth-input-border, #e5e7eb) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.8125rem !important;
  background: #f9fafb !important;
  outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--bd-auth-input-focus, #4f46e5) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.08) !important;
  background: #fff !important;
}
.select2-container--default .select2-results__option {
  padding: 9px 14px !important;
  font-size: 0.8125rem !important;
  color: var(--bd-auth-text, #1e1b4b) !important;
  border-radius: 6px !important;
  margin: 2px 6px !important;
  transition: background 0.15s ease;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important;
  color: #4338ca !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: #f0fdf4 !important;
  color: #059669 !important;
  font-weight: 600;
}
.select2-results__options {
  max-height: 220px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}
.select2-results__options::-webkit-scrollbar { width: 5px; }
.select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-results__options::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
.select2-results__options::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }


/* ============================================================
   Datepicker — Auth Pages
   ============================================================ */
.bd-auth-body .datepicker {
  background: #ffffff !important;
  border: 1.5px solid var(--bd-auth-input-border, #e5e7eb) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04) !important;
  padding: 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.bd-auth-body .datepicker table { width: 100%; }
.bd-auth-body .datepicker thead tr:first-child th {
  font-weight: 700; font-size: 0.875rem;
  color: var(--bd-auth-text, #1e1b4b); padding: 8px 4px;
}
.bd-auth-body .datepicker thead tr:first-child th:hover {
  background: #f3f4f6 !important; border-radius: 8px;
}
.bd-auth-body .datepicker thead tr:nth-child(2) th {
  font-size: 0.6875rem; font-weight: 600; color: var(--bd-auth-text-muted, #9ca3af);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 0;
}
.bd-auth-body .datepicker tbody td {
  width: 36px; height: 36px; line-height: 36px; text-align: center;
  font-size: 0.8125rem; color: var(--bd-auth-text, #374151);
  border-radius: 8px; transition: all 0.15s ease;
}
.bd-auth-body .datepicker tbody td:hover {
  background: #f0f0ff !important; color: #4f46e5;
}
.bd-auth-body .datepicker tbody td.active,
.bd-auth-body .datepicker tbody td.active.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: #fff !important; border-radius: 8px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(79,70,229,0.3);
}
.bd-auth-body .datepicker tbody td.today {
  background: #eef2ff !important; color: #4f46e5; font-weight: 700;
}
.bd-auth-body .datepicker tbody td.disabled,
.bd-auth-body .datepicker tbody td.disabled:hover {
  color: #d1d5db !important; background: transparent !important;
}
.bd-auth-body .datepicker tbody td.old,
.bd-auth-body .datepicker tbody td.new {
  color: #d1d5db;
}
.bd-auth-body .datepicker .prev,
.bd-auth-body .datepicker .next {
  font-size: 1rem; color: var(--bd-auth-text-muted, #6b7280);
  border-radius: 8px; width: 32px; height: 32px; line-height: 32px;
}
.bd-auth-body .datepicker .prev:hover,
.bd-auth-body .datepicker .next:hover {
  background: #f3f4f6 !important; color: var(--bd-auth-text, #1e1b4b);
}


/* ============================================================
   Minimal Scrollbar — Register Form
   ============================================================ */
.bd-register-form-side::-webkit-scrollbar { width: 4px; }
.bd-register-form-side::-webkit-scrollbar-track { background: transparent; }
.bd-register-form-side::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
.bd-register-form-side::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }
.bd-register-form-side { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.1) transparent; }


/* ============================================================
   File Upload — Clean Inline Style
   ============================================================ */
.bd-register-form-inner .wizard > .content .form-group input[type="file"] { display: none !important; }

.bd-file-upload-row {
  display: flex; align-items: center; gap: 12px;
  padding: 0; min-height: 42px;
}
.bd-file-upload-row .bd-file-choose-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 10px;
  background: #f3f4f6; border: 1.5px solid var(--bd-auth-input-border, #e5e7eb);
  color: var(--bd-auth-text, #374151); font-size: 0.8125rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.bd-file-upload-row .bd-file-choose-btn:hover {
  background: #e5e7eb; border-color: #d1d5db;
}
.bd-file-upload-row .bd-file-choose-btn i { font-size: 1rem; color: #6b7280; }
.bd-file-upload-row .bd-file-name-display {
  font-size: 0.8125rem; color: var(--bd-auth-text-muted, #9ca3af);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.bd-file-upload-row .bd-file-name-display.has-file {
  color: #059669; font-weight: 600;
}