/* Originally extracted from page-level inline style="" attributes and <style>
   blocks so style-src could drop 'unsafe-inline' (PBI 4218720 CSP hardening).
   Also now home to small, scoped fixes for pre-existing display bugs found
   during that work's QA pass (unrelated to CSP). */

/* Shared MFA / Auth submit-button layout, previously duplicated in an inline
   <style> block on Auth.cshtml, MFAStart.cshtml, MFAOtpWait.cshtml,
   MFAMessage.cshtml and MFAComplete.cshtml. #btnContainer/#btnSubmit are used
   only on these five pages. */
#btnContainer {
    display: inline;
    float: left;
    margin-top: 170px;
    margin-left: -6px;
}

#btnSubmit {
    float: right;
}

/* MFAStart.cshtml only: radio-option labels need their width unset. Scoped to
   .mfastart-options (added to MFAStart's <ul class="first">) rather than the
   original ".form-cntnr .body ul.first li label" selector, which would also
   match Auth.cshtml's unrelated markup.
   NOTE: that rescoping dropped specificity from (0,0,3,3) to (0,0,1,1),
   below THREE competing site.css rules that all still match these labels:
     site.css:317 .form-cntnr .body ul.first li label { width: 220px; }           (0,0,3,3)
     site.css:346 .form-cntnr .body li label { text-align:right; margin-right:5px; } (0,0,2,2)
     site.css:354 .form-cntnr .body li label { width: 220px; }                     (0,0,2,2)
   317 is the strongest of the three and was the one actually winning. With a
   fixed 220px right-aligned box, shorter label text (e.g. "SMS
   Authentication") sits further from its icon than longer text (e.g.
   "Voice Call Authentication"), producing visibly mismatched gaps.
   Fix: reuse the real ancestor classes already in this exact DOM chain
   (.form-cntnr > .body > ul.first.mfastart-options > li > ... > label) to
   reach (0,0,4,3), which unconditionally outranks all three — confirmed by
   simulating both the broken and fixed CSS against the real markup and
   stylesheets (computed label width 220px -> auto). Once width:auto wins,
   text-align is moot — an inline-block sized to its own content has no
   extra space to align within. Also adds a small, symmetric margin-left so
   both labels sit a consistent distance from their icon (the markup's own
   gap is a single &nbsp;, quite tight). */
.form-cntnr .body ul.mfastart-options.first li label {
    width: auto;
    margin-left: 15px;
}

/* MFAStart.cshtml only: the SMS/Voice Call radio buttons and their 70x70 icons
   are inline siblings with no vertical-align set, so the browser default
   (baseline) aligns the radio to the text baseline of the much taller icon,
   making the SMS row's radio button appear offset above the icon. Also zeroes
   out bootstrap.css's global `input[type="radio"] { margin: 4px 0 0; }`
   (line ~1178), which otherwise nudges the radio a few px below the
   vertical-align: middle position relative to the icon. */
.mfastart-options input[type="radio"],
.mfastart-options img {
    vertical-align: middle;
}

.mfastart-options input[type="radio"] {
    margin: 0;
}

.continue-full-width {
    width: 100%;
}

.continue-half-width {
    width: 45%;
}

.inline-label {
    display: inline;
}

.inline-label-spaced {
    display: inline;
    margin-right: 8px;
}

.mfa-row-ml-10 {
    margin-left: 10px;
}

.mfa-row-ml-15 {
    margin-left: 15px;
}

.mfa-row-ml-20 {
    margin-left: 20px;
}

.mfa-subtitle-spacing {
    margin-top: 80px;
    margin-bottom: 40px;
}

.mfa-header-padding {
    padding: 5px;
}

.mfa-controls-center {
    display: table;
    margin: 0 auto;
}

.mfa-spacer-50 {
    display: block;
    width: 50px;
}

.mfa-li-center {
    text-align: center;
}

/* PaymentInfo.cshtml only: #ccpass (the password-masked mirror of
   #CreditCardNumber, swapped in via JS once the card number has a value)
   renders visible on page load despite having class="ccpass hide".
   bootstrap.css's `input[type="password"] { display: inline-block; ... }`
   (line ~1088-1113) has higher specificity (0,1,1) than .hide's single-class
   selector (0,1,0), so it wins the cascade for display regardless of .hide
   appearing later in the file — CSS resolves conflicting declarations by
   specificity, not source order. Result: both the Card Number field and its
   masked mirror render stacked until a blur event sets an inline style
   (which always wins over any stylesheet rule). #ccpass, an ID selector
   (1,0,0), unconditionally outranks the bootstrap rule. */
#ccpass.hide {
    display: none;
}