/* ==========================================================================
   /app/link/css/style.css
   Estilos completos para a aplicação Linktree Simples.
   Inclui estilos base, formulários, botões, dashboard, perfil, modal,
   e pré-visualização de smartphone.
   ========================================================================== */

/* --- Reset Básico e Configurações Globais --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que padding e border não aumentem o tamanho do elemento */
}

html {
    scroll-behavior: smooth; /* Habilita rolagem suave para links internos (#) */
    font-size: 16px; /* Define tamanho de fonte base para rem */
}

body {
    font-family: 'Poppins', sans-serif; /* Fonte principal */
    line-height: 1.6; /* Espaçamento entre linhas */
    background-color: #f0f2f5; /* Cor de fundo global suave (cinza claro) */
    color: #333; /* Cor de texto padrão (cinza escuro) */
    display: flex; /* Usa flexbox para centralizar o container */
    justify-content: center; /* Centraliza o .container horizontalmente */
    min-height: 100vh; /* Garante que o body ocupe pelo menos toda a altura da tela */
    padding: 20px 10px; /* Espaçamento superior/inferior e lateral no body */
}

.container {
    max-width: 1100px; /* Largura máxima aumentada para acomodar preview */
    width: 100%; /* Ocupa 100% da largura disponível até o max-width */
    margin: 0 auto; /* Centraliza o container (redundante com flex no body, mas seguro) */
    background-color: #ffffff; /* Fundo branco para o conteúdo */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Sombra suave */
    overflow: hidden; /* Garante que conteúdo interno respeite as bordas arredondadas */
    display: flex; /* Usa flexbox para organizar header, main, footer */
    flex-direction: column; /* Organiza os filhos verticalmente */
    min-height: calc(100vh - 40px); /* Ocupa altura da tela menos o padding do body */
}

/* --- Cabeçalho e Rodapé --- */
.main-header {
    padding: 15px 25px; /* Espaçamento interno */
    background: linear-gradient(135deg, #4a90e2 0%, #63b4f4 100%); /* Gradiente azul */
    color: #fff; /* Cor do texto */
    display: flex; /* Organiza logo e navegação lado a lado */
    justify-content: space-between; /* Espaça logo e navegação */
    align-items: center; /* Alinha verticalmente */
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
    flex-shrink: 0; /* Impede que o header encolha */
}

.main-header h1 {
    margin: 0;
    font-size: 1.6em; /* Tamanho do título */
    font-weight: 700; /* Peso da fonte */
}

.main-header h1 a {
    color: #fff; /* Cor do link do título */
    text-decoration: none; /* Remove sublinhado */
}

.main-header nav {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre os itens da navegação */
    margin-top: 5px; /* Pequena margem em telas pequenas quando quebrar linha */
}

.main-header nav span {
    font-style: italic; /* Estilo para a saudação */
    opacity: 0.9;
}

.main-header nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, opacity 0.3s ease; /* Transição suave */
}

.main-header nav a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Fundo leve no hover */
    opacity: 1;
}

/* Conteúdo Principal */
main {
    padding: 25px; /* Espaçamento interno da área principal */
    flex-grow: 1; /* Permite que o main ocupe o espaço restante */
}

.main-footer {
    background-color: #f8f9fa; /* Fundo cinza claro */
    color: #6c757d; /* Cor do texto (cinza) */
    text-align: center;
    padding: 15px;
    font-size: 0.9em;
    border-top: 1px solid #e9ecef; /* Linha divisória */
    flex-shrink: 0; /* Impede que o footer encolha */
}

/* --- Formulários (Usados em Login, Registro, Dashboard) --- */
.form-group {
    margin-bottom: 18px; /* Espaço abaixo de cada grupo de formulário */
}

.form-group label {
    display: block; /* Ocupa linha inteira */
    margin-bottom: 6px; /* Espaço abaixo do label */
    font-weight: 600; /* Texto em negrito */
    color: #495057; /* Cor do label */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group select { /* Inclui select */
    width: 100%; /* Ocupa toda a largura disponível */
    padding: 12px 15px; /* Espaçamento interno */
    border: 1px solid #ced4da; /* Borda cinza padrão */
    border-radius: 6px; /* Bordas arredondadas */
    font-size: 1em; /* Tamanho da fonte */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
    background-color: #fff; /* Fundo branco para selects */
}

/* --- ESTILO ADICIONAL: Borda azul nos inputs da página de login/registro --- */
.login-form .form-group input[type="text"],
.login-form .form-group input[type="password"],
.register-form .form-group input[type="text"],
.register-form .form-group input[type="email"],
.register-form .form-group input[type="password"],
.register-form .form-group input[type="url"],
.register-form .form-group select {
    border: 1px solid #4a90e2; /* Borda azul */
}
/* Mantém a borda azul no hover, mas muda a sombra no focus */
.login-form .form-group input:hover,
.register-form .form-group input:hover,
.register-form .form-group select:hover {
    border-color: #4a90e2;
}

