/* ============================================================
   Contact modal (self-contained)
   Provides the structural CSS Bootstrap's modal JS relies on, plus the
   cream/navy/coral appearance of the home page contact form. Used by pages
   that load Bootstrap's JS bundle but not its full CSS (dashboard, features),
   so they can reuse the shared contact form from contact.js.
   Relies on the theme variables (--paper, --ink, --coral, ...) already
   defined by the host page.
   ============================================================ */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1060;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}
.modal.show { display: block; }
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: rgba(28, 43, 74, 0.5);
}
.modal-backdrop.fade { opacity: 0; transition: opacity 0.15s linear; }
.modal-backdrop.show { opacity: 1; }
.modal-bg-outer {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    max-width: 500px;
    pointer-events: none;
    transition: transform 0.3s ease-out;
    transform: translateY(-30px);
}
.modal.show .modal-dialog { transform: none; }
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    border-radius: 20px;
    border: none;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 16px 0 16px;
}
.btn-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    line-height: 1;
    background: transparent;
    color: var(--ink);
    opacity: 0.6;
    cursor: pointer;
}
.btn-close::before { content: "\00d7"; font-size: 26px; }
.btn-close:hover { opacity: 0.85; }

.modal-body { padding: 10px 28px 28px 28px; color: var(--ink); }
.modal-body label,
.modal-body .form-text { color: var(--ink); }
.modal-body .form-text i { color: var(--ink-soft); }

.modal-body .form-control {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    background-color: #fff;
    border: 1px solid rgba(34, 51, 92, 0.2);
    border-radius: 12px;
}
.modal-body .form-control:focus {
    outline: none;
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(232, 96, 76, 0.15);
}

.modal-body .button-general,
.modal-body .initiate-chat {
    background-color: var(--coral);
    border: none;
    color: #fff;
    border-radius: 999px;
    padding: 10px 26px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    margin-top: 8px;
}
.modal-body .button-general:hover { background-color: var(--coral-dark); }

/* Keep the page from scrolling behind an open modal */
body.modal-open { overflow: hidden; }