/* --- 1. CONFIGURAÇÕES GERAIS E VARIÁVEIS --- */
:root {
    --gold: #c68e17;           /* Cor Ouro Premium */
    --gold-hover: #b07d14;     /* Ouro mais escuro para hover */
    --dark: #111111;           /* Preto quase absoluto */
    --sand: #faf9f6;           /* Bege areia (Off-white) */
    --white: #ffffff;
    --gray: #888888;
    --border-color: #eeeeee;
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.05);
    --shadow-hover: 0 20px 50px rgba(0,0,0,0.12);
    --ease-luxury: cubic-bezier(0.23, 1, 0.32, 1); /* Curva de animação suave */
}

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

html { scroll-behavior: smooth; }

body { 
    font-family: 'Montserrat', sans-serif; 
    background-color: var(--sand); 
    color: var(--dark); 
    overflow-x: hidden; 
    line-height: 1.6;
}

/* Tipografia Premium */
h1, h2, h3, h4, .btn-hero, .nav-link, .card-price { 
    font-family: 'Marcellus', serif; 
    font-weight: 400; 
}

/* Scrollbar Personalizada (Detalhe de Luxo) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--sand); }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* --- 2. HEADER E NAVEGAÇÃO --- */
header {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(12px); /* Efeito vidro fosco */
    -webkit-backdrop-filter: blur(12px);
    height: 90px;
    padding: 20px 5%;
    position: sticky; top: 0; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: 0.4s;
}

.brand-area { 
    display: flex; align-items: center; gap: 15px; 
    text-decoration: none; color: var(--dark); 
}
.brand-area img { 
    width: 50px; height: 50px; 
    border-radius: 50%; object-fit: cover; 
    border: 1px solid var(--gold); 
}
.brand-area h1 { 
    font-size: 1.3rem; letter-spacing: 2px; text-transform: uppercase; 
}

/* Menu Central */
nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; list-style: none; gap: 30px; }
.nav-item { position: relative; padding: 30px 0; cursor: pointer; }

.nav-link { 
    text-decoration: none; color: var(--dark); 
    font-size: 0.85rem; text-transform: uppercase; 
    letter-spacing: 1.5px; font-weight: 500; 
    position: relative; transition: color 0.3s;
}

/* Efeito de linha dourada ao passar o mouse */
.nav-link::after { 
    content: ''; position: absolute; bottom: -5px; left: 0; 
    width: 0; height: 1px; background: var(--gold); 
    transition: width 0.4s var(--ease-luxury); 
}
.nav-item:hover .nav-link { color: var(--gold); }
.nav-item:hover .nav-link::after { width: 100%; }

/* Mega Menu Dropdown */
.dropdown {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--white); min-width: 200px; padding: 20px;
    box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden;
    transition: all 0.4s var(--ease); border-top: 2px solid var(--gold);
    text-align: center; border-radius: 0 0 4px 4px;
}
.nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { 
    display: block; text-decoration: none; color: var(--gray); font-size: 0.75rem; 
    margin: 10px 0; text-transform: uppercase; transition: 0.3s; letter-spacing: 1px;
}
.dropdown a:hover { color: var(--gold); transform: translateX(5px); }

/* Ícones do Canto Direito */
.icons-area { 
    width: 200px; display: flex; justify-content: flex-end; 
    gap: 25px; align-items: center; 
}
.icon-btn { 
    font-size: 1.2rem; cursor: pointer; transition: 0.3s; 
    color: var(--dark); position: relative; 
}
.icon-btn:hover { color: var(--gold); transform: scale(1.1); }
#cart-count { 
    position: absolute; top: -8px; right: -10px; 
    background: var(--gold); color: white; 
    font-size: 0.65rem; font-weight: bold;
    padding: 2px 6px; border-radius: 50%; 
}

/* Busca Pop-up */
.search-popup {
    position: absolute; top: 90px; right: 5%; width: 400px;
    background: var(--white); padding: 25px; 
    box-shadow: var(--shadow-hover);
    border-radius: 0 0 8px 8px; transform: translateY(-20px);
    opacity: 0; visibility: hidden; transition: all 0.4s var(--ease-luxury);
    display: flex; gap: 10px; align-items: center; 
    border-top: 3px solid var(--gold);
}
.search-popup.active { transform: translateY(0); opacity: 1; visibility: visible; }
.search-input { 
    flex: 1; border: none; border-bottom: 1px solid #ddd; 
    padding: 10px; font-family: 'Montserrat', sans-serif; 
    font-size: 1rem; color: var(--dark);
}
.search-btn-action { 
    background: var(--dark); color: white; border: none; 
    width: 45px; height: 45px; border-radius: 50%; 
    cursor: pointer; transition: 0.3s; 
}
.search-btn-action:hover { background: var(--gold); transform: rotate(-45deg); }

