/* =====================================================================
   FrolliAMOci — 3A "Ho un budget"
   ===================================================================== */

.budget { display: flex; flex-direction: column; gap: var(--space-4); max-width: 620px; margin: 0 auto; }

.budget-intro { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-1) 0; }
.budget-intro__art { flex: none; width: 88px; height: 88px; }            /* box stilizzato (file 240×240) */
.budget-intro__img { width: 100%; height: 100%; object-fit: contain; }
.budget-intro__title { font-size: clamp(1.35rem, 1rem + 1.8vw, 1.9rem); font-weight: var(--fw-heavy); line-height: 1.15; text-wrap: balance; }

.budget-card {
    display: flex; flex-direction: column; gap: var(--space-5);
    padding: var(--space-5) var(--space-4) var(--space-4);
    background: var(--color-surface-alt);
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.budget-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.budget-field__label { padding: 0; margin-bottom: var(--space-3); font-size: var(--fs-lg); font-weight: var(--fw-heavy); }

/* ---- Budget: importo + slider ---- */
.budget-amount { display: flex; align-items: center; gap: var(--space-4); }
.budget-amount__box {
    flex: none; display: flex; align-items: center; gap: 4px;
    width: 104px; height: var(--touch-cta);
    padding: 0 var(--space-3);
    background: #fff; border-radius: var(--radius-md);
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border);
}
.budget-amount__box:focus-within { box-shadow: var(--shadow-card), inset 0 0 0 2px var(--color-accent); }
.budget-amount__input {
    width: 100%; min-width: 0; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 1.2rem; font-weight: var(--fw-heavy); color: var(--color-text); text-align: right;
}
.budget-amount__currency { font-size: 1.2rem; font-weight: var(--fw-heavy); }

.budget-range {
    --fill: 30%;
    flex: 1; min-width: 0; height: var(--touch-cta);   /* target ampio per il pollice */
    margin: 0; background: transparent; cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.budget-range::-webkit-slider-runnable-track {
    height: 8px; border-radius: var(--radius-pill);
    background: linear-gradient(to right, var(--color-caramel) var(--fill), #EAD6C4 var(--fill));
}
.budget-range::-moz-range-track { height: 8px; border-radius: var(--radius-pill); background: #EAD6C4; }
.budget-range::-moz-range-progress { height: 8px; border-radius: var(--radius-pill); background: var(--color-caramel); }
.budget-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 30px; height: 30px; margin-top: -11px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #F2A869, var(--color-caramel) 60%, #B86E2A);
    border: 3px solid #fff; box-shadow: 0 3px 10px -2px rgba(154, 84, 24, 0.55);
}
.budget-range::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--color-caramel); border: 3px solid #fff; box-shadow: 0 3px 10px -2px rgba(154, 84, 24, 0.55);
}
.budget-range:focus-visible { outline: none; }
.budget-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(194, 46, 68, 0.35); }
.budget-hint { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Persone ---- */
.people { display: flex; align-items: center; gap: var(--space-3); }
.people__icon {
    display: grid; place-items: center; flex: none;
    width: var(--touch-cta); height: var(--touch-cta);
    border-radius: var(--radius-md); background: var(--tint-caramel); color: var(--color-caramel-strong); font-size: 1.2rem;
}
.people__input {
    width: 64px; height: var(--touch-cta); padding: 0 var(--space-2);
    border: 0; border-radius: var(--radius-md); background: #fff;
    box-shadow: inset 0 0 0 1px var(--color-border);
    font: inherit; font-size: 1.2rem; font-weight: var(--fw-heavy); color: var(--color-text); text-align: center;
    -moz-appearance: textfield;
}
.people__input::-webkit-outer-spin-button, .people__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.people__buttons { margin-left: auto; display: flex; gap: var(--space-3); }
.stepper {
    display: grid; place-items: center;
    width: var(--touch-cta); height: var(--touch-cta);
    border: 0; border-radius: var(--radius-md);
    background: #fff; color: var(--color-text); font-size: 1.1rem; cursor: pointer;
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border);
    transition: transform var(--dur-fast) ease;
    touch-action: manipulation;   /* niente doppio tap-zoom né ripetizioni accidentali */
    user-select: none;
}
.stepper:active { transform: scale(0.92); }
.stepper:disabled { opacity: 0.4; cursor: default; }

/* ---- Occasioni: radio nativi con aspetto a "pillola" ---- */
.occasions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.occasion { position: relative; display: block; cursor: pointer; }
.occasion__radio { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.occasion__label {
    display: grid; place-items: center;
    min-height: 50px; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: #fff; color: var(--color-text);
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border);
    font-weight: var(--fw-bold); text-align: center; line-height: 1.2;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.occasion:active .occasion__label { transform: scale(0.97); }
.occasion__radio:checked + .occasion__label {
    background: linear-gradient(180deg, #EE5A6E, var(--color-accent-strong));
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(194, 46, 68, 0.9);
}
.occasion__radio:focus-visible + .occasion__label { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.occasion-other { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.occasion-other__label { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.occasion-other__input {
    height: var(--touch-cta); padding: 0 var(--space-4);
    border: 0; border-radius: var(--radius-md); background: #fff;
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
    font: inherit; font-size: 16px; color: var(--color-text);
}
.occasion-other__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-accent); }

/* ---- CTA ---- */
.budget-cta {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3);
    min-height: 56px; margin-top: var(--space-1);
    border: 0; border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #C9803F 0%, #9A5418 100%);
    color: #fff; font: inherit; font-size: 1.15rem; font-weight: var(--fw-heavy); cursor: pointer;
    box-shadow: 0 12px 24px -14px rgba(122, 64, 18, 0.9);
    transition: transform var(--dur-fast) ease, filter var(--dur-fast) ease;
}
.budget-cta:hover { filter: brightness(1.05); }
.budget-cta:active { transform: scale(0.98); }
.budget-cta[aria-busy="true"] { cursor: progress; filter: saturate(0.8); }
.budget-cta .icon { transition: transform var(--dur-base) var(--ease-out); }
.budget-cta:hover .icon { transform: translateX(3px); }

@media (max-width: 767px) and (max-height: 720px) {
    .budget-card { gap: var(--space-4); padding-top: var(--space-4); }
    .occasion__label { min-height: 44px; }
    .budget-intro__art { width: 72px; height: 72px; }
}

@media (min-width: 768px) {
    .budget-card { padding: var(--space-6); }
    .occasions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sezione 10 — esigenza alimentare facoltativa (solo prodotti verificati) */
.budget-field__opt { font-weight: var(--fw-medium, 500); font-size: var(--fs-sm); color: var(--color-text-muted, #7a6a62); }
.budget-diet__note { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--color-text-muted, #7a6a62); }