/* ================================================
   2FA Custom CSS - Parent Classes Usage Examples
   ================================================ */

/* FontAwesome Icon Fix */
.fas {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.twofa-verify-page .justify-content-center .col-md-6{
    margin:auto !important;
    float:none !important
}

.twofa-verify-page .twofa-verify-card{
    background-color:white;
    padding:20px;
    box-shadow:0px 0px 40px rgba(0, 0, 0, .1)
}

.twofa-verify-page .twofa-verify-card .twofa-verify-header{
    padding-bottom:10px;
    padding-top:10px;
}

.twofa-verify-page .twofa-verify-card .twofa-verify-header h4{
    font-size:16px !important
}

.twofa-verify-page .twofa-verify-card .twofa-verify-body .lead{
    font-weight:bold;
    letter-spacing:0px;
    text-align: left;
}

.twofa-verify-page .twofa-verify-card .twofa-verify-body .form-label.h6{
    font-size:14px
}

.twofa-verify-page .twofa-verify-card .twofa-verify-body .twofa-options-section .info-box{
    padding:8px 15px 10px;
}

.twofa-verify-page .twofa-verify-card .twofa-verify-body .twofa-options-section .info-box i{
    font-size:14px;
    margin-right:5px
}

.twofa-verify-page .twofa-verify-card .twofa-verify-body .twofa-submit-section button{
    width:100%;
    margin-top:20px;
    height:45px;
    margin-bottom:10px;
    font-size:16px;
    font-weight:600
}


.twofa-setup-page .twofa-setup-card .twofa-setup-header{
    border-radius:4px !important;
    padding:10px
}

.twofa-qr-section .setup-section .qr-code-wrapper{
    margin-bottom:20px
}

.twofa-qr-section .qr-container{
    background:white !important
}

.twofa-qr-section .setup-section .secret-container .input-group{
    display: inline-flex;
}

.twofa-qr-section .setup-section .secret-container .input-group button{
    height:34px
}

.twofa-qr-section .setup-section .secret-container{
    margin-bottom:10px
}

.twofa-verify-form button{height: 45px;margin-top: 10px;font-size: 16px;font-weight: b;}

.twofa-recovery-section .recovery-codes-container small{
    font-size:14px !important
}


.twofa-recovery-section .recovery-codes-container .recovery-codes{
    margin-top:10px
}

small, .small{ font-size:14px !important}

.card.border-warning{
    padding:15px;
}

.border-warning .card-header.bg-warning{
    padding:7px 15px;
    margin-bottom:20px;
}

.card-header.bg-warning h6{
   font-size:14px !important 
}

.card.border-warning .card-body{
    display: grid;
    gap:20px;
    word-wrap: break-word;
    word-break: break-all;
}




/* ===============================================
   2FA SETUP PAGE CUSTOMIZATION
   =============================================== */

/* Main setup page container */
.twofa-setup-page {
    /* Example: Change background */
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    /* min-height: 100vh; */
}

/* Setup container wrapper */
.twofa-setup-container {
    /* Example: Add padding or spacing */
    /* padding: 20px 0; */
}

/* Main setup card */
.twofa-setup-card {
    /* Example: Custom card styling */
    /* border-radius: 20px; */
    /* box-shadow: 0 20px 40px rgba(0,0,0,0.1); */
}

/* Setup card header */
.twofa-setup-header {
    /* Example: Custom header colors */
    /* background: linear-gradient(45deg, #007bff, #0056b3); */
    /* border-radius: 20px 20px 0 0; */
}

/* Setup card body */
.twofa-setup-body {
    /* Example: Custom body styling */
    /* background: #f8f9fa; */
    /* padding: 40px; */
}

/* Info alert section */
.twofa-setup-info {
    /* Example: Custom info styling */
    /* border-left: 5px solid #007bff; */
    /* background: rgba(0,123,255,0.1); */
}

/* QR code section */
.twofa-qr-section {
    /* Example: QR section styling */
    /* background: white; */
    /* border-radius: 15px; */
    /* padding: 20px; */
    /* margin-bottom: 20px; */
}

/* Recovery codes section */
.twofa-recovery-section {
    /* Example: Recovery section styling */
    /* background: white; */
    /* border-radius: 15px; */
    /* padding: 20px; */
}

/* Verify form in setup */
.twofa-verify-form {
    /* Example: Form styling */
    /* background: rgba(255,255,255,0.8); */
    /* padding: 20px; */
    /* border-radius: 10px; */
}

/* ===============================================
   2FA VERIFY PAGE CUSTOMIZATION
   =============================================== */

/* Main verify page container */
.twofa-verify-page {
    /* Example: Change verify page background */
    /* background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); */
    /* min-height: 100vh; */
    /* display: flex; */
    /* align-items: center; */
}

/* Verify container wrapper */
.twofa-verify-container {
    /* Example: Center the content */
    /* width: 100%; */
}

/* Main verify card */
.twofa-verify-card {
    /* Example: Custom verify card */
    /* border-radius: 25px; */
    /* backdrop-filter: blur(10px); */
    /* background: rgba(255,255,255,0.9); */
}

/* Verify card header */
.twofa-verify-header {
    /* Example: Custom header */
    /* background: linear-gradient(45deg, #ffc107, #e0a800); */
    /* border-radius: 25px 25px 0 0; */
}

/* Verify card body */
.twofa-verify-body {
    /* Example: Custom body */
    /* padding: 40px; */
}

/* Intro section */
.twofa-verify-intro {
    /* Example: Custom intro styling */
    /* margin-bottom: 30px; */
}

/* Verify form */
.twofa-verify-form {
    /* Example: Form container styling */
    /* background: rgba(0,123,255,0.05); */
    /* padding: 25px; */
    /* border-radius: 15px; */
}

/* Input section */
.twofa-input-section {
    /* Example: Input area styling */
    /* background: white; */
    /* padding: 20px; */
    /* border-radius: 10px; */
    /* box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); */
}

/* Options section */
.twofa-options-section {
    /* Example: Options styling */
    /* margin: 20px 0; */
}

/* Submit section */
.twofa-submit-section {
    /* Example: Submit button area */
    /* margin-top: 25px; */
}

/* Help section */
.twofa-help-section {
    /* Example: Help text styling */
    /* background: rgba(108,117,125,0.1); */
    /* padding: 15px; */
    /* border-radius: 8px; */
}

/* ===============================================
   RESPONSIVE CUSTOMIZATION EXAMPLES
   =============================================== */

@media (max-width: 768px) {
    .twofa-setup-page,
    .twofa-verify-page {
        /* Mobile adjustments */
        /* padding: 10px; */
    }
    
    .twofa-setup-body,
    .twofa-verify-body {
        /* Mobile padding */
        /* padding: 20px; */
    }
}

/* ===============================================
   DARK MODE EXAMPLE
   =============================================== */

/* Uncomment for dark mode */
/*
body.dark-mode .twofa-setup-page,
body.dark-mode .twofa-verify-page {
    background: #1a1a1a;
    color: #fff;
}

body.dark-mode .twofa-setup-card,
body.dark-mode .twofa-verify-card {
    background: #2d2d2d;
    border: 1px solid #444;
}

body.dark-mode .twofa-setup-header,
body.dark-mode .twofa-verify-header {
    background: #333;
    color: #fff;
}
*/

/* ===============================================
   ANIMATION EXAMPLES
   =============================================== */

/* Page entrance animation */
/*
.twofa-setup-card,
.twofa-verify-card {
    animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
*/