/**
 * BSX 2FA Styles
 * Matches bsx design system:
 * - Font: Palatino Linotype
 * - Dark backgrounds: #21201e / #030204
 * - Colors: #ffcc33 (accent), #f1eee7 (text)
 * - Input: transparent, bottom border only #555
 * - Sizes in rem
 * - Border radius: 3–6px
 *
 * Enqueue this file from bsx.php or add to your main stylesheet.
 */

/* =========================================================================
   Variables
   ========================================================================= */

:root {
    --bsx-2fa-bg:            #21201e;
    --bsx-2fa-bg-grey:       #37353a;
    --bsx-2fa-bg-deep:       #030204;
    --bsx-2fa-accent:        #ffcc33;
    --bsx-2fa-text:          #f1eee7;
    --bsx-2fa-text-muted:    rgba(241, 238, 231, 0.55);
    --bsx-2fa-border:        #555;
    --bsx-2fa-error-bg:      rgba(220, 60, 60, 0.12);
    --bsx-2fa-error-color:   #e07070;
    --bsx-2fa-success-bg:    rgba(80, 180, 100, 0.12);
    --bsx-2fa-success-color: #7ecb8f;
    --bsx-2fa-font:          'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
    --bsx-2fa-radius-sm:     3px;
    --bsx-2fa-radius-md:     5px;
    --bsx-2fa-radius-lg:     6px;
    --bsx-2fa-transition:    0.2s ease;
}

/* =========================================================================
   Shared wrapper
   ========================================================================= */

.bsx-2fa-verify,
.bsx-2fa-setup {
    font-family:  var(--bsx-2fa-font);
    color:        var(--bsx-2fa-text);
    background:   transparent;
    width:        100%;
    max-width:    420px;
    margin:       0 auto;
    padding:      0;
}

/* =========================================================================
   Titles
   ========================================================================= */

.bsx-2fa-verify h3,
.bsx-2fa-setup__title {
    font-family:  var(--bsx-2fa-font);
    font-size:    1.2rem;
    font-weight:  normal;
    color:        var(--bsx-2fa-accent);
    margin:       0 0 0.75rem 0;
    letter-spacing: 0.03em;
}

/* =========================================================================
   Intro / instruction text
   ========================================================================= */

.bsx-2fa-instruction,
.bsx-2fa-setup__intro {
    font-size:   0.9rem;
    color:       var(--bsx-2fa-text-muted);
    margin:      0 0 1.25rem 0;
    line-height: 1.6;
}

/* =========================================================================
   Forms
   ========================================================================= */