.form-group input:focus,
.form-group select:focus {
    outline: none; /* Remove contorno padrão */
    border-color: #357abd; /* Azul mais escuro ao focar */
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.35); /* Sombra externa ao focar */
}

/* --- FIM Borda azul login --- */


.form-group small {
    font-size: 0.85em; /* Tamanho menor para texto de ajuda */
    color: #6c757d; /* Cor cinza */
    margin-top: 5px;
    display: block;
}
.form-group small a {
    color: #4a90e2; /* Cor azul para links */
    text-decoration: none;
}
.form-group small a:hover {
    text-decoration: underline; /* Sublinhado no hover */
}
.form-group small strong {
    color: #4a90e2; /* Cor azul para texto destacado */
    font-weight: 600; /* Garante que seja negrito */
}

/* --- NOVO: Borda azul na tag do dashboard --- */
.dashboard-tag-display {
    border: 1px solid #4a90e2; /* Borda azul */
    padding: 2px 6px; /* Pequeno espaçamento interno */
    border-radius: 4px; /* Bordas arredondadas */
    background-color: #eaf4ff; /* Fundo azul muito claro (opcional) */
    display: inline-block; /* Para o padding funcionar corretamente */
    margin-left: 3px; /* Pequeno espaço antes */
}


/* --- Botões --- */
/* Estilo base compartilhado por vários botões */
.btn, .profile-link-button, .btn-edit, .btn-delete {
    display: inline-block; /* Comportamento de bloco mas na linha */
    padding: 10px 22px; /* Espaçamento interno */
    border: none; /* Remove borda padrão */
    border-radius: 6px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor de mão */
    font-size: 1em;
    font-weight: 600; /* Negrito */
    text-align: center;
    text-decoration: none; /* Remove sublinhado de links */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.1s ease, box-shadow 0.2s ease;
    background-color: #4a90e2; /* Cor de fundo padrão (azul) */
    color: #fff; /* Cor do texto padrão (branco) */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra leve */
    border: 1px solid transparent; /* Borda transparente para transição suave */
}

/* Hover padrão (será sobrescrito por botões específicos como os sociais) */
.btn:hover, .profile-link-button:hover {
    background-color: #357abd; /* Azul mais escuro */
    border-color: #357abd; /* Borda correspondente */
    color: #fff; /* Mantém texto branco */
    transform: translateY(-2px); /* Efeito de levantar levemente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada */
}

/* Estilo ao clicar */
.btn:active, .profile-link-button:active {
     transform: translateY(-1px); /* Levanta menos que no hover */
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra volta ao normal */
}

/* Botão Secundário (ex: Registro) */
.btn-secondary {
    background-color: #6c757d; /* Cinza */
    border-color: #6c757d;
    color: #fff;
}
.btn-secondary:hover {
    background-color: #5a6268; /* Cinza mais escuro */
    border-color: #5a6268;
}

/* Botões de Ação Pequenos (Editar/Excluir no Dashboard) */
.btn-edit, .btn-delete {
    padding: 6px 12px; /* Menor padding */
    font-size: 0.9em; /* Fonte menor */
    margin-left: 8px; /* Espaço à esquerda */
    box-shadow: none; /* Sem sombra */
    border: none; /* Sem borda */
}
/* Hover para botões de ação pequenos - escurece um pouco */
.btn-edit:hover, .btn-delete:hover {
     transform: translateY(-1px);
     filter: brightness(90%);
}

.btn-delete {
    background-color: #dc3545; /* Vermelho */
    color: white;
}

/* --- ALTERAÇÃO: Botão Editar agora é VERDE --- */
.btn-edit {
    background-color: #28a745; /* Verde (Bootstrap Success) */
    color: #fff; /* Texto branco para contraste */
}
.btn-edit:hover {
    background-color: #218838; /* Verde mais escuro */
    filter: none; /* Remove o brightness do hover genérico */
}
/* --- FIM ALTERAÇÃO --- */


/* Ícones dentro dos botões de ação */
.btn-edit i, .btn-delete i {
    margin-right: 4px; /* Espaço entre ícone e texto */
    pointer-events: none; /* Evita que o ícone capture eventos */
}

/* --- Mensagens de Feedback (Erro/Sucesso) --- */
#ajax-message-area { /* Container para mensagens AJAX no dashboard */
    margin-top: 15px;
    margin-bottom: 15px;
    min-height: 40px; /* Evita "pulo" do layout */
    /* A mensagem será inserida aqui via JS */
}
.error-message, .success-message {
    padding: 12px 18px;
    border-radius: 6px;
    margin-bottom: 15px; /* Espaço abaixo da mensagem */
    font-weight: 500;
    border: 1px solid transparent;
    opacity: 1;
    transition: opacity 0.5s ease-out; /* Transição suave para esconder */
    text-align: left; /* Alinha texto à esquerda */
}
.error-message {
    color: #721c24; /* Texto vermelho escuro */
    background-color: #f8d7da; /* Fundo rosa claro */
    border-color: #f5c6cb; /* Borda rosa */
}
.success-message {
    color: #155724; /* Texto verde escuro */
    background-color: #d4edda; /* Fundo verde claro */
    border-color: #c3e6cb; /* Borda verde */
}

