/* =====================================================
   Everjoy Listing Detail Page (listing.html)
   - Hero gallery
   - Two-column layout (main + booking)
   - Mini availability calendar
   - Deals / pills
   - Host / partner card
   - Share modal
===================================================== */

/* ------------------------------
   Tokens & page background
------------------------------ */

:root {
  /* Skeleton shimmer */
  --skel-bg: #e5e7eb;
  --skel-sh1: rgba(255,255,255,.6);
  --skel-sh2: rgba(255,255,255,0);

  /* Gallery */
  --gallery-radius: 16px;

  /* Deal palettes */
  --deal-active-bg:   #fde047;  /* yellow */
  --deal-active-text: #1f2937;
  --deal-active-border:#eab308;

  --deal-upcoming-bg:   #e0f2fe; /* blue */
  --deal-upcoming-text: #075985;
  --deal-upcoming-border:#38bdf8;
}

/* Page background just for listing detail */
html,
body.listing-page,
body[data-page="listing"],
body[data-page-kind="listing"] {
  background:#f6f8fb !important;
}

/* Inner shells should not override the grey */
.listing-shell,
.listing-main,
.listing-page-wrap {
  background:#f6f8fb !important;
}

/* ------------------------------
   Shell width / wrap
------------------------------ */

main.section {
  padding-top:0;
}

/* Full-width shell with max 1400px and soft gutters */
.section .wrap {
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:48px 24px 40px;
  box-sizing:border-box;
}

@media (max-width:960px){
  .section .wrap {
    padding:24px 4vw 24px; /* 4vw side gutters on mobile */
  }
}

/* In case #listing wraps the section */
#listing .wrap {
  max-width:1400px;
}

/* ------------------------------
   Breadcrumbs + header
------------------------------ */

.crumbs {
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#64748b;
  margin-bottom:12px;
  font-size:.95rem;
}
.crumbs a {
  color:inherit;
  font-weight:600;
}
.crumbs .sep {
  opacity:.6;
}
.crumbs .current {
  color:#0f172a;
}

/* Listing title + actions */
.listing-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:4px;
  margin-bottom:8px;
}

.listing-head h1 {
  margin:0;
  font-size:24px;
  line-height:1.25;
  letter-spacing:-.01em;
}

/* Actions stack on the right (Save / Share) */
.head-actions {
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
}

/* Base save button (used if not wrapped in .head-actions) */
.save-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
}
.save-btn svg {
  width:18px;
  height:18px;
  fill:#64748b;
}
.save-btn.on svg {
  fill:#e11d48;
}
.save-btn:hover {
  box-shadow:0 8px 22px rgba(15,23,42,.12);
}

/* Icon-only circular variants inside header actions */
.head-actions .save-btn,
.head-actions .share-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-size:0; /* hide text spacing */
  cursor:pointer;
}

.head-actions .save-btn svg,
.head-actions .share-btn svg {
  width:18px;
  height:18px;
}

/* Visually hide labels but keep for a11y */
.head-actions .save-btn span,
.head-actions .share-btn span {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Standalone share button (outside .head-actions) */
.share-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:12px;
  padding:8px 12px;
  font-weight:600;
  cursor:pointer;
}
.share-btn svg {
  width:18px;
  height:18px;
}
.save-btn + .share-btn {
  margin-left:8px;
}
.share-btn:focus-visible {
  outline:2px solid #025fbc;
  outline-offset:2px;
}

/* ------------------------------
   Hero gallery
------------------------------ */

.gallery {
  --gap:12px;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:var(--gap);
  margin-top:12px;
  margin-bottom:28px;
}

.gallery figure {
  margin:0;
}

