/* Deliberately light: inherits the theme's fonts and colours. In
   Gutenberg the submit button uses core Buttons block markup
   (.wp-block-buttons > .wp-block-button > .wp-block-button__link),
   so it matches the theme's buttons; in Elementor it picks up the
   kit's button styling.
   Override the custom properties below in a theme to restyle every
   form – the Elementor widget's Style tab sets these same properties. */
.sg-creatio-form
{
    --sg-creatio-form-border-color: color-mix(in srgb, currentColor 30%, transparent);
    --sg-creatio-form-error: #c62828;
    --sg-creatio-form-gap: 1rem;
    --sg-creatio-form-input-background: #fff;
    --sg-creatio-form-input-color: #1e1e1e;
    --sg-creatio-form-radius: 4px;
}

.sg-creatio-form__fields
{
    display: grid;
    gap: var(--sg-creatio-form-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sg-creatio-form__field
{
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    grid-column: 1 / -1;
}

.sg-creatio-form__field--half
{
    grid-column: auto;
}

.sg-creatio-form__label
{
    font-weight: 600;
}

.sg-creatio-form__optional
{
    font-weight: 400;
    opacity: 0.7;
}

.sg-creatio-form__input
{
    background: var(--sg-creatio-form-input-background);
    border: 1px solid var(--sg-creatio-form-border-color);
    border-radius: var(--sg-creatio-form-radius);
    box-sizing: border-box;
    color: var(--sg-creatio-form-input-color);
    font: inherit;
    padding: 0.65rem 0.8rem;
    width: 100%;
}

.sg-creatio-form__input--textarea
{
    min-height: 8rem;
    resize: vertical;
}

.sg-creatio-form__field--invalid .sg-creatio-form__input
{
    border-color: var(--sg-creatio-form-error);
}

.sg-creatio-form__field-error,
.sg-creatio-form__error
{
    color: var(--sg-creatio-form-error);
    font-size: 0.875em;
    margin: 0;
}

.sg-creatio-form__privacy
{
    font-size: 0.875em;
    margin-block: var(--sg-creatio-form-gap) 0;
    opacity: 0.8;
}

.sg-creatio-form__actions
{
    margin-block-start: var(--sg-creatio-form-gap);
}

/* Removes the browser's default <button> border, which core's button
   styles (written for <a> links) don't reset – it shows in the editor,
   where the theme's front-end CSS isn't loaded. :where() keeps this at
   zero specificity, so any border a theme or kit gives its buttons
   still wins. */
:where(.sg-creatio-form__submit)
{
    border-width: 0;
}

.sg-creatio-form__submit[disabled]
{
    cursor: progress;
    opacity: 0.7;
}

.sg-creatio-form__error
{
    margin-block-start: 0.75rem;
}

/* Honeypot: off-screen rather than display: none, which some bots
   check for. */
.sg-creatio-form__trap
{
    height: 1px;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.sg-creatio-form__success:focus
{
    outline: none;
}

.sg-creatio-form__notice
{
    border: 1px dashed var(--sg-creatio-form-error);
    border-radius: var(--sg-creatio-form-radius);
    margin: 0;
    padding: 1rem;
}

@media (max-width: 600px)
{

    .sg-creatio-form__field--half
    {
        grid-column: 1 / -1;
    }

}