/* Enjezly public support pages — shared identity without structural changes. */
:root[data-ej-theme="dark"] {
    --faq-primary: var(--ej-primary);
    --faq-primary-hover: var(--ej-primary-hover);
    --faq-accent: var(--ej-accent);
    --faq-dark-bg: var(--ej-page);
    --faq-dark-surface: var(--ej-surface);
    --faq-border-dark: var(--ej-border);
}

.main-header {
    background: var(--ej-header-bg);
    border-color: var(--ej-border);
    box-shadow: none;
    backdrop-filter: blur(14px);
}
.nav-links a:not(.login-button) { color: var(--ej-text-muted); }
.nav-links a:not(.login-button):hover { color: var(--ej-primary); }
.login-button {
    background: var(--ej-action-primary);
    color: var(--ej-action-primary-text) !important;
    box-shadow: none;
}
.login-button:hover {
    background: var(--ej-action-primary-hover);
    box-shadow: none;
    transform: translateY(-1px);
}
.main-footer {
    background: var(--ej-page-raised);
    border-color: var(--ej-border);
}

/* Contact */
.contact-container {
    background: var(--ej-surface);
    border-color: var(--ej-border);
    border-radius: var(--ej-radius-lg);
    box-shadow: var(--ej-shadow-sm);
}
.contact-header h1,
.form-group label { color: var(--ej-heading); }
.contact-header p,
.whatsapp-note { color: var(--ej-text-muted); }
.form-control {
    background: var(--ej-surface-subtle);
    border-color: var(--ej-border);
    color: var(--ej-text);
}
.form-control:focus {
    background: var(--ej-surface-subtle);
    border-color: var(--ej-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ej-focus) 28%, transparent);
}
.btn-submit,
.error-action .btn-primary {
    background: var(--ej-action-primary);
    color: var(--ej-action-primary-text);
    box-shadow: none;
    border-radius: var(--ej-radius-md);
    transition: background var(--ej-duration-fast) var(--ej-ease), transform var(--ej-duration-fast) var(--ej-ease);
}
.btn-submit:hover,
.error-action .btn-primary:hover {
    background: var(--ej-action-primary-hover);
    box-shadow: none;
    filter: none;
    transform: translateY(-1px);
}
.email-box { color: var(--ej-text); }
.email-box a { color: var(--ej-primary); }
.flash-container.success {
    color: var(--ej-success);
    background: color-mix(in srgb, var(--ej-success) 10%, var(--ej-surface));
    border-color: color-mix(in srgb, var(--ej-success) 34%, var(--ej-border));
}
.flash-container.error {
    color: var(--ej-danger);
    background: color-mix(in srgb, var(--ej-danger) 10%, var(--ej-surface));
    border-color: color-mix(in srgb, var(--ej-danger) 34%, var(--ej-border));
}

/* FAQ */
.faq-header {
    background: var(--ej-surface);
    border: 1px solid var(--ej-border);
    box-shadow: var(--ej-shadow-sm);
}
.faq-header::before,
.faq-header::after { content: none; }
.faq-header-icon { animation: none; }
.faq-header h1 {
    color: var(--ej-heading);
    text-shadow: none;
}
.faq-header p { color: var(--ej-text-muted); }
.search-inner,
body.dark-mode .search-inner {
    background: var(--ej-surface);
    border-color: var(--ej-border);
    box-shadow: var(--ej-shadow-sm);
}
.search-inner:focus-within {
    border-color: var(--ej-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ej-focus) 28%, transparent);
}
#faq-search-input,
body.dark-mode #faq-search-input { color: var(--ej-text); }
#faq-search-input::placeholder { color: var(--ej-text-muted); }
.clear-search-btn {
    background: var(--ej-surface-subtle);
    color: var(--ej-text-muted);
}
.clear-search-btn:hover {
    background: var(--ej-action-primary);
    color: var(--ej-action-primary-text);
}
.faq-category,
.faq-category.visible {
    opacity: 1;
    transform: none;
    transition: none;
}
.faq-category-header,
body.dark-mode .faq-category-header { border-color: var(--ej-border); }
.faq-category h2 { color: var(--ej-heading); }
.category-count {
    background: var(--ej-primary-soft);
    color: var(--ej-primary);
}
.faq-item,
body.dark-mode .faq-item {
    background: var(--ej-surface);
    border-color: var(--ej-border);
    transition: border-color var(--ej-duration-fast) var(--ej-ease), box-shadow var(--ej-duration-fast) var(--ej-ease);
}
.faq-item:hover { border-color: var(--ej-border-brand); box-shadow: var(--ej-shadow-sm); }
.faq-item[open],
body.dark-mode .faq-item[open] {
    border-color: var(--ej-primary);
    box-shadow: var(--ej-shadow-sm);
}
.faq-item summary,
body.dark-mode .faq-item summary { color: var(--ej-text); }
.faq-item summary:hover,
body.dark-mode .faq-item summary:hover {
    background: var(--ej-surface-subtle);
    color: var(--ej-heading);
}
.faq-item summary::after,
body.dark-mode .faq-item summary::after {
    color: var(--ej-primary);
    border-color: var(--ej-primary);
}
.faq-item[open] > summary,
body.dark-mode .faq-item[open] > summary { color: var(--ej-primary); }
.faq-item[open] > summary::after,
body.dark-mode .faq-item[open] > summary::after {
    background: var(--ej-action-primary);
    color: var(--ej-action-primary-text);
}
.faq-item .faq-answer p,
body.dark-mode .faq-item .faq-answer p {
    color: var(--ej-text-muted);
    border-color: var(--ej-border);
}
.highlight {
    background: var(--ej-accent-soft);
    color: var(--ej-accent);
}
#no-results-message,
body.dark-mode #no-results-message {
    background: var(--ej-surface);
    border-color: var(--ej-border);
    color: var(--ej-text-muted);
}
#clear-search-fallback {
    background: var(--ej-action-primary);
    color: var(--ej-action-primary-text);
    box-shadow: none;
}
#clear-search-fallback:hover {
    background: var(--ej-action-primary-hover);
    transform: translateY(-1px);
}

/* Legal pages */
.content-wrapper { background: var(--ej-page); }
.static-page-container {
    background: var(--ej-surface);
    border-color: var(--ej-border);
    box-shadow: var(--ej-shadow-sm);
}
.static-page-container h2 {
    color: var(--ej-heading);
    border-color: var(--ej-border);
}
.static-page-container h3 { color: var(--ej-primary); }
.static-page-container h4,
.static-page-container strong { color: var(--ej-text); }
.static-page-container p,
.static-page-container li { color: var(--ej-text-muted); }
.last-updated { color: var(--ej-text-muted); }
.static-page-container a { color: var(--ej-primary); }
.static-page-container a:hover { color: var(--ej-primary-hover); }

/* 404 */
.error-container { background: var(--ej-page); }
.error-title { color: var(--ej-heading); }
.error-message { color: var(--ej-text-muted); }

.btn-submit:focus-visible,
.form-control:focus-visible,
.faq-item summary:focus-visible,
#faq-search-input:focus-visible,
.clear-search-btn:focus-visible,
#clear-search-fallback:focus-visible,
.static-page-container a:focus-visible,
.error-action .btn-primary:focus-visible {
    outline: 3px solid var(--ej-focus);
    outline-offset: 3px;
}

@media (max-width: 576px) {
    .contact-container,
    .static-page-container { padding: var(--ej-space-6); }
    .error-container { padding-inline: var(--ej-space-4); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}