{"id":1518,"date":"2024-05-09T18:34:44","date_gmt":"2024-05-09T18:34:44","guid":{"rendered":"http:\/\/deela.se\/?page_id=1518"},"modified":"2026-04-17T22:36:24","modified_gmt":"2026-04-17T22:36:24","slug":"item","status":"publish","type":"page","link":"https:\/\/deela.se\/sv\/item\/","title":{"rendered":"Deela waste reduction"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Deela - Laddar...<\/title>\r\n\r\n <!-- OG Meta -->\r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta property=\"og:site_name\" content=\"Deela\" \/>\r\n <meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n\r\n <!-- Fonts: Poppins matching the app -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n :root {\r\n --primary: #43A94B;\r\n --primary-light: rgba(67,169,75,0.10);\r\n --primary-dark: #388F40;\r\n --orange: #FF7F11;\r\n --orange-light: rgba(255,127,17,0.10);\r\n --bg: #F9FAFB;\r\n --card: #FFFFFF;\r\n --text-primary: rgba(0,0,0,0.87);\r\n --text-secondary:#757575;\r\n --text-subtle: #9E9E9E;\r\n --text-hint: #BDBDBD;\r\n --border: #F0F0F0;\r\n --shadow-card: 0 2px 10px rgba(0,0,0,0.03);\r\n --shadow-elevated: 0 8px 30px rgba(0,0,0,0.08);\r\n --radius-card: 16px;\r\n --radius-btn: 14px;\r\n --radius-img: 12px;\r\n --radius-pill: 24px;\r\n --radius-badge: 20px;\r\n }\r\n\r\n *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background: var(--bg);\r\n color: var(--text-primary);\r\n -webkit-font-smoothing: antialiased;\r\n min-height: 100vh;\r\n -webkit-tap-highlight-color: transparent;\r\n -webkit-text-size-adjust: 100%;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2500\u2500 Page wrapper \u2500\u2500 *\/\r\n .page-wrap {\r\n max-width: 960px;\r\n margin: 0 auto;\r\n padding: 24px 16px 100px;\r\n }\r\n\r\n \/* \u2500\u2500 Gallery \u2500\u2500 *\/\r\n .gallery {\r\n position: relative;\r\n border-radius: var(--radius-card);\r\n overflow: hidden;\r\n box-shadow: var(--shadow-card);\r\n background: #e8e8e8;\r\n aspect-ratio: 4 \/ 3;\r\n cursor: pointer;\r\n margin-top: 12px;\r\n }\r\n .gallery img {\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.4s ease;\r\n }\r\n .gallery:hover img { transform: scale(1.03); }\r\n\r\n .gallery-badge {\r\n position: absolute;\r\n top: 16px; right: 16px;\r\n background: rgba(0,0,0,0.55);\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n color: #fff;\r\n padding: 6px 14px;\r\n border-radius: var(--radius-badge);\r\n font-size: 12px; font-weight: 600;\r\n display: none;\r\n }\r\n\r\n .status-pill {\r\n position: absolute;\r\n top: 16px; left: 16px;\r\n padding: 6px 14px;\r\n border-radius: var(--radius-badge);\r\n font-size: 11px; font-weight: 600;\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n }\r\n .status-available { background: rgba(67,169,75,0.88); color:#fff; }\r\n .status-reserved { background: rgba(255,127,17,0.88); color:#fff; }\r\n .status-delivered { background: rgba(108,117,125,0.82); color:#fff; }\r\n\r\n \/* \u2500\u2500 Title row \u2500\u2500 *\/\r\n .title-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-top: 20px;\r\n gap: 12px;\r\n }\r\n\r\n \/* Reduced significantly \u2014 was too large on phones *\/\r\n .item-title {\r\n font-size: 15px;\r\n font-weight: 700;\r\n color: var(--text-primary);\r\n line-height: 1.3;\r\n }\r\n\r\n .title-meta {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n margin-top: 6px;\r\n font-size: 13px;\r\n color: var(--text-subtle);\r\n font-weight: 500;\r\n }\r\n .title-meta .dot {\r\n width: 3px; height: 3px;\r\n border-radius: 50%;\r\n background: var(--text-hint);\r\n }\r\n\r\n \/* \u2500\u2500 Share button \u2014 green circle, white icon, morphs to checkmark on share \u2500\u2500 *\/\r\n .share-btn {\r\n flex-shrink: 0;\r\n display: none; \/* shown by JS *\/\r\n align-items: center;\r\n justify-content: center;\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n border: none;\r\n background: var(--primary);\r\n cursor: pointer;\r\n overflow: hidden;\r\n position: relative;\r\n \/* Spring animation on the morph *\/\r\n transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),\r\n background 0.3s ease;\r\n }\r\n .share-btn:active { transform: scale(0.82); }\r\n\r\n \/* Both icons sit inside the button \u2014 only one visible at a time *\/\r\n .share-btn .ico { position: absolute; transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }\r\n .share-btn .ico-share { opacity: 1; transform: scale(1) rotate(0deg); }\r\n .share-btn .ico-check { opacity: 0; transform: scale(0.4) rotate(-20deg); }\r\n\r\n \/* \"done\" state: checkmark slides in, share icon fades out *\/\r\n .share-btn.share-done { background: var(--primary-dark); transform: scale(1.12); }\r\n .share-btn.share-done .ico-share { opacity: 0; transform: scale(0.4) rotate(20deg); }\r\n .share-btn.share-done .ico-check { opacity: 1; transform: scale(1) rotate(0deg); }\r\n\r\n \/* \u2500\u2500 Cards \u2500\u2500 *\/\r\n .card {\r\n background: var(--card);\r\n border-radius: var(--radius-card);\r\n box-shadow: var(--shadow-card);\r\n padding: 20px;\r\n margin-top: 16px;\r\n }\r\n .card-label {\r\n font-size: 11px;\r\n font-weight: 600;\r\n color: var(--text-hint);\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n margin-bottom: 10px;\r\n }\r\n .card p {\r\n font-size: 15px;\r\n color: var(--text-secondary);\r\n line-height: 1.65;\r\n white-space: pre-wrap;\r\n word-wrap: break-word;\r\n }\r\n\r\n \/* \u2500\u2500 Details grid \u2500\u2500 *\/\r\n .details-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n margin-top: 4px;\r\n }\r\n .detail-chip {\r\n background: var(--bg);\r\n border-radius: var(--radius-btn);\r\n padding: 14px 16px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .detail-chip.full-width { grid-column: 1 \/ -1; }\r\n .detail-icon {\r\n width: 36px; height: 36px;\r\n border-radius: 10px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 16px;\r\n flex-shrink: 0;\r\n }\r\n .detail-icon.green { background: var(--primary-light); }\r\n .detail-icon.orange { background: var(--orange-light); }\r\n .detail-icon.grey { background: rgba(0,0,0,0.05); }\r\n .detail-text { display:flex; flex-direction:column; min-width:0; }\r\n .detail-text .label {\r\n font-size: 11px; font-weight: 600;\r\n color: var(--text-hint);\r\n text-transform: uppercase;\r\n letter-spacing: 0.3px;\r\n }\r\n .detail-text .value {\r\n font-size: 14px; font-weight: 500;\r\n color: var(--text-primary);\r\n margin-top: 1px;\r\n white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\r\n }\r\n\r\n \/* \u2500\u2500 Map \u2500\u2500 *\/\r\n .map-wrapper {\r\n border-radius: var(--radius-img);\r\n overflow: hidden;\r\n height: 220px;\r\n margin-top: 12px;\r\n background: #e8e8e8;\r\n }\r\n .map-wrapper #map { width:100%; height:100%; }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n S\u00c5 H\u00c4R F\u00c5R DU F\u00d6REM\u00c5LET \u2014 How to get it\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .how-card {\r\n background: var(--card);\r\n border-radius: var(--radius-card);\r\n box-shadow: var(--shadow-card);\r\n padding: 20px;\r\n margin-top: 16px;\r\n }\r\n\r\n .how-steps { margin-top: 16px; }\r\n\r\n .how-step {\r\n display: flex;\r\n gap: 16px;\r\n position: relative;\r\n }\r\n\r\n \/* Vertical connector line between steps *\/\r\n .how-step:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n left: 17px;\r\n top: 38px;\r\n width: 2px;\r\n height: calc(100% - 10px);\r\n background: var(--primary-light);\r\n border-radius: 1px;\r\n }\r\n\r\n .how-step + .how-step { margin-top: 20px; }\r\n\r\n .how-num {\r\n width: 36px; height: 36px;\r\n border-radius: 50%;\r\n background: var(--primary);\r\n color: #fff;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 14px; font-weight: 700;\r\n flex-shrink: 0;\r\n }\r\n\r\n .how-body { padding-top: 6px; padding-bottom: 16px; }\r\n .how-title { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }\r\n .how-desc { font-size: 13px; color: var(--text-secondary); margin-top: 3px; line-height: 1.55; }\r\n\r\n .how-berry-note {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n margin-top: 8px;\r\n padding: 6px 12px;\r\n background: var(--primary-light);\r\n border-radius: var(--radius-pill);\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: var(--primary-dark);\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n S\u00c4KERHET & F\u00d6RTROENDE \u2014 Safety & trust\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .safety-card {\r\n background: var(--card);\r\n border-radius: var(--radius-card);\r\n box-shadow: var(--shadow-card);\r\n padding: 20px;\r\n margin-top: 16px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n \/* Subtle green tint strip on the left edge *\/\r\n .safety-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; bottom: 0;\r\n width: 4px;\r\n background: var(--primary);\r\n border-radius: 4px 0 0 4px;\r\n }\r\n\r\n .safety-items { margin-top: 14px; display: flex; flex-direction: column; gap: 0; }\r\n\r\n .safety-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 14px;\r\n padding: 14px 0;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .safety-item:first-child { padding-top: 0; }\r\n .safety-item:last-child { border-bottom: none; padding-bottom: 0; }\r\n\r\n .safety-icon {\r\n width: 40px; height: 40px;\r\n border-radius: 12px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 18px;\r\n flex-shrink: 0;\r\n }\r\n .safety-icon.green { background: var(--primary-light); }\r\n .safety-icon.orange { background: var(--orange-light); }\r\n .safety-icon.blue { background: rgba(33,150,243,0.10); }\r\n .safety-icon.red { background: rgba(229,57,53,0.10); }\r\n\r\n .safety-text-block { flex: 1; min-width: 0; }\r\n .safety-title { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }\r\n .safety-desc { font-size: 13px; color: var(--text-secondary); margin-top: 3px; line-height: 1.55; }\r\n\r\n \/* Community pledge footer inside the card *\/\r\n .safety-pledge {\r\n margin-top: 16px;\r\n padding: 14px 16px;\r\n background: linear-gradient(135deg, var(--primary-light) 0%, rgba(255,127,17,0.06) 100%);\r\n border-radius: var(--radius-btn);\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n .safety-pledge-icon { font-size: 24px; flex-shrink: 0; }\r\n .safety-pledge-text { font-size: 12px; color: var(--primary-dark); font-weight: 500; line-height: 1.5; }\r\n .safety-pledge-text strong { display: block; font-size: 13px; margin-bottom: 2px; }\r\n\r\n \/* \u2500\u2500 Promo banner \u2500\u2500 *\/\r\n .promo-banner {\r\n margin-top: 16px;\r\n background: linear-gradient(135deg, var(--primary) 0%, #2d8a35 100%);\r\n border-radius: var(--radius-card);\r\n padding: 24px 20px;\r\n color: #fff;\r\n text-align: center;\r\n box-shadow: 0 4px 20px rgba(67,169,75,0.20);\r\n }\r\n .promo-banner h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }\r\n .promo-banner p { font-size: 13px; opacity: 0.85; line-height: 1.5; max-width: 340px; margin: 0 auto; }\r\n .promo-stores { display:flex; justify-content:center; gap:10px; margin-top:16px; }\r\n .store-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: rgba(255,255,255,0.18);\r\n backdrop-filter: blur(6px);\r\n padding: 10px 18px;\r\n border-radius: var(--radius-btn);\r\n color: #fff;\r\n text-decoration: none;\r\n font-size: 13px; font-weight: 600;\r\n transition: background 0.3s, color 0.3s;\r\n }\r\n .store-link:hover { background: #fff; color: var(--primary); }\r\n .store-link svg { width:18px; height:18px; fill:#fff; transition: fill 0.3s; }\r\n .store-link:hover svg { fill: var(--primary); }\r\n\r\n \/* \u2500\u2500 Skeleton \u2500\u2500 *\/\r\n .skeleton {\r\n background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);\r\n background-size: 200% 100%;\r\n animation: shimmer 1.5s ease infinite;\r\n border-radius: 8px;\r\n }\r\n @keyframes shimmer {\r\n 0% { background-position: 200% 0; }\r\n 100% { background-position: -200% 0; }\r\n }\r\n .skeleton-title { height:24px; width:60%; }\r\n .skeleton-text { height:16px; width:80%; margin-top:8px; }\r\n .skeleton-text-sm { height:14px; width:45%; margin-top:6px; }\r\n\r\n \/* \u2500\u2500 Error \/ empty state \u2500\u2500 *\/\r\n .empty-state {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 60px 20px;\r\n text-align: center;\r\n }\r\n .empty-icon {\r\n width: 88px; height: 88px;\r\n border-radius: 50%;\r\n background: var(--primary-light);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 40px;\r\n margin-bottom: 20px;\r\n }\r\n .empty-state h3 { font-size: 18px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }\r\n .empty-state p { font-size: 14px; color: var(--text-hint); line-height: 1.6; max-width: 280px; margin-bottom: 28px; }\r\n .empty-store-btns { display:flex; flex-direction:column; gap:10px; width:100%; max-width:300px; }\r\n .empty-store-btn {\r\n display: flex; align-items: center; justify-content: center; gap:12px;\r\n padding: 13px 18px;\r\n border-radius: var(--radius-btn);\r\n text-decoration: none;\r\n font-size: 15px; font-weight: 600;\r\n }\r\n .empty-store-btn.apple { background: #111; color:#fff; }\r\n .empty-store-btn.google { background:#fff; color:#111; border:1.5px solid #e0e0e0; }\r\n .empty-store-btn svg { width:26px; height:26px; fill:currentColor; flex-shrink:0; }\r\n\r\n \/* \u2500\u2500 Toast \u2500\u2500 *\/\r\n .toast {\r\n position: fixed;\r\n bottom: 90px; left: 50%;\r\n transform: translateX(-50%) translateY(20px);\r\n background: rgba(0,0,0,0.82);\r\n backdrop-filter: blur(10px);\r\n color: #fff;\r\n padding: 10px 22px;\r\n border-radius: var(--radius-pill);\r\n font-size: 13px; font-weight: 500;\r\n z-index: 10001;\r\n opacity: 0;\r\n transition: all 0.3s ease;\r\n pointer-events: none;\r\n }\r\n .toast.show { opacity:1; transform: translateX(-50%) translateY(0); }\r\n\r\n \/* \u2500\u2500 Lightbox \u2500\u2500 *\/\r\n .lightbox-overlay {\r\n position: fixed; inset:0;\r\n background: rgba(0,0,0,0.95);\r\n z-index: 9999;\r\n display: flex; align-items:center; justify-content:center;\r\n opacity:0; transition: opacity 0.3s;\r\n }\r\n .lightbox-overlay.active { opacity:1; }\r\n .lightbox-img { max-width:92%; max-height:88vh; object-fit:contain; border-radius:8px; }\r\n .lb-btn {\r\n position: absolute;\r\n background: rgba(67,169,75,0.85);\r\n border:none; color:#fff;\r\n width:44px; height:44px;\r\n border-radius:50%;\r\n font-size:20px; cursor:pointer;\r\n display:flex; align-items:center; justify-content:center;\r\n transition: background 0.25s;\r\n }\r\n .lb-btn:hover { background:#fff; color:var(--primary); }\r\n .lb-close { top:20px; right:20px; }\r\n .lb-prev { left:16px; top:50%; transform:translateY(-50%); }\r\n .lb-next { right:16px; top:50%; transform:translateY(-50%); }\r\n .lb-counter {\r\n position: absolute; bottom:20px; left:50%; transform:translateX(-50%);\r\n background:rgba(0,0,0,0.6); color:#fff;\r\n padding:6px 16px; border-radius:var(--radius-badge);\r\n font-size:13px; font-weight:500;\r\n }\r\n\r\n \/* \u2500\u2500 App store modal \u2500\u2500 *\/\r\n .modal-overlay {\r\n position: fixed; inset:0;\r\n background: rgba(0,0,0,0.5);\r\n backdrop-filter: blur(4px);\r\n -webkit-backdrop-filter: blur(4px);\r\n z-index: 10000;\r\n display: flex; align-items:center; justify-content:center;\r\n opacity:0; transition: opacity 0.3s;\r\n pointer-events: none;\r\n }\r\n .modal-overlay.active { opacity:1; pointer-events:all; }\r\n .modal-box {\r\n background: var(--card);\r\n border-radius: var(--radius-card);\r\n padding: 36px 28px 28px;\r\n max-width: 400px; width:90%;\r\n text-align: center;\r\n box-shadow: var(--shadow-elevated);\r\n transform: translateY(20px);\r\n transition: transform 0.3s;\r\n }\r\n .modal-overlay.active .modal-box { transform:translateY(0); }\r\n .modal-box h2 { font-size:20px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }\r\n .modal-box .sub { font-size:14px; color:var(--text-subtle); margin-bottom:24px; line-height:1.5; }\r\n .modal-stores { display:flex; flex-direction:column; gap:10px; }\r\n .modal-store-btn {\r\n display: flex; align-items:center; justify-content:center; gap:14px;\r\n padding: 14px 20px;\r\n background: var(--primary); color:#fff;\r\n border-radius: var(--radius-img);\r\n text-decoration: none;\r\n transition: background 0.3s, color 0.3s, transform 0.25s, box-shadow 0.25s;\r\n }\r\n .modal-store-btn:hover {\r\n background: #fff; color:var(--primary);\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.12);\r\n }\r\n .modal-store-btn svg { width:32px; height:32px; fill:#fff; flex-shrink:0; transition:fill 0.3s; }\r\n .modal-store-btn:hover svg { fill:var(--primary); }\r\n .modal-store-btn .store-text { text-align:left; }\r\n .modal-store-btn .store-text small { display:block; font-size:10px; opacity:0.7; }\r\n .modal-store-btn .store-text span { display:block; font-size:17px; font-weight:600; line-height:1.2; }\r\n\r\n \/* \u2500\u2500 CTA (sticky bottom) \u2500\u2500 *\/\r\n .cta-wrap {\r\n position: fixed; bottom:0; left:0; right:0;\r\n z-index: 90;\r\n background: var(--card);\r\n box-shadow: 0 -4px 20px rgba(0,0,0,0.06);\r\n padding: 12px 16px calc(12px + env(safe-area-inset-bottom,0px));\r\n }\r\n .cta-inner {\r\n max-width: 960px; margin:0 auto;\r\n display:flex; gap:10px; align-items:center;\r\n }\r\n .cta-info { flex:1; min-width:0; }\r\n .cta-price {\r\n font-size:13px; font-weight:600; color:var(--primary);\r\n display:flex; align-items:center; gap:4px;\r\n }\r\n .cta-subtitle { font-size:11px; color:var(--text-hint); font-weight:500; }\r\n #contactBtn {\r\n flex:1; max-width:280px;\r\n padding: 14px 24px;\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n color:#fff; border:none;\r\n border-radius: var(--radius-btn);\r\n font-family:'Poppins',sans-serif;\r\n font-size:15px; font-weight:600;\r\n cursor:pointer;\r\n transition: all 0.25s;\r\n box-shadow: 0 4px 14px rgba(67,169,75,0.25);\r\n white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\r\n }\r\n #contactBtn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(67,169,75,0.32); }\r\n #contactBtn:active { transform:translateY(0); }\r\n\r\n \/* \u2500\u2500 Responsive \u2500\u2500 *\/\r\n @media (max-width: 374px) {\r\n .item-title { font-size:14px; }\r\n .cta-inner { flex-direction:column; gap:8px; }\r\n .cta-info { text-align:center; }\r\n .cta-price { justify-content:center; }\r\n #contactBtn { max-width:100%; width:100%; }\r\n .promo-stores { flex-direction:column; align-items:center; }\r\n .modal-box { padding:28px 20px 20px; }\r\n }\r\n\r\n @media (max-width: 639px) {\r\n .page-wrap { padding:16px 14px 100px; }\r\n .gallery { border-radius:12px; }\r\n .title-row { margin-top:16px; }\r\n .item-title { font-size:15px; }\r\n .card { padding:16px; border-radius:14px; }\r\n .map-wrapper{ height:200px; }\r\n #contactBtn { padding:14px 18px; font-size:14px; min-height:48px; }\r\n .how-card, .safety-card { padding:16px; border-radius:14px; }\r\n }\r\n\r\n @media (min-width: 640px) {\r\n .page-wrap { padding:28px 24px 100px; }\r\n .gallery { aspect-ratio:16\/9; }\r\n .item-title { font-size:18px; }\r\n .map-wrapper{ height:260px; }\r\n }\r\n\r\n @media (hover:none) {\r\n .share-btn:hover { background:transparent; color:var(--primary); }\r\n .share-btn:hover svg { stroke:var(--primary); }\r\n .gallery:hover img { transform:none; }\r\n #contactBtn:hover { transform:none; }\r\n .modal-store-btn:hover { transform:none; box-shadow:none; background:var(--primary); color:#fff; }\r\n .modal-store-btn:hover svg { fill:#fff; }\r\n .store-link:hover { background:rgba(255,255,255,0.18); color:#fff; }\r\n .store-link:hover svg { fill:#fff; }\r\n }\r\n @media (hover:none) {\r\n .share-btn:active { background:var(--primary); color:#fff; }\r\n .share-btn:active svg { stroke:#fff; }\r\n #contactBtn:active { transform:scale(0.97); opacity:0.9; }\r\n .modal-store-btn:active { background:#fff; color:var(--primary); transform:scale(0.97); }\r\n .modal-store-btn:active svg { fill:var(--primary); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <br\/><br\/>\r\n\r\n <!-- \u2500\u2500 Main content \u2500\u2500 -->\r\n <div id=\"itemContainer\">\r\n <div class=\"page-wrap\">\r\n\r\n <!-- Gallery -->\r\n <div class=\"gallery\" id=\"galleryWrap\">\r\n <img id=\"heroImage\" alt=\"F\u00f6rem\u00e5lsbild\" style=\"display:none;\" \/>\r\n <span class=\"gallery-badge\" id=\"imageCount\"><\/span>\r\n <span class=\"status-pill\" id=\"statusPill\" style=\"display:none;\"><\/span>\r\n <div id=\"gallerySkeleton\" style=\"width:100%;height:100%;\" class=\"skeleton\"><\/div>\r\n <\/div>\r\n\r\n <!-- Title row -->\r\n <div class=\"title-row\">\r\n <div style=\"flex:1;min-width:0;\">\r\n <h1 class=\"item-title\" id=\"itemTitle\">\r\n <div class=\"skeleton skeleton-title\"><\/div>\r\n <\/h1>\r\n <div class=\"title-meta\" id=\"titleMeta\">\r\n <span id=\"itemType\"><\/span>\r\n <span class=\"dot\"><\/span>\r\n <span id=\"itemDate\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <!-- Share button: green circle, white icons, morphs on click -->\r\n <button class=\"share-btn\" id=\"shareBtn\" aria-label=\"Dela\">\r\n <!-- Default: share icon -->\r\n <span class=\"ico ico-share\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"#ffffff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"18\" cy=\"5\" r=\"3\"\/><circle cx=\"6\" cy=\"12\" r=\"3\"\/><circle cx=\"18\" cy=\"19\" r=\"3\"\/>\r\n <line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\"\/>\r\n <line x1=\"15.41\" y1=\"6.51\" x2=\"8.59\" y2=\"10.49\"\/>\r\n <\/svg>\r\n <\/span>\r\n <!-- Done: checkmark icon -->\r\n <span class=\"ico ico-check\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"#ffffff\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"\/>\r\n <\/svg>\r\n <\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Description -->\r\n <div class=\"card\">\r\n <div class=\"card-label\">Om f\u00f6rem\u00e5let<\/div>\r\n <p id=\"itemDesc\">\r\n <span class=\"skeleton skeleton-text\"><\/span>\r\n <span class=\"skeleton skeleton-text-sm\"><\/span>\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Details -->\r\n <div class=\"card\">\r\n <div class=\"card-label\">Detaljer<\/div>\r\n <div class=\"details-grid\" id=\"detailsGrid\">\r\n <div class=\"detail-chip\">\r\n <div class=\"detail-icon green\">\ud83d\udce6<\/div>\r\n <div class=\"detail-text\">\r\n <span class=\"label\">Status<\/span>\r\n <span class=\"value\" id=\"itemStatus\">Laddar\u2026<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail-chip\">\r\n <div class=\"detail-icon green\">\ud83e\udd1d<\/div>\r\n <div class=\"detail-text\">\r\n <span class=\"label\">Upph\u00e4mtning<\/span>\r\n <span class=\"value\" id=\"itemAvailability\">Laddar\u2026<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail-chip full-width\" id=\"expirationChip\" style=\"display:none;\">\r\n <div class=\"detail-icon orange\">\u23f3<\/div>\r\n <div class=\"detail-text\">\r\n <span class=\"label\">Utg\u00e5ngsdatum<\/span>\r\n <span class=\"value\" id=\"itemExpiration\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Map -->\r\n <div class=\"card\" id=\"locationCard\">\r\n <div class=\"card-label\">Ungef\u00e4rlig plats<\/div>\r\n <div class=\"map-wrapper\"><div id=\"map\"><\/div><\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550 S\u00c5 H\u00c4R F\u00c5R DU F\u00d6REM\u00c5LET \u2550\u2550 -->\r\n <div class=\"how-card\">\r\n <div class=\"card-label\">S\u00e5 h\u00e4r f\u00e5r du f\u00f6rem\u00e5let<\/div>\r\n <div class=\"how-steps\">\r\n\r\n <div class=\"how-step\">\r\n <div class=\"how-num\">1<\/div>\r\n <div class=\"how-body\">\r\n <div class=\"how-title\">Ladda ner Deela<\/div>\r\n <div class=\"how-desc\">Appen \u00e4r helt gratis f\u00f6r iOS och Android. Skapa ditt konto p\u00e5 60 sekunder \u2014 inga kr\u00e5ngliga formul\u00e4r.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"how-step\">\r\n <div class=\"how-num\">2<\/div>\r\n <div class=\"how-body\">\r\n <div class=\"how-title\" id=\"howStep2\">Kontakta \u00e4garen med ett b\u00e4r<\/div>\r\n <div class=\"how-desc\">Skicka ett meddelande f\u00f6r att visa ditt intresse. Det kostar bara ett lingonb\u00e4r att ta f\u00f6rsta kontakten.<\/div>\r\n <div class=\"how-berry-note\">\ud83e\uded0 1 lingonb\u00e4r = 1 konversation<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"how-step\">\r\n <div class=\"how-num\">3<\/div>\r\n <div class=\"how-body\">\r\n <div class=\"how-title\">Kom \u00f6verens och h\u00e4mta<\/div>\r\n <div class=\"how-desc\">Chatta direkt i appen, best\u00e4m tid och plats \u2014 och h\u00e4mta sedan f\u00f6rem\u00e5let fr\u00e5n din granne.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550 S\u00c4KERHET & F\u00d6RTROENDE \u2550\u2550 -->\r\n <div class=\"safety-card\">\r\n <div class=\"card-label\">S\u00e4kerhet & f\u00f6rtroende<\/div>\r\n <div class=\"safety-items\">\r\n\r\n <div class=\"safety-item\">\r\n <div class=\"safety-icon green\">\ud83d\udee1\ufe0f<\/div>\r\n <div class=\"safety-text-block\">\r\n <div class=\"safety-title\">Verifierade community-medlemmar<\/div>\r\n <div class=\"safety-desc\">Alla Deela-anv\u00e4ndare genomg\u00e5r kontobekr\u00e4ftelse. Du vet alltid vem du tr\u00e4ffar \u2014 grannar hj\u00e4lper grannar.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"safety-item\">\r\n <div class=\"safety-icon blue\">\ud83d\udcac<\/div>\r\n <div class=\"safety-text-block\">\r\n <div class=\"safety-title\">Alla meddelanden stannar i appen<\/div>\r\n <div class=\"safety-desc\">Kommunikation sker alltid inuti Deela. Dela aldrig personlig kontaktinformation eller flytta konversationen till externa plattformar innan m\u00f6tet.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"safety-item\">\r\n <div class=\"safety-icon orange\">\ud83d\udccd<\/div>\r\n <div class=\"safety-text-block\">\r\n <div class=\"safety-title\">Tr\u00e4ffas p\u00e5 offentliga platser<\/div>\r\n <div class=\"safety-desc\">Vi rekommenderar upph\u00e4mtning i v\u00e4lbelysta, offentliga milj\u00f6er \u2014 en park, ett caf\u00e9 eller ett torg. K\u00e4nns n\u00e5got fel kan du alltid avbryta, inga fr\u00e5gor st\u00e4lls.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"safety-item\">\r\n <div class=\"safety-icon red\">\ud83d\udea9<\/div>\r\n <div class=\"safety-text-block\">\r\n <div class=\"safety-title\">Enkel rapportering<\/div>\r\n <div class=\"safety-desc\">Ser du n\u00e5got som inte st\u00e4mmer? Rapportera vilket f\u00f6rem\u00e5l eller anv\u00e4ndare som helst direkt i appen. V\u00e5rt team granskar alla rapporter skyndsamt.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- Community pledge -->\r\n <div class=\"safety-pledge\">\r\n <div class=\"safety-pledge-icon\">\ud83c\udf31<\/div>\r\n <div class=\"safety-pledge-text\">\r\n <strong>Deelas community-l\u00f6fte<\/strong>\r\n Vi \u00e4r grannar som hj\u00e4lper grannar. Var gener\u00f6s, var \u00e4rlig \u2014 och h\u00e5ll delningscirkeln lokal och levande.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Promo banner -->\r\n <div class=\"promo-banner\">\r\n <h3>Dela & spara med Deela \ud83c\udf31<\/h3>\r\n <p>Byt mat och vardagsf\u00f6rem\u00e5l med dina grannar. Samla lingonb\u00e4r och plantera riktiga tr\u00e4d tillsammans!<\/p>\r\n <div class=\"promo-stores\">\r\n <a href=\"https:\/\/apps.apple.com\/se\/app\/deela\/id6741097402\" target=\"_blank\" class=\"store-link\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z\"\/><\/svg>\r\n App Store\r\n <\/a>\r\n <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.deela.app&hl=sv\" target=\"_blank\" class=\"store-link\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z\"\/><\/svg>\r\n Google Play\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div><!-- \/page-wrap -->\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 Sticky CTA \u2500\u2500 -->\r\n <div class=\"cta-wrap\">\r\n <div class=\"cta-inner\">\r\n <div class=\"cta-info\">\r\n <div class=\"cta-price\">\ud83e\uded0 Gratis med lingonb\u00e4r<\/div>\r\n <div class=\"cta-subtitle\">\u00d6ppna appen f\u00f6r att beg\u00e4ra detta f\u00f6rem\u00e5l<\/div>\r\n <\/div>\r\n <button id=\"contactBtn\">Laddar\u2026<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 Toast \u2500\u2500 -->\r\n <div class=\"toast\" id=\"toast\"><\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n if (!window.firebaseInitialized) {\r\n window.firebaseInitialized = true;\r\n const s1 = document.createElement('script');\r\n s1.src = 'https:\/\/www.gstatic.com\/firebasejs\/9.23.0\/firebase-app-compat.js';\r\n s1.onload = () => {\r\n const s2 = document.createElement('script');\r\n s2.src = 'https:\/\/www.gstatic.com\/firebasejs\/9.23.0\/firebase-firestore-compat.js';\r\n s2.onload = initFirestore;\r\n document.head.appendChild(s2);\r\n };\r\n document.head.appendChild(s1);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Firestore init \u2500\u2500\u2500 *\/\r\n function initFirestore() {\r\n const firebaseConfig = {\r\n apiKey: \"AIzaSyAZLKJQt5R19gBNEIQPUzUnpW3btaP6_EI\",\r\n authDomain: \"deela-dda79.firebaseapp.com\",\r\n databaseURL: \"https:\/\/deela-dda79-default-rtdb.europe-west1.firebasedatabase.app\",\r\n projectId: \"deela-dda79\",\r\n storageBucket: \"deela-dda79.appspot.com\",\r\n messagingSenderId: \"149666199557\",\r\n appId: \"1:149666199557:web:da19b79b1fe95fa658c46c\",\r\n measurementId: \"G-SHZ540ZJ49\"\r\n };\r\n if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);\r\n const db = firebase.firestore();\r\n\r\n const params = new URLSearchParams(window.location.search);\r\n const itemId = params.get('id');\r\n\r\n if (!itemId) { showError(); return; }\r\n\r\n db.collection('item').doc(itemId).get()\r\n .then(doc => {\r\n if (!doc.exists) { showError(); return; }\r\n const data = doc.data();\r\n\r\n \/* Fetch owner name *\/\r\n const ownerId = data.userId || data.creatorId;\r\n if (ownerId) {\r\n db.collection('users').doc(ownerId).get()\r\n .then(userDoc => {\r\n const firstName = userDoc.exists ? userDoc.data().firstName : null;\r\n setContactButton(firstName);\r\n })\r\n .catch(() => setContactButton(null));\r\n } else {\r\n setContactButton(null);\r\n }\r\n\r\n updateMetaTags(data.title, data.desc, data.images ? data.images[0] : null);\r\n renderItem(data);\r\n })\r\n .catch(err => {\r\n console.error('Firestore error:', err);\r\n showError();\r\n });\r\n }\r\n\r\n \/* \u2500\u2500\u2500 CTA button text \u2500\u2500\u2500 *\/\r\n function setContactButton(firstName) {\r\n const btn = document.getElementById('contactBtn');\r\n if (!btn) return;\r\n const name = firstName && firstName.trim ? firstName.trim() : '';\r\n\r\n \/* Update step 2 in the how-to section *\/\r\n const step2 = document.getElementById('howStep2');\r\n if (step2 && name) step2.textContent = `Kontakta ${name} med ett b\u00e4r`;\r\n\r\n btn.textContent = name ? `Kontakta ${name}` : 'Kontakta \u00e4garen';\r\n btn.onclick = handleContactClick;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Render item \u2500\u2500\u2500 *\/\r\n function renderItem(data) {\r\n document.getElementById('itemTitle').textContent = data.title || 'Namnl\u00f6st f\u00f6rem\u00e5l';\r\n\r\n const descEl = document.getElementById('itemDesc');\r\n descEl.textContent = data.desc || 'Ingen beskrivning angiven.';\r\n\r\n const typeEl = document.getElementById('itemType');\r\n const dateEl = document.getElementById('itemDate');\r\n if (data.type || data.category) {\r\n const t = data.type || data.category;\r\n typeEl.textContent = (t === 'Food' ? '\ud83c\udf54 Mat' : '\ud83d\udce6 F\u00f6rem\u00e5l');\r\n }\r\n if (data.createdAt) dateEl.textContent = relativeDate(data.createdAt);\r\n\r\n const availEl = document.getElementById('itemAvailability');\r\n if (availEl) availEl.textContent = data.availability || 'Kontakta \u00e4garen';\r\n\r\n renderStatus(data.status);\r\n\r\n if (data.type === 'Food' || data.category === 'Food') {\r\n renderExpiration(data.expirationDate);\r\n }\r\n\r\n renderImages(data.images);\r\n if (data.address || data.location) initMap(data.address, data.location);\r\n setupShare(data);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Status \u2500\u2500\u2500 *\/\r\n function renderStatus(status) {\r\n const statusMap = { available: 'Tillg\u00e4nglig', reserved: 'Reserverad', delivered: 'Levererad' };\r\n const chipVal = document.getElementById('itemStatus');\r\n const pill = document.getElementById('statusPill');\r\n const type = status && status.type ? status.type : 'available';\r\n\r\n if (chipVal) {\r\n chipVal.textContent = statusMap[type] || type;\r\n chipVal.style.color = type === 'available' ? '#43A94B' : type === 'reserved' ? '#FF7F11' : '#888';\r\n }\r\n if (pill) {\r\n pill.textContent = statusMap[type] || type;\r\n pill.style.display = 'block';\r\n pill.className = 'status-pill ' +\r\n (type === 'available' ? 'status-available' :\r\n type === 'reserved' ? 'status-reserved' : 'status-delivered');\r\n }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Expiration \u2500\u2500\u2500 *\/\r\n function renderExpiration(exp) {\r\n const chip = document.getElementById('expirationChip');\r\n const val = document.getElementById('itemExpiration');\r\n if (!chip || !val) return;\r\n chip.style.display = 'flex';\r\n if (!exp) { val.textContent = 'Inte angivet'; return; }\r\n if (typeof exp === 'number') {\r\n const d = new Date(exp);\r\n const diff = Math.ceil((d - new Date()) \/ 864e5);\r\n const ds = d.toLocaleDateString('sv-SE', { year:'numeric', month:'short', day:'numeric' });\r\n if (diff < 0) { val.textContent = `\u26a0\ufe0f Utg\u00e5tt (${ds})`; val.style.color = '#dc3545'; }\r\n else if (diff <= 1){ val.textContent = `\u26a0\ufe0f Utg\u00e5r ${diff===0?'idag':'imorgon'}`; val.style.color = '#ffc107'; }\r\n else if (diff <= 3){ val.textContent = `\u26a0\ufe0f ${diff} dagar kvar`; val.style.color = '#ffc107'; }\r\n else { val.textContent = ds; }\r\n } else {\r\n val.textContent = exp;\r\n }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Images \u2500\u2500\u2500 *\/\r\n function renderImages(images) {\r\n const hero = document.getElementById('heroImage');\r\n const badge = document.getElementById('imageCount');\r\n const skel = document.getElementById('gallerySkeleton');\r\n if (skel) skel.style.display = 'none';\r\n\r\n if (images && images.length > 0) {\r\n hero.src = images[0];\r\n hero.style.display = 'block';\r\n hero.onclick = () => openLightbox(images, 0);\r\n if (images.length > 1 && badge) {\r\n badge.textContent = `+${images.length - 1} bilder`;\r\n badge.style.display = 'block';\r\n }\r\n } else {\r\n hero.src = 'https:\/\/via.placeholder.com\/800x600\/F0F0F0\/BDBDBD?text=Ingen+bild';\r\n hero.style.display = 'block';\r\n }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Swedish relative date \u2500\u2500\u2500 *\/\r\n function relativeDate(ts) {\r\n const d = new Date(ts);\r\n const diff = Math.floor((Date.now() - d) \/ 86400000);\r\n if (diff === 0) return 'Idag';\r\n if (diff === 1) return 'Ig\u00e5r';\r\n if (diff < 7) return `F\u00f6r ${diff} dagar sedan`;\r\n const w = Math.floor(diff \/ 7);\r\n if (diff < 30) return `F\u00f6r ${w} vecka${w > 1 ? 'r' : ''} sedan`;\r\n return d.toLocaleDateString('sv-SE', { year:'numeric', month:'long', day:'numeric' });\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Friendly error state \u2500\u2500\u2500 *\/\r\n function showError() {\r\n const cta = document.querySelector('.cta-wrap');\r\n if (cta) cta.style.display = 'none';\r\n\r\n const appStore = 'https:\/\/apps.apple.com\/se\/app\/deela\/id6741097402';\r\n const playStore = 'https:\/\/play.google.com\/store\/apps\/details?id=com.deela.app&hl=sv';\r\n\r\n document.getElementById('itemContainer').innerHTML = `\r\n <div class=\"page-wrap\">\r\n <div class=\"empty-state\">\r\n <div class=\"empty-icon\">\ud83c\udf3f<\/div>\r\n <h3>Ojd\u00e5, vi hittar inte det h\u00e4r f\u00f6rem\u00e5let<\/h3>\r\n <p>F\u00f6rem\u00e5let kan ha tagits bort av \u00e4garen, eller s\u00e5 kan l\u00e4nken vara gammal. Hitta massor av andra f\u00f6rem\u00e5l i appen!<\/p>\r\n <div class=\"empty-store-btns\">\r\n <a href=\"${appStore}\" target=\"_blank\" rel=\"noopener\" class=\"empty-store-btn apple\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z\"\/><\/svg>\r\n App Store\r\n <\/a>\r\n <a href=\"${playStore}\" target=\"_blank\" rel=\"noopener\" class=\"empty-store-btn google\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z\"\/><\/svg>\r\n Google Play\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Share \u2014 green circle morphs to checkmark on success \u2500\u2500\u2500 *\/\r\n function setupShare(data) {\r\n const btn = document.getElementById('shareBtn');\r\n if (!btn) return;\r\n btn.style.display = 'flex';\r\n\r\n btn.onclick = async () => {\r\n let success = false;\r\n\r\n if (navigator.share) {\r\n try {\r\n await navigator.share({ title: data.title, text: data.desc, url: location.href });\r\n success = true;\r\n } catch (e) {\r\n if (e.name !== 'AbortError') {\r\n success = copyLink();\r\n }\r\n }\r\n } else {\r\n success = copyLink();\r\n }\r\n\r\n if (success) flashCheckmark(btn);\r\n };\r\n }\r\n\r\n \/* Morphs button to checkmark for 1.8s then springs back *\/\r\n function flashCheckmark(btn) {\r\n btn.classList.add('share-done');\r\n setTimeout(() => btn.classList.remove('share-done'), 1800);\r\n }\r\n\r\n function copyLink() {\r\n if (navigator.clipboard) {\r\n navigator.clipboard.writeText(location.href)\r\n .then(() => showToast('L\u00e4nk kopierad!'))\r\n .catch(() => fallbackCopy());\r\n } else { fallbackCopy(); }\r\n return true;\r\n }\r\n\r\n function fallbackCopy() {\r\n const ta = document.createElement('textarea');\r\n ta.value = location.href;\r\n ta.style.cssText = 'position:fixed;left:-9999px';\r\n document.body.appendChild(ta);\r\n ta.select();\r\n try { document.execCommand('copy'); showToast('L\u00e4nk kopierad!'); }\r\n catch(e) { showToast('Kunde inte kopiera l\u00e4nken'); }\r\n document.body.removeChild(ta);\r\n }\r\n\r\n function showToast(msg) {\r\n const t = document.getElementById('toast');\r\n t.textContent = msg;\r\n t.classList.add('show');\r\n setTimeout(() => t.classList.remove('show'), 2200);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Contact \u2192 detect device, redirect or show modal \u2500\u2500\u2500 *\/\r\n function handleContactClick() {\r\n const ua = navigator.userAgent || '';\r\n const iOS = \/iPad|iPhone|iPod\/.test(ua) && !window.MSStream;\r\n const android = \/android\/i.test(ua);\r\n const appStore = 'https:\/\/apps.apple.com\/se\/app\/deela\/id6741097402';\r\n const playStore = 'https:\/\/play.google.com\/store\/apps\/details?id=com.deela.app&hl=sv';\r\n\r\n if (iOS) { location.href = appStore; }\r\n else if (android) { location.href = playStore; }\r\n else { showAppModal(appStore, playStore); }\r\n }\r\n\r\n function showAppModal(appStore, playStore) {\r\n const overlay = document.createElement('div');\r\n overlay.className = 'modal-overlay';\r\n overlay.innerHTML = `\r\n <div class=\"modal-box\">\r\n <h2>H\u00e4mta Deela<\/h2>\r\n <p class=\"sub\">Ladda ner appen f\u00f6r att kontakta \u00e4garen och hitta f\u00f6rem\u00e5l n\u00e4ra dig.<\/p>\r\n <div class=\"modal-stores\">\r\n <a href=\"${appStore}\" target=\"_blank\" rel=\"noopener\" class=\"modal-store-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z\"\/><\/svg>\r\n <div class=\"store-text\"><small>Ladda ner p\u00e5<\/small><span>App Store<\/span><\/div>\r\n <\/a>\r\n <a href=\"${playStore}\" target=\"_blank\" rel=\"noopener\" class=\"modal-store-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z\"\/><\/svg>\r\n <div class=\"store-text\"><small>H\u00e4mta p\u00e5<\/small><span>Google Play<\/span><\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>`;\r\n document.body.appendChild(overlay);\r\n requestAnimationFrame(() => overlay.classList.add('active'));\r\n overlay.onclick = (e) => { if (e.target === overlay) closeModal(overlay); };\r\n document.addEventListener('keydown', function esc(e) {\r\n if (e.key === 'Escape') { closeModal(overlay); document.removeEventListener('keydown', esc); }\r\n });\r\n }\r\n\r\n function closeModal(el) {\r\n el.classList.remove('active');\r\n setTimeout(() => el.remove(), 300);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Lightbox \u2500\u2500\u2500 *\/\r\n function openLightbox(images, idx) {\r\n let cur = idx;\r\n const overlay = document.createElement('div');\r\n overlay.className = 'lightbox-overlay';\r\n\r\n const img = document.createElement('img');\r\n img.className = 'lightbox-img';\r\n img.src = images[cur];\r\n\r\n const close = document.createElement('button');\r\n close.className = 'lb-btn lb-close';\r\n close.innerHTML = '\u2715';\r\n close.onclick = () => closeLB();\r\n\r\n const counter = document.createElement('div');\r\n counter.className = 'lb-counter';\r\n const upd = () => counter.textContent = `${cur+1} \/ ${images.length}`;\r\n upd();\r\n\r\n overlay.appendChild(img);\r\n overlay.appendChild(close);\r\n overlay.appendChild(counter);\r\n\r\n if (images.length > 1) {\r\n const prev = document.createElement('button');\r\n prev.className = 'lb-btn lb-prev'; prev.innerHTML = '\u276e';\r\n prev.onclick = (e) => { e.stopPropagation(); cur=(cur-1+images.length)%images.length; img.src=images[cur]; upd(); };\r\n const next = document.createElement('button');\r\n next.className = 'lb-btn lb-next'; next.innerHTML = '\u276f';\r\n next.onclick = (e) => { e.stopPropagation(); cur=(cur+1)%images.length; img.src=images[cur]; upd(); };\r\n overlay.appendChild(prev);\r\n overlay.appendChild(next);\r\n }\r\n\r\n overlay.onclick = (e) => { if (e.target === overlay) closeLB(); };\r\n document.body.appendChild(overlay);\r\n requestAnimationFrame(() => overlay.classList.add('active'));\r\n\r\n function closeLB() { overlay.classList.remove('active'); setTimeout(() => overlay.remove(), 300); }\r\n\r\n document.addEventListener('keydown', function kh(e) {\r\n if (e.key === 'Escape') { closeLB(); document.removeEventListener('keydown', kh); }\r\n if (e.key === 'ArrowLeft' && images.length>1) { cur=(cur-1+images.length)%images.length; img.src=images[cur]; upd(); }\r\n if (e.key === 'ArrowRight' && images.length>1) { cur=(cur+1)%images.length; img.src=images[cur]; upd(); }\r\n });\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Google Maps \u2500\u2500\u2500 *\/\r\n function initMap(address, geoPoint) {\r\n \/* Use stored GeoPoint if available \u2014 skips Geocoding API call *\/\r\n if (geoPoint && geoPoint.latitude && geoPoint.longitude) {\r\n loadMapsAndRender(null, geoPoint.latitude, geoPoint.longitude);\r\n } else if (address) {\r\n loadMapsAndRender(address, null, null);\r\n }\r\n }\r\n\r\n function loadMapsAndRender(address, lat, lng) {\r\n const cb = `_mapCb${Date.now()}`;\r\n window[cb] = () => {\r\n if (lat !== null && lng !== null) {\r\n renderMap(null, lat, lng);\r\n } else {\r\n new google.maps.Geocoder().geocode({ address }, (results, status) => {\r\n if (status === 'OK' && results[0]) {\r\n const loc = results[0].geometry.location;\r\n renderMap(null, loc.lat(), loc.lng());\r\n } else {\r\n const mapDiv = document.getElementById('map');\r\n if (mapDiv) mapDiv.innerHTML = '<p style=\"padding:20px;text-align:center;color:#9E9E9E;font-size:13px;\">Karta ej tillg\u00e4nglig<\/p>';\r\n }\r\n });\r\n }\r\n };\r\n const s = document.createElement('script');\r\n s.src = `https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyAdNQkPeM0jaG_Y-guUU4VoZGD_eDyk3ww&callback=${cb}`;\r\n s.async = true; s.defer = true;\r\n document.head.appendChild(s);\r\n }\r\n\r\n function renderMap(address, lat, lng) {\r\n const mapDiv = document.getElementById('map');\r\n if (!mapDiv) return;\r\n const center = { lat, lng };\r\n const map = new google.maps.Map(mapDiv, {\r\n center, zoom: 14,\r\n disableDefaultUI: true, zoomControl: true,\r\n styles: [{ featureType:'poi', elementType:'labels', stylers:[{visibility:'off'}] }],\r\n });\r\n const circle = new google.maps.Circle({\r\n strokeColor:'#FF7F11', strokeOpacity:0.5, strokeWeight:2,\r\n fillColor:'#FF7F11', fillOpacity:0.15,\r\n map, center, radius: 600,\r\n });\r\n map.fitBounds(circle.getBounds());\r\n }\r\n\r\n \/* \u2500\u2500\u2500 OG Meta tags \u2500\u2500\u2500 *\/\r\n function updateMetaTags(title, desc, img) {\r\n document.title = (title || 'F\u00f6rem\u00e5l') + ' \u2014 Deela';\r\n const set = (attr, key, val) => {\r\n if (!val) return;\r\n let m = document.querySelector(`meta[${attr}=\"${key}\"]`);\r\n if (!m) { m = document.createElement('meta'); m.setAttribute(attr, key); document.head.appendChild(m); }\r\n m.setAttribute('content', val);\r\n };\r\n const url = location.href;\r\n set('property','og:title', title);\r\n set('property','og:description', desc);\r\n set('property','og:url', url);\r\n set('property','og:type','website');\r\n set('property','og:site_name','Deela');\r\n if (img) { set('property','og:image', img); set('property','og:image:width','1200'); set('property','og:image:height','630'); }\r\n set('name','twitter:card','summary_large_image');\r\n set('name','twitter:title', title);\r\n set('name','twitter:description', desc);\r\n if (img) set('name','twitter:image', img);\r\n set('name','description', desc);\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e878528 e-flex e-con-boxed e-con e-parent\" data-id=\"e878528\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f2b8ab8 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"f2b8ab8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Deela – Laddar… Om f\u00f6rem\u00e5let Detaljer \ud83d\udce6 Status Laddar\u2026 \ud83e\udd1d Upph\u00e4mtning Laddar\u2026 \u23f3 Utg\u00e5ngsdatum Ungef\u00e4rlig plats S\u00e5 h\u00e4r f\u00e5r du f\u00f6rem\u00e5let 1 Ladda ner Deela Appen \u00e4r helt gratis f\u00f6r iOS och Android. Skapa ditt konto p\u00e5 60 sekunder \u2014 inga kr\u00e5ngliga formul\u00e4r. 2 Kontakta \u00e4garen med ett b\u00e4r Skicka ett meddelande f\u00f6r att visa […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1518","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/deela.se\/sv\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"Deela – Laddar… Om f\u00f6rem\u00e5let Detaljer \ud83d\udce6 Status Laddar\u2026 \ud83e\udd1d Upph\u00e4mtning Laddar\u2026 \u23f3 Utg\u00e5ngsdatum Ungef\u00e4rlig plats S\u00e5 h\u00e4r f\u00e5r du f\u00f6rem\u00e5let 1 Ladda ner Deela Appen \u00e4r helt gratis f\u00f6r iOS och Android. Skapa ditt konto p\u00e5 60 sekunder \u2014 inga kr\u00e5ngliga formul\u00e4r. 2 Kontakta \u00e4garen med ett b\u00e4r Skicka ett meddelande f\u00f6r att visa…","_links":{"self":[{"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/pages\/1518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/comments?post=1518"}],"version-history":[{"count":36,"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/pages\/1518\/revisions"}],"predecessor-version":[{"id":3094,"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/pages\/1518\/revisions\/3094"}],"wp:attachment":[{"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/media?parent=1518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}