/* Kettner Edelmetalle CI override for the MiroTalk login / waiting pages.
   Loaded after login.css so it wins. Gold (#C8A34E) on anthracite. */

:root {
    --kettner-gold: #c8a34e;
    --kettner-gold-light: #e2c47e;
    --kettner-gold-dark: #a87f2f;
    --kettner-ink: #0e0e11;
}

/* Full-page Kettner background with a dark overlay for legibility */
html,
body {
    min-height: 100vh;
}
body {
    background:
        linear-gradient(180deg, rgba(12, 12, 15, 0.82) 0%, rgba(12, 12, 15, 0.68) 45%, rgba(12, 12, 15, 0.5) 100%),
        url('../images/kettner-login-bg.png') center / cover no-repeat fixed !important;
}

/* Kill the blue geometric decoration */
.hero-figure,
.hero-figure-box {
    display: none !important;
}

/* Login card: dark glass, gold hairline */
.login-card,
#joinRoomForm.login-form-section {
    background: linear-gradient(160deg, rgba(16, 16, 20, 0.94) 40%, rgba(200, 163, 78, 0.1) 100%) !important;
    border: 1px solid rgba(200, 163, 78, 0.28) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(6px);
}

/* Lock / status icon → gold */
.login-icon {
    background: rgba(200, 163, 78, 0.14) !important;
    border: 1px solid rgba(200, 163, 78, 0.35) !important;
}
.login-icon i {
    color: var(--kettner-gold) !important;
}

/* Title accent underline */
.login-title {
    color: #fff !important;
}

/* Input focus + leading icons → gold */
.login-input-group i {
    color: var(--kettner-gold) !important;
}
.form-input:focus {
    border-color: var(--kettner-gold) !important;
    background: rgba(200, 163, 78, 0.06) !important;
}

/* Primary button → gold gradient, dark text */
.login-btn {
    background: linear-gradient(135deg, var(--kettner-gold-light), var(--kettner-gold-dark)) !important;
    color: #17130a !important;
    font-weight: 600 !important;
    border: none !important;
}
.login-btn:hover:not(:disabled) {
    filter: brightness(1.06);
}
.login-btn:focus-visible,
.form-input:focus-visible {
    outline: 2px solid var(--kettner-gold) !important;
}

/* Password toggle + misc accents */
.password-toggle:hover {
    color: var(--kettner-gold) !important;
}
a {
    color: var(--kettner-gold) !important;
}

/* Waiting room (whoAreYou) accents */
.spinner,
.loader,
[class*='waiting'] i {
    color: var(--kettner-gold) !important;
}

/* Kettner wordmark logo (replaces the MiroTalk cube). The source file
   images/logo.svg is swapped to the Kettner logo; here we just size the
   wide wordmark so it isn't squished into the square brand slot. */
#headerLogo,
.header-logo-image,
.brand img,
.footer-brand img {
    height: 42px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
}