/**
 * Floating Contact Button — zwevende knop met contactformulier in een paneel.
 *
 * De kleuren komen uit de themavariabelen (global.css) met een vaste terugvaloptie,
 * zodat het paneel er ook goed uitziet als het thema niet meelaadt. De tekstgroottes
 * staan als variabelen bovenaan, zodat de hele schaal op één plek bij te stellen is.
 */

.fcb-root {
    --fcb-navy: var(--primary-color, #1C2945);
    --fcb-magenta: var(--magenta-color, #A52A87);
    --fcb-magenta-light: #C14DA5;
    --fcb-border: #C142A2;
    --fcb-text: #2B2B4A;
    --fcb-muted: rgba(43, 43, 74, .55);
    --fcb-subtle: rgba(43, 43, 74, .42);
    --fcb-surface: #FFFFFF;
    --fcb-surface-alt: #F4F7FA;
    --fcb-line: #C7D2DB;
    --fcb-error: #B3261E;
    --fcb-radius: 0.75rem;
    --fcb-offset: 1.5rem;

    /* Tekstschaal. De site gebruikt 18px bodytekst; het paneel zit daar net onder. */
    --fcb-text-xs: 0.8125rem;  /* 13px — labels, privacyregel, regel onder de knop */
    --fcb-text-sm: 0.875rem;   /* 14px — foutmeldingen */
    --fcb-text-md: 1rem;       /* 16px — invoervelden en bevestiging */
    --fcb-text-lg: 1.0625rem;  /* 17px — kop van het paneel, verstuurknop */

    position: fixed;
    bottom: var(--fcb-offset);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: var(--fcb-text-md);
    line-height: 1.5;
    color: var(--fcb-text);
}

.fcb-root--right {
    right: var(--fcb-offset);
    align-items: flex-end;
}

.fcb-root--left {
    left: var(--fcb-offset);
    align-items: flex-start;
}

.fcb-root *,
.fcb-root *::before,
.fcb-root *::after {
    box-sizing: border-box;
}

.fcb-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

/* ---------------------------------------------------------------- knop --- */

.fcb-launcher {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 1rem 1.5rem;
    border: 1px solid var(--fcb-border);
    border-radius: 0.25rem;
    background: linear-gradient(61deg, var(--fcb-magenta) 13.96%, var(--fcb-magenta-light) 86.04%);
    color: var(--light-grey-color, #F7F8F8);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 100%;
    text-align: left;
    cursor: pointer;
    transition: filter .25s ease, transform .25s ease;
}

.fcb-launcher:hover,
.fcb-launcher:focus-visible {
    filter: brightness(0.92);
}

.fcb-launcher:focus-visible {
    outline: 2px solid var(--fcb-navy);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- paneel --- */

.fcb-panel {
    width: 26.25rem; /* 420px */
    max-width: calc(100vw - 2rem);
    max-height: min(38rem, calc(100vh - 11rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--fcb-radius);
    background: var(--fcb-surface);
    box-shadow: 0 10px 34px rgba(11, 11, 13, .22);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity .2s ease, transform .2s ease;
}

.fcb-panel[hidden] {
    display: none;
}

.fcb-panel.is-open {
    opacity: 1;
    transform: none;
}

.fcb-panel__header {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    flex: none;
    padding: 1.25rem;
    background: var(--fcb-navy);
    /**
     * De header rondt zijn eigen bovenhoeken af. Liet je dat aan de
     * overflow:hidden van het paneel over, dan blendde de browser de curve met
     * de witte paneelachtergrond eronder en zag je een licht randje.
     */
    border-top-left-radius: var(--fcb-radius);
    border-top-right-radius: var(--fcb-radius);
}

.fcb-panel__avatar {
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fcb-magenta);
    color: #fff;
    font-size: var(--fcb-text-md);
    font-weight: 500;
    text-transform: uppercase;
}

.fcb-panel__ident {
    flex: 1;
    min-width: 0;
}

/**
 * De .fcb-panel ervoor is nodig, niet cosmetisch: Elementor's kit-CSS zet
 * "margin-block-end" op elke <p> via ".elementor-kit-#### p" (0,1,1) en dat
 * verslaat een losse klasse (0,1,0). Elke p-marge in dit paneel heeft daarom
 * een extra klasse nodig. Niet weghalen.
 */
.fcb-panel .fcb-panel__title,
.fcb-panel .fcb-panel__subtitle {
    margin: 0;
}

.fcb-panel__title {
    color: #fff;
    font-size: var(--fcb-text-lg);
    font-weight: 500;
    line-height: 1.2;
}

.fcb-panel__subtitle {
    color: rgba(255, 255, 255, .65);
    font-size: var(--fcb-text-xs);
    line-height: 1.2;
}

.fcb-panel__close {
    flex: none;
    display: flex;
    padding: 0.25rem;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: rgba(255, 255, 255, .75);
    cursor: pointer;
    transition: color .15s ease;
}

.fcb-panel__close:hover,
.fcb-panel__close:focus-visible {
    color: #fff;
}

.fcb-panel__close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .6);
    outline-offset: 0;
}

.fcb-panel__body {
    flex: 1 1 auto;
    /**
     * Beide assen expliciet. Alleen overflow-y opgeven maakt van overflow-x
     * stilletjes 'auto' (visible kan niet naast een scrollende as bestaan),
     * en dan verscheen er bij het focussen van een veld rechts een horizontale
     * scrollbar.
     *
     * 'clip' zou hier mooier zijn (geen scrollcontainer), maar de browser rekent
     * dat naast een scrollende overflow-y om naar 'hidden'. Dat is hier geen
     * probleem: er is nul horizontale overflow, dus er valt niets te schuiven.
     */
    overflow-x: hidden;
    overflow-y: auto;
    /* Doorrollen naar de pagina voorkomen als je in het paneel scrolt. */
    overscroll-behavior: contain;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------- formulier --- */

/* Containing block voor de honeypot, zodat die niet aan het paneel zelf hangt. */
.fcb-form {
    position: relative;
}

.fcb-form[hidden] {
    display: none;
}

/* Twee velden naast elkaar. */
.fcb-row {
    display: flex;
    gap: 0.625rem;
}

.fcb-row .fcb-field {
    flex: 1;
    min-width: 0;
}

.fcb-field {
    margin-bottom: 0.75rem;
}

.fcb-label {
    display: block;
    margin: 0 0 0.25rem;
    font-size: var(--fcb-text-xs);
    color: var(--fcb-text);
}

.fcb-req {
    color: var(--fcb-magenta);
}

.fcb-optional {
    color: var(--fcb-muted);
}

.fcb-input {
    width: 100%;
    height: 2.75rem;
    padding: 0 0.6875rem;
    border: 1px solid var(--fcb-line);
    border-radius: 0.125rem;
    background: var(--fcb-surface);
    color: var(--fcb-text);
    font-family: inherit;
    /* Minimaal 16px: kleiner laat iOS bij het invullen op het veld inzoomen. */
    font-size: var(--fcb-text-md);
}

.fcb-input::placeholder {
    color: var(--fcb-muted);
    opacity: 1;
}

.fcb-input:focus {
    outline: none;
    border-color: var(--fcb-magenta);
    box-shadow: 0 0 0 2px rgba(165, 42, 135, .15);
}

.fcb-input.has-error {
    border-color: var(--fcb-error);
}

/* Eigen pijltje, zodat het menu er in elke browser hetzelfde uitziet. */
.fcb-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2B4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6875rem center;
    background-size: 1.125rem 1.125rem;
    cursor: pointer;
}

.fcb-textarea {
    height: auto;
    min-height: 5rem;
    padding: 0.5625rem 0.6875rem;
    line-height: 1.45;
    resize: vertical;
}

.fcb-field-error {
    display: none;
    margin-top: 0.25rem;
    font-size: var(--fcb-text-xs);
    color: var(--fcb-error);
}

.fcb-field-error.is-visible {
    display: block;
}

.fcb-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5625rem;
    margin: 0.125rem 0 0.875rem;
}

.fcb-consent input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0.1875rem 0 0;
    flex: none;
    accent-color: var(--fcb-magenta);
}

