/* Poster colour themes (poster-themes.js). Cream is the base design in
   app-editorial-v5-8-2.css; these rules only override colours. Loaded last,
   and scoped with [data-theme] so they win over the layered editorial CSS. */

/* ---------- picker in "4. Kies je stijl" ---------- */
.theme-picker-title{margin:14px 0 8px;font-size:11px;font-weight:800}
.theme-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.theme-option{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:9px 6px;border:1px solid var(--line,#d9d1c5);border-radius:10px;background:#fff;font-size:11px;color:#3a342c;cursor:pointer}
.theme-option i{display:block;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.theme-option[aria-checked="true"]{border-color:#171715;box-shadow:0 0 0 1px #171715;font-weight:700}
.theme-option:focus-visible{outline:2px solid #263f3d;outline-offset:2px}

/* ---------- warm white ---------- */
.final-poster.editorial[data-theme="white"]{background:#fbfaf6}
.final-poster[data-theme="white"] .poster-map.premium-map.country-watercolor{background:#fbfaf6}
.final-poster[data-theme="white"] .poster-photos.premium-photos i{background-color:#d9d2c6}

/* ---------- night blue ---------- */
.final-poster.editorial[data-theme="night"]{background:#1d2633;color:#f2ecdf}
.final-poster.editorial[data-theme="night"]::after{opacity:.35}
.final-poster[data-theme="night"] .poster-head h2{color:#f2ecdf}
.final-poster[data-theme="night"] h2+p{color:#b9b3a6}
.final-poster[data-theme="night"] .poster-rule span{background:#d0a55a}
.final-poster[data-theme="night"] .poster-rule #pmeta{color:#d0a55a!important}

/* The watercolor carries its own cream paper tone, so on a dark poster it sits
   in a deliberate frame instead of fading into the background. */
/* Paper-toned map box (any uncovered strip reads as a passe-partout, not a hole)
   and a real border rather than a box-shadow, which html2canvas does not export. */
.final-poster[data-theme="night"] .poster-map.premium-map,
.final-poster[data-theme="night"] .poster-map.premium-map.country-watercolor{background:#f2ecdf;border:1px solid rgba(208,165,90,.8)}
.final-poster[data-theme="night"] .poster-map.premium-map:after{display:none}

.final-poster[data-theme="night"] .poster-photos.premium-photos i{background-color:#2c3645}
.final-poster[data-theme="night"] .poster-stops.premium-stops .journey-stop{color:#d6d0c4}
.final-poster[data-theme="night"] .poster-stops.premium-stops b{color:#f2ecdf}
.final-poster[data-theme="night"] .poster-stops.premium-stops em{color:#d0a55a}
.final-poster[data-theme="night"] .poster-stops.premium-stops:before{background:#d0a55a}
.final-poster[data-theme="night"] .poster-stops.premium-stops .journey-stop:before{background:#f2ecdf;color:#1d2633;box-shadow:0 0 0 1.4px #d0a55a}
.final-poster[data-theme="night"] .poster-footer{border-top-color:#d0a55a}
.final-poster[data-theme="night"] .poster-footer blockquote{color:#d0a55a}
.final-poster[data-theme="night"] .poster-footer>span{color:#b9b3a6}
.final-poster[data-theme="night"] .preview-watermark-grid span{color:rgba(242,236,223,.12)}
/* Route ink picker (poster-themes.js): same tiles as the background picker, swatch = a small ink stamp. */
.ink-option{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:9px 6px;border:1px solid var(--line,#d9d1c5);border-radius:10px;background:#fff;font-size:11px;color:#3a342c;cursor:pointer}
.ink-option i{position:relative;display:block;width:30px;height:30px;border-radius:50%;background:#f2ecdf;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.ink-option i:before{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;background:var(--ink);border-radius:1px}
.ink-option i:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px #f7f0df}
.ink-option[aria-checked="true"]{border-color:#171715;box-shadow:0 0 0 1px #171715;font-weight:700}
.ink-option:focus-visible{outline:2px solid #263f3d;outline-offset:2px}
.ink-picker[hidden],.ink-picker-title[hidden]{display:none}
/* Map colour picker (poster-themes.js): same tiles; swatch = a small painted gradient. */
.tone-option{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:9px 6px;border:1px solid var(--line,#d9d1c5);border-radius:10px;background:#fff;font-size:11px;color:#3a342c;cursor:pointer}
.tone-option i{display:block;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.tone-option[aria-checked="true"]{border-color:#171715;box-shadow:0 0 0 1px #171715;font-weight:700}
.tone-option:focus-visible{outline:2px solid #263f3d;outline-offset:2px}
.tone-picker[hidden],.tone-picker-title[hidden]{display:none}