/*
 * Ski Marseille — family-members.css
 * Styles pour la gestion des membres famille dans Mon Compte WooCommerce.
 */

/* -----------------------------------------------------------------------
   Conteneur principal
----------------------------------------------------------------------- */
#scmsa-famille-app {
    max-width: 640px;
}

.scmsa-famille-title {
    font-family:   var(--font-heading, inherit);
    font-size:     1.4rem;
    margin-bottom: .5rem;
    color:         var(--color-primary, #1a1a2e);
}

.scmsa-famille-desc {
    color:         #555;
    margin-bottom: 1.25rem;
    line-height:   1.6;
}

.scmsa-famille-meta {
    font-size:     .85rem;
    color:         #888;
    margin-bottom: .75rem;
}

/* -----------------------------------------------------------------------
   Liste des membres
----------------------------------------------------------------------- */
.scmsa-famille-list {
    margin-bottom: 1.5rem;
}

.scmsa-famille-empty {
    color:         #777;
    font-style:    italic;
    padding:       1rem 0;
}

.scmsa-famille-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         .75rem 1rem;
    border:          1px solid #e0e0e0;
    border-radius:   6px;
    background:      #fafafa;
    margin-bottom:   .5rem;
    transition:      border-color .15s;
}

.scmsa-famille-item:hover {
    border-color: var(--color-primary, #1a1a2e);
}

.scmsa-famille-item__info {
    display:        flex;
    flex-direction: column;
    gap:            .2rem;
    min-width: 0;
}

.scmsa-famille-item__name {
    font-size: 1rem;
    color:     var(--color-primary, #1a1a2e);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.scmsa-famille-item__dob {
    font-size: .82rem;
    color:     #777;
}

.scmsa-famille-item__actions {
    display:    flex;
    gap:        .5rem;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Boutons d'action des membres
----------------------------------------------------------------------- */
.scmsa-btn-edit,
.scmsa-btn-delete {
    padding:       .3rem .75rem;
    border-radius: 4px;
    font-size:     .82rem;
    cursor:        pointer;
    border:        1px solid transparent;
    transition:    background .15s, color .15s;
}

.scmsa-btn-edit {
    background: transparent;
    border-color: var(--color-primary, #1a1a2e);
    color:        var(--color-primary, #1a1a2e);
}
.scmsa-btn-edit:hover {
    background: var(--color-primary, #1a1a2e);
    color:      #fff;
}

.scmsa-btn-delete {
    background: transparent;
    border-color: #c62828;
    color:        #c62828;
}
.scmsa-btn-delete:hover {
    background: #c62828;
    color:      #fff;
}

.scmsa-btn-edit:disabled,
.scmsa-btn-delete:disabled {
    opacity: .5;
    cursor:  not-allowed;
}

/* -----------------------------------------------------------------------
   Formulaire
----------------------------------------------------------------------- */
.scmsa-famille-form {
    background:    #f5f5f5;
    border:        1px solid #ddd;
    border-radius: 8px;
    padding:       1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.scmsa-form-title {
    font-family:   var(--font-heading, inherit);
    font-size:     1.05rem;
    margin:        0 0 1rem;
    color:         var(--color-primary, #1a1a2e);
}

.scmsa-form-row {
    display:        flex;
    flex-direction: column;
    gap:            .3rem;
    margin-bottom:  .9rem;
}

.scmsa-form-label {
    font-size:   .88rem;
    font-weight: 600;
    color:       #333;
}

.scmsa-form-input {
    width:         100%;
    padding:       .45rem .7rem;
    border:        1px solid #bbb;
    border-radius: 4px;
    font-size:     .95rem;
    background:    #fff;
    transition:    border-color .15s, box-shadow .15s;
    box-sizing:    border-box;
}

.scmsa-form-input:focus {
    outline:      none;
    border-color: var(--color-primary, #1a1a2e);
    box-shadow:   0 0 0 2px rgba(26, 26, 46, .15);
}

/* Message d'erreur inline */
.scmsa-famille-error {
    background:    #ffebee;
    border:        1px solid #e57373;
    border-radius: 4px;
    padding:       .55rem .85rem;
    font-size:     .88rem;
    color:         #b71c1c;
    margin-bottom: .75rem;
}

/* Boutons de formulaire */
.scmsa-form-actions {
    display:     flex;
    gap:         .75rem;
    flex-wrap:   wrap;
    margin-top:  .25rem;
}

.scmsa-btn-submit {
    padding:       .5rem 1.25rem;
    background:    var(--color-primary, #1a1a2e);
    color:         #fff;
    border:        none;
    border-radius: 5px;
    font-size:     .95rem;
    cursor:        pointer;
    transition:    background .15s;
}
.scmsa-btn-submit:hover {
    background: var(--color-accent, #e65100);
}
.scmsa-btn-submit:disabled {
    opacity: .6;
    cursor:  not-allowed;
}

.scmsa-btn-cancel {
    padding:       .5rem 1rem;
    background:    transparent;
    border:        1px solid #aaa;
    border-radius: 5px;
    font-size:     .95rem;
    cursor:        pointer;
    color:         #555;
    transition:    border-color .15s, color .15s;
}
.scmsa-btn-cancel:hover {
    border-color: #555;
    color:        #333;
}

/* -----------------------------------------------------------------------
   Bouton "Ajouter un membre"
----------------------------------------------------------------------- */
.scmsa-btn-add-member {
    display:       inline-flex;
    align-items:   center;
    gap:           .4rem;
    padding:       .55rem 1.25rem;
    background:    transparent;
    border:        2px dashed var(--color-primary, #1a1a2e);
    border-radius: 6px;
    color:         var(--color-primary, #1a1a2e);
    font-size:     .95rem;
    cursor:        pointer;
    transition:    background .15s, color .15s;
}
.scmsa-btn-add-member:hover:not(:disabled) {
    background: var(--color-primary, #1a1a2e);
    color:      #fff;
}
.scmsa-btn-add-member:disabled {
    opacity: .45;
    cursor:  not-allowed;
}

/* -----------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------- */
@media ( max-width: 480px ) {
    .scmsa-famille-item {
        flex-direction: column;
        align-items:    flex-start;
    }
    .scmsa-famille-item__actions {
        align-self: flex-end;
    }
    .scmsa-famille-form {
        padding: 1rem;
    }
}