/* =========================================
   famtree.info — Person Selector
   File: assets/css/person-selector.css
   ========================================= */

.person-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;

    margin: 20px 0;
    padding: 18px;

    background: #f7f3eb;
    border: 1px solid #ded4c3;
    border-radius: 10px;

    box-sizing: border-box;
}

.person-selector *,
.person-selector *::before,
.person-selector *::after {
    box-sizing: border-box;
}

.person-selector__field {
    display: flex;
    flex: 1 1 280px;
    flex-direction: column;
    gap: 7px;

    min-width: 0;
}

.person-selector__label {
    color: #514333;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.person-selector__select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 36px 10px 12px;

    color: #332b23;
    background-color: #fffdf9;

    border: 1px solid #c9bba6;
    border-radius: 6px;

    font: inherit;
    line-height: 1.4;

    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.person-selector__select:hover {
    border-color: #8c7557;
}

.person-selector__select:focus-visible {
    outline: 3px solid rgb(182 154 112 / 35%);
    outline-offset: 2px;
    border-color: #806442;
}

.person-selector__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 10px 20px;

    color: #fffdf9;
    background: #66513b;

    border: 1px solid #66513b;
    border-radius: 6px;

    font: inherit;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.person-selector__button:hover {
    background: #4e3d2c;
    border-color: #4e3d2c;
}

.person-selector__button:focus-visible {
    outline: 3px solid rgb(182 154 112 / 50%);
    outline-offset: 3px;
}

.person-selector__error {
    margin: 16px 0;
    padding: 12px 14px;

    color: #842b25;
    background: #fff1ef;
    border: 1px solid #e5bcb7;
    border-radius: 6px;
}

/* Мобильные устройства */
@media (max-width: 600px) {
    .person-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }

    .person-selector__field {
        flex-basis: auto;
        width: 100%;
    }

    .person-selector__button {
        width: 100%;
    }
}

/* Учитываем настройки уменьшения анимации */
@media (prefers-reduced-motion: reduce) {
    .person-selector__select,
    .person-selector__button {
        transition: none;
    }
}