/*
 * Golfers buy page. Only what form-v2.css and the shared stepper do not already
 * provide; everything else (wizard chrome, locked OCR fields, upload boxes) is the
 * house styling every buy page uses.
 */

/* The red outline product-form-stepper.js puts round a radio group or Select2 it
   cannot show a browser message on. Same rule as the Health PI buy page. */
.pi-field-error {
    outline: 2px solid #b00020;
    outline-offset: 2px;
    border-radius: 8px;
}

/* form-v2.css styles `.product-buy-wizard .table th` small, orange and uppercase for
   the OCR "Document results" table, which also catches the cover comparison's row and
   column headers. They must read the same here as on the quote page. */
.product-buy-wizard .comparison-horizontal-table th {
    color: inherit;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
}

/* Yes/No pills side by side at an even width, as on the Health PI buy page: the
   question labels here are long, so the default 49% pills wrap unevenly. */
#golfers_form .genderSelect {
    display: flex;
    gap: 8px;
}

#golfers_form .genderSelect .radio_btn {
    flex: 1 1 0;
    width: auto;
    margin: 0;
    display: flex;
}

#golfers_form .genderSelect .radio_btn > span {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    min-height: 46px;
}

/* Equipment schedule: item, date, value and remove on one line; stacked on a phone. */
.glf-equipment-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 8px;
}

@media (max-width: 575.98px) {
    .glf-equipment-row {
        grid-template-columns: 1fr;
    }
}

/* Golf for Kids extension: one row per child (name, date of birth, remove). */
.glf-child-row {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 8px;
}

@media (max-width: 575.98px) {
    /* Stacked, each child's fields read as one group: a wider gap between children
       than between a child's own name and date. */
    .glf-child-row {
        grid-template-columns: 1fr;
        margin-bottom: 24px;
    }
}

/* A "Yes" to an underwriting question: the cover cannot complete online, so the
   stepper's Next is held (golfers-flow.js) and the callback offer is the way on. */
.glf-knocked-out .product-wizard-actions .btn-primary:not([data-form-submit]) {
    display: none !important;
}

/* A quote's children: name and date of birth only, no remove button. Wide screens
   only: on a phone every child row stacks to one column. */
@media (min-width: 576px) {
    .glf-child-row--fixed {
        grid-template-columns: 2fr 1fr;
    }
}