/* form.css: GlobalPrep form carousel (tutor application and parent intake).
   The shell (header, stepper, footer, transitions, bubbles, explainer cards) is the ported Food for Joe
   quiz CSS. This file adds the generic step layout and the new controls: chips, checks, PDF drop zone,
   availability grid, the caterpillar rider on the stepper, the loader and the confirmation. */

/* ── Layout: the content column is wider than the pet quiz (forms have more fields) ── */
.PetQuiz_content { max-width: 1120px; }

.GPStep {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 140px;
  color: var(--gp-teal);
}

.GPStep_main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.GPStep_heading { text-align: center; }
.GPStep_heading .sectionHeader { margin-bottom: 6px; }

.GPStep_title {
  margin: 0;
  font-family: var(--font-family-serif-medium);
  font-variation-settings: var(--gp-medium-axes);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.GPStep_subtitle { margin-top: 8px; font-size: 16px; }
.GPStep_fields { display: flex; flex-direction: column; gap: 22px; }
.GPStep_aside .ExplainerCard_card { padding: 16px; border-radius: 24px; }
.GPStep_aside .ExplainerCard_content p + p { margin-top: 8px; }
.GPStep_errorBubble { align-self: center; }

@media (min-width: 960px) {
  .GPStep { grid-template-columns: minmax(0, 640px) 300px; justify-content: center; gap: 48px; align-items: start; }
  .GPStep_noAside { grid-template-columns: minmax(0, 680px); }
  .GPStep_title { font-size: 40px; }
  .GPStep_heading { text-align: left; }
  .GPStep_aside { position: sticky; top: 20px; margin-top: 70px; }
}

/* ── Field frame ─────────────────────────────────────────────────────── */
.GPField { display: flex; flex-direction: column; gap: 8px; }
.GPField_child {
  margin-left: 6px;
  padding-left: 16px;
  border-left: 3px solid var(--gp-amber);
}
.GPField_label {
  font-family: var(--font-family-serif-medium);
  font-variation-settings: var(--gp-medium-axes);
  font-size: 18px;
  line-height: 1.3;
}
.GPField_required { color: var(--gp-amber-dark); margin-left: 3px; }
.GPField_optional {
  margin-left: 8px;
  font-family: var(--font-family-serif-light);
  font-variation-settings: var(--gp-light-axes);
  font-size: 13px;
  opacity: 0.7;
}
.GPField_help { font-size: 14px; line-height: 1.4; opacity: 0.85; margin-top: -2px; }
.GPField_note p { font-size: 16px; line-height: 1.45; }
.GPField_note:has(p:empty) { display: none; }
.GPField_heading h2 { font-size: 22px; margin-top: 6px; }
.GPField .Input_hint { margin-top: 0; }
.GPField .SearchSelect_label:empty { display: none; }
.GPField_date { min-height: 50px; }
.GPField_invalid .GPChips,
.GPField_invalid .GPChecks,
.GPField_invalid .GPFile_zone,
.GPField_invalid .GPMatrix_scroll { outline: 2px solid var(--color-terracotta); outline-offset: 4px; border-radius: 16px; }

/* ── Chips (multi or single choice with few options) ─────────────────── */
.GPChips { display: flex; flex-wrap: wrap; gap: 10px; }
.GPChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px 10px 12px;
  border: 1.5px solid var(--gp-border);
  border-radius: var(--border-radius-button);
  background: var(--color-white);
  color: var(--gp-teal);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s var(--ffj-ease-snappy), border-color 0.2s var(--ffj-ease-snappy), transform 0.2s var(--ffj-ease-snappy);
}
.GPChip:hover { border-color: var(--gp-teal); }
.GPChip:active { transform: scale(0.97); }
.GPChip:focus-visible { outline: 2px solid var(--gp-teal); outline-offset: 2px; }
.GPChip_tick {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--gp-border);
  background: var(--color-white);
  flex: none;
  transition: background 0.2s, border-color 0.2s;
}
.GPChip_on { background: var(--color-light-yellow); border-color: var(--gp-amber); }
.GPChip_tick { position: relative; }
.GPChip_on .GPChip_tick { border-color: var(--gp-teal); background: var(--gp-teal); }
.GPChip_on .GPChip_tick::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid var(--gp-cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Checkbox list ───────────────────────────────────────────────────── */
.GPChecks { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 600px) { .GPChecks:not(.GPChecks_single) { grid-template-columns: 1fr 1fr; } }
.GPCheck {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--color-white);
  border: 1.5px solid var(--gp-border-subtle);
  cursor: pointer;
  line-height: 1.35;
  transition: border-color 0.2s, background 0.2s;
}
.GPCheck:hover { border-color: var(--gp-border); }
.GPCheck:has(input:checked) { background: var(--color-light-yellow); border-color: var(--gp-amber); }
.GPCheck input { flex: none; margin-top: 1px; }
.GPChecks_single .GPCheck { font-size: 15px; }