/* --- 3. HERO SECTION (IMPACTO VISUAL) --- */
.hero {
    height: 92vh; /* Altura quase total da tela */
    /* ATENÇÃO: O CSS volta uma pasta (../) para achar a imagem na raiz */
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1469334031218-e382a71b716b?q=80&w=2070') no-repeat;
    background-attachment: fixed; /* Parallax Effect */
    background-position: center; 
    background-size: cover;
    display: flex; flex-direction: column; 
    justify-content: center; align-items: center;
    text-align: center; color: white;
}

.hero h2 { 
    font-size: 5rem; margin-bottom: 20px; text-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: fadeUp 1s var(--ease-luxury) forwards 0.5s; opacity: 0; 
}
.hero p { 
    font-size: 1.2rem; letter-spacing: 5px; text-transform: uppercase; 
    margin-bottom: 50px; text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    animation: fadeUp 1s var(--ease-luxury) forwards 0.8s; opacity: 0; 
}
.btn-hero { 
    padding: 18px 60px; background: white; color: var(--dark); 
    text-decoration: none; text-transform: uppercase; 
    letter-spacing: 2px; font-weight: 600; font-size: 0.9rem;
    border: 1px solid white; transition: 0.4s; 
    animation: fadeUp 1s var(--ease-luxury) forwards 1.1s; opacity: 0; 
}
.btn-hero:hover { 
    background: transparent; color: white; border-color: white; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

@keyframes fadeUp { 
    from { opacity: 0; transform: translateY(40px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* --- 4. VITRINE E PRODUTOS --- */
.container { max-width: 1440px; margin: 100px auto; padding: 0 5%; }
.section-header { text-align: center; margin-bottom: 80px; }
.section-header h3 { font-size: 2.5rem; margin-bottom: 10px; }
.section-header p { color: var(--gray); font-style: italic; font-family: 'Marcellus', serif; }

.grid { 
    display: grid; 
    /* Ele tenta colocar cards de no minimo 250px, e se tiver espaço sobrando, ele distribui igualmente (1fr) */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 30px; 
    padding: 20px 0;
}

/* Cartão de Produto */
.card { cursor: pointer; transition: 0.4s; }
.card-img { 
    height: 480px; overflow: hidden; position: relative; 
    background: #f0f0f0; border-radius: 2px;
}
.card img { 
    width: 100%; height: 100%; object-fit: cover; 
    transition: transform 1s var(--ease-luxury); 
}
.card:hover img { transform: scale(1.1); }

.card-overlay { 
    position: absolute; bottom: 0; left: 0; width: 100%; 
    padding: 30px; 
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); 
    display: flex; justify-content: center; 
    opacity: 0; transition: 0.4s; 
}
.card:hover .card-overlay { opacity: 1; }

.btn-quick-view { 
    background: white; color: var(--dark); padding: 12px 30px; 
    font-size: 0.75rem; text-transform: uppercase; font-weight: 600; 
    letter-spacing: 1px; transition: 0.3s;
}
.btn-quick-view:hover { background: var(--gold); color: white; }

.card-info { text-align: center; padding-top: 25px; }
.card-title { font-size: 1.1rem; margin-bottom: 8px; font-weight: 400; }
.card-price { color: var(--gold); font-weight: 600; font-size: 1.1rem; }

/* --- 5. MODAL DE PRODUTO --- */
.modal-wrap { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); z-index: 2000; 
    display: none; align-items: center; justify-content: center; 
    backdrop-filter: blur(8px); 
}
.modal-box { 
    background: white; width: 1000px; max-width: 95%; height: 600px; 
    display: flex; box-shadow: var(--shadow-hover);
    animation: slideUp 0.5s var(--ease-luxury); 
}
.modal-left { flex: 1.2; overflow: hidden; background: #f9f9f9; }
.modal-left img { width: 100%; height: 100%; object-fit: cover; }
.modal-right { 
    flex: 1; padding: 60px; position: relative; 
    display: flex; flex-direction: column; justify-content: center; 
}

.close-modal-btn { 
    position: absolute; top: 30px; right: 30px; 
    cursor: pointer; font-size: 1.8rem; transition: 0.3s; 
}
.close-modal-btn:hover { color: var(--gold); transform: rotate(90deg); }

#m-title { font-size: 2.2rem; margin-bottom: 10px; line-height: 1.2; }
#m-price { font-size: 1.8rem; color: var(--gold); margin-bottom: 30px; font-family: 'Montserrat', sans-serif; font-weight: 300; }

.divider { width: 50px; height: 2px; background: var(--border-color); margin-bottom: 30px; }

.label-size { font-size: 0.8rem; font-weight: 600; margin-bottom: 15px; letter-spacing: 1px; }
.size-container { display: flex; gap: 15px; margin-bottom: 40px; }
.size-btn { 
    width: 50px; height: 50px; border: 1px solid #ddd; 
    background: white; cursor: pointer; transition: 0.3s; 
    font-weight: 500; font-family: 'Montserrat', sans-serif;
}
.size-btn:hover { border-color: var(--dark); }
.size-btn.active { background: var(--dark); color: white; border-color: var(--dark); }

/* --- 6. SIDEBAR DO CARRINHO --- */
.cart-sidebar { 
    position: fixed; top: 0; right: -100%; 
    width: 450px; height: 100%; background: white; z-index: 3000; 
    padding: 40px; box-shadow: -15px 0 50px rgba(0,0,0,0.15); 
    transition: 0.6s var(--ease-luxury); 
    display: flex; flex-direction: column; 
}
.cart-sidebar.active { right: 0; }

.cart-header { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 40px; border-bottom: 1px solid var(--border-color); 
    padding-bottom: 20px; 
}
.cart-header h3 { font-size: 1.5rem; }

.cart-items-container { 
    flex: 1; overflow-y: auto; padding-right: 10px; 
}
.cart-item-row { 
    display: flex; gap: 20px; margin-bottom: 25px; align-items: center; 
    border-bottom: 1px solid #f9f9f9; padding-bottom: 25px; 
    animation: fadeIn 0.4s ease;
}
.cart-item-img { width: 70px; height: 95px; object-fit: cover; }
.cart-item-info { flex: 1; }
.cart-item-name { font-size: 0.9rem; font-weight: 600; margin-bottom: 5px; }
.cart-item-size { font-size: 0.75rem; color: var(--gray); text-transform: uppercase; }
.cart-item-price { color: var(--gold); font-weight: 600; margin-top: 5px; }
.cart-trash-icon { 
    cursor: pointer; font-size: 0.9rem; color: #ccc; transition: 0.3s; 
}
.cart-trash-icon:hover { color: #e74c3c; transform: scale(1.2); }

.cart-footer { border-top: 1px solid var(--border-color); padding-top: 30px; }
.cart-total-row { 
    display: flex; justify-content: space-between; 
    font-weight: 500; font-size: 1.2rem; margin-bottom: 20px; 
    font-family: 'Marcellus', serif; 
}

/* Botão Preto Universal */
.btn-black { 
    background: var(--dark); color: white; border: none; 
    padding: 18px; width: 100%; text-transform: uppercase; 
    cursor: pointer; transition: 0.3s; font-weight: 600; letter-spacing: 2px;
}
.btn-black:hover { background: var(--gold); }
.btn-black:disabled { background: #999; cursor: not-allowed; }

/* Utilitários */
.reveal-element { 
    opacity: 0; transform: translateY(30px); 
    transition: all 0.8s var(--ease-luxury); 
}
.reveal-element.active { opacity: 1; transform: translateY(0); }
.loading-spinner { text-align: center; color: var(--gray); padding: 50px; font-style: italic; }

@keyframes slideUp { from { opacity: 0; transform: translateY(50p   x); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- BASE DE RESPONSIVIDADE E GRID --- */

/* Faz com que o grid de produtos mude de colunas automaticamente */
.grid {
    display: grid;
    /* Tenta manter os cards com pelo menos 250px, distribuindo o espaço restante */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    width: 100%;
}

/* Garante que imagens nunca ultrapassem o limite da tela */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- SUÍTE DE AUTENTICAÇÃO (LOGIN) RESPONSIVA --- */

#auth-modal-wrap {
    display: flex; /* Garante centralização */
    align-items: center; 
    justify-content: center;
    padding: 20px; /* Evita que a caixa cole nas bordas do celular */
}

.auth-box {
    background: var(--white);
    width: 100%; /* Ocupa o que for possível... */
    max-width: 450px; /* ...mas não passa de 450px */
    padding: 50px 40px;
    position: relative;
    box-shadow: var(--shadow-hover);
    animation: slideUp 0.5s var(--ease-luxury);
    text-align: center;
    border-radius: 4px; /* Opcional: um toque de suavidade */
}

/* --- CONFIGURAÇÃO PARA PC (Telas Grandes) --- */
.menu-mobile-btn, .nav-header-mobile {
    display: none; /* Esconde o botão de menu e o topo do menu no PC */
}

#main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
}

.nav-list {
    display: flex;
    gap: 30px;
    list-style: none;
}

/* --- RESPONSIVIDADE (Telas de Celular) --- */
@media (max-width: 768px) {
    .menu-mobile-btn {
        display: block; /* Aparece apenas no celular */
        font-size: 1.5rem;
        cursor: pointer;
    }

    #main-nav {
        position: fixed;
        top: 0;
        left: -100%; /* Esconde o menu totalmente à esquerda */
        width: 280px;
        height: 100vh;
        background: #fff;
        z-index: 1000;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
        display: block; /* Muda de flex para bloco no mobile */
    }

    /* Quando o menu estiver ativo */
    #main-nav.active {
        left: 0;
    }

    .nav-header-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25px;
        border-bottom: 1px solid #eee;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .nav-list {
        flex-direction: column; /* Itens um embaixo do outro */
        padding: 20px;
        gap: 0;
    }

    .nav-list li {
        border-bottom: 1px solid #f9f9f9;
    }

    .nav-list li a {
        display: block;
        padding: 15px 5px;
        font-size: 1.1rem;
    }

    /* Ajuste para a logo não ficar espremida */
    .brand-area h1 { font-size: 1.2rem; }
}

/* --- MEDIA QUERIES (AJUSTES POR APARELHO) --- */

/* Tablets e Celulares Grandes (Abaixo de 992px) */
@media (max-width: 768px) {
    .hero h2 { font-size: 2.5rem; }
}

/* Celulares (Abaixo de 768px) */
@media (max-width: 768px) {
    /* Banner Principal */
    .hero { height: 60vh; }
    .hero h2 { font-size: 2rem; }
    .hero p { font-size: 0.85rem; }

    /* Modal de Produto (Imagem em cima, Info embaixo) */
    .modal-box { 
        flex-direction: column; 
        height: auto; 
        max-height: 90vh; 
        width: 95%; 
        overflow-y: auto; 
    }
    
    .modal-left { 
        flex: none; 
        height: 300px; /* Reduzi um pouco para sobrar espaço pro texto */
    }

    .modal-right { 
        padding: 25px; 
    }

    #m-title { font-size: 1.4rem; }

    /* Barra de Navegação Mobile */
    .header { padding: 0 15px; }
    
    .auth-box {
        padding: 40px 20px; /* Menos padding lateral no mobile */
    }

    /* Carrinho lateral ocupa a tela toda no celular para facilitar o toque */
    .cart-sidebar { 
        width: 100%; 
    }
}

/* Celulares muito pequenos (Abaixo de 480px) */
@media (max-width: 480px) {
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* 2 colunas em telas bem pequenas */
        gap: 15px;
    }
    
    .brand-area h1 { font-size: 1.1rem; }
}

/* Inputs de Luxo (Apenas linha embaixo) */
.input-group {
    margin-bottom: 25px;
    text-align: left;
}

.input-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Aumentei um pouco para mais elegância */
    color: var(--dark);
}

