/* MWAP Walk — Multi-step form styling
   Step navigation, progress indicator, step dots, conditional field visibility. */

/* ---- Theme override ----
   hello-elementor's reset.css paints a pink (#c36 / #d6336c) hover on EVERY button via:
     [type=button]:hover, [type=submit]:hover, button:hover { background-color:#c36 }
   The strongest of those selectors is [type=button]:hover at specificity (0,2,0). Our
   buttons (Back/Next/step-dots) are plain <button type="button">, so that pink leaks in.

   Neutralise it here, matching the theme's own selectors and scoping each under .mwap-form
   so specificity is (0,2,1)+ — strictly higher than (0,2,0) — and the brand rules further
   below (also scoped, see .mwap-form .mwap-form__… ) keep the correct colours.
   Scoped to .mwap-form so real Elementor widget buttons elsewhere are untouched. */
.mwap-form button:hover,
.mwap-form button:focus,
.mwap-form [type="button"]:hover,
.mwap-form [type="button"]:focus,
.mwap-form [type="submit"]:hover,
.mwap-form [type="submit"]:focus {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
}

/* ---- Step indicator ---- */
.mwap-form__step-indicator {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--mwap-accent, #199bd7);
	margin-bottom: 20px;
	text-align: center;
}

/* ---- Step dots (clickable jump-to-step nav) ---- */
.mwap-form__step-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 4px 0 8px;
}
/* Numbered circle for each step */
.mwap-form__step-dot {
	appearance: none;
	-webkit-appearance: none;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	padding: 0;
	border: 2px solid #cfd8df;
	border-radius: 50%;
	background: #fff;
	color: #6b7680;
	font: 700 14px/1 'GT Walsheim Pro', -apple-system, sans-serif;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
/* Connector line in the gap before each dot (except the first) */
.mwap-form__step-dot + .mwap-form__step-dot {
	margin-left: 40px;
	position: relative;
}
.mwap-form__step-dot + .mwap-form__step-dot::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;        /* start at this dot's left edge */
	width: 40px;        /* span the 40px gap to the previous dot */
	height: 2px;
	transform: translateY(-50%);
	background: #cfd8df;
}
/* Completed steps — coral fill, line leading into them coral too */
.mwap-form__step-dot.is-complete {
	background: var(--mwap-pin-coral, #ef6351);
	border-color: var(--mwap-pin-coral, #ef6351);
	color: #fff;
}
.mwap-form__step-dot.is-complete::before,
.mwap-form__step-dot.is-active::before {
	background: var(--mwap-pin-coral, #ef6351);
}
/* Current step — blue ring */
.mwap-form__step-dot.is-active {
	border-color: var(--mwap-accent, #199bd7);
	color: var(--mwap-accent, #199bd7);
	box-shadow: 0 0 0 3px rgba(25, 155, 215, 0.15);
}
/* Scoped under .mwap-form so these (0,2,1) beat the theme's [type=button]:hover/:focus
   (0,2,0, white-on-pink #c36) AND our own theme-reset block above. We cover :hover, :focus
   and :focus-visible so the dot never picks up the theme's pink fill / white number. */
.mwap-form .mwap-form__step-dot:hover,
.mwap-form .mwap-form__step-dot:focus {
	background: #fff;
	border-color: var(--mwap-accent, #199bd7);
	color: var(--mwap-accent, #199bd7);
	transform: translateY(-1px);
}
.mwap-form .mwap-form__step-dot.is-active:hover,
.mwap-form .mwap-form__step-dot.is-active:focus {
	background: #fff;
	color: var(--mwap-accent, #199bd7);
}
.mwap-form .mwap-form__step-dot.is-complete:hover,
.mwap-form .mwap-form__step-dot.is-complete:focus {
	background: var(--mwap-pin-coral, #ef6351);
	color: #fff;
	border-color: var(--mwap-pin-coral, #ef6351);
}
.mwap-form .mwap-form__step-dot:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(25, 155, 215, 0.35);
}

/* ---- Two fields on one row (e.g. Walk date + Start time) ---- */
.mwap-form__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}
/* The row owns the bottom spacing; its fields shouldn't double it. */
.mwap-form__field-row .mwap-form__field {
	margin-bottom: 0;
	min-width: 0;            /* let inputs shrink instead of overflowing the column */
}
@media (max-width: 600px) {
	.mwap-form__field-row { grid-template-columns: 1fr; gap: 0; }
	.mwap-form__field-row .mwap-form__field { margin-bottom: 20px; }
}

/* ---- Native date field with AU-formatted overlay ----
   The native <input type="date"> stays the real control (calendar, validation, ISO value).
   We make ITS value text transparent and paint a formatted "19 June 2026" span over it.
   The calendar-picker icon stays visible & clickable; the overlay has pointer-events:none
   so clicks pass straight through to the input. */
.mwap-form__date {
	position: relative;
}
/* Hide the native numeric value text but keep the field box + calendar icon. */
.mwap-form__date-native {
	color: transparent;
	cursor: pointer;          /* whole field reads as clickable (JS opens the picker) */
}
/* Keep the picker indicator (the little calendar icon) visible and dark. */
.mwap-form__date-native::-webkit-datetime-edit { color: transparent; }
.mwap-form__date-native::-webkit-calendar-picker-indicator {
	opacity: 1;
	cursor: pointer;
}
/* Some browsers show focused-field text — keep it transparent even when focused. */
.mwap-form__date-native:focus { color: transparent; }

/* Time field: whole box clickable too (JS calls showPicker on click). */
.mwap-form__input[type="time"] {
	cursor: pointer;
}
.mwap-form__input[type="time"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
}

/* Formatted text painted over the input's value area. Padding matches .mwap-form__input
   (14px top/bottom, 16px left) so it sits exactly where the native value would. */
.mwap-form__date-display {
	position: absolute;
	left: 16px;
	right: 44px;             /* clear of the calendar icon on the right */
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: var(--mwap-text, #000);
	pointer-events: none;    /* clicks fall through to the native input */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Placeholder colour while no date is chosen (text supplied by JS). */
.mwap-form__date.is-empty .mwap-form__date-display {
	color: #9aa5b1;
}

/* ---- Steps container ---- */
.mwap-form__steps {
	position: relative;
	min-height: 300px;
}

/* Steps are visible by default so the form is never a blank box if the wizard JS
   fails to load (caching/minification/concatenation can drop or defer it). Only once
   the wizard has booted (`.mwap-form--js` is set by mwap-form-steps.js the moment it
   initialises this form) do we hand step visibility over to JS via inline display. */
.mwap-form__step {
	display: block;
	animation: fadeIn .3s ease;
}

/* JS active → hide every step; showStep() re-reveals the current one via inline style. */
.mwap-form--js .mwap-form__step {
	display: none;
}

.mwap-form--js .mwap-form__step[style*="display: block"] {
	display: block;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---- Error message ---- */
.mwap-form__error-msg {
	display: none;
	padding: 12px 16px;
	background: rgba(217, 79, 58, 0.1);
	color: #d94f3a;
	border-left: 4px solid #d94f3a;
	border-radius: 6px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.5;
}

/* ---- Navigation buttons ---- */
.mwap-form__nav {
	display: flex;
	gap: 12px;
	margin-top: 32px;
	justify-content: flex-start;
}

.mwap-form__nav-back,
.mwap-form__nav-next {
	padding: 12px 32px;
	border: none;
	border-radius: 6px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s ease;
}

.mwap-form__nav-back {
	background: transparent;
	color: var(--mwap-accent, #199bd7);
	border: 1px solid var(--mwap-accent, #199bd7);
}

/* Pin colour in hover AND focus — the theme paints button:hover/:focus white-on-pink
   (#c36), so we must re-assert background, border AND text in both states. */
.mwap-form .mwap-form__nav-back:hover:not(:disabled),
.mwap-form .mwap-form__nav-back:focus:not(:disabled),
.mwap-form .mwap-form__nav-back:focus-visible:not(:disabled) {
	background: rgba(25, 155, 215, 0.05);
	border-color: var(--mwap-accent, #199bd7);
	color: var(--mwap-accent, #199bd7);
}

.mwap-form__nav-back:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
/* Hidden on Step 1 — make sure the attribute actually hides it. */
.mwap-form__nav-back[hidden] {
	display: none;
}

.mwap-form__nav-next {
	/* Hard hex fallback so it's brand coral from first paint even if mwap.css's
	   custom properties haven't applied yet (avoids a theme-pink flash). */
	background: var(--mwap-pin-coral, #ef6351);
	color: #fff;
}

.mwap-form .mwap-form__nav-next:hover,
.mwap-form .mwap-form__nav-next:focus,
.mwap-form .mwap-form__nav-next:focus-visible {
	background: #d94f3a;   /* darker coral, white text — never the theme's pink */
	color: #fff;
}
.mwap-form .mwap-form__nav-next:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(239, 99, 81, 0.3);
}

.mwap-form__nav-next:active {
	transform: translateY(0);
}

/* ---- Conditional fields (family section) ---- */
.mwap-form__fieldset[data-mwap-family][hidden] {
	display: none;
}

.mwap-form__fieldset[data-mwap-family] {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 0;
	padding: 10px;
	margin: 0 0 8px;
}

/* ---- Family members repeater (Name + Relation rows) ---- */
.mwap-family-repeater__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Each member is a stacked card: Name+× on top, Relation indented below */
.mwap-family-repeater__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* Name input + × button side-by-side */
.mwap-family-repeater__name-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.mwap-family-repeater__name-row .mwap-form__input {
	flex: 1;
	min-width: 0;
}
/* Relation sits below, right-padded to align its right edge with the name input */
.mwap-family-repeater__relation-row {
	padding-right: calc(36px + 8px);
}
.mwap-family-repeater__relation-row .mwap-form__input {
	width: 100%;
}
/* Legacy: fields inside the row drop their own margin */
.mwap-family-repeater__row .mwap-form__field {
	margin-bottom: 0;
	min-width: 0;
}
.mwap-family-repeater__remove {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e1e6eb;
	border-radius: 8px;
	color: #9aa5b1;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.mwap-form .mwap-family-repeater__remove:hover {
	border-color: var(--mwap-pin-coral, #ef6351);
	color: var(--mwap-pin-coral, #ef6351);
	background: #fff;
}
/* "+ Add family member" — outline pill in brand blue. */
.mwap-family-repeater__add {
	align-self: flex-start;
	margin-top: 2px;
	padding: 9px 18px;
	background: transparent;
	color: var(--mwap-accent, #199bd7);
	border: 1px solid var(--mwap-accent, #199bd7);
	border-radius: 8px;
	font: 700 14px/1 'GT Walsheim Pro', -apple-system, sans-serif;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.mwap-form .mwap-family-repeater__add:hover {
	background: rgba(25, 155, 215, 0.06);
	color: var(--mwap-accent, #199bd7);
	border-color: var(--mwap-accent, #199bd7);
}
.mwap-form__hint {
	margin: 0;
	font-size: 13px;
	color: #6b7680;
}

/* Final consent block — extra space above so it reads as the closing submission step,
   separate from the family question above it. */
.mwap-form__consent {
	margin-top: 40px;
}
/* Privacy / data disclaimer — readable box: light card, comfortable line-height,
   short paragraphs (scannable), with its own scroll if it ever gets long. */
.mwap-form__disclaimer {
	margin: 0 0 16px;
	padding: 16px 18px;
	background: #f7f9fb;
	border: 1px solid #e1e6eb;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.6;
	color: #4b5563;
	max-height: 220px;
	overflow-y: auto;
}
.mwap-form__disclaimer p {
	margin: 0 0 10px;
}
.mwap-form__disclaimer p:last-child {
	margin-bottom: 0;
}
.mwap-form__disclaimer a {
	color: var(--mwap-accent, #199bd7);
	text-decoration: underline;
	font-weight: 600;
}
/* "I have read and accept" — slightly stronger than the muted disclaimer text. */
.mwap-form__accept {
	font-weight: 600;
	color: var(--mwap-text, #000);
}

/* ---- Enquiry form extras ---- */
.mwap-form__hp {                       /* honeypot — visually hidden, not display:none */
	position: absolute;
	left: -5000px;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}
.mwap-form__textarea {
	min-height: 120px;
	border-radius: 14px;               /* less pill-y than inputs, easier to read */
	resize: vertical;
	line-height: 1.5;
}

/* Inline success confirmation (enquiry form — replaces the form in place, no reload). */
.mwap-form__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 40px 8px;
}
.mwap-form__success-icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #e9f7ef;
	color: #2e9e5b;
}
.mwap-form__success-icon svg { width: 34px; height: 34px; }
.mwap-form__success-title {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	color: var(--mwap-text, #000);
}
.mwap-form__success-msg {
	margin: 0;
	max-width: 420px;
	font-size: 15px;
	line-height: 1.55;
	color: #5b6770;
}

/* ---- Register Step 2 location pin (draggable OpenStreetMap) ---- */
.mwap-locate {
	height: 350px;
	max-height: 350px;
	width: 100%;
	border: 1px solid #e1e6eb;
	border-radius: 10px;
	overflow: hidden;
	background: #e9eef2;
}
.mwap-locate .leaflet-container { font: inherit; }

/* ---- Radio choice cards (e.g. Public / Private walk visibility) ---- */
.mwap-form__choice-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mwap-form__choice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #e1e6eb;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mwap-form__choice:hover {
	border-color: var(--mwap-accent, #199bd7);
	background: #f0f6fc;
}
.mwap-form__choice input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--mwap-accent, #199bd7);
}
/* Selected card: blue ring + tint (uses :has where supported; falls back to hover only). */
.mwap-form__choice:has(input[type="radio"]:checked) {
	border-color: var(--mwap-accent, #199bd7);
	background: #f0f6fc;
	box-shadow: 0 0 0 1px var(--mwap-accent, #199bd7) inset;
}
.mwap-form__choice-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.mwap-form__choice-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--mwap-text, #000);
}
.mwap-form__choice-desc {
	font-size: 13px;
	line-height: 1.45;
	color: #6b7680;
}

/* Family repeater has no mobile override needed — the Name+×/Relation layout
   works at all widths without a breakpoint. */

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.mwap-form__step-indicator {
		font-size: 13px;
		margin-bottom: 16px;
	}

	.mwap-form__nav {
		margin-top: 24px;
		gap: 10px;
	}

	.mwap-form__nav-back,
	.mwap-form__nav-next {
		padding: 10px 20px;
		font-size: 14px;
		flex: 1;
	}
}

/* ---- Walk picker (state → walk → chosen) ---- */
.mwap-walk-picker {
	margin: 8px 0 0;
}

.mwap-walk-picker__prompt {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--mwap-text, #1c2733);
	text-align: left;
}

/* Stage 1 — state buttons (responsive masonry-style pills that wrap and size to
   their content, so long state names like "Australian Capital Territory" never
   overflow a fixed cell). */
.mwap-walk-picker__states {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mwap-walk-picker__state {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	flex: 0 1 auto;       /* hug content; shrink only if it can't fit the row */
	max-width: 100%;      /* never exceed the container, even for the longest name */
	padding: 14px 16px;
	border: 1px solid #e3e6ea;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.mwap-walk-picker__state:hover,
.mwap-walk-picker__state:focus {
	outline: none;
	border-color: var(--mwap-accent, #2b8cff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	background: #f7fbff;
}

.mwap-walk-picker__state-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--mwap-text, #1c2733);
	overflow-wrap: anywhere; /* break a very long name rather than overflow the pill */
}

.mwap-walk-picker__state-count {
	flex: 0 0 auto;
	min-width: 24px;
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--mwap-accent, #2b8cff);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

/* Stage 2 — back link + walk card list */
.mwap-walk-picker__back,
.mwap-walk-picker__change {
	display: inline-block;
	margin: 0 0 12px;
	padding: 6px 12px;
	border: 1px solid #d4d9df;
	border-radius: 8px;
	background: #fff;
	color: var(--mwap-accent, #2b8cff);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

/* Scoped under .mwap-form + colour re-asserted so the theme's button:hover (white text on
   #c36) can't take over — keep the blue text/border on a light tint. */
.mwap-form .mwap-walk-picker__back:hover,
.mwap-form .mwap-walk-picker__back:focus,
.mwap-form .mwap-walk-picker__change:hover,
.mwap-form .mwap-walk-picker__change:focus {
	border-color: var(--mwap-accent, #199bd7);
	background: #f7fbff;
	color: var(--mwap-accent, #199bd7);
}

.mwap-walk-picker__change {
	margin: 14px 0 0;
}

.mwap-walk-picker__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Compact, left-aligned walk card */
.mwap-walk-picker__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	min-height: 64px;
	margin: 0;
	border: 1px solid #e3e6ea;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
/* The explicit display:flex above overrides the [hidden] attribute's UA display:none,
   so re-assert it (higher specificity) — otherwise items from other states stay visible. */
.mwap-walk-picker__item[hidden] {
	display: none;
}

/* Once a walk is chosen, hide every option except the selected one. */
.mwap-walk-picker.is-choosing .mwap-walk-picker__item:not(.is-selected) {
	display: none;
}

.mwap-walk-picker__item:hover {
	border-color: var(--mwap-accent, #2b8cff);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.mwap-walk-picker__item:focus {
	outline: none;
	border-color: var(--mwap-accent, #2b8cff);
	box-shadow: 0 0 0 3px rgba(43, 140, 255, 0.25);
}

.mwap-walk-picker__item.is-selected {
	border-color: var(--mwap-accent, #2b8cff);
	box-shadow: 0 0 0 2px var(--mwap-accent, #2b8cff) inset;
	background: #f0f7ff;
}

.mwap-walk-picker__thumb {
	flex: 0 0 64px;
	align-self: stretch;
	background-size: cover;
	background-position: center;
	background-color: #f1f3f5;
}

.mwap-walk-picker__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: 10px 40px 10px 14px;
	text-align: left;
}

.mwap-walk-picker__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--mwap-text, #1c2733);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Compact single-line date · time sub-label (replaces the chip row). */
.mwap-walk-picker__sub {
	font-size: 13px;
	font-weight: 500;
	color: #6b7680;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Circular check indicator (right side). */
.mwap-walk-picker__check {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #c8ced6;
	background: #fff;
	transition: border-color 0.15s, background 0.15s;
}

.mwap-walk-picker__item.is-selected .mwap-walk-picker__check {
	border-color: var(--mwap-accent, #2b8cff);
	background: var(--mwap-accent, #2b8cff);
}

.mwap-walk-picker__item.is-selected .mwap-walk-picker__check::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 7px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Chosen / locked walk shown as a Find-a-Walk *list-view* row, but inside the narrower
   join form. The find list view sizes its date/walkers/CTA columns for a full-width page;
   relax those fixed widths so the single card fits the form column and wraps on mobile. */
.mwap-find--card-only {
	margin: 0 0 18px;
}
.mwap-find--card-only .mwap-find-card {
	padding: 16px 12px;
	gap: 18px;
	cursor: default;
	border-top: 1px solid #e9edf1;
}
.mwap-find--card-only .mwap-find-card__image {
	flex-basis: 120px;
	width: 120px;
	height: 90px;
}
/* Let the date column size to content instead of a fixed 220px. */
.mwap-find--card-only .mwap-find-card__meta {
	flex: 0 1 auto;
	width: auto;
}
.mwap-find--card-only .mwap-find-card__title {
	font-size: 20px;
}
.mwap-find--card-only .mwap-find-card__stat {
	font-size: 18px;
}
.mwap-find--card-only .mwap-find-card__walkers {
	flex: 0 0 auto;
	width: auto;
}

@media (max-width: 600px) {
	.mwap-find--card-only .mwap-find-card {
		flex-wrap: wrap;
		gap: 12px 18px;
	}
	.mwap-find--card-only .mwap-find-card__image {
		flex-basis: 100%;
		width: 100%;
		height: 150px;
	}
	.mwap-find--card-only .mwap-find-card__body {
		flex-wrap: wrap;
		gap: 10px 18px;
	}
}

.mwap-walk-picker__empty {
	margin: 10px 0 0;
	padding: 14px;
	text-align: center;
	color: #6b7682;
	font-size: 14px;
	background: #f7f8fa;
	border: 1px dashed #d4d9df;
	border-radius: 8px;
}

@media (max-width: 480px) {
	.mwap-walk-picker__thumb {
		flex-basis: 56px;
	}
	.mwap-walk-picker__title {
		font-size: 14px;
	}
	.mwap-walk-picker__sub {
		font-size: 12px;
	}
}