/* FlairFly Booking Form - form extra (newsletter + informazioni). Prefisso ffx-: nessun conflitto con le altre form */
.ffx {
    --ffx-copper: #c57a4a;
    --ffx-copper-dark: #a86744;
    --ffx-ink: #233e49;
    --ffx-muted: #8a979e;
    font-family: inherit;
    color: var(--ffx-ink);
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.ffx *, .ffx *::before, .ffx *::after { box-sizing: border-box; }
.ffx [hidden] { display: none !important; }
.ffx-req { color: #d63638; }
.ffx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- caselle di spunta (identiche alla form di prenotazione: cerchio rame) ---------- */
.ffx-check { display: block; cursor: pointer; font-size: 14px; line-height: 1.4; color: var(--ffx-ink); margin: 0; }
.ffx-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ffx-check > span { display: inline; }
.ffx-check > span::before {
    content: ""; display: inline-block; vertical-align: middle; flex: 0 0 auto;
    width: 18px; height: 18px; margin-right: 12px; border-radius: 50%;
    border: 2px solid var(--ffx-copper); background: #fff;
    transition: box-shadow .15s ease;
}
.ffx-check input:checked + span::before { background: var(--ffx-copper); box-shadow: inset 0 0 0 3.5px #fff; }
.ffx-check input:focus-visible + span::before { outline: 2px solid var(--ffx-ink); outline-offset: 2px; }
.ffx-check strong, .ffx-check a { font-weight: 700; color: var(--ffx-ink); text-decoration: none; }
.ffx-check a:hover { color: var(--ffx-copper); }
.ffx-check.ffx-err > span::before { border-color: #d63638; }

.ffx-msg { margin-top: 10px; font-size: 14px; color: #a02020; line-height: 1.4; }
.ffx-err-msg { display: block; margin-top: 4px; font-size: 12px; color: #d63638; }

/* ======================= NEWSLETTER (forma a pillola) ======================= */
.ffx-news { max-width: 560px; }
.ffx-pill {
    position: relative; display: flex; align-items: center; gap: 12px;
    height: 62px; padding: 0 6px 0 22px;
    background: #fff; border: 1.5px solid var(--ffx-copper); border-radius: 999px;
    box-shadow: 0 10px 28px rgba(35, 62, 73, .10);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.ffx-pill:focus-within { border-color: var(--ffx-copper-dark); box-shadow: 0 0 0 4px rgba(197, 122, 74, .20), 0 10px 28px rgba(35, 62, 73, .10); }
.ffx-pill-ico { flex: 0 0 auto; color: var(--ffx-copper); }
.ffx-pill input.ffx-email {
    flex: 1 1 auto; min-width: 0; height: 100% !important; margin: 0 !important; padding: 0 !important;
    font: inherit; font-size: 16px; color: var(--ffx-ink);
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important;
}
.ffx-pill input.ffx-email::placeholder { color: var(--ffx-muted); opacity: 1; }
.ffx-pill .ffx-pill-btn {
    flex: 0 0 auto; height: 50px; padding: 0 32px; margin: 0;
    font: inherit; font-size: 15px; font-weight: 600; line-height: 1; color: #fff !important;
    background: var(--ffx-copper) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
    cursor: pointer; transition: background .2s ease, transform .15s ease;
}
.ffx-pill .ffx-pill-btn:hover, .ffx-pill .ffx-pill-btn:focus-visible { background: var(--ffx-copper-dark) !important; color: #fff !important; }
.ffx-pill .ffx-pill-btn:active { transform: scale(.97); }
.ffx-pill .ffx-pill-btn:disabled { opacity: .7; cursor: wait; }
.ffx-news .ffx-check-small { margin: 12px 8px 0 22px; font-size: 12px; }
.ffx-news .ffx-check-small > span::before { width: 16px; height: 16px; margin-right: 10px; border-width: 1.5px; }
.ffx-news .ffx-msg { margin-left: 22px; }

.ffx-news .ffx-ok {
    display: flex; align-items: center; gap: 14px; padding: 12px 26px 12px 12px;
    background: #f6efe9; border: 1.5px solid var(--ffx-copper); border-radius: 999px;
    font-size: 15px; font-weight: 500; color: var(--ffx-ink); line-height: 1.35;
}
.ffx-ok-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ffx-copper); color: #fff; }

/* tema scuro (footer / sezioni blu) */
.ffx-dark .ffx-pill { background: rgba(255, 255, 255, .08); box-shadow: none; }
.ffx-dark .ffx-pill input.ffx-email { color: #fff; }
.ffx-dark .ffx-pill input.ffx-email::placeholder { color: rgba(255, 255, 255, .65); }
.ffx-dark .ffx-check, .ffx-dark .ffx-ok { color: #fff; }
.ffx-dark .ffx-ok { background: rgba(255, 255, 255, .08); }
.ffx-dark .ffx-check strong, .ffx-dark .ffx-check a { color: #fff; }
.ffx-dark .ffx-check > span::before { background-color: transparent; }
.ffx-dark .ffx-check input:checked + span::before { background-color: var(--ffx-copper); box-shadow: inset 0 0 0 3px #1b2f39; }
.ffx-dark .ffx-msg { color: #ffb4b4; }

@media (max-width: 520px) {
    .ffx-pill { height: 56px; padding-left: 16px; gap: 8px; }
    .ffx-pill-ico { display: none; }
    .ffx-pill .ffx-pill-btn { height: 44px; padding: 0 20px; font-size: 14px; }
    .ffx-news .ffx-check-small, .ffx-news .ffx-msg { margin-left: 12px; }
}

/* ======================= FORM INFORMAZIONI (stesso stile della form di prenotazione) ======================= */
.ffx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 15px; }
.ffx-field { min-width: 0; position: relative; }
.ffx-full { margin-top: 18px; }
.ffx-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 400; color: var(--ffx-ink); }
/* campi: identici ai campi .ffb-control delle altre form (bordo chiaro, raggio 10px, altezza 46px) */
.ffx.ffx-contact input.ffx-input,
.ffx.ffx-contact textarea.ffx-input {
    display: block !important; width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: 0 14px !important;
    font: inherit; font-size: 14px !important; line-height: normal; color: var(--ffx-ink) !important;
    background: #fff !important; background-image: none !important;
    border: 1px solid #d3dbe0 !important; border-radius: 10px !important;
    box-shadow: none !important; outline: none !important; -webkit-appearance: none; appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ffx.ffx-contact input.ffx-input::placeholder,
.ffx.ffx-contact textarea.ffx-input::placeholder { color: var(--ffx-muted) !important; opacity: 1; }
.ffx.ffx-contact input.ffx-input:focus,
.ffx.ffx-contact textarea.ffx-input:focus { border-color: var(--ffx-copper) !important; box-shadow: 0 0 0 3px rgba(197, 122, 74, .15) !important; }
.ffx.ffx-contact textarea.ffx-input { padding: 12px 14px !important; min-height: 96px !important; resize: vertical; line-height: 1.45; }
.ffx.ffx-contact input.ffx-input.ffx-invalid,
.ffx.ffx-contact textarea.ffx-input.ffx-invalid { border-color: #d63638 !important; }
.ffx-checks { margin-top: 20px; }
.ffx-checks .ffx-label { margin-bottom: 8px; }
.ffx-checks .ffx-check { margin: 0 0 14px; }
.ffx-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.ffx-contact .ffx-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; margin: 0; padding: 0 26px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
    color: #fff !important; background: var(--ffx-copper) !important; border: 1px solid var(--ffx-copper) !important; border-radius: 10px !important;
    cursor: pointer; box-shadow: none !important; text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.ffx-contact .ffx-btn:hover, .ffx-contact .ffx-btn:focus-visible { background: var(--ffx-copper-dark) !important; border-color: var(--ffx-copper-dark) !important; color: #fff !important; }
.ffx-contact.ffx-btn-dark .ffx-btn { background: var(--ffx-ink) !important; border-color: var(--ffx-ink) !important; }
.ffx-contact.ffx-btn-dark .ffx-btn:hover { background: var(--ffx-copper) !important; border-color: var(--ffx-copper) !important; }
.ffx-contact .ffx-btn:disabled { opacity: .65; cursor: wait; }
.ffx-ok-box { padding: 28px 24px; text-align: center; border: 1px solid var(--ffx-border); border-radius: 12px; background: #fff; }
.ffx-ok-box strong { display: block; margin-bottom: 6px; font-size: 18px; color: var(--ffx-ink); }
.ffx-ok-box p { margin: 0; font-size: 14px; color: var(--ffx-ink); }
@media (max-width: 1024px) {
    .ffx-actions { justify-content: stretch; }
    .ffx-actions .ffx-btn { flex: 1 1 0; }
}

/* ======================= FORM PREVENTIVO (dentro il riquadro rosso della pagina) ======================= */
.ffx-quote .ffx-q-title { font-size: 16px; font-weight: 700; color: var(--ffx-ink); margin: 0 0 14px; line-height: 1.3; }
.ffx-quote .ffx-q-panel { background: #fafafa; border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; display: grid; gap: 14px; }
.ffx-quote .ffx-field { min-width: 0; }
.ffx-quote .ffx-checks { margin-top: 6px; }
.ffx-quote .ffx-checks .ffx-check:last-child { margin-bottom: 0; }
.ffx-quote .ffx-btn { display: flex; width: 100%; margin: 0 0 12px; }
.ffx-quote .ffx-btn:last-child { margin-bottom: 0; }
.ffx-quote .ffx-msg { margin: 0 0 14px; }
.ffx-number { position: relative; }
.ffx.ffx-contact .ffx-number input.ffx-input { padding-right: 52px !important; -moz-appearance: textfield; }
.ffx-number input::-webkit-outer-spin-button, .ffx-number input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ffx-number-btns { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; }
.ffx-num-btn {
    width: 34px; height: 18px; padding: 0 !important; margin: 0; line-height: 1; font-size: 13px; font-weight: 600;
    color: var(--ffx-copper) !important; background: #fff !important; border: 1px solid var(--ffx-copper) !important; border-radius: 4px !important; cursor: pointer; box-shadow: none !important;
}
.ffx-num-btn:hover { background: var(--ffx-copper) !important; color: #fff !important; }

/* preventivo: colore rosso al posto del rame (solo questa form) */
.ffx-quote { --ffx-copper: #F95353; --ffx-copper-dark: #DB3232; }
.ffx.ffx-quote input.ffx-input:focus, .ffx.ffx-quote textarea.ffx-input:focus { border-color: #F95353 !important; box-shadow: 0 0 0 3px rgba(249, 83, 83, .18) !important; }
.ffx.ffx-quote .ffx-btn { background: #F95353 !important; border-color: #F95353 !important; }
.ffx.ffx-quote .ffx-btn:hover, .ffx.ffx-quote .ffx-btn:focus-visible { background: #DB3232 !important; border-color: #DB3232 !important; }
.ffx-quote .ffx-check { font-size: 12px; line-height: 1.4; }
.ffx-quote .ffx-check > span::before { width: 16px; height: 16px; margin-right: 10px; border-width: 1.5px; }
.ffx-quote .ffx-check input:checked + span::before { box-shadow: inset 0 0 0 3px #fff; }
.ffx-quote .ffx-checks .ffx-check { margin-bottom: 10px; }