/* Card Builder - Element Styles (CSS Variables) */

/* Text/Title/Quote with custom color
 * Trigger duplo: attribute selector (legacy/inline) + class trigger
 * (.cb-has-text-color), o último ativado quando o renderer emite a var
 * via regra per-block CSS (sem inline style — atende "no inline CSS"). */
[style*="--cb-text-color"],
.cb-has-text-color {
    color: var(--cb-text-color) !important;
}
/* Author color em <cite> de QuoteElement */
[style*="--cb-author-color"],
.cb-has-author-color {
    color: var(--cb-author-color) !important;
}

/* Background with opacity */
.cb-has-bg {
    background-color: color-mix(in srgb, var(--cb-bg-color, transparent) calc(var(--cb-bg-opacity, 1) * 100%), transparent);
}

/* Button custom colors
 * Cada propriedade só aplica quando a CSS var correspondente foi declarada
 * — assim "Sem cor" em uma prop específica não sobrescreve a cor default da
 * variante (primary/secondary/accent).
 *
 * Trigger duplo: o seletor `[style*="--cb-btn-X"]` casa quando o módulo Cards
 * (CardRenderer/ButtonElement) emite a var no `style=` inline. O seletor
 * `.cb-has-btn-X` casa quando o BlockRendererService::renderButton emite a
 * var via regra per-block CSS (sem inline style — atende a regra "no inline
 * CSS" do projeto). Os dois seletores coexistem; cards podem migrar pro
 * trigger por classe quando vierem a refatorar.
 */
.cb-btn-custom[style*="--cb-btn-bg"],
.cb-btn-custom.cb-has-btn-bg {
    background-color: color-mix(in srgb, var(--cb-btn-bg) calc(var(--cb-btn-bg-opacity, 1) * 100%), transparent);
}
.cb-btn-custom[style*="--cb-btn-text"],
.cb-btn-custom.cb-has-btn-text {
    color: var(--cb-btn-text);
}
.cb-btn-custom[style*="--cb-btn-border"],
.cb-btn-custom.cb-has-btn-border {
    border-color: var(--cb-btn-border);
}
.cb-btn-custom[style*="--cb-btn-border-width"],
.cb-btn-custom.cb-has-btn-border-width {
    border-width: var(--cb-btn-border-width);
    border-style: solid;
}
.cb-btn-custom[style*="--cb-btn-radius"],
.cb-btn-custom.cb-has-btn-radius {
    border-radius: var(--cb-btn-radius);
}

/* Button state colors (hover, active, focus) via CSS variables */
.cb-btn-custom[style*="--cb-btn-hover-bg"]:hover,
.cb-btn-custom.cb-has-btn-hover-bg:hover {
    background-color: var(--cb-btn-hover-bg) !important;
    opacity: 1;
}
.cb-btn-custom[style*="--cb-btn-hover-text"]:hover,
.cb-btn-custom.cb-has-btn-hover-text:hover {
    color: var(--cb-btn-hover-text) !important;
}
.cb-btn-custom[style*="--cb-btn-hover-border"]:hover,
.cb-btn-custom.cb-has-btn-hover-border:hover {
    border-color: var(--cb-btn-hover-border) !important;
}
.cb-btn-custom[style*="--cb-btn-active-bg"]:active,
.cb-btn-custom.cb-has-btn-active-bg:active {
    background-color: var(--cb-btn-active-bg) !important;
}
.cb-btn-custom[style*="--cb-btn-active-text"]:active,
.cb-btn-custom.cb-has-btn-active-text:active {
    color: var(--cb-btn-active-text) !important;
}
.cb-btn-custom[style*="--cb-btn-active-border"]:active,
.cb-btn-custom.cb-has-btn-active-border:active {
    border-color: var(--cb-btn-active-border) !important;
}
.cb-btn-custom[style*="--cb-btn-focus-bg"]:focus,
.cb-btn-custom.cb-has-btn-focus-bg:focus {
    background-color: var(--cb-btn-focus-bg) !important;
}
.cb-btn-custom[style*="--cb-btn-focus-text"]:focus,
.cb-btn-custom.cb-has-btn-focus-text:focus {
    color: var(--cb-btn-focus-text) !important;
}
.cb-btn-custom[style*="--cb-btn-focus-border"]:focus,
.cb-btn-custom.cb-has-btn-focus-border:focus {
    border-color: var(--cb-btn-focus-border) !important;
}

