body{
background-image: url("../imagens/Backgroud.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}

/* HEADER */

header{
padding:25px;
text-align:center;
border-bottom:3px solid #493002;
}

header h1{
color:#493002;
margin:0;
}

header p{
margin:5px;
color:#555;
}

.tabs p{
color:#493002;
margin:0;
}

/* GRID */

.galerias {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:15px;
padding:15px;
}

/* ALBUM */

.album{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
cursor:pointer;
transition:0.2s;
}

.album:hover{
transform:scale(1.03);
}

.album img{
width:100%;
height:160px;
object-fit:cover;
}


.album h3{
margin:0;
padding:10px;
text-align:center;
color:#493002;
font-size:16px;
}

.contador{
display:block;
text-align:center;
font-size:12px;
color:#666;
padding-bottom:10px;
}

/* BOTÃO CRIAR */


.criar{
    position: fixed;
    bottom: 110px;
    right: 20px;
   z-index: 999 /* 🔥 abaixo dos modais */
   
}
.criar button{
background:#E97A9A;
border:none;
color:white;
font-size:22px;
width:55px;
height:55px;
border-radius:50%;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
cursor:pointer;
}

/* MODAL */

.modal{

display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
justify-content:center;
align-items:center;
z-index:999;

}

/* MODAL ALBUM */

#modal{

display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#F5EFE6;
overflow:hidden;
z-index:1000;

}



/* CURTIDAS */

.likes{
position:absolute;
bottom:5px;
left:10px;
background:rgba(0,0,0,0.5);
color:white;
padding:5px 10px;
border-radius:10px;
font-size:12px;
}

/* COMENTÁRIOS */

.comentarios{
padding:15px;
}



/* INPUT */

input, textarea{
width:95%;
padding:10px;
margin-top:5px;
border-radius:5px;
border:1px solid #ccc;
}

/* TABS */

.tabs{
display:flex;
justify-content:center;
gap:10px;
margin:10px;
}

.tabs button{
padding:10px 20px;
border:none;
background:#7FB77E;
color:white;
border-radius:10px;
cursor:pointer;
}

.nav{

position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.5);
color:white;
border:none;
font-size:30px;
padding:10px;
cursor:pointer;

}

.esquerda{
left:10px;
}

.direita{
right:10px;
}

#listaFotosEditar img{

border-radius:8px;
margin:5px;

}

.modal-top{

display:flex;
justify-content:flex-end;
padding:10px;

}

.acoes{

display:flex;
gap:10px;

}

.acoes button{

border:none;
padding:8px 12px;
border-radius:8px;
font-size:16px;
cursor:pointer;

}

.editar{

background:#7FB77E;
color:white;

}

.fechar{

background:#E97A9A;
color:white;

}

/* MODAIS SOBREPOSTOS */

.modalOverlay{

display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
justify-content:center;
align-items:center;

}

/* CAMADAS */

#modalCriar{
z-index:4000;
}

#modalSenha{
z-index:3000;
}

#modalEditar {
    overflow-y:auto;
z-index:2000;

}

/* barra de ações */



.acoesFoto button{

background:#7FB77E;
border:none;
color:white;

padding:8px 15px;
border-radius:8px;

cursor:pointer;
font-size:14px;

}

.acoesFoto button:hover{

background:#6aa56a;

}



.formComentario{

display:flex;
flex-direction:column;
gap:8px;
margin-bottom:15px;

}


.formComentario button{

background:#E97A9A;
color:white;
border:none;

padding:8px;
border-radius:8px;
cursor:pointer;

}

.listaComentarios{

display:flex;
flex-direction:column;
gap:10px;

}

.comentario{

background:#f7f7f7;

padding:8px;
border-radius:6px;

}

.nome{

font-weight:bold;
color:#493002;

}





.formComentario{

display:flex;
flex-direction:column;
gap:10px;

margin-bottom:15px;

}

.formComentario input,
.formComentario textarea{

width:95%;

padding:10px;

border-radius:6px;

border:1px solid #ccc;

font-size:14px;

}

.formComentario textarea{

min-height:70px;
resize:vertical;

}

/* container das fotos */

.fotos{
display:flex;
overflow:hidden;
width:100%;


transition:transform 0.35s ease;

    /* overflow-x: auto; */ /* desativar swipe se não quiser */
    flex-direction: row;
    gap: 10px;
    scroll-snap-type: x mandatory; /* se quiser manter efeito snap */
}

/* cada foto */



/* imagem */

.foto{

min-width:100%;

display:flex;
flex-direction:column;

align-items:center;
justify-content:center;

}

.foto img{

max-width:100%;
max-height:65vh;

object-fit:contain;

display:block;

margin:auto;

}


.acoesFoto{

width:100%;
max-width:900px;

display:flex;
justify-content:center;
gap:20px;

padding:10px;

background:transparent;

}



/* MODAL DE FOTOS */
#modalFotos {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F5EFE6;
    z-index: 1000;

    /* Permitir scroll vertical no mobile e PC */
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

    /* Espaçamento interno */
    padding: 10px 0;
    box-sizing: border-box;
   /* Ocultar barra de rolagem */
    scrollbar-width: none; /* Firefox */
}

#modalFotos::-webkit-scrollbar {
    display: none; /* Chrome, Edge, Safari */
}




