:root {
    --lmfb-primary: #135A83;
    --lmfb-secondary: #2EC1FB;
    --lmfb-cta: #FDC14D;
    --lmfb-bg: #FFFFFF;
    --lmfb-muted: #F0F2F5;
    --lmfb-text: #173042;
    --lmfb-border: #DCE5EA;
    --lmfb-danger: #B42318;
    --lmfb-shadow: 0 18px 60px rgba(19, 90, 131, .20);
}

html.lmfb-open { overflow: hidden; }

.lmfb-root, .lmfb-root * { box-sizing: border-box; }
.lmfb-root { font-family: inherit; color: var(--lmfb-text); }
/* Onderdelen met het hidden-attribuut moeten verborgen blijven, ook wanneer een
   regel hieronder een eigen display-waarde zet. Zonder deze regel won de
   display:flex van .lmfb-picker-hint van de display:none van de browser,
   waardoor de blauwe aanwijsbalk permanent in beeld stond. */
.lmfb-root [hidden] { display: none; }

.lmfb-launcher {
    position: fixed;
    z-index: 99980;
    left: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 15px;
    border: 0;
    border-radius: 999px;
    background: var(--lmfb-primary);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(19, 90, 131, .25);
    transition: transform .18s ease, box-shadow .18s ease;
}
.lmfb-launcher:hover { transform: translateY(-1px); box-shadow: 0 10px 34px rgba(19, 90, 131, .30); }
.lmfb-launcher:focus-visible, .lmfb-dialog button:focus-visible, .lmfb-dialog textarea:focus-visible, .lmfb-dialog input:focus-visible, .lmfb-micro button:focus-visible { outline: 3px solid var(--lmfb-secondary); outline-offset: 2px; }
.lmfb-launcher-icon { font-size: 18px; line-height: 1; }

.lmfb-backdrop {
    position: fixed;
    z-index: 99988;
    inset: 0;
    background: rgba(10, 32, 44, .38);
    backdrop-filter: blur(2px);
}

.lmfb-dialog {
    position: fixed;
    z-index: 99990;
    left: 22px;
    bottom: 82px;
    width: min(430px, calc(100vw - 28px));
    max-height: calc(100vh - 108px);
}

.lmfb-panel {
    position: relative;
    overflow: auto;
    max-height: calc(100vh - 108px);
    padding: 26px;
    border: 1px solid rgba(19, 90, 131, .08);
    border-radius: 20px;
    background: var(--lmfb-bg);
    box-shadow: var(--lmfb-shadow);
}

.lmfb-close {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--lmfb-muted);
    color: var(--lmfb-text);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.lmfb-kicker { margin: 0 42px 6px 0; color: var(--lmfb-primary); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.lmfb-dialog h2 { margin: 0 42px 18px 0; color: var(--lmfb-text); font-size: 22px; line-height: 1.25; }

.lmfb-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lmfb-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 105px;
    padding: 15px;
    border: 1px solid var(--lmfb-border);
    border-radius: 14px;
    background: #fff;
    color: var(--lmfb-text);
    text-align: left;
    cursor: pointer;
}
.lmfb-type:hover { border-color: var(--lmfb-secondary); background: #F8FCFE; }
.lmfb-type span { margin-bottom: 11px; font-size: 24px; }
.lmfb-type strong { font-size: 14px; line-height: 1.25; }

.lmfb-back { margin: -2px 0 12px; padding: 0; border: 0; background: none; color: var(--lmfb-primary); font: inherit; font-weight: 700; cursor: pointer; }

#lmfb-message, #lmfb-email {
    width: 100%;
    border: 1px solid var(--lmfb-border);
    border-radius: 12px;
    background: #fff;
    color: var(--lmfb-text);
    font: inherit;
}
#lmfb-message { min-height: 132px; resize: vertical; padding: 13px 14px; }
#lmfb-email { height: 44px; margin-top: 5px; padding: 0 12px; }
#lmfb-message:focus, #lmfb-email:focus { border-color: var(--lmfb-secondary); outline: 0; box-shadow: 0 0 0 3px rgba(46, 193, 251, .16); }

