/* =====================================================================
   Request a demo
   The dialog every product page opens. Loaded by the shared partial in
   includes/demo_request.php, so a page gets it by including that and
   has nothing else to remember.

   It carries its own colours and its own buttons. The Sacco page is
   dark and the next product page may not be, and a dialog that reads
   correctly only on the page it was born on is a dialog that will be
   copied rather than reused.
   ===================================================================== */

.demo-modal {
    --demo-ink:    #111c2f;
    --demo-text:   #e6edf7;
    --demo-muted:  #93a4bd;
    --demo-line:   rgba(255, 255, 255, .13);
    --demo-green:  #16a34a;
    --demo-green-2:#22c55e;
}

/* The site's global stylesheet colours every heading near-black. Inside
   a dark dialog that is a heading nobody can read. */
.demo-modal h2,
.demo-modal h3 { color: var(--demo-text); }

/* Its own buttons, so it does not borrow from whichever page happens to
   have included it. */
.demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font: inherit;
    font-size: .98rem;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 11px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.demo-btn--primary { background: var(--demo-green); color: #fff; }
.demo-btn--primary:hover { background: var(--demo-green-2); transform: translateY(-2px); }
.demo-btn--ghost {
    background: transparent;
    color: var(--demo-text);
    border-color: rgba(255, 255, 255, .22);
}
.demo-btn--ghost:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }
.demo-btn--block { width: 100%; }


.demo-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 20px;
}
.demo-modal[hidden] { display: none; }

.demo-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 10, 20, .76);
    backdrop-filter: blur(3px);
}

.demo-modal__panel {
    position: relative;
    width: 100%;
    max-width: 580px;
    max-height: 92vh;
    overflow-y: auto;
    background: #111c2f;
    color: #e6edf7;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 20px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
    animation: demoIn .28s cubic-bezier(.17, .75, .28, 1);
}

@keyframes demoIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .demo-modal__panel { animation: none; }
    .sacco-btn:hover, .sacco-module:hover { transform: none; }
}

.demo-modal__x {
    position: absolute;
    top: 16px; right: 16px;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #93a4bd;
    cursor: pointer;
}
.demo-modal__x:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.demo-modal__body { padding: 34px 32px 30px; }
.demo-modal__body h2 { font-size: 1.42rem; font-weight: 800; margin: 0 0 10px; padding-right: 40px; }
.demo-modal__body > p { color: #93a4bd; font-size: .95rem; line-height: 1.68; margin: 0 0 24px; }

.demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.demo-field--wide { grid-column: 1 / -1; }

.demo-field label {
    display: block;
    font-size: .84rem;
    font-weight: 650;
    margin-bottom: 7px;
    color: #c6d2e4;
}
.demo-field label span { color: #f87171; }

.demo-field input,
.demo-field select,
.demo-field textarea {
    width: 100%;
    font: inherit;
    font-size: .95rem;
    padding: 12px 14px;
    color: #e6edf7;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;
    transition: border-color .18s ease, background .18s ease;
}
.demo-field textarea { resize: vertical; min-height: 78px; }

.demo-field input:focus,
.demo-field select:focus,
.demo-field textarea:focus {
    outline: none;
    border-color: var(--sacco-green-2, #22c55e);
    background: rgba(255, 255, 255, .08);
}
.demo-field input::placeholder,
.demo-field textarea::placeholder { color: #64748b; }

/* Off-screen rather than display:none — a robot filling only what it
   can see is a robot that skips a hidden field. */
.demo-hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.demo-error {
    margin: 18px 0 0;
    padding: 11px 14px;
    font-size: .9rem;
    color: #fca5a5;
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .3);
    border-radius: 9px;
}

#demoSubmit { margin-top: 22px; }
#demoSubmit:disabled { opacity: .6; cursor: progress; transform: none; }

.demo-small {
    margin: 14px 0 0;
    font-size: .8rem;
    color: #64748b;
    text-align: center;
}

.demo-done { text-align: center; padding-top: 44px; }
.demo-done__tick {
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .14);
    border: 1px solid rgba(34, 197, 94, .4);
    color: #22c55e;
}
.demo-done p { color: #93a4bd; line-height: 1.7; margin: 0 0 24px; }

/* ── Narrower screens ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .demo-grid  { grid-template-columns: 1fr; }
    .demo-modal { padding: 0; align-items: flex-end; }
    .demo-modal__panel {
        max-width: 100%;
        max-height: 94vh;
        border-radius: 20px 20px 0 0;
    }
    .demo-modal__body { padding: 28px 22px 26px; }
}