@font-face {
    font-family: 'Albert Sans';
    src: url('/fonts/albert-sans-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Albert Sans';
    src: url('/fonts/albert-sans-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('/fonts/cormorant-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('/fonts/cormorant-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-accent: #b3986a;
    --color-bg: #f5f1ea;
    --color-text: #6b5638;
    --cubic-bezier: cubic-bezier(.21, .4, .48, 1);

    --font-display: 'Cormorant', Georgia, serif;
    --font-body: 'Albert Sans', system-ui, sans-serif;
    --font-mono: 'DM Mono', ui-monospace, monospace;

    --fb-element-headline-font-size: 48px;
    --fb-element-description-font-size: 16px;
}

@layer viserico-overrides {
    #fbjs#fbjs * {
        font-family: var(--font-body) !important;
    }

    #fbjs#fbjs .label-headline,
    #fbjs#fbjs .label-headline * {
        font-size: 18px !important;
        line-height: 1 !important;
        font-family: var(--font-display) !important;
    }

    .animate-surveyLoading svg, .animate-surveyExit svg {
        color: var(--color-accent) !important;
    }

    .bg-white {
        background-color: var(--color-bg) !important;
    }

    #fbjs#fbjs .fb-editor-text-bold {
        display: block !important;
        font-size: 48px !important;
        margin-bottom: 24px !important;
    }

    #fbjs#fbjs .fb-editor-paragraph a span {
        color: var(--color-accent) !important;
        text-decoration-color: var(--color-accent) !important;
        text-decoration: underline !important;
    }

    #fbjs#fbjs div.mx-auto.flex.w-full.flex-col.items-center:has(svg path[d^="M9 12.75L11.25"]) {
        justify-content: center;
        min-height: 100%;
    }

    #fbjs#fbjs input,
    #fbjs#fbjs textarea,
    #fbjs#fbjs .font-option
    #fbjs#fbjs .label-description,
    #fbjs#fbjs .label-description *,
    #fbjs#fbjs .text-subheading,
    #fbjs#fbjs .text-subheading *,
    #fbjs#fbjs .text-option-label {
        font-size: 16px !important;
        line-height: 1 !important;
        font-family: var(--font-body) !important;
    }

    #fbjs#fbjs .label-card, #fbjs#fbjs .label-card * {
        font-size: 12px !important;
        line-height: 1 !important;
        font-family: var(--font-body) !important;
    }

    #formbricks-cardless-preview-logo-slot > div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #fbjs#fbjs .button-custom,
    #fbjs#fbjs button.button-custom,
    a[href="/"] > button {
        font-family: var(--font-body) !important;
        font-size: 16px !important;
        border: 2px solid var(--color-accent) !important;
        border-width: 2px !important;
        border-style: solid !important;
        border-color: var(--color-accent) !important;
        box-shadow: none !important;
        background-color: var(--color-accent) !important;
        border-radius: 2px !important;
        padding: 12px 24px !important;
        font-weight: 600 !important;
        transition:
            color 250ms var(--cubic-bezier),
            background 250ms var(--cubic-bezier),
            border-color 250ms var(--cubic-bezier) !important;

        &:hover {
            background-color: transparent !important;
            color: var(--color-accent) !important;
            border-color: var(--color-accent) !important;
        }
    }

    #fbjs#fbjs button[role="checkbox"][data-state="checked"] {
    	background-color: var(--color-accent) !important;
    }

    .bg-linear-to-br, .bg-linear-to-tr {
        background: none !important;
        background-color: var(--color-bg) !important;
    }

    svg.lucide-circle-question-mark, svg.lucide-circle-check {
        color: var(--color-accent) !important;
    }

    h1 {
        font-family: var(--font-display) !important;
    }

    p {
        font-family: var(--font-body) !important;
    }

    h1, p {
        color: var(--color-text) !important;
    }
}