/**

 * YTI&W Social Share - CSS Estático de Frontend

 *

 * Contém as regras de estilo base que não dependem

 * das opções do usuário no painel de administração.

 *

 * @version 2.3.0

 */



.sss-social-share {

    margin-top: 24px;

    margin-bottom: 24px;

    padding: 16px;

    border: 1px solid #eee;

    border-radius: 8px;

    clear: both; /* Evita flutuar sobre elementos float */

}



.sss-social-share b {

    display: block;

    margin-bottom: 12px;

}



.sss-social-share-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.sss-social-share-buttons a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    text-decoration: none;

    color: #fff;

    font-weight: 600;

    transition: opacity 0.2s ease, transform 0.2s ease;

}



.sss-social-share-buttons a:hover {

    opacity: 0.9;

    transform: translateY(-2px);

}



/* Cores de fundo estáticas */

.sss-facebook { background: #1877f2; }

.sss-twitter { background: #000000; } /* X agora é preto */

.sss-bluesky { background: #0285ff; } /* Novo */

.sss-threads { background: #000000; } /* Novo */

.sss-linkedin { background: #0a66c2; }

.sss-whatsapp { background: #25d366; }

.sss-telegram { background: #0088cc; }

.sss-pinterest { background: #e60023; }

.sss-copy_url { background: #666666; }

.sss-substack { background: #ff6719; }



/* Estilo para ícones (para garantir alinhamento) */

.sss-social-share-buttons a i,

.sss-social-share-buttons a img {

    line-height: 1;

    display: block; /* Fix para SVG alinhamento */

}



/* --- BARRA FLUTUANTE LATERAL (Desktop) --- */

.ytiw-sss-floating-sidebar-wrap {

    position: fixed;

    top: 50%;

    left: 0;

    transform: translateY(-50%);

    z-index: 99999;

    background: #fff;

    padding: 10px 5px;

    border-radius: 0 8px 8px 0;

    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);

    

    display: none; 

}



/* NOVO: REGRA CORRETIVA PARA GATILHOS (Desktop) */

/* Mantém a barra visível por padrão (display:block) se ativada,

   mas se o gatilho estiver presente, garante que ela comece com opacity: 0

   e use transition para o efeito de entrada via JS. */

@media (min-width: 769px) {

    .ytiw-sss-floating-sidebar-wrap { 

        display: block; 

        /* Default para aparecer imediatamente se não tiver gatilho */

        opacity: 1; 

        transition: opacity 0.3s ease; /* Adiciona transição base */

    } 

    

    /* Se o gatilho está presente, a barra DEVE começar invisível (opacidade 0) */

    .ytiw-sss-floating-sidebar-wrap.ytiw-sss-triggered-desktop {

        opacity: 0; 

    }

}

/* FIM NOVO */



.sss-social-share-floating .sss-social-share-buttons {

    flex-direction: column;

    gap: 10px;

}



.sss-social-share-floating .sss-social-share-buttons a {

    width: 45px;  /* Tamanho fixo para ícones */

    height: 45px;

    padding: 0 !important; /* Força override das opções do admin */

    border-radius: 50% !important; /* Sempre redondo na lateral */

    font-size: 20px !important; /* Tamanho fixo do ícone */

}



/* --- BARRA FIXA RODAPÉ (Mobile) --- */

.ytiw-sss-mobile-sticky-wrap {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 99999;

    background: #fff;

    padding: 12px 15px;

    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);

    

    display: none; 

}



/* NOVO: REGRA CORRETIVA PARA GATILHOS (Mobile) */

@media (max-width: 768px) {

    .ytiw-sss-mobile-sticky-wrap { 

        display: block; 

        /* Default para aparecer imediatamente se não tiver gatilho */

        opacity: 1; 

        transition: opacity 0.3s ease; /* Adiciona transição base */

    }

    

    /* Se o gatilho está presente, a barra DEVE começar invisível (opacidade 0) */

    .ytiw-sss-mobile-sticky-wrap.ytiw-sss-triggered-mobile {

        opacity: 0; 

    }

}

/* FIM NOVO */



/* Usar scroll horizontal se houver muitos botões no mobile */

.sss-social-share-mobile .sss-social-share-buttons {

    flex-wrap: nowrap;

    overflow-x: auto;

    gap: 12px;

    padding-bottom: 5px; /* Espaço para scrollbar se houver */

    justify-content: flex-start; /* Alinha à esquerda para permitir scroll */

    -webkit-overflow-scrolling: touch;

}



/* Ocultar scrollbar feia no mobile */

.sss-social-share-mobile .sss-social-share-buttons::-webkit-scrollbar {

    display: none;

}



.sss-social-share-mobile .sss-social-share-buttons a {

    flex: 0 0 auto; /* Não encolher */

    width: 40px;

    height: 40px;

    padding: 0 !important;

    border-radius: 8px !important; /* Levemente arredondado no mobile */

    font-size: 18px !important;

}



/* --- CLICK TO SHARE (Shortcode [sss_quote]) --- */



.ytiw-sss-quote {

    margin: 30px 0;

    padding: 25px;

    position: relative;

    font-family: inherit;

    clear: both;

}



.ytiw-sss-quote-text {

    font-size: 1.2em;

    font-weight: 500;

    line-height: 1.5;

    margin-bottom: 15px;

    font-style: italic;

}



.ytiw-sss-quote-author {

    font-size: 0.9em;

    font-weight: 600;

    color: #666;

    margin-bottom: 20px;

    text-align: right;

}



.ytiw-sss-quote-actions {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 15px;

    border-top: 1px solid rgba(0,0,0,0.05);

    padding-top: 15px;

    font-size: 0.9em;

    color: #777;

}



.ytiw-sss-quote-buttons {

    display: flex;

    gap: 10px;

}



.ytiw-sss-quote-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    border-radius: 4px;

    text-decoration: none !important; /* Força override dos estilos do tema */

    font-weight: 600;

    font-size: 14px;

    color: #fff !important;

    transition: transform 0.2s ease, opacity 0.2s ease;

}



.ytiw-sss-quote-btn:hover {

    transform: translateY(-2px);

    opacity: 0.9;

    color: #fff !important;

}



.ytiw-btn-twitter { background-color: #000; } /* X Color */

.ytiw-btn-whatsapp { background-color: #25d366; }



/* Tema: CLEAN */

.ytiw-sss-quote-theme-clean {

    background: #fff;

    border-left: 5px solid #2271b1; /* Azul YTI&W */

}



/* Tema: BOXED */

.ytiw-sss-quote-theme-boxed {

    background: #f5f7fa;

    border-radius: 8px;

    border: 1px solid #e2e4e7;

}

.ytiw-sss-quote-theme-boxed .ytiw-sss-quote-text {

    color: #333;

    font-style: normal;

}



/* Tema: MODERN */

.ytiw-sss-quote-theme-modern {

    background: #fff;

    border: 1px solid #e5e5e5;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.05);

    overflow: hidden;

}

.ytiw-sss-quote-theme-modern::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, #2271b1, #00a0d2);

}

.ytiw-sss-quote-theme-modern .ytiw-sss-quote-text {

    font-family: Georgia, 'Times New Roman', serif;

    color: #2c3e50;

    font-size: 1.3em;

}



/* --- VISIBILIDADE RESPONSIVA --- */



/* Desktop (acima de 768px): Mostra Sidebar, Esconde Mobile */

@media (min-width: 769px) {

    /* Manter a regra de exibição base aqui para garantir que o bloco apareça */

    .ytiw-sss-floating-sidebar-wrap { display: block; }

    .ytiw-sss-mobile-sticky-wrap { display: none; }

}



/* Mobile (até 768px): Esconde Sidebar, Mostra Mobile */

@media (max-width: 768px) {

    .ytiw-sss-floating-sidebar-wrap { display: none; }

    .ytiw-sss-mobile-sticky-wrap { display: block; }

}



/* Impressão: Oculta barras flutuantes */

@media print {

    .ytiw-sss-floating-sidebar-wrap,

    .ytiw-sss-mobile-sticky-wrap {

        display: none !important;

    }

}



/* --- SELECT TO SHARE TOOLTIP --- */

.ytiw-sss-select-tooltip {

    position: absolute; /* Para posicionamento pelo JS */

    top: 0;             /* [FIX] Ancoragem Zero para evitar deformação do rodapé */

    left: 0;            /* [FIX] Ancoragem Zero */

    z-index: 99999;     /* Sempre acima de tudo */

    background: #333;

    padding: 5px;

    border-radius: 4px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.3);

    

    /* Estado inicial: Oculto e Transparente */

    opacity: 0;

    visibility: hidden;

    pointer-events: none; /* Não bloqueia o clique/seleção */

    transition: opacity 0.2s ease, visibility 0.2s ease;

    

    display: flex;

    gap: 4px;

}



.ytiw-sss-select-tooltip.is-visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto; /* Permite cliques */

}



/* Estilo dos Botões do Tooltip */

.ytiw-sss-select-tooltip a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 35px;

    height: 35px;

    border-radius: 3px;

    color: #fff;

    text-decoration: none;

    transition: background-color 0.2s ease, opacity 0.2s ease;

}



.ytiw-sss-select-tooltip a:hover {

    opacity: 0.8;

    transform: none; /* Override do hover padrão para não tremer */

}



/* Cores Padrão (Fallback, se não sobrescrito pelo CSS Dinâmico) */

.ytiw-sss-st-twitter { 

    background-color: #000000; 

}

.ytiw-sss-st-whatsapp { 

    background-color: #25d366; 

}



/* Estilo dos Ícones no Tooltip */

.ytiw-sss-select-tooltip i {

    font-size: 18px;

    line-height: 1;

}



.ytiw-sss-select-tooltip img,

.ytiw-sss-select-tooltip svg {

    width: 18px;

    height: 18px;

    line-height: 1;

    fill: currentColor; /* Para SVGs inline */

}