@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap");

:root {
   --card-width: 200px;
   --card-height: 300px;
   --gold: linear-gradient(135deg, #f5d061 0%, #e6af2e 45%, #cf9911 100%);
   --dark: #121212;
   --neon: #f5d061;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
   background-color: #000000;
   font-family: 'Montserrat', sans-serif;
   overflow-x: hidden;
}

/* === CABEÇALHO === */
.header-main-nav {
    display: flex;
    justify-content: space-between; 
    align-items: center;            
    padding: 10px 40px;             
    background-color: rgba(0, 0, 0, 0.9); 
    position: fixed;                
    top: 0;
    width: 100%;
    z-index: 1000;
    height: 100px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo img { 
    height: 80px;      
    width: auto;
    object-fit: contain;
}

.main-nav ul {
    list-style: none; 
    display: flex; 
    gap: 25px;         
    align-items: center;
}

.main-nav a { 
    color: white; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 16px;
    transition: 0.3s;
}

.main-nav a:hover { 
    color: #daa520;    
}

.login-btn {
    border: 1px solid #daa520;
    padding: 8px 20px !important;
    border-radius: 5px;
    color: #daa520 !important;
    text-decoration: none;
    transition: 0.3s;
}

.login-btn:hover {
    background-color: #daa520;
    color: black !important;
}

/* === HERO SECTION CORRIGIDA === */
.hero {
   position: relative;
   width: 100%;
   min-height: 100vh; /* Garante que a imagem apareça e ocupe a tela */
   background-image: url('../images/Gemini_Generated_Image_7zfjft7zfjft7zfj.webp');
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding-top: 120px; /* Compensa o header */
   padding-bottom: 120px; /* Dá espaço para os status lá embaixo */
}

.hero::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 200px;
   background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 70%, #000 100%);
   pointer-events: none;
}

.content-hero {
   text-align: center;
   z-index: 2;
   max-width: 600px;
   color: rgb(216, 159, 15);
   margin-bottom: 40px; /* Espaço para não encostar nos cards abaixo */
}

.content-hero h1 {
   font-size: 3rem;
   line-height: 1.2;
   text-shadow: 2px 2px 8px rgba(0,0,0,0.8); /* Ajuda a leitura */
}

/* === CARDS DE SERVIÇO (Agrupados junto à Hero) === */
.servicos-wrapper {
    position: relative;
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    width: 90%;
    max-width: 1200px;
}

.servico-item {
    background: rgba(8, 17, 25, 0.7); 
    backdrop-filter: blur(5px); 
    border: 1px solid rgba(255, 170, 0, 0.3); 
    border-radius: 12px;
    width: 30%; 
    min-width: 280px; 
    overflow: hidden; 
    text-align: center;
    transition: all 0.3s ease; 
    display: flex;
    flex-direction: column;
}

.servico-item:hover {
    transform: translateY(-5px); 
    border-color: rgba(255, 170, 0, 0.8); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

.servico-img-container {
    width: 100%;
    height: 180px; 
}

.servico-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.servico-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.servico-info h3 {
    color: #ffaa00; 
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase; 
    letter-spacing: 1px;
}

.servico-info p {
    color: #d1d5db; 
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* === ESTATÍSTICAS === */
.estatisticas-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    padding: 30px 20px;
    background: transparent; 
    z-index: 10; 
    flex-wrap: wrap;
}

.estatistica-item {
    text-align: center;
}

.estatistica-numero {
    color: #ffaa00;
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
}

.estatistica-texto {
    color: #d1d5db;
    font-size: 1rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === APP / CARROSSEL === */
.app {
   position: relative;
   width: 100%;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 120px 0;
}

.app__bg {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: -5;
   filter: blur(20px);
}

.app__bg__image {
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: 1s;
}

.app__bg__image.current--image { opacity: 1; }
.app__bg__image img { width: 100%; height: 100%; object-fit: cover; }

.cardList {
   position: relative;
   width: 100%;
   max-width: 900px;
   display: flex;
   justify-content: center;
}

.cards__wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    perspective: 1000px; 
}

.card {
   position: absolute;
   top: 50%;
   left: 50%;
   width: var(--card-width);
   height: var(--card-height);
   transform-style: preserve-3d;
   transform-origin: center center; 
   transition: all 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 15px;
}

.card.current--card {
    transform: translate(-50%, -50%) translateZ(150px) scale(1.1);
    z-index: 100;
    opacity: 1;
    filter: blur(0);
}

.card.previous--card {
    transform: translate(-155%, -50%) rotateY(35deg) scale(0.85);
    z-index: 50;
    opacity: 0.5;
    filter: blur(2px); 
}

.card.next--card {
    transform: translate(55%, -50%) rotateY(-35deg) scale(0.85);
    z-index: 50;
    opacity: 0.5;
    filter: blur(2px);
}

.card:not(.current--card):not(.previous--card):not(.next--card) {
    opacity: 0;
    transform: translate(-50%, -50%) translateZ(-200px) scale(0.5);
    pointer-events: none;
}

.infoList { 
  position: absolute; 
  bottom: 25%; 
  left: 10%; 
  z-index: 100;
  pointer-events: none;
}

.info {
   position: absolute;
   opacity: 0;
   transition: 0.5s;
   pointer-events: none;
}

.info.current--info {
   opacity: 1;
   pointer-events: auto;
}

.info .name { 
  font-size: 3rem; 
  font-weight: 800; 
  color: white;
  white-space: nowrap;
}

.info .location { color: darkgoldenrod; }
.infoList .info .text.description {
    color: #b0b0b0 !important; 
    opacity: 0.8 !important;   
    margin-top: 10px;          
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
}

.cardList__btn {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 200;
}
.cardList__btn:hover {
    background: rgba(218, 165, 32, 0.5); 
    transform: translateY(-50%) scale(1.1);
    transition: 0.5s;
}
.cardList__btn svg { width: 30px; height: 30px; }
.btn--left { left: -180px; }
.btn--right { right: -120px; }

/* === TABS INFERIORES E AGENDAMENTO === */
.menu {
    display: flex;
    gap: 15px;
    cursor: pointer;
    font-size: larger;
    font-family: "Momo Signature", cursive;
    padding-bottom: 15px;
    word-spacing: 20px;
    color: white;
    margin: 15px;
}

#btn-servicos:hover, #btn-horarios:hover, #btn-barber:hover {
    color: #464545;
}

#line-menu{
    border: none;
    height: 1px;
    background-color: #333;
    width: 100%; 
    margin: 10px 0;
}

