/* Foto-pins picker (photo-pins.js), in card "3. Voeg foto's toe". Tiles reuse .theme-option from poster-themes.css. */

/* Desktop: the live preview stays in view while the customer scrolls the settings on the left
   (photo pins sit far down). The preview column scrolls on its own for the order panel below the poster. */
@media(min-width:901px){
  .creator{align-items:start}
  .preview-side{position:sticky;top:0;max-height:100vh;overflow-y:auto;scrollbar-gutter:stable}
}
#routeSvg .pin-hit{pointer-events:none}
#routeSvg.pins-tappable .pin-hit{pointer-events:all}
#routeSvg.pins-tappable [data-stop-index]{cursor:pointer}
#routeSvg.pins-tappable .photo-pin:hover{filter:brightness(1.04)}
.pin-photos{margin-top:14px;padding-top:4px;border-top:1px solid var(--line,#d9d1c5)}
.pin-photos[hidden],.pin-photos [hidden]{display:none!important}
.pin-photos-sub{margin:10px 0 6px;font-size:11px;color:#6d6860}
.pin-style-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
.pin-style-option i{position:relative;display:block;width:30px;height:30px;background:#c9b48f center/cover}
.pin-swatch-stamp{border-radius:50%;background:#f2ecdf!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.pin-swatch-stamp:after{content:"1";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#6e4426;color:#f7f0df;font:10px/16px Georgia,serif;text-align:center;box-shadow:0 0 0 1.5px #f7f0df}
.pin-swatch-medal{border-radius:50%;background:linear-gradient(160deg,#9fb7c9,#d9c49b 60%,#7d8f5e)!important;box-shadow:0 0 0 3px #fdfbf6,0 0 0 4px #6e4426}
.pin-swatch-polaroid{width:24px!important;height:30px!important;background:#fdfbf6!important;box-shadow:0 0 0 1px #d9cfbd,0 1px 3px rgba(0,0,0,.2);transform:rotate(-4deg)}
.pin-swatch-polaroid:before{content:"";position:absolute;left:2px;right:2px;top:2px;height:20px;background:linear-gradient(160deg,#9fb7c9,#d9c49b 60%,#7d8f5e)}
.pin-swatch-postage{background:radial-gradient(circle,transparent 1.6px,#fdfbf6 1.8px) -3px -3px/6px 6px,#fdfbf6!important;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.pin-swatch-postage:before{content:"";position:absolute;inset:4px;background:linear-gradient(160deg,#9fb7c9,#d9c49b 60%,#7d8f5e)}
.pin-stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line,#d9d1c5);border-radius:10px;background:#fff;overflow:hidden}
.pin-step{width:44px;height:40px;border:0;background:transparent;font-size:20px;line-height:1;color:#171715;cursor:pointer}
.pin-step:hover:not(:disabled){background:#f2ecdf}
.pin-step:disabled{color:#c4bcb0;cursor:default}
.pin-step:focus-visible{outline:2px solid #263f3d;outline-offset:-2px}
.pin-step-value{min-width:58px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;border-left:1px solid var(--line,#d9d1c5);border-right:1px solid var(--line,#d9d1c5);line-height:40px}
.pin-stop-list{display:grid;gap:10px}
.pin-stop{display:grid;gap:5px;min-width:0}
.pin-stop b{font-size:12.5px;font-weight:700}
.pin-stop b small{font-weight:400;color:#6d6860;margin-left:6px}
.pin-opts{display:flex;flex-wrap:wrap;gap:5px}
.pin-opt{position:relative;width:36px;height:36px;padding:0;border-radius:6px;border:2px solid transparent;background:#e3dccf center/cover;cursor:pointer;font-size:10.5px;color:#6d6860}
.pin-opt[aria-pressed="true"]{border-color:#171715;box-shadow:inset 0 0 0 1px #fff}
.pin-opt:focus-visible,.pin-auto:focus-visible{outline:2px solid #263f3d;outline-offset:2px}
.pin-opt.used:after{content:"";position:absolute;right:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:#b0601a;border:2px solid #fff}
.pin-opt.dup{border-color:#b0601a}
.pin-warn{margin-top:10px;border:1px solid #b0601a;background:#f6e6d3;border-radius:8px;padding:9px 11px;font-size:12.5px;display:grid;gap:3px}
.pin-warn b{color:#9a5112}
.pin-photos-hint{margin-top:8px}
.pin-auto{margin-top:8px;font-family:inherit;font-size:12px;font-weight:600;border:1px dashed #6d6860;background:transparent;border-radius:6px;padding:6px 10px;cursor:pointer;color:inherit}

/* Popover when a pin on the map is tapped; a bottom sheet on phones. */
.pin-pop{position:fixed;z-index:2147483000;width:min(320px,calc(100vw - 20px));background:#fffdf8;border:1px solid #d9d1c5;border-radius:12px;box-shadow:0 12px 36px rgba(30,24,16,.22);padding:12px 14px 14px;font-size:13px;color:#24221f}
.pin-pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pin-pop-title{font-size:13.5px}
.pin-pop-close{width:32px;height:32px;border:0;border-radius:8px;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#6d6860}
.pin-pop-close:hover{background:#f2ecdf}
.pin-pop .pin-opt{width:44px;height:44px}
.pin-pop-warn{margin:8px 0 0;font-size:12px;color:#9a5112}
.pin-pop-warn[hidden],.pin-pop [hidden]{display:none!important}
@media(max-width:600px){
  .pin-pop{left:0!important;right:0;bottom:0;top:auto!important;width:auto;border-radius:16px 16px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
}

/* 1.30.0: pin size + tap tip right above the poster, upload note on phones, one-time glow on new pins. */
.pin-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:760px;margin:0 auto 12px;font:13px/1.4 Arial,sans-serif;color:#3a352e}
.pin-bar[hidden]{display:none}
.pin-bar-label{font-weight:700}
.pin-bar-tip{color:#625a50}
.pin-upload-note{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#263f3d;color:#fff7e8;font:13px/1.45 Arial,sans-serif}
.pin-upload-note[hidden]{display:none}
.pin-upload-note a{color:#fff7e8;font-weight:700;white-space:nowrap}
.pin-upload-note a::after{content:" ↓"}
@keyframes pinIntroGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 7px rgba(176,138,64,.95))}}
#routeSvg.pins-intro .photo-pin{animation:pinIntroGlow 1s ease-in-out 3}
@media(prefers-reduced-motion:reduce){#routeSvg.pins-intro .photo-pin{animation:none}}