/* ---------------------------------------------------------------------------
   wwwroot/css/shared/global/14-contact-modal.css

   Loaded by _Layout.cshtml as part 14 of 17 for every page.
   Cascade order is the file order in that <link> list:
     previous: 13-panel.css
     next:     15-buttons.css

   Split out of a single monolithic stylesheet. Do not reorder the <link>
   tags and do not move a rule between these files: both change the cascade.
--------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   CONTACT MODAL COMPONENT
   _Contact and _ContactInfo are rendered by _Layout on every page, so this is
   shared chrome. These rules used to live in pages/home.css, which meant the
   contact modals were skinned on the landing page and left unstyled on the
   other eleven.

   SCOPED TO .modal ON PURPOSE. `.form-label` and `.form-control` are Bootstrap
   class names, and non-contact markup already uses them - Onboarding/Setup and
   Onboarding/Confirmed render plain Bootstrap cards containing
   `<input class="form-control">`. Those pages load no page stylesheet, so an
   unscoped rule here would beat bootstrap.min.css (we load after it) and
   restyle their inputs. `:where()` keeps the specificity at exactly what the
   bare selector had, so the result inside the modals is unchanged.

   Placed after the older declarations above so the component still wins where
   the two disagree, which reproduces what the landing page already rendered.
   -------------------------------------------------------------------------- */
.contact-modal-content {
    width: 420px;
    max-width: 90vw;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.contact-modal-body {
    padding: 28px;
    background-color: #fff;
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#contactForm {
    padding-top: 10px;
    width: 100%;
}

/* `.form-group` and `.required-indicator` are deliberately absent: the block
   above already defines them globally, and that predates this promotion. */
:where(.modal) .form-group:last-child {
    margin-bottom: 10px;
}

:where(.modal) .form-label {
    display: block;
    margin-bottom: 8px;
    color: #161616;
    font-weight: 500;
    font-size: 0.875rem;
    font-family: "IBM Plex Sans", Arial, sans-serif;
}

:where(.modal) .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #8d8d8d;
    border-radius: 4px;
    font-size: 0.875rem;
    font-family: "IBM Plex Sans", Arial, sans-serif;
    background-color: #fff;
    color: #161616;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

:where(.modal) .form-control::placeholder {
    color: #a8a8a8;
}

:where(.modal) .form-control:hover {
    border-color: #161616;
}

:where(.modal) .form-control:focus {
    outline: none;
    border-color: #0f62fe;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px #0f62fe;
}

.contact-modal-footer {
    padding: 16px 28px;
    background-color: #f4f4f4;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Responsive half of the contact modal component, moved with it out of
   pages/home.css. The .modal centering stays INSIDE its media query - hoisting
   a `display: flex` out of one is what once forced every modal open on load. */

@media (max-width: 768px) {

    .contact-modal-content {
        width: 95vw;
    }

    .contact-modal-body {
        padding: 20px;
    }

    .contact-modal-footer {
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {

    .modal {
        padding-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .contact-modal-content {
        width: 100vw;
        max-width: 100vw;
    }

    .contact-modal-body {
        padding: 16px;
    }
}

@media screen and (max-width: 768px) {

    .modal-content.contact-modal-content {
        width: 80%;
    }

    .modal {
        padding-top: 60px;
    }
}

@media screen and (max-width: 480px) {

    .modal-content.contact-modal-content {
        width: 95%;
    }

    .modal {
        padding-top: 20px;
    }

    #form-button-cancel-contact-info,
    #form-button-submit-contact-info {
        padding: 10px 14px;
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 400px) {

    input::placeholder {
        font-size: 0.7rem;
    }
}

#contact-info-header {
    padding: 10px;
    font-weight: bold;
}

@media screen and (max-width: 1300px) {

    #contact-info-header {
        padding:10px;
        font-weight:bold;
        font-size: 1rem;
    }
}

/* Contact form controls. These sat alongside the modal rules in contact.css /
   contact-info.css and must not be dropped when de-duplicating the modal. */
#form-button-cancel {
    float: left;
    margin-bottom: 20px;
}

#form-button-submit {
    float: right;
    margin-bottom: 20px;
}

#form-button-submit-contact:disabled,
#form-button-submit-contact-info:disabled {
    background-color: rgb(160,160,160);
    border: 1px solid #aaa;
    color: #e0e0e0;
    cursor: not-allowed;
    opacity: 0.6;
}

.result-message-container {
    text-align: center;
    margin-top: 7px;
    margin-bottom: 7px;
    padding: 7px;
}

.cf-turnstile {
    max-width: 100%;
    overflow: hidden;
}