/* Main hero image */
.gallery .g-main {
  position:relative;
  border-radius:var(--gallery-radius);
  overflow:hidden;
  height:clamp(240px, 32vw, 420px);
}
.gallery .g-main img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Right 2×2 collage */
.gallery .g-side {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:var(--gap);
  height:clamp(240px, 32vw, 420px);
}
.gallery .g-side > * {
  position:relative;
  border-radius:var(--gallery-radius);
  overflow:hidden;
  min-height:0;
}
.gallery .g-side img,
.gallery .g-more,
.gallery .g-more img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:var(--gallery-radius);
  overflow:hidden;
}

/* “See all photos” gradient + button */
.gallery .g-more::before {
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:42%;
  background:linear-gradient(to top, rgba(0,0,0,.48), rgba(0,0,0,0));
  pointer-events:none;
  border-bottom-left-radius:var(--gallery-radius);
  border-bottom-right-radius:var(--gallery-radius);
}

.gallery .g-more .view-photos {
  position:absolute;
  right:12px;
  bottom:12px;
  padding:8px 12px;
  background:#ffffff;
  color:#111827;
  font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  text-decoration:none;
  line-height:1;
}
.gallery .g-more .view-photos:hover {
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.gallery .g-more .view-photos:focus {
  outline:2px solid #111;
  outline-offset:2px;
}

/* Mobile gallery: hero + 4 small thumbs */
@media (max-width:900px){
  .gallery {
    grid-template-columns:1fr;
    margin-top:8px;
  }

  .gallery .g-main {
    width:100%;
    aspect-ratio:4/3;
    max-height:320px;
    height:auto;
  }
  .gallery .g-main img {
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .gallery .g-side {
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    grid-template-rows:minmax(80px, 100px);
    gap:8px;
    height:auto;
  }

  .gallery .g-side > * {
    position:relative;
    border-radius:12px;
    overflow:hidden;
    min-height:0;
  }

  .gallery .g-side img {
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .gallery .g-more .view-photos {
    right:8px;
    bottom:8px;
    padding:6px 10px;
    font-size:12px;
  }
}

/* Very wide: optional extra presence */
@media (min-width:1400px){
  .gallery .g-main,
  .gallery .g-side {
    height:420px;
  }
}

/* ------------------------------
   Hero skeleton (loading)
------------------------------ */

.skel-hero {
  position:relative;
  background:#f3f4f6;
  overflow:hidden;
  min-height:220px;
}
.skel-hero::after {
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:hero-shimmer 1.2s infinite;
}
@keyframes hero-shimmer {
  100% { transform:translateX(100%); }
}

/* Generic skeleton helpers */
.skel,
.hydrating .skel-while {
  position:relative;
  color:transparent!important;
  background:var(--skel-bg);
  border-radius:8px;
  overflow:hidden;
}
.skel::after,
.hydrating .skel-while::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent 0%,
    var(--skel-sh2) 25%,
    var(--skel-sh1) 50%,
    var(--skel-sh2) 75%,
    transparent 100%
  );
  transform:translateX(-100%);
  animation:skel-move 1.2s infinite;
}
@keyframes skel-move {
  100% { transform:translateX(100%); }
}

.hydrating #listingTitle {
  display:inline-block;
  height:1.2em;
  width:clamp(220px,50vw,520px);
}
.hydrating #listingTitle.skel-while {
  border-radius:12px;
}

.gallery img.skel-img {
  background:var(--skel-bg);
}
.gallery .g-main.skel-while {
  height:auto;
}
.gallery .g-side img.skel-img {
  aspect-ratio:1/1;
}

.hydrating #bookingCard .price .num,
.hydrating #bookingCard .price .per,
.hydrating #bookingCard form {
  color:transparent;
}
.hydrating #bookingCard .price .num.skel-while {
  display:inline-block;
  height:1.2em;
  width:110px;
  border-radius:10px;
}
.hydrating #bookingCard .price .per.skel-while {
  display:inline-block;
  height:1em;
  width:56px;
  margin-left:6px;
  border-radius:10px;
}

/* ------------------------------
   Main layout
------------------------------ */

.layout {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1.1fr);
  gap:24px;
  margin-top:24px;
  align-items:flex-start;
}

