/* Scoped marketing illustration, based on the current MyTrip white-label
   itinerary: photo hero, city navigation, Day by Day and documents. */
.ht-mytrip { width: min(360px, 100%); margin: 0 auto; }
.ht-mytrip__device { padding: 10px; border: 1px solid #6b6b6b; border-radius: 48px; background: linear-gradient(145deg, #434343, #121212 50%, #343434); box-shadow: 0 30px 65px #0007, inset 0 0 0 2px #ffffff12; }
.ht-mytrip__screen { overflow: hidden; border-radius: 38px; background: #f6f7f9; color: #181c23; font-family: Inter, Arial, sans-serif; font-size: 12px; line-height: 1.5; }
.ht-mytrip__status { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 8px 23px 0; background: #fff; font-size: 11px; font-weight: 700; }
.ht-mytrip__camera { width: 84px; height: 23px; background: #171717; border-radius: 20px; }
.ht-mytrip__header { display: flex; justify-content: space-between; align-items: center; padding: 4px 20px 8px; background: #fff; border-bottom: 1px solid #0000000f; font-size: 11px; font-weight: 600; }
.ht-mytrip__header img { width: 92px; height: 40px; object-fit: contain; filter: brightness(0); }
.ht-mytrip__hero { position: relative; height: 215px; color: #fff; }
.ht-mytrip__hero > img { width: 100%; height: 100%; object-fit: cover; }
.ht-mytrip__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0c0e1210 15%, #0c0e12d9 100%); }
.ht-mytrip__hero-content { position: absolute; z-index: 1; bottom: 20px; left: 20px; right: 20px; }
.ht-mytrip__kicker { font-size: 8px; font-weight: 600; letter-spacing: .13em; }
.ht-mytrip__title { margin: 5px 0 8px; font-size: 28px; font-weight: 700; line-height: 1.08; letter-spacing: -.04em; }
.ht-mytrip__meta { display: flex; gap: 8px; margin: 0; font-size: 11px; color: #ffffffdb; }
.ht-mytrip__navigation { display: flex; align-items: center; justify-content: space-around; height: 44px; padding: 0 12px; background: #fff; border-bottom: 1px solid #0000000f; font-size: 10px; font-weight: 600; color: #62666e; }
.ht-mytrip__navigation span { padding: 5px 9px; }
.ht-mytrip__navigation .ht-mytrip__active { border: 1px solid #b48a1f38; border-radius: 20px; color: #181c23; background: #b48a1f12; }
.ht-mytrip__body { padding: 20px; }
.ht-mytrip__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ht-mytrip__eyebrow { display: block; margin-bottom: 5px; font-size: 8px; font-weight: 700; letter-spacing: .12em; color: #62666e; }
.ht-mytrip__heading p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.025em; }
.ht-mytrip__day { flex: 0 0 40px; padding: 4px; border: 1px solid #00000010; border-radius: 10px; text-align: center; background: #fff; font-size: 8px; color: #62666e; }
.ht-mytrip__day b { display: block; font-size: 18px; line-height: 1.1; color: #181c23; }
.ht-mytrip__agenda { margin-bottom: 18px; padding: 2px 12px; border: 1px solid #00000010; border-radius: 16px; background: #fff; box-shadow: 0 4px 14px #0a0c1005; }
.ht-mytrip__stop { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.ht-mytrip__stop + .ht-mytrip__stop { border-top: 1px solid #0000000c; }
.ht-mytrip__stop time { flex: 0 0 34px; font-size: 10px; font-weight: 600; color: #7e6420; }
.ht-mytrip__stop b, .ht-mytrip__document b { display: block; font-size: 11px; font-weight: 600; }
.ht-mytrip__stop div > span, .ht-mytrip__document div > span { display: block; margin-top: 2px; font-size: 9px; color: #62666e; }
.ht-mytrip__document { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 11px; border: 1px solid #00000010; border-radius: 12px; background: #fff; }
.ht-mytrip__file { padding: 8px 5px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 8px; font-weight: 700; }
.ht-mytrip__footer { display: flex; justify-content: center; gap: 8px; padding: 0 10px 12px; color: #62666e; font-size: 9px; }
.ht-mytrip__home-bar { width: 100px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: #181c23; }
.ht-mytrip figcaption { margin-top: 18px; text-align: center; color: #ffffffb3; font-size: 12px; }
@media (max-width: 374px) {
  .ht-mytrip__body { padding: 16px; }
  .ht-mytrip__title { font-size: 25px; }
  .ht-mytrip__heading p { font-size: 14px; }
}