/*
  CUBE — Auth Dark Theme
  register.css (used by login.html and register.html) was built light-mode
  only. This file forces a dark palette matching the rest of CUBE's red/dark
  theme, and adds the glass look to the form panel. Additive only — loaded
  AFTER register.css, does not edit or replace it.
*/

body {
  background: #0f0a0a !important;
}

.auth-shell {
  background: #0f0a0a !important;
}

/* ===== LEFT: FORM PANEL — glassy dark ===== */
.form-panel {
  background: rgba(20, 12, 12, 0.55) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.form-panel-inner {
  color: #f2e9e9;
}

.brand-text h1,
.heading-block h2 {
  color: #ffffff !important;
}

.brand-text p,
.heading-block p {
  color: rgba(242, 233, 233, 0.65) !important;
}

.brand-icon {
  background: rgba(169, 45, 45, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e31136 !important;
}

/* ===== FORM FIELDS — dark glass ===== */
.field label {
  color: rgba(242, 233, 233, 0.85) !important;
}

.field input,
.field select,
.mobile-input,
.password-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f2e9e9 !important;
}

.field input::placeholder {
  color: rgba(242, 233, 233, 0.35) !important;
}

.field input:focus,
.field select:focus {
  border-color: #e31136 !important;
  box-shadow: 0 0 0 3px rgba(227, 17, 54, 0.18) !important;
}

.country-code {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f2e9e9 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.toggle-password {
  color: rgba(242, 233, 233, 0.55) !important;
}

.terms-row,
.switch-auth {
  color: rgba(242, 233, 233, 0.65) !important;
}

.terms-row a,
.switch-auth a {
  color: #e31136 !important;
}

.section-label {
  color: rgba(242, 233, 233, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ===== SUBMIT BUTTON ===== */
.submit-btn {
  background: linear-gradient(135deg, #a92d2d, #e31136) !important;
  color: #ffffff !important;
  border: none !important;
}

.submit-btn:hover {
  filter: brightness(1.1);
}

/* ===== RIGHT: SHOWCASE PANEL — dark glass ===== */
.showcase-panel {
  background: radial-gradient(circle at 30% 20%, rgba(169, 45, 45, 0.35), transparent 60%),
              linear-gradient(160deg, #1a0e0e, #0f0a0a) !important;
}

.showcase-card {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.showcase-cube {
  color: #e31136 !important;
}

.showcase-caption h3 {
  color: #ffffff !important;
}

.showcase-caption p {
  color: rgba(242, 233, 233, 0.65) !important;
}

.carousel-dots .dot {
  background: rgba(255, 255, 255, 0.25) !important;
}

.carousel-dots .dot.active {
  background: #e31136 !important;
}

.carousel-arrow {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f2e9e9 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.form-error-box {
  background: rgba(227, 17, 54, 0.15) !important;
  border: 1px solid rgba(227, 17, 54, 0.4) !important;
  color: #ffb4bf !important;
}

.field-error {
  color: #ff8fa0 !important;
}