/* ============================================================
   Muval — moving house guide (multi-page set)
   Production home: /media/muval/css/moving-house-guide.css
   ============================================================ */

:root {
	--mv-orange: #FF5C00;
	--mv-orange-dark: #e65300;
	--mv-orange-tint: #FFF6F0;
	--mv-ink: #1a1a1a;
	--mv-muted: #6b7280;
	--mv-line: #ececec;
	/* one radius policy: every rounded corner in the guide renders at 8px */
	--mv-radius: 8px;
	/* Sticky chrome heights, published by guide.js at runtime (the production
	   site header is py-2 on phones and py-lg-3 on desktop, so its height
	   changes across breakpoints): --mv-header-h is #main-navbar alone,
	   --mv-stack-h is header + guide strip. The values below are only
	   fallbacks for the moment before guide.js runs. */
	--mv-header-h: 0px;
	--mv-stack-h: 110px;
}

.eyebrow {
	font-size: .72rem;
	font-weight: 700;	text-transform: uppercase;
	color: var(--mv-orange-dark);
}

.section { padding: 4rem 0; scroll-margin-top: calc(var(--mv-stack-h, 110px) + 16px); }
.section-tint { background: var(--mv-orange-tint); }
.section-lede { max-width: 46rem; color: var(--mv-muted); }

/* ---------- guide nav: slim secondary strip under the site header ----------
   The production #main-navbar (sticky-top, z-index 1020) sits above; the strip
   pins directly beneath it at the runtime-measured header height and stays
   below it in the stacking order so header dropdowns overlay the strip. */
.guide-nav {
	position: sticky;
	top: var(--mv-header-h, 0px);
	z-index: 1010;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--mv-line);
}

.guide-nav .nav-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 44px;
}

.guide-nav .nav-links {
	display: flex;
	gap: .25rem;
	overflow-x: auto;
	scrollbar-width: none;
	flex: 1;
}

.guide-nav .nav-links::-webkit-scrollbar { display: none; }

.guide-nav .nav-links a {
	font-size: .84rem;
	font-weight: 600;
	color: var(--mv-muted);
	text-decoration: none;
	padding: .4rem .65rem;
	border-radius: var(--mv-radius);
	white-space: nowrap;
}

.guide-nav .nav-links a[aria-current="page"],
.guide-nav .nav-links a:hover { color: var(--mv-orange-dark); background: var(--mv-orange-tint); }

.nav-progress {
	display: none;
	font-size: .75rem;
	font-weight: 700;
	color: var(--mv-orange-dark);
	background: var(--mv-orange-tint);
	border-radius: var(--mv-radius);
	padding: .35rem .7rem;
	white-space: nowrap;
	text-decoration: none;
}

/* only shown once there is stored progress, and only on md+ screens */
@media (min-width: 768px) {
	.nav-progress.show { display: inline-block; }
}

/* ---------- breadcrumb ---------- */
.crumbs { font-size: .8rem; color: var(--mv-muted); padding-top: 1.5rem; }
.crumbs a { color: var(--mv-muted); text-decoration: none; }
.crumbs a:hover { color: var(--mv-orange-dark); }
.crumbs .sep { margin: 0 .4rem; }

/* ---------- hero / page header ---------- */
.hero { padding: 4rem 0 3.25rem; }

.hero h1 {
	font-size: clamp(2.1rem, 4.6vw, 3.3rem);
	font-weight: 800;}

.page-head { padding: 1.75rem 0 2.5rem; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; }

.hero .lead-copy, .page-head .lead-copy { font-size: 1.08rem; color: var(--mv-muted); max-width: 42rem; }

.trust-chips { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .85rem; color: var(--mv-muted); }
.trust-chips strong { color: var(--mv-ink); }

/* ---------- hero lead form (mirrors the blog sidebar card) ---------- */
/* shadow comes from the markup's .shadow-sm utility */
.leadForm {
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-radius);
}