.lmfb-actions-secondary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.lmfb-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--lmfb-border);
    border-radius: 10px;
    background: var(--lmfb-muted);
    color: var(--lmfb-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.lmfb-file-input { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.lmfb-selected, .lmfb-file-name { margin: 8px 0; padding: 9px 11px; border-radius: 10px; background: #EEF8FC; color: var(--lmfb-primary); font-size: 12px; line-height: 1.4; }

.lmfb-reply-toggle { display: flex; align-items: center; gap: 9px; margin: 13px 0 8px; font-size: 14px; cursor: pointer; }
.lmfb-reply-toggle input { width: 17px; height: 17px; accent-color: var(--lmfb-primary); }
.lmfb-privacy { margin: 13px 0 12px; color: #647681; font-size: 11px; line-height: 1.45; }
.lmfb-error { margin: 10px 0; padding: 9px 11px; border-radius: 9px; background: #FEF3F2; color: var(--lmfb-danger); font-size: 13px; }
.lmfb-submit {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    background: var(--lmfb-cta);
    color: #153E59;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.lmfb-submit:hover { filter: brightness(.98); }
.lmfb-submit:disabled { opacity: .62; cursor: wait; }

.lmfb-success { text-align: center; padding: 20px 0 2px; }
.lmfb-success-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; background: #E9F8F0; color: #16804B; font-size: 30px; font-weight: 800; }
.lmfb-success h2 { margin: 0 0 8px; }
.lmfb-success p { margin: 0 0 20px; color: #566B78; }

.lmfb-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.lmfb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.lmfb-picker-hint {
    position: fixed;
    z-index: 100000;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(620px, calc(100vw - 24px));
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--lmfb-primary);
    color: #fff;
    box-shadow: var(--lmfb-shadow);
}
.lmfb-picker-hint strong { flex: 1; font-size: 14px; }
.lmfb-picker-hint button { border: 0; border-radius: 8px; background: #fff; color: var(--lmfb-primary); padding: 7px 9px; font-weight: 700; cursor: pointer; }
html.lmfb-picking, html.lmfb-picking * { cursor: crosshair !important; }
html.lmfb-picking .lmfb-root, html.lmfb-picking .lmfb-root * { cursor: default !important; }
.lmfb-target-highlight { outline: 3px solid var(--lmfb-secondary) !important; outline-offset: 2px !important; }

.lmfb-micro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--lmfb-border);
    border-radius: 12px;
    background: #fff;
    color: var(--lmfb-text);
}
.lmfb-micro-question { font-size: 14px; font-weight: 700; }
.lmfb-micro-buttons { display: flex; gap: 7px; }
.lmfb-micro button { min-height: 36px; padding: 6px 10px; border: 1px solid var(--lmfb-border); border-radius: 9px; background: var(--lmfb-muted); color: var(--lmfb-text); font: inherit; font-size: 13px; cursor: pointer; }
.lmfb-micro button:hover { border-color: var(--lmfb-secondary); }
.lmfb-micro-thanks { color: #16804B; font-size: 13px; font-weight: 800; }

@media (max-width: 600px) {
    .lmfb-launcher { left: 14px; bottom: 14px; min-width: 46px; padding: 10px 12px; }
    .lmfb-launcher-label { display: none; }
    .lmfb-dialog { left: 0; bottom: 0; width: 100%; max-height: 90vh; }
    .lmfb-panel { max-height: 90vh; padding: 22px 18px max(22px, env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
    .lmfb-types { grid-template-columns: 1fr; }
    .lmfb-type { min-height: auto; flex-direction: row; align-items: center; gap: 10px; }
    .lmfb-type span { margin: 0; }
    .lmfb-micro { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .lmfb-launcher { transition: none; }
}

/* Admin-only review mode: opens the reported page and points to the selected element. */
.lmfb-review-highlight {
    position: relative !important;
    z-index: 99970 !important;
    outline: 4px solid var(--lmfb-cta) !important;
    outline-offset: 5px !important;
    box-shadow: 0 0 0 10px rgba(253, 193, 77, .20) !important;
    border-radius: 4px;
}
.lmfb-review-marker {
    position: absolute;
    z-index: 100020;
    max-width: min(280px, calc(100vw - 16px));
    padding: 6px 9px;
    border-radius: 8px;
    background: #153E59;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    pointer-events: none;
    box-shadow: 0 7px 20px rgba(10, 32, 44, .22);
}
.lmfb-review-panel {
    position: fixed;
    z-index: 100030;
    top: max(56px, env(safe-area-inset-top));
    right: 18px;
    width: min(390px, calc(100vw - 28px));
    max-height: calc(100vh - 80px);
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(19, 90, 131, .16);
    border-radius: 16px;
    background: #fff;
    color: var(--lmfb-text);
    font-family: inherit;
    box-shadow: 0 18px 60px rgba(10, 32, 44, .24);
}
.lmfb-review-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lmfb-review-panel-head > div { display: flex; flex-direction: column; gap: 2px; }
.lmfb-review-kicker { color: var(--lmfb-primary); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.lmfb-review-panel-head strong { font-size: 18px; }
.lmfb-review-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--lmfb-muted); color: var(--lmfb-text); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.lmfb-review-message { margin: 14px 0 8px; font-size: 15px; line-height: 1.55; }
.lmfb-review-meta { color: #657983; font-size: 12px; }
.lmfb-review-target-info { margin-top: 14px; padding: 11px 12px; border-radius: 10px; background: #FFF8E5; }
.lmfb-review-target-info span { display: block; margin-bottom: 3px; color: #8A5A00; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.lmfb-review-target-info strong { display: block; font-size: 13px; line-height: 1.4; }
.lmfb-review-target-info.is-missing { background: #FEF3F2; color: #B42318; font-size: 12px; line-height: 1.45; }
.lmfb-review-admin-link { display: inline-flex; margin-top: 14px; color: var(--lmfb-primary); font-size: 13px; font-weight: 800; text-decoration: none; }
.lmfb-review-admin-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .lmfb-review-panel { top: 12px; right: 12px; width: calc(100vw - 24px); max-height: 45vh; }
}

/* Het CookieYes-revisiticoon staat ook linksonder; zonder offset valt de
   feedbackknop eroverheen. Zet het icoon rechts naast de knop, verticaal
   gecentreerd. Deze regel laadt alleen mee wanneer de widget actief is. */
.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    left: 161px !important;
    bottom: 22px !important;
}
@media (max-width: 600px) {
    .cky-btn-revisit-wrapper.cky-revisit-bottom-left {
        left: 75px !important;
        bottom: 14px !important;
    }
}

/* WordPress-beheer: laat de launcher vrij van de adminbar en houd de vijfde keuze compact. */
/* In wp-admin blijft de widget rechtsonder: linksonder zit het inklapbare adminmenu. */
.lmfb-root-admin .lmfb-launcher { bottom: 20px; left: auto; right: 22px; }
.lmfb-root-admin .lmfb-dialog { left: auto; right: 22px; }
.lmfb-root-admin .lmfb-type[data-lmfb-type="todo"] { border-color: #D8C7F2; background: #FBF8FF; }
@media (max-width: 782px) { .lmfb-root-admin .lmfb-picker-hint { top: 58px; } }
