/*
 * Arkon KCS Login — Frontend Styles
 * Minimal structural CSS only. Theme handles all visual styling.
 * Use these class names in your theme CSS to style the components.
 */

.mbtdl-btn {
    display: inline-block;
    padding: 0.5em 1.2em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-size: 1em;
}

.mbtdl-btn-discord {}   /* Discord login button */
.mbtdl-btn-logout {}    /* Logout button */
.mbtdl-btn-primary {}   /* Primary action button */

.mbtdl-discord-icon {
    margin-right: 0.4em;
}

.mbtdl-login-status {
    display: flex;
    align-items: center;
    gap: 1em;
}

.mbtdl-member-profile {
    display: flex;
    gap: 1em;
    align-items: flex-start;
}

.mbtdl-avatar img {
    border-radius: 50%;
}

.mbtdl-member-info {}
.mbtdl-discord-name {}
.mbtdl-rsi-handle {}
.mbtdl-rsi-missing {}
.mbtdl-synced-at { font-size: 0.85em; opacity: 0.7; }

.mbtdl-error {}
.mbtdl-notice {}
.mbtdl-notice-success {}

.mbtdl-rsi-form {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    margin-top: 0.5em;
}

.mbtdl-rsi-form--inline {
    display: inline-flex;
    margin-top: 0;
}

.mbtdl-input {
    flex: 1;
    min-width: 200px;
    padding: 0.4em 0.7em;
    font-size: 1em;
}