.dtic-acessibilidade-widget {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

.dtic-acessibilidade-widget.vertical {
    flex-direction: column;
}

.dtic-acessibilidade-widget.horizontal {
    flex-direction: row;
}

.dtic-acessibilidade-widget button {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

.dtic-acessibilidade-widget button:hover {
    background-color: #e9ecef;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.dtic-acessibilidade-widget button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.dtic-acessibilidade-widget button:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.dtic-acessibilidade-widget .dtic-icon {
    font-size: 18px;
    line-height: 1;
    font-style: normal;
    font-weight: bold;
    display: inline-block;
    color: inherit;
}

/* Ícones específicos usando símbolos Unicode */
.dtic-icon-contrast {
    font-size: 20px;
}

.dtic-icon-plus,
.dtic-icon-minus,
.dtic-icon-reset {
    font-size: 16px;
    font-family: Arial, sans-serif;
}

/* Hover effects para os ícones */
.dtic-acessibilidade-widget button:hover .dtic-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Alto contraste ativo */
body.alto-contraste {
    background-color: #000 !important;
    color: #fff !important;
}

body.alto-contraste *:not(img):not(svg):not(video):not(iframe) {
    background-color: #000 !important;
    color: #fff !important;
}

body.alto-contraste a,
body.alto-contraste button,
body.alto-contraste input,
body.alto-contraste textarea,
body.alto-contraste select {
    border-color: #fff !important;
}

/* Preservar imagens e elementos visuais */
body.alto-contraste img,
body.alto-contraste svg,
body.alto-contraste video,
body.alto-contraste iframe {
    filter: none !important;
    opacity: 1 !important;
}

/* Tamanhos de fonte */
body.fonte-pequena {
    font-size: 14px !important;
}

body.fonte-media {
    font-size: 16px !important;
}

body.fonte-grande {
    font-size: 18px !important;
}

body.fonte-extra-grande {
    font-size: 20px !important;
}

/* Responsividade */
@media (max-width: 768px) {
    .dtic-acessibilidade-widget {
        gap: 6px;
    }
    
    .dtic-acessibilidade-widget button,
    .elementor-widget-dtic-acessibilidade .dtic-acessibilidade-widget button,
    .dtic-acessibilidade-widget button.dtic-btn-contraste,
    .dtic-acessibilidade-widget button.dtic-btn-aumentar-fonte,
    .dtic-acessibilidade-widget button.dtic-btn-diminuir-fonte,
    .dtic-acessibilidade-widget button.dtic-btn-resetar-fonte {
        box-sizing: border-box !important;
    }
    
    .dtic-acessibilidade-widget .dtic-icon {
        font-size: 14px;
    }
    
    .dtic-icon-contrast {
        font-size: 16px;
    }
}

/* Estados de foco melhorados */
.dtic-acessibilidade-widget button:focus-visible {
    outline: 3px solid #005a9c;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px #fff, 0 0 0 4px #005a9c;
}

/* Estado ativo para contraste */
.dtic-acessibilidade-widget .dtic-btn-contraste[aria-pressed="true"] {
    background-color: #007cba;
    color: #fff;
    border-color: #005a9c;
}

.dtic-acessibilidade-widget .dtic-btn-contraste[aria-pressed="true"]:hover {
    background-color: #005a9c;
}

/* Animações suaves */
.dtic-acessibilidade-widget button {
    transition: all 0.2s ease-in-out;
}

/* Garante box-sizing para cálculos corretos */
.elementor-widget-dtic-acessibilidade .dtic-acessibilidade-widget button,
.dtic-acessibilidade-widget button.dtic-btn-contraste,
.dtic-acessibilidade-widget button.dtic-btn-aumentar-fonte,
.dtic-acessibilidade-widget button.dtic-btn-diminuir-fonte,
.dtic-acessibilidade-widget button.dtic-btn-resetar-fonte {
    box-sizing: border-box !important;
}

/* Melhor contraste para alto contraste */
body.alto-contraste .dtic-acessibilidade-widget button {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

body.alto-contraste .dtic-acessibilidade-widget button:hover {
    background-color: #ccc !important;
    color: #000 !important;
}

body.alto-contraste .dtic-acessibilidade-widget .dtic-btn-contraste[aria-pressed="true"] {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}