/* ── WP Municipal Portal — Accessibility CSS ─────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   1. BASE: focus rings, skip-link, font scale, reduced motion
═══════════════════════════════════════════════════════════════ */

:focus-visible {
    outline: 3px solid var(--wmp-primary, #2563EB);
    outline-offset: 2px;
    border-radius: 4px;
}

.wmp-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--wmp-primary, #2563EB);
    color: white;
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    z-index: 9999;
    transition: top 0.2s;
}
.wmp-skip-link:focus { top: 0; }

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:root { --wmp-font-scale: 1; }
html { font-size: calc(16px * var(--wmp-font-scale)); }

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

/* Pause animations toggle */
body.wmp-pause-animations *,
body.wmp-pause-animations *::before,
body.wmp-pause-animations *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   1b. TOPBAR BUTTON STATES — visual feedback for VLibras (active/loading/error)
═══════════════════════════════════════════════════════════════ */
.wmp-topbar-btn[aria-pressed="true"],
.wmp-topbar-btn.is-active {
    background: #FFD500 !important;
    color: #0B1628 !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.25) !important;
    font-weight: 800;
}
.wmp-topbar-btn[aria-pressed="true"] svg,
.wmp-topbar-btn.is-active svg { stroke: #0B1628; }

.wmp-topbar-btn.is-loading {
    background: rgba(255, 213, 0, 0.45) !important;
    color: #FFD500 !important;
    cursor: wait !important;
    position: relative;
}
.wmp-topbar-btn.is-loading svg {
    animation: wmpSpin 0.8s linear infinite;
    transform-origin: center;
}
@keyframes wmpSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.wmp-topbar-btn.is-error {
    background: #DC2626 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35) !important;
}
.wmp-topbar-btn.is-error svg { stroke: #FFFFFF; }

/* ═══════════════════════════════════════════════════════════════
   2. HIGH CONTRAST + DARK MODE + MONOCHROME + SATURATED
═══════════════════════════════════════════════════════════════ */

body.wmp-high-contrast {
    --wmp-primary:  #0000CC;
    --wmp-text:     #000000;
    --wmp-muted:    #1A1A1A;
    --wmp-border:   #000000;
    --wmp-bg:       #FFFFFF;
    --wmp-white:    #FFFFFF;
    background: #FFFFFF !important;
    color: #000000 !important;
}
body.wmp-high-contrast .wmp-topbar-access { background: #000000 !important; color: #FFFF00 !important; }
body.wmp-high-contrast .wmp-topbar-access a,
body.wmp-high-contrast .wmp-topbar-access button { color: #FFFF00 !important; }
body.wmp-high-contrast .wmp-navbar { border-bottom: 3px solid #000000 !important; background: #FFFFFF !important; }
body.wmp-high-contrast .wmp-news-card,
body.wmp-high-contrast .wmp-dept-card,
body.wmp-high-contrast .wmp-doc-item,
body.wmp-high-contrast .wmp-sitemap-card { border: 2px solid #000000 !important; background: #FFFFFF !important; }
body.wmp-high-contrast .wmp-hero-title,
body.wmp-high-contrast .wmp-hero-subtitle { text-shadow: 1px 1px 0 #000 !important; }
body.wmp-high-contrast a { text-decoration: underline !important; color: #0000CC !important; }
body.wmp-high-contrast .wmp-footer,
body.wmp-high-contrast .wmp-footer-v2 { background: #000000 !important; color: #FFFFFF !important; }
body.wmp-high-contrast .wmp-footer-v2 a { color: #FFFF00 !important; }

body.wmp-dark-mode {
    background: #0B1220 !important;
    color: #E5E7EB !important;
}
body.wmp-dark-mode .wmp-navbar,
body.wmp-dark-mode .wmp-news-card,
body.wmp-dark-mode .wmp-dept-card,
body.wmp-dark-mode .wmp-doc-item,
body.wmp-dark-mode .wmp-sitemap-card,
body.wmp-dark-mode .wmp-sobre-card,
body.wmp-dark-mode .wmp-sidebar-card {
    background: #111827 !important;
    color: #F3F4F6 !important;
    border-color: #374151 !important;
}
body.wmp-dark-mode .wmp-main-content { background: transparent !important; }
body.wmp-dark-mode .wmp-sitemap-card-desc,
body.wmp-dark-mode .wmp-page-subtitle { color: #9CA3AF !important; }
body.wmp-dark-mode .wmp-sitemap-list a { color: #E5E7EB !important; }
body.wmp-dark-mode .wmp-sitemap-list a:hover { background: #1F2937 !important; }

body.wmp-monochrome { filter: grayscale(100%) !important; }
body.wmp-saturated  { filter: saturate(1.5) contrast(1.05) !important; }

/* ═══════════════════════════════════════════════════════════════
   3. READING AIDS
═══════════════════════════════════════════════════════════════ */

body.wmp-underline-links a:not(.wmp-btn):not(.wmp-nav-cta):not(.wmp-mobile-cta):not(.wmp-a11y-fab) {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

body.wmp-readable-font,
body.wmp-readable-font * {
    font-family: Verdana, "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0.01em;
}

body.wmp-letter-spacing,
body.wmp-letter-spacing p,
body.wmp-letter-spacing li,
body.wmp-letter-spacing a,
body.wmp-letter-spacing h1,
body.wmp-letter-spacing h2,
body.wmp-letter-spacing h3 {
    letter-spacing: 0.08em !important;
    word-spacing: 0.16em !important;
    line-height: 1.85 !important;
}

body.wmp-big-cursor,
body.wmp-big-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24'><path fill='%23000000' stroke='%23FFFFFF' stroke-width='1.5' d='M5 2l14 9-6 1 3 8-3 1-3-8-5 4z'/></svg>") 4 4, auto !important;
}

body.wmp-highlight-focus *:focus,
body.wmp-highlight-focus *:focus-visible {
    outline: 4px solid #F59E0B !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.25) !important;
    border-radius: 4px;
}
body.wmp-highlight-focus a:hover,
body.wmp-highlight-focus button:hover {
    outline: 2px dashed var(--wmp-primary, #2563EB);
    outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   4. FOOTER LEGAL LINKS — improved contrast
═══════════════════════════════════════════════════════════════ */

.wmp-footer-v2-legal {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: center;
}
.wmp-footer-v2-legal a {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.78) !important;
    text-decoration: none;
    font-weight: 500;
    padding: 4px 2px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}
.wmp-footer-v2-legal a:hover,
.wmp-footer-v2-legal a:focus-visible {
    color: #FFFFFF !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.wmp-footer-v2-copy {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   5. ACCESSIBILITY FLOATING BUTTON + PANEL
═══════════════════════════════════════════════════════════════ */

/* ── WhatsApp floating action button ─────────────────────────────────────── */
.wmp-wa-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    min-height: 56px;
    background: #25D366;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.42), 0 4px 12px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    animation: wmpWaPulse 2.4s ease-in-out infinite;
}
.wmp-wa-fab:hover,
.wmp-wa-fab:focus-visible {
    transform: translateY(-2px) scale(1.04);
    background: #20BA5A;
    color: #FFFFFF;
    box-shadow: 0 14px 36px rgba(37, 211, 102, 0.52), 0 6px 16px rgba(15, 23, 42, 0.22);
    animation: none;
}
.wmp-wa-fab-icon {
    flex-shrink: 0;
    color: #FFFFFF;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.wmp-wa-fab-label {
    display: inline-block;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Modo só-ícone: círculo perfeito */
.wmp-wa-fab--icon-only {
    width: 60px;
    height: 60px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    gap: 0;
    aspect-ratio: 1 / 1;
}

@keyframes wmpWaPulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.42), 0 4px 12px rgba(15, 23, 42, 0.18), 0 0 0 0 rgba(37, 211, 102, 0.55); }
    50%      { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.42), 0 4px 12px rgba(15, 23, 42, 0.18), 0 0 0 14px rgba(37, 211, 102, 0); }
}

@media (max-width: 540px) {
    .wmp-wa-fab { right: 14px; bottom: 14px; min-height: 52px; padding: 0 16px; }
    .wmp-wa-fab--icon-only { width: 56px; height: 56px; padding: 0; }
    .wmp-wa-fab-label { display: none; }
    /* Quando o rótulo é escondido no mobile, vira círculo também */
    .wmp-wa-fab:not(.wmp-wa-fab--icon-only) { width: 56px; min-height: 56px; padding: 0; border-radius: 50%; aspect-ratio: 1 / 1; }
}

body.wmp-high-contrast .wmp-wa-fab {
    background: #008000;
    border-color: #FFFFFF;
    color: #FFFFFF;
    animation: none;
}

/* ── VLibras widget — força o avatar do intérprete para o canto inferior
 *    esquerdo, evitando colisão com os FABs do WhatsApp/Acessibilidade que
 *    ocupam o canto inferior direito. */
[vw][vw-access-button],
div[vw-access-button] {
    left: 16px !important;
    right: auto !important;
    bottom: 16px !important;
    z-index: 9989 !important;
}
[vw] [vw-plugin-wrapper],
[vw] .vw-plugin-top-wrapper {
    left: 16px !important;
    right: auto !important;
}

/* ── Accessibility floating action button ───────────────────────────────── */
.wmp-a11y-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9990;
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wmp-primary, #2563EB);
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.42), 0 4px 12px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    aspect-ratio: 1 / 1;
}
.wmp-a11y-fab:hover,
.wmp-a11y-fab:focus-visible {
    transform: translateY(-2px) scale(1.04);
    background: #1D4ED8;
    color: #FFFFFF;
    box-shadow: 0 14px 36px rgba(37, 99, 235, 0.52), 0 6px 16px rgba(15, 23, 42, 0.22);
}
.wmp-a11y-fab-icon {
    color: #FFFFFF;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

/* Quando ambos os FABs estão visíveis, sobe o de acessibilidade para empilhar acima do WhatsApp */
body:has(.wmp-wa-fab) .wmp-a11y-fab { bottom: 94px; }

@media (max-width: 540px) {
    .wmp-a11y-fab { right: 14px; bottom: 14px; width: 56px; height: 56px; }
    body:has(.wmp-wa-fab) .wmp-a11y-fab { bottom: 82px; }
}

body.wmp-high-contrast .wmp-a11y-fab {
    background: #0000CC;
    border-color: #FFFFFF;
}

.wmp-a11y-backdrop[hidden],
.wmp-a11y-panel[hidden] { display: none !important; }

.wmp-a11y-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 9991;
    animation: wmpA11yFade 0.2s ease-out;
}
@keyframes wmpA11yFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.wmp-a11y-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 100vw;
    height: 100vh;
    background: #FFFFFF;
    color: #0F172A;
    z-index: 9992;
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 48px rgba(15, 23, 42, 0.22);
    animation: wmpA11ySlide 0.25s ease-out;
}
@keyframes wmpA11ySlide {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.wmp-a11y-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #E2E8F0;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
.wmp-a11y-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.wmp-a11y-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
}
.wmp-a11y-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.wmp-a11y-close:hover { background: #F1F5F9; border-color: #CBD5E1; }

.wmp-a11y-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.wmp-a11y-group {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 14px 16px;
    background: #FAFBFC;
}
.wmp-a11y-group-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
}

.wmp-a11y-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wmp-a11y-btn {
    flex: 0 0 auto;
    min-width: 44px;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1.5px solid #CBD5E1;
    background: #FFFFFF;
    color: #0F172A;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.wmp-a11y-btn:hover,
.wmp-a11y-btn:focus-visible {
    background: var(--wmp-primary, #2563EB);
    color: #FFFFFF;
    border-color: var(--wmp-primary, #2563EB);
}
.wmp-a11y-value {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    min-width: 50px;
    text-align: right;
}

.wmp-a11y-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.wmp-a11y-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid #CBD5E1;
    background: #FFFFFF;
    color: #0F172A;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.wmp-a11y-toggle:hover {
    border-color: var(--wmp-primary, #2563EB);
    background: #F1F5F9;
}
.wmp-a11y-toggle[aria-pressed="true"] {
    background: var(--wmp-primary, #2563EB);
    color: #FFFFFF;
    border-color: var(--wmp-primary, #2563EB);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}
.wmp-a11y-toggle-icon {
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.08);
    font-size: 13px;
    font-weight: 700;
}
.wmp-a11y-toggle[aria-pressed="true"] .wmp-a11y-toggle-icon {
    background: rgba(255, 255, 255, 0.2);
}

.wmp-a11y-shortcuts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #334155;
}
.wmp-a11y-shortcuts kbd {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    font-size: 11.5px;
    margin-right: 4px;
}

.wmp-a11y-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px dashed #E2E8F0;
    margin-top: 4px;
}
.wmp-a11y-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1.5px solid #FECACA;
    background: #FEF2F2;
    color: #B91C1C;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.18s;
}
.wmp-a11y-reset:hover { background: #FEE2E2; }
.wmp-a11y-link {
    font-size: 13px;
    color: var(--wmp-primary, #2563EB);
    font-weight: 600;
    text-decoration: none;
}
.wmp-a11y-link:hover { text-decoration: underline; }

/* Dark mode propagation inside the panel */
body.wmp-dark-mode .wmp-a11y-panel { background: #0F172A; color: #F1F5F9; }
body.wmp-dark-mode .wmp-a11y-head  { background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%); border-bottom-color: #334155; }
body.wmp-dark-mode .wmp-a11y-title { color: #F8FAFC; }
body.wmp-dark-mode .wmp-a11y-desc  { color: #94A3B8; }
body.wmp-dark-mode .wmp-a11y-close { background: #1E293B; border-color: #334155; color: #E2E8F0; }
body.wmp-dark-mode .wmp-a11y-group { background: #1E293B; border-color: #334155; }
body.wmp-dark-mode .wmp-a11y-group-title { color: #94A3B8; }
body.wmp-dark-mode .wmp-a11y-btn,
body.wmp-dark-mode .wmp-a11y-toggle { background: #0F172A; color: #F1F5F9; border-color: #334155; }
body.wmp-dark-mode .wmp-a11y-toggle:hover { background: #1E293B; }
body.wmp-dark-mode .wmp-a11y-shortcuts { color: #CBD5E1; }
body.wmp-dark-mode .wmp-a11y-shortcuts kbd { background: #1E293B; border-color: #334155; color: #F1F5F9; }

/* ═══════════════════════════════════════════════════════════════
   5b. DASHICONS — render sizes in public components
═══════════════════════════════════════════════════════════════ */

/* Shortcut card (search section) */
.wmp-shortcut-dashicon {
    font-size: 28px !important;
    width: 28px;
    height: 28px;
    color: #FFFFFF;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28));
    position: relative;
    z-index: 1;
}
/* Service card icon */
.wmp-service-icon .dashicons,
.wmp-service-icon-3d .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: #FFFFFF;
}
/* Stats counters */
.wmp-stat-icon .dashicons,
.wmp-stats-item .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: #FFFFFF;
}
/* Quick access shortcuts */
.wmp-qa-card .dashicons,
.wmp-quick-access-item .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}
/* Gallery category */
.wmp-gallery-cat-icon .dashicons {
    font-size: 30px;
    width: 30px;
    height: 30px;
}

body.wmp-high-contrast .dashicons { color: inherit !important; }

/* ═══════════════════════════════════════════════════════════════
   5c. TRANSPARÊNCIA PAGE
═══════════════════════════════════════════════════════════════ */

.wmp-page-transparencia .wmp-main-content { padding: 40px 0 80px; }

.wmp-transparencia-intro {
    max-width: 880px;
    margin: 0 auto 40px;
    text-align: center;
}
.wmp-transparencia-intro .wmp-section-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 12px;
}
.wmp-transparencia-intro .wmp-section-lead {
    color: #475569;
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0;
}

.wmp-transparencia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    max-width: 1140px;
    margin: 0 auto;
}

.wmp-transp-card {
    display: grid;
    grid-template-columns: 56px 1fr 24px;
    gap: 16px;
    align-items: center;
    padding: 20px 22px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.wmp-transp-card:hover,
.wmp-transp-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--wmp-primary, #2563EB);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}
.wmp-transp-card-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.04));
    border-radius: 14px;
    color: var(--wmp-primary, #2563EB);
}
.wmp-transp-card-icon .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: var(--wmp-primary, #2563EB);
}
.wmp-transp-card-icon .wmp-iconp-emoji { font-size: 28px; line-height: 1; }
.wmp-transp-card-title {
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.3;
}
.wmp-transp-card-desc {
    margin: 0;
    font-size: 0.88rem;
    color: #64748B;
    line-height: 1.45;
}
.wmp-transp-card-arrow {
    color: var(--wmp-primary, #2563EB);
    transition: transform 0.18s;
}
.wmp-transp-card:hover .wmp-transp-card-arrow { transform: translateX(3px); }

body.wmp-dark-mode .wmp-transp-card { background: #111827; border-color: #374151; }
body.wmp-dark-mode .wmp-transp-card-title { color: #F3F4F6; }
body.wmp-dark-mode .wmp-transp-card-desc  { color: #9CA3AF; }

/* ═══════════════════════════════════════════════════════════════
   6. SITEMAP PAGE
═══════════════════════════════════════════════════════════════ */

.wmp-page-sitemap .wmp-main-content { padding: 32px 0 80px; }

.wmp-sitemap-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    padding: 6px 16px 6px 18px;
    margin-bottom: 28px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wmp-sitemap-search:focus-within {
    border-color: var(--wmp-primary, #2563EB);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}
.wmp-sitemap-search-label {
    color: #64748B;
    display: inline-flex;
    align-items: center;
}
.wmp-sitemap-search-input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 12px 0;
    background: transparent;
    color: #0F172A;
    font-size: 15px;
    font-weight: 500;
}
.wmp-sitemap-search-count {
    font-size: 13px;
    font-weight: 700;
    color: #64748B;
    padding: 6px 12px;
    background: #F1F5F9;
    border-radius: 999px;
    white-space: nowrap;
}

.wmp-sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}

.wmp-sitemap-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 22px 22px 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.wmp-sitemap-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    border-color: rgba(37, 99, 235, 0.4);
}

.wmp-sitemap-card-head {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #E2E8F0;
}
.wmp-sitemap-card-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.04));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.wmp-sitemap-card-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.25;
}
.wmp-sitemap-card-count {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--wmp-primary, #2563EB);
    color: #FFFFFF;
}
.wmp-sitemap-card-desc {
    margin: 0;
    font-size: 12.5px;
    color: #64748B;
    line-height: 1.4;
}

.wmp-sitemap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wmp-sitemap-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #1F2937;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.35;
    transition: background 0.16s, color 0.16s, padding 0.16s;
}
.wmp-sitemap-list a:hover,
.wmp-sitemap-list a:focus-visible {
    background: rgba(37, 99, 235, 0.08);
    color: var(--wmp-primary, #2563EB);
    padding-left: 14px;
}
.wmp-sitemap-list a:hover .wmp-sitemap-item-arrow,
.wmp-sitemap-list a:focus-visible .wmp-sitemap-item-arrow {
    transform: translateX(2px);
}
.wmp-sitemap-item-arrow {
    flex-shrink: 0;
    color: var(--wmp-primary, #2563EB);
    transition: transform 0.16s;
}
.wmp-sitemap-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wmp-sitemap-ext-icon {
    flex-shrink: 0;
    color: #94A3B8;
}

.wmp-sitemap-empty {
    text-align: center;
    padding: 40px 0;
    color: #64748B;
    font-style: italic;
}

@media (max-width: 600px) {
    .wmp-sitemap-search { flex-wrap: wrap; }
    .wmp-sitemap-search-count { order: 3; width: 100%; text-align: center; }
}