/* ============================================================
   OffRio · eventer/assets/offrigo_profiel.css — 05-10-2026
   Inloggen en "Mijn profiel" voor leveranciers op Offrigo.
   Donker met goud; achtergrond en tekstkleur in hetzelfde bestand.
   ============================================================ */
html, body { background: #0d0a17; margin: 0; }
body { color: #f5f2ed; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       font-size: 15px; -webkit-font-smoothing: antialiased; }
.op { max-width: 720px; margin: 0 auto; padding: 18px 16px 60px; }
.op-smal { max-width: 460px; }
.op-top { display: flex; justify-content: space-between; align-items: center; }
.op-merk { color: #e8c860; text-decoration: none; font-weight: 800; font-family: 'Syne', sans-serif; font-size: 17px; }
.op-uit { color: rgba(245,242,237,.65); font-size: 13.5px; }
.op-h1 { font-family: 'Syne', sans-serif; font-size: clamp(24px, 6vw, 34px); font-weight: 800; margin: 22px 0 12px; color: #fff; }
.op-h2 { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; margin: 0 0 12px; color: #fff; }
.op-tekst { font-size: 14.5px; line-height: 1.7; color: rgba(245,242,237,.8); margin: 0 0 14px; }
.op-kaart { background: #151122; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.op-midden { text-align: center; }
.op-groot-ic { font-size: 42px; margin-bottom: 6px; }
.op-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
            color: rgba(245,242,237,.7); margin: 14px 0 6px; }
.op-label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.op-input { width: 100%; box-sizing: border-box; padding: 12px 14px; background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #fff; font: inherit; font-size: 15px; }
.op-input:focus { outline: none; border-color: rgba(212,175,55,.55); }
select.op-input option { background: #fff; color: #16202e; }
.op-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .op-rij { grid-template-columns: 1fr; } }
.op-tip { font-size: 12.5px; color: rgba(245,242,237,.6); margin-top: 6px; }
.op-knop { display: inline-block; margin-top: 16px; padding: 13px 20px; border-radius: 11px; border: 0; cursor: pointer;
           background: linear-gradient(135deg, #d4af37, #f0d060); color: #16202e; font: inherit; font-weight: 800;
           font-size: 15px; text-decoration: none; text-align: center; }
.op-knop-licht { background: rgba(255,255,255,.07); color: #f5f2ed; border: 1px solid rgba(255,255,255,.16); }
.op-upload input { display: none; }
.op-fout, .op-melding { border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.op-fout { background: rgba(248,113,113,.13); color: #fca5a5; }
.op-melding { background: rgba(212,175,55,.12); color: #f0d060; border: 1px solid rgba(212,175,55,.3); }
.op-klein { font-size: 13px; color: rgba(245,242,237,.65); margin-top: 16px; text-align: center; }
.op-klein a { color: #f0d060; }

.op-score { background: linear-gradient(160deg, #2a1d10, #1a1324); border: 1px solid rgba(212,175,55,.3);
            border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; }
.op-score-tekst strong { color: #f0d060; }
.op-balk { height: 8px; background: rgba(255,255,255,.08); border-radius: 99px; margin: 10px 0; overflow: hidden; }
.op-balk span { display: block; height: 100%; background: linear-gradient(90deg, #d4af37, #f0d060); }
.op-score-lijst { display: flex; flex-wrap: wrap; gap: 6px; }
.op-score-lijst span { font-size: 12.5px; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.06); color: rgba(245,242,237,.6); }
.op-score-lijst span.ok { background: rgba(74,222,128,.13); color: #4ade80; }
.op-score-lijst span.ok::before { content: '✓ '; }

.op-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 4px; }
.op-foto { position: relative; margin: 0; }
.op-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; }
.op-foto-weg { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.7); color: #fff; border: 0;
               border-radius: 6px; width: 26px; height: 26px; cursor: pointer; }
.op-vakken { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.op-vak { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 6px 6px 12px; border-radius: 99px;
          border: 1px solid rgba(212,175,55,.35); color: #e8c860; font-size: 13.5px; }
.op-vak button { background: none; border: 0; color: rgba(245,242,237,.6); cursor: pointer; font-size: 13px; }
.op-vak-erbij { display: flex; gap: 8px; align-items: center; }
.op-vak-erbij .op-knop { margin-top: 0; white-space: nowrap; }
.op-offrio { border-color: rgba(212,175,55,.3); }

/* Voorbeeld van de aanbieding in Mijn profiel (07-10-2026): zelfde
   uiterlijk als op de openbare profielpagina (aanbieder.php). */
.ap-aanbieding{padding:14px;border-radius:14px;background:linear-gradient(135deg,rgba(74,222,128,.16),rgba(212,175,55,.14));border:1px solid rgba(74,222,128,.45);max-width:340px}
.ap-aanbieding-label{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#4ade80}
.ap-aanbieding-titel{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;color:#fff;margin-top:4px}
.ap-aanbieding-tekst{font-size:13.5px;color:rgba(245,242,237,.85);margin-top:4px;line-height:1.5}
.ap-aanbieding-tot{font-size:12px;color:#4ade80;margin-top:6px}
.ap-aanbieding-foto{display:block;width:100%;border-radius:10px;margin-top:10px;aspect-ratio:16/9;object-fit:cover}
.ap-aanbieding-knop{display:block;margin-top:10px;text-align:center;padding:10px;border-radius:10px;font-weight:800;font-size:14px;background:#4ade80;color:#0b2414}

/* ── Levering AU (11-10-2026): QR per plek, persoonlijk ── */
.op-h3 { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 800; color: #fff; margin: 24px 0 6px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.op-over { display: grid; gap: 8px; margin-bottom: 14px; }
.op-vink { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14.5px; cursor: pointer; }
.op-vink input { width: 20px; height: 20px; accent-color: #d4af37; }
.op-vink small { color: rgba(245,242,237,.55); }
.op-knop-klein { margin-top: 0; padding: 9px 14px; font-size: 13.5px; }
.op-qr-week { font-size: 14px; margin-bottom: 10px; }
.op-qr-week strong { color: #f0d060; font-size: 18px; }
.op-qr-lijst { display: grid; gap: 10px; }
.op-qr-plek { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.op-qr-naam { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.op-qr-naam small { display: block; font-weight: 400; font-size: 12px; color: rgba(245,242,237,.55); margin-top: 2px; }
.op-qr-cijfers { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 10px; font-size: 13px; color: rgba(245,242,237,.75); }
.op-qr-cijfers strong { color: #f0d060; font-size: 16px; }
.op-qr-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.op-qr-weg { margin: 0 0 0 auto; }
.op-qr-weg button { background: none; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; width: 36px; height: 36px; color: rgba(245,242,237,.6); cursor: pointer; }
@media (max-width: 520px) { .op-vak-erbij { flex-wrap: wrap; } .op-vak-erbij .op-knop { width: 100%; } }

/* ── Levering AW (12-10-2026): na "stuur inloglink" niet doodlopen ── */
.og-blok { display: block; width: 100%; box-sizing: border-box; }
.og-rij { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.og-rij .op-knop { margin-top: 8px; flex: 1 1 140px; }
.og-terug { display: inline-block; margin-top: 18px; color: rgba(245,242,237,.65); font-size: 14px; text-decoration: none; padding: 8px; }

/* ── Reviews in Mijn profiel (levering AY) ── */
.op-rv-st { color: #f0c651; letter-spacing: 1px; white-space: nowrap; }
.rv-leeg { color: rgba(255,255,255,.2); }
.op-rv-sam { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.op-rv-sam strong { font-size: 26px; color: #fff; }
.op-rv-sam span { color: rgba(245,242,237,.65); font-size: 13.5px; }
.op-rv-vraag { display: grid; gap: 8px; }
.op-rv-vraagrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.op-rv-vraagrij span { min-width: 0; overflow-wrap: anywhere; }
.op-rv-vraagrij small { display: block; color: rgba(245,242,237,.55); font-size: 12.5px; }
.op-rv { border-top: 1px solid rgba(255,255,255,.08); padding: 14px 0 6px; margin-top: 12px; }
.op-rv-boven { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: rgba(245,242,237,.65); }
.op-rv-status { color: #f0c651; font-size: 12px; }
.op-rv-tekst { margin: 8px 0; font-size: 14.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.op-rv-reactie { padding: 8px 12px; border-left: 3px solid #d4af37; background: rgba(212,175,55,.07); border-radius: 0 8px 8px 0; font-size: 14px; white-space: pre-line; }
.op-rv-reactie strong { display: block; font-size: 12px; color: #e8c860; }
.op-rv-actie summary { cursor: pointer; font-size: 13.5px; color: #e8c860; padding: 6px 0; }
.op-rv-actie form { display: grid; gap: 8px; margin: 6px 0 4px; }
.op-rv-actie .op-knop { justify-self: start; }

/* ── Werkte onder meer voor (12-10-2026, levering BG) ───────── */
.op-og-nieuw { margin-bottom: 14px; }
.op-og { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); margin-top: 8px; }
.op-og-niet { opacity: .6; }
.op-og-boven { display: flex; align-items: center; gap: 12px; }
.op-og-mono { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .5px; }
.op-og-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.op-og-tekst strong { display: block; color: #fff; }
.op-og-tekst small { display: block; color: rgba(245,242,237,.6); font-size: 12.5px; }
.op-og-status { flex: 0 0 auto; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(245,242,237,.75); white-space: nowrap; }
.op-og-bevestigd { background: rgba(74,222,128,.14); color: #86efac; }
.op-og-gevraagd { background: rgba(212,175,55,.14); color: #f0d060; }
.op-og-herkend_niet { background: rgba(248,113,113,.14); color: #fca5a5; }
.op-og-acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
.op-og-acties { align-items: center; }
.op-og-acties details { flex: 0 1 auto; margin-right: 6px; }
.op-og-acties details[open] { flex: 1 1 100%; order: 5; }
.op-og-acties form:not(details form) { margin-left: auto; }
.op-og-acties form:not(details form) ~ form { margin-left: 0; }
.op-og-acties summary { cursor: pointer; font-size: 13.5px; color: #f0d060; padding: 6px 0; min-height: 32px; }
.op-og-acties form { margin: 0; }
.op-og-knop { background: none; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; width: 38px; height: 38px; color: rgba(245,242,237,.7); cursor: pointer; font-size: 15px; }
@media (max-width: 520px) { .op-og-boven { flex-wrap: wrap; } .op-og-status { order: 3; margin-left: 54px; } }

/* ── Dienstkaarten (12-10-2026, levering BI) ───────────────── */
.op-dienst { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.03); margin-top: 10px; }
.op-dienst summary { cursor: pointer; padding: 13px 14px; font-weight: 700; color: #fff; min-height: 48px; box-sizing: border-box; overflow-wrap: anywhere; }
.op-dienst summary small { font-weight: 600; color: #f0d060; margin-left: 6px; }
.op-dienst form { padding: 0 14px 14px; margin: 0; }
.op-dienst-knoppen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 6px; }
.op-dienst-knoppen button { font: inherit; font-size: 14px; min-width: 44px; min-height: 38px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.op-dienst-knoppen span { font-size: 12px; color: rgba(245,242,237,.5); }
.op-dienst-foto { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.op-dienst-foto img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; }
.op-dienst-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.op-dienst-acties .op-knop { margin-top: 10px; }