/* Shared demo modal styles */
:root{
  --dm-bg:#ffffff;
  --dm-accent:#0d6efd;
  --dm-radius:12px;
  --dm-shadow:0 12px 40px rgba(13,110,253,0.12);
  --primary-blue: #009ecd;
}
.dm-modal{display:none;position:fixed;inset:0;z-index:2000;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:none}
.dm-modal.dm-show{display:flex}
.dm-backdrop{position:absolute;inset:0;background:rgba(10,10,10,0.45)}
.dm-panel{position:relative;background:var(--dm-bg);border-radius:var(--dm-radius);box-shadow:var(--dm-shadow);width:520px;max-width:94%;padding:22px 20px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;transform:translateY(-8px) scale(.98);opacity:0;transition:transform .22s cubic-bezier(.2,.9,.3,1),opacity .22s; font-family: 'Poppins', sans-serif;pointer-events:auto}
.dm-modal.dm-show .dm-panel{transform:translateY(0) scale(1);opacity:1}
.dm-header{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding-bottom:6px}
.dm-title{font-family: 'Readex Pro', sans-serif; font-size:20px;margin:0;color:#111;font-weight:500;text-align:center}
.dm-close{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:999px;background:rgba(0,0,0,0.06);border:0;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;color:#333;box-shadow:0 6px 18px rgba(2,6,23,0.06);transition:transform .12s,background .12s,box-shadow .12s}
.dm-close:hover{transform:translateY(-3px) scale(1.03);background:rgba(13,110,253,0.08);color:var(--dm-accent);box-shadow:0 10px 26px rgba(13,110,253,0.12)}
.dm-close:focus{outline:none;box-shadow:0 0 0 6px rgba(13,110,253,0.10)}
.dm-logo{width:200px;height:auto;display:block;margin:0 auto}
.dm-sub{font-size:13px;color:#666;margin-top:2px}
.dm-body{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
.dm-row{display:flex;flex-direction:column;gap:6px;width:100%}
.dm-row label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#333;text-align:left}
.dm-row input,.dm-row select{padding:12px;border-radius:10px;border:1px solid #eef0f3;font-size:14px;width:100%;box-sizing:border-box;background:#fafafa}
.dm-row textarea{padding:12px;border-radius:10px;border:1px solid #eef0f3;font-size:14px;width:100%;box-sizing:border-box;background:#fafafa;font-family:'Readex Pro',sans-serif;resize:none}
/* Phone input with country code */
.dm-row input[type="tel"]{padding:12px;flex-grow:1}
.dm-row [id*="country_code"]{display:inline-block;background:#f0f0f0;padding:8px 12px;border-radius:6px;font-weight:600;font-size:14px;min-width:60px;text-align:center;border:1px solid #eef0f3}
.dm-row input:focus,.dm-row select:focus,.dm-row textarea:focus{outline:none;border-color:var(--dm-accent);box-shadow:0 6px 20px rgba(13,110,253,0.08);background:#fff}
.dm-row input.dm-error,.dm-row select.dm-error,.dm-row textarea.dm-error{border-color:#dc3545;background:#fff5f5}
.dm-row input.dm-error:focus,.dm-row select.dm-error:focus,.dm-row textarea.dm-error:focus{box-shadow:0 6px 20px rgba(220,53,69,0.12);border-color:#dc3545;background:#fff}
/* Error message */
.dm-error-msg{display:none;font-size:12px;color:#dc3545;margin-top:4px;font-weight:500;padding:4px 0}
.dm-row.has-error .dm-error-msg{display:block;animation:slideIn 0.2s cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes slideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.dm-actions{display:flex;flex-direction:column;gap:12px;justify-content:center;margin-top:14px;width:100%}
.dm-btn{padding:12px 20px;border-radius:12px;border:0;cursor:pointer;font-weight:800;font-size:16px;width:100%;min-width:0;font-family:'Poppins', sans-serif}
.dm-btn-primary{background:var(--primary-blue);color:#fff;box-shadow:0 8px 20px rgba(0,158,205,0.14);transition:transform .12s}
.dm-btn-primary:hover{transform:translateY(-2px)}
.dm-btn-ghost{background:transparent;border:1px solid #e6e6e6;color:#333;width:100%;min-width:0}
.dm-note{font-size:12px;color:#777;margin-top:6px}
@media (max-width:520px){.dm-panel{width:92%;padding:16px}.dm-title{font-size:18px}}
.dm-btn{padding:10px 14px;border-radius:8px;border:0;cursor:pointer;font-weight:600}
.dm-btn-primary{background:var(--primary-blue);color:#fff}
.dm-btn-ghost{background:transparent;border:1px solid #ddd;color:#333}
@media (max-width:520px){.dm-panel{width:92%;padding:16px}.dm-title{font-size:18px}}