.leadForm .form-select-lg { border-radius: var(--mv-radius); }

.leadForm .get-prices .btn { border-radius: var(--mv-radius); padding: .85rem 1rem; font-size: 1.05rem; }

.leadForm .lead-form-note { font-size: .78rem; color: var(--mv-muted); margin-top: 1rem; }

/* on phones, tighten the copy above the form so the booking CTA is reachable */
@media (max-width: 767.98px) {
	.hero { padding: 2.25rem 0 2.5rem; }
	.hero .cta-row .btn-lg { padding: .55rem 1rem; font-size: .98rem; }
	.hero .trust-chips { margin-top: .85rem !important; }
}

/* ---------- landing tool tiles ---------- */
.tool-tiles .card {
	background: #f6f6f5;
	border: 1px solid #ececeb;
	border-radius: var(--mv-radius);
	height: 100%;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	text-decoration: none;
	color: inherit;
}

.tool-tiles .card:hover {
	background: #fff;
	transform: translateY(-3px);
	/* one notch above shadow-sm so the lift stays visible but proportionate */
	box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .1);
}

.tool-tiles .tile-kicker {
	font-size: .72rem;
	font-weight: 700;	text-transform: uppercase;
	color: var(--mv-orange-dark);
}

.tool-tiles .tile-go { font-weight: 700; color: var(--mv-orange-dark); font-size: .88rem; }

/* ---------- tool / setup cards ---------- */
/* card shadows sit on Bootstrap's shadow-sm scale guide-wide; the hairline
   border keeps the card edge readable on white sections */
.tool-card {
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-radius);
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.mode-pills { display: inline-flex; background: #f3f4f6; border-radius: var(--mv-radius); padding: .25rem; }

.mode-pills button {
	border: 0;
	background: transparent;
	border-radius: var(--mv-radius);
	font-size: .88rem;
	font-weight: 600;
	color: var(--mv-muted);
	padding: .45rem 1.1rem;
}

.mode-pills button.active { background: var(--mv-ink); color: #fff; }

.est-label {
	font-size: .72rem;
	font-weight: 700;	text-transform: uppercase;
	color: var(--mv-muted);
}

.est-select, .planner-setup .form-control, .planner-setup .form-select {
	border: 0;
	border-bottom: 2px solid var(--mv-orange);
	border-radius: 0;
	box-shadow: none !important;
	font-weight: 600;
	padding-left: 0;
}

.est-result { background: #faf9f7; border-radius: var(--mv-radius); }

.est-price {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--mv-orange);
}

.est-stat { border-left: 2px solid var(--mv-line); padding-left: 1rem; }

.est-extras {
	border-top: 1px solid var(--mv-line);
	margin-top: 1.25rem;
	padding-top: 1rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem;
}

.est-extras .x-val { font-weight: 700; }
.est-extras .x-note { font-size: .8rem; color: var(--mv-muted); }

@media (max-width: 767.98px) {
	.est-stat { border-left: 0; border-top: 1px solid var(--mv-line); padding: 1rem 0 0; }
}

.data-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }

.data-strip .fact {
	background: #fff;
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-radius);
	padding: 1rem 1.25rem;
	font-size: .9rem;
}

.data-strip .fact strong { display: block; font-size: 1.05rem; }

/* ---------- content blocks ---------- */
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; }

.step-grid .step {
	background: #fff;
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-radius);
	padding: 1.15rem 1.25rem;
}

.step-grid .step .n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: var(--mv-radius);
	background: var(--mv-orange);
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	margin-bottom: .5rem;
}

.step-grid .step h3 { font-size: 1rem; margin-bottom: .25rem; }
.step-grid .step p { font-size: .875rem; color: var(--mv-muted); margin: 0; }

/* Five-card variant: auto-fit strands the fifth card on a row of its own, so pin the
   column count per breakpoint and let the last card fill the leftover track. Wide
   screens fit all five across, so no span is needed there. */
