/*
 * Release 1.8.6 — beveiligd vakantiealbum
 */
.vacation-photos {
  margin: 22px 0 0;
  border: 1px solid rgba(111,80,18,.16);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(145deg,rgba(255,253,246,.86),rgba(240,224,181,.4));
}

.vacation-photos > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 19px;
  cursor: pointer;
  list-style: none;
  color: #795818;
  font-weight: 850;
}

.vacation-photos > summary::-webkit-details-marker { display: none; }
.vacation-photos > summary > span { display: flex; align-items: center; gap: 9px; font-size: 1rem; }
.vacation-photos > summary i { color: #b58729; font-style: normal; }
.vacation-photos > summary b {
  display: inline;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #9a711e;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.vacation-photos > summary small { color: #7f7563; font-size: .68rem; }
.vacation-photos[open] > summary {
  border-bottom: 1px solid rgba(115,83,20,.12);
  background: rgba(224,193,116,.12);
}
.vacation-photo-inner { padding: 20px; }

.vacation-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  gap: 14px;
}

.vacation-photo-tile {
  position: relative;
  min-width: 0;
}

.vacation-photo-thumb {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid rgba(115,83,20,.16);
  border-radius: 15px;
  background: #eee3c5;
  box-shadow: 0 9px 24px rgba(90,66,17,.1);
}
.vacation-photo-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .25s ease;
}
.vacation-photo-thumb:hover img { transform: scale(1.035); }
.vacation-photo-tile > small {
  display: block;
  margin-top: 7px;
  padding-right: 38px;
  color: #7e7564;
  font-size: .63rem;
}
.vacation-photo-tile > form {
  position: absolute;
  right: 5px;
  bottom: -2px;
  margin: 0;
}
.vacation-photo-delete {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(171,52,50,.24);
  border-radius: 10px;
  background: #fff0ee;
  color: #b43835;
  box-shadow: none;
  font-size: 1rem;
}

.vacation-photo-upload {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(115,83,20,.12);
}
.vacation-photo-upload label { display: grid; gap: 3px; font-weight: 800; }
.vacation-photo-upload label small { color: #7d7462; font-size: .65rem; font-weight: 500; }
.vacation-photo-upload > div { display: flex; align-items: center; gap: 12px; }
.vacation-photo-upload input[type=file] { flex: 1 1 280px; min-width: 0; }
.vacation-photo-picker{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:12px!important;align-items:center!important}
.vacation-photo-picker>input[type=file]{grid-column:1/-1;padding:14px;border:1px dashed rgba(154,111,25,.35);border-radius:14px;background:rgba(255,255,255,.62)}
.vacation-photo-upload-preview{grid-column:1/-1;display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border:1px solid rgba(154,111,25,.22);border-radius:16px;background:#fffdf7}
.vacation-photo-upload-preview[hidden]{display:none!important}
.vacation-photo-upload-preview img{display:block;width:112px;height:88px;object-fit:cover;border-radius:11px;background:#eee7d7}
.vacation-photo-upload-preview>div{display:grid;gap:4px;min-width:0}
.vacation-photo-upload-preview strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vacation-photo-upload-preview small,.vacation-photo-upload-status{color:#7d7462;font-size:.72rem}
.vacation-photo-upload-preview button{justify-self:start;padding:6px 0;border:0;background:transparent;box-shadow:none;color:#8b651b;text-decoration:underline}
.vacation-photo-upload-status{margin:0}
.vacation-photo-upload-status.is-error{color:#a13f3a;font-weight:700}
.vacation-photo-limit {
  margin-top: 17px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(158,112,24,.1);
  color: #77581c;
  font-size: .72rem;
}

.vacation-photo-viewer {
  width: min(1080px,calc(100vw - 30px));
  max-width: none;
  height: min(820px,calc(100vh - 30px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #111;
  color: #fff;
  box-shadow: 0 30px 100px rgba(0,0,0,.6);
}
.vacation-photo-viewer::backdrop { background: rgba(12,10,7,.86); backdrop-filter: blur(6px); }
.vacation-photo-viewer figure {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  touch-action: pan-y;
}
.vacation-photo-viewer figure img {
  position: absolute;
  inset: 18px 70px 56px;
  display: block;
  width: calc(100% - 140px) !important;
  height: calc(100% - 74px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  user-select: none;
  -webkit-user-drag: none;
}
.vacation-photo-viewer figcaption {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.82);
  font-size: .7rem;
}
.vacation-photo-close,
.vacation-photo-previous,
.vacation-photo-next {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(12,12,12,.58);
  color: #fff;
  box-shadow: none;
}
.vacation-photo-close {
  top: calc(env(safe-area-inset-top, 0px) + 13px);
  right: calc(env(safe-area-inset-right, 0px) + 13px);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1.65rem;
}
.vacation-photo-previous,
.vacation-photo-next { top: 50%; width: 48px; height: 64px; transform: translateY(-50%); border-radius: 14px; font-size: 2.1rem; }
.vacation-photo-previous { left: 13px; }
.vacation-photo-next { right: 13px; }

.shared-vacation-readonly .vacation-photos { width: 100%; max-width: none; }

@media (max-width: 650px) {
  .vacation-photo-inner { padding: 15px; }
  .vacation-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .vacation-photos > summary small { display: none; }
  .vacation-photo-upload > div { align-items: stretch; flex-direction: column; }
  .vacation-photo-upload button { width: 100%; }
  .vacation-photo-picker{grid-template-columns:1fr}
  .vacation-photo-upload-preview{grid-template-columns:82px minmax(0,1fr)}
  .vacation-photo-upload-preview img{width:82px;height:72px}
  .vacation-photo-viewer { width: 100vw; height: 100dvh; border-radius: 0; }
  .vacation-photo-viewer figure img {
    inset:
      calc(env(safe-area-inset-top, 0px) + 12px)
      10px
      calc(env(safe-area-inset-bottom, 0px) + 42px);
    width: calc(100% - 20px) !important;
    height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 54px) !important;
  }
  .vacation-photo-viewer figcaption {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  }
  .vacation-photo-previous,.vacation-photo-next { width: 42px; height: 58px; }
}