.demo-modal {
position: relative;
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: var(--mg-r-lg);
padding: 32px 28px 28px;
box-shadow: var(--mg-shadow-lg);
}
.demo-modal-close {
position: absolute; top: 16px; right: 16px;
width: var(--btn-icon-sm); height: var(--btn-icon-sm); border-radius: var(--mg-r-sm);
border: 1.5px solid var(--mg-border-strong);
background: var(--mg-surface2);
color: var(--mg-text-muted);
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 14px;
transition: var(--ease);
}
.demo-modal-close:hover { color: var(--mg-primary); border-color: var(--mg-primary); }
.demo-modal-head { margin-bottom: 22px; padding-right: 36px; }
.demo-modal-head h3 { font-size: 22px; font-weight: 800; color: var(--mg-text); margin: 0 0 6px; }
.demo-modal-head p  { font-size: 14px; color: var(--mg-text-muted); margin: 0; line-height: 1.6; }
.demo-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.demo-field label { font-size: 13px; font-weight: 600; color: var(--mg-text2); }
.demo-field input {
padding: 12px 14px;
background: var(--mg-bg);
border: 1.5px solid var(--mg-border-strong);
border-radius: var(--mg-r);
color: var(--mg-text); font-size: 14px; font-family: inherit;
transition: var(--ease); outline: none; width: 100%;
}
.demo-field input::placeholder { color: var(--mg-text-light); }
.demo-field input:focus { border-color: var(--mg-primary); box-shadow: none; }
.demo-field input.input-invalid { border-color: var(--mg-danger); }
.demo-field input.input-invalid:focus { border-color: var(--mg-danger); box-shadow: none; }
.demo-modal .error-message,
.demo-modal .sent-message {
display: none; opacity: 0; transition: opacity .4s ease;
padding: 11px 14px; border-radius: var(--mg-r); font-size: 14px; margin-top: 8px;
}
.demo-modal .error-message { background: #FEE2E2; color: #DC2626; }
.demo-modal .sent-message  { background: var(--mg-primary-soft); color: var(--mg-primary); font-weight: 500; }
.demo-modal .error-message.fb-show,
.demo-modal .sent-message.fb-show { opacity: 1; }
.demo-modal .btn-send { margin-top: 8px; width: 100%; }
.demo-or { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.demo-or::before, .demo-or::after { content: ''; flex: 1; height: 1px; background: var(--mg-border); }
.demo-or span { font-size: 12px; color: var(--mg-text-muted); }
.btn-demo-whatsapp {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: var(--btn-pad-l-o);
border: 1.5px solid rgba(37,211,102,.4);
background: rgba(37,211,102,.08);
color: #25D366; font-size: var(--btn-fs-l); font-weight: 600;
border-radius: var(--mg-r); transition: var(--ease); text-decoration: none;
}
.btn-demo-whatsapp:hover { background: #25D366; color: #fff; border-color: #25D366; }
.demo-field select {
padding: 12px 38px 12px 14px;
background-color: var(--mg-bg);
border: 1.5px solid var(--mg-border-strong);
border-radius: var(--mg-r);
color: var(--mg-text); font-size: 14px; font-family: inherit;
transition: var(--ease); outline: none; width: 100%; cursor: pointer;
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235F7A6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 15px;
}
.demo-field select:focus { border-color: var(--mg-primary); box-shadow: none; }
.demo-field select option { background: var(--mg-surface); color: var(--mg-text); }
[data-theme="dark"] .demo-field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%237FB898' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
@media (max-width: 480px) {
.demo-modal { padding: 26px 20px 22px; }
.demo-modal-head h3 { font-size: 19px; }
}
@media (max-width: 767.98px) {
.demo-field input,
.demo-field select { font-size: 16px; }
}