.HomeCardContainer { width: 99%; box-sizing: border-box; background-color: #f3f3f3; margin-bottom: 15px !important;}
.Homecard {
  width: 100%;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  overflow: hidden;
  position: relative;
  contain: content;
}
.Homecard__Content { padding-left: 5px; background: #ffffff; }
.Homecard__PhotoWrapper,
.Homecard__PhotoWrapper_Tall { position: relative; }
.details-list-stats { font-size: 15px; color: #333; display: flex; align-items: center; margin-bottom: 2px; padding: 0 2px;}
.listing-list-stats { font-size: 12px; color: #333; display: flex; align-items: center; margin-bottom: 5px; padding: 0 2px;}
.listing-list-agency { font-size: 12px; font-weight: normal; font-style: italic; color: #333; margin-bottom: 5px; padding: 0 2px; }
.listing-list-address {
  font-size: 13px; color: #757575; margin-bottom: 3px; font-weight: normal; padding: 0 2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
}
.premium-list-address {
  font-size: 13px; color: #757575; margin-bottom: 3px; font-weight: normal; padding: 0 2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;
}
.displayAddr { color:#757575;font-size:16px;margin:5px 0;}

/* ---- Stats row layout (shared) ---- */
.bp-Homecard__Stats--details,
.details-Homecard__Stats--details {
  display: flex;
  gap: 8px;
  margin-bottom: 2px;
  color: #333; /* day */
}

/* Font sizes (different per variant) */
.bp-Homecard__Stats--details { font-size: 12px; }
.details-Homecard__Stats--details { font-size: 15px; }

/* Night theme colors */
html[data-theme="night"] .bp-Homecard__Stats--details,
html[data-theme="night"] .details-Homecard__Stats--details {
  color: #fff;
}

/* Keep segments aligned */
.bp-Homecard__Stats--beds,
.bp-Homecard__Stats--baths,
.bp-Homecard__Stats--parking {
  display: inline-flex;
  align-items: center;
}


html[data-theme="night"] .HomeCardContainer { width: 99%; box-sizing: border-box; background-color: #000000; margin-bottom: 15px !important;}
html[data-theme="night"] .Homecard {
  width: 100%; background: #000000; border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  overflow: hidden; position: relative; contain: content;
}


html[data-theme="night"] .details-list-stats { font-size: 15px; color: #ffffff; display: flex; align-items: center; margin-bottom: 2px; padding: 0 2px;}
html[data-theme="night"] .listing-list-stats { font-size: 12px; color: #ffffff; display: flex; align-items: center; margin-bottom: 5px; padding: 0 2px;}
html[data-theme="night"] .listing-list-agency { font-size: 12px; font-weight: normal; font-style: italic; color: #b8b8b8; margin-bottom: 5px; padding: 0 2px; }
html[data-theme="night"] .listing-list-address {
  font-size: 13px; color: #ffffff; margin-bottom: 3px; font-weight: normal; padding: 0 2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="night"] .premium-list-address {
  font-size: 13px; color: #ffffff; margin-bottom: 3px; font-weight: normal; padding: 0 2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="night"] .displayAddr { color:#ffffff;font-size:16px;margin:5px 0;}
html[data-theme="night"] .details-stats { color: #b8b8b8;}

html[data-theme="night"] .Homecard__PhotoWrapper  { border-radius: 10px;position: relative; border: 1px solid #383838; }
html[data-theme="night"] .Homecard__PhotoWrapper_Tall { position: relative; border: 1px solid #383838; }
html[data-theme="night"] .Homecard__Content { padding-left: 9px; background: #000000; }


/* ========== Cards / Homecard ========== */
.homecard-short .Homecard { border-radius: 12px; display: flex; }
.homecard-short .Homecard__Content { flex: 1; display: flex; flex-direction: column; }

.Homecard__PhotoWrapper_Tall {
  flex: 0 0 180px;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #e9e9e9;
}

.Homecard__PhotoWrapper {
  flex: 0 0 160px;
  height: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #e9e9e9;
}

.Homecard__Photo--image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}


.card-header { display: flex; align-items: center; }
.listing-list-content { flex-grow: 1; padding: 10px; display: flex; flex-direction: column; overflow: hidden; }
.listing-list-price {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 4px 10px 0 2px; border-radius: 5px; margin: 4px 0;
  font-size: 18px; font-weight: bold; color: #007bff;
}
.listing-list-price-value { font-size: 18px; font-weight: bold; color: #007bff; }
.loading-gif { position: absolute; width: 50px; height: 50px; z-index: 10; }
.new-label {
  position: absolute; bottom: 10px; left: 10px;
  background-color: green; color: white; padding: 5px 10px; font-size: 11px; font-weight: bold; border-radius: 3px; z-index: 10;
}
.save-icon, .loggedin-icon { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; cursor: pointer; z-index: 10;}

/* stats + bullets (merged) */
.listing-list-icon { width: 15px; height: auto; margin-right: 5px; }
.bp-Homecard__Stats { display: block; margin-top: 4px !important; margin-right: 5px; padding: 0; }
.bp-Homecard__Stats--listingtype { display: block; margin-bottom: 4px; }

.listing-list-bullet { display: inline-block; width: 10px; height: 10px; background: green; border-radius: 50%; margin-right: 5px;} 

/* Home card containers */
.HomeCardContainer.homecard-tall { border-radius: 12px; padding: 0px; height: auto !important; overflow: visible;}
html[data-theme="night"] .HomeCardContainer.homecard-tall { border-radius: 12px; border: 1px solid #383838; padding: 0px; height: auto !important; overflow: visible;}
.HomeCardContainer.homecard-short { height: 145px; display: flex; }


/* Unify common image rule for wrappers */
:is(.Homecard__PhotoWrapper, .Homecard__PhotoWrapper_Tall, .carousel__PhotoWrapper) > img.Homecard__Photo--image {
  display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease;
}


/* ================================
   LISTING SKELETON (homecard-short)
   Paste AFTER your current skeleton CSS
   ================================ */

/* Stop old listing-skeleton rules from changing layout */
.HomeCardContainer.skeleton .Homecard{
  gap: 0 !important;
  padding: 0 !important;
}

/* Non-clickable while loading */
.HomeCardContainer.skeleton,
.total-listings-banner.skeleton-banner{
  pointer-events: none;
}

/* Shimmer base */
.skel{
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.08);
}
.skel::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-120%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  animation: skelSweep 1.35s ease-in-out infinite;
}
@keyframes skelSweep{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Night mode shimmer */
html[data-theme="night"] .skel{
  background: rgba(255,255,255,0.10);
}
html[data-theme="night"] .skel::after{
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.22),
    transparent
  );
}

/* Size helpers */
.skel--h18{ height: 18px; }
.skel--h14{ height: 14px; }
.skel--h12{ height: 12px; }
.skel--w60{ width: 60%; }
.skel--w45{ width: 45%; }
.skel--w40{ width: 40%; }
.skel--w35{ width: 35%; }
.skel--w18{ width: 18%; }
.skel--icon{ width: 20px; height: 20px; border-radius: 6px; }

/* Banner skeleton: keep same header footprint */
.total-listings-banner.skeleton-banner{
  padding-bottom: 20px; /* matches your .total-listings-banner */
}
.total-listings-banner.skeleton-banner .banner-count-wrapper{
  align-items: center;
}
.total-listings-banner.skeleton-banner .skel-sort-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Card skeleton: match your existing wrappers' sizes */
.HomeCardContainer.homecard-short.skeleton .Homecard__PhotoWrapper{ flex: 0 0 160px; height: 145px;}
.HomeCardContainer.homecard-short.skeleton .card-skel__media{ width: 100%; height: 100%; border-radius: 0;}
.HomeCardContainer.homecard-short.skeleton .listing-list-content{ padding: 10px;  gap: 8px;}
.HomeCardContainer.homecard-short.skeleton .card-skel__price{ height: 18px; width: 58%; border-radius: 8px; margin: 2px 0 6px;}
.HomeCardContainer.homecard-short.skeleton .bp-Homecard__Stats--listingtype{ margin-bottom: 6px;}
.HomeCardContainer.homecard-short.skeleton .bp-Homecard__Stats--details{ gap: 8px; margin-bottom: 6px;}
.HomeCardContainer.homecard-short.skeleton .card-skel__addr{ height: 12px; width: 92%; border-radius: 8px;}
.HomeCardContainer.homecard-short.skeleton .card-skel__addr2{ height: 12px; width: 82%; border-radius: 8px;}
.HomeCardContainer.homecard-short.skeleton .card-skel__agency{ height: 12px; width: 55%; border-radius: 8px; opacity: 0.9;}

.total-listings-banner.skeleton-banner{ padding-top: 8px; padding-bottom: 26px; }
.total-listings-banner.skeleton-banner .banner-count-wrapper{ padding: 8px 0; min-height: 62px; box-sizing: border-box;}


/* Status labels */
.status-label-live {
  position: absolute; bottom: 10px; left: 10px; background-color: green; color: white; padding: 5px 10px;
  font-size: 11px; font-weight: bold; border-radius: 3px; z-index: 10;
}
.status-label-pending {
  position: absolute; bottom: 10px; left: 10px; background-color: #FFB92E; color: white; padding: 5px 10px;
  font-size: 11px; font-weight: bold; border-radius: 3px; z-index: 10;
}

/* Agent listing tier */
.agent-listing-tier { font-size: 12px; font-weight: bold; }
.agent-listing-tier__value { font-style: italic; }


#agentlisting-content
.agentlisting-upgrade-btn {
  display: none !important;
}



/* =========================================================
   Marker popup first-open height fix
   Prevents popup appearing too tall before Swiper CSS/JS settles
   ========================================================= */

.marker-popup{
  width: min(360px, calc(100vw - 24px)) !important;
  max-width: min(360px, calc(100vw - 24px)) !important;
  overflow: hidden !important;
}

/* Reserve final carousel height immediately */
.marker-popup .marker-carousel-container,
.marker-popup .marker-swiper,
.marker-popup .marker-swiper.swiper,
.marker-popup .marker-swiper.swiper-container{
  width: 100% !important;
  height: 145px !important;
  max-height: 145px !important;
  min-height: 145px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Pre-Swiper layout: keep slides horizontal immediately */
.marker-popup .marker-swiper .swiper-wrapper{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 145px !important;
  max-height: 145px !important;
  min-height: 145px !important;
  box-sizing: border-box !important;
}

/* Each slide must occupy exactly one popup width before Swiper initializes */
.marker-popup .marker-swiper .swiper-slide{
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 145px !important;
  max-height: 145px !important;
  min-height: 145px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Keep the card itself locked to the final popup height */
.marker-popup .HomeCardContainer.marker-homecard,
.marker-popup .marker-homecard .Homecard{
  width: 100% !important;
  height: 145px !important;
  max-height: 145px !important;
  min-height: 145px !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Ensure card layout is already final before Swiper takes over */
.marker-popup .marker-homecard .Homecard{
  display: flex !important;
  align-items: stretch !important;
}

/* Match marker popup image column height */
.marker-popup .marker-homecard .Homecard__PhotoWrapper,
.marker-popup .marker-homecard .marker__PhotoWrapper{
  flex: 0 0 160px !important;
  width: 160px !important;
  height: 145px !important;
  max-height: 145px !important;
  min-height: 145px !important;
  overflow: hidden !important;
}

/* Avoid text content temporarily expanding popup height */
.marker-popup .marker-homecard .listing-list-content,
.marker-popup .marker-homecard .marker-list-content,
.marker-popup .marker-homecard .Homecard__Content{
  height: 145px !important;
  max-height: 145px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}


/* =========================================================
   MARKER POPUP (DROP-IN REPLACEMENT)
   Goal: popup + swiper match HomeCardContainer homecard-short size
   ========================================================= */

/* Marker carousel */
.marker-carousel-container { position: relative; width: 100%; max-height: 450px; padding: 0; overflow: hidden; border-radius: 8px; background: #fff;}
.marker-carousel { display: flex; flex-direction: row; width: 100%; overflow-x: auto; scroll-behavior: smooth; transition: transform .5s ease-in-out;}
.marker-carousel-item { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0; }
.marker-carousel-image { width: 100%; height: 120px; border-radius: 4px; margin-bottom: 2px; object-fit: cover; }

/* ========== Marker popup ========== */
.marker-popup {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 40px); max-width: 340px; background: #fff;
  border-top: 1px solid #ccc; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000; padding: 0px; border-radius: 10px;
}
.marker-carousel-details { text-align: left; padding: 0 10px; }
.marker-carousel-button {
  position: absolute; top: 50%; transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 5px 10px; cursor: pointer; z-index: 10;
}
.marker-carousel-address {
  font-size: 10px; color: #333; margin-bottom: 4px; font-weight: normal; padding: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;
}
.featured-listing-price, .property-stats, .marker-carousel-address { text-align: left; margin: 5px 0; }
.property-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.listing-label { font-size: 14px; font-weight: bold; margin-bottom: 5px; }


/* Ensure nav positions relative to the swiper area */
.marker-popup .marker-swiper,
.marker-popup .swiper-container{
  position: relative;
}

/* Glass pill nav — vertically centered */
.marker-popup .swiper-button-next,
.marker-popup .swiper-button-prev{
  width: 34px !important;
  height: 34px !important;
  top: 50% !important;        /* <-- key */
  bottom: auto !important;
  margin-top: 0 !important;   /* override Swiper's negative margin centering */
  transform: translateY(-50%);/* <-- key */
  border-radius: 999px;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);

  color: #fff !important;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}

/* Arrow icon size */
.marker-popup .swiper-button-next:after,
.marker-popup .swiper-button-prev:after{
  font-size: 14px !important;
  font-weight: 700;
}

/* Position slightly inside the popup */
.marker-popup .swiper-button-prev{ left: 10px !important; }
.marker-popup .swiper-button-next{ right: 10px !important; }

/* Hover/active — keep translateY so it stays centered */
.marker-popup .swiper-button-next:hover,
.marker-popup .swiper-button-prev:hover{
  background: rgba(0,0,0,0.55);
  transform: translateY(-50%) scale(1.04);
}
.marker-popup .swiper-button-next:active,
.marker-popup .swiper-button-prev:active{
  transform: translateY(-50%) scale(0.98);
}

/* Disabled */
.marker-popup .swiper-button-disabled{
  opacity: 0.25 !important;
  pointer-events: none !important;
}


/* =========================================================
   Marker popup: ALWAYS show exactly 1 full listing at rest
   (drop-in override; paste AFTER your current CSS)
   ========================================================= */

.marker-popup{ 
  left: 50%; 
  transform: translateX(-50%); 
  bottom: 90px; 
  will-change: left, top; 
  border-radius: 10px;       
  overflow: visible;            /* important: don't clip the shadow */
  border: 0 !important; /* remove the light edge */
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

.marker-popup::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

.marker-popup .marker-carousel-container{
  border-radius: inherit;
  overflow: hidden;                 /* critical for swiper + no seams */
  box-shadow: none !important;      /* remove your old inset hack */
}

/* Swiper must hide overflow so you cannot see the next slide */
.marker-popup .marker-carousel-container .swiper-container{
  width: 100%; 
  overflow: hidden;           /* critical */
  box-sizing: border-box;
}

/* Force each slide to be exactly 100% width */
.marker-popup .marker-carousel-container .swiper-wrapper{
  align-items: stretch;
}

.marker-popup .marker-carousel-container .swiper-slide{
  width: 100% !important;     /* critical */
  flex: 0 0 100% !important;  /* critical */
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;              /* lets the inner card stretch nicely */
}

/* Your slide content must also be full width */
.marker-popup .marker-carousel-item{
  width: 100% !important;     /* critical */
  flex: 0 0 100% !important;  /* critical */
  box-sizing: border-box;
}

/* Make sure inner content can fill the slide */
.marker-popup .marker-carousel-item > *{
  width: 100% !important;
  box-sizing: border-box;
}

/* Marker popup carousel image: fixed 100px height */
.marker-popup .marker-carousel-image{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Ensure the slide/card doesn’t force the image taller */
.marker-popup .marker-carousel-item{
  align-items: stretch !important;
}

/* Force swiper slides to occupy full popup width (no partial next slide) */
.marker-popup .marker-swiper.swiper-container { overflow: hidden; }
.marker-popup .marker-swiper .swiper-slide { width: 100% !important; box-sizing: border-box; }
.marker-popup .HomeCardContainer.marker-homecard { width: 100% !important; margin: 0 !important; }
.marker-popup .Homecard { width: 100% !important; }


/* --- Marker Swiper: ONLY ONE full card visible (no half/half) --- */
.marker-popup .marker-swiper { overflow: hidden; }
.marker-popup .marker-swiper .swiper-wrapper { align-items: stretch; }
.marker-popup .marker-swiper .swiper-slide {
  width: 100% !important;
  flex: 0 0 100% !important;
  box-sizing: border-box;
}

/* Marker popup: avoid first-click stacked-slide flash while Swiper is lazy-loading.
   These rules provide the minimum Swiper layout before swiper-bundle.css/js arrive,
   then reveal the carousel only after Swiper has initialized. */
.marker-popup .marker-swiper .swiper-wrapper {
  display: flex;
  width: 100%;
}
.marker-popup .marker-swiper .swiper-slide {
  flex-shrink: 0;
}
.marker-popup .marker-swiper.is-preinit {
  opacity: 0;
  pointer-events: none;
}
.marker-popup .marker-swiper.is-ready {
  opacity: 1;
  transition: opacity .12s ease;
}
.marker-popup .marker-swiper.is-preinit .swiper-wrapper {
  transform: translate3d(0,0,0);
}

/* Card fills slide */
.marker-popup .HomeCardContainer.marker-homecard { width: 100% !important; margin: 0 !important; }
.marker-popup .Homecard { width: 100% !important; }

.marker-popup .marker-carousel-image { width: 100%; height: 100% !important; object-fit: cover; }

/* Marker popup: fraction pagination styled as (3 / 4) */
.marker-carousel-container .swiper-pagination-fraction::before { content: "("; }
.marker-carousel-container .swiper-pagination-fraction::after  { content: ")"; }

.marker-list-address {
  font-size: 12px; color: #757575; margin-bottom: 5px; font-weight: normal; padding: 0 2px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="night"] .marker-list-address {
  font-size: 12px; color: #ffffff; margin-bottom: 5px; font-weight: normal; padding: 0 2px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
}

.marker-list-agency { font-size: 11px; font-weight: normal; font-style: italic; color: #333; margin-bottom: 5px; padding: 0 2px; }
html[data-theme="night"] .marker-list-agency { font-size: 11px; font-weight: normal; font-style: italic; color: #b8b8b8; margin-bottom: 5px; padding: 0 2px; }

.marker-list-price { display: flex; align-items: center; justify-content: flex-start; padding: 4px 10px 0 2px; border-radius: 5px; margin: 4px 0; font-size: 18px; font-weight: bold; color: #007bff;}
.marker-Homecard__Stats { display: block; margin-top: 0px !important; margin-right: 5px; padding: 0; }

/* Marker popup: ensure pills/overlays are visible above photo/spinner */
.marker-homecard .Homecard__PhotoWrapper { position: relative; }

.marker-homecard .new-label,
.marker-homecard .banner-overlay,
.marker-homecard .viewed-label{
  z-index: 60 !important;
  pointer-events: none;
}

.marker-homecard .viewed-label{
  display: inline-flex !important; /* in case your base CSS hides it unless .is-visible */
}



/* ===== Marker popup overlays: force visible + positioned ===== */
.marker-popup .marker-homecard .Homecard__PhotoWrapper{
  position: relative;
  overflow: hidden;
}

/* Vertical centering for cover images (won't hurt if already fine) */
.marker-popup .marker-homecard .Homecard__Photo--image,
.marker-popup .marker-homecard .marker-carousel-image{
  object-position: center center !important;
}



/* NEW */
.marker-popup .marker-homecard .new-label{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 80 !important;
}

/* SOLE banner */
.marker-popup .marker-homecard .banner-overlay{
  position: absolute;
  top: 8px;
  left: 8px;          /* adjust if you want it elsewhere */
  z-index: 80 !important;
}

.marker__PhotoWrapper { flex: 0 0 160px; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;}

/* Only disable touch actions while dragging (keeps Swiper usable) */
.marker-popup.is-dragging{
  touch-action: none;
  user-select: none;
}

/* Ensure popup can actually move with left/top */
.marker-popup { position: fixed; cursor: grab; }
.marker-popup.is-dragging { cursor: grabbing; }

/* === Fix 1px “white seam” caused by subpixel rounding under the photo === */
.marker-popup .Homecard__PhotoWrapper,
.marker-popup .marker__PhotoWrapper,
.marker-popup .col-img,
.marker-popup .img-size{
  border: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

/* Overscan images slightly so they always cover the wrapper fully */
.marker-popup .Homecard__Photo--image,
.marker-popup .marker-carousel-image,
.marker-popup .col-img img,
.marker-popup .img-size img{
  display: block !important;
  width: 100% !important;
  height: calc(100% + 2px) !important;  /* key: fixes 1px short */
  object-fit: cover !important;
  margin: 0 !important;
  border: 0 !important;
  vertical-align: top !important;
}

/* --- Center the image spinner in the photo wrapper (marker popup) --- */
.marker-popup .Homecard__PhotoWrapper,
.marker-popup .marker__PhotoWrapper,
.marker-popup .col-img,
.marker-popup .img-size{
  position: relative !important;
}


/* === Pagination badge: TOP-LEFT (Option 2 variant) === */
.marker-popup .marker-swiper{ position: relative; }

/* Place the fraction badge top-left */
.marker-popup .swiper-pagination{
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;

  z-index: 120 !important;
  pointer-events: none !important;
}

/* Style the badge */
.marker-popup .swiper-pagination-fraction{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 10px !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,0.60) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25) !important;

  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
}

/* Keep your (3 / 4) formatting looking tidy */
.marker-popup .swiper-pagination-fraction .swiper-pagination-current,
.marker-popup .swiper-pagination-fraction .swiper-pagination-total{
  min-width: 10px;
  text-align: center;
}


#marker-popup .viewed-label.is-visible{
  display: inline-block !important;
  width: auto !important;
  left: auto !important;
  right: 8px !important;
  bottom: 8px !important;
}



/* ==========================================
   FIX: center spinner while it spins
   (your rotate animation was overwriting translate)
   Paste at VERY END of CSS
   ========================================== */

@keyframes oaiSpinCentered {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Ensure the photo area is the positioning context */
.marker-popup .Homecard__PhotoWrapper,
.marker-popup .marker__PhotoWrapper,
.marker-popup .col-img,
.marker-popup .img-size{
  position: relative !important;
}

/* Center + spin (covers both class and id variants) */
.marker-popup .Homecard__PhotoWrapper .loading-gif,
.marker-popup .marker__PhotoWrapper .loading-gif,
.marker-popup .col-img .loading-gif,
.marker-popup .img-size .loading-gif,
.marker-popup .Homecard__PhotoWrapper #loading-gif,
.marker-popup .marker__PhotoWrapper #loading-gif,
.marker-popup .col-img #loading-gif,
.marker-popup .img-size #loading-gif{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  z-index: 95 !important;
  transform-origin: center center !important;
  animation: oaiSpinCentered 0.9s linear infinite !important;
}

/* If your spinner is a DIV with .spinner (border spinner), center it too */
.marker-popup .Homecard__PhotoWrapper .spinner,
.marker-popup .marker__PhotoWrapper .spinner,
.marker-popup .col-img .spinner,
.marker-popup .img-size .spinner{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  z-index: 95 !important;
  transform-origin: center center !important;
  animation: oaiSpinCentered 0.9s linear infinite !important;
}