/* ==========================================================================
   Quote form states
   The insurer row is gated on the principal's age: its inputs stay disabled
   until an age is chosen. They were still painted as active green chips, so
   they looked clickable and simply ignored clicks. Inactive chips now read as
   inactive.
   ========================================================================== */

/* The section's own rules set these with !important, so the inactive state has
   to match that weight to take effect. */
#insurerCheckboxes .insurer-checkbox-option:has(input:disabled) {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.4) !important;
}

#insurerCheckboxes .insurer-checkbox-option:has(input:disabled):hover {
    background: #fff !important;
    color: #526158 !important;
}

/* What Britam's family tiers mean, stated under the quote form. */
.britam-tier-note {
    max-width: 1300px;
    margin: 0.9rem auto 0;
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    border: 1px solid #cfe4e5;
    background: #eaf6f5;
    color: #01545f;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ===== the signature is required =====
   The application is not sent unsigned, so the heading says so and the block
   turns red the moment a submit is blocked on it. */
.signature-required {
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #fdeaea;
    color: #b91c1c;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.signature-error-note {
    margin: 0 0 0.6rem;
    color: #b91c1c;
    font-size: 0.76rem;
    font-weight: 700;
}

.signature-block.signature-blocked {
    border-top-color: #dc2626;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff7f7, #ffffff);
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.12);
}

.signature-block.signature-blocked .signature-canvas-wrap {
    outline: 1.5px solid #dc2626;
    outline-offset: 2px;
    border-radius: 10px;
}

/* ===== date of birth =====
   The note under the field reports the age the birth date works out to, and
   says so in green when the premium has followed it. */
.member-dob-field .dob-note {
    display: block;
    margin-top: 0.3rem;
    color: #01545f;
    font-size: 0.72rem;
    font-weight: 700;
}

.member-dob-field .dob-note.is-error {
    color: #b91c1c;
}
/* ===== insurer-not-offered =====
   An insurer the selection matrix does not publish for the chosen cover type
   stays visible but blacked out, so the client can see who sells what. */
/* ===== insurer-grid-one-row =====
   Every insurer shares the one row instead of sizing to its own label, so all
   seven fit without scrolling. The labels are the short ones (FA for First
   Assurance), and anything longer is trimmed rather than wrapped. */
#insurerCheckboxes.insurer-checkboxes {
    /* The grid is one row of equal columns: grid-auto-flow keeps it to a single
       row whatever number of insurers the cover type offers (five on children
       only, seven otherwise). */
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
}

#insurerCheckboxes .insurer-checkbox-option {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 7px 4px !important;
    gap: 4px !important;
    font-size: 0.68rem !important;
}

#insurerCheckboxes .insurer-checkbox-option span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 1024px) {
    #insurerCheckboxes .insurer-checkbox-option {
        padding: 6px 2px !important;
        gap: 3px !important;
        font-size: 0.62rem !important;
    }

    #insurerCheckboxes .insurer-checkbox-option::before {
        width: 12px !important;
        height: 12px !important;
        flex: 0 0 12px !important;
    }
}

/* Removing an insurer from the grid: the label's own display rule beats the
   [hidden] attribute, so it is stated here outright. */
#insurerCheckboxes .insurer-checkbox-option[hidden] {
    display: none !important;
}

.insurer-checkbox-option.insurer-not-offered {
    opacity: 0.45;
    filter: grayscale(1);
    cursor: not-allowed;
}

.insurer-checkbox-option.insurer-not-offered span {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.insurer-checkbox-option.insurer-not-offered input {
    cursor: not-allowed;
}

/* A benefit the selection matrix leaves blank: the plan does not sell it, so the
   whole row comes off the form. The pages print these rows with their own
   display rule, so the hidden state is stated here with the same weight. */
#quote-form .optional-benefit-row[hidden] {
    display: none !important;
}
/* ===== the note under the principal age selector is gone =====
   "Select Principal Age to continue" sat under the field as a second line of
   text. The golden cue on the selector itself already says which choice comes
   first, so the note is no longer drawn. The scripts keep their state on the
   element; it is simply never shown. */