@media (max-width:1080px){
  .layout {
    grid-template-columns:1fr;
  }
}

/* Cards */
.card {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
  padding:18px 20px 16px;
  margin-bottom:16px;
  font-size:14px;
}

.card h2,
.card h3 {
  margin:0 0 10px;
  font-size:18px;
  font-weight:700;
}

.card + .card {
  margin-top:12px;
}

.inline-link {
  color:#025fbc;
  font-weight:600;
}

/* Utility spacing */
.main .card h3 + .kv {
  margin-top:6px;
}

/* ------------------------------
   Specs / amenities / notes
------------------------------ */

.specs {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.specs > div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background:#f8fafc;
  border:1px solid #eef2f6;
  border-radius:10px;
  padding:10px 12px;
}
.specs dt {
  color:#64748b;
}
.specs dd {
  font-weight:600;
  margin:0;
}

.kv {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f8fafc;
  border:1px solid #eef2f6;
  border-radius:10px;
  padding:10px 12px;
}
.kv + .kv {
  margin-top:8px;
}

.amenities {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
}
.amenities li {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #eef2f6;
  background:#f8fafc;
  border-radius:10px;
  padding:8px 10px;
}
.amenities .ico {
  width:18px;
  text-align:center;
}

@media (max-width:640px){
  .amenities {
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

.notes,
.policy {
  margin:0;
  padding-left:16px;
  display:grid;
  gap:6px;
}

.muted {
  color:#64748b;
}
.muted-kv dd.muted {
  color:#6b7280;
}

/* Map placeholder */
.map-ph {
  margin-top:8px;
  height:220px;
  border-radius:14px;
  border:1px dashed #cbd5e1;
  display:grid;
  place-items:center;
  color:#64748b;
  background:#f8fafc;
}

/* ------------------------------
   Booking column (right)
------------------------------ */

.aside {
  position:relative;
  align-self:start;
}

/* NOT sticky by default – plain card */
.booking {
  position:static;
}

.price-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.price .num {
  font-size:22px;
  font-weight:600;
}
.price .per {
  color:#64748b;
  margin-left:6px;
}
.rating {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#0f172a;
}
.rating svg {
  width:16px;
  height:16px;
  fill:#f59e0b;
}

/* Booking form */
.book-form {
  display:grid;
  gap:10px;
}
.book-form .row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.book-form label {
  display:grid;
  gap:6px;
  font-weight:600;
  font-size:14px;
}
.book-form input,
.book-form select,
.book-form textarea {
  height:44px;
  border-radius:12px;
  border:1px solid #e6ebf4;
  padding:0 12px;
  font:inherit;
  background:#fff;
}
.book-form textarea {
  height:auto;
  padding:10px 12px;
  min-height:92px;
}
.book-form .full {
  grid-column:1 / -1;
}
.book-form .btn.full {
  width:100%;
  border-radius:12px;
  height:46px;
}

.summary {
  margin-top:6px;
  display:grid;
  gap:6px;
}
.summary .total {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:800;
  padding-top:6px;
  border-top:1px solid #eaeef5;
}

.tiny {
  font-size:.85rem;
}
.center {
  text-align:center;
}

/* ------------------------------
   Auth prompt dialog
------------------------------ */

#authPrompt::backdrop {
  background:rgba(15,23,42,.45);
}
#authPrompt {
  border:0;
  padding:0;
  width:min(420px,92vw);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
  background:transparent;
}
.auth-modal {
  background:#fff;
  border-radius:16px;
  padding:16px;
}
.auth-modal .hd {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.auth-modal .hd h3 {
  margin:0;
  font-size:18px;
  letter-spacing:-.01em;
}
.auth-modal .bd {
  margin-top:8px;
  color:#64748b;
}
.auth-modal .ft {
  margin-top:14px;
  display:grid;
  gap:8px;
}
.auth-modal .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:600;
  text-decoration:none;
}
.auth-modal .btn.primary {
  background:linear-gradient(90deg,#025fbc,#06a2dd);
  color:#fff;
  border:0;
}
.auth-modal .x {
  background:none;
  border:0;
  cursor:pointer;
  padding:6px;
  border-radius:8px;
}
.auth-modal .x svg {
  width:18px;
  height:18px;
}

/* ------------------------------
   Mini availability calendar
------------------------------ */

.mini-cal {
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
  background:#fff;
  box-shadow:none;
  margin-bottom:10px;
}
.mini-cal header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.mini-cal .navbtn {
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:10px;
  height:32px;
  width:32px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.mini-cal .month {
  font-weight:700;
}
.mini-cal .wk {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  font-size:.8rem;
  color:#6b7280;
  margin-bottom:4px;
  text-align:center;
}
.mini-cal .grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
}
.mini-cal .grid button {
  height:34px;
  border:1px solid #e6ebf4;
  background:#f8fafc;
  border-radius:8px;
  font:inherit;
  cursor:pointer;
}
.mini-cal .grid button:hover {
  box-shadow:0 8px 22px rgba(15,23,42,.12);
}
.mini-cal .grid button[disabled] {
  opacity:.45;
  cursor:not-allowed;
  text-decoration:line-through;
}
.mini-cal .grid button.is-out {
  opacity:.4;
}
.mini-cal .grid button.is-today {
  border-color:#cfe4ff;
}
.mini-cal .grid button.is-selected {
  background:linear-gradient(90deg,#025fbc,#06a2dd);
  color:#fff;
  border-color:transparent;
}

/* Dot markers by status (available / booked / blackout) */
.mini-cal .grid button[data-status="available"]::after,
.mini-cal .grid button[data-status="booked"]::after,
.mini-cal .grid button[data-status="blackout"]::after {
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  display:inline-block;
  margin-left:6px;
  vertical-align:middle;
}
.mini-cal .grid button[data-status="available"]::after {
  background:#16a34a;
}
.mini-cal .grid button[data-status="booked"]::after {
  background:#dc2626;
}
.mini-cal .grid button[data-status="blackout"]::after {
  background:#9ca3af;
}

/* Legend layout */
.mini-cal .legend {
  display:flex;
  gap:12px;
  font-size:12px;
  color:#6b7280;
  margin-top:8px;
  flex-wrap:wrap;
}
.mini-cal .legend span {
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.mini-cal .legend span::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
}
.mini-cal .legend .a::before { background:#16a34a; }
.mini-cal .legend .l::before { background:#f59e0b; }
.mini-cal .legend .b::before { background:#dc2626; }
.mini-cal .legend .c::before { background:#9ca3af; }
.mini-cal .legend .u { opacity:.7; }

/* ------------------------------
   Deal pills (global)
------------------------------ */

.deal-pill {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:6px 12px;
  border-radius:9999px;
  font-weight:600;
  font-size:.85rem;
  line-height:1.1;
  white-space:nowrap;
  letter-spacing:.2px;
  border:1px solid transparent;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.deal-pill .until {
  font-weight:600;
  opacity:.85;
}

/* Generic active / upcoming states (non-booking) */
.deal-pill.deal-pill--active {
  background:var(--deal-active-bg);
  color:var(--deal-active-text);
  border-color:var(--deal-active-border);
}
.deal-pill.deal-pill--upcoming {
  background:var(--deal-upcoming-bg);
  color:var(--deal-upcoming-text);
  border-color:var(--deal-upcoming-border);
}

/* If your upcoming deals render as a list on the details page */
.upcoming-deals {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.upcoming-deals .deal-pill {
  margin:0;
}

/* Optional tiny dot icon before text */
.deal-pill::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:currentColor;
  opacity:.25;
}

/* Scoped deal badges that come from views */
.deal-badge.deal-pill,
.deal-label.deal-pill,
.listing-detail .deal-badge.deal-pill,
.listing-detail .deal-label.deal-pill {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

/* ------------------------------
   Booking card: canonical deal geometry
------------------------------ */

#bookingCard {
  --deal-pad-y: 8px;
  --deal-pad-x: 14px;
  --deal-gap: 10px;
  --deal-radius: 9999px;
  --deal-font: 13px;
  --deal-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Shared geometry for active + upcoming within booking card */
#bookingCard .deal-pill,
#bookingCard .deal-upcoming {
  display:inline-flex !important;
  align-items:center !important;
  gap:var(--deal-gap) !important;
  padding:var(--deal-pad-y) var(--deal-pad-x) !important;
  border-radius:var(--deal-radius) !important;
  border-width:1px !important;
  border-style:solid !important;
  font-size:var(--deal-font) !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  box-shadow:var(--deal-shadow) !important;
  margin:8px 0 10px !important;
}

/* Active = yellow */
#bookingCard .deal-pill {
  background:var(--deal-active-bg) !important;
  color:var(--deal-active-text) !important;
  border-color:var(--deal-active-border) !important;
}

/* Upcoming = blue */
#bookingCard .deal-upcoming {
  background:var(--deal-upcoming-bg) !important;
  color:var(--deal-upcoming-text) !important;
  border-color:var(--deal-upcoming-border) !important;
  margin-bottom:16px !important; /* extra breathing room above calendar */
}

/* Nested pills under “Upcoming deals” stay blue */
#bookingCard .deal-upcoming .deal-pill {
  background:var(--deal-upcoming-bg) !important;
  color:var(--deal-upcoming-text) !important;
  border-color:var(--deal-upcoming-border) !important;
  box-shadow:none !important;
}

/* Normalize container that holds upcoming pills */
#bookingCard .upcoming-deals {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 8px;
  padding-left:0;
  list-style:none;
}

/* ------------------------------
   Host / partner cards
------------------------------ */

/* Older host card style (ej-hostcard) */
.ej-hostcard {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
}
.ej-hostavatar {
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  background:#eef2f7;
  border:1px solid #e5e7eb;
}
.ej-hosttitle {
  font-weight:600;
  color:#0f172a;
  font-size:16px;
}
.ej-badge {
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  background:#ecfeff;
  border:1px solid #67e8f9;
  color:#0e7490;
  font-size:12px;
}
.ej-hoststats {
  margin:6px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:#475569;
}
.ej-hoststats li {
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.ej-hostbio {
  margin-top:8px;
  font-size:13px;
  color:#334155;
}
.ej-hostactions {
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Newer listing partner card */
.listing-partner-card {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 18px;
  border-radius:18px;
  background:linear-gradient(135deg,#f9fafb 0%,#eef2ff 40%,#f9fafb 100%);
  border:1px solid #e2e8f0;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.listing-partner-card h3 {
  font-size:14px;
  letter-spacing:.03em;
  text-transform:none;
  color:#020617;
  margin:0;
}
.listing-partner-main {
  display:flex;
  align-items:center;
  gap:14px;
}
.listing-partner-avatar {
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:999px;
  overflow:hidden;
  background:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 0 2px rgba(248,250,252,1),
    0 0 0 3px rgba(15,23,42,.08);
}
.listing-partner-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.listing-partner-text {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.listing-partner-text .partner-name,
.listing-partner-text strong,
.listing-partner-text h4 {
  font-size:15px;
  font-weight:600;
  color:#020617;
}
.listing-partner-text p {
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:#64748b;
}

/* HostInfo specific layout (image + text) */
#hostInfo .ej-hostrow {
  display:grid;
  grid-template-columns:20% 80%;
  gap:12px;
  align-items:start;
}
@media (max-width:720px){
  #hostInfo .ej-hostrow {
    grid-template-columns:1fr;
  }
}

#hostInfo .host-row {
  display:flex;
  align-items:center;
  gap:14px;
}
.host-meta {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Host avatar variants */
#hostInfo .host-avatar {
  width:100%;
  max-width:120px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:12px;
}
#hostInfo .host-name {
  font-weight:600;
  font-size:16px;
  color:#0f172a;
}
#hostInfo .host-bio {
  margin-top:0;
  font-size:13px;
  color:#334155;
  line-height:1.45;
}

/* Force specific avatar circle */
#hostInfo #hostAvatar {
  width:96px;
  height:96px;
  border-radius:50% !important;
  object-fit:cover;
  border:1px solid #e5e7eb;
  background:#eef2f7;
}

/* Unified avatar circle helper */
#hostInfo .ej-hostavatar {
  display:block;
  width:64px !important;
  height:64px !important;
  max-width:none !important;
  aspect-ratio:1/1;
  border-radius:999px !important;
  object-fit:cover;
  flex-shrink:0;
  margin-right:12px;
  border:1px solid #e5e7eb;
  background:#eef2f7;
}