/* CONTAINER DE COMENTÁRIOS */
.comentariosFoto{
  width:85%;
    max-width:900px;
    margin: 10px 15px;        /* margem nas laterais */
    max-height: 65vh;          /* altura máxima do container */
    overflow-y: auto;          /* scroll interno */
    overflow-x: hidden;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
   /* Ocultar barra de rolagem */
    scrollbar-width: none; /* Firefox */
}

.comentariosFoto::-webkit-scrollbar {
    display: none; /* Chrome, Edge, Safari */
}

.comentario .horario {
    font-size: 10px;
    color: #888;
    margin-left: 5px;
}

/* Container de álbuns dos noivos */
.galerias_noivos.noivos {
  background: #FFF8E1; /* fundo levemente dourado */
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/* Cada álbum dos noivos */


/* Botão excluir abaixo do álbum */
.excluir-album {
  margin-top: 5px;
  font-size: 12px;
  padding: 2px 5px;
  background: #FF4C4C;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Hover efeito */
.excluir-album:hover {
  background: #FF1F1F;
}

.topComentario{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.btnExcluirComentario{
    background:none;
    border:none;
    cursor:pointer;
    font-size:16px;
}

.textoComentario{
    margin-top:5px;
}

#modalBoasVindas{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.modalConteudo{

background-image:url("../imagens/Backgroud.png");
background-size:cover;
background-position:center;

width:90%;
max-width:600px;
padding:30px;

border-radius:10px;
text-align:center;

color:#050505;

box-shadow:0 0 20px rgba(0,0,0,0.5);
}

.modalConteudo button{

margin-top:20px;
padding:10px 20px;
border:none;
border-radius:5px;
cursor:pointer;

background:#ffffff;
color:#000;
font-weight:bold;

}



#listaFotosEditar{
display:flex;
flex-wrap:wrap;
gap:20px;
}



.fotoEditar img{
width:100%;
border-radius:5px;
}

.fotoEditar button{
margin-top:5px;
}



.comentarioEditar{
display:flex;
justify-content:space-between;
align-items:center;
padding:3px 0;
border-bottom:1px solid #eee;
}

.comentarioEditar button{
border:none;
background:none;
cursor:pointer;
font-size:14px;
}

.comentariosEditar{
position:relative;
display:block;
margin-top:8px;
max-height:120px;
overflow-y:auto;
border-top:1px solid #ddd;
padding-top:5px;
background:#fff;
z-index:1;
}

.fotoEditar{
width:220px;
display:flex;
flex-direction:column;
background:#fafafa;
padding:10px;
border-radius:8px;
position:relative;
}



.modal-box{
background:#fff;
padding:20px;
border-radius:12px;
width:90%;
max-width:900px;
max-height:90vh;
overflow-y:auto;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.infoDono{
background:#f8f8f8;
padding:15px;
border-radius:10px;
margin-bottom:15px;
}

.infoDono input,
.infoDono select{
width:100%;
padding:10px;
margin-top:8px;
border-radius:6px;
border:1px solid #ccc;
}

.uploadArea{
margin:15px 0;
text-align:center;
}

.fileLabel{
display:inline-block;
padding:10px 20px;
background:#ff4d6d;
color:#fff;
border-radius:8px;
cursor:pointer;
}

.fileLabel input{
display:none;
}

#progressBar{
width:100%;
height:20px;
margin-top:10px;
color: #493002;
}

.acoesModal{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:10px;
}

.btnSalvar{
background:#28a745;
color:#fff;
border:none;
padding:10px 15px;
border-radius:8px;
cursor:pointer;
}

.btnFechar{
background:#ccc;
border:none;
padding:10px 15px;
border-radius:8px;
cursor:pointer;
}

.loading-download {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.6);
    z-index: 9999;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.spinner {
    border: 4px solid #fff;
    border-top: 4px solid transparent;
    border-radius: 50%;

    width: 30px;
    height: 30px;
    margin-bottom: 10px;

    animation: girar 1s linear infinite;
}

@keyframes girar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-download.ativo {
    display: flex;
}

.baixar-album {
    cursor: pointer;
}

.album-info {
    position: sticky;
    top: 0;
    z-index: 5;
padding: 20px;
   
}

.album-info p {
    margin: 10px 0;
}

#cancelDownload {
    background: #ff4d4d;
    border: none;
    color: #fff;
    border-radius: 5px;
    transition: background 0.3s;
}

#cancelDownload:hover {
    background: #e60000;
}

#rodapeSite {
    background: #f5f5f5; /* leve cinza para não competir com o conteúdo */
    color: #555;
    text-align: center;
    font-size: 14px;
    padding: 15px 20px;
    border-top: 1px solid #ccc;
    position: relative; /* mantém no final da página */
    bottom: 0;
    width: 100%;
}

#rodapeSite p {
    margin: 5px 0;
}

#rodapeSite a {
    color: #555;
    text-decoration: underline;
}

#rodapeSite .direitos {
    font-style: italic;
    font-size: 12px;
    margin-top: 5px;
}

/* Garantir que mesmo páginas curtas o rodapé fique “sticky” */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* tste jonatas */
}

body > main, body > section, body > div.galerias {
    flex: 1;
}

.contadorFotos{
margin:15px auto;
display:block;
width:fit-content;

background:#000;
color:#fff;
padding:8px 16px;
border-radius:30px;
font-size:15px;
font-weight:bold;
box-shadow:0 2px 8px rgba(0,0,0,0.3);
}