.travel-study { --travel-blue: #2c7e99; --travel-rose: #a44565; }
#travelMain, #providerMain { max-width: 1120px; margin: 0 auto; padding: 20px 24px 0; }
#travelMain [hidden], #providerMain [hidden] { display: none !important; }
.travel-heading { margin: 16px 0 28px; max-width: 780px; }
.travel-heading h1 { font-size: 36px; line-height: 1.15; margin: 0 0 14px; font-weight: 650; }
.travel-heading p { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0; }
.travel-photos { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px 18px; }
.travel-photo { min-width: 0; position: relative; display: flex; flex-direction: column; padding: 0; background: white; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; text-align: left; color: var(--ink); cursor: pointer; }
.travel-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.travel-photo > span { padding: 14px 12px; font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; min-height: 52px; }
.travel-photo:has(input:checked), .travel-photo:hover { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.travel-photo input { position: absolute; top: 10px; right: 10px; width: 23px; height: 23px; accent-color: var(--brand); }
.travel-photo:focus-visible, .travel-photo:has(input:focus-visible) { outline: 3px solid var(--travel-blue); outline-offset: 3px; }
.travel-alternatives { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 24px 0; }
.travel-alternatives button { border: 0; padding: 8px 0; color: var(--brand); background: transparent; text-decoration: underline; text-underline-offset: 5px; font: inherit; cursor: pointer; }
#travelStage { min-height: 520px; }
.travel-form { max-width: 960px; }
.travel-form fieldset { border: 0; padding: 0; margin: 24px 0; min-width: 0; }
.travel-form legend { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.travel-options { display: flex; flex-wrap: wrap; gap: 10px; }
.travel-option { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #f4f7f6; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; max-width: 100%; line-height: 1.45; }
.travel-option input { accent-color: var(--brand); flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
.travel-option:has(input:checked) { background: #e7f3ed; border-color: var(--brand); }
.travel-option span { overflow-wrap: anywhere; }
.travel-detail-photos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.travel-visual-options { display: grid; gap: 14px; }
.travel-visual-options > :empty { display: none; }
.travel-visual-options small { display: block; font-size: 14px; font-weight: 400; line-height: 1.5; margin-top: 7px; }
.travel-detail-photos .travel-photo > span { min-height: 102px; }
.travel-offroad { border-left: 3px solid var(--travel-blue); padding-left: 20px; }
.travel-lodging-heading { font-size: 22px; line-height: 1.3; margin: 32px 0 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.travel-compact-photos .travel-photo > span { min-height: 64px; }
.travel-overnight .travel-detail-photos { grid-template-columns: repeat(4,minmax(0,1fr)); }
.travel-months .travel-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.travel-months .travel-option:last-child { grid-column: 1 / -1; justify-self: start; }
.travel-months .travel-option { padding: 12px 10px; }
.travel-year { max-width: 300px; margin: 26px 0; }
.travel-year-stepper { display: grid; grid-template-columns: 46px minmax(0,1fr) 46px; gap: 8px; }
.travel-year-stepper button { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: #f4f7f6; cursor: pointer; }
.travel-year-stepper img { width: 22px; height: 22px; }
.travel-year-clear { justify-self: start; padding: 8px 0; border: 0; background: none; color: var(--brand); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.travel-option:has(input:focus-visible), .travel-year button:focus-visible { outline: 3px solid var(--travel-blue); outline-offset: 2px; }
.travel-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 20px 0; }
#travelForm-timing .travel-fields { align-items: end; }
.travel-field { display: flex; flex-direction: column; gap: 8px; font-weight: 550; min-width: 0; }
.travel-field select, .travel-field input, .travel-field textarea { width: 100%; min-height: 46px; border: 1px solid #9eafac; border-radius: 4px; background: white; padding: 10px; font: inherit; color: var(--ink); min-width: 0; }
.travel-field textarea { min-height: 115px; resize: vertical; }
.travel-note { font-size: 15px; color: var(--muted); line-height: 1.5; }
.travel-actions { border-top: 1px solid var(--line); padding: 22px 0 32px; margin-top: 26px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.travel-actions button { font: inherit; min-height: 46px; padding: 12px 23px; border: 1px solid var(--brand); border-radius: 4px; background: var(--brand); color: white; cursor: pointer; }
.travel-actions .travel-back { padding: 10px; width: 46px; background: white; }
.travel-back img { width: 22px; height: 22px; transform: rotate(-90deg); }
.travel-actions .travel-finish { color: var(--brand); background: white; border: 0; margin-left: auto; text-decoration: underline; }
.travel-actions button:disabled { opacity: .6; cursor: wait; }
#travelError { background: #fff1f0; color: #922d36; border-left: 3px solid #b4414b; padding: 14px; line-height: 1.5; }
#journeyProgress { display: flex; gap: 5px; align-items: stretch; border-bottom: 1px solid var(--line); padding-bottom: 15px; }
#journeyProgress span { flex: 1; font-size: 12px; color: var(--muted); border-top: 4px solid #e4ece9; padding-top: 9px; overflow-wrap: anywhere; }
#journeyProgress .passed { border-color: #91b9a5; }
#journeyProgress [aria-current] { border-color: var(--brand); color: var(--brand); font-weight: 650; }
.readiness-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.readiness-options .travel-option { min-height: 86px; border-top: 4px solid var(--travel-blue); }
.readiness-options .travel-option:nth-child(2) { border-top-color: var(--brand); }
.readiness-options .travel-option:nth-child(3) { border-top-color: var(--travel-rose); }
.travel-duration { background: #f1f6f6; border-bottom: 2px solid var(--travel-blue); padding: 22px; margin: 18px 0 26px; }
.travel-duration output { display: block; font-size: 28px; font-weight: 650; color: var(--travel-blue); margin-bottom: 18px; }
.travel-duration input { width: 100%; accent-color: var(--travel-blue); }
.travel-stops { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; margin-top: 15px; }
.travel-stops button { border: 1px solid #b4c9cd; background: white; color: var(--ink); padding: 10px 2px; min-height: 44px; border-radius: 4px; cursor: pointer; font: inherit; }
.travel-stops button[aria-pressed="true"] { background: var(--travel-blue); color: white; }
.travel-destinations { display: grid; gap: 22px; }
.travel-map-details summary, .travel-credits summary { cursor: pointer; color: var(--brand); padding: 12px 0; }
.travel-map-details .travel-map { max-width: 480px; margin-top: 12px; }
.travel-credits { margin-top: 20px; font-size: 14px; line-height: 1.6; }
.travel-credits a { color: var(--brand); }
.travel-credits li { margin-bottom: 8px; overflow-wrap: anywhere; }
.travel-stay-mix { padding: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; list-style: none; font-weight: 600; color: var(--brand); }
.travel-stay-mix li { border-bottom: 2px solid #a6c7b7; padding: 8px 0; }
.travel-map { position: relative; background: #edf7fa; aspect-ratio: 1.05; width: 100%; overflow: hidden; border-radius: 5px; }
.travel-map svg { width: 100%; height: 100%; }
.travel-map path { fill: #e3ede0; stroke: #9fb59e; stroke-width: 1.5; fill-rule: evenodd; }
.travel-map circle { fill: var(--travel-blue); stroke: white; stroke-width: 2; }
.travel-map circle.selected { fill: var(--travel-rose); r: 7px; }
.travel-map text { font-size: 11px; fill: #284955; paint-order: stroke; stroke: #edf7fa; stroke-width: 3px; stroke-linejoin: round; }
.place-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 16px; margin-top: 18px; }
.place-row { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.place-row .travel-photo { flex: 1; }
.place-row .travel-photo > span { min-height: 92px; }
.place-row select { width: 100%; min-width: 0; min-height: 44px; padding: 8px; font: inherit; font-size: 14px; border: 1px solid #9eafac; border-radius: 4px; background: white; color: var(--ink); }
.place-row select:disabled { color: #727e7a; background: #f5f7f6; border-color: var(--line); }
.travel-detail-image { width: 100%; height: 210px; object-fit: cover; border-radius: 4px; display: block; margin: 18px 0; }
.travel-guide-image { object-position: center 45%; }
.travel-study #travelComplete { margin: 0; max-width: none; }
.travel-study .locale-bar { max-width: 1072px; margin: 0 auto; }
.travel-study .giveaway-banner { margin-top: 18px; }
@media(max-width:760px) {
  .travel-overnight .travel-detail-photos { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .travel-months .travel-options { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .travel-months .travel-option { gap: 6px; padding: 10px 6px; font-size: 14px; }
  .travel-detail-photos { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 12px; }
  .travel-detail-photos .travel-photo > span { min-height: 145px; }
  .travel-compact-photos .travel-photo > span { min-height: 64px; }
  .travel-offroad { padding-left: 10px; }
  #travelMain { padding: 10px 16px 0; }
  .travel-heading h1 { font-size: 29px; }
  .travel-photos { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 12px; }
  .travel-photo > span { font-size: 16px; min-height: 65px; padding: 12px 10px; }
  .travel-destinations { grid-template-columns: 1fr; gap: 15px; }
  .place-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 12px; }
  .place-row .travel-photo > span { font-size: 15px; min-height: 92px; }
  .travel-map { max-height: 310px; }
  .readiness-options { grid-template-columns: 1fr; }
  .readiness-options .travel-option { min-height: 58px; }
  #journeyProgress { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); row-gap: 10px; }
  #journeyProgress span { font-size: 11px; }
  .travel-fields { gap: 12px; }
  .travel-field select { font-size: 15px; }
  .travel-detail-image { height: 170px; }
  .travel-actions { gap: 8px; }
  .travel-actions .travel-finish { padding: 10px 4px; max-width: 45%; }
  .travel-duration { padding: 18px 14px; }
  .travel-form legend { font-size: 17px; }
}
@media(max-width:360px) { .travel-fields { grid-template-columns: 1fr; } .place-row .travel-photo > span { min-height: 112px; } }
/* Optional delivery-partner research stays outside the guest journey. */
.travel-provider-link { display: block; width: fit-content; max-width: 100%; margin: 32px 0; padding: 12px 0; border-bottom: 1px solid currentColor; }
#providerStage { margin: 24px 0 48px; }
#providerStage fieldset { margin-bottom: 28px; }
#providerStage textarea { min-height: 110px; resize: vertical; }
#providerStage .travel-note { margin: 14px 0; }
#providerDelete { display: block; padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--brand); font: inherit; margin: 18px 0; cursor: pointer; }
#providerError { color: #932d2d; }
#providerMain code { overflow-wrap: anywhere; }