/* ── Phone ───────────────────────────────────────────────────────────── */
.GPField_phone .PhoneInput_dropdown { max-height: 280px; overflow: auto; z-index: 5; }

/* ── PDF drop zone ───────────────────────────────────────────────────── */
.GPFile_zone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 2px dashed var(--gp-border);
  border-radius: 18px;
  background: var(--color-white);
  cursor: pointer;
  line-height: 1.35;
  transition: border-color 0.2s, background 0.2s;
}
.GPFile_zone:hover,
.GPFile_over .GPFile_zone { border-color: var(--gp-amber); background: var(--color-light-yellow); }
.GPFile input:focus-visible + .GPFile_zone { outline: 2px solid var(--gp-teal); outline-offset: 2px; }
.GPFile_zone small { opacity: 0.75; }
.GPFile_list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.GPFile_item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--gp-cream); border-radius: 12px; font-size: 15px; }
.GPFile_item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.GPFile_remove { border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 8px; }
.GPFile_remove:focus-visible { outline: 2px solid var(--gp-teal); }

/* ── Availability grid ───────────────────────────────────────────────── */
.GPMatrix_scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.GPMatrix { border-collapse: separate; border-spacing: 4px; user-select: none; touch-action: pan-y; }
.GPMatrix th { font-size: 13px; font-weight: 400; padding: 0 4px; white-space: nowrap; }
.GPMatrix thead th { text-align: center; font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes); }
.GPMatrix tbody th { text-align: right; opacity: 0.8; }
.GPSlot {
  display: block;
  width: 40px;
  height: 26px;
  border-radius: 8px;
  border: 1.5px solid var(--gp-border-subtle);
  background: var(--color-white);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.GPSlot:hover { border-color: var(--gp-teal); }
.GPSlot:focus-visible { outline: 2px solid var(--gp-teal); outline-offset: 1px; }
.GPSlot_on { background: var(--gp-teal); border-color: var(--gp-teal); }
.GPSlot_on:hover { background: var(--gp-teal-mid); }
.GPMatrix_tools { display: flex; justify-content: flex-end; }
.GPMatrix_tools .Button_textual { font-size: 14px; }
@media (min-width: 960px) { .GPSlot { width: 52px; } }

/* ── Stepper rider: the caterpillar replaces the Food for Joe ball ───── */
.ProgressBar_ball.GPProgress_rider {
  --ball-size: 30px;
  width: auto;
  height: auto;
  top: 0;
  /* the isotype rests on top of the bar, its amber dot leading at the progress point */
  transform: translate(calc(-100% + 4px), calc(-100% - 2px));
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.ProgressBar_ball.GPProgress_rider .GPButterfly { transform: translate(25%, 18%); }
.ProgressBar_fill { background: linear-gradient(90deg, var(--gp-teal), var(--gp-teal-mid)); }

/* ── Loader (caterpillar to butterfly) ───────────────────────────────── */
.GPLoader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(251, 247, 240, 0.94);
  backdrop-filter: blur(4px);
  animation: GPLoader-in 0.35s ease-out;
}
@keyframes GPLoader-in { from { opacity: 0; } }
.GPLoader_card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 420px; color: var(--gp-teal); }
.GPLoader_meta .GPMeta { width: 200px; height: 200px; }
.GPLoader_text {
  font-family: var(--font-family-serif-medium);
  font-variation-settings: var(--gp-medium-axes);
  font-size: 24px;
  min-height: 1.3em;
}
.GPLoader_error { display: flex; flex-direction: column; gap: 14px; align-items: center; color: var(--color-terracotta); }

