/* style.css */

/* ===== Variáveis de Cores (Tema Dracula/Neon) ===== */
:root {
    --bg-gradient-start: #1a1a2e; /* Roxo/azul escuro inicial */
    --bg-gradient-end: #16213e;   /* Azul petróleo escuro final */
    --panel-bg: rgba(44, 44, 62, 0.85); /* #2c2c3e com transparência */
    --card-bg: #282a36;        /* Fundo principal Dracula */
    --text-color: #e0e0ff;     /* Texto padrão claro com matiz azulado */
    --label-color: #bd93f9;    /* Roxo claro (Dracula Purple) para labels */
    --input-bg: #44475a;        /* Cinza escuro (Dracula Selection) para fundos de input */
    --input-border: #6272a4;    /* Cinza médio (Dracula Comment) para bordas */
    --input-text: #f8f8f2;        /* Branco (Dracula Foreground) para texto de input */
    --button-bg: #bd93f9;        /* Roxo claro (Dracula Purple) para botões principais */
    --button-text: #f8f8f2;
    --button-hover-bg: #ff79c6; /* Rosa neon (Dracula Pink) para hover de botão */
    --link-button-bg: #44475a; /* Cinza escuro para botões de link */
    --link-button-text: #f8f8f2;
    --link-hover-bg: #6272a4; /* Cinza médio para hover de link */
    --border-color: #bd93f9;    /* Roxo claro para bordas de destaque */
    --shadow-color: rgba(0, 0, 0, 0.5); /* Sombra mais pronunciada */
    --icon-color: #f8f8f2;
    --neon-green: #50fa7b;      /* Verde neon (Dracula Green) */
    --neon-pink: #ff79c6;       /* Rosa neon (Dracula Pink) */
    --neon-purple: #bd93f9;     /* Roxo claro (Dracula Purple) */
    --neon-yellow: #f1fa8c;     /* Amarelo claro (Dracula Yellow) */
    --comment-grey: #6272a4;    /* Cinza Comentário (Dracula Comment) */
}

/* ===== Reset Básico e Configurações Globais ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end)); /* Gradiente de fundo */
    color: var(--text-color);
    line-height: 1.6;
    padding: 20px;
    display: flex;           /* Para controle do layout e footer */
    flex-direction: column;  /* Itens empilhados verticalmente */
    min-height: 100vh;       /* Garante que o body ocupe pelo menos a altura da tela */
}

/* ===== Container Principal ===== */
.main-container {
    display: flex;
    gap: 30px; /* Espaço entre painéis */
    max-width: 1400px;
    width: 95%; /* Evita colar nas bordas */
    margin: 20px auto; /* Centraliza horizontalmente, com margem em cima/baixo */
    padding: 25px;
    background-color: var(--panel-bg); /* Fundo semi-transparente */
    border-radius: 15px;
    box-shadow: 0 8px 25px var(--shadow-color);
    flex: 1; /* Faz o container crescer para empurrar o footer */
}

/* ===== Painéis (Editor e Preview) ===== */
.editor-panel, .preview-panel {
    flex: 1; /* Ocupa espaço disponível igualmente */
    padding: 25px;
    background-color: transparent; /* Herda o fundo do container principal */
    border-radius: 10px;
    min-width: 300px; /* Largura mínima */
    height: fit-content; /* Altura baseada no conteúdo */
}

.editor-panel h2, .preview-panel h2 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--text-color);
    font-size: 1.8em;
    font-weight: 600;
}

.editor-panel h2 .neon-icon, .preview-panel h2 .neon-icon {
    color: var(--neon-pink); /* Ícone rosa neon */
    margin-right: 8px;
}

.editor-panel h2 .geek {
    color: var(--neon-green); /* Título neon verde */
    font-family: 'Orbitron', sans-serif; /* Fonte especial */
}


/* --- Estilos do Editor --- */
.editor-panel section {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--input-border); /* Linha divisória sutil */
}

.editor-panel section:last-of-type {
    border-bottom: none; /* Remove a última borda */
}

.editor-panel h3 {
    margin-bottom: 20px;
    color: var(--text-color);
    border-left: 4px solid var(--border-color); /* Borda lateral roxa */
    padding-left: 12px;
    font-size: 1.2em;
    font-weight: 500;
}

.editor-panel h3 i {
    margin-right: 8px;
    color: var(--neon-purple); /* Ícone roxo */
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--label-color); /* Label roxo */
    font-size: 0.95em;
}

.form-group .icon-input {
    margin-right: 5px;
    width: 15px; /* Alinhamento */
    text-align: center;
    color: var(--neon-yellow); /* Ícones de input amarelos */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="url"]:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--neon-green); /* Borda verde neon no foco */
    box-shadow: 0 0 0 3px rgba(80, 250, 123, 0.3); /* Sombra externa verde neon */
}