/* Button icon color - match text color via CSS filter */
/* Dark buttons (white text) - invert icon to white */
.bg-slate-900 > .cb-btn-icon,
.bg-slate-600 > .cb-btn-icon,
a.bg-slate-900 .cb-btn-icon,
a.bg-slate-600 .cb-btn-icon {
    filter: brightness(0) invert(1);
}
/* Custom button - use brightness/invert based on CSS variable */
.cb-btn-custom > .cb-btn-icon,
a.cb-btn-custom .cb-btn-icon {
    filter: brightness(0) invert(1);
}
/* Light buttons (dark text) - keep icon dark */
.bg-white > .cb-btn-icon,
.bg-transparent > .cb-btn-icon,
a.bg-white .cb-btn-icon,
a.bg-transparent .cb-btn-icon {
    filter: brightness(0);
}

/* Badge custom colors */
.cb-badge-custom {
    background-color: var(--cb-badge-bg, #dbeafe);
    color: var(--cb-badge-text, #1d4ed8);
}

/* Icon custom color - use CSS filter to tint SVG loaded as img */
.cb-icon[style*="--cb-icon-color"] {
    filter: brightness(0) saturate(100%);
}
.cb-icon.cb-icon-tinted {
    filter: var(--cb-icon-filter, none);
}

/* Counter background */
.cb-counter-bg {
    background-color: var(--cb-counter-bg, transparent);
}

/* Counter animation */
[data-counter-animate] {
    transition: all 0.3s ease;
}

/* Divider - ensure hr renders properly */
.cb-divider {
    margin-top: var(--cb-div-margin, 16px);
    margin-bottom: var(--cb-div-margin, 16px);
}
.cb-divider-line {
    border: none;
    border-top-width: var(--cb-div-thickness, 1px);
    border-top-style: var(--cb-div-style, solid);
    border-top-color: var(--cb-div-color, #e2e8f0);
    margin: 0;
    padding: 0;
}

/* Spacer */
.cb-spacer {
    height: var(--cb-spacer-h, 32px);
    min-height: 8px;
}

/* List styles - ensure markers show despite Tailwind reset */
.cb-list-styled {
    padding-left: 1.25rem;
}
.cb-list-styled li {
    display: list-item;
}
.cb-list-styled.cb-list-disc { list-style-type: disc; }
.cb-list-styled.cb-list-circle { list-style-type: circle; }
.cb-list-styled.cb-list-square { list-style-type: square; }
.cb-list-styled.cb-list-decimal { list-style-type: decimal; }
.cb-list-styled.cb-list-decimal-leading-zero { list-style-type: decimal-leading-zero; }
.cb-list-styled.cb-list-lower-alpha { list-style-type: lower-alpha; }
.cb-list-styled.cb-list-lower-roman { list-style-type: lower-roman; }
.cb-list-styled.cb-list-none { list-style-type: none; }
.cb-list-styled .cb-list-styled {
    padding-left: 1.25rem;
    margin-top: 0.25rem;
}

/* Countdown boxes */
.cb-countdown [data-countdown-days],
.cb-countdown [data-countdown-hours],
.cb-countdown [data-countdown-minutes],
.cb-countdown [data-countdown-seconds] {
    font-variant-numeric: tabular-nums;
}

/* Card element hover in editor */
[data-card-element]:hover {
    outline: 1px dashed rgba(59, 130, 246, 0.3);
    outline-offset: 2px;
}
[data-card-element].ring-2 {
    outline: none;
}

/* Custom font-size via CSS variable (replaces Tailwind text-* classes when fontSize is set) */
[style*="--cb-font-size"],
.cb-has-font-size {
    font-size: var(--cb-font-size) !important;
}

/* Custom line-height via CSS variable */
[style*="--cb-line-height"],
.cb-has-line-height {
    line-height: var(--cb-line-height) !important;
}

/* Custom border-radius via CSS variable (px value, replaces Tailwind rounded-* classes) */
[style*="--cb-border-radius"],
.cb-has-border-radius {
    border-radius: var(--cb-border-radius) !important;
}

/* Partial formatting: font-size relative to parent (em units, scales proportionally) */
.cb-partial-fs {
    font-size: var(--cb-partial-fs, 1em);
}

/* Image resize handles */
.cb-resize-container {
    position: relative;
    display: inline-block;
}
.cb-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #3b82f6;
    border: 1px solid #fff;
    border-radius: 2px;
    z-index: 20;
    cursor: nwse-resize;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.cb-resize-handle-tl { top: -5px; left: -5px; cursor: nwse-resize; }
.cb-resize-handle-tr { top: -5px; right: -5px; cursor: nesw-resize; }
.cb-resize-handle-bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.cb-resize-handle-br { bottom: -5px; right: -5px; cursor: nwse-resize; }
.cb-resize-info {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 21;
}

/* Column markers in multi-column layout (editor only) */
.cb-col-marker {
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    position: relative;
    padding-top: 24px;
    min-width: 0;
    transition: border-color 0.15s, background-color 0.15s;
}
.cb-col-marker:hover {
    border-color: #93c5fd;
    background-color: rgba(239, 246, 255, 0.3);
}
.cb-col-marker.ring-2 {
    border-color: transparent;
}
.cb-col-label {
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
    font-weight: 500;
}

/* Drag handle - visible on hover */
.cb-draggable {
    position: relative;
}
.cb-drag-handle {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #94a3b8;
    background: rgba(255,255,255,0.85);
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
    user-select: none;
    line-height: 1;
}
.cb-draggable:hover .cb-drag-handle {
    opacity: 1;
}
.cb-drag-handle:hover {
    color: #3b82f6;
    border-color: #93c5fd;
    background: #eff6ff;
}
.cb-drag-handle:active {
    cursor: grabbing;
}

/* Drop indicator lines */
.cb-drop-above {
    box-shadow: 0 -2px 0 0 #3b82f6;
}
.cb-drop-below {
    box-shadow: 0 2px 0 0 #3b82f6;
}

/* Column drop target highlight */
.cb-col-drop-target {
    background-color: rgba(219, 234, 254, 0.5) !important;
    border-color: #60a5fa !important;
}

/* Column Resizer - drag handle between columns */
.cb-col-resizer {
    width: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    position: relative;
    z-index: 15;
    user-select: none;
    -webkit-user-select: none;
    background: transparent;
}
.cb-col-resizer-bar {
    width: 4px;
    height: 28px;
    background-color: rgba(148, 163, 184, 0.75);
    border-radius: 999px;
    box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(15, 23, 42, 0.15);
    opacity: 0.85;
    transition: background-color 0.15s, height 0.15s, width 0.15s, opacity 0.15s;
}
.cb-col-resizer:hover .cb-col-resizer-bar,
.cb-col-resizer-active .cb-col-resizer-bar {
    background-color: #3b82f6;
    width: 5px;
    height: 36px;
    opacity: 1;
}
.cb-col-resize-tooltip {
    position: fixed;
    z-index: 9999;
    background-color: rgba(15, 23, 42, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transform: translateX(-50%);
}

/* Box container - clickable area indicator */
[data-card-container].cb-box-interactive {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    border: 2px dashed transparent !important;
    border-radius: 6px;
}
[data-card-container].cb-box-interactive:hover {
    border-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 8px rgba(99, 102, 241, 0.3);
}
[data-card-container].cb-box-active {
    border-color: rgba(99, 102, 241, 0.9) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25), 0 0 12px rgba(99, 102, 241, 0.2);
}

/* Box container - custom background with opacity via CSS variables */
.cb-box-custom-bg {
    background-color: color-mix(in srgb, var(--cb-box-bg, transparent) calc(var(--cb-box-bg-opacity, 1) * 100%), transparent);
}

/* Box container - custom border color via CSS variable */
.cb-box-custom-border {
    border-color: var(--cb-box-border, #e2e8f0);
}

/* ============================================================================
   Image element — modo "Preencher" (fit=fill)
   Sangra a imagem por cima do padding do box e herda o border-radius do box,
   ocupando toda a área visual incluindo cantos arredondados.
   Consome as CSS vars --cb-pad e --cb-radius publicadas pelo box container
   (CardRenderer::resolveBoxStyle). Quando o box não tem padding/radius, a
   classe vira no-op (largura 100% normal, cantos retos).
============================================================================ */
.cb-img-fill {
    display: block;
    width: calc(100% + 2 * var(--cb-pad, 0px));
    margin: calc(-1 * var(--cb-pad, 0px));
    max-width: none;
    border-radius: var(--cb-radius, 0);
    height: auto;
}

/* ============================================================================
   Image element — transição entre modos de ajuste
   Aplica uma animação curta SOMENTE durante a troca de fit (Padrão ⇄ Dinâmica
   ⇄ Preencher). A classe cb-fit-animating é adicionada pelo JS antes da troca
   e removida após 280ms. Não interfere no drag de resize porque os handles
   atualizam style.width inline (e o transition seria intrusivo no drag).
============================================================================ */
[data-card-element].cb-fit-animating img,
[data-card-element].cb-fit-animating .cb-resize-container,
[data-card-element].cb-fit-animating .cb-resize-container > img {
    transition:
        width 250ms cubic-bezier(0.4, 0, 0.2, 1),
        height 250ms cubic-bezier(0.4, 0, 0.2, 1),
        max-width 250ms cubic-bezier(0.4, 0, 0.2, 1),
        margin 250ms cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Visibilidade por dispositivo (BlockRendererService::buildVisibilityClasses)
 * Breakpoints alinhados com Tailwind default (sm=640, md=768, lg=1024).
 * Mobile = <640, Tablet = 640..1023, Desktop = >=1024.
 */
/* `st-hide-mobile`: esconde só em viewports < 640px. Antes estava
   `display: none !important; @media (>=640) { display: revert !important }`
   — o revert sobrescrevia o `lg:flex` do Tailwind no <ul> do menu (que
   tem ambas classes), forçando display:block e quebrando o gap entre
   itens. Usar @media negativo evita o revert: a regra só aplica quando
   precisa esconder. */
@media (max-width: 639.98px) { .st-hide-mobile { display: none !important; } }

@media (min-width: 640px) and (max-width: 1023.98px) {
    .st-hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
    .st-hide-desktop { display: none !important; }
}

/* Menu hamburger no canto direito por padrão em mobile/tablet — UX esperado
 * de header responsivo. Em desktop volta para a ordem natural do stack.
 * User pode sobrescrever via drag no editor (grava `style="order:N"` inline,
 * que vence este `order:999` por especificidade de inline style). */
@media (max-width: 1023.98px) {
    [data-st-block-type="stack"] > [data-st-block-type="menu"] {
        order: 999;
        margin-left: auto;
    }
}

/* Menu (LayoutParts/BlockRenderer) - custom colors via CSS vars
 * Consumido pelo BlockRendererService::renderMenu quando props visuais
 * estão presentes (bg_color, item_color, item_hover_color, etc).
 */
/* Menu custom: as CSS vars vêm do per-block CSS por viewport (não mais
   inline). Cada viewport tem suas próprias rules em @media — se a var
   não está definida no viewport atual, color-mix fall-throughs para
   transparent (default do tema), exatamente o que o user espera. */
.st-menu-custom {
    /* Combina bg_color hex com bg_opacity (0-100) via color-mix.
       Default: --st-menu-bg-opacity=100% (sólido). Quando --st-menu-bg
       não está definida (ex.: viewport sem override), color-mix vira
       transparent automaticamente — visual = "sem cor custom". */
    background-color: color-mix(in srgb, var(--st-menu-bg, transparent) calc(var(--st-menu-bg-opacity, 100) * 1%), transparent);
}
.st-menu-custom {
    border-radius: var(--st-menu-radius, 0);
    /* F-UX 2026-05-01 — padding per-side do nav (interno do menu como bloco).
       Default 0 quando não setado. Margin foi MOVIDA pra `<a>` em 2026-05-02:
       intent do user é "separar fundo de cada botão", não afastar o menu
       inteiro do header pai. Se precisar afastar o nav no futuro, criar
       prop `nav_margin_*` separada. */
    padding-top:    var(--st-menu-pt, 0);
    padding-right:  var(--st-menu-pr, 0);
    padding-bottom: var(--st-menu-pb, 0);
    padding-left:   var(--st-menu-pl, 0);
}
.st-menu-custom ul {
    gap: var(--st-menu-gap, 1.5rem);
}
.st-menu-custom a {
    color: var(--st-menu-item, inherit);
    background-color: var(--st-menu-item-bg, transparent);
    border-radius: var(--st-menu-radius, 0);
    padding: var(--st-menu-item-padding, 0);
    /* F-UX 2026-05-02 — margin per-side AROUND each menu item (não no nav).
       Quando item tem bg custom, margin separa visualmente cada "botão".
       Default 0 — combina aditivamente com gap do ul (gap = espaço mínimo
       entre items, margin = espaço extra ao redor de cada item). */
    margin-top:    var(--st-menu-item-mt, 0);
    margin-right:  var(--st-menu-item-mr, 0);
    margin-bottom: var(--st-menu-item-mb, 0);
    margin-left:   var(--st-menu-item-ml, 0);
    font-size: var(--st-menu-font-size, inherit);
    font-weight: var(--st-menu-font-weight, inherit);
    font-style: var(--st-menu-font-style, normal);
    text-decoration: var(--st-menu-text-decoration, none);
    transition: color 0.15s ease, background-color 0.15s ease;
}
.st-menu-custom a:hover,
.st-menu-custom .menu-item:hover > a {
    color: var(--st-menu-item-hover, var(--st-menu-item, inherit));
    background-color: var(--st-menu-item-hover-bg, var(--st-menu-item-bg, transparent));
}
.st-menu-custom a.is-active,
.st-menu-custom .active > a,
.st-menu-custom a[aria-current="page"] {
    color: var(--st-menu-item-active, var(--st-menu-item, inherit));
    background-color: var(--st-menu-item-active-bg, var(--st-menu-item-bg, transparent));
}

/* Hamburger button (.st-menu-toggle dentro do <nav>): cor/bg/tamanho/
   border-radius próprios via --st-menu-toggle-* (com fallback pras
   vars do menu pra preservar comportamento antigo quando user não
   customiza o hamburger separadamente). !important pra ganhar do
   text-slate-700 do Tailwind. */
.st-menu-custom .st-menu-toggle {
    color: var(--st-menu-toggle-color, var(--st-menu-item, currentColor)) !important;
    background-color: var(--st-menu-toggle-bg, transparent);
    /* 2.75rem = 44px, o mínimo de alvo de toque da WCAG 2.2 (2.5.8).
       Era 2.5rem = 40px, e essa é a medida que vale sempre que o cliente NÃO
       customizou o tamanho do hamburguer — ou seja, o caso comum. Quem
       customizou continua mandando pela var. */
    width: var(--st-menu-toggle-size, 2.75rem);
    height: var(--st-menu-toggle-size, 2.75rem);
    border-radius: var(--st-menu-toggle-radius, 0.375rem);
}

/* F4.2 — SVG do hamburger escala com o tamanho do botão (55% = 22px
   quando botão é 40px, batendo com o default antigo). Antes o SVG
   estava hardcoded em 22×22 (BlockRendererService.php:4066) e ao
   aumentar --st-menu-toggle-size só crescia o espaço vazio ao redor
   do ícone. As CSS vars padding-l/r do botão "Menu" (text mode)
   continuam funcionando porque essa regra mira o > svg, não o span.
   Specificity (0,2,1) > inline width/height attrs do <svg>. */
.st-menu-custom .st-menu-toggle > svg {
    width: 55%;
    height: 55%;
}

/* Drawer (.st-mobile-menu) — bg/radius próprios via --st-mobile-drawer-*
   com FALLBACK em CASCATA: drawer próprio → cor do menu → white.
   Cascata é importante pra retro-compat: user que customizou só o
   `bg_color` do menu (sem mexer no painel de drawer) espera que o
   drawer acompanhe a cor (comportamento antigo, antes do drawer ter
   vars próprias). Só quando user explicita um `drawer_bg` que o
   drawer "se descola" da cor do menu. */
.st-mobile-menu.st-menu-custom {
    background-color: var(--st-mobile-drawer-bg, var(--st-menu-bg, white));
    border-radius: var(--st-mobile-drawer-radius, var(--st-menu-radius, 0));
}
.st-mobile-menu.st-menu-custom .st-mobile-menu-items {
    gap: var(--st-mobile-drawer-gap, var(--st-menu-gap, 0));
}

/* Items do drawer: vars próprias com fallback pras vars do menu (assim
   "user só configurou menu" continua mostrando os itens do drawer com a
   mesma cor — comportamento antigo preservado). */
.st-mobile-menu.st-menu-custom .st-mobile-menu-items > li > a,
.st-mobile-menu.st-menu-custom .st-mobile-menu-items > li > span,
.st-mobile-menu.st-menu-custom .st-mobile-menu-items > li > .st-mobile-submenu-toggle {
    color: var(--st-mobile-drawer-item, var(--st-menu-item, inherit)) !important;
    background-color: var(--st-mobile-drawer-item-bg, var(--st-menu-item-bg, transparent));
    border-radius: var(--st-mobile-drawer-radius, var(--st-menu-radius, 0));
    padding: var(--st-mobile-drawer-item-padding, var(--st-menu-item-padding, 0));
    margin-top: var(--st-menu-item-mt, 0);
    margin-right: var(--st-menu-item-mr, 0);
    margin-bottom: var(--st-menu-item-mb, 0);
    margin-left: var(--st-menu-item-ml, 0);
    font-size: var(--st-mobile-drawer-font-size, var(--st-menu-font-size, inherit));
    font-weight: var(--st-mobile-drawer-font-weight, var(--st-menu-font-weight, inherit));
}
.st-mobile-menu.st-menu-custom .st-mobile-menu-items > li > a:hover,
.st-mobile-menu.st-menu-custom .st-mobile-menu-items > li > span:hover,
.st-mobile-menu.st-menu-custom .st-mobile-menu-items > li > .st-mobile-submenu-toggle:hover {
    color: var(--st-mobile-drawer-item-hover, var(--st-menu-item-hover, var(--st-mobile-drawer-item, var(--st-menu-item, inherit)))) !important;
    background-color: var(--st-mobile-drawer-item-hover-bg, var(--st-menu-item-hover-bg, var(--st-mobile-drawer-item-bg, var(--st-menu-item-bg, transparent))));
}
.st-mobile-menu.st-menu-custom .st-mobile-menu-items > li > a.is-active,
.st-mobile-menu.st-menu-custom .st-mobile-menu-items > li.active > a,
.st-mobile-menu.st-menu-custom .st-mobile-menu-items > li.active > span,
.st-mobile-menu.st-menu-custom .st-mobile-menu-items > li > a[aria-current="page"] {
    color: var(--st-mobile-drawer-item-active, var(--st-menu-item-active, var(--st-mobile-drawer-item, var(--st-menu-item, inherit)))) !important;
    background-color: var(--st-mobile-drawer-item-active-bg, var(--st-menu-item-active-bg, var(--st-mobile-drawer-item-bg, var(--st-menu-item-bg, transparent))));
}