.fcb-consent label {
    font-size: var(--fcb-text-xs);
    line-height: 1.45;
    color: rgba(43, 43, 74, .75);
}

.fcb-consent a {
    color: inherit;
    text-decoration: underline;
}

/**
 * Honeypot: uit het zicht, maar niet display:none — dat slaan bots juist over.
 * Wegclippen op zijn eigen plek in plaats van naar links wegzetten: bij een
 * negatieve offset gaat de browser bij het focussen van een naburig veld
 * richting dat veld scrollen.
 */
.fcb-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.fcb-panel .fcb-form-error {
    margin: 0 0 0.6875rem;
    padding: 0.5625rem 0.6875rem;
    border-radius: 0.25rem;
    background: rgba(179, 38, 30, .08);
    color: var(--fcb-error);
    font-size: var(--fcb-text-sm);
    line-height: 1.4;
}

.fcb-form-error[hidden] {
    display: none;
}

.fcb-submit {
    display: block;
    width: 100%;
    height: 3rem;
    border: 1px solid var(--fcb-border);
    border-radius: 0.1875rem;
    background: linear-gradient(61deg, var(--fcb-magenta) 13.96%, var(--fcb-magenta-light) 86.04%);
    color: #fff;
    font-family: inherit;
    font-size: var(--fcb-text-lg);
    font-weight: 500;
    cursor: pointer;
    transition: filter .2s ease;
}