#principalAgeValidationMessage,
.principal-age-inline-warning {
    display: none !important;
}

/* ===== the members are answered in turn =====
   The spouse waits for the principal, and each child waits for the child before
   it, so the list is filled from the top with no gaps in the middle of it. The
   order the form's own warnings ask for is said by the controls instead: a box
   that is not open yet is greyed out and its answers cannot be picked.
   Children Only has no principal, so there its first box is the one that opens
   the run. */
.family-overview .family-item.member-locked > label {
    color: #94a3b8 !important;
}

/* The fields keep their own white fill from a later stylesheet, so the greyed
   state is stated with the weight to beat it - otherwise the lock shows only in
   the type and the field still reads as one waiting to be filled. Both runs are
   named here: the family grid's six child boxes and Children Only's eight. */
#quote-form #individualFamilyDetails .family-overview .family-item.member-locked > select,
#quote-form #individualFamilyDetails #childAgesContainer select.child-age-select.member-locked,
#quote-form #individualFamilyDetails #childrenOnlyAges select.child-only-age-select.member-locked {
    background: #f1f5f9 !important;
    border-color: #dbe3ea !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* ===== the family's members, one selector to a member =====
   Principal Age, Spouse Age, then six Child Age selectors: eight cells on the
   members grid, four to a row on a desk and two to a row on a phone - four rows.
   Each box keeps its wording when it is answered and the age joins it -
   "Principal Age 47", "Child Age 7" - and every child box lists the ages a
   family cover carries, 0 to 24. The two band selectors step aside while the
   family layout is on: they still carry the counts the engine prices from, they
   are simply not the form the client fills in. */
.family-overview.family-children .family-children-band {
    display: none !important;
}

#childAgesContainer select.child-age-select {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    border: 1.5px solid #d9e0e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 0.45rem 0.55rem !important;
}

#childAgesContainer select.child-age-select:focus {
    outline: none !important;
    border-color: #016f6d !important;
    box-shadow: 0 0 0 3px rgba(1,111,109, 0.16) !important;
}

/* ===== Children Only: one age for each child =====
   The children-only cover names its children rather than counting them, so the
   eight boxes take the place of the count selector: four to a row on a desk and
   two to a row on a phone, exactly where the old selector sat. Each box reads
   "Child Age" until it is answered, then "Child Age 9" and turns green, so a
   half-filled family is readable at a glance. */
#childrenOnlyAges {
    display: none;
}

#quote-form #childrenOnlyAges.children-only-ages-active {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-column: 1 / -1 !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
}

#quote-form #childrenOnlyAges select.child-only-age-select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    border: 1.5px solid #d9e0e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 0.45rem 0.55rem !important;
}

#quote-form #childrenOnlyAges select.child-only-age-select:focus {
    outline: none !important;
    border-color: #016f6d !important;
    box-shadow: 0 0 0 3px rgba(1,111,109, 0.16) !important;
}

#quote-form #childrenOnlyAges select.child-only-age-select.has-selection {
    border-color: #016f6d !important;
    background: #f2fbfb !important;
    color: #014a52 !important;
}

/* The count selector steps aside while the children are named one by one: it
   still carries the number the engine prices from, it is simply not the form
   the client fills in. */
#quote-form #individualFamilyDetails .family-overview .family-item.children-only-count-hidden {
    display: none !important;
}

@media (max-width: 700px) {
    #quote-form #childrenOnlyAges.children-only-ages-active {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ===== the counter the engine prices from never shows =====
   How many children are on the cover is carried by #childrenCount, which the
   family grid and the children-only boxes both write as the client answers. It
   is not a field anyone fills in - the chosen ages are - but one layout was
   showing it as a bare run of numbers beside the age boxes. It is kept off the
   form in every layout. */
#quote-form #childrenCount {
    display: none !important;
}