/* Modifica la classe per usare l'immagine di sfondo */
.bg-image {
    background-image: url("{{ asset('images/back.webp') }}");
    background-repeat: no-repeat;       /* Non ripetere */
    background-size: cover;           /* Copri tutta l'area mantenendo le proporzioni */
    background-position: center center; /* Centra l'immagine */
    background-attachment: fixed;       /* Opzionale: Sfondo fisso allo scroll */
    background-color: #e0e8f0;        /* Colore di fallback mentre l'immagine carica */
/* Assicurati che il body o il contenitore abbiano un'altezza minima
ad esempio tramite min-h-screen di Tailwind o CSS standard */
    
}
.my-chat-bubble {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #2563eb; /* blu Tailwind (puoi cambiare) */
color: white;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
cursor: pointer;
z-index: 9999;
transition: background-color 0.2s;
}

.my-chat-bubble:hover {
background-color: #1d4ed8;
}

/* Icona chat opzionale */
.my-chat-bubble svg {
width: 28px;
height: 28px;
}
.zammad-form-modal {
font-family: 'Inter', sans-serif !important;
}

/* Card (il <form> ha classe .zammad-form) */
.zammad-form-modal .zammad-form {
border-radius: 14px !important;
border: 1px solid rgba(2, 6, 23, 0.08) !important;
box-shadow: 0 20px 50px rgba(2, 6, 23, 0.18) !important;
max-width: 560px !important;
width: 100% !important;
/* << padding interno card (prima era 0) */
padding: 24px 24px 28px !important;
overflow: hidden !important;
background: #fff !important;
}

/* Header (se il tuo script/tema lo genera) */
.zammad-form-modal .zammad-form-header {
background: #0B62FE0D !important;
color: #0b62fe !important;
padding: 20px 24px !important;
border-bottom: 1px solid rgba(2, 6, 23, 0.06) !important;
font-size: 18px !important;
font-weight: 700 !important;
}

/* Nel markup reale c'è .zammad-form-modal-body (contenitore esterno).
Lo lasciamo senza padding per evitare doppio spazio. */
.zammad-form-modal .zammad-form-modal-body {
background: #fff !important;
}

/* Spaziatura verticale tra i gruppi */
.zammad-form-modal .zammad-form-group {
margin-bottom: 18px !important;
}

/* Label più leggibili e staccate */
.zammad-form-modal label {
display: block !important;
margin-bottom: 8px !important;
color: #0f172a !important; /* slate-900 */
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: .1px !important;
}

/* Campi */
.zammad-form-modal input[type="text"],
.zammad-form-modal input[type="email"],
.zammad-form-modal textarea,
.zammad-form-modal select {
width: 100% !important;
padding: 12px 14px !important;
border: 1px solid #e2e8f0 !important; /* slate-200 */
border-radius: 10px !important;
font-size: 14px !important;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
font-family: 'Inter', sans-serif !important;
background: #fff !important;
}

.zammad-form-modal input[type="text"]:hover,
.zammad-form-modal input[type="email"]:hover,
.zammad-form-modal textarea:hover,
.zammad-form-modal select:hover {
border-color: #cbd5e1 !important; /* slate-300 */
}

.zammad-form-modal input[type="text"]:focus,
.zammad-form-modal input[type="email"]:focus,
.zammad-form-modal textarea:focus,
.zammad-form-modal select:focus {
outline: none !important;
border-color: #3b82f6 !important;  /* blue-500 */
box-shadow: 0 0 0 4px rgba(59, 130, 246, .12) !important;
background: #fff !important;
}

.zammad-form-modal textarea {
min-height: 132px !important;
resize: vertical !important;
}

/* Pulsante primario: gestiamo sia <button type="submit"> che .btn del markup Zammad */
.zammad-form-modal button[type="submit"],
.zammad-form-modal .zammad-form .btn {
background: #1e40af !important; /* blue-800 */
color: #fff !important;
padding: 14px 18px !important;
border: none !important;
border-radius: 10px !important;
font-size: 15px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease !important;
width: 100% !important;
margin-top: 10px !important;
box-shadow: 0 8px 24px rgba(30, 64, 175, .28) !important;
}

.zammad-form-modal button[type="submit"]:hover,
.zammad-form-modal .zammad-form .btn:hover {
background: #1d4ed8 !important; /* blue-700 */
transform: translateY(-1px) !important;
box-shadow: 0 10px 28px rgba(29, 78, 216, .32) !important;
}

.zammad-form-modal button[type="submit"]:active,
.zammad-form-modal .zammad-form .btn:active {
transform: translateY(0) !important;
box-shadow: 0 6px 18px rgba(29, 78, 216, .22) !important;
}

/* Pulsante chiudi */
.zammad-form-modal .zammad-form-close {
position: absolute !important;
top: 14px !important;
right: 14px !important;
background: transparent !important;
border: 1px solid rgba(2, 6, 23, 0.08) !important;
color: #0f172a !important;
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
cursor: pointer !important;
font-size: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background-color .15s ease, border-color .15s ease !important;
}

.zammad-form-modal .zammad-form-close:hover {
background: #f8fafc !important; /* slate-50 */
border-color: #cbd5e1 !important; /* slate-300 */
}

/* Sfondo modale */
.zammad-form-modal-backdrop {
background: rgba(15, 23, 42, 0.55) !important; /* slate-900 a 55% */
backdrop-filter: blur(3px) !important;
}

/* Schermata di ringraziamento */
.zammad-form-modal .zammad-form-thankyou {
padding: 40px 28px !important;
text-align: center !important;
color: #0f172a !important;
font-size: 15px !important;
line-height: 1.6 !important;
}
.zammad-form-modal .zammad-form-thankyou::before {
content: "" !important;
display: block !important;
width: 56px !important;
height: 56px !important;
margin: 0 auto 16px !important;
background: #10b981 !important; /* emerald-500 */
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="white"><path d="M20.285 2l-11.285 11.567-5.285-5.011-3.715 3.444 9 8.999 15-15.556z"/></svg>') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="white"><path d="M20.285 2l-11.285 11.567-5.285-5.011-3.715 3.444 9 8.999 15-15.556z"/></svg>') center/contain no-repeat;
border-radius: 12px !important;
}

/* Banner offline sopra al form */
.zammad-offline-message {
background: #eff6ff; /* blu chiaro */
border: 1px solid #bfdbfe;
padding: 14px 16px !important;
border-radius: 10px !important;
margin-bottom: 20px !important;
color: #1e3a8a;
font-size: 14px;
line-height: 1.5;
}