/* ── Confirmation ────────────────────────────────────────────────────── */
.GPStep_done { text-align: center; }
.GPStep_done .GPStep_main { align-items: center; padding-top: 30px; }
.GPDone_art { line-height: 0; }
.GPDone_actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.GPDone_note { margin-top: 10px; font-size: 14px; padding: 10px 14px; border-radius: 12px; background: var(--color-light-yellow); }

/* ── Footer note (replaces the review widget in the quiz footer) ─────── */
.GPFooter_note { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; margin: 0; }
.GPFooter_note .GPIso { --iso-w: 22px; }

/* Honeypot: invisible to people, tempting to bots */
.GPHoney { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Wide GlobalPrep lockup in the form header (the FFJ logo was a tall badge) */
.GPQuizLogo { width: auto; }
.GPQuizLogo img { width: 130px; max-width: none; height: auto; }
@media (min-width: 960px) { .GPQuizLogo img { width: 170px; } }

/* ══════════════════════ Phone-first (v1.1) ══════════════════════ */
/* Inline tip under the title: phones and tablets only, the side card takes over from 960px */
.GPStep_tipInline {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: -4px 0 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--color-light-yellow);
  font-size: 14px;
  line-height: 1.4;
}
.GPStep_tipInline img { width: 22px; height: 22px; flex: none; margin-top: 1px; }
@media (max-width: 959px) {
  .GPStep_aside { display: none; }
  .GPStep_heading { text-align: left; }
  .GPStep { margin-bottom: 170px; }
}
@media (min-width: 960px) {
  .GPStep_tipInline { display: none; }
}

/* Day chips for the availability grid: phones only */
.GPMatrix_days { display: none; }
@media (max-width: 599px) {
  .GPMatrix_days {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: none;
  }
  .GPMatrix_days::-webkit-scrollbar { display: none; }
  .GPMatrix_day {
    position: relative;
    flex: none;
    min-width: 48px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 500px;
    border: 1.5px solid var(--gp-border);
    background: var(--color-white);
    color: var(--gp-teal);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
  }
  .GPMatrix_day[aria-selected="true"] { background: var(--gp-teal); border-color: var(--gp-teal); color: var(--gp-cream); }
  .GPMatrix_count {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--gp-amber);
    color: var(--gp-ink);
    font-size: 11px;
    line-height: 18px;
  }
  /* one day visible, wide slots that are easy to hit and to drag down (scroll by dragging the time column) */
  .GPMatrix_oneDay td[data-col]:not(.GPMatrix_active),
  .GPMatrix_oneDay th[data-col]:not(.GPMatrix_active) { display: none; }
  .GPMatrix_oneDay { width: 100%; }
  .GPMatrix_oneDay thead { display: none; }
  .GPMatrix_oneDay tbody th { width: 64px; font-size: 14px; }
  .GPMatrix_oneDay .GPSlot { width: 100%; height: 36px; touch-action: none; }

  /* bigger targets and a footer that clears the home indicator */
  .GPChip { min-height: 48px; }
  .GPCheck { padding: 14px; }
  .PetQuizFooter_footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .GPField_phone .PhoneInput_dropdown { max-height: 50vh; }
}