/* MB Explore host pages + listing pages only (EP-T2.2): /list-with-us/, the wizard, dashboard, verification queue and
   single listings. Split from mbx.css so Home and the travel pages do not block on it. Enqueued with mbx-host.js. */
/* landing */
.mbx-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.mbx-value { padding: 26px; border-radius: var(--mbx-radius-lg); background: #fff; box-shadow: var(--mbx-shadow); }
.mbx-value__ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: var(--mbx-blush); color: var(--mbx-pink-strong); font: 500 24px var(--mbx-serif); }
.mbx-value__ico .mbx-ico { width: 24px; height: 24px; }
.mbx .mbx-value .mbx-h3 { margin: 0 0 6px; font-size: 22px; }
.mbx-value p { margin: 0; color: var(--mbx-grey); }
.mbx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 24px 0 30px; padding: 0; list-style: none; }
.mbx-step { position: relative; padding: 22px 18px; border-radius: var(--mbx-radius); background: #fff; transition: opacity .5s var(--mbx-ease) var(--d, 0ms), transform .5s var(--mbx-ease) var(--d, 0ms); }
.mbx-js .mbx-reveal:not(.is-in) .mbx-step { opacity: 0; transform: translateY(14px); }
.mbx-step__n { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 50%; background: var(--mbx-pink-strong); color: #fff; font: 600 16px var(--mbx-sans); }
.mbx .mbx-step__t { margin: 0 0 4px; font: 500 20px/1.25 var(--mbx-serif); }
.mbx-step__s { margin: 0; font-size: 14px; color: var(--mbx-grey); }
.mbx-commission { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; padding: 26px; border-radius: var(--mbx-radius-lg); background: #fff; box-shadow: var(--mbx-shadow); }
.mbx-commission__line { margin: 0; font: 500 24px/1.3 var(--mbx-serif); color: var(--mbx-plum); }
.mbx-calc label { display: block; margin-bottom: 6px; font: 600 14px var(--mbx-sans); color: var(--mbx-plum); }
.mbx-calc input { width: 100%; max-width: 260px; min-height: 48px; padding: 0 14px; border: 1px solid #E6DADF; border-radius: 10px; font: 600 18px var(--mbx-sans); box-sizing: border-box; }
.mbx-earnings { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--mbx-blush); color: var(--mbx-plum); font-size: 14.5px; }
.mbx-earnings span + span::before { content: "·"; margin-right: 14px; color: var(--mbx-pink); }
.mbx-earnings strong { font-weight: 600; }
.mbx-earnings [data-e="net"] { color: var(--mbx-pink-strong); }
.mbx-faq { max-width: 820px; }
.mbx-faq__item { border-bottom: 1px solid var(--mbx-line); }
.mbx-faq__item summary { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; cursor: pointer; font: 600 16px var(--mbx-sans); color: var(--mbx-plum); list-style: none; }
.mbx-faq__item summary::-webkit-details-marker { display: none; }
.mbx-faq__item summary::after { content: "+"; color: var(--mbx-pink-strong); font-size: 22px; line-height: 1; transition: transform .25s var(--mbx-ease); }
.mbx-faq__item[open] summary::after { transform: rotate(45deg); }
.mbx-faq__item p { margin: 0 0 16px; color: var(--mbx-grey); }

/* sign-in + wizard */
.mbx-wizard-page { padding: 48px 0 64px; }
.mbx-host .mbx-wizard__wrap { max-width: 760px; }
.mbx-hoststart { padding: 28px; border-radius: var(--mbx-radius-lg); background: #fff; box-shadow: var(--mbx-shadow); }
.mbx-hoststart__form label { font: 600 14px var(--mbx-sans); color: var(--mbx-plum); }
.mbx-hoststart__msg { margin: 10px 0 0; font-size: 14px; color: var(--mbx-plum); }
.mbx-hoststart__msg:empty { display: none; }
.mbx-wizard { padding: 24px; border-radius: var(--mbx-radius-lg); background: #fff; box-shadow: var(--mbx-shadow); }
.mbx-wizard[hidden], .mbx-wizard__done[hidden], .mbx-wstep[hidden], .mbx-host [data-for-type][hidden] { display: none !important; }
.mbx-wizard__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 14px; }
.mbx-wizard__count { margin: 0; color: var(--mbx-grey-muted); }
.mbx-wizard__later { display: inline-flex; align-items: center; min-height: 44px; color: var(--mbx-pink-strong) !important; font-weight: 600; }
.mbx-progress { height: 8px; margin-bottom: 22px; border-radius: 999px; background: var(--mbx-blush-2); overflow: hidden; }
.mbx-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E91E63, #F06BAA); transition: width .5s var(--mbx-ease); }
.mbx-wstep { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; animation: mbx-rise .4s var(--mbx-ease) both; }
.mbx-wstep__q { margin: 0 0 4px; padding: 0; font: 500 clamp(26px, 4vw, 32px)/1.2 var(--mbx-serif); color: var(--mbx-plum); outline: none; }
.mbx-wstep__help { margin: -6px 0 0; color: var(--mbx-grey); font-size: 14.5px; }
.mbx-field { display: grid; gap: 6px; font: 600 14px var(--mbx-sans); color: var(--mbx-plum); }
.mbx-field input, .mbx-field select, .mbx-field textarea, .mbx-wstep > input[type="text"] { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #E6DADF; border-radius: 10px; background: #fff; font: 400 16px/1.4 var(--mbx-sans); color: var(--mbx-plum); box-sizing: border-box; }
.mbx-field textarea { min-height: 96px; }
.mbx-host input:focus, .mbx-host select:focus, .mbx-host textarea:focus { outline: none; border: 1px solid var(--mbx-pink-strong); box-shadow: var(--mbx-ring); }
.mbx-count { float: right; font-weight: 400; color: var(--mbx-grey-muted); }
.mbx-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mbx-typepick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mbx-typepick__opt, .mbx-checkpills label, .mbx-policy, .mbx-switch { position: relative; }
.mbx-typepick__opt input, .mbx-checkpills input, .mbx-policy input, .mbx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mbx-typepick__opt span { display: grid; gap: 4px; justify-items: start; min-height: 140px; padding: 18px; border: 2px solid #EAD4DD; border-radius: var(--mbx-radius); cursor: pointer; transition: border-color .25s, background-color .25s, transform .25s var(--mbx-ease); }
.mbx-typepick__opt .mbx-ico { width: 30px; height: 30px; color: var(--mbx-pink-strong); }
.mbx-typepick__opt strong { font: 500 22px var(--mbx-serif); color: var(--mbx-plum); }
.mbx-typepick__opt em { font-style: normal; font-size: 13.5px; color: var(--mbx-grey); }
.mbx-typepick__opt input:checked + span { border-color: var(--mbx-pink-strong); background: var(--mbx-blush); transform: translateY(-2px); }
.mbx-typepick__opt input:focus-visible + span, .mbx-checkpills input:focus-visible + span, .mbx-policy input:focus-visible + span, .mbx-switch input:focus-visible + span { outline: 3px solid var(--mbx-pink-strong); outline-offset: 2px; }
.mbx-checkpills { display: flex; flex-wrap: wrap; gap: 8px; }
.mbx-checkpills span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #EAD4DD; border-radius: 999px; background: #fff; font: 400 14px var(--mbx-sans); cursor: pointer; }
.mbx-checkpills input:checked + span { background: var(--mbx-plum); border-color: var(--mbx-plum); color: #fff; }
.mbx-drop-zone { position: relative; display: grid; place-items: center; min-height: 170px; padding: 20px; border: 2px dashed #F0B7CD; border-radius: var(--mbx-radius); background: var(--mbx-blush); text-align: center; cursor: pointer; transition: background-color .25s, border-color .25s; }
.mbx-drop-zone.is-over { background: var(--mbx-blush-2); border-color: var(--mbx-pink-strong); }
.mbx-drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mbx-drop-zone:focus-within { outline: 3px solid var(--mbx-pink-strong); outline-offset: 2px; }
.mbx-drop-zone span { display: grid; gap: 4px; pointer-events: none; }
.mbx-drop-zone strong { font: 500 22px var(--mbx-serif); color: var(--mbx-plum); }
.mbx-drop-zone em { font-style: normal; font-size: 14px; color: var(--mbx-grey); }
.mbx-photocount { margin: 0; font: 600 14px var(--mbx-sans); color: var(--mbx-plum); }
.mbx-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mbx-photos li { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--mbx-blush-2); animation: mbx-rise .35s var(--mbx-ease) both; }
body.mbx .mbx-photos img { width: 100%; height: 100%; object-fit: cover; }
.mbx-photos li:first-child::after { content: "Cover"; position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--mbx-plum); font: 600 11px var(--mbx-sans); }
.mbx-photos li.is-uploading img { opacity: .55; }
.mbx-photos li.is-uploading::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border: 3px solid #fff; border-top-color: var(--mbx-pink-strong); border-radius: 50%; animation: mbx-spin .8s linear infinite; }
@keyframes mbx-spin { to { transform: rotate(360deg); } }
.mbx-wstep .flatpickr-calendar.inline { width: 100%; max-width: 640px; border: 1px solid var(--mbx-line); box-shadow: none !important; }
.mbx-switch { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 15px; }
.mbx-switch span { display: flex; align-items: center; gap: 12px; }
.mbx-switch span::before { content: ""; flex: none; width: 44px; height: 26px; border-radius: 999px; background: radial-gradient(circle at 13px 13px, #fff 9px, #CDB9C3 10px); transition: background .25s; }
.mbx-switch input:checked + span::before { background: radial-gradient(circle at 31px 13px, #fff 9px, var(--mbx-pink-strong) 10px); }
.mbx-seasonal summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 600 14.5px var(--mbx-sans); color: var(--mbx-pink-strong); }
.mbx-season { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0; }
.mbx-season label { display: grid; gap: 4px; font: 600 12.5px var(--mbx-sans); }
.mbx-season input { min-height: 44px; padding: 0 10px; border: 1px solid #E6DADF; border-radius: 10px; font: 400 15px var(--mbx-sans); }
.mbx-policy { display: block; }
.mbx-policy span { display: block; padding: 14px 16px; border: 1px solid #EAD4DD; border-radius: 12px; font: 400 14.5px/1.45 var(--mbx-sans); cursor: pointer; }
.mbx-policy input:checked + span { padding: 13px 15px; border: 2px solid var(--mbx-pink-strong); background: var(--mbx-blush); }
.mbx-gate { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mbx-gate li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: var(--mbx-ivory); }
.mbx-gate .is-missing span::before { content: "○ "; color: var(--mbx-pink-strong); }
.mbx-gate .is-ok { padding: 14px; background: #EDF7EF; color: #1E5B2E; }
.mbx-linkbtn { min-height: 44px; border: 0; background: none; color: var(--mbx-pink-strong); font: 600 14px var(--mbx-sans); text-decoration: underline; cursor: pointer; }
.mbx-wizard__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.mbx-wizard__nav [data-mbx-next] { min-width: 140px; margin-left: auto; }
.mbx-wizard__msg { min-height: 1.4em; margin: 10px 0 0; color: var(--mbx-pink-strong); font-size: 14px; }
.mbx-wizard__note { padding: 12px 14px; border-radius: 12px; background: #FFF4E5; color: #6B3E00; font-size: 14.5px; }
.mbx-wizard__done { position: relative; padding: 32px 24px; border-radius: var(--mbx-radius-lg); background: #fff; box-shadow: var(--mbx-shadow); text-align: center; outline: none; }
.mbx-wizard__done .mbx-trip__heroactions { justify-content: center; }

/* listing page */
.mbx-gallery { position: relative; z-index: 2; margin-top: -60px; }
.mbx-gallery__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 170px 170px; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mbx-gallery__grid li:first-child { grid-row: 1 / 3; }
.mbx-gallery__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--mbx-blush-2); }
body.mbx .mbx-gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--mbx-ease); }
.mbx-gallery__btn:hover .mbx-gallery__img { transform: scale(1.04); }
.mbx-gallery__all { margin-top: 10px; }
.mbx-listing__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.mbx .mbx-listing__content > .mbx-h3 { margin: 30px 0 10px; }
.mbx-hostcard { display: grid; grid-template-columns: 52px 1fr; gap: 6px 14px; align-items: center; margin: 22px 0; padding: 18px; border-radius: var(--mbx-radius); background: var(--mbx-blush); }
.mbx-hostcard .mbx-avatar { width: 52px; height: 52px; grid-row: auto; background: #fff; }
.mbx-hostcard__name { margin: 0 0 4px; font: 600 16px var(--mbx-sans); color: var(--mbx-plum); }
.mbx-hostcard__story { grid-column: 1 / -1; margin: 6px 0 0; font: italic 500 17px/1.5 var(--mbx-serif); color: var(--mbx-plum); }
.mbx-ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.mbx-ticks li::before { content: "✓"; margin-right: 8px; color: var(--mbx-pink-strong); font-weight: 600; }
.mbx-ticks--plain li::before { content: "•"; }
.mbx-cal { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mbx-cal__title { margin: 0 0 6px; font: 600 14px var(--mbx-sans); color: var(--mbx-plum); }
.mbx-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; text-align: center; font-size: 13px; }
.mbx-cal__days li { padding: 6px 0; border-radius: 6px; }
.mbx-cal__dow { color: var(--mbx-grey-muted); font-weight: 600; }
.mbx-cal__days .is-on { background: #EDF7EF; color: #1E5B2E; }
.mbx-cal__days .is-off { color: #6F5E68; text-decoration: line-through; }
.mbx-reviews { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mbx-reviews li { padding: 14px; border: 1px solid var(--mbx-line); border-radius: 12px; background: #fff; }
.mbx-reqpanel { position: sticky; top: 96px; display: grid; gap: 12px; padding: 24px; border-radius: var(--mbx-radius-lg); background: #fff; box-shadow: var(--mbx-shadow-lg); }
.mbx-reqpanel__row { display: flex; gap: 8px; }
.mbx-reqbar { display: none; }
.mbx-lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(20, 10, 16, .95); }
.mbx-lightbox::backdrop { background: rgba(20, 10, 16, .9); }
.mbx-lightbox[open] { display: grid; place-items: center; }
.mbx-lightbox__img { max-width: 92vw; max-height: 86dvh; object-fit: contain; border-radius: 8px; }
.mbx-lightbox button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.mbx-lightbox__prev { left: 14px; top: 50%; }
.mbx-lightbox__next { right: 14px; top: 50%; }
.mbx-lightbox__close { right: 14px; top: 14px; }


/* dashboard: her reel for each listing */
.mbx-dash__reel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.mbx-dash__reel label { cursor: pointer; }
.mbx-dash__reel label:focus-within { outline: 3px solid var(--mbx-pink-strong); outline-offset: 2px; }
.mbx-dash__reel .mbx-trip__hint { flex-basis: 100%; margin: 0; }

/* phone layouts for host and listing pages (they live here so they beat the desktop grids above; mbx.css loads first) */
@media (max-width: 900px) {
	.mbx-values, .mbx-commission, .mbx-dash__grid, .mbx-vcard, .mbx-listing__grid { grid-template-columns: 1fr; }
	.mbx-steps, .mbx-stats { grid-template-columns: 1fr 1fr; }
	.mbx-reqpanel { position: static; }
	.mbx-gallery { margin-top: 12px; }
	.mbx-gallery__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 120px; }
	.mbx-gallery__grid li:first-child { grid-column: 1 / -1; grid-row: auto; }
	.mbx-gallery__grid li:nth-child(n+4) { display: none; }
	.mbx-reqbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px rgba(38, 20, 32, .12); }
	.mbx-reqbar p { margin: 0; color: var(--mbx-plum); }
	.mbx-listing-page { padding-bottom: 72px; }
}
@media (max-width: 600px) {
	.mbx-wizard-page { padding-top: 24px; }
	.mbx-wizard { padding: 18px 16px; border-radius: 18px; }
	.mbx-grid3 { grid-template-columns: 1fr 1fr; }
	.mbx-typepick, .mbx-steps, .mbx-ticks, .mbx-cal { grid-template-columns: 1fr; }
	.mbx-typepick__opt span { min-height: 0; }
	.mbx-photos { grid-template-columns: 1fr 1fr; }
	.mbx-season { grid-template-columns: 1fr 1fr; }
	.mbx-season label:last-child { grid-column: 1 / -1; }
	.mbx-dash__item { grid-template-columns: 64px 1fr; }
	body.mbx .mbx-dash__thumb { width: 64px; height: 56px; }
	.mbx-dash__acts { grid-column: 1 / -1; }
	.mbx-wizard__nav { position: sticky; bottom: 0; z-index: 5; margin: 20px -16px -18px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--mbx-line); border-radius: 0 0 18px 18px; background: rgba(255, 255, 255, .97); }
}