/* ==========================================================================
   "Enhanced" badge (owner, 8 Nov 2026)
   A small sparkle in the bottom-left corner of an enhanced listing photo; hover, keyboard focus or a tap shows
   "Enhanced with Softbnb photo algorithm". Large photos only: the listing page hero, the gallery and the photo
   viewer. Loaded only when the listing has an enhanced photo ($pp['enhanced_badge']).

   Markup:    resources/views/partials/enhanced_badge.blade.php
   Behaviour: js/sb-enhanced.js (tooltip on tap, the occasional sparkle morph, hero + viewer sync)

   Colours are pinned (it always sits on a photo): a soft dark glass disc with a white sparkle reads on light and
   dark photos alike, in the site's light and dark themes. Nothing here moves layout: the badge is absolutely
   positioned, and shows / hides with opacity + visibility.
   ========================================================================== */

.sb-enh {
  --sb-enh-size:  28px;   /* the visible disc */
  --sb-enh-hit:   44px;   /* the touch target around it (WCAG 2.5.5 / Apple HIG) */
  --sb-enh-inset: 12px;   /* disc edge to the photo's edge (DS --sb-3) */
  --sb-enh-pad:   calc((var(--sb-enh-hit) - var(--sb-enh-size)) / 2);
  --sb-enh-ease:  cubic-bezier(0.23, 1, 0.32, 1);   /* DS --sb-ease-out */

  position: absolute;
  left: calc(var(--sb-enh-inset) - var(--sb-enh-pad));
  bottom: calc(var(--sb-enh-inset) - var(--sb-enh-pad));
  z-index: 3;
  width: var(--sb-enh-hit);
  height: var(--sb-enh-hit);
  visibility: visible;
  opacity: 1;
  transition: opacity 240ms ease, visibility 0s linear 0s;
}
@media (min-width: 768px) {
  .sb-enh--lg { --sb-enh-size: 32px; --sb-enh-inset: 16px; }
}

/* Hidden (hero slide or viewer photo that is not enhanced): out of the tab order, no layout change. */
.sb-enh.is-off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

/* Two classes: the themes reset every button (.pp button / .pp-overlays button: colour, border, radius). */
.sb-enh .sb-enh__btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: inherit;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}
/* The ring goes round the disc, not the 44px target (beats .sb-page :focus-visible). */
.sb-enh .sb-enh__btn:focus { outline: none; }
.sb-enh .sb-enh__btn:focus-visible { outline: none; }

.sb-enh__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sb-enh-size);
  height: var(--sb-enh-size);
  border-radius: 50%;
  background: rgba(20, 16, 14, 0.56);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 1px 4px rgba(0, 0, 0, 0.24);
  opacity: 0.86;   /* quiet between plays; full on hover, focus, tap and while it plays */
  transition: opacity 180ms ease, background-color 180ms ease;
}
.sb-enh__ic {
  display: block;
  width: 62%;
  height: 62%;
  overflow: visible;
  fill: #fff;   /* pinned: the badge always sits on a photo */
  filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.35));
}

