/* ==========================================================================
   Team Registration - modern layout
   Palette matches the rest of the site (Teams / Stats / Player Profiles)
   ========================================================================== */

.team-reg-wrapper {
  background: linear-gradient(180deg, #faf9f7 0%, #f5f4f2 100%);
  padding: 10px 0 40px;
}

.team-reg-header {
  text-align: center;
  margin-bottom: 2rem;
}

.team-reg-header h3.description {
  color: #403d39;
  font-weight: 700;
  display: inline-block;
  border-bottom: 3px solid #f5593d;
  padding-bottom: 10px;
  margin-bottom: 0.5rem;
}

.team-reg-header p {
  color: #66615b;
  margin-bottom: 0;
}

/* ---- Grid of question cards ---- */
.questions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 768px) {
  .questions-grid {
    grid-template-columns: 1fr 1fr;
  }

  .questions-grid .full-width {
    grid-column: 1 / -1;
  }
}

.question-card {
  background: linear-gradient(180deg, #ffffff 0%, #faf9f7 100%);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.06),
    0 1.5px 4px rgba(0, 0, 0, 0.03);
  text-align: left;
}

.question-card .biggerLabel,
.question-card label:not(.form-check-label) {
  color: #403d39;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: block;
}

/* ---- Text inputs ---- */
.question-card .form-control.border-input {
  border: 1px solid #e8e6e3;
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.question-card .form-control.border-input:focus {
  border-color: #f5593d;
  box-shadow: 0 0 0 3px rgba(245, 89, 61, 0.12);
}

/* ---- Radio choices styled as basketballs ---- */
.form-check-radio .form-check-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: -3px;
  width: 24px;
  height: 24px;
}

.form-check-radio .form-check-sign::before,
.form-check-radio .form-check-sign::after,
.form-check-radio input[type="radio"] + .form-check-sign::after,
.form-check-radio input[type="radio"]:checked + .form-check-sign::after,
.form-check-radio input[type="radio"]:checked ~ .form-check-sign::after {
  content: none !important;
  display: none !important;
}

.form-check-radio .form-check-sign i.basketball-icon {
  font-size: 20px;
  color: #d7d3cf;
  transition: color 0.2s ease, transform 0.2s ease;
}

.form-check-radio input[type="radio"]:checked ~ .form-check-sign i.basketball-icon {
  color: #f5593d;
  transform: scale(1.15);
}

.form-check-radio .form-check-label:hover .form-check-sign i.basketball-icon {
  color: #f5a087;
}

.form-check-radio input[type="radio"]:checked ~ .form-check-sign ~ .form-check-label,
.form-check-radio .form-check-label {
  color: #403d39;
}

/* ---- Day preference checkboxes (recolored, not basketballs) ---- */
.form-check .form-check-sign::before,
.form-check .form-check-sign::after {
  border-radius: 6px;
}

.form-check input[type="checkbox"]:checked ~ .form-check-sign::before {
  background-color: #f5593d;
}

.form-check .form-check-label:hover .form-check-sign::before {
  background-color: #c9c5c1;
}

.form-check input[type="checkbox"]:checked ~ .form-check-sign:hover::before {
  background-color: #e04a30;
}

/* ---- Day options laid out as a friendly row ---- */
.day-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.day-options .form-check {
  margin-bottom: 8px;
}

/* ---- Referral "other" field ---- */
#referralOtherItem {
  margin-top: 0.5rem;
}

/* ---- Misc ---- */
h3.description {
  color: #333;
}

.biggerLabel {
  font-size: large;
}

.errorDiv {
  padding: 20px;
  font-weight: bold;
  color: red;
}

.toastMessage {
  font-weight: bold;
}

label {
  font-weight: 600;
}

.saveBtn {
  background: linear-gradient(135deg, #f5593d 0%, #e04a30 100%);
  border: none;
}

.saveBtn:hover,
.saveBtn:focus {
  background: linear-gradient(135deg, #e04a30 0%, #d9442a 100%);
}