.input-group input {
    width: 100%;
    padding: 12px 0; /* Aumentei levemente para facilitar o toque no mobile */
    border: none;
    border-bottom: 1px solid #ddd;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    background: transparent;
    border-radius: 0; /* Garante que o iOS não arredonde as bordas */
    transition: border-color 0.4s ease; /* Transição mais suave */
}

/* O QUE VOCÊ DEVE ADICIONAR: */
.input-group input:focus {
    outline: none; /* REMOVE a borda padrão feia do navegador */
    border-bottom-color: var(--gold);
}

/* DICA EXTRA: Estilo do texto que o usuário digita */
.input-group input::placeholder {
    color: #bbb;
    font-weight: 300;
}

/* Gerenciamento de Formulários (Abas) */
.auth-form {
    display: none; /* Esconde todos por padrão */
    opacity: 0;
    transition: opacity 0.4s ease;
}
.auth-form.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.5s ease;
}

/* Links e Ações */
.auth-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 25px;
}
.link-action {
    font-size: 0.8rem;
    color: var(--gray);
    cursor: pointer;
    text-decoration: underline;
    transition: 0.3s;
}
.link-action:hover {
    color: var(--gold);
}

.auth-footer {
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--gray);
}
 
/* Botão Flutuante (Admin) */
.admin-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #000; /* Cor do botão */
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex; /* Isso será controlado pelo JS, mas o padrão é flex */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 9999; /* Garante que fique acima de tudo */
    transition: transform 0.3s ease;
}