.form-group input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--label-color);
    font-size: 0.9rem;
    cursor: pointer;
}
.form-group input[type="file"]::file-selector-button {
    background-color: var(--link-button-bg);
    color: var(--link-button-text);
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

.form-group input[type="color"] {
    padding: 0; /* Remove padding extra */
    height: 45px; /* Altura consistente */
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    cursor: pointer;
    -webkit-appearance: none; /* Remove aparência padrão do WebKit */
    -moz-appearance: none; /* Remove aparência padrão do Firefox */
    appearance: none;
}
/* Estilos específicos para o preview da cor no Chrome/Edge */
.form-group input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 5px; /* Espaçamento interno */
    border-radius: 8px;
}
.form-group input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 5px; /* Borda arredondada interna */
}
/* Estilos específicos para o preview da cor no Firefox */
.form-group input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 5px; /* Borda arredondada interna */
    margin: 5px; /* Equivalente ao padding no WebKit */
}


.form-group .upload-label {
    margin-top: 10px;
    display: block;
    font-size: 0.9em;
}

.form-group .color-label {
    margin-top: 10px;
    display: block;
}

.form-group .input-group {
    display: flex;
    gap: 10px;
}

.form-group .input-group select {
    flex: 0 0 100px; /* Largura fixa para o código do país */
}

.form-group .input-group input {
    flex: 1; /* Input ocupa o resto */
}

.radio-group label {
    margin-right: 15px;
    font-weight: normal;
    color: var(--text-color);
    cursor: pointer;
}

.radio-group input[type="radio"] {
    margin-right: 5px;
    accent-color: var(--neon-pink); /* Cor do radio button marcado */
    cursor: pointer;
}


/* --- Estilos do Preview --- */
#preview-card {
    max-width: 350px; /* Largura máxima do cartão */
    width: 100%;
    margin: 20px auto; /* Centraliza */
    padding: 35px 25px; /* Mais padding interno */
    border-radius: 15px;
    background: var(--card-bg); /* Fundo do cartão Dracula */
    box-shadow: 0 6px 15px var(--shadow-color);
    text-align: center;
    border: 1px solid var(--comment-grey); /* Borda sutil cinza */
    color: var(--text-color);
    overflow: hidden; /* Garante que nada vaze */
    transition: background 0.5s ease; /* Transição suave de fundo (caso mude) */
}

#preview-foto-container {
    margin-bottom: 20px; /* Espaço abaixo da foto */
    width: 110px; /* Tamanho do container */
    height: 110px;
    margin-left: auto;
    margin-right: auto;
}

#preview-foto {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Foto redonda */
    object-fit: cover; /* Cobre o espaço sem distorcer */
    border: 5px solid var(--input-bg); /* Borda cinza escuro */
    box-shadow: 0 4px 8px var(--shadow-color);
    background-color: var(--input-border); /* Fundo enquanto carrega */
    display: block;
}

#preview-nome {
    font-size: 1.6em; /* Tamanho maior */
    font-weight: 600;
    margin-bottom: 10px; /* Menos espaço antes dos links */
    color: var(--text-color);
    word-wrap: break-word; /* Quebra nomes longos */
}

#preview-links {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 18px; /* Mais espaço entre links */
}

#preview-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px; /* Botões maiores */
    border-radius: 8px;
    background-color: var(--link-button-bg); /* Fundo padrão cinza escuro */
    color: var(--link-button-text); /* Texto branco */
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--input-border); /* Borda sutil */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

#preview-links a:hover {
    transform: translateY(-3px); /* Efeito de levantar no hover */
    background-color: var(--link-hover-bg); /* Fundo cinza médio no hover */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

#preview-links a:focus {
    outline: 2px solid var(--neon-pink); /* Outline rosa neon no foco */
    outline-offset: 2px;
}

#preview-links a i {
    margin-right: 12px;
    font-size: 1.3em; /* Ícones maiores */
    width: 25px; /* Largura fixa para alinhamento */
    text-align: center;
    color: inherit; /* Herda cor do link */
    transition: color 0.3s ease; /* Suaviza mudança de cor do ícone */
}

#preview-links a span {
    flex-grow: 1; /* O texto ocupa o espaço restante */
    text-align: center; /* Centraliza o texto do link */
    word-wrap: break-word; /* Quebra textos longos nos botões */
}

/* Específico para cores oficiais que usam gradiente (ex: Instagram) */
#preview-links a[style*="linear-gradient"] {
    border: none; /* Remove borda padrão quando há gradiente */
}
#preview-links a[style*="linear-gradient"]:hover {
    filter: brightness(1.15); /* Aumenta o brilho do gradiente no hover */
}

/* Ícones Font Awesome (Garantindo a fonte) */
.fab, .fas {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
    font-weight: 900; /* Necessário para ícones sólidos e de marca */
}


/* ===== Botões de Exportação ===== */
.export-buttons {
    margin-top: 30px;
    text-align: center;
    display: flex;
    flex-wrap: wrap; /* Quebra em telas menores */
    gap: 15px;
    justify-content: center; /* Centraliza os botões */
}

