/* The reading club RSVP pages (VolRSVPConnect, VolRSVP, VolRSVPSchool, VolRSVPList, VolRSVPCancel):
   the same look as the volunteer application (VolunteerApplicationOnly_View.php). Each page loads
   this with $useScripts and sets $pageResponsive, so pagePublic.php fits it to phones. */
.rv { --ink: #1f2430; --muted: #6b7280; --line: #dde1ee; --soft: #f7f8fb; --brand: #2600a4; --good: #17653a;
  font: 15px/1.5 Arial, Helvetica, sans-serif; color: var(--ink); padding: 4px 14px 24px; text-align: left; }
.rv * { box-sizing: border-box; }
.rv a { color: var(--brand); }
.rv-title { margin: 4px 0 6px; font: bold 26px/1.2 Arial, Helvetica, sans-serif; color: var(--brand); }
.rv-lead { margin: 0 0 14px; color: #374151; }
.rv-note { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.rv-small { font-size: 13px; color: var(--muted); }

/* Boxes */
.rv-card { margin: 0 0 16px; padding: 18px 18px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.rv-card h2 { margin: 0 0 8px; font: bold 18px Arial, Helvetica, sans-serif; color: var(--brand); }
.rv-card p { margin: 0 0 10px; }
.rv-alert { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: #fdecec; color: #b42318; }
.rv-alert b { display: block; margin-bottom: 2px; }
.rv-warn { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: #fff8dc; border: 1px solid #f0d766; }
.rv-warn p { margin: 0 0 6px; }
.rv-warn p:last-child { margin-bottom: 0; }
.rv-done { margin: 0 0 16px; padding: 22px 20px 12px; border: 1px solid #b7e2c6; border-radius: 12px; background: #f0fbf4; }
.rv-done h2 { margin: 0 0 8px; color: var(--good); font: bold 22px Arial, Helvetica, sans-serif; }
.rv-done p { margin: 0 0 10px; }
.rv-points div { padding-left: 18px; position: relative; margin: 4px 0; }
.rv-points div::before { content: "\2022"; position: absolute; left: 4px; color: var(--muted); }

/* The next reading clubs: a photo beside the date */
.rv-club { display: flex; gap: 16px; align-items: center; margin: 0 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fcfcf2; }
.rv-club img { flex: none; width: 200px; height: auto; border-radius: 8px; }
.rv-club-text { flex: 1; min-width: 0; }
.rv-club-date { margin: 2px 0; font: bold 21px/1.25 Arial, Helvetica, sans-serif; color: var(--ink); }
.rv-age { margin-top: 6px; color: #b42318; font-weight: bold; font-size: 14px; }

/* Form fields */
.rv-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.rv-field { margin-bottom: 14px; min-width: 0; }
.rv-field > label, .rv-field > .rv-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: bold; }
.rv-input { display: block; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #cfd4e2; border-radius: 8px; background: #fff; font: 16px Arial, Helvetica, sans-serif; color: var(--ink); }
textarea.rv-input { min-height: 80px; resize: vertical; }
.rv-input:focus { outline: 2px solid #c7c2f0; outline-offset: 1px; border-color: #8f86d9; }
.rv-field.bad .rv-input { border-color: #e2685f; background: #fff7f6; }
.rv-field.bad > label { color: #b42318; }
.rv-hint { margin-top: 4px; color: var(--muted); font-size: 12px; }
.rv-check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: 14px; cursor: pointer; }
.rv-check input { flex: none; margin: 3px 0 0; width: 17px; height: 17px; }
.rv-check > span { flex: 1; min-width: 0; }
.rv-check.bad { background: #fdecec; }
.rv-inline { display: flex; gap: 8px; }
.rv-inline > .rv-input { flex: 1; min-width: 0; }
.rv-submit { display: block; width: 100%; margin: 4px 0 12px; padding: 13px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; font: bold 17px Arial, Helvetica, sans-serif; cursor: pointer; }
.rv-submit:hover { background: #1d0080; }
.rv-go { flex: none; min-height: 40px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--brand); color: #fff; font: bold 15px Arial, Helvetica, sans-serif; cursor: pointer; }
.rv-btn { display: inline-block; padding: 10px 16px; border-radius: 9px; background: var(--brand); color: #fff; font-weight: bold; text-decoration: none; }
.rv a.rv-btn { color: #fff; }
.rv-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 16px; font-size: 14px; }

/* Schools to choose from */
.rv-schools { display: grid; gap: 10px; margin: 0 0 16px; }
.rv-school { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 6px 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.rv-school.full { background: var(--soft); }
.rv-school h3 { margin: 0; font: bold 17px/1.3 Arial, Helvetica, sans-serif; }
.rv-school h3 a { text-decoration: none; }
.rv-school h3 a:hover { text-decoration: underline; }
.rv-school .rv-small { margin: 2px 0 0; }
.rv-school-side { text-align: right; }
.rv-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #eceff5; color: var(--muted); font: bold 12px Arial, Helvetica, sans-serif; }
.rv-meter { height: 8px; margin: 2px 0 4px; border-radius: 999px; background: #e7e9f1; overflow: hidden; }
.rv-meter span { display: block; height: 100%; border-radius: 999px; background: #3fa66b; }
.rv-meter.mid span { background: #e0a526; }
.rv-meter.high span { background: #d9534f; }
.rv-school-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.rv-school-foot .rv-small { margin: 0; }

/* The RSVP list */
.rv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0 20px; align-items: start; }
.rv-pick { display: flex; gap: 8px; margin: 0 0 12px; }
.rv-pick .rv-input { flex: 1; min-width: 0; }
.rv-count { margin: 0 0 12px; }
.rv-need { color: #b42318; font-weight: bold; }
.rv-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.rv-list-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2px 12px; padding: 8px 14px; border-top: 1px solid #eef0f5; font-size: 14px; }
.rv-list-row:first-child { border-top: 0; }
.rv-list-row.me { background: #fff5b8; }
.rv-list-row .who { font-weight: bold; }
.rv-list-row .where { color: var(--muted); font-weight: normal; font-size: 13px; }
.rv-list-empty { padding: 14px; color: var(--muted); }
.rv-side h2 { font-size: 16px; }
.rv-side .rv-card { padding: 14px 14px 6px; font-size: 14px; }
.rv-side .rv-points div { margin: 5px 0; }
.rv-groups div { margin: 3px 0; }
.rv-groups .rv-small { display: block; }
.rv-tip { display: block; margin: 8px 0 10px; }
.rv-tip img { display: block; max-width: 100%; height: auto; border: 0; }

@media (max-width: 780px) {
  .rv { padding-left: 0; padding-right: 0; }   /* on phones the page has its own margins */
  .rv-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .rv-title { font-size: 23px; }
  .rv-row { grid-template-columns: minmax(0, 1fr); }
  .rv-card { padding: 16px 14px 6px; }
  .rv-club { flex-direction: column; align-items: stretch; text-align: center; }
  .rv-club img { width: 100%; }
  .rv-school { grid-template-columns: minmax(0, 1fr); }
  .rv-school-side { text-align: left; }
  .rv-list-row { grid-template-columns: minmax(0, 1fr); }
}