.mrcma-family-list {
    display: grid;
    gap: 14px;
}

.mrcma-student-proof,
.mrcma-student-proof-section,
.mrcma-subsidy-proof {
    margin-top: 14px;
}

.mrcma-student-proof[hidden],
.mrcma-student-proof-section[hidden],
.mrcma-subsidy-proof[hidden],
.mrcma-payment-notice[hidden] {
    display: none !important;
}

.mrcma-subsidy-section {
    margin-top: 20px;
}

.mrcma-proof-file-list {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.mrcma-proof-file-list:empty {
    display: none;
}

.mrcma-proof-file-list li {
    align-items: center;
    background: #f7f9fb;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 10px;
}

.mrcma-proof-file-list span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mrcma-proof-status:empty {
    display: none;
}

.mrcma-payment-frequency-field {
    grid-column: 1 / -1;
}

.mrcma-family-item {
    background: #f7f9fb;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    box-shadow: inset 3px 0 0 #8fb7ad;
    padding: 16px;
}

.mrcma-family-item-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mrcma-family-item-head strong {
    color: #1f2b35;
}

.mrcma-family-membership-row {
    display: grid;
    gap: 18px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mrcma-family-membership-row [hidden] {
    display: none !important;
}

.mrcma-family-student-status {
    grid-column: 1 / -1;
}

.mrcma-photo-channels {
    background: #f7f9fb;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    margin: 12px 0 16px 28px;
    padding: 12px 14px 2px;
}

.mrcma .mrcma-button-secondary {
    background: #eef4f2;
    border: 1px solid #b9cec8;
    color: #244940;
}

.mrcma .mrcma-button-secondary:disabled {
    background: #eef0f2;
    border-color: #d6d9dc;
    color: #72777c;
    cursor: not-allowed;
}

.mrcma .mrcma-button-secondary:hover,
.mrcma .mrcma-button-secondary:focus {
    background: #dfece8;
}

.mrcma .mrcma-button-link {
    background: transparent;
    color: #8b2f2f;
    font-weight: 700;
    min-height: 0;
    padding: 0;
}

.mrcma .mrcma-button-link:hover,
    .mrcma .mrcma-button-link:focus {
    background: transparent;
    color: #642020;
    text-decoration: underline;
}

@media (max-width: 720px) {
    .mrcma-family-membership-row {
        grid-template-columns: 1fr;
    }

    .mrcma-photo-channels {
        margin-left: 0;
    }
}