/* --- Estilos Específicos para Páginas --- */

/* Página de Login/Registro */
.auth-container {
    display: flex; /* Lado a lado em telas maiores */
    flex-wrap: wrap; /* Quebra linha em telas menores */
    gap: 40px; /* Espaço entre os formulários */
    justify-content: space-around; /* Distribui espaço */
}
.auth-form {
    flex: 1; /* Tenta ocupar espaço igual */
    min-width: 320px; /* Largura mínima */
    padding: 25px;
}
.auth-form h2 {
    margin-bottom: 25px;
    text-align: center;
    color: #4a90e2; /* Azul */
    font-weight: 700;
}

/* Painel (Dashboard) */
.dashboard-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 25px;
}
/* Ajuste para as 3 colunas (Perfil, Adicionar/Preview, Lista) */
.profile-edit-section,
.link-form-section, /* Contém Adicionar + Preview */
.link-list-section {
    flex: 1; /* Distribui espaço igualmente por padrão */
    min-width: 320px; /* Largura mínima */
    padding: 25px;
    background-color: #f8f9fa; /* Fundo levemente cinza */
    border-radius: 8px;
    display: flex; /* Para controlar altura interna se necessário */
    flex-direction: column; /* Conteúdo empilha verticalmente */
}

/* Faz a lista de links ser ligeiramente maior */
.link-list-section {
    flex: 1.2;
    background-color: #fff; /* Fundo branco para lista */
}
/* Faz a seção de Adicionar+Preview ter mais espaço */
.link-form-section {
    flex: 1.3;
}


.profile-edit-section h3,
.link-form-section h3,
.link-list-section h3 {
    margin-bottom: 20px;
    color: #343a40; /* Cinza escuro */
    font-weight: 600;
    border-bottom: 2px solid #e9ecef; /* Linha abaixo do título */
    padding-bottom: 8px;
    flex-shrink: 0; /* Impede que título encolha */
}

/* Lista de Links Gerenciáveis (Dashboard) */
.link-list-manage {
    list-style: none; /* Remove marcadores de lista */
    padding: 0;
    flex-grow: 1; /* Ocupa espaço vertical disponível */
    overflow-y: auto; /* Adiciona scroll se necessário */
    max-height: 600px; /* Limita altura máxima (ajustar) */
}
.link-list-manage li {
    background-color: #fff;
    border: 1px solid #e9ecef; /* Borda cinza clara */
    padding: 12px 18px;
    margin-bottom: 12px; /* Espaço entre itens */
    border-radius: 8px;
    display: flex;
    justify-content: space-between; /* Espaça info e ações */
    align-items: center; /* Alinha verticalmente */
    transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.5s ease, padding-left 0.3s ease;
}
.link-list-manage li:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07); /* Sombra no hover */
    border-left: 4px solid #4a90e2; /* Borda azul à esquerda */
    padding-left: 14px; /* Ajusta padding para compensar borda */
}
.link-list-manage .link-info { /* Span que agrupa ícone, título, url */
    display: flex;
    align-items: center;
    gap: 12px; /* Espaço entre ícone, título, url */
    flex-grow: 1; /* Ocupa espaço disponível */
    overflow: hidden; /* Esconde conteúdo que transborda */
    margin-right: 15px; /* Espaço antes dos botões de ação */
}
.link-list-manage .link-info i { /* Ícone na lista */
    color: #4a90e2; /* Cor azul padrão */
    font-size: 1.4em;
    flex-shrink: 0; /* Impede que o ícone encolha */
    width: 25px; /* Largura fixa para alinhamento */
    text-align: center;
}
.link-list-manage .link-info strong { /* Título do link */
     color: #343a40;
     font-weight: 600;
     white-space: nowrap; /* Impede quebra de linha */
     overflow: hidden; /* Esconde excesso */
     text-overflow: ellipsis; /* Adiciona "..." */
     flex-shrink: 1; /* Permite encolher se necessário */
     max-width: 40%; /* Limita largura máxima do título (ajuste conforme necessário) */
}
.link-list-manage .link-info small { /* URL do link */
    color: #6c757d;
    font-size: 0.9em;
    margin-left: 8px; /* Pequeno espaço após título */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* Ocupa espaço restante na linha */
}
.link-list-manage .link-actions { /* Span que agrupa botões Editar/Excluir */
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Impede que os botões encolham */
}
/* Mensagem de 'Nenhum link' no Dashboard */
#no-links-message {
    background-color: transparent; /* Sem fundo */
    border: 1px dashed #ced4da; /* Borda tracejada */
    color: #6c757d; /* Cor cinza */
    justify-content: center; /* Centraliza texto */
    padding: 20px;
    font-style: italic;
    text-align: center;
}
#no-links-message:hover { /* Remove efeitos de hover da mensagem */
    box-shadow: none;
    border-left: 1px dashed #ced4da; /* Mantém borda tracejada */
    padding-left: 18px;
}


