/*!
 * Demo Popup — WOOHL design system dialog.
 * With the WOOHL theme active most of this is already defined by the theme
 * stylesheet (same class names, same values); this file makes the popup
 * look identical on any other theme and adds the plugin-only bits
 * (field errors, request states).
 */

dialog.demo-popup{width:min(560px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);padding:0;border:0;border-radius:26px;background:#fff;color:#524A6A;box-shadow:0 40px 120px -30px rgba(11,8,22,.6);overflow:auto;font-family:inherit}
dialog.demo-popup::backdrop{background:rgba(11,8,22,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.demo-popup .modal__head{position:relative;padding:1.75rem 1.75rem 0}
.demo-popup .modal__head h2{margin:0;font-size:1.6rem;letter-spacing:-.035em;color:#15101F}
.demo-popup .modal__head p{margin:.4rem 0 0;font-size:.93rem;color:#6B6483}
.demo-popup .modal__close{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:12px;background:none;color:#6B6483;cursor:pointer;transition:background-color .15s,color .15s}
.demo-popup .modal__close:hover{background:#F5F2FA;color:#15101F}
.demo-popup .modal__close .ic:empty::before{content:"\00d7";font-size:1.4rem;line-height:1}
.demo-popup .modal__body{padding:1.5rem 1.75rem 1.75rem}

/* Form (fallback when the theme doesn't define the design system) */
.demo-popup .form-grid{display:grid;gap:1.1rem}
.demo-popup .label{font-size:.875rem;font-weight:560;color:#241D35}
.demo-popup .field{display:grid;gap:.45rem}
.demo-popup .input,.demo-popup .textarea{width:100%;min-height:50px;padding:.75rem .95rem;border:1px solid #DCD6E8;border-radius:12px;background:#fff;color:#15101F;font-size:1rem;font-family:inherit;line-height:1.4;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;box-sizing:border-box}
.demo-popup .textarea{min-height:96px;resize:vertical}
.demo-popup .input:focus,.demo-popup .textarea:focus{outline:0;border-color:#9C7BEE;box-shadow:0 0 0 4px rgba(124,82,230,.14)}
.demo-popup .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:54px;padding:.8rem 1.4rem;border:0;border-radius:14px;background:#6536DA;color:#fff;font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s}
.demo-popup .btn:hover{background:#5226C2}
.demo-popup .btn:disabled{opacity:.6;cursor:wait}
.demo-popup .form-note{margin:0;font-size:.8rem;color:#8E88A3}

/* Plugin-only: validation + request states */
.demo-popup .demo-popup-req{color:#C2261B}
.demo-popup .demo-popup-error{display:none;font-size:.8rem;font-weight:560;color:#C2261B}
.demo-popup .demo-popup-field.has-error .demo-popup-error{display:block}
.demo-popup .demo-popup-field.has-error .input,.demo-popup .demo-popup-field.has-error .textarea{border-color:#FF4E42}
.demo-popup .demo-popup-message{display:none;font-size:.88rem;font-weight:560;color:#C2261B}
.demo-popup .demo-popup-message:not(:empty){display:block}

/* Success state */
.demo-popup .form-success{display:none;align-items:flex-start;gap:.7rem;padding:1rem 1.1rem;border-radius:14px;background:#E7FAF0;border:1px solid rgba(12,206,107,.35);color:#241D35;font-size:.93rem;line-height:1.55}
.demo-popup .form-success .ic{margin-top:.15rem;color:#08804A}
.demo-popup .form-success .ic:empty::before{content:"\2713";font-weight:700}
.demo-popup [data-form-wrap].is-sent .form-success{display:flex}
.demo-popup [data-form-wrap].is-sent .form-body{display:none}