.sb-enh.is-open .sb-enh__disc,
.sb-enh.is-playing .sb-enh__disc,
.sb-enh .sb-enh__btn:focus-visible .sb-enh__disc { opacity: 1; background: rgba(20, 16, 14, 0.66); }
.sb-enh .sb-enh__btn:focus-visible .sb-enh__disc {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 0 2px #fff, 0 0 0 4px rgba(20, 16, 14, 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .sb-enh:hover .sb-enh__disc { opacity: 1; background: rgba(20, 16, 14, 0.66); }
}

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
.sb-enh__tip {
  position: absolute;
  left: calc(var(--sb-enh-pad) - 2px);
  bottom: calc(100% - var(--sb-enh-pad) + 8px);
  width: max-content;
  max-width: min(300px, calc(100vw - 40px));
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(20, 16, 14, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.28);
  color: #fff;
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transform-origin: 14px 100%;
  pointer-events: none;
  transition: opacity 140ms ease, transform 200ms var(--sb-enh-ease), visibility 0s linear 200ms;
}
/* A small arrow pointing at the disc. */
.sb-enh__tip::after {
  content: "";
  position: absolute;
  left: calc(var(--sb-enh-size) / 2 - 3px);
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: inherit;
  border-radius: 0 0 2px 0;
  transform: rotate(45deg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sb-enh.is-open .sb-enh__tip,
.sb-enh .sb-enh__btn:focus-visible + .sb-enh__tip {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 160ms ease, transform 220ms var(--sb-enh-ease), visibility 0s linear 0s;
}
@media (hover: hover) and (pointer: fine) {
  /* The tooltip is part of the badge, so the pointer can move onto it without it closing (WCAG 1.4.13). */
  .sb-enh:hover .sb-enh__tip {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity 160ms ease 80ms, transform 220ms var(--sb-enh-ease) 80ms, visibility 0s linear 80ms;
  }
}
/* Esc closes it until the pointer leaves or focus moves (js/sb-enhanced.js). Beats every "show" rule above. */
.sb-enh.is-dismissed .sb-enh__tip,
.sb-enh.is-dismissed:hover .sb-enh__tip,
.sb-enh.is-dismissed .sb-enh__btn:focus-visible + .sb-enh__tip { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .sb-enh__tip,
  .sb-enh.is-open .sb-enh__tip,
  .sb-enh .sb-enh__btn:focus-visible + .sb-enh__tip { transform: none; }
}

/* ==========================================================================
   Where it sits on the listing page (themes: css/property-themes/*)
   ========================================================================== */

/* Hero: the slideshow's bottom-left is taken by the place, the title and the facts, so the badge sits just above
   that text block, on the photo, aligned with its left edge. js/sb-enhanced.js shows it only while the slide on
   screen is enhanced (and never over the hero video). */
.pp .pp-cin-hero__text { position: relative; }
.pp .sb-enh--hero {
  left: calc(-1 * var(--sb-enh-pad));
  bottom: calc(100% + 14px - var(--sb-enh-pad));
}
@media (max-width: 991.98px) {
  .pp .sb-enh--hero { bottom: calc(100% + 10px - var(--sb-enh-pad)); }
}

/* Gallery: an enhanced photo's thumb sits in a cell beside its badge (a button cannot hold a button). The cell takes
   the thumb's place in the grid, so the editorial rhythm of shared.css stays the same. */
.pp-dialog .pp-gallery__cell { position: relative; min-width: 0; }
.pp-dialog .pp-gallery__grid > .pp-gallery__cell:nth-child(3n + 1) > .pp-gallery__thumb,
.pp-dialog .pp-gallery__grid > .pp-gallery__cell:nth-child(3n + 2):last-child > .pp-gallery__thumb { aspect-ratio: 16 / 9; }
@media (hover: hover) and (pointer: fine) {
  .pp-dialog .pp-gallery__cell:hover > .pp-gallery__thumb img { transform: scale(1.03); opacity: 0.92; }
}
@media (max-width: 767.98px) {
  .pp-dialog .pp-gallery__grid > .pp-gallery__cell > .pp-gallery__thumb { aspect-ratio: 4 / 3; }
}

/* Viewer: the picture is letterboxed (object-fit: contain), so js/sb-enhanced.js measures the picture itself and
   sets --sb-enh-x / --sb-enh-y to its bottom-left corner inside the stage. */
.pp-dialog .sb-enh--viewer {
  left: var(--sb-enh-x, 0px);
  top: var(--sb-enh-y, 0px);
  bottom: auto;
  z-index: 2;
  transform: translate(calc(var(--sb-enh-inset) - var(--sb-enh-pad)), calc(-100% - var(--sb-enh-inset) + var(--sb-enh-pad)));
}