@media (min-width: 576px) {
	.step-grid.step-grid-5 { grid-template-columns: repeat(2, 1fr); }
	.step-grid.step-grid-5 .step:last-child { grid-column: span 2; }
}

@media (min-width: 992px) {
	.step-grid.step-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1400px) {
	.step-grid.step-grid-5 { grid-template-columns: repeat(5, 1fr); }
	.step-grid.step-grid-5 .step:last-child { grid-column: auto; }
}

details.guide-fold {
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-radius);
	background: #fff;
	margin-bottom: .75rem;
	overflow: hidden;
}

details.guide-fold summary {
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

details.guide-fold summary::-webkit-details-marker { display: none; }

details.guide-fold summary::after {
	content: "+";
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--mv-orange);
	flex: 0 0 auto;
	line-height: 1;
}

details.guide-fold[open] summary::after { content: "\2212"; }

details.guide-fold .fold-body { padding: 0 1.25rem 1.25rem; color: #374151; font-size: .93rem; }
details.guide-fold .fold-body p:last-child, details.guide-fold .fold-body ul:last-child { margin-bottom: 0; }

/* Collapsed folds are only a row tall, so pair them up on wide screens. Grid (not
   multi-column) keeps each fold in a fixed cell, so opening one never reshuffles
   the others between columns. */
@media (min-width: 992px) {
	.fold-columns { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; align-items: start; }
}

.pull-stat {
	border-left: 4px solid var(--mv-orange);
	background: var(--mv-orange-tint);
	border-radius: 0 var(--mv-radius) var(--mv-radius) 0;
	padding: 1rem 1.25rem;
	font-size: .95rem;
}

.guide-table { font-size: .9rem; }
.guide-table th { white-space: nowrap; }

/* keep reading link lists */
.keep-reading { border-top: 1px solid var(--mv-line); margin-top: 2.5rem; padding-top: 1.5rem; }
.keep-reading h2, .keep-reading h3 { font-size: 1.05rem; }
.keep-reading ul { columns: 2; column-gap: 2.5rem; font-size: .9rem; padding-left: 1.1rem; margin: 0; }
.keep-reading li { margin-bottom: .45rem; break-inside: avoid; }

@media (max-width: 767.98px) {
	.keep-reading ul { columns: 1; }
}

/* ---------- video tiles ---------- */
.video-tile {
	position: relative;
	border-radius: var(--mv-radius);
	overflow: hidden;
	background: #000;
	aspect-ratio: 16 / 9;
	cursor: pointer;
	border: 0;
	padding: 0;
	width: 100%;
	display: block;
}

.video-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: opacity .15s ease, transform .2s ease; }
.video-tile:hover img { opacity: 1; transform: scale(1.02); }

.video-tile .play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: var(--mv-radius);
	background: var(--mv-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
}

.video-tile .play::after {
	content: "";
	display: block;
	margin-left: .2rem;
	border-style: solid;
	border-width: .55rem 0 .55rem .95rem;
	border-color: transparent transparent transparent #fff;
}

.video-caption { font-size: .85rem; color: var(--mv-muted); margin-top: .5rem; }

/* Shared video lightbox (built by guide.js): nothing but the 16:9 frame —
   black edge-to-edge, no header/footer/padding, so no white shows inside the
   modal. The close button floats over the top-right corner of the video. */
.video-modal .modal-content {
	background: #000;
	border: 0;
	padding: 0;
	border-radius: var(--mv-radius);
	overflow: hidden;
}

.video-modal .modal-content iframe { border: 0; }

.video-modal .btn-close {
	position: absolute;
	top: .65rem;
	right: .65rem;
	z-index: 5;
	padding: .55rem;
	background-color: rgba(0, 0, 0, .55);
	border-radius: var(--mv-radius);
	opacity: 1;
}

