/* Ms2Pay auth screens - same shape and type language as the public site. */

:root {
    --ms-orange: #d93c02;
    --ms-orange-soft: #f25c22;
    --ms-navy: #0b3a72;
    --ms-navy-deep: #06264c;
    --ms-ink: #0d1b2a;
    --ms-line: #e3e8f0;
}

h1, h2, h3, h4, h5, h6,
.brand-title,
.login-heading,
.form-heading,
.otp-brand-title,
.otp-form-heading,
button,
.btn,
input[type="submit"] {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    letter-spacing: -0.02em;
}

.brand-title,
.login-heading,
.form-heading,
.otp-brand-title {
    font-weight: 700 !important;
}

/* Eyebrow chips: pill -> squared small caps */
.brand-eyebrow,
.otp-brand-eyebrow,
.admin-eyebrow,
[class*="eyebrow"] {
    border-radius: 2px !important;
    text-transform: uppercase;
    letter-spacing: 0.16em !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea,
.form-control,
.input-wrap,
.input-shell {
    border-radius: 2px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--ms-orange) !important;
    box-shadow: 0 0 0 3px rgba(217, 60, 2, .12) !important;
    outline: none !important;
}

/* Buttons */
button,
.btn,
input[type="submit"],
#forget-submit,
.submit-btn,
.login-submit {
    border-radius: 2px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
#forget-submit:hover,
.submit-btn:hover,
.login-submit:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 rgba(217, 60, 2, .35) !important;
}

/* Panels and feature rows */
.brand-feature,
.feature-row,
.info-card,
[class*="-card"],
[class*="feature"] {
    border-radius: 3px !important;
}

/* The logo plate keeps its own soft corner */
.brand-logo img,
.login-logo img,
.otp-brand-logo img {
    border-radius: 0 !important;
}