/* ==========================================================================
   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 #cfe5d4;
    background: #eef8f0;
    color: #1b5e20;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
}
/* ===== 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: 700px) {
    #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;
}