.video-modal .btn-close:hover { background-color: rgba(0, 0, 0, .8); }

.video-card h3 { font-size: 1rem; margin: .75rem 0 .25rem; }
.video-card p { font-size: .875rem; color: var(--mv-muted); }
.video-card .vc-link { font-size: .85rem; font-weight: 600; }

/* ---------- planner ---------- */
.planner-setup {
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-radius);
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.planner-flags { display: flex; flex-wrap: wrap; gap: .5rem; }

.planner-flags .flag {
	border: 1.5px solid var(--mv-line);
	border-radius: var(--mv-radius);
	padding: .4rem .95rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--mv-muted);
	cursor: pointer;
	user-select: none;
	background: #fff;
}

.planner-flags .flag input { display: none; }
.planner-flags .flag.on { border-color: var(--mv-orange); color: var(--mv-orange-dark); background: var(--mv-orange-tint); }

.days-chip {
	display: none;
	background: var(--mv-ink);
	color: #fff;
	border-radius: var(--mv-radius);
	font-size: .85rem;
	font-weight: 700;
	padding: .45rem 1rem;
}

.days-chip.show { display: inline-block; }

/* watched by the script to flag the pinned state; the negative margin keeps it out
   of the layout */
.progress-sentinel { height: 1px; margin-bottom: -1px; }

/* The progress bar sits between the setup card and the timeline and pins under
   the sticky chrome (site header + guide strip) while you work down the list.
   Sticky (not fixed) keeps it in flow, so nothing reflows at the moment it pins;
   the .is-stuck class only adds the lift shadow and the days-to-go badge,
   neither of which changes the bar's height. */
.progress-wrap {
	position: sticky;
	top: var(--mv-stack-h, 110px);
	z-index: 1000;
	margin-top: 1.75rem;
	padding: .7rem 0 .8rem;
	background: #fff;
	/* held transparent so pinning only recolours it — a border that appears on pin
	   would shift the timeline by a pixel */
	border-bottom: 1px solid transparent;
}

.progress-wrap.is-stuck {
	border-bottom-color: var(--mv-line);
	box-shadow: 0 .75rem 1rem -.85rem rgba(26, 26, 26, .45);
}

.progress-days {
	display: none;
	color: var(--mv-orange-dark);
}

.progress-days::before { content: "\00b7"; margin: 0 .4rem; color: var(--mv-muted); }
.progress-wrap.is-stuck .progress-days.show { display: inline; }

