/* ================================================
   AUTH SCREENS + TRIAL SYSTEM
   Cardioboyo Treadmill Platform
================================================ */

/* ── Auth screen base ───────────────────────── */
.app-screen { display: block; }
.auth-screen { min-height: 100vh; }

.auth-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #1A2140 0%, #3D2048 45%, #8B3054 75%, #E8485A 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; font-family: 'Inter', sans-serif;
}

.auth-card {
  background: white; border-radius: 20px;
  padding: 32px 28px; width: 100%; max-width: 420px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  position: relative;
}

/* ── Logo block ─────────────────────────────── */
.auth-logo {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.auth-logo-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, #1A2140, #E8485A);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.auth-app-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800; color: #1A2140;
}
.auth-app-name .italic { font-style: italic; color: #E8485A; }
.auth-app-sub { font-size: 12px; color: #8B6070; margin-top: 1px; }

.auth-badge {
  display: inline-block;
  background: linear-gradient(90deg, #E8485A, #8B3054);
  color: white; font-size: 11px; font-weight: 600;
  padding: 4px 12px; border-radius: 20px; letter-spacing: 0.5px;
  margin-bottom: 20px;
}

/* ── Trial hero block ───────────────────────── */
.auth-trial-hero {
  background: linear-gradient(135deg, #FDF0F2, #F9F4F6);
  border: 1px solid #F5C4CC;
  border-radius: 14px; padding: 20px; text-align: center;
  margin-bottom: 16px;
}
.trial-icon { font-size: 28px; margin-bottom: 8px; }
.auth-trial-hero h2 {
  font-family: 'Playfair Display', serif;
  font-size: 18px; color: #1A2140; margin: 0 0 6px;
}
.auth-trial-hero p { font-size: 13px; color: #6B4F5E; margin: 0 0 16px; }

/* ── Forms ──────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 13px; font-weight: 600;
  color: #1A2140; margin-bottom: 6px;
}
.form-hint { font-weight: 400; color: #8B6070; }
.form-input, .form-select {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1.5px solid #D4C8D0; font-size: 14px;
  font-family: 'Inter', sans-serif; color: #1A2140;
  background: white; box-sizing: border-box;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.form-input:focus, .form-select:focus {
  outline: none; border-color: #E8485A;
  box-shadow: 0 0 0 3px rgba(232,72,90,0.12);
}
.input-with-toggle { position: relative; }
.input-with-toggle .form-input { padding-right: 44px; }
.eye-btn {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: #8B6070; padding: 4px; display: flex; align-items: center;
}
.form-error {
  background: #FCEBEB; border: 1px solid #E8485A;
  color: #A32D2D; font-size: 13px; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 12px;
}

/* ── Buttons ────────────────────────────────── */
.btn-full { width: 100%; box-sizing: border-box; }
.btn-coral {
  background: linear-gradient(135deg, #E8485A, #8B3054);
  color: white; border: none; padding: 13px 20px;
  border-radius: 11px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: opacity 0.2s, transform 0.1s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-coral:hover { opacity: 0.92; }
.btn-coral:active { transform: scale(0.98); }
.btn-coral:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-ghost {
  background: transparent; color: #1A2140;
  border: 1.5px solid #D4C8D0; padding: 12px 20px;
  border-radius: 11px; font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, background 0.2s;
}
.btn-ghost:hover { border-color: #8B3054; background: #FDF0F2; }
.btn-navy {
  background: #1A2140; color: white; border: none;
  padding: 12px 20px; border-radius: 11px; font-size: 14px;
  font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif;
}
.btn-whatsapp {
  background: #25D366; color: white; border: none;
  padding: 14px 20px; border-radius: 11px; font-size: 14px;
  font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity 0.2s;
}
.btn-whatsapp:hover { opacity: 0.9; }

/* ── Auth OR divider ────────────────────────── */
.auth-or {
  text-align: center; position: relative;
  color: #8B6070; font-size: 12px; margin: 14px 0;
}
.auth-or::before, .auth-or::after {
  content: ''; position: absolute; top: 50%;
  width: 42%; height: 1px; background: #D4C8D0;
}
.auth-or::before { left: 0; }
.auth-or::after  { right: 0; }

.auth-divider { height: 1px; background: #EDE7E9; margin: 16px 0; }

.auth-switch { font-size: 13px; color: #6B4F5E; text-align: center; margin: 8px 0 0; }
.auth-switch a { color: #E8485A; font-weight: 600; text-decoration: none; }

.auth-footer-note {
  font-size: 11px; color: #8B6070; text-align: center;
  margin: 10px 0 0; line-height: 1.5;
}
.auth-footer-note a { color: #8B3054; }

.auth-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: #8B6070;
  font-size: 13px; cursor: pointer; padding: 0;
  margin-bottom: 16px; font-family: 'Inter', sans-serif;
}
.auth-back:hover { color: #1A2140; }

/* ── Legacy code toggle ─────────────────────── */
.auth-code-toggle {
  margin-top: 16px; font-size: 13px; color: #6B4F5E;
}
.auth-code-toggle summary {
  cursor: pointer; font-weight: 500; color: #8B3054;
  list-style: none; text-align: center;
}
.auth-code-toggle summary::-webkit-details-marker { display: none; }
.gate-code-form { margin-top: 14px; }
.gate-input-wrap { position: relative; margin-bottom: 10px; }
.gate-input-wrap input {
  width: 100%; padding: 11px 44px 11px 14px;
  border: 1.5px solid #D4C8D0; border-radius: 10px;
  font-size: 14px; font-family: 'Inter', sans-serif;
  color: #1A2140; box-sizing: border-box;
}
.gate-input-wrap input:focus { outline: none; border-color: #E8485A; }

/* ── Trial banner ───────────────────────────── */
.trial-banner {
  position: sticky; top: 0; z-index: 900;
  background: linear-gradient(90deg, #1A2140, #3D2048);
  border-bottom: 2px solid #E8485A;
  font-family: 'Inter', sans-serif;
}
.trial-banner.expired {
  background: linear-gradient(90deg, #A32D2D, #3D2048);
}
.tb-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; max-width: 900px; margin: 0 auto;
}
.tb-icon { font-size: 16px; }
.tb-msg { font-size: 13px; color: rgba(255,255,255,0.9); flex: 1; }
.tb-msg strong { color: white; }
.tb-upgrade {
  background: #E8485A; color: white; border: none;
  padding: 5px 14px; border-radius: 20px; font-size: 12px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  font-family: 'Inter', sans-serif; transition: opacity 0.2s;
}
.tb-upgrade:hover { opacity: 0.85; }

/* ── User menu ──────────────────────────────── */
.user-menu-btn {
  position: fixed; top: 14px; right: 16px; z-index: 800;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px; padding: 6px 12px;
  color: white; font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: background 0.2s;
}
.user-menu-btn:hover { background: rgba(255,255,255,0.2); }
.user-menu-dropdown {
  position: fixed; top: 48px; right: 16px; z-index: 850;
  background: white; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  min-width: 200px; padding: 8px 0;
  font-family: 'Inter', sans-serif;
}
.umd-name { padding: 10px 16px 4px; font-weight: 600; font-size: 13px; color: #1A2140; }
.umd-tier { padding: 0 16px 10px; font-size: 12px; color: #6B4F5E; }
.umd-divider { height: 1px; background: #EDE7E9; margin: 0; }
.umd-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 16px; font-size: 13px; color: #1A2140;
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.umd-item:hover { background: #F9F4F6; }
.umd-logout { color: #A32D2D !important; }

/* ── Upgrade modal ──────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-card {
  background: white; border-radius: 20px;
  padding: 32px 28px; max-width: 420px; width: 100%;
  position: relative; box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: #F5EEF2; border: none; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer;
  font-size: 14px; color: #6B4F5E;
  display: flex; align-items: center; justify-content: center;
}
.upgrade-card { text-align: center; }
.upgrade-icon { font-size: 40px; margin-bottom: 12px; }
.upgrade-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px; color: #1A2140; margin: 0 0 10px;
}
.upgrade-card > p { font-size: 14px; color: #6B4F5E; margin: 0 0 20px; }
.upgrade-features {
  background: #F9F4F6; border-radius: 12px;
  padding: 16px; margin-bottom: 20px; text-align: left;
}
.uf-item { font-size: 13px; color: #1A2140; padding: 4px 0; }
.upgrade-note {
  font-size: 11px; color: #8B6070; margin: 12px 0 0; line-height: 1.5;
}

/* ── Section C lock overlay ─────────────────── */
#section-c-lock {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(26,33,64,0.88); backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 12px; padding: 32px; text-align: center;
}
.sc-lock-icon { font-size: 40px; margin-bottom: 12px; }
.sc-lock-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; color: white; margin: 0 0 8px;
}
.sc-lock-msg { font-size: 13px; color: rgba(255,255,255,0.75); margin: 0 0 20px; }