/*
 * Hobi Community - Multi-choice field
 *
 * Deze stylesheet bevat uitsluitend generieke componentstyling.
 * De inhoud en betekenis van een veld worden bepaald door de JSON-configuratie.
 *
 * Centrale kleuren worden bij voorkeur beheerd in 000-app.css.
 */

.hobi-multi-choice {
    display: grid;
    width: 100%;
    gap: 0.75rem;
    color: var(--hobi-color-text);
}

.hobi-multi-choice,
.hobi-multi-choice * {
    box-sizing: border-box;
}

/*
 * Zones voor geselecteerde en beschikbare opties.
 */
.hobi-multi-choice__zone {
    min-height: 4.5rem;
    padding: 0.875rem;
    color: var(--hobi-color-text);
    background: var(--hobi-color-background);
    border: 1px solid var(--hobi-color-accent, #CF6DA6);
    border-radius: 5px;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.hobi-multi-choice__zone:hover {
    border-color: var(--hobi-color-accent, #CF6DA6);
}

.hobi-multi-choice__zone:focus-within {
    border-color: var(--hobi-color-border-focus);
    box-shadow:
        0 0 0 4px var(--hobi-color-focus-ring);
}

/*
 * Titel boven een zone.
 */
.hobi-multi-choice__title {
    margin: 0 0 0.75rem;
    color: var(--hobi-color-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

/*
 * Lijsten met geselecteerde en beschikbare opties.
 */
.hobi-multi-choice__selected-list,
.hobi-multi-choice__available-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
}

/*
 * Gemeenschappelijke opmaak van de optie-elementen.
 */
.hobi-multi-choice__selected-item,
.hobi-multi-choice__available-item {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    color: var(--hobi-color-text);
    background: var(--hobi-color-surface);
    border: 1px solid var(--hobi-color-border);
    border-radius: 0.75rem;
    font: inherit;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

/*
 * Geselecteerde optie.
 */
.hobi-multi-choice__selected-item {
    color: var(--hobi-color-selected-text);
    background: var(--hobi-color-selected-background);
    border-color: var(--hobi-color-border-light);
}

/*
 * Beschikbare optie.
 */
.hobi-multi-choice__available-item {
    cursor: pointer;
}

.hobi-multi-choice__available-item:hover {
    color: var(--hobi-color-text);
    background: var(--hobi-color-option-hover);
    border-color: var(--hobi-color-accent, #CF6DA6);
    transform: translateY(-1px);
}

.hobi-multi-choice__available-item:focus-visible {
    outline: none;
    border-color: var(--hobi-color-border-focus);
    box-shadow:
        0 0 0 3px var(--hobi-color-focus-ring);
}

.hobi-multi-choice__available-item:disabled {
    color: var(--hobi-color-disabled-text);
    background: var(--hobi-color-disabled-background);
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
}

/*
 * Inhoud binnen een optie.
 */
.hobi-multi-choice__item-content {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.5rem;
}

.hobi-multi-choice__content {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
}

.hobi-multi-choice__label,
.hobi-multi-choice__code,
.hobi-multi-choice__secondary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hobi-multi-choice__label {
    color: inherit;
}

.hobi-multi-choice__code {
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
}

.hobi-multi-choice__secondary {
    color: var(--hobi-color-muted);
    font-size: 0.8125rem;
}

/*
 * Verwijderknop van een geselecteerde optie.
 *
 * De bestaande X wordt als witte X gecentreerd in een roze cirkel.
 * Hiervoor is geen Font Awesome vereist.
 */
.hobi-multi-choice__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    min-width: 1.5rem;
    max-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    max-height: 1.5rem;
    margin: 0 0 0 0.25rem;
    padding: 0;
    overflow: hidden;
    color: #FFFFFF;
    background: var(--hobi-color-accent, #CF6DA6);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition:
        color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.hobi-multi-choice__remove:hover {
    color: #FFFFFF;
    background: var(--hobi-color-accent-hover, #C24788);
    transform: scale(1.08);
}

.hobi-multi-choice__remove:focus-visible {
    outline: none;
    color: #FFFFFF;
    background: var(--hobi-color-accent-hover, #C24788);
    box-shadow:
        0 0 0 3px var(--hobi-color-focus-ring);
}

.hobi-multi-choice__remove:active {
    transform: scale(0.96);
}

/*
 * Ondersteuning wanneer in de knop een Font Awesome-icoon staat.
 *
 * Voorbeeld:
 * <i class="fa-solid fa-circle-xmark"></i>
 */
.hobi-multi-choice__remove i,
.hobi-multi-choice__remove svg {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    pointer-events: none;
}

/*
 * Als fa-circle-xmark wordt gebruikt, levert het icoon zelf de cirkel.
 */
.hobi-multi-choice__remove:has(.fa-circle-xmark) {
    color: var(--hobi-color-accent, #CF6DA6);
    background: transparent;
    font-size: 1.5rem;
}

.hobi-multi-choice__remove:has(.fa-circle-xmark):hover {
    color: var(--hobi-color-accent-hover, #C24788);
    background: transparent;
}

/*
 * Visuals.
 */
.hobi-multi-choice__visual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hobi-multi-choice__visual-image {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.hobi-multi-choice__visual-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
}

.hobi-multi-choice__visual-swatch {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: var(
        --hobi-multi-choice-swatch,
        transparent
    );
    border: 1px solid var(--hobi-color-visual-border);
    border-radius: 50%;
}

.hobi-multi-choice__visual-emoji {
    font-size: 1.25rem;
    line-height: 1;
}

.hobi-multi-choice__visual-text,
.hobi-multi-choice__visual-badge,
.hobi-multi-choice__visual-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0.125rem 0.375rem;
    color: var(--hobi-color-text-secondary);
    background: var(--hobi-color-surface-muted);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.hobi-multi-choice__visual-initials {
    border-radius: 50%;
}

/*
 * Lege lijst.
 */
.hobi-multi-choice__empty {
    color: var(--hobi-color-muted);
    opacity: 1;
}

/*
 * Meldingen en validatie.
 */
.hobi-multi-choice__message {
    min-height: 1.25rem;
    margin: 0;
    color: var(--hobi-color-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.hobi-multi-choice__message.is-error {
    color: var(--hobi-color-error);
}

/*
 * Bescherming tegen algemene button-styling van Elementor en thema's.
 */
.hobi-field .hobi-multi-choice button.hobi-multi-choice__available-item {
    width: auto;
    color: var(--hobi-color-text);
    background-color: var(--hobi-color-surface);
    border: 1px solid var(--hobi-color-border);
    border-radius: 0.75rem;
    font: inherit;
    font-weight: inherit;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    white-space: normal;
}

.hobi-field .hobi-multi-choice button.hobi-multi-choice__available-item:hover {
    color: var(--hobi-color-text);
    background-color: var(--hobi-color-option-hover);
    border-color: var(--hobi-color-accent, #CF6DA6);
}

.hobi-field .hobi-multi-choice button.hobi-multi-choice__available-item:focus {
    color: var(--hobi-color-text);
    background-color: var(--hobi-color-option-hover);
}

.hobi-field .hobi-multi-choice button.hobi-multi-choice__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    min-width: 1.5rem;
    max-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    max-height: 1.5rem;
    padding: 0;
    color: #FFFFFF;
    background-color: var(--hobi-color-accent, #CF6DA6);
    border: 0;
    border-radius: 50%;
    font-family: Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: none;
}

.hobi-field .hobi-multi-choice button.hobi-multi-choice__remove:hover,
.hobi-field .hobi-multi-choice button.hobi-multi-choice__remove:focus {
    color: #FFFFFF;
    background-color: var(--hobi-color-accent-hover, #C24788);
    border: 0;
}

.hobi-field
    .hobi-multi-choice
    button.hobi-multi-choice__remove:has(.fa-circle-xmark) {
    color: var(--hobi-color-accent, #CF6DA6);
    background-color: transparent;
    font-size: 1.5rem;
}

.hobi-field
    .hobi-multi-choice
    button.hobi-multi-choice__remove:has(.fa-circle-xmark):hover,
.hobi-field
    .hobi-multi-choice
    button.hobi-multi-choice__remove:has(.fa-circle-xmark):focus {
    color: var(--hobi-color-accent-hover, #C24788);
    background-color: transparent;
}

/*
 * Mobiele weergave.
 */
@media (max-width: 640px) {
    .hobi-multi-choice__zone {
        padding: 0.75rem;
    }

    .hobi-multi-choice__selected-item,
    .hobi-multi-choice__available-item {
        max-width: 100%;
    }

    .hobi-multi-choice__item-content {
        min-width: 0;
    }

    .hobi-multi-choice__content {
        min-width: 0;
    }
}