.admin-fab:hover {
    transform: scale(1.1);
}

/* --- MENU DE USUÁRIO (DROPDOWN) --- */
.user-menu-container {
    position: relative;
    display: inline-block;
}

.user-dropdown {
    /* Estado incial: Escondido, levemente acima e invisível */
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    background: var(--white);
    box-shadow: var(--shadow-hover);
    padding: 25px 20px;
    border-top: 3px solid var(--gold);
    text-align: center;
    z-index: 1000;
    margin-top: 15px;

    /* Mágica da Fluidez*/
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: all 0.4s var(--ease-luxury);
    pointer-events: none; /* Evita que o menu seja clicável quando invisível */
}



/* Triângulo pontiagudo em cima do menu */
.user-dropdown::after {
    content: '';
    position: absolute;
    top: -11px;
    right: 12px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid var(--gold);
}

.user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}

#user-greeting {
    font-size: 0.8rem;
    color: var(--dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    word-break: break-all; /* Evita que email longo quebre o layout */
}

.divider-small {
    height: 1px;
    background: #f0f0f0;
    margin: 15px 0;
}

.btn-logout {
    background: transparent;
    border: 1px solid #e0e0e0;
    color: var(--gray);
    padding: 10px 15px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s var(--ease-luxury);
    width: 100%;
}

