/*
 * Kitarita overrides for MiroTalk.
 * Light marketing chrome: only body.has-animations (landing / newcall / waiting).
 * Room client keeps MiroTalk theme vars (dark-green) — do NOT force a light body bg there.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
    --kit-brand: #0f6b4c;
    --kit-brand-soft: #3d8b7a;
    --kit-accent: #c47a6a;
    --kit-bg: #f3f6f4;
    --kit-ink: #1a2420;
    --kit-muted: #5a6b63;
    --kit-surface: #ffffff;
    --kit-line: #c9d5ce;
}

html {
    font-family: 'Manrope', system-ui, sans-serif;
}

/* ——— Landing / join / waiting (light surface) ——— */
body.has-animations {
    font-family: 'Manrope', system-ui, sans-serif !important;
    color: var(--kit-ink) !important;
    background:
        radial-gradient(1200px 600px at 10% -10%, #d8ebe1 0%, transparent 55%),
        radial-gradient(900px 500px at 100% 0%, #e8f0ea 0%, transparent 50%),
        var(--kit-bg) !important;
}

/* Stock MiroTalk landing uses near-white text for dark pages — flip to ink on light bg */
body.has-animations,
body.has-animations .hero,
body.has-animations .hero-copy,
body.has-animations .section,
body.has-animations .section-title,
body.has-animations .section-paragraph,
body.has-animations .feature-title,
body.has-animations .feature-text,
body.has-animations p,
body.has-animations h1,
body.has-animations h2,
body.has-animations h3,
body.has-animations h4,
body.has-animations h5,
body.has-animations h6,
body.has-animations label,
body.has-animations .text-sm,
body.has-animations .text-xs,
body.has-animations .site-header,
body.has-animations .footer,
body.has-animations #footer,
body.has-animations .brand,
body.has-animations .brand a,
body.has-animations #appTitle,
body.has-animations #appDescription,
body.has-animations #appJoinDescription,
body.has-animations #appJoinLastRoom,
body.has-animations #newCallRoomTitle,
body.has-animations #newCallRoomDescription,
body.has-animations #joinRoomTitle,
body.has-animations #waitingRoomHeading,
body.has-animations #waitingRoomDescription,
body.has-animations #waitingStatus {
    color: var(--kit-ink) !important;
}

body.has-animations .text-muted,
body.has-animations .footer,
body.has-animations #footer,
body.has-animations #appDescription,
body.has-animations #appJoinDescription,
body.has-animations #newCallRoomDescription,
body.has-animations #waitingRoomDescription {
    color: var(--kit-muted) !important;
}

body.has-animations .brand,
body.has-animations .brand a,
body.has-animations h1,
body.has-animations h2,
body.has-animations .hero-title,
body.has-animations #appTitle {
    font-family: 'Fraunces', Georgia, serif !important;
    letter-spacing: -0.02em;
}

body.has-animations .site-header {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201, 213, 206, 0.7);
}

body.has-animations .footer,
body.has-animations #footer {
    border-top: 1px solid #e4ece7;
    background: transparent !important;
}

body.has-animations a:not(.button):not(.button-primary):not(.cta-btn) {
    color: var(--kit-brand);
}

body.has-animations a:not(.button):not(.button-primary):not(.cta-btn):hover {
    color: var(--kit-brand-soft);
}

/* Primary CTAs — white label on brand green */
body.has-animations .button,
body.has-animations .button-primary,
body.has-animations .button.button-primary,
body.has-animations #joinRoomButton,
body.has-animations #createRoomButton,
body.has-animations .cta-btn,
body.has-animations .btn-primary,
body.has-animations a.button.is-primary {
    background: linear-gradient(135deg, var(--kit-brand) 0%, var(--kit-brand-soft) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(15, 107, 76, 0.22) !important;
}

body.has-animations .button:hover,
body.has-animations .button-primary:hover,
body.has-animations #joinRoomButton:hover,
body.has-animations a.button.is-primary:hover {
    background: linear-gradient(135deg, #0c5a40 0%, var(--kit-brand) 100%) !important;
    color: #fff !important;
    filter: none;
}

/* Ghost / secondary buttons on light pages */
body.has-animations .button-secondary,
body.has-animations .button.button-secondary,
body.has-animations a.button.is-secondary {
    background: var(--kit-surface) !important;
    border: 1px solid var(--kit-line) !important;
    color: var(--kit-ink) !important;
    box-shadow: none !important;
}

body.has-animations input[type='text'],
body.has-animations input[type='password'],
body.has-animations input[type='email'],
body.has-animations select,
body.has-animations textarea,
body.has-animations .form-input,
body.has-animations #roomName,
body.has-animations #roomId {
    border-color: var(--kit-line) !important;
    background: var(--kit-surface) !important;
    color: var(--kit-ink) !important;
    border-radius: 14px !important;
    caret-color: var(--kit-ink);
}

body.has-animations input::placeholder,
body.has-animations textarea::placeholder {
    color: var(--kit-muted) !important;
    opacity: 1;
}

body.has-animations input:focus,
body.has-animations select:focus,
body.has-animations textarea:focus {
    border-color: var(--kit-brand-soft) !important;
    box-shadow: 0 0 0 3px rgba(61, 139, 122, 0.22) !important;
    color: var(--kit-ink) !important;
}

/* Mute loud marketing blocks */
body.has-animations #topSponsors,
body.has-animations #sponsors,
body.has-animations #pastSponsors,
body.has-animations #advertisers,
body.has-animations #supportUs,
body.has-animations #poweredBy,
body.has-animations #tryEasier,
body.has-animations #features {
    display: none !important;
}

/* SweetAlert on light pages (join name dialogs etc.) */
body.has-animations .swal2-popup {
    background: var(--kit-surface) !important;
    color: var(--kit-ink) !important;
}

body.has-animations .swal2-title,
body.has-animations .swal2-html-container,
body.has-animations .swal2-input-label {
    color: var(--kit-ink) !important;
}

body.has-animations .swal2-input,
body.has-animations .swal2-select,
body.has-animations .swal2-textarea {
    background: #fff !important;
    color: var(--kit-ink) !important;
    border-color: var(--kit-line) !important;
}

/* ——— Room client: readability helpers (dark theme stays) ——— */
/* Do not override body background here — themes in config.js own it. */

body:not(.has-animations) {
    font-family: 'Manrope', system-ui, sans-serif;
}

/* Ensure selects/labels using theme vars stay readable */
body:not(.has-animations) #google_translate_element select {
    color: var(--dd-color, #e8e8ec) !important;
}