/* ===== CREATE MY OWN TRIP — the button under the walkthrough, and the
   planner popup (index.html #planModal, js/plan.js). Colours come from
   css/styles.css, so both themes work. ===== */

.own-trip-cta { text-align: center; margin-top: 56px; }
.own-trip-cta .btn-primary { box-shadow: 0 14px 30px -12px var(--shadow); }

/* The four steps, as small chips */
.plan-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.plan-steps li { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.plan-steps li.is-done { color: var(--ink); }
.plan-steps li.is-on { background: var(--confirmed); color: var(--confirmed-ink); border-color: transparent; }

/* A question — the size of a box title (.t-title, css/styles.css), never
   smaller than the choices under it — and a choice drawn as a card with
   its radio button. */
.plan-q { display: block; font-family: Sora, Inter, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3; margin-bottom: 10px; }
.plan-option {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.plan-option:hover { border-color: var(--muted); }
.plan-option:has(input:checked) { border-color: var(--confirmed); box-shadow: 0 0 0 1px var(--confirmed); }
.plan-option input { margin-top: 3px; accent-color: var(--confirmed); flex: none; }
.plan-option-body { flex: 1; min-width: 0; }

/* The estimate under the steps */
.plan-estimate {
  margin-top: 20px; padding: 14px 16px; border-radius: 12px;
  border: 1px dashed var(--confirmed);
}