/* =========================================================================
   Coteaux Form Stepper
   Style le wrap [- input +] injecté autour des <input type="number">
   des formulaires Elementor.
   ========================================================================= */

/* Champ number : label + stepper sur une seule ligne, peu importe le viewport.
   Le label garde la même largeur que les autres champs (180px sur PC) pour que
   le stepper s'aligne sur l'axe vertical des autres inputs. */
.elementor-form .elementor-field-type-number.elementor-field-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
}

.elementor-form .elementor-field-type-number.elementor-field-group > .elementor-field-label {
    flex: 0 0 180px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

@media (max-width: 1023px) {
    .elementor-form .elementor-field-type-number.elementor-field-group > .elementor-field-label {
        flex: 0 0 auto !important;
    }
}

/* Wrap : se dimensionne au contenu, aligné à gauche (comme les autres champs). */
.coteaux-stepper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Champ nombre : pastille 50×30, fond FFF2E0 25%, border FFF2E0, radius 5px. */
.coteaux-stepper__input.coteaux-stepper__input {
    flex: 0 0 auto !important;
    width: 50px !important;
    height: 30px !important;
    min-width: 0 !important;
    text-align: center !important;
    background: rgba(255, 242, 224, 0.25) !important;
    border: 1px solid #FFF2E0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    color: #FFF2E0 !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 0 4px !important;
    line-height: 1 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.coteaux-stepper__input::-webkit-outer-spin-button,
.coteaux-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.coteaux-stepper__input:focus {
    outline: none !important;
    border-color: #FFF2E0 !important;
    background: rgba(255, 242, 224, 0.32) !important;
}

/* Boutons − / + : rond 24×24, fond FFF2E0, signe en #5B1A4E. */
.coteaux-stepper__btn {
    flex: 0 0 auto !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #FFF2E0 !important;
    border: 0 !important;
    border-radius: 99px !important;
    color: #5B1A4E !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color .2s ease, opacity .2s ease, transform .15s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.coteaux-stepper__btn:hover:not(:disabled) {
    transform: scale(1.06) !important;
}

.coteaux-stepper__btn:active:not(:disabled) {
    transform: scale(0.96) !important;
}

.coteaux-stepper__btn:focus-visible {
    outline: 2px solid #D5A137 !important;
    outline-offset: 2px !important;
}

.coteaux-stepper__btn:disabled {
    opacity: .4 !important;
    cursor: not-allowed !important;
}

.coteaux-stepper__btn span {
    display: block !important;
    pointer-events: none !important;
    transform: translateY(-0.5px) !important;
}