@media (max-width:480px){
  #hostInfo .ej-hostavatar {
    width:56px !important;
    height:56px !important;
  }
}

/* ------------------------------
   Kind-specific content toggles
------------------------------ */

body[data-kind="vendor"] #amenitiesCard,
body[data-kind="vendor"] #specsVenue,
body[data-kind="vendor"] #policiesVenue,
body[data-kind="vendor"] #specsRental,
body[data-kind="vendor"] #deliveryRental {
  display:none !important;
}
body[data-kind="venue"] #vendorHighlightsCard,
body[data-kind="venue"] #vendorServicesCard,
body[data-kind="venue"] #vendorDetailsCard,
body[data-kind="venue"] #specsRental,
body[data-kind="venue"] #deliveryRental {
  display:none !important;
}
body[data-kind="rental"] #specsVenue,
body[data-kind="rental"] #policiesVenue,
body[data-kind="rental"] #vendorHighlightsCard,
body[data-kind="rental"] #vendorServicesCard,
body[data-kind="rental"] #vendorDetailsCard {
  display:none !important;
}

/* ------------------------------
   Photo modal (full gallery)
------------------------------ */

#photoModal {
  padding:0;
  border:none;
  background:transparent;
}
#photoModal::backdrop {
  background:rgba(0,0,0,.9);
}
.photo-modal {
  width:min(1200px,92vw);
  height:min(820px,90vh);
  display:grid;
  grid-template-rows:1fr auto;
  gap:12px;
  align-items:center;
  justify-items:center;
  margin:0 auto;
}
.pm_main {
  position:relative;
  width:100%;
  height:100%;
  background:#000;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pm_main img {
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.pm_navbtn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.45);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter:blur(2px);
}
.pm_navbtn:hover {
  background:rgba(0,0,0,.6);
}
.pm_prev { left:10px; }
.pm_next { right:10px; }

