/* ===== Reset básico do layout ===== */
* {
    margin: 0; /* Remove margens padrão */
    padding: 0; /* Remove espaçamentos internos padrão */
    box-sizing: border-box; /* Inclui padding e borda no cálculo do tamanho */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte padrão moderna */
}

/* ===== Estilização geral do body ===== */
body {
    min-height: 100vh; /* Ocupa pelo menos a altura total da tela */
    display: flex; /* Permite usar flexbox */
    flex-direction: column; /* Alinha os filhos em coluna */
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    background-color: rgb(12, 25, 51); /* Fundo azul escuro */
    color: #fff; /* Cor do texto */
}

/* ===== Logo (fora do container principal) ===== */
.logo-container {
    margin-bottom: 40px; /* Espaço entre a logo e o restante */
}

.logo {
    width: 180px; /* Tamanho da logo */
    transition: transform 0.3s ease; /* Suaviza o efeito ao passar o mouse */
}

.logo:hover {
    transform: scale(1.1); /* Aumenta um pouco ao passar o mouse */
}

/* ===== Container principal ===== */
.container {
    background-color: rgba(255, 255, 255, 0.05); /* Levemente transparente */
    padding: 30px;
    border-radius: 25px; /* Cantos arredondados */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); /* Sombra ao redor */
    text-align: center;
    width: 380px;
    backdrop-filter: blur(10px); /* Efeito de desfoque de fundo (glassmorphism) */
}

/* ===== Campo de texto (textarea) ===== */
textarea {
    width: 100%; /* Ocupa toda a largura do container */
    padding: 14px;
    border-radius: 12px;
    border: none;
    resize: none; /* Desativa redimensionamento manual */
    font-size: 16px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.2); /* Fundo transparente */
    color: #fff; /* Texto branco */
}

textarea::placeholder {
    color: #e0e0e0; /* Cor mais clara para o placeholder */
}

textarea:focus {
    outline: none;
    box-shadow: 0 0 15px rgb(12, 157, 195); /* Brilho ao focar */
}

/* ===== Estilo da imagem do QR Code ===== */
.qr-image {
    width: 250px;
    height: 250px;
    margin: 20px auto; /* Centraliza horizontalmente e dá espaçamento */
    border-radius: 15px;
    background: #fff; /* Fundo branco (obrigatório para QR Codes) */
    padding: 10px;
    display: none; /* Só aparece quando o QR for gerado */
}

/* ===== Botões ===== */
.buttons {
    display: flex;
    flex-direction: column; /* Um botão embaixo do outro */
    gap: 12px; /* Espaço entre os botões */
}

/* Estilo padrão dos botões principais */
.bubbly-button {
    background-color: rgb(12, 157, 195); /* Azul vivo */
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    position: relative;
    overflow: hidden; /* Necessário pro efeito de brilho */
}

/* Botão de download (aparece depois que o QR é gerado) */
.bubbly-button.download {
    background-color: rgb(73, 120, 151); /* Azul mais escuro */
    display: none; /* Invisível até o QR ser criado */
}

/* Botão menor (Resetar) com fundo branco e texto colorido */
.bubbly-button.menor {
    background-color: #fff;
    color: rgb(73, 120, 151);
}

/* Efeito hover nos botões (elevação e brilho) */
.bubbly-button:hover {
    transform: translateY(-3px); /* Sobe levemente */
    filter: brightness(1.1); /* Fica mais claro */
}

/* ===== Efeito visual de "brilho" nos botões ===== */
.bubbly-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%; /* Começa fora da esquerda */
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Faixa de brilho */
    transform: skewX(-25deg); /* Inclinação da faixa */
    transition: all 0.5s ease;
}

.bubbly-button:hover::after {
    left: 125%; /* Se move até fora da direita */
}