/* Accounts, niveaus en het slot-patroon */
#p2d-account-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: #166534; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
#p2d-account-btn svg { width: 18px; height: 18px; }
#p2d-account-btn.is-pro { background: #b7791f; }
#header #p2d-account-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
body.nav-tabs #p2d-nav #p2d-account-btn { margin-left: auto; }
@media (max-width: 767px) { body.nav-tabs #p2d-nav #p2d-account-btn { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 1001; margin: 0; } body.nav-tabs #p2d-nav #p2d-account-btn span { display: none; } body.nav-tabs #p2d-nav #p2d-account-btn { width: 40px; padding: 0; justify-content: center; border-radius: 50%; } }

/* Schuifpaneel */
#p2d-sheet { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .18s; }
#p2d-sheet.open { opacity: 1; }
.p2d-sheet-bg { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.p2d-sheet-box { position: relative; width: 100%; max-width: 480px; max-height: calc(100% - 24px); overflow: auto; background: #fff; color: #111827; border-radius: 22px 22px 0 0; padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(0,0,0,.2); transform: translateY(16px); transition: transform .18s; font-size: 17px; line-height: 1.45; }
#p2d-sheet.open .p2d-sheet-box { transform: none; }
@media (min-width: 768px) { #p2d-sheet { align-items: center; } .p2d-sheet-box { border-radius: 18px; padding: 22px 26px; transform: translateY(8px); } .p2d-sheet-handle { display: none; } }
.p2d-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: #d1d5db; margin: 0 auto 10px; }
.p2d-sheet-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f3f4f6; color: #374151; cursor: pointer; display: grid; place-items: center; }
.p2d-sheet-x svg { width: 20px; height: 20px; }
.p2d-sheet-box h3 { margin: 6px 0 8px; font-size: 21px; line-height: 1.25; display: flex; align-items: center; gap: 8px; }
.p2d-sheet-box p { margin: 0 0 14px; color: #374151; }
.p2d-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin: 8px 0; border: 0; border-radius: 14px; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; background: #f3f4f6; color: #111827; text-decoration: none; }
.p2d-btn svg { width: 20px; height: 20px; }
.p2d-btn-primary { background: #166534; color: #fff; }
.p2d-btn-pro { background: #b7791f; color: #fff; }
.p2d-btn-danger { background: #b91c1c; color: #fff; }
.p2d-link { display: block; margin: 10px auto 0; padding: 10px; border: 0; background: none; color: #6b7280; font: inherit; font-size: 16px; cursor: pointer; text-decoration: underline; }
.p2d-pro-badge { display: inline-block; padding: 2px 7px; border-radius: 6px; background: #b7791f; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; vertical-align: middle; }
.p2d-pro-badge.sm { font-size: 10px; padding: 1px 5px; }
.p2d-lock { text-align: center; }
.p2d-lock-ico { width: 56px; height: 56px; margin: 4px auto 10px; border-radius: 50%; background: #f3f4f6; color: #6b7280; display: grid; place-items: center; }
.p2d-lock-ico svg { width: 28px; height: 28px; }
.p2d-lock-ico.pro { background: #fef3c7; color: #b7791f; }
.p2d-lock h3 { justify-content: center; }
.p2d-lock-detail { display: block; margin-top: 4px; color: #6b7280; font-size: 14px; }
.p2d-lock-foot { font-size: 14px !important; color: #6b7280 !important; margin: 6px 0 0 !important; }
.p2d-form label { display: block; font-weight: 600; margin: 10px 0 6px; }
.p2d-form input { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 14px; border: 1.5px solid #d1d5db; border-radius: 12px; font: inherit; font-size: 18px; }
.p2d-form input:focus { outline: 2px solid #166534; outline-offset: 1px; border-color: #166534; }
.p2d-form input.p2d-code { font-size: 30px; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.p2d-form.busy button { opacity: .6; pointer-events: none; }
.p2d-form-msg { min-height: 1.2em; color: #b91c1c !important; font-size: 15px; margin: 4px 0 0 !important; }
.p2d-pro-list { list-style: none; margin: 0 0 12px; padding: 0; }
.p2d-pro-list li { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.p2d-pro-list svg { width: 20px; height: 20px; color: #166534; flex: 0 0 20px; }
.p2d-pro-price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; }
.p2d-pro-price b { font-size: 30px; }
.p2d-pro-price span { color: #6b7280; }
.p2d-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 44px; }
.p2d-plan { padding: 3px 10px; border-radius: 999px; background: #f3f4f6; font-size: 13px; font-weight: 700; color: #374151; }
.p2d-plan.pro { background: #b7791f; color: #fff; }
.p2d-panel-mail { color: #6b7280 !important; font-size: 15px; margin: -4px 0 12px !important; }
.p2d-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 6px 0; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.p2d-row > svg { width: 22px; height: 22px; flex: 0 0 22px; color: #166534; }
.p2d-row > svg:last-child { color: #9ca3af; width: 18px; height: 18px; }
.p2d-row-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.p2d-row-txt b { font-size: 17px; }
.p2d-row-txt small { font-size: 14px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2d-row-danger > svg:first-child { color: #b91c1c; }
.p2d-panel-foot { text-align: center; margin-top: 6px; }

/* Slot-markeringen in de bestaande UI */
.p2d-locked { position: relative; opacity: .55; filter: saturate(.4); }
.p2d-lockbadge { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: #6b7280; color: #fff; display: grid; place-items: center; }
.p2d-lockbadge svg { width: 10px; height: 10px; }
.p2d-chip-pro, .p2d-btn-pro-tag { position: relative; }
.p2d-tag-pro { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 5px; background: #b7791f; color: #fff; font-size: 10px; font-weight: 800; line-height: 1.3; vertical-align: middle; }
.day-btn.p2d-day-locked { color: #9ca3af; }
.day-btn.p2d-day-locked svg { width: 14px; height: 14px; display: block; margin: 2px auto 0; }
.p4n-popup-locked { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; }
.p4n-popup-locked p { margin: 0; color: #374151; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.p4n-popup-locked p svg { width: 16px; height: 16px; color: #6b7280; flex: 0 0 16px; }
.p4n-popup-locked .p2d-btn { min-height: 44px; font-size: 15px; margin: 0; }

@media (prefers-color-scheme: dark) {
    .p2d-sheet-box { background: #1f2937; color: #f3f4f6; }
    .p2d-sheet-box p, .p2d-row-txt small, .p2d-pro-price span { color: #d1d5db; }
    .p2d-sheet-x, .p2d-lock-ico, .p2d-plan, .p2d-btn { background: #374151; color: #f3f4f6; }
    .p2d-row { background: #111827; border-color: #374151; }
    .p2d-form input { background: #111827; color: #f3f4f6; border-color: #4b5563; }
}

/* "Bekijken": volledig scherm */
#p2d-detail { position: fixed; inset: 0; z-index: 3900; opacity: 0; transition: opacity .18s; }
#p2d-detail.open { opacity: 1; }
.p2d-detail-bg { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.p2d-detail-box { position: absolute; inset: 0; background: #fff; color: #111827; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { .p2d-detail-box { inset: 4vh auto; left: 50%; transform: translateX(-50%); width: min(720px, 94vw); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); } }
.p2d-detail-x { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #111827; box-shadow: 0 2px 10px rgba(0,0,0,.25); cursor: pointer; display: grid; place-items: center; }
@media (min-width: 768px) { .p2d-detail-x { position: absolute; top: 12px; } }
.p2d-detail-x svg { width: 22px; height: 22px; }
.p2d-detail-body .p4n-popup-content, .p2d-detail-body .tourism-popup-content { max-width: none; width: auto; font-size: 16px; }
.p2d-detail-body .p4n-photo-carousel, .p2d-detail-body .p4n-popup-image, .p2d-detail-body .tourism-popup-image { height: min(42vh, 360px); }
.p2d-detail-body .p4n-photo-slide img, .p2d-detail-body .tourism-popup-image img { height: 100%; width: 100%; object-fit: cover; }
.p2d-detail-body .p4n-popup-body, .p2d-detail-body .tourism-popup-body { padding: 16px 18px; }
.p2d-detail-body .p4n-popup-title, .p2d-detail-body h3 { font-size: 22px; }
.p2d-detail-body .p4n-popup-desc, .p2d-detail-body .tourism-popup-description { font-size: 16px; line-height: 1.5; max-height: none; -webkit-line-clamp: unset; display: block; }
.p2d-detail-body .p4n-review-card { min-width: 260px; }
body.p2d-detail-open .leaflet-popup { visibility: hidden; }

/* Kleine kaart-popup */
.p4n-popup-compact .p4n-popup-content, .tourism-popup-compact .tourism-popup-content { display: block; }
.p2d-compact { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: start; }
.p2d-compact-photo { width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: #f3f4f6; display: grid; place-items: center; color: #166534; }
.p2d-compact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p2d-compact-photo svg { width: 32px; height: 32px; }
.p2d-compact-txt h3 { margin: 0 0 2px; font-size: 16px; line-height: 1.25; }
.p2d-compact-meta { font-size: 13px; color: #374151; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.p2d-compact-meta .star-fill { color: #f59e0b; }
.p2d-compact-meta svg { width: 14px; height: 14px; vertical-align: -2px; }
.p2d-compact-svc { display: flex; gap: 6px; margin-top: 4px; color: #6b7280; }
.p2d-compact-svc svg { width: 15px; height: 15px; }
.p2d-compact-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.p2d-compact-foot .p4w-actions { margin: 0; width: 100%; }
.p2d-compact-foot .p2d-view-btn { width: 100%; justify-content: center; min-height: 44px; font-size: 16px; }
.p2d-view-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: #166534; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; margin-left: auto; }
.p2d-view-btn svg { width: 16px; height: 16px; }

/* Pro afrekenen */
.p2d-form select { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 14px; border: 1.5px solid #d1d5db; border-radius: 12px; font: inherit; font-size: 18px; background: #fff; }
.p2d-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 6px; font-weight: 400 !important; font-size: 15px; line-height: 1.4; cursor: pointer; }
.p2d-check input { width: 24px !important; min-height: 24px !important; height: 24px; flex: 0 0 24px; margin: 1px 0 0; padding: 0 !important; accent-color: #166534; }
.p2d-check a { color: #166534; text-decoration: underline; }
.p2d-buy .p2d-btn { margin-top: 10px; }
.p2d-pro-price b { white-space: nowrap; }
@media (prefers-color-scheme: dark) { .p2d-form select { background: #1f2937; color: #f3f4f6; border-color: #374151; } .p2d-check a { color: #86efac; } }

/* Route in volledig scherm */
#p2d-detail.tr-route-detail .tr-route-photo { min-height: 220px; }
#p2d-detail.tr-route-detail .tr-route-map { height: 260px; }
#p2d-detail.tr-route-detail .tourism-popup-description { max-height: none; }
#p2d-detail .p2d-detail-x { z-index: 1100; }

/* Zonder foto: lage, rustige kop in het volledige scherm */
#p2d-detail .p4n-popup-image.no-image, #p2d-detail .tourism-popup-image.no-image { height: 150px; min-height: 0; max-height: 150px; }
#p2d-detail .p4n-popup-image.no-image svg { width: 48px; height: 48px; }
.p2d-form label.p2d-check { display: flex; }

/* Zichtbare verandering na inloggen */
@keyframes p2dPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(22,101,52,.25); } 100% { transform: scale(1); } }
#p2d-account-btn.p2d-pop { animation: p2dPop .9s ease; }
@keyframes p2dUnlock { 0% { background: #fef3c7; transform: scale(1.08); } 100% { background: transparent; transform: scale(1); } }
.p2d-just-unlocked { animation: p2dUnlock 1.4s ease; }
@keyframes p2dFlash { 0% { box-shadow: inset 0 0 0 999px rgba(22,163,74,.18); } 100% { box-shadow: none; } }
#p2d-detail.p2d-refreshed .p2d-detail-box { animation: p2dFlash 1.2s ease; }

.sb-modes [data-mode].p2d-locked { opacity: .75; position: relative; }
.sb-modes [data-mode] .p2d-lockbadge { position: absolute; top: -6px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: #b7791f; color: #fff; display: grid; place-items: center; }
.sb-modes [data-mode] .p2d-lockbadge svg { width: 10px; height: 10px; }

/* Mijn reis */
.tp { padding: 18px 18px 8px; max-width: 640px; margin: 0 auto; }
.tp-head h3, .tp h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 22px; }
.tp-head p { margin: 0 0 14px; color: #4b5563; font-size: 15px; }
.tp-card { min-height: 68px; }
.tp-card > svg:first-child { color: #166534; }
.tp-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 600; vertical-align: middle; }
.tp-empty { color: #6b7280; text-align: center; margin: 24px 0; }
.tp-pro { margin: 18px 0 6px; padding: 14px; border-radius: 14px; background: #fffbeb; border: 1px solid #fde68a; }
.tp-pro p { margin: 0 0 6px; font-size: 15px; }
.tp-back { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 8px -6px; padding: 6px 10px 6px 4px; border: 0; background: none; color: #166534; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.tp-title { display: grid; gap: 8px; margin-bottom: 14px; padding-right: 44px; }
.tp-name { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 12px; border: 1.5px solid #d1d5db; border-radius: 12px; font: inherit; font-size: 20px; font-weight: 700; background: #fff; }
.tp-start { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #374151; }
.tp-start input { min-height: 40px; padding: 0 10px; border: 1.5px solid #d1d5db; border-radius: 10px; font: inherit; font-size: 15px; background: #fff; }
.tp-example-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #eff6ff; color: #1e3a8a; font-size: 14px; }
.tp-example-hint svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; }
.tp-day { margin: 0 0 14px; padding: 12px 14px 10px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; }
.tp-day header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 16px; }
.tp-day header b { font-size: 17px; }
.tp-day header > span { color: #4b5563; }
.tp-wx { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: #374151; }
.tp-wx svg.wx { width: 24px; height: 24px; }
.tp-wx b { font-weight: 700; } .tp-wx em { font-style: normal; font-size: 13px; color: #2563eb; display: inline-flex; align-items: center; gap: 2px; }
.tp-wx em svg { width: 13px; height: 13px; }
.tp-wx small { color: #9ca3af; font-size: 13px; }
.tp-slot { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f3f4f6; }
.tp-slot > svg { flex: 0 0 22px; width: 22px; height: 22px; color: #9ca3af; }
.tp-slot.has > svg { color: #166534; }
.tp-slot-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; }
.tp-slot-txt small { color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.tp-slot-txt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-slot-txt > span { color: #4b5563; font-size: 14px; display: inline-flex; align-items: center; gap: 3px; }
.tp-slot-txt > span svg { width: 14px; height: 14px; color: #f59e0b; }
.tp-none { color: #9ca3af !important; font-style: italic; }
.tp-mini { flex: 0 0 40px; width: 40px; height: 40px; border: 1.5px solid #d1d5db; border-radius: 50%; background: #fff; color: #166534; display: grid; place-items: center; cursor: pointer; }
.tp-mini svg { width: 18px; height: 18px; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px; border-radius: 999px; background: #ecfdf5; color: #065f46; font-size: 13px; }
.tp-chip button { border: 0; background: none; color: inherit; width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.tp-chip button svg { width: 14px; height: 14px; }
.tp.ro .tp-chip { padding-right: 10px; }
.tp-note { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0 4px; border-top: 1px solid #f3f4f6; }
.tp-note > svg { flex: 0 0 22px; width: 22px; height: 22px; color: #9ca3af; margin-top: 8px; }
.tp-note textarea { flex: 1; min-height: 44px; padding: 10px 12px; border: 1.5px solid #e5e7eb; border-radius: 12px; font: inherit; font-size: 15px; resize: vertical; background: #fafafa; }
.tp-day-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.tp-link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; border: 0; background: none; color: #166534; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tp-link.danger { color: #b91c1c; }
.tp-link svg { width: 16px; height: 16px; }
.tp-danger { color: #b91c1c !important; background: #fef2f2 !important; }
.tp-pickbox h3 { margin: 4px 0 10px; font-size: 19px; }
.tp-pick img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: 0 0 44px; }
.tp-pick > svg:first-child { color: #166534; }
.tp-pick.on { border-color: #166534; background: #f0fdf4; }
.tp-pick.on > svg:last-child { color: #166534; }
.p2d-sheet-pick .p2d-sheet-box { max-height: 80vh; }
@media (prefers-color-scheme: dark) {
    .tp-day, .tp-name, .tp-start input, .tp-mini { background: #111827; border-color: #374151; color: #f3f4f6; }
    .tp-note textarea { background: #1f2937; border-color: #374151; color: #f3f4f6; }
    .tp-slot, .tp-note { border-color: #1f2937; }
    .tp-head p, .tp-day header > span, .tp-slot-txt > span, .tp-start { color: #d1d5db; }
    .tp-pro { background: #292524; border-color: #78350f; }
}
#p2d-detail.p2d-trips .p2d-detail-x { position: absolute; top: 10px; }