/* ------------------------------------------------------------------------
 * Bouvy-huisstijl voor de MiroTalk-pagina's die GEEN thema-variabelen kennen:
 * de inlogpagina en de wachtpagina /whoAreYou/<kamer>, dus het eerste dat een
 * klant ziet. De gesprekskamer zelf gaat via het themes-blok in config.js.
 *
 * 🚨 WAAROM DIT BESTAND Translate.css HEET.
 * Er is in MiroTalk geen haak om een eigen stylesheet in te laden: HtmlInjector
 * vervangt alleen {{OG_*}}-plaatshouders. De enige manier is een bestand
 * overschrijven dat die pagina's al laden. Translate.css is daarvoor gekozen
 * omdat het er maar 22 regels heeft (hieronder ongewijzigd overgenomen), tegen
 * 262 en 342 regels voor de twee view-bestanden. Hoe minder regels je bevriest,
 * hoe kleiner de kans dat je bij een update stil iets kwijtraakt.
 *
 * ⚠️ BIJ EEN UPDATE VAN MIROTALK: kijk of de originele Translate.css hierboven
 * nog klopt en of de klassenamen hieronder nog bestaan.
 *   docker run --rm --entrypoint cat mirotalk/sfu:latest /src/public/css/Translate.css
 *
 * 🔑 Bewust GEEN !important op de body-achtergrond. Room.html laadt dit bestand
 * ook, en daar zet Room.js de achtergrond als inline stijl uit het thema. Een
 * inline stijl wint van een stylesheet, dus de gesprekskamer blijft van het
 * thema. Op de inlog- en wachtpagina wint deze regel wél, want dit bestand
 * wordt ná landing.css geladen.
 *
 * Huisstijl: forest-groen #14463C / #0E3329 / #082420 dominant, koper #C99879
 * uitsluitend als accent (ongeveer 90/10). Koppen Montserrat, tekst
 * Quattrocento Sans.
 * ---------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Quattrocento+Sans:wght@400;700&display=swap');

/* --- origineel Translate.css, ongewijzigd ------------------------------- */

#google_translate_element {
    display: none !important;
}

body {
    top: 0 !important;
}

/* --- vanaf hier Bouvy --------------------------------------------------- */

:root {
    --bouvy-groen: #14463c;
    --bouvy-groen-diep: #0e3329;
    --bouvy-groen-donker: #082420;
    --bouvy-koper: #c99879;
    --bouvy-koper-hover: #b07f60;
}

body {
    background: linear-gradient(158deg, var(--bouvy-groen) 0%, var(--bouvy-groen-donker) 100%);
    background-attachment: fixed;
    font-family: 'Quattrocento Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: rgba(255, 255, 255, 0.82);
}

h1,
h2,
h3,
.waiting-title,
.login-title {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    color: #fff;
}

/* Panelen: 24px ronding, groen vlak, koperen haarlijn als enige accent */
.waiting-card,
.login-card {
    background: linear-gradient(158deg, rgba(14, 51, 41, 0.92) 0%, rgba(8, 36, 32, 0.92) 100%);
    border: 1px solid rgba(201, 152, 121, 0.3);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.waiting-icon {
    background: rgba(201, 152, 121, 0.12);
    border: 1px solid rgba(201, 152, 121, 0.32);
    color: var(--bouvy-koper);
}

.waiting-icon i,
.waiting-room-name,
.host-login-link a {
    color: var(--bouvy-koper);
}

.waiting-spinner-dot {
    background: var(--bouvy-koper);
}

.waiting-description,
.waiting-status,
.waiting-elapsed {
    color: rgba(255, 255, 255, 0.7);
}

/* Knoppen: pill, koper, witte tekst */
.login-btn,
.join-room-btn {
    background: var(--bouvy-koper);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.login-btn:hover,
.join-room-btn:hover {
    background: var(--bouvy-koper-hover);
}

.random-room-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(201, 152, 121, 0.28);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
}

.random-room-btn:hover {
    background: rgba(201, 152, 121, 0.18);
}

/* Invoervelden: 10px ronding, koperen focus in plaats van blauw */
.form-input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(200, 190, 178, 0.28);
    border-radius: 10px;
    color: #fff;
    font-family: 'Quattrocento Sans', sans-serif;
}