.pm_close {
  position:absolute;
  top:10px;
  left:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.45);
  color:#fff;
  height:36px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.pm_close:hover {
  background:rgba(0,0,0,.6);
}

.pm_counter {
  position:absolute;
  bottom:10px;
  right:12px;
  color:#fff;
  font-weight:600;
  background:rgba(0,0,0,.45);
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.3);
}

.pm_strip {
  width:100%;
  display:grid;
  grid-auto-flow:column;
  gap:10px;
  overflow-x:auto;
  padding:6px 2px 2px;
}
.pm_strip::-webkit-scrollbar {
  height:8px;
}
.pm_strip::-webkit-scrollbar-thumb {
  background:#374151;
  border-radius:999px;
}
.pm_thumb {
  width:110px;
  height:76px;
  object-fit:cover;
  border-radius:10px;
  border:2px solid transparent;
  opacity:.85;
  cursor:pointer;
  user-select:none;
}
.pm_thumb[aria-current="true"] {
  border-color:#fff;
  opacity:1;
}

/* ------------------------------
   Mobile layout tweaks
------------------------------ */

@media (max-width:960px){
  .crumbs {
    margin-top:4px;
    font-size:12px;
    white-space:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .listing-head {
    flex-direction:row;
    align-items:center;
    gap:12px;
  }

  .listing-head h1 {
    font-size:22px;
  }

  .head-actions {
    margin-left:auto;
    width:auto;
    display:flex;
    gap:8px;
    align-items:center;
  }

  .layout {
    display:block;
    margin-top:12px;
  }
  .layout .main,
  .layout .aside {
    max-width:100%;
    width:100%;
  }
  .layout .aside {
    margin-top:16px;
  }

  .card {
    margin-bottom:12px;
    padding:16px 16px 14px;
    box-shadow:0 10px 26px rgba(15,23,42,.08);
  }

  /* Booking card as bottom sheet */
  .booking.card {
    border-radius:16px 16px 0 0;
    margin-bottom:0;
    box-shadow:0 -8px 24px rgba(15,23,42,.16);
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .booking.card {
      padding-bottom:calc(16px + env(safe-area-inset-bottom));
    }
  }

  #hostInfo.card {
    margin-top:12px;
  }

  .specs .spec-row {
    font-size:13px;
  }

  .map-ph {
    border-radius:12px;
  }

  /* Unified smaller type on mobile */
  .card h2,
  .card h3 {
    font-size:16px;
    line-height:1.3;
  }

  .card p,
  .card .muted,
  .chip-list > *,
  .tiny {
    font-size:13px;
  }

  .card {
    font-size:13px;
  }
}