.fcb-submit:hover:not(:disabled),
.fcb-submit:focus-visible {
    filter: brightness(0.92);
}

.fcb-submit:disabled {
    opacity: .65;
    cursor: default;
}

.fcb-panel .fcb-footer-note {
    /* Bewust wat lucht tussen de knop en deze regel, en lichter dan de rest. */
    margin: 1.25rem 0 0;
    font-size: var(--fcb-text-xs);
    color: var(--fcb-subtle);
    text-align: center;
}

/* -------------------------------------------------------- bevestiging --- */

.fcb-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem 0.5rem;
    text-align: center;
}

.fcb-done[hidden] {
    display: none;
}

.fcb-done:focus {
    outline: none;
}

/* Het rondje: de foto van de contactpersoon, of een vinkje als die er niet is. */
.fcb-done__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--fcb-magenta);
    color: #fff;
}

.fcb-done__photo {
    display: block;
    width: 100%;
    height: 100%;
    /* Vierkant uitsnijden, zodat een portret niet uitgerekt wordt. */
    object-fit: cover;
}

.fcb-done__photo[hidden],
.fcb-done__check[hidden] {
    display: none;
}

.fcb-done__check {
    display: flex;
}

.fcb-done__icon .fcb-icon {
    width: 1.625rem;
    height: 1.625rem;
}

.fcb-panel .fcb-done__person {
    margin: 0 0 0.375rem;
    font-size: var(--fcb-text-md);
    font-weight: 500;
}

.fcb-done__person[hidden] {
    display: none;
}

.fcb-panel .fcb-done__text {
    margin: 0;
    font-size: var(--fcb-text-md);
    line-height: 1.45;
}

/* De teksten voor JavaScript staan in de HTML, maar horen niet in beeld. */
.fcb-i18n {
    display: none;
}

/* ------------------------------------------------------------- mobiel --- */

@media (max-width: 782px) {
    .fcb-root {
        --fcb-offset: 1rem;
        left: 1rem;
        right: 1rem;
        align-items: stretch;
    }

    .fcb-panel {
        width: 100%;
        max-width: none;
        /* Ruimte laten voor de knop eronder. */
        max-height: calc(100vh - 9rem);
        max-height: calc(100dvh - 9rem);
    }

    .fcb-launcher {
        justify-content: center;
        padding: 0.9375rem 1.25rem;
        font-size: var(--fcb-text-lg);
    }
}

/* Op smalle telefoons worden twee velden naast elkaar te krap. */
@media (max-width: 420px) {
    .fcb-row {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fcb-root *,
    .fcb-panel {
        transition-duration: .01ms !important;
    }
}