/* The pages after Home (search results, a listing, favourites, messages, account): what they share on every screen, and
   their desktop design, which keeps the legacy desktop look (white 1040px canvas, section headings, legacy listing cards).
   The phone view of these pages is in home-mobile.css; there the desktop canvas is hidden. */

/* Desktop canvas */
.contentCanvas.deskWide .contentLeft { flex: 1 1 auto; }
.deskGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deskMore { grid-column: 1 / -1; justify-self: center; min-width: 220px; height: 40px; border: 1px solid #c3c8c8; border-radius: 20px; background: #fff; color: #33383d; cursor: pointer; }
.deskMore:hover { background: #eaf0ec; }
.deskState { margin: 24px 0; color: #6b7278; font-size: 15px; }
.deskButton { height: 40px; padding: 0 22px; border: 0; border-radius: 20px; background: #0f84b4; color: #fff; font-weight: 600; cursor: pointer; }
.deskButton:hover { background: #0c6c93; }
.desktopPage a.listingLink { color: inherit; text-decoration: none; }
.listingLink::after { position: absolute; z-index: 1; inset: 0; content: ""; }
.listingsGrid .listing .heart { cursor: pointer; padding: 0; }
.listingsGrid .listing .heart.isOn, .listingsGrid .listing .heart.isOn svg { color: #e5484d; }
.desktopPage .listingsGrid .listing .heart { z-index: 3; }

/* Account */
.accountLinks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 18px 0; }
.desktopPage .accountLinks a, .accountLinks a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1px solid #dfe5e1; border-radius: 14px; background: #fff; color: #222; text-decoration: none; }
.accountLinks a span { flex: 1; }
.accountLinks a i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #dfe5e1; border-radius: 12px; color: #5a6a60; }
.accountLinks a b { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 13px; text-align: center; }
.accountOut { margin: 8px 0 24px; }

/* Messages: the inbox and a conversation */
.inboxTabs { display: flex; gap: 4px; margin: 14px 0; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 4px 10px rgba(27, 42, 94, .14); }
.desktopPage .inboxTabs a, .inboxTabs a { flex: 1; display: grid; place-items: center; height: 42px; border-radius: 999px; color: #5a6a60; font-weight: 600; text-decoration: none; }
.inboxTabs a.isOn { background: #0f84b4; color: #fff; }
.inboxList { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.desktopPage .inboxRow, .inboxRow { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #dfe5e1; border-radius: 14px; background: #fff; color: #222; text-decoration: none; }
.inboxRow.isUnread { border-color: #0f84b4; background: #f2f9fc; }
.inboxPhoto { display: grid; flex: none; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 12px; background: #eef2ef; color: #6b7278; }
.inboxPhoto img { width: 100%; height: 100%; object-fit: cover; }
.inboxText { display: grid; flex: 1; min-width: 0; gap: 2px; }
.inboxText strong, .inboxText small, .inboxText em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; }
.inboxText small { color: #6b7278; }
.inboxMeta { display: grid; flex: none; justify-items: end; gap: 6px; color: #6b7278; font-size: 13px; }
.inboxMeta b { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: #e5484d; color: #fff; text-align: center; }
.desktopPage a.inboxWrite, a.inboxWrite { display: block; margin: 16px 0; color: #0f84b4; text-align: center; }
.chatAbout { margin: 10px 0; }
.chatIntro, .chatNotice { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #eef6f9; color: #33383d; line-height: 1.45; }
.chatNotice { background: #fff6e5; }
.chatMessages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 12px 0; }
.chatDay { margin: 8px 0 0; color: #6b7278; font-size: 13px; text-align: center; }
.chatBubble { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; max-width: 82%; padding: 9px 13px; border-radius: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.chatBubble p { margin: 0; white-space: pre-line; }
.chatBubble small { color: #5a6a60; font-weight: 600; }
.chatBubble time { color: inherit; font-size: 12px; opacity: .7; text-align: right; }
.chatBubble.isMine { justify-self: end; background: #0f84b4; color: #fff; border-bottom-right-radius: 4px; }
.chatBubble.isTheirs { justify-self: start; background: #fff; border: 1px solid #dfe5e1; border-bottom-left-radius: 4px; }
.chatForm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 12px 0 24px; }
.chatForm textarea { width: 100%; padding: 10px 14px; border: 1px solid #c3c8c8; border-radius: 14px; background: #fff; color: #222; font: inherit; resize: vertical; }
.chatForm button { justify-self: end; height: 44px; padding: 0 26px; border: 0; border-radius: 22px; background: #0f84b4; color: #fff; font-weight: 600; cursor: pointer; }
.formError { margin: 0; color: #d92d20; }

/* Heart, filled when the listing is a favourite */
.mHeart.isOn, .mHeartBtn.isOn { color: #e5484d; }
.mHeart.isOn svg, .mHeartBtn.isOn svg { fill: currentColor; }

/* The full-screen photo viewer (a listing's page, phone and desktop) */
body.viewerOpen { overflow: hidden; }
.viewer { position: fixed; z-index: 100; inset: 0; background: #000; color: #fff; }
.viewer[hidden] { display: none; }
.viewerTrack { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.viewerTrack::-webkit-scrollbar { display: none; }
.viewerTrack img { flex: none; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; }
.viewerClose, .viewerArrow { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.viewerClose { top: max(env(safe-area-inset-top), 14px); right: 14px; }
.viewerArrow { top: 50%; margin-top: -22px; }
.viewerPrev { left: 14px; }
.viewerNext { right: 14px; }
.viewerClose:hover, .viewerArrow:hover { background: rgba(255, 255, 255, .28); }
.viewerCount { position: absolute; z-index: 2; bottom: max(env(safe-area-inset-bottom), 16px); left: 50%; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 15px; transform: translateX(-50%); }
@media (hover: none) { .viewerArrow { display: none; } }

/* A listing's page, desktop */
.deskListing .contentLeft { padding-bottom: 40px; }
.deskGallery { margin-top: 20px; }
.deskMainPhoto { display: block; width: 100%; max-height: 480px; border-radius: 14px; background: #eef2ef; object-fit: cover; cursor: zoom-in; aspect-ratio: 3 / 2; }
.deskThumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.deskThumbs button { flex: none; width: 96px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; overflow: hidden; }
.deskThumbs button:hover { border-color: #68c034; }
.deskThumbs img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.deskVideo { width: 100%; margin-top: 12px; border-radius: 14px; background: #000; }
.deskChips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.deskChips span { padding: 3px 12px; border: 1px solid #dfe5e1; border-radius: 999px; font-size: 13px; }
.deskChips .isBadge { border: 0; background: #e5484d; color: #fff; }
.deskTitle { margin: 10px 0 0; color: #33383d; font-size: 24px; font-weight: 700; line-height: 1.25; }
.deskPlace { margin: 6px 0 0; color: #6b7278; }
.deskFacts { display: grid; gap: 6px; margin: 12px 0; }
.deskFacts p { display: flex; justify-content: space-between; margin: 0; padding: 6px 0; border-bottom: 1px solid #edf1ee; }
.deskFacts span { color: #6b7278; }
.deskText { margin: 12px 0 0; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.deskSide { position: sticky; top: 16px; display: grid; gap: 10px; margin-top: 20px; padding: 18px; border: 1px solid #dfe5e1; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(20, 42, 32, .06), 0 12px 26px -14px rgba(20, 42, 32, .25); }
.deskPrice { margin: 0; color: #2e7d1e; font-size: 26px; font-weight: 700; }
.deskRef, .deskBy { margin: 0; color: #6b7278; font-size: 13px; }
.deskContacts, .deskSideActions { display: grid; gap: 8px; }
.desktopPage a.deskContact, .deskContact { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid #c3c8c8; border-radius: 21px; background: #fff; color: #33383d; font-weight: 600; text-decoration: none; cursor: pointer; }
.desktopPage a.deskContact.isPrimary { border-color: #0f84b4; background: #0f84b4; color: #fff; }
.deskContact:hover { background: #eaf0ec; }
.desktopPage a.deskContact.isPrimary:hover { background: #0c6c93; }
.deskContact.isOn { color: #e5484d; border-color: #e5484d; }

/* The search results, desktop: the results on the left, the filters on the right */
.deskSummary { margin: 14px 0 4px; color: #6b7278; }
.deskFilters { display: grid; gap: 14px; margin-top: 25px; padding: 16px; border: 1px solid #dfe5e1; border-radius: 14px; background: #fff; }
.deskFilters h3 { margin: 0; color: #5a7c81; font-size: 16px; }
.deskFilters fieldset { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.deskFilters legend { margin-bottom: 4px; padding: 0; color: #33383d; font-weight: 600; }
.deskFilters legend small { color: #6b7278; font-weight: 400; }
.deskIntent { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: #eef2ef; }
.deskIntent label { position: relative; }
.deskIntent input { position: absolute; opacity: 0; }
.deskIntent span { display: grid; place-items: center; height: 34px; border-radius: 999px; color: #5a6a60; font-weight: 700; cursor: pointer; }
.deskIntent input:checked + span { background: #0f84b4; color: #fff; }
.deskIntent label:last-child input:checked + span { background: #e5484d; }
.deskCheck { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.deskPrices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.deskPrices input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #c3c8c8; border-radius: 10px; background: #fff; }
.deskRooms { display: flex; gap: 6px; }
.deskRooms label { position: relative; }
.deskRooms input { position: absolute; opacity: 0; }
.deskRooms span { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #c3c8c8; border-radius: 999px; background: #fff; cursor: pointer; }
.deskRooms input:checked + span { border-color: #222; background: #222; color: #fff; }
.deskPlaceTag { margin: 0; padding: 6px 10px; border-radius: 8px; background: #eef6f9; }