@media (max-width:480px){
  .listing-head h1 {
    font-size:20px;
  }
  .gallery .g-main {
    max-height:260px;
  }
}

/* Hide mobile bottom tab bar on desktop for listing page */
@media (min-width:960px){
  #mbtabbar {
    display:none !important;
  }
}

/* ------------------------------
   Chip helpers
------------------------------ */

.chip-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip {
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-radius:999px;
  font-size:13px;
  color:#111827;
}

/* ------------------------------
   Share modal (listing-share.js)
------------------------------ */

.share-overlay {
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:16px;
  background:rgba(15,23,42,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease-out;
}
.share-overlay.is-open {
  opacity:1;
  pointer-events:auto;
}
.share-dialog {
  width:100%;
  max-width:420px;
  background:#ffffff;
  border-radius:20px;
  padding:18px 18px 14px;
  box-shadow:0 18px 50px rgba(15,23,42,.25);
  font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
@media (min-width:768px){
  .share-overlay {
    align-items:center;
  }
}
.share-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
}
.share-title {
  margin:0;
  font-size:15px;
  font-weight:600;
  color:#0f172a;
}
.share-close {
  border:none;
  background:transparent;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  padding:0 4px;
  color:#64748b;
}
.share-close:hover,
.share-close:focus-visible {
  color:#0f172a;
}
.share-sub {
  margin:0 0 12px;
  font-size:13px;
  color:#64748b;
}
.share-list {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.share-option {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  padding:9px 14px;
  font-size:13px;
  font-weight:500;
  color:#0f172a;
  text-decoration:none;
  cursor:pointer;
}
.share-option.primary {
  background:linear-gradient(120deg,#025fbc,#06a2dd);
  border-color:transparent;
  color:#ffffff;
}
.share-option:hover,
.share-option:focus-visible {
  border-color:#cbd5f5;
  box-shadow:0 4px 12px rgba(15,23,42,.18);
}
.share-option.primary:hover,
.share-option.primary:focus-visible {
  box-shadow:0 6px 18px rgba(2,95,188,.45);
}

/* Dark-mode hint if system ever uses it */
@media (prefers-color-scheme:dark){
  .share-dialog {
    background:#020617;
    border:1px solid #1f2937;
  }
  .share-title {
    color:#e5e7eb;
  }
  .share-sub {
    color:#9ca3af;
  }
  .share-option {
    background:#020617;
    border-color:#1f2937;
    color:#e5e7eb;
  }
}