.trip-planner-page { max-width: 70.5rem; margin: 0 auto; padding: 1.5rem; background: #ffffff8e; }

.trip-planner-page h1 { font-size: 1.8rem; margin: 0 0 1.3rem; color: #333; }

/* Hidden capture-map numbered marker (print only) */
.trip-num-marker .trip-num-dot {
	width: 1.65rem; height: 1.65rem;
	line-height: 1.5rem;
	text-align: center;
	background: #4a7c3f;
	color: #fff;
	font-weight: 700;
	font-size: 0.75rem;
	font-family: 'Roboto', Arial, sans-serif;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 5px rgba(0,0,0,0.45);
	display: block;
}

/* Trip header - editable title + description */
.trip-header { background: none; border: none; padding: 0; margin-bottom: 1.3rem; }
.trip-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.trip-title { margin: 0; font-size: 1.4rem; color: #2c2c2c; font-weight: 600; flex: 1; }
.trip-edit-btn { font-size: 0.85rem; color: #4a7c3f; text-decoration: none; cursor: pointer; }
.trip-edit-btn:hover { text-decoration: underline; }
.trip-description { margin-top: 0.5rem; color: #555; font-size: 0.9rem; line-height: 1.5; }
.trip-description .placeholder { color: #999; font-style: italic; }

/* Login callout */
.trip-login-callout { background: #fff8e1; border: 1px solid #ffe082; padding: 0.75rem 1rem; margin-bottom: 1.3rem; font-size: 0.9rem; }
.trip-login-callout p { margin: 0 0 0.5rem; color: #866300; }
.trip-login-callout .btn-green { margin:0; }

/* Toolbar */
.trip-toolbar { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1.3rem; align-items: center; }
.trip-toolbar .btn-grey, .trip-toolbar .btn-green { padding: 0.5rem 1rem; font-size: 0.9rem; }
.trip-toolbar-sep { width: 1px; height: 1.65rem; background: #d0d0c4; align-self: center; }

/* Main layout - list left, map right */
.trip-main { display: flex; gap: 1.3rem; }
.trip-main.trip-main-compact { align-items: flex-start; }
.trip-main.trip-main-empty { display: block; }
.trip-main.trip-main-empty .trip-list-wrap { flex: none; width: 100%; max-width: 836px; min-width: 0; margin: 0 auto; }

.trip-list-wrap { flex: 1 1 50%; min-width: 19.2rem; }

.trip-empty { background: none; padding: 0; text-align: left; color: inherit; }
.trip-empty .hint { margin-top: 0.5rem; }
.trip-empty-guide { max-width: 100%; height: auto; margin-top: 0.9rem; }

.trip-list { list-style: none; margin: 0; padding: 0; }

.trip-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem; background: #fff; border: 1px solid #e5e5dc;  margin-bottom: 0.5rem; transition: box-shadow 0.15s; }
.trip-list .trip-item:last-child { margin-bottom: 0; }
.trip-item.dragging { opacity: 0.35; }
.trip-item.drag-over-before { box-shadow: 0 -2px 0 0 #4a7c3f, 0 -6px 10px -4px rgba(74,124,63,0.4); }
.trip-item.drag-over-after  { box-shadow: 0 2px 0 0 #4a7c3f, 0 6px 10px -4px rgba(74,124,63,0.4); }

.trip-item .drag-handle { color: #bbb; cursor: grab; font-size: 1rem; padding: 0.25rem; user-select: none; }
.trip-item .drag-handle:hover { color: #4a7c3f; }
.trip-item .item-num { width: 1.4rem; text-align: center; color: #999; font-weight: 600; font-size: 0.9rem; }
.trip-item .item-thumb { width: 3.8rem; height: 2.9rem; background-size: cover; background-position: center; background-color: #eee;  flex-shrink: 0; }
.trip-item .item-thumb.no-thumb { background: linear-gradient(135deg, #e8e8e8, #d4d4d4); }
.trip-item .item-info { flex: 1; min-width: 0; }
.trip-item .item-title { display: block; color: #2c2c2c; font-weight: 700; text-decoration: none; font-size: 0.9rem; }
.trip-item .item-title:hover { color: #4a7c3f; }
.trip-item .item-meta { font-size: 0.75rem; color: #888; }
.trip-item .item-remove { color: #c44; font-size: 1.4rem; text-decoration: none; padding: 0 0.4rem; cursor: pointer; line-height: 1; }
.trip-item .item-remove:hover { color: #a33; }

/* Per-item excerpt + actions (hidden in compact mode, shown in rich mode for excerpt) */
.trip-item .item-coords { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: #888; }
.trip-item .item-short { display: none; margin: 0.5rem 0 0; font-size: 0.85rem; color: #555; line-height: 1.45; word-wrap: break-word; overflow-wrap: break-word; }
.trip-item .item-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.trip-item .item-action { display: inline-block; font-size: 0.75rem; padding: 0.25rem 0.65rem; border: 1px solid #cdd2c5; color: #4a7c3f; text-decoration: none; transition: background 0.15s; }
.trip-item .item-action:hover { background: #eef3ea; }

/* Rich mode: few items — stretch items to fill column, show excerpt */
.trip-list-wrap.trip-list-few #tripList { display: flex; flex-direction: column; height: 100%; }
.trip-list-wrap.trip-list-few .trip-item { flex: 1 1 0; padding: 0.9rem; }
.trip-list-wrap.trip-list-few .trip-item .item-short { display: block; }
.trip-list-wrap.trip-list-few .trip-item .item-thumb { width: 5.1rem; height: 3.8rem; }

/* Map */
.trip-map-wrap { flex: 1 1 50%; min-width: 19.2rem; position: sticky; top: 0.65rem; }
#tripMap { width: 100%; height: 33.3rem; border: 1px solid #ddd; overflow: hidden; }
.trip-main:not(.trip-main-compact) #tripMap { height: 100%; min-height: 33.3rem; }

/* Flyout editor overlay */
.trip-editor-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.trip-editor { background: #fff; padding: 1.5rem; width: 92%; max-width: 30.8rem; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.trip-editor h3 { margin: 0 0 1rem; font-size: 1.15rem; color: #333; }
.trip-field { margin-bottom: 0.9rem; }
.trip-field label { display: block; font-size: 0.85rem; color: #666; margin-bottom: 0.25rem; }
.trip-field .text, .trip-field textarea { width: 100%; padding: 0.5rem 0.65rem; border: 1px solid #ddd;  font-size: 0.9rem; font-family: inherit; }
.trip-field textarea { resize: vertical; }
.trip-editor-actions { display: flex; gap: 0.65rem; justify-content: flex-end; margin-top: 0.65rem; }
.trip-editor-actions a { font-size: 0.9rem; padding: 0.5rem 1.15rem; }

/* Responsive */
@media (max-width: 880px) {
	.trip-main { flex-direction: column; }
	.trip-map-wrap { position: static; }
	#tripMap { height: 24.4rem; }
}

/* Print styles */
@media print {
	.trip-header { background: none; border: none; padding: 0; }
	.trip-title { font-size: 1.5rem; }
	.trip-description { font-size: 0.85rem; }
	.trip-login-callout, .trip-toolbar, .trip-map-wrap, .trip-edit-btn, .drag-handle, .item-remove { display: none !important; }
	.trip-list-wrap { width: 100%; flex: none; }
	.trip-item { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; padding: 0.5rem; margin-bottom: 0.4rem; }
	.no-print { display: none !important; }
	.trip-planner-page { padding: 0; max-width: 100%; }
	.trip-print-overlay, .trip-print-frame { display: none !important; }
}

/* Print overlay */
.trip-print-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 10000; transition: opacity .3s; }
.trip-print-overlay[hidden] { display: none; }
.trip-print-overlay.fading { opacity: 0; }
.trip-print-modal { background: #fff; padding: 2rem 3.1rem;  display: flex; flex-direction: column; align-items: center; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.trip-print-spin { width: 2.3rem; height: 2.3rem; border: 0.25rem solid #e0e0d6; border-top-color: #4a7c3f; border-radius: 50%; animation: trip-spin 0.9s linear infinite; }
@keyframes trip-spin { to { transform: rotate(360deg); } }
.trip-print-text { margin-top: 0.9rem; font-size: 1rem; color: #444; font-weight: 500; }
.trip-print-frame { position: fixed; left: -10000px; top: 0; width: 52.5rem; height: 57.7rem; border: 0; }