/* Utility classes for common inline styles */

/* Text alignment */
.text-center {
    text-align: center;
}

/* Margins */
.mt-2 {
    margin-top: 2rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-0-5 {
    margin-top: 0.5rem;
}

.mb-0-5 {
    margin-bottom: 0.5rem;
}

.mr-10 {
    margin-right: 10px;
}

.mr-0-5 {
    margin-right: 0.5rem;
}

.ml-auto {
    margin-left: auto;
}

/* Display */
.d-none {
    display: none;
}

.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-20 {
    gap: 20px;
}

.gap-0-25 {
    gap: 0.25rem;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-center {
    align-items: center;
}

/* Width */
.min-width-auto {
    min-width: auto;
}

.min-width-400 {
    min-width: 400px;
}

.width-40 {
    width: 40px;
}

/* Padding */
.p-0-5 {
    padding: 0.5rem;
}

.p-1 {
    padding: 1rem;
}

.p-0-75-1 {
    padding: 0.75rem 1rem;
}

/* White space */
.white-space-nowrap {
    white-space: nowrap;
}

.word-break-all {
    word-break: break-all;
}

/* Background colors */
.bg-light {
    background-color: #f8f9fa;
}

.bg-white {
    background-color: #fff;
}

/* Border */
.border-radius-4 {
    border-radius: 4px;
}

.border-radius-10 {
    border-radius: 10px;
}

.border-1 {
    border: 1px solid #ddd;
}

/* Font */
.font-monospace {
    font-family: monospace;
}

.font-size-1-1 {
    font-size: 1.1rem;
}

/* Vertical align */
.vertical-align-middle {
    vertical-align: middle;
}

/* Flex utilities for form groups */
.form-group-auto {
    margin-left: auto;
    min-width: auto;
}

.form-group-flex {
    display: flex;
    gap: 0.25rem;
    align-items: flex-start;
}

/* Button utilities */
.btn-inline {
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

/* SVG icon utilities */
.svg-icon-inline {
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* QR Code container */
.qr-code-container {
    text-align: center;
    margin-bottom: 1.5rem;
}

.qr-code-image {
    max-width: 200px;
    height: auto;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}

/* Recovery codes display */
.recovery-codes-display {
    margin-top: 1rem;
    font-family: monospace;
    font-size: 1.1rem;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.recovery-code-item {
    margin-bottom: 0.5rem;
}

/* Billing table flex layout */
.billing-flex-layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.billing-table-section {
    flex: 1;
    min-width: 400px;
}

/* Mobile only */
.mobile-only {
    margin-top: 2rem !important;
}

/* Hidden form */
.hidden-form {
    display: none;
}

/* Alert margin */
.alert-mt-2 {
    margin-top: 2rem;
}

/* Account info margin */
.account-info-mt {
    margin-top: 2rem;
}

/* Button disabled state - used with data-disabled attribute */
[data-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}