.progress.mv { height: .6rem; border-radius: var(--mv-radius); background: #f1f0ee; }
.progress.mv .progress-bar { background: var(--mv-orange); border-radius: var(--mv-radius); }

.timeline { position: relative; margin-top: 2.5rem; }

.phase { position: relative; padding: 0 0 2.25rem 2.1rem; border-left: 2px solid var(--mv-line); margin-left: .6rem; }
.phase:last-child { border-left-color: transparent; padding-bottom: 0; }

.phase-dot {
	position: absolute;
	left: -0.62rem;
	top: .1rem;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: var(--mv-radius);
	background: #fff;
	border: 3px solid #d1d5db;
}

.phase.now .phase-dot { border-color: var(--mv-orange); background: var(--mv-orange); box-shadow: 0 0 0 5px rgba(255, 92, 0, .15); }
.phase.done .phase-dot { border-color: #16a34a; background: #16a34a; }

.phase-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: .85rem; }
.phase-head h3 { font-size: 1.2rem; margin: 0; }

.phase-date { font-size: .85rem; font-weight: 600; color: var(--mv-orange-dark); display: none; }
.phase-date.show { display: inline; }

.phase-count { font-size: .8rem; font-weight: 600; color: var(--mv-muted); margin-left: auto; }

.phase-badge {
	display: none;
	font-size: .72rem;
	font-weight: 700;	text-transform: uppercase;
	border-radius: var(--mv-radius);
	padding: .2rem .65rem;
}

.phase.now .phase-badge.b-now { display: inline-block; background: var(--mv-orange); color: #fff; }
.phase.overdue .phase-badge.b-late { display: inline-block; background: #fef3c7; color: #92400e; }

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

.task {
	display: flex;
	align-items: flex-start;
	gap: .35rem;
	background: #fff;
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-radius);
	padding: .8rem 1rem;
	margin-bottom: .5rem;
}

.task.hidden { display: none; }

.task label { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; flex: 1; margin: 0; }

.task-check {
	appearance: none;
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	border: 2px solid #d1d5db;
	border-radius: var(--mv-radius);
	margin-top: .1rem;
	cursor: pointer;
	position: relative;
	background: #fff;
	transition: background .12s ease, border-color .12s ease;
}

.task-check:checked { background: var(--mv-orange); border-color: var(--mv-orange); }

.task-check:checked::after {
	content: "";
	position: absolute;
	left: .36rem;
	top: .12rem;
	width: .38rem;
	height: .72rem;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.task-label { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.task-detail { display: block; font-size: .83rem; font-weight: 400; color: var(--mv-muted); margin-top: .15rem; }

.task.done .task-label { text-decoration: line-through; text-decoration-thickness: 1.5px; color: #9ca3af; }
.task.done { background: #fbfaf9; }

.task-tag {
	flex: 0 0 auto;
	font-size: .68rem;
	font-weight: 700;	text-transform: uppercase;
	color: var(--mv-orange-dark);
	background: var(--mv-orange-tint);
	border-radius: var(--mv-radius);
	padding: .25rem .6rem;
	margin-top: .15rem;
}

/* ---------- box calculator ---------- */
.box-calc-result { background: #faf9f7; border-radius: var(--mv-radius); }
.box-calc-count { font-size: clamp(1.7rem, 3.5vw, 2.3rem); font-weight: 800; line-height: 1.05; color: var(--mv-orange); }

/* ---------- inventory list ---------- */

/* Totals bar: rests at the end of the tool, pins to the bottom of the screen
   while the picker above is in use (sticky + sentinel, like the checklist bar). */
.inv-summary {
	position: sticky;
	bottom: 0;
	z-index: 1020;
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding: .65rem 0 .75rem;
	margin-top: 1.25rem;
	/* held transparent so pinning only recolours it — a border that appears on pin
	   would shift the content by a pixel */
	border-top: 1px solid transparent;
}

.inv-summary.is-stuck {
	border-top-color: var(--mv-line);
	box-shadow: 0 -.75rem 1rem -.85rem rgba(26, 26, 26, .45);
}

.inv-stats { display: flex; flex-wrap: wrap; gap: .5rem 2.25rem; }

/* the local/interstate toggle lives in the bar — compact so it stays slim */
.inv-summary .mode-pills { padding: .2rem; }
.inv-summary .mode-pills button { padding: .3rem .8rem; font-size: .8rem; }

.inv-stat-value {
	display: block;
	font-size: clamp(1.3rem, 2.6vw, 1.85rem);
	font-weight: 800;
	line-height: 1.15;
	white-space: nowrap;
}

.inv-stat-value.accent { color: var(--mv-orange); }

/* Interstate hides the time stat but its slot stays reserved (visibility, not
   display) so the stats block keeps its width and the mode toggle and actions
   never shift when the move type changes. !important counters Bootstrap's
   [hidden] { display: none !important } reboot rule. */
#invTimeWrap[hidden] { display: block !important; visibility: hidden; }

.inv-actions {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

.inv-undo { font-size: .85rem; color: var(--mv-muted); white-space: nowrap; }

.inv-undo button {
	border: 0;
	background: none;
	padding: 0;
	color: var(--mv-orange-dark);
	font-weight: 700;
	text-decoration: underline;
}

/* room pills: one horizontally scrollable row (scrollbar hidden, like the nav) */
.inv-rooms {
	display: flex;
	flex-wrap: nowrap;
	gap: .5rem;
	margin-bottom: 1.5rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.inv-rooms::-webkit-scrollbar { display: none; }

/* base room + its duplicate/remove control render as one unit */
.inv-room-group { display: inline-flex; flex: 0 0 auto; }

.inv-room {
	border: 1.5px solid var(--mv-line);
	border-radius: var(--mv-radius);
	background: #fff;
	padding: .4rem .95rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--mv-muted);
	white-space: nowrap;
}

.inv-room-group .inv-room:not(:only-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0;
}

.inv-room-ctl {
	border: 1.5px solid var(--mv-line);
	border-left-color: #f3f4f6;
	border-radius: 0 var(--mv-radius) var(--mv-radius) 0;
	background: #fff;
	color: var(--mv-muted);
	font-weight: 700;
	line-height: 1;
	padding: 0 .7rem 0 .5rem;
}

.inv-room:hover, .inv-room-ctl:hover { color: var(--mv-orange-dark); background: var(--mv-orange-tint); }

/* the active highlight wraps the whole pill, duplicate/remove control included */
.inv-room-group.is-active .inv-room,
.inv-room-group.is-active .inv-room-ctl {
	border-color: var(--mv-orange);
	background: var(--mv-orange-tint);
	color: var(--mv-orange-dark);
}

.inv-room-group.is-active .inv-room-ctl { border-left-color: rgba(255, 92, 0, .35); }

.inv-room[draggable="true"] { cursor: grab; }

.inv-count {
	display: inline-block;
	background: var(--mv-ink);
	color: #fff;
	border-radius: var(--mv-radius);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
	padding: .22rem .45rem;
	margin-left: .4rem;
	vertical-align: 1px;
}

/* item picker + selected list */
.inv-search { border-radius: var(--mv-radius); }

.inv-list {
	background: #fff;
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-radius);
	max-height: 29rem;
	overflow-y: auto;
}

/* Two-column picker (lg+): Bootstrap already stretches both columns to the
   row's height, but the selected list would stop at its content. Flexing the
   right column and letting its list fill the leftover space keeps both lists
   finishing on the same line — the right one absorbs the height the left
   column spends on its search bar. flex-basis 0 + min-height 0 stop a long
   selection from growing the row: it scrolls inside the list instead. On the
   stacked mobile layout the list falls back to its natural height. */
@media (min-width: 992px) {
	.inv-col-fill { display: flex; flex-direction: column; }
	.inv-col-fill .inv-list { flex: 1 1 0; min-height: 0; max-height: none; }
}

.inv-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--mv-line);
	background: #fff;
	padding: .6rem 1rem;
	font-size: .9rem;
}

.inv-item:last-child { border-bottom: 0; }
.inv-item:hover { background: var(--mv-orange-tint); }

.inv-item-name { font-weight: 600; flex: 1; }
.inv-item-meta { font-size: .76rem; color: var(--mv-muted); white-space: nowrap; }

.inv-item-add {
	color: var(--mv-orange);
	font-weight: 800;
	font-size: 1.15rem;
	line-height: 1;
}

.inv-sel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .55rem 1rem;
	border-bottom: 1px solid var(--mv-line);
}

.inv-sel:last-child { border-bottom: 0; }

.inv-sel-name { display: block; font-weight: 600; font-size: .9rem; }
.inv-sel-vol { display: block; font-size: .74rem; color: var(--mv-muted); }

.inv-stepper { display: inline-flex; align-items: center; gap: .2rem; flex: 0 0 auto; }

.inv-step {
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-radius);
	background: #fff;
	font-weight: 700;
	line-height: 1;
	color: var(--mv-ink);
}

.inv-step:hover {
	border-color: var(--mv-orange);
	color: var(--mv-orange-dark);
	background: var(--mv-orange-tint);
}

.inv-qty { min-width: 1.7rem; text-align: center; font-weight: 700; font-size: .9rem; }

.inv-group-label {
	position: sticky;
	top: 0;
	font-size: .7rem;
	font-weight: 700;	text-transform: uppercase;
	color: var(--mv-muted);
	background: #faf9f7;
	padding: .45rem 1rem;
	border-bottom: 1px solid var(--mv-line);
}

.inv-empty { padding: 1.1rem 1.25rem; font-size: .88rem; color: var(--mv-muted); }

/* printing the inventory page: keep the totals and the selected list, drop the
   interactive picker (quantities live in each row's volume line) */
@media print {
	.inv-actions, #invSearchWrap, #invItemList, .inv-stepper, .inv-room-ctl { display: none !important; }
	.inv-list { max-height: none; overflow: visible; }
	.inv-summary { position: static; }
}

/* ---------- connect promo ---------- */
.connect-card {
	border: 0;
	border-radius: var(--mv-radius);
	background: var(--mv-ink);
	color: #fff;
}

.connect-card .connect-eyebrow {
	display: inline-block;
	background: var(--mv-orange);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;	text-transform: uppercase;
	border-radius: var(--mv-radius);
	padding: .3rem .75rem;
}

.connect-card .connect-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.connect-card .connect-list li {
	font-size: .78rem;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border-radius: var(--mv-radius);
	padding: .3rem .75rem;
}

/* ---------- faq / cta / footer ---------- */
.faq details.guide-fold summary { font-size: 1rem; }

.cta-band { border-radius: var(--mv-radius); }

.cta-band a:not(.btn) { color: #fff; }

.cta-band .trust-chips { color: rgba(255, 255, 255, .85); }

/* white buttons on the orange band (base .btn-primary theme is orange-on-orange here) */
.cta-band .btn-primary {
	background-color: #fff;
	border-color: #fff;
	color: var(--mv-orange-dark);
}

.cta-band .btn-primary:hover, .cta-band .btn-primary:focus, .cta-band .btn-primary:active {
	background-color: var(--mv-orange-tint) !important;
	border-color: var(--mv-orange-tint) !important;
	color: var(--mv-orange-dark);
}

.guide-footer { font-size: .8rem; color: var(--mv-muted); }

/* ---------- print (checklist page) ---------- */
@media print {
	#main-navbar, .no-print, .guide-nav, .cta-band, .planner-actions, .days-chip, .crumbs,
	.video-tile, .video-caption, .keep-reading, .connect-card { display: none !important; }
	.section { padding: 1rem 0; }
	body { font-size: 11px; }
	.task { border-color: #bbb; break-inside: avoid; padding: .35rem .6rem; margin-bottom: .3rem; }
	.task-check { border-color: #888; }
	.phase { padding-bottom: 1rem; }
	details.guide-fold { display: none; }
	.print-only { display: block !important; }
	a { text-decoration: none; color: inherit; }

	/* The checklist page prints the timeline and nothing else: hide every top-level
	   block and every sibling of the timeline, then walk #plannerTimeline's ancestor
	   chain back into view. Scoped to body.page-checklist so the other four pages
	   keep their existing print output. */
	body.page-checklist > *,
	body.page-checklist > #checklistSection > .container > * { display: none !important; }

	body.page-checklist > #checklistSection,
	body.page-checklist > #checklistSection > .container,
	body.page-checklist > #checklistSection > .container > #plannerTimeline {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		max-width: none !important;
		width: auto !important;
	}

	.print-head { margin-bottom: .9rem; }
	.print-head h2 { font-size: 13px; }
	.print-head p { margin-bottom: 0; }
	.task-detail { color: #444; }
	.phase-head { break-inside: avoid; break-after: avoid; page-break-after: avoid; }
	.task-list { break-before: avoid; page-break-before: avoid; }
	.task { page-break-inside: avoid; }
}

.print-only { display: none; }