/* Mebloscena form v3 — warm, explicit, accessible validation states. */
#demo-form{position:relative;overflow:hidden;isolation:isolate}
#demo-form::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#c56f43,#efb27f 52%,#6c8b62);z-index:1}
#demo-form .form-card-title{padding-right:12px}
.form-required-intro{display:flex;align-items:center;gap:9px;margin:0 0 18px;padding:10px 12px;border:1px solid rgba(179,96,55,.22);border-radius:10px;background:#fff8f2;color:var(--ink-2,#5f554c);font-size:13px;line-height:1.4}
.form-required-intro::before{content:"";width:9px;height:9px;flex:none;border-radius:50%;background:#ca774c;box-shadow:0 0 0 5px rgba(202,119,76,.14)}
.req-badge,.opt-badge{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;line-height:1.35;letter-spacing:.045em;text-transform:uppercase;vertical-align:1px}
.req-badge{color:#8f3f1f;background:#fff0e6;border:1px solid #efc2a8}
.opt-badge{color:#6e685f;background:#f3f1ed;border:1px solid #ded9d2}
#demo-form .fg{position:relative;gap:7px}
#demo-form .fg input,#demo-form .fg textarea{min-height:48px;transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease,transform 160ms ease}
#demo-form .fg textarea{min-height:104px}
#demo-form .fg[data-required="true"][data-state="empty"] input{border-color:#dba682;background:#fffcf9;box-shadow:0 0 0 3px rgba(210,127,77,.10)}
#demo-form .fg[data-required="true"][data-state="editing"] input{border-color:#c97649;background:#fff;box-shadow:0 0 0 4px rgba(201,118,73,.13)}
#demo-form .fg[data-state="valid"] input{border-color:#71906a;background:#fbfdf9;box-shadow:0 0 0 3px rgba(91,126,82,.10)}
#demo-form .fg[data-state="invalid"] input{border-color:#b53b34;background:#fffafa;box-shadow:0 0 0 3px rgba(181,59,52,.11)}
#demo-form .fg input:focus,#demo-form .fg textarea:focus{outline:3px solid rgba(193,102,59,.24);outline-offset:1px;border-color:#a84e28;box-shadow:none}
.field-state-icon{position:absolute;right:13px;top:37px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-size:13px;font-weight:800;pointer-events:none;opacity:0;transform:scale(.75);transition:opacity 150ms ease,transform 150ms ease}
.fg[data-state="valid"] .field-state-icon{opacity:1;transform:scale(1);color:#fff;background:#64825d}
.fg[data-state="valid"] .field-state-icon::before{content:"✓"}
.fg[data-state="invalid"] .field-state-icon{opacity:1;transform:scale(1);color:#fff;background:#b53b34}
.fg[data-state="invalid"] .field-state-icon::before{content:"!"}
#demo-form .fg[data-required="true"] input{padding-right:42px}
.field-error{display:none;margin:0;color:#9f2f2a;font-size:13px;font-weight:600;line-height:1.35}
.fg[data-state="invalid"] .field-error{display:block}
.form-error-summary{display:none;margin:0 0 18px;padding:14px 16px;border:2px solid #b53b34;border-radius:10px;background:#fff8f7;color:#712520;font-size:14px;line-height:1.45}
.form-error-summary.show{display:block}
.form-error-summary strong{display:block;margin-bottom:3px;color:#591d19}
.form-error-summary p{margin:0}
.form-error-summary ul{margin:8px 0 0;padding-left:20px}
.form-error-summary a{color:#712520;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.form-error-summary:focus{outline:3px solid rgba(193,102,59,.28);outline-offset:2px}
.form-readiness{display:flex;align-items:center;gap:12px;margin:20px 0 12px;padding:13px 14px;border:1px solid #e5d8ce;border-radius:12px;background:#faf6f1;color:var(--ink-2,#5f554c);transition:background 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
.readiness-ring{--progress:0deg;position:relative;width:38px;height:38px;flex:none;border-radius:50%;background:conic-gradient(#c56f43 var(--progress),#e8ddd4 var(--progress));display:grid;place-items:center;transition:background 180ms ease}
.readiness-ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#faf6f1}
.readiness-ring span{position:relative;z-index:1;font-size:11px;font-weight:800;color:#8f4827}
.form-readiness strong{display:block;color:var(--ink,#2b2722);font-size:14px}
.form-readiness small{display:block;margin-top:2px;font-size:12px;line-height:1.35}
.form-readiness.ready{border-color:#9ab293;background:#f5faf2;box-shadow:0 0 0 3px rgba(91,126,82,.08)}
.form-readiness.ready .readiness-ring{background:#64825d}
.form-readiness.ready .readiness-ring::after{background:#f5faf2}
.form-readiness.ready .readiness-ring span{color:#52734c}
#demo-form .cta-row{gap:12px}
#demo-form button[type="submit"]{position:relative;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 10px 24px rgba(129,62,29,.18);transition:opacity 160ms ease,filter 160ms ease,transform 160ms ease,box-shadow 160ms ease}
#demo-form button[type="submit"]::after{content:"→";font-size:18px;line-height:1}
#demo-form button[type="submit"][aria-disabled="true"]{cursor:pointer;opacity:.58;filter:saturate(.45);box-shadow:none;transform:none}
#demo-form button[type="submit"][aria-disabled="true"]:hover{transform:none}
#demo-form button[type="submit"]:disabled{cursor:wait}
#demo-form button[type="submit"].submitting::after{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:ms-form-spin .75s linear infinite}
.form-submit-note{margin:0 0 12px;color:var(--ink-2,#5f554c);font-size:12.5px;line-height:1.4}
.form-status{padding:0}
.form-status.ok{padding:14px 16px;border:1px solid #9ab293;border-radius:10px;background:#f5faf2;color:#42603e}
.form-status.err{padding:14px 16px;border:1px solid #d9a39f;border-radius:10px;background:#fff8f7;color:#812d28}
@keyframes ms-form-spin{to{transform:rotate(360deg)}}
@media (max-width:640px){
  .req-badge,.opt-badge{font-size:9px;padding:2px 6px}
  #demo-form .cta-row{align-items:stretch!important;flex-direction:column}
  #demo-form button[type="submit"]{width:100%}
  #demo-form .chip{align-self:flex-start}
  .form-readiness{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  #demo-form *{transition:none!important;animation-duration:.01ms!important}
}