/* Overrides for the "omniprotect" Umbraco Forms theme (Views/Partials/Forms/Themes/omniprotect).
   The theme loads forms.css (the omnicore theme's styles) first and this file on top, so anything
   not set here falls back to the omnicore styles. Every rule is scoped to omniprotect forms so it
   can't affect other forms on the same page. */

/* Wide forms (add "wide" to the form's CSS class): content fills ~90% of the card and
   fields stretch to their column, so multi-column fieldsets use the available space */
.umbraco-forms-form.umbraco-forms-omniprotect.wide .umbraco-forms-fieldset,
.umbraco-forms-form.umbraco-forms-omniprotect.wide .umbraco-forms-navigation {
    width: 90%;
}

.umbraco-forms-form.umbraco-forms-omniprotect.wide .umbraco-forms-fieldset {
    padding: 1em 0 0;
}

.umbraco-forms-form.umbraco-forms-omniprotect.wide .umbraco-forms-container {
    align-content: start;
    padding: 0 clamp(12px, 2vw, 32px);
}

.umbraco-forms-caption {
    display: none;
}

.umbraco-forms-form.umbraco-forms-omniprotect.wide input.text,
.umbraco-forms-form.umbraco-forms-omniprotect.wide input.datepickerfield,
.umbraco-forms-form.umbraco-forms-omniprotect.wide textarea,
.umbraco-forms-form.umbraco-forms-omniprotect.wide select {
    width: 100%;
    max-width: none;
}

.umbraco-forms-form.umbraco-forms-omniprotect.wide textarea {
    height: 120px;
}

@media (max-width: 991px) {
    .umbraco-forms-form.umbraco-forms-omniprotect.wide .umbraco-forms-fieldset,
    .umbraco-forms-form.umbraco-forms-omniprotect.wide .umbraco-forms-navigation {
        width: 100%;
    }
}

/* Pre-filled, read-only fields (e.g. Omni Protect's details) - muted so they don't look editable */
.umbraco-forms-form.umbraco-forms-omniprotect input[readonly],
.umbraco-forms-form.umbraco-forms-omniprotect textarea[readonly] {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    cursor: default;
    resize: none;
}

    .umbraco-forms-form.umbraco-forms-omniprotect input[readonly]:focus,
    .umbraco-forms-form.umbraco-forms-omniprotect textarea[readonly]:focus {
        box-shadow: none;
        border-color: rgba(255, 255, 255, 0.4);
    }

/* Checkbox lists render as a grid of selectable tiles (replaces the floated list in forms.css) */
.umbraco-forms-form.umbraco-forms-omniprotect .checkboxlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    float: none;
    width: 100%;
    padding: 0;
    margin: .75em 0 1.5em;
}

.umbraco-forms-form.umbraco-forms-omniprotect .checkboxlist-option {
    position: relative;
}

    /* Visually hidden but still focusable and announced by screen readers */
    .umbraco-forms-form.umbraco-forms-omniprotect .checkboxlist-option input {
        position: absolute;
        opacity: 0;
        margin: 0;
    }

    .umbraco-forms-form.umbraco-forms-omniprotect .checkboxlist-option label {
        display: flex;
        float: none;
        clear: none;
        align-items: center;
        gap: 12px;
        height: 100%;
        padding: 14px 16px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        font-weight: 400;
        line-height: 1.2;
        cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease;
    }

        .umbraco-forms-form.umbraco-forms-omniprotect .checkboxlist-option label::before {
            content: "";
            flex: 0 0 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.6);
            border-radius: 5px;
            transition: background-color .15s ease, border-color .15s ease;
        }

        .umbraco-forms-form.umbraco-forms-omniprotect .checkboxlist-option label:hover {
            border-color: var(--core-light);
        }

    .umbraco-forms-form.umbraco-forms-omniprotect .checkboxlist-option input:focus-visible + label {
        outline: 2px solid var(--core-light);
        outline-offset: 2px;
    }

    .umbraco-forms-form.umbraco-forms-omniprotect .checkboxlist-option input:checked + label {
        border-color: var(--core-light);
        background: rgba(19, 230, 216, 0.15);
    }

        .umbraco-forms-form.umbraco-forms-omniprotect .checkboxlist-option input:checked + label::before {
            border-color: var(--core-light);
            background: var(--core-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23180136' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / 14px no-repeat;
        }

/* Provider logo banners (Rich Text fields showing the core providers and Provider Partners images),
   matched by image file name. The logos sit on a light panel so the providers' dark wordmarks stay
   legible on the dark card, at their natural size up to 900px so the 3-logo banner doesn't stretch.
   They're decorative alongside the text and checkbox lists, so the banners are dropped on mobile */
.umbraco-forms-form.umbraco-forms-omniprotect img[src*="omniprotect-provider-partners"],
.umbraco-forms-form.umbraco-forms-omniprotect img[src*="omniprotect-core-providers"] {
    display: block;
    box-sizing: border-box;
    width: auto;
    max-width: min(100%, 900px);
    height: auto;
    padding: 16px 24px;
    margin: .5em 0 1em;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
}

@media (max-width: 767.98px) {
    .umbraco-forms-form.umbraco-forms-omniprotect img[src*="omniprotect-provider-partners"],
    .umbraco-forms-form.umbraco-forms-omniprotect img[src*="omniprotect-core-providers"] {
        display: none;
    }
}

/* Multi-page forms change page in the background (omniprotect-forms.js) - dim the form while the next page loads */
.umbraco-forms-form.umbraco-forms-omniprotect.is-loading {
    opacity: .6;
    pointer-events: none;
    transition: opacity .15s ease;
}

.umbraco-forms-form.umbraco-forms-omniprotect:focus {
    outline: none;
}

/* Side-by-side agency lists (the transferExistingAgencies and createNewAgencies checkbox lists - Forms
   adds the lower-cased alias as a class on each field): each column is an intro then a list. On
   desktop the columns share one two-row grid, so both lists start on the same line however long
   each intro is */
@media (min-width: 992px) {
    .umbraco-forms-form.umbraco-forms-omniprotect .row:has(> .umbraco-forms-container > .transferexistingagencies) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto;
    }

        .umbraco-forms-form.umbraco-forms-omniprotect .row:has(> .umbraco-forms-container > .transferexistingagencies) > .umbraco-forms-container {
            display: grid;
            grid-row: span 2;
            grid-template-rows: subgrid;
            width: auto;
        }
}

/* A provider ticked in one agency list can't also be ticked in the other (omniprotect-forms.js) */
.umbraco-forms-form.umbraco-forms-omniprotect .checkboxlist-option input:disabled + label {
    opacity: .4;
    cursor: not-allowed;
}

    .umbraco-forms-form.umbraco-forms-omniprotect .checkboxlist-option input:disabled + label:hover {
        border-color: rgba(255, 255, 255, 0.25);
    }