.export-buttons button {
    padding: 12px 22px; /* Botões mais robustos */
    background-color: var(--button-bg); /* Fundo roxo */
    color: var(--button-text); /* Texto branco */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Espaço entre ícone e texto */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.export-buttons button i {
    font-size: 1.1em;
}

.export-buttons button:hover {
    background-color: var(--button-hover-bg); /* Fundo rosa neon no hover */
    transform: translateY(-2px); /* Levanta levemente */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.export-buttons button:disabled {
    background-color: var(--comment-grey); /* Cinza desabilitado */
    color: var(--input-border);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: grayscale(0.5);
}

/* Classe Utilitária para Ocultar Elementos */
.hidden {
    display: none !important;
}


/* ===== Rodapé ===== */
footer {
    text-align: center;
    padding: 25px 15px; /* Mais espaçamento vertical */
    margin-top: 30px;
    font-size: 0.9rem;
    color: var(--comment-grey); /* Cinza claro para texto do rodapé */
    background: var(--bg-gradient-start); /* Fundo igual ao início do gradiente */
    border-top: 1px solid var(--input-border); /* Linha superior */
    flex-shrink: 0; /* Impede que o rodapé encolha */
}

.footer-links {
    margin-bottom: 10px; /* Espaço entre links e copyright */
}

.footer-links a,
.footer-links a:visited {
    color: var(--label-color); /* Roxo claro para links */
    text-decoration: none;
    margin: 0 8px; /* Mais espaço horizontal */
    transition: color 0.3s ease;
    font-weight: 500;
}

.footer-links a:hover {
    color: var(--neon-pink); /* Rosa neon no hover */
    text-decoration: underline;
}

.footer-links span { /* Separador "|" */
    margin: 0 5px;
    color: var(--input-border); /* Cor sutil para o separador */
}

.footer-links .geek, footer .geek {
    color: var(--neon-green); /* Verde Neon */
    font-family: 'Orbitron', sans-serif; /* Fonte diferenciada */
    font-weight: 700;
}

.footer-links .code, footer .code {
    color: var(--neon-pink); /* Rosa Neon */
    font-family: 'Orbitron', sans-serif; /* Fonte diferenciada */
    font-weight: 700;
    margin-left: -2px; /* Ajuste fino de espaçamento */
}

.copyright {
    font-size: 0.85em;
}

/* ===== Responsividade ===== */
@media (max-width: 992px) {
    .main-container {
        flex-direction: column; /* Empilha painéis em telas médias */
        padding: 20px;
        width: 90%; /* Mais largo em telas menores */
    }

    .editor-panel, .preview-panel {
        width: 100%;
        min-width: unset; /* Remove largura mínima */
    }

    #preview-card {
        max-width: 80%; /* Cartão mais largo */
        margin: 30px auto; /* Mais margem */
    }
}

@media (max-width: 768px) {
    body {
        padding: 15px; /* Menos padding geral */
    }

    .main-container {
        padding: 15px;
        gap: 20px; /* Menos espaço entre painéis empilhados */
    }

    .editor-panel, .preview-panel {
        padding: 20px; /* Menos padding interno */
    }

    .editor-panel h2, .preview-panel h2 {
        font-size: 1.6em;
        margin-bottom: 25px;
    }
    .editor-panel h3 {
        font-size: 1.1em;
        margin-bottom: 15px;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group input[type="url"],
    .form-group select,
    .form-group input[type="color"] {
        padding: 10px 12px;
        height: 42px;
    }

    .form-group .input-group {
        flex-direction: column; /* Empilha DDI e número */
        gap: 8px;
    }

    .form-group .input-group select {
        flex: unset; /* Remove flex fixo */
        width: 100%;
    }

    #preview-card {
        max-width: 90%; /* Quase largura total */
        padding: 25px 15px;
    }

     #preview-foto-container {
        width: 100px;
        height: 100px;
     }
    #preview-foto {
        border-width: 4px;
    }
    #preview-nome {
        font-size: 1.4em;
    }
     #preview-links {
        gap: 15px;
    }
    #preview-links a {
        padding: 12px 15px;
        font-size: 0.95em;
    }
     #preview-links a i {
        font-size: 1.2em;
        width: 20px;
     }

    .export-buttons {
        flex-direction: column; /* Botões empilhados */
        gap: 12px;
    }
    .export-buttons button {
        width: 100%; /* Botões ocupam largura total */
        justify-content: center; /* Centraliza texto e ícone */
    }

    footer {
        padding: 20px 10px;
        font-size: 0.85rem;
    }
    .footer-links {
        line-height: 1.8; /* Melhora leitura dos links empilhados */
    }
    .footer-links a {
        margin: 0 5px;
    }
}

@media (max-width: 480px) {
    body { padding: 10px; }
    .main-container { padding: 10px; width: 95%; gap: 15px; }
    .editor-panel, .preview-panel { padding: 15px; }
    .editor-panel h2, .preview-panel h2 { font-size: 1.4em; margin-bottom: 20px; }
    .editor-panel h3 { font-size: 1em; }
     #preview-card { max-width: 95%; padding: 20px 10px;}
     #preview-foto-container { width: 90px; height: 90px; margin-bottom: 15px; }
     #preview-nome { font-size: 1.3em; }
     #preview-links { gap: 12px; margin-top: 20px; }
     #preview-links a { padding: 10px 12px; }
     footer { font-size: 0.8rem; }
}