/*
 * shared.css — DTFCLICK Shared Stylesheet
 *
 * Common rules extracted from inline <style> blocks across ~50 HTML pages.
 * Organized by category. Page-specific overrides remain in each page's
 * own inline <style> block (cascade ensures they win over these rules).
 *
 * Categories:
 *   1. Reset
 *   2. Base typography
 *   3. Brand wordmark (.wordmark)
 *  3b. RSVP page logo (.logo)
 *   4. Form field pattern (auth pages)
 *   5. Primary button
 *   6. Status / feedback messages
 *   7. Page footer links
 *   8. RSVP: error message
 *   9. RSVP: loading bar
 *  10. RSVP: hint text
 *  11. QR code wrapper
 *  12. Success screen elements
 *  13. Loading spinner
 *  14. Utility classes
 */

/* ─────────────────────────────────────────────────────────────────
   1. RESET
   ───────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────────────────────────────
   2. BASE TYPOGRAPHY
   Used on all standalone pages (those not already served by
   styles.css or click-styles.css).
   ───────────────────────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #fff;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────────────────
   3. BRAND WORDMARK
   Pages: login, forgot-password, reset-password, stripe-success
   ───────────────────────────────────────────────────────────────── */
.wordmark {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #fff;
  margin-bottom: 40px;
}
.wordmark span { color: #e85820; }

/* ─────────────────────────────────────────────────────────────────
   3b. RSVP PAGE LOGO
   Pages: event-rsvp, universal-rsvp, promoter-rsvp, promoter-login
   Base is 26px / orange. Pages that differ specify only the delta
   in their own inline <style> override.
   ───────────────────────────────────────────────────────────────── */
.logo {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #e85820;
  margin-bottom: 20px;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────
   4. FORM FIELD PATTERN
   Pages: login, forgot-password, reset-password, register
   ───────────────────────────────────────────────────────────────── */
.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 8px;
}

.field input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #222;
  background: #141414;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  outline: none;
}
.field input:focus {
  border-color: #e85820;
  box-shadow: 0 0 0 3px rgba(232,88,32,.12);
}
.field input::placeholder { color: #444; }

/* ─────────────────────────────────────────────────────────────────
   5. PRIMARY BUTTON
   Pages: login, forgot-password, reset-password, register,
          stripe-success (slight override in that page)
   ───────────────────────────────────────────────────────────────── */
.btn-primary {
  display: block;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 8px;
  background: #e85820;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .15s;
  margin-top: 8px;
}
.btn-primary:hover { background: #d14f1c; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background: #333; color: #555; cursor: not-allowed; transform: none; }

/* ─────────────────────────────────────────────────────────────────
   6. STATUS / FEEDBACK MESSAGES
   Pages: login, forgot-password, reset-password, register
   ───────────────────────────────────────────────────────────────── */
.msg {
  font-size: 13px;
  text-align: center;
  padding: 10px 14px;
  border-radius: 7px;
  margin-top: 12px;
  display: none;
  line-height: 1.5;
}
.msg.error {
  display: block;
  background: rgba(239,68,68,.1);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.2);
}
.msg.success {
  display: block;
  background: rgba(34,197,94,.1);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.2);
}

/* ─────────────────────────────────────────────────────────────────
   7. PAGE FOOTER LINKS
   Pages: login, forgot-password, reset-password, register
   ───────────────────────────────────────────────────────────────── */
.foot {
  text-align: center;
  font-size: 13px;
  color: #555;
  margin-top: 24px;
}
.foot + .foot { margin-top: 12px; }
.foot a { color: #e85820; text-decoration: none; font-weight: 600; }
.foot a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────
   8. RSVP ERROR MESSAGE
   Pages: event-rsvp, universal-rsvp, promoter-rsvp, promoter-login
   ───────────────────────────────────────────────────────────────── */
.error-msg {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px;
  color: #f87171;
  font-size: 14px;
  padding: 12px 14px;
  margin-bottom: 18px;
  display: none;
}

/* ─────────────────────────────────────────────────────────────────
   9. RSVP LOADING BAR
   Pages: event-rsvp, universal-rsvp, promoter-rsvp
   ───────────────────────────────────────────────────────────────── */
.loading-bar {
  display: none;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  padding: 14px 0;
}

/* ─────────────────────────────────────────────────────────────────
  10. RSVP HINT TEXT
   Pages: event-rsvp, universal-rsvp
   ───────────────────────────────────────────────────────────────── */
.hint {
  font-size: 11px;
  color: #4b5563;
  margin-top: -14px;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────
  11. QR CODE WRAPPER
   Pages: event-rsvp, universal-rsvp, promoter-rsvp
   ───────────────────────────────────────────────────────────────── */
.qr-wrap {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  display: inline-block;
  margin: 20px 0;
}
.qr-wrap img {
  width: 220px;
  height: 220px;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────
  12. SUCCESS SCREEN ELEMENTS
   Pages: event-rsvp, promoter-rsvp, universal-rsvp
   ───────────────────────────────────────────────────────────────── */
.success-name {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 6px;
}
.success-sub {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ─────────────────────────────────────────────────────────────────
  13. LOADING SPINNER
   Pages: profile, verify-email, resend-verification, door, scan
   ───────────────────────────────────────────────────────────────── */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: #e85820;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 20px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────────
  14. UTILITY CLASSES
   ───────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }