/* ============================================================================
   App-style auth modals — login (#modal-signin, incl. forgot-password OTP) and
   register (#modal-signup, incl. OTP verify). Gives them the app's card look:
   rounded modal, gradient accent bar, soft-filled inputs with a blue focus ring,
   brand-blue links. Scoped by the modal IDs (global footer), so no other UI is
   touched. Brand: blue #1E3A8A + teal #14B8A6.
   ========================================================================== */

#modal-signin .modal-content,
#modal-signup .modal-content {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(2, 6, 23, 0.25);
    overflow: hidden;
}

/* Gradient accent strip across the top of the modal (app brand). */
#modal-signin .modal-content::before,
#modal-signup .modal-content::before {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(90deg, #2563EB, #14B8A6);
}

#modal-signin .modal-body,
#modal-signup .modal-body {
    padding: 26px 26px 30px;
}

#modal-signin h2,
#modal-signup h2 {
    color: #0F172A;
    font-weight: 800;
}

/* Inputs: soft-filled with a blue focus ring (matches app fields). */
#modal-signin .form-control,
#modal-signup .form-control,
#modal-signin .form-select,
#modal-signup .form-select {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px 14px;
    background: #F8FAFC;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#modal-signin .form-control:focus,
#modal-signup .form-control:focus,
#modal-signin .form-select:focus,
#modal-signup .form-select:focus {
    border-color: #1E3A8A;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}

/* Phone/OTP input-group prefixes blend with the rounded inputs. */
#modal-signin .input-group-text,
#modal-signup .input-group-text {
    border: 1px solid #E2E8F0;
    background: #F1F5F9;
    border-radius: 12px 0 0 12px;
    color: #334155;
}

/* Primary buttons: brand blue (already via theme) + comfy size. */
#modal-signin .btn-primary,
#modal-signup .btn-primary,
#modal-signin .submit_btn,
#modal-signup .submit_btn {
    background-color: #1E3A8A;
    border-color: #1E3A8A;
    padding: 10px 22px;
    font-weight: 600;
}
#modal-signin .btn-primary:hover,
#modal-signup .btn-primary:hover,
#modal-signin .submit_btn:hover,
#modal-signup .submit_btn:hover {
    background-color: #16306e;
    border-color: #16306e;
}

/* Inline "Sign up / Sign in / forgot" links in brand blue. */
#modal-signin .text-blue,
#modal-signup .text-blue,
#modal-signin a.hover,
#modal-signup a.hover {
    color: #1E3A8A !important;
    font-weight: 600;
}