/* Keep the dialog independent of the landing page's viewport-based typography. */
#callRequestModal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 25, 43, .6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #162b43;
    font-family: Golos, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color-scheme: light;
}

#callRequestModal.show { display: flex; }
#callRequestModal, #callRequestModal * { box-sizing: border-box; }
#callRequestModal [hidden] { display: none !important; }

#callRequestModal .callback-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 36px 32px 28px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(4, 18, 34, .24);
    animation: callback-appear .18s ease-out;
}

#callRequestModal .callback-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f2f5f8;
    color: #68798a;
    cursor: pointer;
    transition: background .15s, color .15s;
}

#callRequestModal .callback-close:hover { background: #e5ebf1; color: #162b43; }
#callRequestModal svg { display: block; flex-shrink: 0; }

#callRequestModal .callback-brand {
    margin: 0 38px 20px 0;
    color: #52677b;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

#callRequestModal .callback-title {
    margin: 0 0 10px;
    color: #162b43;
    font-size: 28px;
    font-weight: 600;
    line-height: 35px;
    letter-spacing: -.6px;
}

#callRequestModal .callback-description {
    margin: 0 0 26px;
    color: #667789;
    font-size: 14px;
    line-height: 22px;
}

#callRequestModal .callback-form { margin: 0; }
#callRequestModal .callback-field { margin-bottom: 18px; }

#callRequestModal .callback-label {
    display: block;
    margin: 0 0 7px;
    color: #263c52;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

#callRequestModal .callback-optional { margin-left: 5px; color: #8995a2; font-weight: 400; }

#callRequestModal .callback-input {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #f8fafc;
    color: #162b43;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
    -webkit-appearance: none;
}

#callRequestModal .callback-input::placeholder { color: #97a3b0; opacity: 1; }
#callRequestModal .callback-input:focus { border-color: #486f99; background: #fff; box-shadow: 0 0 0 3px #e8eff7; }

#callRequestModal .callback-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    margin: 6px 0 0;
    padding: 13px 18px;
    border: 1px solid #18334f;
    border-radius: 9px;
    background: #18334f;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

#callRequestModal .callback-submit:hover { background: #254969; border-color: #254969; }
#callRequestModal .callback-submit:disabled { cursor: wait; opacity: .7; }
#callRequestModal :focus-visible { outline: 2px solid #486f99 !important; outline-offset: 3px; }

#callRequestModal .callback-contact {
    margin-top: 24px;
    padding-top: 21px;
    border-top: 1px solid #e9edf2;
    text-align: center;
}

#callRequestModal .callback-contact-label { margin: 0 0 5px; color: #788796; font-size: 12px; line-height: 18px; }
#callRequestModal .callback-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #18334f;
    font-size: 21px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -.3px;
    text-decoration: none;
    white-space: nowrap;
}

#callRequestModal .callback-phone svg { color: #788b9d; }
#callRequestModal .callback-phone:hover { color: #426d95; }
#callRequestModal .callback-status { margin: 0 0 18px; padding: 14px 16px; border-radius: 9px; font-size: 14px; line-height: 22px; }
#callRequestModal .callback-status p { margin: 0; }
#callRequestModal .callback-status strong { display: block; margin-bottom: 3px; font-weight: 600; }
#callRequestModal .callback-success { border: 1px solid #d5e8df; background: #f0f7f3; color: #285741; }
#callRequestModal .callback-error { border: 1px solid #edd9d5; background: #fcf4f2; color: #8e4237; }

@keyframes callback-appear {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    #callRequestModal { padding: 14px; }
    #callRequestModal .callback-card { padding: 30px 24px 24px; border-radius: 16px; max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); }
    #callRequestModal .callback-title { font-size: 26px; line-height: 33px; }
}

@media (max-width: 360px) {
    #callRequestModal .callback-card { padding-right: 20px; padding-left: 20px; }
    #callRequestModal .callback-phone { font-size: 19px; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    #callRequestModal .callback-card { animation: none; }
    #callRequestModal * { transition: none; }
}

/* Adapt to the visible viewport, including the on-screen keyboard. */
#callRequestModal { bottom: auto; height: 100vh; height: 100dvh; }
#callRequestModal .callback-card { max-height: 100%; }
#callRequestModal .callback-close { width: 44px; height: 44px; top: 10px; right: 10px; }
#callRequestModal .callback-title { padding-right: 28px; }
#callRequestModal .callback-hint { margin: -8px 0 18px; color: #52677b; font-size: 12px; line-height: 18px; }