/*!
 * TAI Brevo Form – shared styles for every Brevo form of the site.
 * Replaces the <style> block that Brevo repeats in each embed code.
 */

/* ------------------------------------------------------------------
 * 1. Behaviour (both designs)
 * ------------------------------------------------------------------ */

.tai-brevo-form .sib-form-message-panel {
    display: none;
}

.tai-brevo-form .sib-form-message-panel.sib-form-message-panel--active {
    display: block;
}

.tai-brevo-form .sib-form-message-panel:focus {
    outline: none;
}

.tai-brevo-form .sib-form-message-panel .sib-notification__icon {
    width: 20px;
    height: 20px;
}

.tai-brevo-form .input--hidden {
    display: none !important;
}

.tai-brevo-form .entry__error {
    display: none;
}

.tai-brevo-form .entry_errored .entry__error--primary {
    display: block;
}

.tai-brevo-form .sib-hide-loader-icon {
    display: none;
}

.tai-brevo-form .progress-indicator__icon {
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: -0.125em;
    fill: currentColor;
    animation: tai-brevo-spin 0.9s linear infinite;
}

.tai-brevo-form .sib-form-block__button-disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Reserved space for the reCAPTCHA checkbox: no layout shift (CLS) when it loads. */
.tai-brevo-form .tai-brevo-captcha--normal {
    min-height: 78px;
}

@keyframes tai-brevo-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tai-brevo-form .progress-indicator__icon {
        animation-duration: 3s;
    }
}

/* Editor only */
.tai-brevo-notice {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 3px solid #93003c;
    background: #f9f2f5;
    color: #515962;
    font: 12px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tai-brevo-notice--error {
    border-left-color: #d72b3f;
    background: #fdeced;
    color: #8b1a28;
}

.tai-brevo-captcha-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 304px;
    max-width: 100%;
    height: 78px;
    border: 1px dashed #c0ccd9;
    border-radius: 3px;
    background: #f9fafb;
    color: #687484;
    font: 12px/1.2 sans-serif;
}

/* ------------------------------------------------------------------
 * 2. "Brevo design": Brevo's default embed CSS, written once for all forms
 * ------------------------------------------------------------------ */

.tai-brevo-form--brevo .sib-form-message-panel.sib-form-message-panel--active {
    display: inline-block;
}

.tai-brevo-form--brevo [data-tai-role="container"] input::placeholder,
.tai-brevo-form--brevo [data-tai-role="container"] textarea::placeholder {
    font-family: Helvetica, sans-serif;
    text-align: left;
    color: #c0ccda;
}

.tai-brevo-form--brevo [data-tai-role="container"] a {
    text-decoration: underline;
    color: #2bb2fc;
}

/* ------------------------------------------------------------------
 * 3. "Site design": neutral base that follows the theme.
 *    Every value can be changed in the widget's Style tab.
 * ------------------------------------------------------------------ */

.tai-brevo-form--custom {
    --tai-brevo-accent: currentColor;
    --tai-brevo-button-width: auto;
}

.tai-brevo-form--custom .sib-form {
    margin: 0;
    padding: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
}

.tai-brevo-form--custom [data-tai-role="container"] {
    box-sizing: border-box;
    max-width: 100%;
}

.tai-brevo-form--custom [data-tai-role="form"] > div {
    padding: 8px 0;
}

.tai-brevo-form--custom .sib-form-block {
    padding: 0;
}

/* Neutralise sib-styles.css, loaded on the page when another form uses the Brevo design. */
.tai-brevo-form--custom .entry__field {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.tai-brevo-form--custom .entry__choice {
    width: auto;
    margin: 0;
    padding-left: 0;
    text-indent: 0;
    font-family: inherit;
}

.tai-brevo-form--custom .entry__label,
.tai-brevo-form--custom .entry__error {
    max-width: none;
}

.tai-brevo-form--custom .entry__label > * {
    float: none;
}

.tai-brevo-form--custom .entry__label {
    display: block;
    width: auto;
    margin-bottom: 0.4em;
    padding: 0;
    font-weight: 600;
}

.tai-brevo-form--custom .entry__label[data-required]::after {
    content: " " attr(data-required);
    color: #d92d20;
}

.tai-brevo-form--custom .entry__label_optin {
    display: inline;
    margin: 0;
}

.tai-brevo-form--custom .entry__field .input,
.tai-brevo-form--custom .entry__field textarea,
.tai-brevo-form--custom .entry__field select {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 2.75em;
    margin: 0;
    padding: 0.65em 0.8em;
    border: 1px solid #c0ccd9;
    border-radius: 3px;
    background-color: #fff;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    box-shadow: none;
}

.tai-brevo-form--custom .entry__field .input:focus,
.tai-brevo-form--custom .entry__field textarea:focus,
.tai-brevo-form--custom .entry__field select:focus {
    outline: 2px solid transparent;
    outline-offset: 1px;
    border-color: currentColor;
}

.tai-brevo-form--custom .entry_errored .input,
.tai-brevo-form--custom .entry_errored textarea,
.tai-brevo-form--custom .entry_errored select {
    border-color: #d92d20;
}

.tai-brevo-form--custom .entry__choice label {
    display: flex;
    gap: 0.6em;
    align-items: flex-start;
    cursor: pointer;
}

/* Native, accessible checkbox instead of Brevo's drawn one. */
.tai-brevo-form--custom .entry__choice .checkbox {
    display: none;
}

.tai-brevo-form--custom .entry__choice .input_replaced {
    position: static;
    flex: none;
    width: 1.1em;
    height: 1.1em;
    margin: 0.15em 0 0;
    opacity: 1;
    accent-color: var(--tai-brevo-accent);
}

.tai-brevo-form--custom .entry__choice p {
    display: inline;
    margin: 0;
}

.tai-brevo-form--custom .entry__error {
    margin-top: 0.35em;
    font-size: 0.875em;
    line-height: 1.4;
    color: #d92d20;
}

.tai-brevo-form--custom [data-tai-role="submit-block"] {
    text-align: left;
}

.tai-brevo-form--custom .sib-form-block__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tai-brevo-button-width);
    max-width: 100%;
    padding: 0.75em 1.5em;
    border: 0;
    border-radius: 3px;
    background-color: #1f2937;
    color: #fff;
    fill: currentColor;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.tai-brevo-form--custom .sib-form-message-panel {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 1em;
    padding: 0.75em 1em;
    border: 1px solid;
    border-radius: 3px;
}

.tai-brevo-form--custom .sib-form-message-panel__text {
    display: flex;
    gap: 0.6em;
    align-items: center;
}

.tai-brevo-form--custom .sib-notification__icon {
    flex: none;
    fill: currentColor;
}

.tai-brevo-form--custom [data-tai-role="success"] {
    border-color: #13ce66;
    background-color: #e7faf0;
    color: #085229;
}

.tai-brevo-form--custom [data-tai-role="error"] {
    border-color: #ff4949;
    background-color: #ffeded;
    color: #661d1d;
}