/* Deliberately scoped to the new popup; the property hero and room sliders keep their styles. */
html.kpp-photo-open { overscroll-behavior: none; }
html.kpp-photo-open .kpp-native-tabs { visibility: hidden !important; pointer-events: none !important; }
.kpp-photo-dialog, .kpp-photo-dialog * { box-sizing: border-box; }
.kpp-photo-dialog {
  --kpp-photo-accent: #12305c;
  position: fixed; inset: 0; width: min(1440px, calc(100% - 48px)); height: min(1040px, calc(100dvh - 48px));
  max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 12px;
  background: #fff; color: #222b38; overflow: hidden; z-index: 2147483600;
  font-family: inherit; font-size: 16px; line-height: 1.5; box-shadow: 0 24px 90px #0005;
}
.kpp-photo-dialog::backdrop { background: rgb(10 18 30 / 68%); }
.kpp-photo-dialog[open] { display: block; }
.kpp-photo-dialog[hidden], .kpp-photo-dialog [hidden] { display: none !important; }
.kpp-photo-dialog button { font: inherit; letter-spacing: normal; text-transform: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kpp-photo-dialog button:focus-visible { outline: 3px solid #5f9ded; outline-offset: -3px; }
.kpp-photo-dialog button:disabled { opacity: .32; cursor: default; }
.kpp-photo-dialog .kpp-photo-icon {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 10px;
  border: 0; border-radius: 50%; background: transparent; color: inherit; box-shadow: none;
}
.kpp-photo-icon svg { display: block; flex: 0 0 24px; width: 24px; height: 24px; }
.kpp-photo-dialog .kpp-photo-icon:hover { background: #edf1f6; color: #12305c; }
.kpp-photo-browser { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.kpp-photo-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid #e9ecf0; flex-shrink: 0; }
.kpp-photo-header h2 { margin: 0; padding: 0; font-family: inherit; font-size: 24px; font-weight: 600; line-height: 1.3; color: #222b38; text-transform: none; }
.kpp-photo-category-wrap { position: relative; flex-shrink: 0; padding: 16px 20px 12px; }
.kpp-photo-categories { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 0 0 6px; scroll-behavior: smooth; }
.kpp-photo-dialog .kpp-photo-category { flex: 0 0 152px; width: 152px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; color: #394556; text-align: left; box-shadow: none; }
.kpp-photo-category img { display: block; width: 100%; height: 88px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; }
.kpp-photo-category span { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.6; }
.kpp-photo-category[aria-selected="true"] { color: var(--kpp-photo-accent); font-weight: 600; }
.kpp-photo-category[aria-selected="true"] img { border-color: var(--kpp-photo-accent); }
.kpp-photo-dialog .kpp-photo-category-next { position: absolute; top: 38px; right: 24px; background: #fff; color: #12305c; box-shadow: 0 2px 12px #0003; }
.kpp-photo-grid { flex: 1; min-height: 0; padding: 0 20px 20px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
.kpp-photo-grid-items { columns: 3; column-gap: 8px; }
.kpp-photo-dialog .kpp-photo-tile { display: block; position: relative; width: 100%; padding: 0; margin: 0 0 8px; border: 0; border-radius: 6px; overflow: hidden; background: #edf0f3; break-inside: avoid; box-shadow: none; }
.kpp-photo-tile img { display: block; width: 100%; height: auto; min-height: 100px; object-fit: cover; transition: filter .15s ease; }
.kpp-photo-tile:hover img { filter: brightness(.93); }
.kpp-photo-dialog.is-viewer { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; background: #050505; color: #f5f5f5; }
.kpp-photo-viewer { height: 100%; width: 100%; position: relative; background: #050505; color: #f5f5f5; }
.kpp-photo-viewer:fullscreen { width: 100vw; height: 100dvh; }
.kpp-photo-viewer-header { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: linear-gradient(#000b, transparent); }
.kpp-photo-dialog .kpp-photo-back { width: auto; border-radius: 6px; gap: 8px; }
.kpp-photo-back span { white-space: nowrap; font-size: 14px; }
.kpp-photo-count { margin-right: auto; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpp-photo-tools { display: flex; gap: 4px; }
.kpp-photo-viewer .kpp-photo-icon:hover { background: #ffffff24; color: #fff; }
.kpp-photo-stage { position: absolute; inset: 64px 64px 132px; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; user-select: none; }
.kpp-photo-image { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; }
.kpp-photo-stage.is-zoomed { cursor: grab; }
.kpp-photo-stage.is-zoomed:active { cursor: grabbing; }
.kpp-photo-caption { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 26px 20px 12px; color: #fff; text-align: center; font-size: 14px; line-height: 1.5; background: linear-gradient(transparent, #0009); pointer-events: none; }
.kpp-photo-error { position: absolute; padding: 20px; text-align: center; color: #fff; }
.kpp-photo-stage[aria-busy="true"]::after { content: ''; position: absolute; width: 28px; height: 28px; border: 2px solid #ffffff40; border-top-color: #fff; border-radius: 50%; animation: kpp-photo-spin .8s linear infinite; pointer-events: none; }
@keyframes kpp-photo-spin { to { transform: rotate(360deg); } }
.kpp-photo-dialog .kpp-photo-prev, .kpp-photo-dialog .kpp-photo-next { position: absolute; top: calc(50% - 55px); z-index: 2; border-radius: 6px; }
.kpp-photo-prev { left: max(8px, env(safe-area-inset-left)); }
.kpp-photo-next { right: max(8px, env(safe-area-inset-right)); }
.kpp-photo-thumbnails { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 6px 2px; display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.kpp-photo-dialog .kpp-photo-thumb { flex: 0 0 116px; width: 116px; height: 80px; padding: 3px; margin: 0; border: 1px solid #777; border-radius: 4px; background: transparent; box-shadow: none; opacity: .65; }
.kpp-photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.kpp-photo-dialog .kpp-photo-thumb[aria-current="true"] { border-color: #fff; opacity: 1; box-shadow: 0 0 0 1px #fff; }
.kpp-photo-thumb:hover { opacity: 1; }
@media (max-width: 767px) {
  .kpp-photo-dialog { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .kpp-photo-header { padding: max(10px, env(safe-area-inset-top)) 12px 10px; gap: 8px; }
  .kpp-photo-header h2 { font-size: 19px; }
  .kpp-photo-category-wrap { padding: 12px 12px 8px; }
  .kpp-photo-categories { gap: 10px; }
  .kpp-photo-dialog .kpp-photo-category { flex-basis: 128px; width: 128px; }
  .kpp-photo-category img { height: 76px; }
  .kpp-photo-dialog .kpp-photo-category-next { top: 29px; right: 14px; }
  .kpp-photo-grid { padding: 0 12px max(16px, env(safe-area-inset-bottom)); }
  .kpp-photo-grid-items { columns: 2; column-gap: 6px; }
  .kpp-photo-dialog .kpp-photo-tile { margin-bottom: 6px; }
  .kpp-photo-stage { inset: 64px 8px 110px; }
  .kpp-photo-back span { display: none; }
  .kpp-photo-viewer-header { gap: 4px; }
  .kpp-photo-tools { gap: 0; }
  .kpp-photo-count { font-size: 13px; }
  .kpp-photo-dialog .kpp-photo-prev, .kpp-photo-dialog .kpp-photo-next { background: #0005; }
  .kpp-photo-thumbnails { gap: 7px; max-width: calc(100% - 20px); bottom: max(14px, env(safe-area-inset-bottom)); }
  .kpp-photo-dialog .kpp-photo-thumb { flex-basis: 84px; width: 84px; height: 60px; }
  .kpp-photo-caption { padding: 18px 8px 8px; font-size: 13px; }
}
@media (max-width: 359px) { .kpp-photo-tools .kpp-photo-icon { width: 40px; min-width: 40px; padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .kpp-photo-categories { scroll-behavior: auto; } .kpp-photo-stage::after { animation: none; } .kpp-photo-tile img { transition: none; } }