/* --- Página de Perfil Público (`profile.php`) --- */
.profile-page {
    padding: 35px 25px; /* Espaçamento interno maior */
    text-align: center; /* Centraliza conteúdo */
}

.profile-header { /* Contém avatar e nome */
    margin-bottom: 35px; /* Espaço abaixo do header */
}

.profile-avatar {
    width: 110px; /* Largura do avatar */
    height: 110px; /* Altura do avatar */
    border-radius: 50%; /* Forma circular */
    margin-bottom: 18px; /* Espaço abaixo do avatar */
    object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
    border: 4px solid #fff; /* Borda branca ao redor */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada */
    display: block; /* Garante centralização com margin auto */
    margin-left: auto;
    margin-right: auto;
}

.profile-header h2 { /* Nome de usuário (@...) */
    font-size: 1.9em; /* Tamanho grande */
    margin-bottom: 8px;
    color: #343a40; /* Cor cinza escuro */
    font-weight: 700; /* Negrito */
}

.profile-bio { /* Estilo para a biografia (se adicionada) */
    font-size: 1em;
    color: #6c757d; /* Cinza */
    max-width: 600px; /* Limita largura da bio */
    margin: 0 auto 20px auto; /* Centraliza e adiciona espaço abaixo */
}

.profile-links { /* Container dos botões de link */
    display: flex;
    flex-direction: column; /* Botões um abaixo do outro */
    gap: 18px; /* Espaço vertical entre os botões */
    max-width: 500px; /* Largura máxima do bloco de botões */
    margin: 0 auto; /* Centraliza o bloco na página */
}

/* Botão de Link no Perfil (Estilo Base) */
.profile-link-button {
    display: flex; /* Alinha ícone e texto */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    width: 100%; /* Ocupa toda a largura do container .profile-links */
    padding: 16px 20px; /* Espaçamento interno generoso */
    background-color: #fff; /* Fundo branco padrão */
    color: #343a40; /* Texto cinza escuro padrão */
    border: 2px solid #e9ecef; /* Borda cinza clara */
    border-radius: 8px; /* Bordas levemente arredondadas */
    font-size: 1.1em; /* Tamanho da fonte */
    font-weight: 600; /* Negrito */
    text-decoration: none;
    transition: all 0.3s ease; /* Transição suave para tudo */
    position: relative; /* Para posicionar elementos filhos se necessário */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05); /* Sombra muito sutil */
}

.profile-link-button i { /* Ícone dentro do botão */
    font-size: 1.3em; /* Tamanho do ícone */
    margin-right: 12px; /* Espaço entre ícone e texto */
    color: #4a90e2; /* Cor padrão do ícone (azul) - será sobrescrita pelos sociais */
    transition: color 0.3s ease; /* Transição suave da cor */
    width: 20px; /* Largura fixa para alinhar ícones */
    text-align: center;
    flex-shrink: 0; /* Impede que o ícone encolha */
}

.profile-link-button span { /* Texto dentro do botão */
    flex-grow: 0; /* Não deixa o texto tentar ocupar espaço extra */
    text-align: center; /* Garante centralização se o ícone não estiver presente */
}


/* Hover Padrão para Botão de Perfil (não social) */
.profile-link-button:not([class*="social-"]):hover { /* Aplica apenas se NÃO tiver classe social-* */
    background-color: #f8f9fa; /* Fundo cinza muito claro */
    color: #343a40; /* Mantém cor do texto */
    border-color: #ced4da; /* Borda cinza um pouco mais escura */
    transform: translateY(-3px) scale(1.01); /* Levanta e aumenta levemente */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Sombra mais pronunciada */
}
.profile-link-button:not([class*="social-"]):hover i {
     color: #357abd; /* Ícone fica azul escuro no hover padrão */
}

