/* =========================================================================
   money-input — campo importo custom (prefisso €, formattazione migliaia,
   stepper − / + integrati ai lati dell'input). Vedi assets/js/money-input.js.
   Markup:
   <div class="money-input" data-step="50" data-min="0" data-max="99999">
     <button type="button" class="money-input__btn money-input__btn--minus">−</button>
     <div class="money-input__field">
       <span class="money-input__prefix">€</span>
       <input class="money-input__input" type="text" inputmode="numeric">
     </div>
     <button type="button" class="money-input__btn money-input__btn--plus">+</button>
   </div>
   ========================================================================= */

.money-input {
    display: flex;
    align-items: stretch;
    min-height: 38px;
    /* stessa altezza dei select/campi di testo */
    background: var(--color-bg, #fff);
    border: 1px solid #E9EBEB;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.money-input:focus-within {
    border-color: var(--color-primary, #51BDCB);
    box-shadow: 0 0 0 3px rgba(81, 189, 203, .18);
}

.money-input__field {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 0 12px;
}

.money-input__prefix {
    color: #8a858d;
    font-size: 13px;
    font-weight: 300;
    user-select: none;
}

.money-input__input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    color: var(--color-text, #352F36);
    padding: 5px 0;
}

.money-input__input::placeholder {
    color: #bbb;
    font-weight: 300;
}

.money-input__btn {
    flex: 0 0 40px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--color-bg, #fff);
    font-size: 20px;
    line-height: 1;
    color: var(--color-primary, #51BDCB);
    cursor: pointer;
    user-select: none;
    transition: background .15s, color .15s;
}

.money-input__btn--minus {
    border-right: 1px solid #E9EBEB;
}

.money-input__btn--plus {
    border-left: 1px solid #E9EBEB;
}

.money-input__btn:hover:not(:disabled) {
    background: var(--color-primary, #51BDCB);
    color: #fff;
}

.money-input__btn:active:not(:disabled) {
    filter: brightness(.95);
}

.money-input__btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}