.form-input:focus {
    border-color: var(--bouvy-koper);
    box-shadow: 0 0 0 3px rgba(201, 152, 121, 0.22);
    outline: none;
}

/* --- de echte achtergrondlaag ------------------------------------------
 * Gemeten met de browser: body kleurt niet zichtbaar, want .body-wrap ligt
 * er met #11151b overheen, over de volle hoogte. Wie alleen body pakt,
 * verandert niets zichtbaars. Daarom allebei. */
body,
body.is-boxed {
    background: linear-gradient(158deg, var(--bouvy-groen) 0%, var(--bouvy-groen-donker) 100%);
    background-attachment: fixed;
}

.body-wrap {
    background: linear-gradient(158deg, var(--bouvy-groen) 0%, var(--bouvy-groen-donker) 100%);
    background-attachment: fixed;
}

/* De blauwe blokkenillustratie van MiroTalk. Tien gekleurde vormen die de
 * halve breedte innemen en niets met ons merk te maken hebben. Weg, en de
 * kaart daarna centreren, want die stond alleen links omdat de illustratie
 * de rechterhelft vulde. */
.hero-figure,
.hero-figure-box,
[class*='hero-figure-box'] {
    display: none !important;
}

/* ⚠️ Hier is !important nodig, en dat is gemeten en niet uit gewoonte: zonder
 * de vlag bleef .hero-figure gewoon staan, want landing.css zet hem met een
 * specifiekere selector. */
.center-card-section .hero-inner,
.hero.section .hero-inner {
    justify-content: center !important;
}

/* Voettekst: de sociale knoppen, de sponsorknop, de GitHub-teller en de
 * contactgegevens van de maker horen niet op een pagina die een klant ziet.
 * De copyrightregel blijft staan: dit is AGPL-software en die vermelding is
 * netjes. */
.footer-social-links,
.github-button,
.footer-links {
    display: none !important;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.78rem;
}

/* Audiospeler op de wachtpagina, stond in het blauw van MiroTalk */
.waiting-audio-player {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(201, 152, 121, 0.22);
}

.waiting-audio-btn {
    background: rgba(201, 152, 121, 0.16);
    color: var(--bouvy-koper);
}

.waiting-audio-btn:hover {
    background: rgba(201, 152, 121, 0.28);
}

.waiting-audio-progress {
    background: var(--bouvy-koper);
}

/* De kamernaam stond als blauwe pil midden in een groene kaart. Alleen de
 * tekstkleur zetten was niet genoeg: het blauw zit op de achtergrond. */
.waiting-room-name {
    background: rgba(201, 152, 121, 0.14);
    border: 1px solid rgba(201, 152, 121, 0.3);
    border-radius: 999px;
    color: var(--bouvy-koper);
}

/* De ring om het icoon pulseerde blauw. De animatie heet iconPulse en staat in
 * waitingRoom.css; omdat dit bestand later laadt, wint deze herdefinitie. */
@keyframes iconPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(201, 152, 121, 0.28);
    }
    50% {
        box-shadow: 0 0 0 14px rgba(201, 152, 121, 0);
    }
}

/* Het slotje op de inlogpagina stond nog in MiroTalk-blauw (#4678f9) */
.login-icon {
    background: rgba(201, 152, 121, 0.12);
    border-color: rgba(201, 152, 121, 0.3);
}

.login-icon i,
.login-icon .fa-lock {
    color: var(--bouvy-koper);
}

/* Het logo. De plek was gemaakt voor het vierkante icoontje van MiroTalk (28x32);
 * ons woordmerk is breed en heeft hoogte nodig om leesbaar te zijn. Gemeten: onder
 * de 40px valt "BOUVY ADVIES" weg. */
.header-brand img,
.footer-brand img {
    height: 44px;
    width: auto;
}