.btn-logout:hover {
    background: var(--dark);
    color: var(--white);
    border-color: var(--dark);
}

/* Removemos o @keyframes fadeIn pois o transition com transform é mais performático */

/* --- EFEITO DE DESFOQUE DE FUNDO --- */

/* O container principal do site precisa de uma transição suave */
#site-content {
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Classe que será adicionada pelo JS quando o admin abrir */
body.admin-active #site-content {
    filter: blur(8px) brightness(0.8); /* Desfoca e escurece levemente */
    pointer-events: none; /* Impede cliques no site atrás do modal */
    transform: scale(0.98); /* Um leve efeito de "ir para trás" */
}


/* --- MELHORIA NO MODAL DE ADMIN (Para dar Foco) --- */

/* O fundo escuro do modal */
#admin-modal-wrap {
    /* Garante que o fundo seja escuro o suficiente para contraste */
    background-color: rgba(252, 252, 252, 0.6) !important; 
    backdrop-filter: blur(3px); /* Um desfoque extra sutil no próprio overlay */
}

/* A caixa branca do modal de admin */
#admin-modal-wrap .modal-content {
    box-shadow: 0 20px 50px rgba(236, 207, 17, 0.6); /* Sombra forte para "flutuar" */
    border: none; /* Remove bordas se houver */
    
    /* Animação de entrada mais dramática */
    animation: adminPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    transform: scale(0.8);
}

@keyframes adminPopIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Container do input de senha */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    width: 100%;
    padding-right: 40px; /* Abre espaço para o ícone não cobrir o texto */
}

/* O ícone do olho */
.toggle-password {
    position: absolute;
    right: 15px;
    color: var(--gray);
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.toggle-password:hover {
    color: var(--dark);
}

/* Efeito quando o olho está "aberto" (cortado) */
.fa-eye-slash {
    color: var(--gold) !important;
}

/* Container de busca vazia */
.empty-results {
    grid-column: 1 / -1; /* Ocupa a largura toda do grid */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    text-align: center;
    color: var(--dark);
}

.empty-icon {
    font-size: 3rem;
    color: var(--gold); /* Ou a cor de destaque da sua marca */
    margin-bottom: 20px;
    opacity: 0.6;
}

.empty-results h3 {
    font-family: 'Marcellus', serif;
    font-size: 1.8rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.empty-results p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}