.bsx-2fa-form,
.bsx-2fa-setup__form {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

/* =========================================================================
   Input fields
   Bottom border only — matches bsx convention
   ========================================================================= */

.bsx-2fa-field,
.bsx-2fa-setup__field {
    display:       flex;
    flex-direction: column;
    gap:           0.35rem;
}

.bsx-2fa-field label,
.bsx-2fa-setup__field label {
    font-size:      0.85rem;
    color:          var(--bsx-2fa-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bsx-2fa-field input[type="text"],
.bsx-2fa-setup__field input[type="text"] {
    font-family:      var(--bsx-2fa-font);
    font-size:        1rem;
    color:            var(--bsx-2fa-text);
    background:       transparent;
    border:           none;
    border-bottom:    1px solid var(--bsx-2fa-border);
    border-radius:    0;
    padding:          0.5rem 0;
    width:            100%;
    outline:          none;
    transition:       border-color var(--bsx-2fa-transition);
    letter-spacing:   0.15em; /* aids readability of numeric codes */
}

.bsx-2fa-field input[type="text"]:focus,
.bsx-2fa-setup__field input[type="text"]:focus {
    border-bottom-color: var(--bsx-2fa-accent);
}

.bsx-2fa-field input[type="text"]::placeholder,
.bsx-2fa-setup__field input[type="text"]::placeholder {
    color:          var(--bsx-2fa-border);
    letter-spacing: 0.05em;
}

/* =========================================================================
   Primary submit button
   ========================================================================= */

.bsx-2fa-submit,
.bsx-2fa-setup__submit {
    font-family:    var(--bsx-2fa-font);
    font-size:      1rem;
    color:          var(--bsx-2fa-bg-deep);
    background:     var(--bsx-2fa-accent);
    border:         none;
    border-radius:  var(--bsx-2fa-radius-md);
    padding:        0.65rem 1.5rem;
    cursor:         pointer;
    transition:     background var(--bsx-2fa-transition), opacity var(--bsx-2fa-transition);
    align-self:     flex-start;
    letter-spacing: 0.03em;
}

.bsx-2fa-submit:hover,
.bsx-2fa-setup__submit:hover {
    background: #e6b82e;
}

.bsx-2fa-submit:active,
.bsx-2fa-setup__submit:active {
    opacity: 0.85;
}

/* =========================================================================
   Link-style buttons (resend, cancel, change method)
   ========================================================================= */

.bsx-2fa-setup__link-btn {
    font-family:  var(--bsx-2fa-font);
    font-size:    0.9rem;
    color:        var(--bsx-2fa-text-muted);
    background:   none;
    border:       none;
    padding:      0;
    cursor:       pointer;
    text-decoration: underline;
    text-decoration-color: var(--bsx-2fa-border);
    transition:   color var(--bsx-2fa-transition);
}

.bsx-2fa-setup__link-btn:hover {
    color: var(--bsx-2fa-text);
}

.bsx-2fa-setup__link-btn--danger {
    color: var(--bsx-2fa-error-color);
}

.bsx-2fa-setup__link-btn--danger:hover {
    color: #e07070;
}

/* =========================================================================
   Inline text links (resend, back to login)
   ========================================================================= */

.bsx-2fa-resend,
.bsx-2fa-back,
.bsx-2fa-setup__resend,
.bsx-2fa-setup__cancel {
    margin-top: 0.25rem;
}

.bsx-2fa-resend a,
.bsx-2fa-back a {
    font-size:       0.9rem;
    color:           var(--bsx-2fa-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--bsx-2fa-border);
    transition:      color var(--bsx-2fa-transition);
}

.bsx-2fa-resend a:hover,
.bsx-2fa-back a:hover {
    color: var(--bsx-2fa-text);
}

/* =========================================================================
   Error and success messages
   ========================================================================= */

.bsx-2fa-error {
    font-size:     0.9rem;
    color:         var(--bsx-2fa-error-color);
    background:    var(--bsx-2fa-error-bg);
    border-left:   3px solid var(--bsx-2fa-error-color);
    border-radius: var(--bsx-2fa-radius-sm);
    padding:       0.6rem 0.85rem;
    margin-bottom: 0.75rem;
}

.bsx-2fa-success {
    font-size:     0.9rem;
    color:         var(--bsx-2fa-success-color);
    background:    var(--bsx-2fa-success-bg);
    border-left:   3px solid var(--bsx-2fa-success-color);
    border-radius: var(--bsx-2fa-radius-sm);
    padding:       0.6rem 0.85rem;
    margin-bottom: 0.75rem;
}

/* =========================================================================
   Method selection (choose TOTP or Email)
   ========================================================================= */

.bsx-2fa-setup__methods {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.bsx-2fa-setup__method {
    display:       flex;
    align-items:   flex-start;
    gap:           0.85rem;
    padding:       0.9rem 1rem;
    border:        1px solid var(--bsx-2fa-border);
    border-radius: var(--bsx-2fa-radius-lg);
    cursor:        pointer;
    transition:    border-color var(--bsx-2fa-transition), background var(--bsx-2fa-transition);
}

.bsx-2fa-setup__method:hover {
    border-color: var(--bsx-2fa-accent);
    background:   rgba(255, 204, 51, 0.04);
}

.bsx-2fa-setup__method input[type="radio"] {
    margin-top:   0.25rem;
    accent-color: var(--bsx-2fa-accent);
    flex-shrink:  0;
}

.bsx-2fa-setup__method input[type="radio"]:checked + .bsx-2fa-setup__method-content strong {
    color: var(--bsx-2fa-accent);
}

.bsx-2fa-setup__method-content {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.bsx-2fa-setup__method-content strong {
    font-size:   1rem;
    font-weight: normal;
    color:       var(--bsx-2fa-text);
    transition:  color var(--bsx-2fa-transition);
}

.bsx-2fa-setup__method-content span {
    font-size:  0.85rem;
    color:      var(--bsx-2fa-text-muted);
    line-height: 1.5;
}

/* Highlight selected method card */
.bsx-2fa-setup__method:has(input[type="radio"]:checked) {
    border-color: var(--bsx-2fa-accent);
    background:   rgba(255, 204, 51, 0.06);
}

/* =========================================================================
   QR code block
   ========================================================================= */

.bsx-2fa-setup__qr {
    margin:     1rem 0;
    text-align: center;
}

.bsx-2fa-setup__qr img {
    border:        4px solid var(--bsx-2fa-text);
    border-radius: var(--bsx-2fa-radius-md);
    display:       inline-block;
}

.bsx-2fa-setup__manual-key {
    font-size:   0.85rem;
    color:       var(--bsx-2fa-text-muted);
    text-align:  center;
    margin:      0 0 1rem 0;
}

.bsx-2fa-setup__manual-key code {
    display:          block;
    font-family:      monospace;
    font-size:        0.95rem;
    color:            var(--bsx-2fa-accent);
    letter-spacing:   0.2em;
    margin-top:       0.4rem;
    word-break:       break-all;
}

/* =========================================================================
   Manage screen (2FA active status)
   ========================================================================= */

.bsx-2fa-setup--manage .bsx-2fa-setup__status {
    display:       flex;
    align-items:   center;
    gap:           0.6rem;
    font-size:     0.95rem;
    color:         var(--bsx-2fa-text);
    padding:       0.75rem 1rem;
    border:        1px solid var(--bsx-2fa-border);
    border-radius: var(--bsx-2fa-radius-lg);
    margin-bottom: 1rem;
}

.bsx-2fa-setup--manage .bsx-2fa-setup__status--active {
    border-color: var(--bsx-2fa-success-color);
    background:   var(--bsx-2fa-success-bg);
}

.bsx-2fa-setup__status-icon {
    font-size: 1rem;
    color:     var(--bsx-2fa-success-color);
}

.bsx-2fa-setup__manage-actions {
    display:     flex;
    gap:         1.25rem;
    align-items: center;
    flex-wrap:   wrap;
}

/* =========================================================================
   Logged in state
   ========================================================================= */

.bsx-2fa-logged-in {
    font-family: var(--bsx-2fa-font);
    color:       var(--bsx-2fa-text);
    font-size:   1rem;
}

.bsx-2fa-logged-in p {
    margin-bottom: 1rem;
}

.bsx-2fa-btn {
    display:        inline-block;
    font-family:    var(--bsx-2fa-font);
    font-size:      0.95rem;
    color:          var(--bsx-2fa-bg-deep);
    background:     var(--bsx-2fa-accent);
    border-radius:  var(--bsx-2fa-radius-md);
    padding:        0.55rem 1.25rem;
    text-decoration: none;
    transition:     background var(--bsx-2fa-transition);
}

.bsx-2fa-btn:hover {
    background: #e6b82e;
    color:      var(--bsx-2fa-bg-deep);
}

.bsx-2fa-btn--secondary {
    background:  transparent;
    color:       var(--bsx-2fa-text-muted);
    border:      1px solid var(--bsx-2fa-border);
}

.bsx-2fa-btn--secondary:hover {
    color:        var(--bsx-2fa-text);
    border-color: var(--bsx-2fa-text-muted);
    background:   transparent;
}

/* =========================================================================
   Setup nudge
   ========================================================================= */

.bsx-2fa-nudge {
    font-family: var(--bsx-2fa-font);
    color:       var(--bsx-2fa-text-muted);
    font-size:   0.95rem;
}

.bsx-2fa-nudge p {
    margin-bottom: 0.85rem;
    line-height:   1.6;
}

/* =========================================================================
   Screen reader only
   ========================================================================= */

.screen-reader-text {
    position:  absolute;
    width:     1px;
    height:    1px;
    padding:   0;
    margin:    -1px;
    overflow:  hidden;
    clip:      rect(0, 0, 0, 0);
    border:    0;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media ( max-width: 480px ) {

    .bsx-2fa-verify,
    .bsx-2fa-setup {
        max-width: 100%;
        padding:   0 0.5rem;
    }

    .bsx-2fa-setup__method {
        padding: 0.75rem;
    }

    .bsx-2fa-setup__manage-actions {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.75rem;
    }
}