/* 
  register.css — Clean, minimal registration page.
  3-section layout: hero + details (left column) | form (right column)
  On mobile: hero → form → details (stacked)
*/

/* ==============================
   Desktop Layout — CSS Grid
   ============================== */
.register-page {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: auto auto;
  background: #0a0f1e;
}

/* Hero occupies top-left */
.register-hero {
  grid-column: 1;
  grid-row: 1;
  background: linear-gradient(160deg, #0a0f1e 0%, #111d35 100%);
  padding: 60px 64px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Details occupies bottom-left */
.register-details {
  grid-column: 1;
  grid-row: 2;
  background: linear-gradient(160deg, #111d35 0%, #0a0f1e 100%);
  padding: 24px 64px 60px;
}

/* Form spans both rows on the right */
.register-form-col {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #0d1527;
}

/* ==============================
   Headline
   ============================== */
.register-headline {
  font-family: var(--font-family-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-size: 2.6rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

/* ==============================
   Cycling Word — fixed width to prevent reflow
   ============================== */
.cycling-word-wrapper {
  display: inline-block;
}

.cycling-word {
  display: inline-block;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cycling-word.cycling-out {
  opacity: 0;
  transform: translateY(-10px);
}

.cycling-word.cycling-in {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================
   Subtext
   ============================== */
.register-subtext {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  max-width: 480px;
  margin-bottom: 24px;
}

/* ==============================
   Content Type Icons
   ============================== */
.content-types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}

.content-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.content-type i {
  color: #60a5fa;
  font-size: 0.72rem;
}

/* ==============================
   Always-Free Tier Highlight
   ============================== */
.free-tier-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 28px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
}

.free-tier-highlight i {
  color: #34d399;
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.free-tier-highlight strong {
  color: #34d399;
}

/* ==============================
   Feature Checklist
   ============================== */
.register-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
}

.register-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.register-checklist li:last-child {
  border-bottom: none;
}

.register-checklist li i {
  color: #34d399;
  font-size: 0.75rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* ==============================
   Social Proof
   ============================== */
.register-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.register-proof .proof-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}

.register-proof .proof-badge .savings-icon {
  color: #34d399;
}

/* Extended trial note */
.register-trial-note {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  margin: 0;
}

.register-trial-note a {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 500;
}

.register-trial-note a:hover {
  text-decoration: underline;
}

/* ==============================
   Right Column — Form
   ============================== */
.register-form-wrapper {
  width: 100%;
  max-width: 420px;
}

/* Card */
.register-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 36px 28px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  position: relative;
}

/* Subtle gradient border */
.register-card::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 17.5px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
  z-index: -1;
  opacity: 0.5;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Card Header */
.register-card-header {
  text-align: center;
  margin-bottom: 24px;
}

.register-card-header h2 {
  font-family: var(--font-family-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-size: 1.45rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 10px;
}

.no-cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ecfdf5;
  color: #059669;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #a7f3d0;
}

.no-cc-badge i {
  font-size: 0.65rem;
}

/* ==============================
   Form Fields
   ============================== */
.register-card .form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: #374151;
  margin-bottom: 4px;
}

.register-card .form-control {
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.93rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: #f9fafb;
}

.register-card .form-control:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: #fff;
  outline: none;
}

.register-card .form-control.is-invalid {
  border-color: #ef4444;
}

.register-card .invalid-feedback {
  font-size: 0.78rem;
  margin-top: 3px;
}

.register-card .form-group {
  margin-bottom: 16px;
}

/* Password strength */
.password-strength {
  height: 3px;
  border-radius: 2px;
  background: #e5e7eb;
  margin-top: 6px;
}

.password-strength-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease, background 0.3s ease;
  width: 0;
}

.password-strength-fill.strength-weak   { width: 33%; background: #ef4444; }
.password-strength-fill.strength-medium { width: 66%; background: #f59e0b; }
.password-strength-fill.strength-strong { width: 100%; background: #10b981; }

.password-strength-text {
  font-size: 0.7rem;
  margin-top: 2px;
  font-weight: 500;
}

.password-strength-text.strength-weak   { color: #ef4444; }
.password-strength-text.strength-medium { color: #f59e0b; }
.password-strength-text.strength-strong { color: #10b981; }

/* Password toggle */
.password-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  font-size: 0.85rem;
  z-index: 2;
}

.password-toggle:hover {
  color: #6b7280;
}

/* ==============================
   CTA Button
   ============================== */
.btn-register-cta {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.btn-register-cta:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.btn-register-cta:active {
  transform: translateY(0);
}

/* Terms */
.register-terms {
  font-size: 0.75rem;
  color: #9ca3af;
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}

.register-terms a {
  color: #3b82f6;
  text-decoration: none;
}

.register-terms a:hover {
  text-decoration: underline;
}

/* Card Footer Links */
.register-card-footer {
  text-align: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

.register-card-footer p {
  font-size: 0.83rem;
  color: #6b7280;
  margin-bottom: 4px;
}

.register-card-footer a {
  color: #3b82f6;
  font-weight: 600;
  text-decoration: none;
}

.register-card-footer a:hover {
  text-decoration: underline;
}

/* ==============================
   Loading State
   ============================== */
.btn-register-cta.loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn-register-cta .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.btn-register-cta.loading .spinner { display: block; }
.btn-register-cta.loading .btn-text { display: none; }

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

/* ==============================
   Flash Messages
   ============================== */
.register-page .alert {
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 14px;
}

/* ==============================
   Footer Gap Fix
   ============================== */
.register-page ~ .footer,
.register-page + .footer,
body:has(.register-page) .footer {
  background: #0a0f1e !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0;
  padding-top: 24px;
}

body:has(.register-page) .footer a {
  color: rgba(255, 255, 255, 0.55);
}

body:has(.register-page) .footer .text-muted {
  color: rgba(255, 255, 255, 0.35) !important;
}

body:has(.register-page) {
  background: #0a0f1e;
}

body:has(.register-page) .content-wrapper,
body:has(.register-page) main,
body:has(.register-page) .main-content {
  background: #0a0f1e;
  padding: 0;
  margin: 0;
}

/* ==============================
   Responsive — Tablet
   ============================== */
@media (max-width: 1024px) {
  .register-hero { padding: 48px 36px 24px; }
  .register-details { padding: 20px 36px 40px; }
  .register-form-col { padding: 36px 28px; }
  .register-headline { font-size: 2.2rem; }
}

/* ==============================
   Responsive — Mobile
   On mobile: hero (1) → form (2) → details (3)
   ============================== */
@media (max-width: 768px) {
  .register-page {
    display: flex;
    flex-direction: column;
  }

  .register-hero {
    order: 1;
    padding: 32px 20px 20px;
    text-align: center;
  }

  .register-form-col {
    order: 2;
    padding: 0 20px 28px;
  }

  .register-details {
    order: 3;
    padding: 28px 20px;
    text-align: center;
  }

  .register-form-wrapper {
    max-width: 480px;
    margin: 0 auto;
  }

  .register-subtext {
    margin-left: auto;
    margin-right: auto;
  }

  /* Hide content type icons on mobile */
  .content-types {
    display: none;
  }

  .register-checklist li {
    justify-content: center;
  }

  .register-proof {
    justify-content: center;
  }

  .register-trial-note {
    text-align: center;
  }

  .free-tier-highlight {
    text-align: left;
  }

  .register-headline {
    font-size: 1.85rem;
  }

}

@media (max-width: 480px) {
  .register-card { padding: 24px 18px 20px; border-radius: 12px; }
  .register-card::before { border-radius: 13.5px; }
  .register-headline { font-size: 1.55rem; }
  .register-form-col { padding: 0 14px 20px; }
  .register-hero { padding: 24px 14px 16px; }
  .register-details { padding: 20px 14px; }
}