/* --- Estilos Específicos para Botões Sociais (Sobrescrevem o base) --- */
/* As classes .social-* são adicionadas via PHP com base no ícone */
/* ... (Estilos sociais como .social-facebook, .social-instagram, etc., continuam os mesmos) ... */
/* Facebook */
.profile-link-button.social-facebook { background-color: #1877F2; border-color: #1877F2; color: #fff; }
.profile-link-button.social-facebook:hover { background-color: #125dbf; border-color: #125dbf; box-shadow: 0 6px 15px rgba(24, 119, 242, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-facebook i { color: #fff; } /* Ícone branco */
/* Instagram */
.profile-link-button.social-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: transparent; color: #fff;
}
.profile-link-button.social-instagram:hover { filter: brightness(90%); border-color: transparent; box-shadow: 0 6px 15px rgba(220, 39, 67, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-instagram i { color: #fff; }
/* Twitter / X */
.profile-link-button.social-twitter, .profile-link-button.social-xing {
    background-color: #000000; border-color: #000000; color: #fff; /* Preto para X por padrão */
}
.profile-link-button.social-twitter:hover, .profile-link-button.social-xing:hover {
    background-color: #333; border-color: #333; box-shadow: 0 6px 15px rgba(0,0,0, 0.3); transform: translateY(-3px) scale(1.01);
}
.profile-link-button.social-twitter i, .profile-link-button.social-xing i { color: #fff; }
/* LinkedIn */
.profile-link-button.social-linkedin { background-color: #0A66C2; border-color: #0A66C2; color: #fff; }
.profile-link-button.social-linkedin:hover { background-color: #08519a; border-color: #08519a; box-shadow: 0 6px 15px rgba(10, 102, 194, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-linkedin i { color: #fff; }
/* YouTube */
.profile-link-button.social-youtube { background-color: #FF0000; border-color: #FF0000; color: #fff; }
.profile-link-button.social-youtube:hover { background-color: #cc0000; border-color: #cc0000; box-shadow: 0 6px 15px rgba(255, 0, 0, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-youtube i { color: #fff; }
/* TikTok */
.profile-link-button.social-tiktok { background-color: #000000; border-color: #000000; color: #fff; /* Preto é comum, mas pode ter detalhes coloridos */ }
.profile-link-button.social-tiktok:hover { background-color: #333; border-color: #333; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-tiktok i { color: #fff; }
/* GitHub */
.profile-link-button.social-github { background-color: #333; border-color: #333; color: #fff; }
.profile-link-button.social-github:hover { background-color: #1a1a1a; border-color: #1a1a1a; box-shadow: 0 6px 15px rgba(51, 51, 51, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-github i { color: #fff; }
/* WhatsApp */
.profile-link-button.social-whatsapp { background-color: #25D366; border-color: #25D366; color: #fff; }
.profile-link-button.social-whatsapp:hover { background-color: #1ebe57; border-color: #1ebe57; box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-whatsapp i { color: #fff; }
/* Telegram */
.profile-link-button.social-telegram { background-color: #24A1DE; border-color: #24A1DE; color: #fff; }
.profile-link-button.social-telegram:hover { background-color: #1e85b9; border-color: #1e85b9; box-shadow: 0 6px 15px rgba(36, 161, 222, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-telegram i { color: #fff; }
/* Pinterest */
.profile-link-button.social-pinterest { background-color: #E60023; border-color: #E60023; color: #fff; }
.profile-link-button.social-pinterest:hover { background-color: #b8001c; border-color: #b8001c; box-shadow: 0 6px 15px rgba(230, 0, 35, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-pinterest i { color: #fff; }
/* Spotify */
.profile-link-button.social-spotify { background-color: #1DB954; border-color: #1DB954; color: #fff; }
.profile-link-button.social-spotify:hover { background-color: #179443; border-color: #179443; box-shadow: 0 6px 15px rgba(29, 185, 84, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-spotify i { color: #fff; }
/* Discord */
.profile-link-button.social-discord { background-color: #5865F2; border-color: #5865F2; color: #fff; }
.profile-link-button.social-discord:hover { background-color: #4752c4; border-color: #4752c4; box-shadow: 0 6px 15px rgba(88, 101, 242, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-discord i { color: #fff; }
/* Twitch */
.profile-link-button.social-twitch { background-color: #9146FF; border-color: #9146FF; color: #fff; }
.profile-link-button.social-twitch:hover { background-color: #772ce8; border-color: #772ce8; box-shadow: 0 6px 15px rgba(145, 70, 255, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-twitch i { color: #fff; }
/* Adicione mais estilos sociais aqui (Snapchat, Reddit, Medium, etc.) */
.profile-link-button.social-snapchat { background-color: #FFFC00; border-color: #FFFC00; color: #000; }
.profile-link-button.social-snapchat:hover { background-color: #e6e300; border-color: #e6e300; box-shadow: 0 6px 15px rgba(255, 252, 0, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-snapchat i { color: #000; }
.profile-link-button.social-reddit { background-color: #FF4500; border-color: #FF4500; color: #fff; }
.profile-link-button.social-reddit:hover { background-color: #cc3700; border-color: #cc3700; box-shadow: 0 6px 15px rgba(255, 69, 0, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-reddit i { color: #fff; }
.profile-link-button.social-medium { background-color: #000000; border-color: #000000; color: #fff; }
.profile-link-button.social-medium:hover { background-color: #333; border-color: #333; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-medium i { color: #fff; }
/* Estilos para ícones genéricos (opcional) */
.profile-link-button.social-email { background-color: #7f8c8d; border-color: #7f8c8d; color: #fff; } /* Cinza */
.profile-link-button.social-email:hover { background-color: #606c6d; border-color: #606c6d; box-shadow: 0 6px 15px rgba(127, 140, 141, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-email i { color: #fff; }
.profile-link-button.social-website { background-color: #3498db; border-color: #3498db; color: #fff; } /* Azul claro */
.profile-link-button.social-website:hover { background-color: #2980b9; border-color: #2980b9; box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4); transform: translateY(-3px) scale(1.01); }
.profile-link-button.social-website i { color: #fff; }
.profile-link-button.social-link { /* Link genérico */
    background-color: #e9ecef; border-color: #e9ecef; color: #343a40;
}
.profile-link-button.social-link:hover {
    background-color: #ced4da; border-color: #ced4da; box-shadow: 0 6px 15px rgba(0,0,0, 0.1); transform: translateY(-3px) scale(1.01);
}
.profile-link-button.social-link i { color: #4a90e2; } /* Ícone azul */


/* --- Modal de Edição (Dashboard) --- */
.modal {
    display: none; /* Escondido por padrão, mostrado via JS */
    position: fixed; /* Fixo na tela */
    z-index: 1050; /* Acima de outros conteúdos */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite rolar se o conteúdo for maior que a tela */
    background-color: rgba(0,0,0,0.6); /* Fundo preto semitransparente */
    padding-top: 50px; /* Espaço acima para animação */
}
.modal-content {
    background-color: #fefefe; /* Fundo branco */
    margin: 5% auto; /* Centraliza verticalmente (aproximado) e horizontalmente */
    padding: 30px;
    border: none;
    width: 90%; /* Responsivo */
    max-width: 550px; /* Largura máxima */
    border-radius: 8px;
    position: relative; /* Para posicionar o botão de fechar */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra */
    animation: slideDownModal 0.4s ease-out; /* Animação de entrada */
}
@keyframes slideDownModal { /* Animação de deslizar para baixo */
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.close-modal { /* Botão 'X' para fechar */
    color: #aaa; /* Cinza claro */
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}
.close-modal:hover,
.close-modal:focus {
    color: #333; /* Escurece no hover/focus */
    text-decoration: none;
}
.modal h3 { /* Título do modal */
     margin-top: 0;
     margin-bottom: 25px;
     color: #4a90e2; /* Azul */
     font-weight: 700;
     text-align: center;
}
/* Área para mensagens de erro dentro do modal */
.modal-error-area {
    margin-bottom: 15px;
}


/* --- NOVO: Estilos da Pré-visualização do Smartphone --- */
.smartphone-preview-container {
    margin-top: 30px; /* Espaço acima da pré-visualização */
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    text-align: center; /* Centraliza a moldura */
}
.smartphone-preview-container h4 {
    margin-bottom: 15px;
    color: #6c757d;
    font-weight: 500;
}

.smartphone-frame {
    width: 280px; /* Largura da moldura */
    height: 580px; /* Altura da moldura */
    border: 12px solid #111; /* Borda preta grossa */
    border-radius: 36px; /* Bordas arredondadas */
    background-color: #f8f9fa; /* Fundo interno cinza claro */
    margin: 0 auto; /* Centraliza */
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

.smartphone-top {
    height: 25px; /* Altura da área superior (notch simulado) */
    background-color: #111; /* Preto */
    border-radius: 24px 24px 0 0; /* Arredonda topo */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}
.smartphone-top .camera {
    width: 6px;
    height: 6px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    left: 40px;
}
.smartphone-top .speaker {
    width: 40px;
    height: 5px;
    background-color: #333;
    border-radius: 3px;
}

.smartphone-screen {
    flex-grow: 1; /* Ocupa o espaço restante */
    background-color: #fff; /* Fundo branco da tela */
    overflow-y: auto; /* Scroll vertical se conteúdo exceder */
    overflow-x: hidden; /* Sem scroll horizontal */
    padding: 15px 10px; /* Espaçamento interno da tela */
    /* Simula um pouco a aparência do profile.php */
    text-align: center;
}

/* Estilos para elementos DENTRO da tela de preview */
.profile-page-preview { /* Wrapper interno opcional */
    /* padding: 10px 5px; */
}
.profile-header-preview {
    margin-bottom: 20px;
}
.profile-avatar-preview {
    width: 70px; /* Tamanho menor para preview */
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 10px auto;
    border: 3px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: block;
}
.profile-username-preview {
    font-size: 1.2em; /* Tamanho menor */
    font-weight: 600;
    color: #333;
    margin: 0;
}
.profile-links-preview {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaço menor entre links */
}
.profile-link-button-preview {
    /* Estilo base similar ao .profile-link-button, mas menor */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 15px; /* Padding menor */
    background-color: #fff;
    color: #343a40;
    border: 1px solid #e0e0e0; /* Borda mais fina */
    border-radius: 6px;
    font-size: 0.9em; /* Fonte menor */
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: default; /* Indica que não é clicável */
}
.profile-link-button-preview i {
    font-size: 1.1em;
    margin-right: 8px;
    color: #4a90e2; /* Cor padrão */
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.profile-link-button-preview span {
    flex-grow: 0;
    text-align: center;
     white-space: nowrap; /* Evita quebra de linha */
     overflow: hidden;
     text-overflow: ellipsis; /* Adiciona "..." se muito longo */
}
/* Aplica estilos sociais também na preview */
/* (Reutiliza as mesmas classes .social-*, mas o estilo base é .profile-link-button-preview) */
.profile-link-button-preview.social-facebook { background-color: #1877F2; border-color: #1877F2; color: #fff; }
.profile-link-button-preview.social-facebook i { color: #fff; }
.profile-link-button-preview.social-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #bc1888); border-color: transparent; color: #fff;}
.profile-link-button-preview.social-instagram i { color: #fff; }
.profile-link-button-preview.social-twitter, .profile-link-button-preview.social-xing { background-color: #000; border-color: #000; color: #fff; }
.profile-link-button-preview.social-twitter i, .profile-link-button-preview.social-xing i { color: #fff; }
.profile-link-button-preview.social-linkedin { background-color: #0A66C2; border-color: #0A66C2; color: #fff; }
.profile-link-button-preview.social-linkedin i { color: #fff; }
.profile-link-button-preview.social-youtube { background-color: #FF0000; border-color: #FF0000; color: #fff; }
.profile-link-button-preview.social-youtube i { color: #fff; }
.profile-link-button-preview.social-tiktok { background-color: #000; border-color: #000; color: #fff; }
.profile-link-button-preview.social-tiktok i { color: #fff; }
.profile-link-button-preview.social-github { background-color: #333; border-color: #333; color: #fff; }
.profile-link-button-preview.social-github i { color: #fff; }
.profile-link-button-preview.social-whatsapp { background-color: #25D366; border-color: #25D366; color: #fff; }
.profile-link-button-preview.social-whatsapp i { color: #fff; }
.profile-link-button-preview.social-telegram { background-color: #24A1DE; border-color: #24A1DE; color: #fff; }
.profile-link-button-preview.social-telegram i { color: #fff; }
.profile-link-button-preview.social-pinterest { background-color: #E60023; border-color: #E60023; color: #fff; }
.profile-link-button-preview.social-pinterest i { color: #fff; }
.profile-link-button-preview.social-spotify { background-color: #1DB954; border-color: #1DB954; color: #fff; }
.profile-link-button-preview.social-spotify i { color: #fff; }
.profile-link-button-preview.social-discord { background-color: #5865F2; border-color: #5865F2; color: #fff; }
.profile-link-button-preview.social-discord i { color: #fff; }
.profile-link-button-preview.social-twitch { background-color: #9146FF; border-color: #9146FF; color: #fff; }
.profile-link-button-preview.social-twitch i { color: #fff; }
.profile-link-button-preview.social-website { background-color: #3498db; border-color: #3498db; color: #fff; }
.profile-link-button-preview.social-website i { color: #fff; }
.profile-link-button-preview.social-email { background-color: #7f8c8d; border-color: #7f8c8d; color: #fff; }
.profile-link-button-preview.social-email i { color: #fff; }
.profile-link-button-preview.social-link { background-color: #e9ecef; border-color: #e9ecef; color: #343a40; }
.profile-link-button-preview.social-link i { color: #4a90e2; }

.no-links-preview {
    font-style: italic;
    color: #999;
    font-size: 0.9em;
    margin-top: 20px;
}

/* Scrollbar da tela do smartphone */
.smartphone-screen::-webkit-scrollbar {
    width: 5px;
}
.smartphone-screen::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.smartphone-screen::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.smartphone-screen::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

.smartphone-bottom {
    height: 40px; /* Altura da área inferior */
    background-color: #111;
    border-radius: 0 0 24px 24px; /* Arredonda base */
    display: flex;
    justify-content: center;
    align-items: center;
}
.smartphone-bottom .home-button {
    width: 50px;
    height: 5px;
    background-color: #333;
    border-radius: 3px;
}
/* --- FIM Estilos Smartphone Preview --- */


/* --- Responsividade --- */

/* Telas Grandes (Ajuste para acomodar preview) */
@media (min-width: 992px) {
    .container {
        max-width: 1200px; /* Aumenta um pouco mais se necessário */
    }
    .dashboard-content {
        /* Garante que as 3 colunas fiquem lado a lado */
        flex-wrap: nowrap;
    }
     /* Ajusta bases flex para melhor distribuição com preview */
    .profile-edit-section { flex-basis: 28%; }
    .link-form-section { flex-basis: 38%; } /* Mais espaço para form + preview */
    .link-list-section { flex-basis: 34%; }
}

/* Telas Médias (Tablets) */
@media (max-width: 991px) { /* Ajustado o breakpoint */
    body {
        padding: 10px; /* Reduz padding do body */
    }
    .container {
        width: 100%;
        min-height: calc(100vh - 20px); /* Ajusta altura mínima */
        border-radius: 8px;
        max-width: 90%; /* Reduz max-width */
    }
    .main-header {
        padding: 15px;
        flex-direction: column; /* Logo acima da navegação */
        text-align: center;
    }
    .main-header nav {
        margin-top: 10px;
        justify-content: center; /* Centraliza links */
        flex-wrap: wrap; /* Permite quebrar linha */
    }
    .main-header nav a {
        margin: 3px 5px; /* Ajusta margem */
    }
    main {
        padding: 20px; /* Reduz padding do main */
    }
    .auth-container {
        flex-direction: column; /* Formulários um abaixo do outro */
        gap: 25px;
    }
     .dashboard-content {
        flex-direction: column; /* Colunas do dashboard uma abaixo da outra */
        gap: 25px;
    }
     /* Remove bases flex para empilhar */
    .profile-edit-section,
    .link-form-section,
    .link-list-section {
        flex-basis: auto;
        min-width: unset;
    }
    /* Centraliza preview no tablet */
    .smartphone-preview-container {
        margin-top: 40px; /* Mais espaço */
    }


    /* Ajuste lista de links no dashboard mobile */
    .link-list-manage li {
        flex-direction: column; /* Empilha info e ações */
        align-items: flex-start; /* Alinha itens à esquerda */
        gap: 10px; /* Espaço entre info e ações */
        padding: 15px;
    }
    .link-list-manage li:hover {
        padding-left: 15px; /* Mantém padding esquerdo */
        border-left: 1px solid #e9ecef; /* Remove destaque da borda no hover */
    }
    .link-list-manage .link-info {
        white-space: normal; /* Permite quebra de linha no título/url */
        margin-right: 0;
        margin-bottom: 5px;
        width: 100%; /* Ocupa largura total */
    }
     .link-list-manage .link-info strong {
        max-width: none; /* Remove limite de largura do título */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .link-list-manage .link-info small {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-all; /* Quebra URLs longas */
    }
    .link-list-manage .link-actions {
        width: 100%; /* Botões ocupam largura */
        justify-content: flex-end; /* Alinha botões à direita */
    }
    /* Ajustes Página de Perfil Mobile */
     .profile-page {
        padding: 25px 15px; /* Reduz padding */
    }
     .profile-avatar {
        width: 90px; /* Reduz avatar */
        height: 90px;
    }
    .profile-header h2 {
        font-size: 1.6em; /* Reduz nome */
    }
    .profile-links {
        max-width: none; /* Botões ocupam largura total */
    }
    .profile-link-button {
        font-size: 1em; /* Reduz fonte do botão */
        padding: 14px 20px; /* Reduz padding do botão */
    }
     .modal-content { /* Modal em telas menores */
        width: 90%;
        padding: 25px;
        margin-top: 10%; /* Sobe um pouco */
    }
}

/* Telas Pequenas (Smartphones) */
@media (max-width: 480px) {
    html { font-size: 15px; } /* Reduz tamanho base da fonte */
    body { padding: 5px; } /* Menos padding ainda */
    .container { min-height: calc(100vh - 10px); max-width: 100%; }
    .main-header h1 { font-size: 1.4em; }
    .main-header nav a { font-size: 0.9em; padding: 4px 8px;}
    .main-header nav span { font-size: 0.9em; }
    main { padding: 15px; }
    .btn, .profile-link-button, .btn-edit, .btn-delete { font-size: 0.95em; }
    .profile-link-button { padding: 12px 18px; gap: 10px; } /* Menos padding e gap no botão de perfil */
    .profile-link-button i { font-size: 1.2em; margin-right: 8px; }
    .profile-avatar { width: 80px; height: 80px; }
    .profile-header h2 { font-size: 1.4em; }
    .modal-content { padding: 20px; }
    .modal h3 { font-size: 1.3em; margin-bottom: 20px; }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group input[type="url"] { padding: 10px 12px; } /* Menos padding nos inputs */

    .smartphone-frame { /* Reduz preview no mobile */
        width: 240px;
        height: 500px;
        border-width: 10px;
        border-radius: 30px;
    }
    .smartphone-screen { padding: 10px 8px; }
    .profile-avatar-preview { width: 60px; height: 60px; }
    .profile-username-preview { font-size: 1.1em; }
    .profile-link-button-preview { padding: 8px 12px; font-size: 0.85em; }
    .profile-link-button-preview i { font-size: 1em; margin-right: 6px; }

}