.conteudo { display: none; }
.conteudo.ativo, .ativo { display: block; }

.service-list {
    display: flex;
    flex-direction: column; 
    gap: 20px;              
    padding: 20px;
    list-style: none; 
}

.service-item-row {
    width: 100%;
    max-width: 600px;
    display: flex;
    background: #1a1a1a;
    padding: 15px;
    border-radius: 12px;
}

.service-info {
    display: flex;
    gap: 20px; 
    width: 100%;
    align-items: center;
    justify-content: center;
}

.service-icon {
    width: 90px;  
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

.details .name { margin: 0; font-size: 1.1rem; color: #ffffff; }
.details .price { margin: 4px; color: #0d4b05; font-weight: bold; font-size: 1.2rem; margin-left: 500px; }
.icon-duration { color: #888; font-size: 0.9rem; white-space: nowrap; }
.icon-duration i { color: #ffffff; margin-left: 15px;}

#btn-service {
    border: none;
    background-color: darkgoldenrod;
    /* Reduzimos o padding. 8px em cima/embaixo e 15px nas laterais */
    padding: 8px 15px; 
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    /* Adiciona um espaço à esquerda do botão para desgrudar do texto */
    margin-left: 150px; 
}
#btn-service:hover { opacity: 0.8; }

.booking-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background: #1a1a1a;
    border-radius: 15px;
}

.mes-label {
    color: #fff;
    text-align: center;
    font-weight: 800;
    font-size: 24px;
    margin-bottom: 25px;
    text-transform: lowercase;
}

.secao-titulo {
    font-size: 20px;
    font-weight: 700;
    margin: 30px 0 20px;
    color: #fff;
}

.days-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none; 
}
.days-row::-webkit-scrollbar { display: none; } 

.days-card {
    flex: 0 0 75px;
    height: 85px;
    background-color: #6d6d6d; 
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    color: #fff;
}
.days-card span { font-size: 14px; font-weight: 600; }
.days-card strong { font-size: 18px; margin-top: 2px; }
.days-card.active { background-color: darkgoldenrod !important; color: #ffffff; }

.time-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.time-card {
    padding: 12px 20px;
    background-color: #464545;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
    color: #fff;
}
.time-card:hover { background-color: #e5e5e5; color: #000; }
.time-card.active { background: #e1ad01; color: #000; }

/* === ANIMAÇÕES === */
#content-help {
    color: white;
    font-size: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
#content-help p { color: darkgoldenrod; }

@keyframes deslizarDireita {
    from { opacity: 0; transform: translateX(-100px); }
    to { opacity: 1; transform: translateX(0); }
}
.animar-entrada-delay { opacity: 0; animation: deslizarDireita 1.2s ease-out 0.4s forwards; }

/* === CARD AGENDAMENTO === */
.container-flutuante {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.container-flutuante.show {
    display: flex;
    animation: surgirCard 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes surgirCard {
    from { opacity: 0; transform: translateY(50px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.main-wrapper {
    position: relative;
    pointer-events: auto;
}

.fechar-x {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: var(--neon);
    font-size: 30px;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
}

.agendamento-card {
    background: #1a1a1a;
    border: 1px solid rgba(245, 208, 97, 0.3);
    border-radius: 16px;
    width: 340px;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
}

.agendamento-header {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(245, 208, 97, 0.2);
    padding-bottom: 15px;
}

.agendamento-titulo {
    color: var(--neon);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.agendamento-avatar {
    font-size: 4rem;
    color: var(--neon);
    background: rgba(245, 208, 97, 0.08);
    border: 1px solid rgba(245, 208, 97, 0.2);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agendamento-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agendamento-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.agendamento-label {
    color: var(--neon);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.agendamento-valor {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
}

/* === SOBRE E CONTATO === */
.sobre-container, .contato-container {
    background-color: #000000; 
    padding: 100px 10%;
    color: #fff;
}
.sobre-content, .contato-content {
    display: flex; align-items: center; justify-content: space-between; gap: 50px; max-width: 1200px; margin: 0 auto;
}
.sobre-imagem { position: relative; flex: 1; }
.sobre-imagem img { width: 100%; border-radius: 8px; z-index: 2; position: relative; }
.borda-detalhe { position: absolute; top: -20px; left: -20px; width: 100px; height: 100px; border-top: 5px solid #ffaa00; border-left: 5px solid #ffaa00; z-index: 1; }
.sobre-texto, .contato-info { flex: 1; }
.subtitulo { color: #ffaa00; font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.titulo-sessao { font-size: 2.5rem; margin-bottom: 20px; line-height: 1.2; }
.destaque { color: #ffaa00; }
.sobre-texto p, .info-item p { color: #d1d5db; line-height: 1.8; margin-bottom: 20px; font-size: 1.1rem; }
.sobre-lista { list-style: none; padding: 0; margin-bottom: 30px; }
.sobre-lista li { margin-bottom: 10px; color: #fff; display: flex; align-items: center; gap: 10px; }
.sobre-lista li i { color: #ffaa00; }

.info-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 25px; }
.info-icon { font-size: 1.5rem; color: #ffaa00; }
.info-item h3 { font-size: 1.1rem; color: #ffaa00; margin-bottom: 5px; }
.redes-sociais { display: flex; gap: 20px; }
.social-link { color: #ffaa00; text-decoration: none; border: 1px solid #ffaa00; padding: 8px 20px; border-radius: 4px; transition: 0.3s; }
.social-link:hover { background: #ffaa00; color: #000; }

.contato-form { flex: 1; background: rgba(255, 255, 255, 0.05); padding: 40px; border-radius: 12px; border: 1px solid rgba(255, 170, 0, 0.1); }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; color: #ffaa00; }
.input-group input, .input-group textarea { width: 100%; padding: 12px; background: #081119; border: 1px solid #1a2a3a; border-radius: 4px; color: #fff; outline: none; }
.input-group input:focus, .input-group textarea:focus { border-color: #ffaa00; }
.btn-enviar { width: 100%; padding: 15px; background: #ffaa00; border: none; border-radius: 4px; color: #000; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: 0.3s; }

.footer-simples { text-align: center; padding: 40px; background: #081119; color: #666; border-top: 1px solid #1a2a3a; }
.hidden { display: none !important; }

/* === RESPONSIVIDADE CONSOLIDADA === */

@media (min-width: 800px) {
    :root { --card-width: 280px; --card-height: 400px; }
}

@media (max-width: 1000px) {
    .btn--left { left: 10px; }
    .btn--right { right: 10px; }
    .sobre-content, .contato-content { flex-direction: column; text-align: center; }
    .sobre-lista li { justify-content: center; }
    .borda-detalhe { display: none; }
}

@media (max-width: 768px) {
    .header-main-nav { flex-direction: column; height: auto; padding: 10px; }
    .logo img { height: 60px; }
    .main-nav { display: none; /* Idealmente um menu sanduíche aqui */ }
    
    .hero {
        padding-top: 120px;
        height: auto;
        min-height: 100vh;
    }
    
    .content-hero h1 { font-size: 2rem; margin: 0 15px 30px; }
    
    .servicos-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
    }
    
    .servico-item { width: 90%; max-width: 400px; }
    
    .estatisticas-container {
        position: relative; /* Evita que sobreponha no celular */
        gap: 20px;
        padding: 40px 15px 100px; /* Espaço pro botão flutuante */
    }
    .estatistica-item { flex: 1 1 45%; }
    .estatistica-numero { font-size: 2rem; }
    .estatistica-texto { font-size: 0.8rem; }
    
    .btn-agendar-flutuante {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: 80%;
        justify-content: center;
        padding: 20px;
    }
    
    .contato-form { padding: 20px; }
    .infoList { bottom: 15%; left: 5%; text-align: center; width: 90%; }
    .info .name { font-size: 2rem; }
}

@media (max-width: 480px) {
    :root { --card-width: 150px; --card-height: 220px; }
    .btn--left { left: 0px; }
    .btn--right { right: 0px; }
    
    .estatistica-item { flex: 1 1 100%; }
    
    .container-flutuante .main-wrapper { padding: 20px; width: 95%; }
    .fifa-card { transform: scale(0.7); transform-origin: top center; }
    .fechar-x { top: 5px; right: 10px; }


}

/* A "Mesa" que segura todos os cartões */
#box-barber {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar linha se não couber na tela do celular */
    justify-content: center; /* Centraliza os cartões */
    gap: 20px; /* Espaço entre os cartões */
    width: 200px;
    padding: 5px;
    flex-direction: column;
}

/* O Cartão INDIVIDUAL de cada barbeiro (O seu estilo entra aqui!) */
.barber-card-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px 15px;
    transition: all 0.3s ease;
    width: 140px; /* Um pouco maior que 100px para o texto respirar */
    
    /* Organiza o conteúdo do cartão em coluna */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}

/* Efeito ao passar o mouse por cima do cartão */
.barber-card-item:hover {
    transform: translateY(-5px);
    border-color: rgba(218, 165, 32, 0.5); /* Borda dourada sutil */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Estilo do Ícone do barbeiro */
#icon-barber {
    font-size: 4rem;
    color: darkgoldenrod; /* Mantém a cor dourada do seu tema */
}

/* Nome do Barbeiro */
#name-barber {
    color: #000000;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    width: 100%;
}

/* Botão de Escolher */
.btn-barber-escolher {
    background: transparent;
    color: darkgoldenrod;
    border: 1px solid darkgoldenrod;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: bold;
    width: 100%;
}

.btn-barber-escolher:hover {
    background: darkgoldenrod;
    color: #000000;
}

/* ==========================================
   LISTA DE BARBEIROS (CLIENTE)
========================================== */

/* A caixinha de cada barbeiro */
.barber-box-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #2a2a2a; /* Fundo escuro */
    padding: 15px 20px;
    margin: 12px auto;
    border-radius: 12px;
    width: 90%;
    max-width: 400px; /* Não deixa ficar gigante no PC */
    border: 1px solid #444;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}

.barber-box-item:hover {
    transform: translateY(-2px);
    border-color: darkgoldenrod;
}

/* O ícone do barbeiro (Aquele bonequinho) */
.icon-barber-class {
    font-size: 3rem;
    color: #888;
}

/* O nome do barbeiro */
.name-barber-class {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    flex-grow: 1; /* Faz o nome ocupar o espaço do meio */
    margin-left: 15px;
}

/* O botão "Escolher" padrão */
.btn-escolher-barbeiro {
    background-color: #444;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: 0.3s;
}

.btn-escolher-barbeiro:hover {
    background-color: #555;
}

/* O botão quando o barbeiro é o SELECIONADO */
.btn-escolher-barbeiro.selecionado {
    background-color: darkgoldenrod;
    color: #000;
    box-shadow: 0 0 10px rgba(184, 134, 11, 0.4); /* Brilho dourado */
}

/* Estilo idêntico ao print da imagem */
.btn-usuario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2a2a2a; /* Fundo cinza escuro */
    color: #111111; /* Texto bem escuro como no seu print */
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 6px 18px; /* Preenchimento interno */
    border-radius: 20px; /* Deixa as bordas totalmente arredondadas (formato pílula) */
    border: 1px solid #4a4a4a; /* Borda fina levemente mais clara */
    text-decoration: none; /* Tira o sublinhado do link */
    text-transform: uppercase; /* Força as letras a ficarem MAIÚSCULAS */
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.05); /* Leve brilho na borda superior e esquerda */
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Efeito ao passar o mouse por cima */
.btn-usuario:hover {
    background-color: #333333;
    border-color: #666666;
}

/* O Dropdown/Modal Minimalista */
.minimal-dropdown {
    display: none; /* Escondido por padrão */
    position: absolute;
    top: 120%; /* Fica posicionado logo abaixo do botão de usuário */
    right: 40px; /* Alinha com a margem que demos antes */
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.6); /* Sombra para dar o efeito flutuante */
    min-width: 130px;
    z-index: 1000;
}

/* Classe que o JavaScript vai usar para mostrar o modal */
.minimal-dropdown.show {
    display: flex;
    flex-direction: column;
}

/* O botão de sair dentro do modal */
.minimal-logout-btn {
    background: transparent;
    color: #9ca3af; /* Cinza suave */
    border: none;
    padding: 10px 14px;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Efeito ao passar o mouse: fica vermelho */
.minimal-logout-btn:hover {
    background-color: #ef4444; 
    color: white;
}/* deploy-test */