/* Shared styles for the register.playboxkashmir.com subdomain
   (register/index.html + register/tournament.html).
   Split out of inline <style> blocks so both pages share one cached,
   parsed-once stylesheet instead of re-parsing inline CSS on every load,
   matching the style.css / booking.css pattern used on the main site. */

body.register-page { background: #f9fafb; min-height: 100vh; }

/* Both hero blocks previously used padding-top too small to clear the
   fixed 72px navbar (see .navbar in style.css), so headings rendered
   partially hidden behind it. 6.5rem clears it with room to spare,
   matching how book.html's .booking-hero (120px) clears the same navbar. */

.register-hero { text-align: center; padding: 6.5rem 1.5rem 2rem; }
.register-hero h1 { font-size: 2.2rem; margin-bottom: 0.5rem; color: #111827; }
.register-hero p { color: #6b7280; font-size: 1.05rem; }

.register-container { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.register-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.register-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border-radius: 16px; padding: 2.5rem 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; border: 1px solid #eee; }
.register-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.register-card.disabled-card { opacity: 0.65; cursor: not-allowed; }
.register-card.disabled-card:hover { transform: none; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.register-card-icon { font-size: 2.5rem; color: #15803d; margin-bottom: 1rem; }
.register-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; color: #111827; }
.register-card p { color: #6b7280; font-size: 0.95rem; margin-bottom: 1rem; }
.coming-soon-badge { background: #f3f4f6; color: #6b7280; font-size: 0.8rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; }
.register-card-cta { color: #15803d; font-weight: 700; font-size: 0.95rem; }
.register-footer { text-align: center; padding: 2rem; color: #9ca3af; font-size: 0.85rem; }

.reg-hero { text-align: center; padding: 6.5rem 1.5rem 1.5rem; }
.reg-hero h1 { font-size: 2rem; color: #111827; margin-bottom: 0.5rem; }
.reg-hero p { color: #6b7280; }

.reg-container { max-width: 900px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.tourn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.tourn-card { background: #fff; border-radius: 14px; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #eee; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.tourn-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.tourn-card-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 12px; margin-bottom: 0.75rem; }
.tourn-card-badge.open { background: #e6f4ea; color: #15803d; }
.tourn-card-badge.invite_only { background: #fef3c7; color: #92400e; }
.tourn-card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; color: #111827; }
.tourn-card p { color: #6b7280; font-size: 0.9rem; margin-bottom: 0.3rem; }
.tourn-card .tourn-fee { font-weight: 700; color: #15803d; margin-top: 0.5rem; }

.reg-form-card { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #eee; }
.reg-form-card h2 { margin-bottom: 0.25rem; color: #111827; }
.reg-form-card .reg-form-sub { color: #6b7280; margin-bottom: 1.5rem; font-size: 0.9rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group-full { margin-bottom: 1rem; }
.form-group-full label, .form-row label { display: block; font-size: 0.85rem; font-weight: 600; color: #374151; margin-bottom: 0.35rem; }
.form-group-full input, .form-row input, .form-group-full select { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.95rem; }
.player-row { display: grid; grid-template-columns: 2fr 1fr; gap: 0.75rem; margin-bottom: 0.6rem; }
.player-row input { padding: 0.55rem 0.7rem; border: 1px solid #d1d5db; border-radius: 8px; }
.eligibility-msg { display: none; margin: 0.75rem 0; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.9rem; }
.eligibility-msg.error { display: block; background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }
.eligibility-msg.success { display: block; background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.reg-fee-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
.reg-fee-bar .fee-amount { font-size: 1.4rem; font-weight: 800; color: #111827; }
.btn-pay-register { background: #15803d; color: #fff; border: none; padding: 0.85rem 1.75rem; border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer; }
.btn-pay-register:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-back-step { background: none; border: none; color: #6b7280; font-weight: 600; cursor: pointer; margin-bottom: 1rem; }
.confirm-screen { text-align: center; padding: 3rem 1.5rem; }
.confirm-screen i { font-size: 3.5rem; color: #15803d; margin-bottom: 1rem; }
.loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; z-index: 999; }
.agree-terms { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb; font-size: 14px; line-height: 1.5; color: #374151; }
.agree-terms input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; accent-color: #15803d; }
.agree-terms a { color: #15803d; text-decoration: underline; }

/* Membership plan cards (register/membership.html) reuse .tourn-card /
   .tourn-cards for the grid + hover treatment and just add the perks list
   and a couple of membership-only tweaks below. */
.plan-card { cursor: pointer; }
.plan-perks { list-style: none; margin: 0.75rem 0 0.25rem; padding: 0; }
.plan-perks li { font-size: 0.85rem; color: #374151; margin-bottom: 0.4rem; display: flex; align-items: flex-start; gap: 0.5rem; }
.plan-perks li i { color: #15803d; margin-top: 0.2rem; font-size: 0.75rem; }
.mem-fine-print { margin-top: 0.85rem; font-size: 0.8rem; color: #9ca3af; text-align: center; }

/* Long-form legal prose (register/membership-terms.html). Kept in a single
   readable column, wider than the form cards since it's plain text. */
.terms-page { max-width: 760px; }
.terms-card { background: #fff; border-radius: 16px; padding: 2.5rem 3rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #eee; }
.terms-updated { color: #6b7280; font-size: 0.85rem; margin-bottom: 1.5rem; }
.terms-card p { color: #374151; font-size: 0.95rem; line-height: 1.7; margin: 0 0 1rem; }
.terms-card h2 { color: #111827; font-size: 1.1rem; margin: 2rem 0 0.75rem; padding-top: 0.5rem; border-top: 1px solid #f3f4f6; }
.terms-card h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1.5rem; }
.terms-card ol { color: #374151; font-size: 0.95rem; line-height: 1.7; margin: 0 0 1rem; padding-left: 1.4rem; }
.terms-card ol ol { margin: 0.5rem 0; }
.terms-card li { margin-bottom: 0.6rem; }
.terms-card a { color: #15803d; font-weight: 600; text-decoration: underline; }

/* Mobile: the two-column form grid main.html's booking form already
   collapses at 768px (see .form-grid in booking.css) had no equivalent
   here, so team/captain and contact/email fields were squeezed into
   ~140px-wide columns on phones. Match the same breakpoint behavior. */
@media (max-width: 600px) {
  .register-hero { padding: 6rem 1.25rem 1.5rem; }
  .register-hero h1 { font-size: 1.7rem; }
  .register-card { padding: 2rem 1.25rem; }
  .reg-hero { padding: 6rem 1.25rem 1.25rem; }
  .reg-hero h1 { font-size: 1.6rem; }
  .reg-form-card { padding: 1.25rem; }
  .form-row { grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
  .player-row { grid-template-columns: 1.5fr 1fr; gap: 0.5rem; }
  .reg-fee-bar { flex-wrap: wrap; gap: 0.75rem; }
  .terms-card { padding: 1.5rem 1.25rem; }
}