.trip-header { position: relative; padding: clamp(24px,4vw,42px); border: 1px solid var(--trypify-glass-border); border-radius: var(--trypify-radius-hero); background: linear-gradient(130deg,rgba(255,255,255,.78),rgba(219,234,254,.54),rgba(245,243,255,.72)); box-shadow: var(--trypify-shadow-sm); overflow: hidden; }
.trip-header::after { position: absolute; right: -80px; bottom: -115px; width: 290px; height: 250px; border-radius: 50%; background: radial-gradient(circle,rgba(56,189,248,.28),transparent 68%); content: ""; pointer-events: none; }.trip-header > * { position: relative; z-index: 1; }.trip-header h1 { max-width: 700px; margin-bottom: 8px; }.trip-header .button { min-height: 38px; font-size: 13px; }
.day-selector { display: flex; gap: 8px; margin: 20px 0 14px; padding: 2px; overflow-x: auto; scrollbar-width: none; }.day-selector::-webkit-scrollbar { display:none; }.day-selector button { display: grid; flex: 0 0 86px; gap: 2px; min-height: 62px; padding: 8px 11px; border: 1px solid var(--trypify-glass-border); border-radius: 14px; background: rgba(255,255,255,.6); box-shadow: none; color: var(--trypify-text-secondary); text-align: left; }.day-selector button:hover { transform: none; }.day-selector button small { color: var(--trypify-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; }.day-selector button strong { color: inherit; font-size: 15px; }.day-selector button.is-active { border-color: transparent; background: linear-gradient(135deg,var(--trypify-primary),var(--trypify-accent)); box-shadow: 0 8px 18px rgba(59,130,246,.25); color: #fff; }.day-selector button.is-active small { color: rgba(255,255,255,.76); }.trip-view-toggle { margin-bottom: 18px; }
.timeline-view { max-width: 820px; }.timeline-day { position: relative; margin: 0 0 18px; padding: clamp(18px,3vw,28px); }.timeline-day-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 19px; }.timeline-day-index { display: grid; place-items: center; flex: 0 0 auto; min-width: 58px; height: 29px; padding: 0 8px; border-radius: 999px; background: linear-gradient(135deg,rgba(219,234,254,.95),rgba(224,231,255,.9)); color: var(--trypify-primary-dark); font-size: 11px; font-weight: 830; letter-spacing: .05em; }.timeline-date { display: block; margin: 1px 0 2px; color: var(--trypify-text-muted); font-size: 12px; font-weight: 700; }.timeline-day-head h2 { margin: 0; font-size: 20px; }
.activity-slot { position: relative; min-height: 46px; padding: 8px 0 8px 66px; border-left: 1px solid rgba(96,165,250,.26); }.activity-slot:last-of-type { padding-bottom: 2px; }.activity-slot h3 { position: absolute; top: 14px; left: 0; width: 53px; margin: 0; color: var(--trypify-text-muted); font-size: 11px; font-weight: 790; letter-spacing: .06em; text-align: right; text-transform: uppercase; }.activity-slot::before { position: absolute; top: 16px; left: -5px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--trypify-primary-light); box-shadow: 0 0 0 3px rgba(96,165,250,.16); content: ""; }.activity-entry { position: relative; display: flex; gap: 10px; margin: 0 0 9px; padding: 13px 14px; border: 1px solid rgba(219,234,254,.8); border-radius: 14px; background: linear-gradient(120deg,rgba(255,255,255,.84),rgba(248,250,252,.68)); box-shadow: 0 4px 15px rgba(15,23,42,.04); cursor: grab; transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease; }.activity-entry:hover { border-color: rgba(96,165,250,.45); box-shadow: 0 9px 20px rgba(15,23,42,.07); transform: translateX(2px); }.activity-entry:active { cursor: grabbing; }.activity-entry > p:first-child { display: flex; align-items: baseline; gap: 9px; margin: 0 0 5px; }.activity-entry p { margin-bottom: 5px; }.activity-entry time { flex: 0 0 auto; color: var(--trypify-primary-dark); font-feature-settings: "tnum"; font-size: 12px; font-weight: 800; }.activity-entry b { color: var(--trypify-text-primary); font-size: 15px; }.activity-entry small { color: var(--trypify-text-secondary); }.drag-handle { color: var(--trypify-text-muted); cursor: grab; font-size: 17px; line-height: 1; }.activity-slot details { margin-top: 7px; }.activity-slot:empty::after { color: var(--trypify-text-muted); content: ""; }
.timeline-day details { margin: 13px 0 0 66px; border-top: 1px dashed var(--trypify-line); }.timeline-day details > summary { padding: 13px 0 0; color: var(--trypify-primary-dark); cursor: pointer; font-size: 13px; font-weight: 750; }.timeline-day details > form { margin-top: 15px; padding: 16px; border-radius: 14px; background: rgba(241,245,249,.55); }.timeline-day ol[data-sortable] { margin: 8px 0; padding-left: 22px; }.timeline-day li[draggable="true"],tr[draggable="true"] { cursor: grab; }.timeline-day li[draggable="true"]:active,tr[draggable="true"]:active { cursor: grabbing; }
.day-actions { display: flex; flex-wrap: wrap; gap: 10px; }.day-actions form { display: inline-flex; }.trip-map-panel { margin-top: 20px; }.trip-map-panel #tmap { height: min(54vw,560px) !important; min-height: 360px; }.map-placeholder h2 { margin-bottom: 5px; }.map-placeholder > p { color: var(--trypify-text-secondary); }
.trip-header + [data-trip-version] + .trip-tools { margin-top: 18px; }
.share-hero { display: grid; grid-template-columns: minmax(230px,.8fr) minmax(0,1.2fr); align-items: stretch; gap: 0; padding: 0; background: rgba(255,255,255,.72); }.share-cover { width: 100%; min-height: 240px; height: 100%; object-fit: cover; }.share-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px,5vw,58px); }.share-hero-copy h1 { margin: 10px 0 8px; }.share-timeline { max-width: 820px; }.share-day { margin: 0 0 14px; padding: 21px 23px; }.share-day header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }.share-day h2 { margin: 2px 0 0; font-size: 18px; }.share-activity { display: grid; grid-template-columns: 66px 1fr; gap: 12px; padding: 10px 0 10px 15px; border-left: 1px solid rgba(96,165,250,.28); }.share-activity > span { color: var(--trypify-primary-dark); font-size: 12px; font-weight: 780; }.share-activity b,.share-activity small { display: block; }.share-activity small { margin-top: 2px; color: var(--trypify-text-muted); }
@media (min-width: 1100px) { .trip-map-panel { position: sticky; top: 92px; max-width: 560px; margin-left: auto; }.trip-map-panel #tmap { min-height: 420px; }.trip-header + [data-trip-version] + .trip-tools + .day-selector + .trip-view-toggle + .itinerary { width: calc(100% - min(44%,560px)); min-width: 0; }.trip-map-panel { margin-top: -40px; } }
@media (max-width: 640px) { .trip-header { padding: 25px 20px; }.trip-header .bar, .trip-header { align-items: flex-start; }.trip-header h1 { font-size: 2rem; }.trip-header > div:last-child { display: flex; width: 100%; }.trip-header .button { flex: 1 1 auto; }.day-selector { margin-top: 16px; }.day-selector button { flex-basis: 78px; min-height: 57px; }.activity-slot { padding-left: 56px; }.activity-slot h3 { width: 43px; font-size: 10px; }.timeline-day { padding: 18px 16px; }.timeline-day-head { gap: 10px; }.timeline-day-index { min-width: 52px; }.timeline-day details { margin-left: 56px; }.activity-entry { padding: 12px; }.drag-handle { display: none; }.trip-map-panel { margin-top: 18px; }.trip-map-panel #tmap { min-height: 340px; height: 58vh !important; }.timeline-day form { max-width: 100%; } }
@media (max-width: 640px) { .share-hero { display: block; }.share-cover { min-height: 185px; max-height: 240px; }.share-hero-copy { padding: 25px 22px; }.share-day { padding: 17px; }.share-activity { grid-template-columns: 55px 1fr; padding-left: 12px; } }

/* Daily route-first trip detail */
.trip-detail { max-width: 1440px; margin: 0 auto; }.trip-detail-header { display:flex; align-items:center; justify-content:space-between; gap:20px; overflow:visible; z-index:6; }.trip-primary-actions,.trip-secondary { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }.trip-more { position:relative; }.trip-more summary { list-style:none; }.trip-more summary::-webkit-details-marker { display:none; }.trip-more-menu { position:absolute; right:0; z-index:5; display:grid; min-width:170px; padding:8px; border:1px solid var(--trypify-glass-border); border-radius:14px; background:rgba(255,255,255,.96); box-shadow:var(--trypify-shadow-md); }.trip-more-menu a,.trip-more-danger { display:block; width:100%; padding:9px 10px; border:0; border-radius:9px; background:transparent; color:var(--trypify-text-secondary); font-size:13px; text-align:left; }.trip-more-menu a:hover { background:var(--trypify-bg-secondary); color:var(--trypify-primary-dark); }.trip-more-danger { color:#b91c1c; }.trip-more-danger:hover { background:#fef2f2; color:#991b1b; transform:none; }.trip-secondary { margin:14px 0; padding:5px; border-radius:14px; background:rgba(255,255,255,.42); }.trip-secondary a { padding:7px 10px; border-radius:9px; color:var(--trypify-text-secondary); font-size:13px; font-weight:700; }.trip-secondary a:hover { background:rgba(255,255,255,.86); color:var(--trypify-primary-dark); }
.mobile-itinerary-tabs { display:none; }.trip-route-layout { display:grid; grid-template-columns:minmax(0,55%) minmax(360px,45%); gap:24px; align-items:start; }.day-route-panel { display:none; padding:clamp(18px,3vw,28px); border:1px solid var(--trypify-glass-border); border-radius:var(--trypify-radius-lg); background:var(--trypify-glass-bg); box-shadow:var(--trypify-shadow-sm); }.day-route-panel.is-active { display:block; }.day-route-heading,.map-panel-head,.timeline-card-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }.day-route-heading > div > span,.day-route-heading h2 { margin:0; }.day-route-heading > div > span { color:var(--trypify-text-muted); font-size:12px; font-weight:800; }.day-route-heading h2 { margin-top:3px; font-size:22px; }.day-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:20px 0; }.day-summary > div { min-width:0; padding:11px; border-radius:12px; background:rgba(241,245,249,.68); }.day-summary small,.day-summary strong { display:block; }.day-summary small { color:var(--trypify-text-muted); font-size:10px; font-weight:800; }.day-summary strong { overflow:hidden; color:var(--trypify-text-primary); font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.route-pending { grid-column:1/-1; margin:0; color:#b45309; font-size:13px; }.timeline { margin-top:2px; }.timeline-item { display:grid; grid-template-columns:68px minmax(0,1fr); gap:12px; position:relative; }.timeline-item::before { position:absolute; top:21px; left:63px; width:9px; height:9px; border:2px solid #fff; border-radius:50%; background:var(--trypify-primary); box-shadow:0 0 0 3px rgba(59,130,246,.14); content:""; }.timeline-time { padding-top:16px; color:var(--trypify-primary-dark); font-size:12px; font-weight:800; text-align:right; }.timeline-card { margin:7px 0; padding:14px; border:1px solid rgba(219,234,254,.86); border-radius:14px; background:rgba(255,255,255,.78); }.timeline-card h3,.timeline-card p { margin:0; }.timeline-card h3 { font-size:16px; }.timeline-card p { margin-top:4px; color:var(--trypify-text-secondary); font-size:13px; }.needs-location { color:#b45309!important; }.badge { padding:4px 7px; border-radius:999px; background:rgba(219,234,254,.78); color:var(--trypify-primary-dark); font-size:10px; font-weight:800; white-space:nowrap; }.timeline-card-actions { display:flex; gap:5px; align-items:center; margin-top:11px; }.timeline-card-actions > button { min-width:30px; min-height:30px; padding:4px; border-radius:8px; background:transparent; color:var(--trypify-text-secondary); }.timeline-card-actions summary { color:var(--trypify-text-muted); cursor:pointer; font-size:12px; }.transport-leg { display:grid; grid-template-columns:68px 1fr auto; gap:12px; align-items:center; min-height:38px; padding-left:80px; color:var(--trypify-text-muted); font-size:12px; }.transport-leg strong { color:var(--trypify-text-secondary); }.day-stay { margin-top:19px; padding:14px; border-radius:14px; background:linear-gradient(120deg,rgba(245,243,255,.76),rgba(239,246,255,.72)); }.day-stay h3 { margin:0 0 8px; font-size:14px; }.day-stay article { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }.day-stay span,.day-stay small { color:var(--trypify-text-secondary); font-size:12px; }.day-stay small { width:100%; }.trip-map-panel { position:sticky; top:88px; margin:0; padding:18px; border:1px solid var(--trypify-glass-border); border-radius:var(--trypify-radius-lg); background:var(--trypify-glass-bg); box-shadow:var(--trypify-shadow-sm); }.map-panel-head h2,.map-panel-head p { margin:0; }.map-panel-head p { margin-top:3px; color:var(--trypify-text-muted); font-size:12px; }.trip-map-panel #google-map { height:min(70vh,650px); min-height:440px; margin-top:14px; overflow:hidden; border-radius:14px; background:var(--trypify-bg-secondary); }.activity-drawer[hidden] { display:none; }.activity-drawer { position:fixed; inset:0; z-index:20; }.drawer-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.3); }.activity-drawer form { position:absolute; top:12px; right:12px; bottom:12px; display:grid; align-content:start; gap:12px; width:min(420px,calc(100vw - 24px)); padding:22px; overflow:auto; border:1px solid rgba(255,255,255,.85); border-radius:20px; background:rgba(255,255,255,.94); box-shadow:0 20px 60px rgba(15,23,42,.2); }.activity-drawer header { display:flex; justify-content:space-between; align-items:center; }.activity-drawer header h2 { margin:0; }.activity-drawer header button { min-width:42px; min-height:42px; padding:0; background:transparent; color:var(--trypify-text-secondary); font-size:28px; }.suggestions { display:grid; gap:4px; margin-top:5px; }.suggestions button { padding:8px; background:var(--trypify-bg-secondary); color:var(--trypify-text-secondary); font-size:12px; text-align:left; }
.activity-time-arrangement { min-width:0; margin:0; padding:0; border:0; }.activity-time-arrangement legend { margin-bottom:7px; color:var(--trypify-text-secondary); font-size:13px; font-weight:720; }.activity-time-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.activity-time-options label { display:flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:8px; border:1px solid var(--trypify-line); border-radius:11px; background:rgba(255,255,255,.6); color:var(--trypify-text-secondary); font-size:12px; font-weight:700; white-space:nowrap; }.activity-time-options label:has(input:checked) { border-color:rgba(59,130,246,.5); background:rgba(219,234,254,.68); color:var(--trypify-primary-dark); }.activity-time-options input { flex:0 0 auto; width:15px; min-height:15px; margin:0; }[data-activity-time-specific][hidden],[data-activity-time-slot][hidden] { display:none; }
@media (max-width: 900px) { .trip-route-layout { display:block; }.trip-map-panel { position:relative; top:auto; margin-top:16px; }.mobile-itinerary-tabs { display:flex; gap:8px; margin:0 0 12px; }.mobile-itinerary-tabs button { flex:1; min-height:44px; padding:8px; border-radius:12px; background:rgba(255,255,255,.62); color:var(--trypify-text-secondary); }.mobile-itinerary-tabs button.is-active { background:linear-gradient(135deg,var(--trypify-primary),var(--trypify-accent)); color:#fff; }.trip-map-panel { display:none; }.trip-map-panel.mobile-visible { display:block; }.trip-day-column.mobile-hidden { display:none; } }
@media (max-width: 640px) { .trip-detail-header { display:block; }.trip-primary-actions { margin-top:16px; }.trip-primary-actions .button { min-height:44px; }.trip-secondary { overflow:auto; flex-wrap:nowrap; }.trip-secondary a { white-space:nowrap; }.day-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.timeline-item { grid-template-columns:55px minmax(0,1fr); gap:9px; }.timeline-item::before { left:50px; }.timeline-time { font-size:11px; }.transport-leg { grid-template-columns:1fr auto; padding-left:64px; }.transport-leg span { display:none; }.trip-map-panel #google-map { height:58vh; min-height:310px; }.activity-drawer form { top:auto; right:0; bottom:0; left:0; width:100%; max-height:calc(100vh - env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; padding-bottom:calc(22px + env(safe-area-inset-bottom)); }.timeline-card-head { gap:8px; }.badge { max-width:90px; overflow:hidden; text-overflow:ellipsis; }.day-route-panel { padding:17px 14px; } }
.trip-content-switch { display:inline-flex; gap:4px; margin:4px 0 18px; padding:4px; border-radius:13px; background:rgba(255,255,255,.56); }.trip-content-switch button { min-height:38px; padding:7px 13px; border-radius:10px; background:transparent; color:var(--trypify-text-secondary); font-size:13px; font-weight:750; }.trip-content-switch button.is-active { background:#fff; box-shadow:0 3px 10px rgba(15,23,42,.08); color:var(--trypify-primary-dark); }.trip-overview { padding:clamp(18px,3vw,28px); border:1px solid var(--trypify-glass-border); border-radius:var(--trypify-radius-lg); background:var(--trypify-glass-bg); box-shadow:var(--trypify-shadow-sm); }.overview-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; }.overview-heading h2 { margin:3px 0 0; font-size:22px; }.overview-metrics { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }.overview-metrics span { padding:6px 9px; border-radius:999px; background:rgba(219,234,254,.72); color:var(--trypify-primary-dark); font-size:11px; font-weight:800; }.overview-day-grid { display:grid; grid-auto-rows:282px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }.overview-day-card { display:flex; flex-direction:column; min-width:0; height:282px; overflow:hidden; padding:15px; border:1px solid rgba(219,234,254,.8); border-radius:14px; background:rgba(255,255,255,.75); }.overview-day-card header,.overview-day-card li { display:flex; justify-content:space-between; gap:8px; min-width:0; }.overview-day-card header span { color:var(--trypify-primary-dark); font-size:11px; font-weight:850; letter-spacing:.05em; }.overview-day-card header small { flex:0 0 auto; color:var(--trypify-text-muted); font-size:11px; }.overview-day-card h3 { display:-webkit-box; max-height:40px; margin:8px 0 0; overflow:hidden; color:var(--trypify-text-primary); font-size:15px; line-height:20px; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.overview-day-note { display:-webkit-box; min-height:0; max-height:32px; margin:5px 0 7px; overflow:hidden; color:var(--trypify-text-secondary); font-size:11px; line-height:16px; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.overview-day-card ol { display:grid; gap:7px; min-width:0; margin:8px 0 0; padding:0; overflow:hidden; list-style:none; }.overview-day-card li time { flex:0 0 auto; color:var(--trypify-text-muted); font-size:11px; font-weight:800; }.overview-day-card li div { flex:1 1 0; min-width:0; }.overview-day-card li b,.overview-day-card li small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.overview-day-card li b { font-size:12px; }.overview-day-card li small { margin-top:2px; color:var(--trypify-text-muted); font-size:11px; }.overview-day-card > p.muted { margin:8px 0; font-size:12px; }.overview-day-card footer { display:flex; flex-wrap:wrap; gap:6px; min-width:0; margin-top:auto; padding-top:10px; color:var(--trypify-text-secondary); font-size:11px; }.overview-day-card footer span { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px) { .overview-heading { display:block; }.overview-metrics { justify-content:flex-start; margin-top:10px; }.overview-day-grid { grid-template-columns:1fr; }.trip-content-switch { display:flex; width:100%; }.trip-content-switch button { flex:1; min-height:44px; } }

.day-route-heading > div { min-width:0; }.day-route-heading h2 { overflow-wrap:anywhere; }.day-route-note { margin:14px 0; color:var(--trypify-text-secondary); font-size:13px; line-height:1.7; white-space:pre-line; overflow-wrap:anywhere; }