/* ───────────────────────────────────────────────────────────────────────────── AANVRAAGDETAILPAGINA — nagebouwd naar de APP (Robbie, 16 augustus 2026: "op de foto zie je de app zoals hij eruit ziet voor ophalers, de klanten versie is bijna identiek alleen andere acties"). WAT DE EERSTE VERSIE FOUT DEED, zodat het niet terugkomt: · een GROENE TITELBALK. De app heeft die niet: de titel staat als grote donkere tekst op de grijze achtergrond, zonder kader eromheen. · alles op een WITTE ondergrond. De app zet witte kaarten op een lichtgrijs veld; dat contrast is wat de kaarten laat zweven. · de gegevens als RIJEN onder elkaar. De app gebruikt losse kaartjes in twee kolommen, met een hoofdletterlabel in grijs en de waarde eronder in blauw. · EMOJI als iconen. Die renderen per toestel anders en kleuren niet mee. Alles gescoped onder .pmad zodat het nooit botst met het thema, Elementor of de opmaak van de voorstelkaarten. ⚠ RAAK NIETS AAN BINNEN .proposalListingBox, .perposalModalBox, .requestAction-btn, .adsProcced of .cancleReq. Dat is de bestaande voorstel-shortcode en die is bewust ongewijzigd (Robbie is er tevreden over); de opmaak daarvan staat in het thema. MOBIEL EERST: daar zit het meeste verkeer en de app is een telefoonapp. Desktop krijgt vanaf 900px twee kolommen. ───────────────────────────────────────────────────────────────────────────── */ .pmad { --pmad-veld: #eef1f5; /* het grijze veld waar de kaarten op liggen */ --pmad-kaart: #ffffff; --pmad-navy: #123141; /* titels en labels */ /* Precies het midden tussen navy en grijs, voor een kop die ONDERGESCHIKT moet ogen zonder secundair te worden. --pmad-grijs bleek daarvoor te ver weg (Robbie, 19 augustus 2026: "die andere is nu iets te grijs, verschil mag minder groot"). Alleen in gebruik bij .pmadKopTweede; pak hem er gerust bij als er ooit een tweede rangorde-kop komt. */ --pmad-navyZacht: #3b5360; --pmad-blauw: #0d7fa6; /* de waarden in de feitenkaartjes */ --pmad-grijs: #64757e; --pmad-lijn: #e3e9ee; /* ⚠ DIT MOET HETZELFDE GROEN ZIJN ALS "Kies deze ophaler" (Robbie, 17 augustus 2026). Die knop is `.accept_proposal_btn` in het thema en staat op #95C11F (style.css r380 en de inline stijlen in custom-functions.php r1143/r1171). Hier stond #7ab929, terwijl het commentaar bij de bod-knop verderop al beweerde dat het dezelfde kleur was. Dat klopte dus niet, en op een pagina waar beide knoppen onder elkaar staan zie je dat meteen. Verander dit alleen mee met die themaknop. */ --pmad-groen: #95C11F; --pmad-groenH: #7da31a; /* de donkerdere hover, zelfde paar als afd-popup.css */ --pmad-petrol: #0b5f7d; /* de donkere actieknop uit de app */ --pmad-rood: #d1452f; /* verwijderen */ --pmad-licht: #00b6f1; /* het lichtblauw van de huisstijl, voor de chatknop */ --pmad-groenD: #4d7c0f; /* tekst in het richtprijsvak */ --pmad-groenL: #f0f7e2; /* vulling van het richtprijsvak */ --pmad-r: 16px; --pmad-schaduw: 0 1px 2px rgba(18, 49, 65, .05), 0 2px 10px rgba(18, 49, 65, .05); /* Het grijze veld loopt van rand tot rand, ook binnen een smalle themacontainer. Zo oogt het als de app zonder dat we aan het thema of aan hoeven te komen. */ width: 100vw; margin-left: calc(50% - 50vw); background: var(--pmad-veld); color: var(--pmad-navy); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* De twee kolomwikkels bestaan alleen op desktop. Op mobiel lost display:contents ze op, zodat alles in EEN kolom doorloopt in precies de volgorde van de app. */ .pmad .pmadLinks, .pmad .pmadRechts { display: contents; } .pmad .pmadBinnen { max-width: 720px; margin: 0 auto; padding: 6px 16px 48px; } /* ── Terug ─────────────────────────────────────────────────────────────────── */ .pmad .pmadTerug { display: inline-flex; align-items: center; gap: 10px; margin: 10px 0 14px; color: var(--pmad-navy); text-decoration: none; font-size: 20px; font-weight: 600; } .pmad .pmadTerug:hover { color: var(--pmad-blauw); } /* ── Foto: witte kaart met de afbeelding erin, precies zoals de app ────────── */ .pmad .pmadFotoKaart { position: relative; background: var(--pmad-kaart); border-radius: var(--pmad-r); padding: 8px; box-shadow: var(--pmad-schaduw); } .pmad .pmadStrip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 11px; } .pmad .pmadStrip::-webkit-scrollbar { display: none; } .pmad .pmadStrip img { flex: 0 0 100%; /* Hoger dan eerst (Robbie, 16 augustus 2026: "geef de foto container meer ruimte"). `cover` en niet `contain`: met contain past de hele foto in het vak en hou je donkere balken naast een staande foto over ("doet heel dom niet het hele vak vullen"). Afsnijden mag hier, want de volledige foto is een tik verderop te zien in de fotolaag. Verander dit dus niet terug zonder die fotolaag mee te wegen. */ width: 100%; height: 360px; object-fit: cover; background: var(--pmad-navy); cursor: zoom-in; scroll-snap-align: center; display: block; border-radius: 11px; } .pmad .pmadGeenFoto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; /* Even hoog als een echte foto (Robbie, 16 augustus 2026), zodat de kaart niet inzakt op een aanvraag zonder foto en de pagina er niet anders uitziet per aanvraag. Bij een wijziging van de fotohoogte hoort deze mee te gaan, ook in het desktopblok onderaan. */ /* Donkerblauw, de huisstijlkleur (Robbie, 16 augustus 2026). Grijs op grijs viel weg tegen het veld eromheen. */ height: 360px; border-radius: 11px; background: var(--pmad-navy); color: rgba(255,255,255,.62); font-size: 14px; } .pmad .pmadPijl { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(18, 49, 65, .42); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; } .pmad .pmadVorige { left: 16px; } .pmad .pmadVolgende { right: 16px; } .pmad .pmadBolletjes { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 6px; } .pmad .pmadBolletjes span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); } .pmad .pmadBolletjes span.aan { background: #fff; } /* ── Titel: grote donkere tekst OP het veld, geen balk eromheen ────────────── */ .pmad .pmadTitel { margin: 20px 0 10px; font-size: 29px; line-height: 1.17; font-weight: 800; color: var(--pmad-navy); letter-spacing: -.01em; } .pmad .pmadPlaats { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: var(--pmad-grijs); font-size: 17px; } .pmad .pmadPlaats .pmadIco { color: var(--pmad-grijs); flex: none; } /* ── Feitenraster: twee kolommen witte kaartjes ────────────────────────────── */ .pmad .pmadFeiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } /* Een laatste eenling loopt over de volle breedte, net als "HOEVEELHEID" in de app. */ .pmad .pmadFeit:last-child:nth-child(odd) { grid-column: 1 / -1; } .pmad .pmadFeit { display: flex; flex-direction: column; gap: 7px; background: var(--pmad-kaart); border-radius: 14px; padding: 15px 16px; box-shadow: var(--pmad-schaduw); min-width: 0; } .pmad .pmadFeitKop { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pmad-grijs); } .pmad .pmadFeitKop .pmadIco { color: var(--pmad-blauw); flex: none; } .pmad .pmadFeitWaarde { font-size: 17px; font-weight: 700; color: var(--pmad-blauw); overflow-wrap: anywhere; } /* ── Gewone kaart (inhoud, beschrijving, acties) ───────────────────────────── */ .pmad .pmadKaart { background: var(--pmad-kaart); border-radius: var(--pmad-r); padding: 20px 18px; box-shadow: var(--pmad-schaduw); margin-bottom: 14px; } .pmad .pmadBlokKop { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pmad-navy); } .pmad .pmadBlokKopLijn { margin-top: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--pmad-lijn); } .pmad .pmadAfval { list-style: disc; margin: 0; padding-left: 22px; } .pmad .pmadAfval li { margin-bottom: 6px; font-size: 17px; } .pmad .pmadAfval li:last-child { margin-bottom: 0; } .pmad .pmadOms { margin: 0; font-size: 17px; color: var(--pmad-navy); } /* ── Actieblok ────────────────────────────────────────────────────────────── */ .pmad .pmadSectie { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: var(--pmad-navy); letter-spacing: -.01em; } .pmad .pmadSectieToel { margin: 0 0 16px; color: var(--pmad-grijs); font-size: 16px; } /* Richtprijs: label links, bedrag rechts, in een zacht groen vak. Welk bedrag hier staat hangt af van de rol; zie de prijsval in includes/aanvraag-detail.php. */ .pmad .pmadRichtprijs { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--pmad-groenL); border: 1px solid #dcecc2; border-radius: 10px; padding: 15px 16px; } .pmad .pmadRpLabel { font-size: 17px; font-weight: 700; color: var(--pmad-groenD); } .pmad .pmadRpBedrag { font-size: 21px; font-weight: 800; color: var(--pmad-groenD); white-space: nowrap; } .pmad .pmadRpNoot { margin: 8px 2px 0; font-size: 14px; color: var(--pmad-grijs); } /* Eigenaarsknoppen. De verwijderknop komt uit [delete_request_button]; alleen de omlijsting is van ons, de knop zelf blijft die van het thema. */ /* ⚠ NOOIT `.pmadVerwijder > *` GEBRUIKEN, EN DIT IS DE REDEN. [delete_request_button] geeft niet alleen een knop terug maar ook een