/* SAFARIBOK | Fil: observations.css | Version: 1.0.0 | 2026-10-07 | Original frontend v35. */
/* Safaribok observationer v1.2.0 */
.observation-controls{display:flex;align-items:end;flex-wrap:wrap;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line);background:white}.observation-controls[hidden]{display:none}.observation-controls>div:first-child{margin-right:auto}.observation-controls .eyebrow{margin-bottom:5px;font-size:11px}.observation-controls label{display:grid;gap:6px;font-size:12px;color:var(--muted)}.observation-controls .wh-dropdown{min-width:155px}.observation-controls>.outline{gap:8px;padding:12px 17px}.observation-controls>small{width:100%;color:var(--muted);font-size:12px}.observation-marker{background:none;border:0}.observation-pin,.observation-cluster{width:46px;height:46px;border:3px solid white;border-radius:50%;padding:0;background:var(--accent);box-shadow:0 3px 15px #0005;cursor:pointer}.observation-pin img{width:100%;height:100%;border-radius:50%;object-fit:cover}.observation-cluster{font:800 18px Manrope,sans-serif;color:var(--green);position:relative}.observation-cluster small{position:absolute;right:-5px;bottom:-6px;width:20px;height:20px;border-radius:50%;background:var(--green);color:white;display:grid;place-items:center;font-size:10px}.safari-observation-popup .leaflet-popup-content-wrapper{padding:0;border-radius:18px;overflow:hidden}.safari-observation-popup .leaflet-popup-content{margin:0!important;width:300px!important;max-width:calc(100vw - 70px)}.observation-popup{max-height:65vh;overflow-y:auto;font:14px/1.6 Manrope,sans-serif;color:var(--ink)}.observation-popup>img{width:100%;height:140px;object-fit:cover;display:block}.observation-popup>div{padding:18px}.observation-example{font-size:11px;font-weight:700;color:var(--muted)}.observation-popup h3{font-size:23px;margin:6px 0 10px}.observation-popup p{margin:12px 0}.observation-popup .observation-time{font-size:12px;color:var(--muted)}.observation-facts{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.observation-facts span{flex:1;font-size:11px}.observation-facts strong{font-size:17px}.observation-popup small{font-size:11px;color:var(--muted);display:block}.observation-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.observation-actions .button,.observation-actions .outline{font-size:12px;padding:10px 13px;color:var(--green)}.observation-list{display:grid;gap:8px;margin-top:18px}.observation-list button{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);background:white;border-radius:12px;text-align:left;font:inherit}.observation-list img{width:42px;height:42px;border-radius:50%;object-fit:cover}.observation-list span{flex:1}.observation-list strong,.observation-list small{display:block}.observation-list strong{font-size:13px}.observation-list small{font-size:11px;color:var(--muted)}.observation-list i{color:var(--green)}.safari-observation-popup .leaflet-popup-close-button{background:white!important;border-radius:50%;top:9px!important;right:9px!important;width:28px!important;height:28px!important;color:var(--green)!important}.is-fullscreen .observation-controls{flex-shrink:0}.is-fullscreen .observation-controls>small{width:auto;margin-left:auto}@media(max-width:600px){.observation-controls{padding:12px;gap:10px}.observation-controls>div:first-child{width:100%}.observation-controls label{flex:1;min-width:110px}.observation-controls .wh-dropdown{min-width:0;width:100%}.observation-controls>.outline{font-size:12px}.is-fullscreen .observation-controls .eyebrow,.is-fullscreen .observation-controls>small{display:none}}

/* Leaflet återställer bildstorlek: kapsla och klipp själva fotot. */
.observation-pin{position:relative;overflow:visible;display:block;box-sizing:border-box;line-height:1}.observation-photo-circle{display:block;width:40px;height:40px;overflow:hidden;border-radius:50%;isolation:isolate}.leaflet-container .observation-photo-circle img,.leaflet-container .observation-pin>img{display:block!important;width:40px!important;height:40px!important;max-width:none!important;object-fit:cover!important;border-radius:50%!important;clip-path:circle(50%)}.observation-photo-count{position:absolute;bottom:-5px;right:-8px;min-width:23px;height:22px;padding:0 5px;border-radius:12px;border:2px solid white;background:var(--green);color:white;font:700 10px/18px Manrope,sans-serif;z-index:2}.animal-observation-section{margin:32px 0}.animal-observation-section .section-head{align-items:center}.animal-observation-section .section-head p{max-width:760px}.animal-observation-map{height:430px;min-height:260px}.animal-map-controls{display:flex;gap:15px;align-items:center;flex-wrap:wrap;padding:18px;background:white;border-bottom:1px solid var(--line)}.animal-map-controls label{display:flex;align-items:center;gap:10px;flex:1;min-width:200px;font-size:13px}.animal-map-controls input[type=range]{flex:1;accent-color:var(--green)}.animal-map-controls button{padding:10px 17px;gap:8px}.animal-map-caption{padding:14px 20px;font-size:12px;color:var(--muted);background:white}.animal-map-canvas{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:white}.animal-map-canvas.is-fullscreen{position:fixed;inset:0;z-index:10000;height:100dvh;border-radius:0;display:flex;flex-direction:column}.animal-map-canvas.is-fullscreen .animal-observation-map{flex:1;height:auto}.animal-map-close{display:none!important}.animal-map-canvas.is-fullscreen .animal-map-close{display:inline-flex!important}.animal-map-canvas.is-fullscreen .animal-map-expand{display:none}.animal-map-canvas .leaflet-control-zoom{background:transparent!important;box-shadow:none!important;border:0!important;overflow:visible;display:grid;gap:9px}.animal-map-canvas .leaflet-control-zoom a{width:42px;height:42px;line-height:42px;border-radius:50%;border:0;box-shadow:0 3px 12px #0003}.observation-form{display:grid;gap:16px;margin-top:25px}.observation-form label{display:grid;gap:6px}.observation-form input,.observation-form textarea{padding:12px;border:1px solid var(--line);border-radius:10px;width:100%;font:inherit}.observation-form .button{justify-self:start;margin-top:12px}.animal-observation-section .section-head .button{flex-shrink:0}.animal-map-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;gap:12px}.animal-map-toolbar button{width:40px;height:40px;padding:0;border-radius:50%;border:0;background:var(--paper)}@media(max-width:600px){.animal-observation-section .section-head{display:block}.animal-observation-section .section-head .button{margin-top:22px}.animal-observation-map{height:370px}.animal-map-controls{gap:12px;padding:12px}.animal-map-controls label{width:100%}.animal-map-caption{padding:12px;font-size:11px}}

/* Längre exempelurval hålls inom panelen. */
.observation-list{max-height:360px;overflow-y:auto;padding-right:4px}.observation-cluster{min-width:46px}.observation-cluster small{pointer-events:none}

/* Gemensam placering av kartkontroller, utan att påverka tidsreglaget. */
.animal-map-controls label:has(input[type=checkbox]){flex:0 0 auto;min-width:0;justify-content:flex-start;gap:8px}.animal-map-controls input[type=checkbox]{flex:none;width:16px;height:16px;margin:0}.animal-map-toolbar>div{display:flex;align-items:center;gap:8px}.animal-map-toolbar button{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:none}.animal-map-toolbar button i{display:block;line-height:1}.animal-map-canvas .leaflet-control-zoom a,.animal-map-canvas .leaflet-control-zoom a:first-child,.animal-map-canvas .leaflet-control-zoom a:last-child{border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;width:42px!important;height:42px!important;padding:0!important;line-height:1!important;border:0!important}.animal-observation-section .section-head .button{gap:8px}