.retailer-claim {
    --ot-blue: #0064d1; --ot-green: #09a787; --ot-red: #f04545; --ot-orange: #ff9d00;
    --ot-text: #000; --ot-muted: #6f6f6f; --ot-line: #ebebeb; --ot-soft: #f4f4f4;
    display: grid; gap: 12px; color: var(--ot-text);
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
body:has(.retailer-claim) { background: #fafafa; }
.fi-simple-main:has(.retailer-claim) { margin-top: 0; padding: 16px 16px 24px; background: transparent; border: 0; box-shadow: none; }
.fi-simple-main-ctn:has(.retailer-claim) { padding-top: 0; }
.retailer-claim-hero { display: grid; gap: 4px; padding: 4px 0 6px; }
.retailer-claim-kicker { margin: 0; color: var(--ot-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.retailer-claim-hero h1 { margin: 0; color: var(--ot-text); font-size: 26px; font-weight: 900; letter-spacing: -.01em; line-height: 1.1; }
.retailer-claim-blocks { display: grid; gap: 12px; }
.retailer-claim-side { display: grid; gap: 12px; align-content: start; }
.retailer-claim-block { overflow: hidden; border: 1px solid var(--ot-line); border-radius: 8px; background: #fff; }
.retailer-claim-block-body { display: grid; gap: 14px; padding: 16px; }
.retailer-claim-block h3 { margin: 0; color: var(--ot-text); font-size: 15px; font-weight: 700; }
.retailer-claim-map { position: relative; height: 8rem; background: var(--ot-line); pointer-events: none; }
.retailer-claim-identity { display: flex; gap: 12px; align-items: center; }
.retailer-claim-logo { width: 52px; height: 52px; flex: none; border: 1px solid var(--ot-line); border-radius: 8px; background: #fff; object-fit: contain; }
.retailer-claim-identity h2 { margin: 0; color: var(--ot-text); font-size: 19px; font-weight: 700; line-height: 1.2; }
.retailer-claim-identity p { margin: 2px 0 0; color: var(--ot-muted); font-size: 14px; }
.retailer-claim-status { margin: 4px 0 0; font-size: 14px; font-weight: 700; }
.retailer-claim-status.is-open { color: var(--ot-green); }
.retailer-claim-status.is-closed { color: var(--ot-red); }
.retailer-claim-facts { display: grid; gap: 8px; margin: 0; }
.retailer-claim-facts div { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.retailer-claim-facts dt { display: inline-flex; flex: none; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ot-soft); color: var(--ot-muted); }
.retailer-claim-facts dt svg { width: 15px; height: 15px; }
.retailer-claim-facts dd { margin: 0; overflow-wrap: anywhere; }
.retailer-claim-facts a { color: var(--ot-blue); text-decoration: none; }
.retailer-claim-facts a:hover { text-decoration: underline; }
.retailer-claim-hours { width: 100%; border-collapse: collapse; font-size: 15px; }
.retailer-claim-hours td { padding: 8px 6px; border-bottom: 1px solid var(--ot-line); }
.retailer-claim-hours tr:last-child td { border-bottom: 0; }
.retailer-claim-hours td:first-child { color: var(--ot-muted); }
.retailer-claim-hours td:last-child { text-align: right; font-weight: 500; }
.retailer-claim-hours td.is-closed { color: var(--ot-red); font-weight: 400; }
.retailer-claim-hours tr.is-today td { background: var(--ot-soft); color: var(--ot-text); font-weight: 700; border-bottom-color: transparent; }
.retailer-claim-hours tr.is-today td.is-closed { color: var(--ot-red); }
.retailer-claim-hours tr.is-today td:first-child { border-radius: 4px 0 0 4px; }
.retailer-claim-hours tr.is-today td:last-child { border-radius: 0 4px 4px 0; }
.retailer-claim-hours small { color: var(--ot-muted); font-weight: 400; }
.retailer-claim-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.retailer-claim-tags li { padding: 5px 10px; border-radius: 4px; background: var(--ot-soft); color: var(--ot-text); font-size: 13px; font-weight: 500; }
.retailer-claim-actions { display: grid; gap: 8px; padding: 12px 16px; border: 1px solid var(--ot-line); border-radius: 8px; background: #fff; }
.retailer-claim-actions .fi-btn { width: 100%; min-height: 48px; justify-content: center; border-radius: 8px; font-size: 16px; font-weight: 700; }
.retailer-claim-actions .retailer-claim-btn-verify { background: var(--ot-blue); color: #fff; }
.retailer-claim-actions .retailer-claim-btn-edit { background: #fff; color: var(--ot-text); box-shadow: inset 0 0 0 1px #d4d4d4; }
.retailer-claim-intro { margin: 4px 0 0; color: var(--ot-muted); font-size: 14px; line-height: 1.5; text-align: center; }
.retailer-claim-note { margin: 0; color: var(--ot-muted); font-size: 12px; text-align: center; }
/* The free check shows Google's reCAPTCHA notice in the page itself, which is when Google allows hiding its badge. */
.grecaptcha-badge { visibility: hidden; }
/* In the footer the page tokens are out of reach: the grey of the notes is set here (Bob, 2026-10-09). */
.retailer-recaptcha-notice { color: #6f6f6f; }
.retailer-recaptcha-notice a { color: inherit; text-decoration: underline; }
@media (min-width: 48rem) {
    .fi-simple-main:has(.retailer-claim) { padding: 40px 24px 48px; }
    .retailer-claim-hero h1 { font-size: 34px; }
    .retailer-claim-map { height: 11rem; }
    .retailer-claim-blocks { grid-template-columns: 1.2fr 1fr; align-items: start; }
    .retailer-claim-actions { grid-template-columns: repeat(3, 1fr); padding: 16px; }
}
.retailer-claim-hint p { margin: 0; color: var(--ot-muted); font-size: 15px; line-height: 1.5; }
.retailer-claim-hint .fi-btn { justify-self: start; }
.retailer-claim-code { display: flex; gap: 8px; align-items: center; }
.retailer-claim-code .fi-input-wrp { flex: 1; }
.retailer-claim-code .fi-input { font-size: 20px; letter-spacing: .25em; font-weight: 700; }
.retailer-claim-error { margin: 0; color: var(--ot-red); font-size: 14px; }
.retailer-add-lead { margin: 6px 0 0; color: var(--ot-muted); font-size: 15px; line-height: 1.5; }
.retailer-add-search { display: grid; gap: 8px; grid-template-columns: 1fr; }
.retailer-add-results { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.retailer-add-results button { display: grid; gap: 2px; width: 100%; padding: 12px 14px; border: 1px solid var(--ot-line); border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.retailer-add-results button:hover:not(:disabled) { border-color: var(--ot-blue); }
.retailer-add-results button:disabled { cursor: not-allowed; opacity: .6; }
.retailer-add-result-name { color: var(--ot-text); font-size: 15px; font-weight: 700; }
.retailer-add-result-address { color: var(--ot-muted); font-size: 14px; }
.retailer-add-result-claimed { color: var(--ot-orange); font-size: 13px; font-weight: 500; }
.retailer-add-result-manual { border-style: dashed !important; }
.retailer-add-form { display: grid; gap: 12px; }
.retailer-add-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 48rem) {
    .retailer-add-search { grid-template-columns: 1fr 12rem; }
    .retailer-claim-actions:has(.retailer-add-form *), .retailer-add-form .retailer-claim-actions { grid-template-columns: 1fr 1fr; }
}
.retailer-guest-step .retailer-guest-field { display: flex; gap: 8px; align-items: center; }
.retailer-guest-step .retailer-guest-field .fi-input-wrp { flex: 1; }
.retailer-guest-error { margin: 6px 0 0; color: #f04545; font-size: 14px; }
.retailer-guest-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Gegevens: the location as its page on openingstijden.nl: Roboto, the --ot tokens, the facts with an icon column, the
   opening hours table with today in bold, and the map beside it (below it on a phone). */
.retailer-ot-page {
    --ot-blue: #0064d1; --ot-green: #09a787; --ot-red: #f04545; --ot-pin: #e6194b;
    --ot-text: #000; --ot-muted: #6f6f6f; --ot-line: #ebebeb; --ot-soft: #deedfa;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 366px); overflow: hidden; border: 1px solid var(--ot-line); border-radius: 8px; background: #fff;
    color: var(--ot-text); font-family: Roboto, ui-sans-serif, system-ui, sans-serif;
}
.retailer-ot-main { display: grid; align-content: start; gap: 0; padding: 32px 32px 40px; min-width: 0; }
.retailer-ot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.retailer-ot-head h1 { margin: 0; font-size: 44px; font-weight: 900; letter-spacing: -.01em; line-height: 1.1; }
.retailer-ot-logo { flex: none; width: 72px; height: 72px; border-radius: 8px; object-fit: contain; }
.retailer-ot-category { margin: 8px 0 0; color: var(--ot-muted); font-size: 16px; }
.retailer-ot-facts { display: grid; gap: 28px; margin: 24px 0 0; padding: 28px 0 32px; border-top: 1px solid var(--ot-line); border-bottom: 1px solid var(--ot-line); }
.retailer-ot-facts > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; }
.retailer-ot-facts dt { padding-top: 2px; color: var(--ot-blue); }
.retailer-ot-facts dt.is-pin { color: var(--ot-pin); }
.retailer-ot-facts dt .fi-icon { width: 16px; height: 16px; }
.retailer-ot-facts dd { display: grid; justify-items: start; gap: 2px; margin: 0; font-size: 16px; line-height: 1.5; }
.retailer-ot-facts dd strong { font-weight: 700; }
.retailer-ot-facts small { color: var(--ot-muted); font-size: 12px; }
.retailer-ot-facts a { color: var(--ot-blue); text-decoration: none; }
.retailer-ot-facts a:hover { text-decoration: underline; }
.retailer-ot-status { margin: 10px 0 0; color: var(--ot-muted); font-size: 16px; }
.retailer-ot-status .is-open { color: var(--ot-green); }
.retailer-ot-status .is-closed { color: var(--ot-red); }
.retailer-ot-facts a.retailer-ot-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border: 1px solid var(--ot-line); border-radius: 4px; font-size: 14px; font-weight: 500; }
.retailer-ot-chip .fi-icon, .retailer-ot-social .fi-icon { width: 14px; height: 14px; }
.retailer-ot-facts a.retailer-ot-social { display: inline-flex; align-items: center; gap: 8px; }
.retailer-ot-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.retailer-ot-tags li { padding: 4px 10px; border-radius: 4px; background: var(--ot-soft); color: var(--ot-blue); font-size: 14px; font-weight: 500; }
.retailer-ot-hours { margin-top: 40px; }
.retailer-ot-hours h2 { margin: 0; font-size: 30px; font-weight: 900; line-height: 1.15; }
.retailer-ot-hours > p { margin: 12px 0 20px; font-size: 16px; line-height: 1.5; }
.retailer-ot-hours table { width: 100%; border-collapse: collapse; font-size: 17px; }
.retailer-ot-hours th, .retailer-ot-hours td { padding: 12px 0; border-bottom: 1px solid var(--ot-line); font-weight: 400; text-align: left; }
.retailer-ot-hours th { width: 40%; }
.retailer-ot-hours td.is-closed { color: var(--ot-red); }
.retailer-ot-hours tr.is-today th, .retailer-ot-hours tr.is-today td { font-weight: 700; }
.retailer-ot-dot { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--ot-red); vertical-align: middle; }
.retailer-ot-dot.is-open { background: var(--ot-green); }
.retailer-ot-map { position: relative; min-height: 24rem; border-left: 1px solid var(--ot-line); background: #f4f4f4; }
.retailer-ot-map .retailer-business-map { position: sticky !important; top: 0; height: 100% !important; min-height: 24rem; max-height: 100vh; border: 0; border-radius: 0; }
@media (max-width: 64rem) {
    .retailer-ot-page { grid-template-columns: minmax(0, 1fr); }
    .retailer-ot-map { order: -1; min-height: 14rem; border-left: 0; border-bottom: 1px solid var(--ot-line); }
    .retailer-ot-map .retailer-business-map { position: relative !important; height: 14rem !important; min-height: 14rem; }
    .retailer-ot-main { padding: 20px 16px 28px; }
    .retailer-ot-head h1 { font-size: 30px; }
    .retailer-ot-logo { width: 56px; height: 56px; }
    .retailer-ot-hours h2 { font-size: 24px; }
}

/* Gegevens without Premium: the tabs Basis | Premium above the listing, the line under them and the upgrade on the
   right; the logo, the description and the website show only on Premium (x-show). */
.retailer-ot-wrap { display: grid; gap: 12px; }
.retailer-ot-tabs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.retailer-ot-tabs-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fi-tabs-item.retailer-ot-tab-premium .fi-icon { color: var(--warning-500); }
.retailer-ot-tabs-note { margin: 0; color: var(--gray-500); font-size: 14px; }
.retailer-ot-tabs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.retailer-ot-description { margin: 16px 0 0; color: #000; font-size: 16px; line-height: 1.6; }
.retailer-ot-description-box { position: relative; }
.retailer-ot-page .is-blurred { filter: blur(5px); user-select: none; }
.retailer-ot-lock-center { position: absolute; inset: 16px 0 0; display: flex; align-items: center; justify-content: center; }
.retailer-ot-lock { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #000; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.retailer-ot-lock .fi-icon { width: 11px; height: 11px; }
.retailer-ot-website-locked { display: inline-flex; align-items: center; gap: 10px; color: var(--ot-blue); }
.retailer-ot-socials { display: grid; justify-items: start; gap: 2px; }
.retailer-ot-socials-locked { position: relative; display: block; }
.retailer-ot-socials-locked .retailer-ot-lock-center { inset: 0; justify-content: flex-start; padding-left: 24px; }
.retailer-ot-socials .retailer-ot-social { display: inline-flex; align-items: center; gap: 8px; color: var(--ot-blue); }

/* Free check: the public page that brings an owner in through their report. The search, the scan that is shown while
   the report waits for an email address, and the parts of the report, each locked until then. */
.retailer-free-check-hero { text-align: center; }
.retailer-free-check-hero .retailer-claim-intro { margin: 8px auto 0; max-width: 34rem; font-size: 16px; }
/* The chosen business: the same inner space left and right as the card around it (Bob, 2026-10-09); scoped, so the 4px side padding of .retailer-search-result in retailer-import.css does not win. */
.retailer-free-check .retailer-free-check-chosen { padding: 12px 16px; border: 1px solid var(--ot-line); border-radius: 8px; }
.retailer-free-check-start { display: grid; gap: 8px; }
.retailer-free-check .retailer-free-check-cta { width: 100%; min-height: 48px; justify-content: center; border-radius: 8px; font-size: 16px; font-weight: 700; }
.retailer-free-check-progress { display: grid; gap: 10px; justify-items: start; }
.retailer-free-check-progress strong { font-size: 18px; }
.retailer-free-check-progress-bar { display: block; width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: var(--ot-line); }
.retailer-free-check-progress-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ot-blue); transition: width .2s linear; }
.retailer-free-check-scan { display: grid; gap: 20px; }
.retailer-free-check-scan-heading { margin: 8px 0 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.retailer-free-check-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.retailer-free-check-step { display: flex; gap: 10px; align-items: center; margin: 0; font-size: 18px; }
.retailer-free-check-step-state { display: inline-flex; color: var(--ot-blue); }
.retailer-free-check-step-state .fi-icon, .retailer-free-check-step-state .fi-loading-indicator { width: 20px; height: 20px; }
.retailer-free-check-step .retailer-platform-icon { width: 20px; height: 20px; }
/* A step without a platform logo (Reviews) shows a gold star of the same size (Bob, 2026-10-09). */
.retailer-free-check-step .retailer-free-check-step-icon { width: 20px; height: 20px; margin-inline-end: .375rem; color: #f5b301; }
/* The Website step shows a link of the same size, in the page's blue (Bob, 2026-10-12). */
.retailer-free-check-step .retailer-free-check-step-icon.is-website { color: var(--ot-blue); }
.retailer-free-check-preview { display: grid; gap: 8px; margin-top: 12px; }
.retailer-free-check .is-blurred { filter: blur(2px); user-select: none; }
.retailer-free-check-skeleton-title { width: 40%; }
.retailer-free-check-line { margin: 0; color: var(--ot-muted); font-size: 16px; }
.retailer-free-check-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.retailer-free-check-rating { display: inline-flex; gap: 4px; align-items: center; color: var(--ot-text); font-weight: 700; }
.retailer-free-check-rating .retailer-platform-icon { width: 14px; height: 14px; margin: 0; }
.retailer-free-check-preview-title { margin: 0; font-size: 18px; font-weight: 700; }
.retailer-free-check-preview-meta { margin: 0; color: var(--ot-muted); }
.retailer-free-check-preview-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; }
.retailer-free-check-preview-row .retailer-platform-icon { width: 18px; height: 18px; margin: 0; }
.retailer-free-check-preview-row .fi-icon { width: 18px; height: 18px; color: var(--ot-muted); }

/* Free check landing (Bob, 2026-10-08): the logos the report checks in one row; the real map of Op de kaart in the
   locked part of the teaser. */
.retailer-free-check-logos { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; align-items: center; margin: 4px 0 0; }
.retailer-free-check-logos .retailer-platform-icon { width: 22px; height: 22px; margin: 0; }
/* Free check teaser (Bob, 2026-10-09): a blurred picture of a real report with the address box on top, like a modal.
   The blur is baked into public/images/free-check/report-preview.webp, so no name in it can be read. Picture and box
   share one grid cell, so the frame is as tall as the taller of the two and the picture covers it. The picture is the
   whole report (Bob: "je hebt maar een klein stukje gebruikt"); the box stays in view while the visitor scrolls past it. */
.retailer-free-check-unlock-stage { position: relative; display: grid; overflow: clip; border: 1px solid var(--ot-line); border-radius: 12px; background: #fff; }
.retailer-free-check-unlock-stage::after { position: absolute; right: 0; bottom: 0; left: 0; height: 4rem; background: linear-gradient(rgb(255 255 255 / 0), #fff); content: ''; pointer-events: none; }
.retailer-free-check-unlock-backdrop { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; user-select: none; }
.retailer-free-check-unlock-modal { position: sticky; top: 24px; z-index: 1; grid-area: 1 / 1; align-self: start; justify-self: center; width: min(30rem, calc(100% - 32px)); margin: 56px 0 72px; border-radius: 12px; box-shadow: 0 24px 60px rgb(0 0 0 / .18); }
.retailer-free-check-unlock-business { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--ot-line); }
.retailer-free-check-unlock-business strong { font-size: 17px; }
.retailer-free-check-unlock-business .retailer-free-check-meta { margin: 2px 0 0; color: var(--ot-muted); font-size: 13px; }
.retailer-free-check-unlock-lock { display: inline-grid; flex: none; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--ot-soft); color: var(--ot-text); }
.retailer-free-check-unlock-lock .fi-icon { width: 18px; height: 18px; }
.retailer-free-check-unlock { gap: 12px; }
.retailer-free-check-form { display: grid; gap: 12px; }
.retailer-free-check-links { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; }
.retailer-free-check-locked-rank { display: inline-grid; width: 18px; height: 18px; place-items: center; border-radius: 999px; background: var(--ot-soft); font-size: 11px; font-weight: 800; }

/* The trust line of the free check, right under the brand above the heading (Bob, 2026-10-09): a framed pill, the five gold stars split
   off from the dark text by a thin line, so it does not read as a copy of the competitor's plain grey line. */
.retailer-free-check-trust { display: flex; justify-content: center; margin: 0 0 14px; }
.retailer-free-check-trust-pill { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; align-items: center; max-width: 100%; margin: 0; padding: 7px 16px; border: 1px solid var(--ot-line); border-radius: 999px; background: #fff; color: var(--ot-text); font-size: 13px; font-weight: 500; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.retailer-free-check-stars { display: inline-flex; gap: 2px; padding-right: 12px; border-right: 1px solid var(--ot-line); color: #f5b301; }
.retailer-free-check-stars .fi-icon { width: 13px; height: 13px; }