/* assets/css/profile.css*/
/* =========================================================
   EDITOR DE PERFIL
   BetterFuture
========================================================= */

/* ESTADO GERAL/PADRÃO: Cor do texto quando os campos estão preenchidos */
input, 
textarea, 
select, 
select option {
    color: var(--brown);
}

/* EXCEÇÕES: Cor enquanto os campos estão vazios ou mostram o placeholder */
select:has(option[value=""]:checked), 
select:invalid,
input:placeholder-shown, 
input::placeholder, 
textarea::placeholder {
    color: var(--muted);
    opacity: 1; /* Garante consistência em browsers como o Firefox */
}

.profile-edit-page {
    /*width: 100%;
    max-width: 1000px;
    margin: 0px auto 50px;*/
	width: 100%;
	margin-left: 0%;
	align:center;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.profile-edit-heading {
    margin-bottom: 25px;
    padding: 0 5px;
}

.profile-edit-heading h1 {
    margin: 0;
    color: var(--brown);
    font-size: 28px;
    font-weight: 700;
}

.profile-edit-heading p {
    margin: 7px 0 0;
    color: var(--brown);
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   SECÇÃO
========================================================= */

.edit-section {
    margin-bottom: 2px;
    background: var(--marfim);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 8px 25px rgba(84, 37, 14, .08);
}


/* =========================================================
   CABEÇALHO DA SECÇÃO
========================================================= */
/*Titulo na pagina do Perfil */
.edit-section-title {
    /*padding: 16px 25px;
    background:var(--beige_light);
    color: var(--brown);*/
	padding: 9px 25px 8px;
	background: var(--beige_light); 
	color: var(--brown); 
}
/*Titulo*/
.edit-section-title h1{
	margin: 0;
    font-size: 25px;
    line-height: 1.5;
}
/*Paragrafo no titulo do perfil*/
.edit-section-title p{
	/*margin: 5px 0 0;
    font-size: 18px;
    line-height: 1.5;*/
	margin: 1px 0 1px;
	font-size: 18px; 
	line-height: 1.5; 
	/*novo para subir 2px*/
	position: relative;
    top: -2px;
}
/*Fundo no separador Sub-Titulos na pagina do Perfil */
.edit-section-header {
    padding: 8px 25px;
    background: var(--brown);
    color: var(--marfim);
}
/*Titulo no separador sub-titulos na pagina do Perfil */
.edit-section-header h2 {
    margin: 0;
    color: var(--marfim);
    font-size: 20px;
    font-weight: 700;
}
/*Paragrafo no separador sub-titulos na pagina do Perfil */
.edit-section-header p {
    margin: 5px 0 0;
    color: var(--beige);
    font-size: 18px;
    line-height: 1.5;
}


/* =========================================================
   FORMULÁRIO
========================================================= */
/*Contem o conteudo da lista*/
.edit-list-form,
.profile-edit-form {
    width: 100%;
	/*Margem no inicio de cada novo formulario*/
	/*(antes dos subtitulos)*/
	margin-top: 0px;
}


/* =========================================================
   LISTA DE CAMPOS
========================================================= */

.edit-list {
	/*Margem de topo e laterais que envolvem os formularios e help*/
    padding: 12px 25px;
	/*width: 90%;*/
	width: calc(100% - 60px);
}


/* =========================================================
   SEPARACÕES
========================================================= */

.edit-list-row {
    display: grid;
	padding: 6px 0px;
    /*grid-template-columns: 130px 1fr;*/
	grid-template-columns: 200px 1fr;
    align-items: center;
    min-height: 40px;
    border-bottom: 1px solid var(--gray);
    gap: 25px;
}

.edit-list-row:last-child {
    border-bottom: none;
}


/* =========================================================
   LABEL
========================================================= */

.edit-list-row > label {
    color: var(--brown);
    font-size: var(--label_font_size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}


/* =========================================================
   INPUTS
========================================================= */

.edit-list-row input,
.edit-list-row select {
	/*Mais pequeno para caber o help dentro do contentor*/
	/*width: 95%;*/
    width: calc(100% - 30px);
    box-sizing: border-box;
    min-height: 25px;
	/*Separação entre o texto e a border nos formulario input e select*/
    padding: 5px 5px;
    /*background: #FFF9F0;*/
	background: var(--white);
	/*background-color: var(--white) */
    border: 1px solid var(--brown);
    border-radius: var(--border_radius);
    color: var(--brown);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

/*Igual ao input e select mas sem a tag <input> e <select> usado no popup*/
.input_e_select {
	/*Mais pequeno para caber o help dentro do contentor*/
    width: calc(100% - 30px);
    box-sizing: border-box;
    min-height: 25px;
	/*Separação entre o texto e a border nos formulario input e select*/
    padding: 5px 5px;
    /*background: #FFF9F0;*/
	background: var(--white);
	/*background-color: var(--white) */
    border: 1px solid var(--brown);
    border-radius: var(--border_radius);
    color: var(--brown);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


/* =========================================================
   FOCUS
========================================================= */

.edit-list-row input:focus,
.edit-list-row select:focus {
    border-color: var(--red);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(240, 68, 44, .10);
}


/* =========================================================
   PASSWORD
========================================================= */

.edit-list-row input[type="password"] {
    letter-spacing: 1px;
}


/* =========================================================
   RODAPÉ - BOTÃO GUARDAR
========================================================= */

.edit-section-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 25px;
    border-top: 1px solid var(--gray);
    background: var(--marfim);
}


/* =========================================================
   BOTÃO GUARDAR
========================================================= */

.edit-save-button {
    padding: 5px 20px;
    background: var(--brown);
    color: var(--marfim);
    border: 1px solid var(--brown);
    border-radius: var(--border_radius);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
	display: block;
    margin: 0 auto;
	/*transform: translateX(-30px);*/
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .15s ease;
		
}
/*Botao ALTERAR PASSWORD */
.edit-change_password {
	text-transform: uppercase;
	margin-right: auto;
    padding: 4px 18px;
    background: var(--white);
    color: var(--brown);
    border: 2px solid var(--brown);
    border-radius: var(--border_radius);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .15s ease;
}
/*Botao ALTERAR PASSWORD e botao GUARDAR*/
.edit-save-button:hover, .edit-change_password:hover {
    background: var(--red);
    border-color: var(--red);
	color: var(--beige);
}

.edit-save-button:active {
    transform: translateY(1px);
}


/* =========================================================
   TEXTAREAS
========================================================= */

.edit-textarea-row {
	display: grid;
	position: relative;
	/*grid-template-columns: 130px 1fr;*/
    grid-template-columns: 200px 1fr;
    gap: 25px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(84, 37, 14, .10);
}

.edit-textarea-row:last-child {
    border-bottom: none;
}


.edit-textarea-row > label {
    padding-top: 11px;
    color: var(--brown);
    font-size: var(--label_font_size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}


.edit-textarea-row textarea {
	/*Mais pequeno para caber o help dentro do contentor*/
    width: calc(100% - 30px);
	/*min-height: 130px;*/
	min-height: 60px;
    box-sizing: border-box;
    /*padding: 12px 13px;*/
	padding: 5px 5px;
    resize: vertical;
    /*background: #FFF9F0;*/
	background: var(--white);
    border: 1px solid var(--brown);
    border-radius: var(--border_radius);
    color: var(--brown);
    font-family: inherit;
    font-size: var(--label_font_size);
    line-height: 1.55;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.edit-textarea-row textarea:focus {
    border-color: var(--red);
    background: var(--white);
    box-shadow:
        0 0 0 3px rgba(240, 68, 44, .10);
}


/* =========================================================
   FOTOGRAFIAS - PELÍCULA
========================================================= */

.profile-photo-film {
    padding: 22px 28px 26px;
    border-top: 5px solid rgba(84, 37, 14, .15);
    border-bottom: 5px solid rgba(84, 37, 14, .15);
}

.photo-film-header {
    margin-bottom: 14px;
}

.photo-film-title {
    display: block;
    color: var(--brown);
    font-size: 15px;
    font-weight: 700;
}

.photo-film-help {
    display: block;
    margin-top: 4px;
    color: var(--brown);
    font-size: 12px;
}


/* A película atualizada para 4 colunas */
.photo-film {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas por linha */
    gap: 15px 10px; /* 15px de espaçamento vertical (entre linhas) e 10px na horizontal */
    /*padding: 5px;*/
	padding: 12px 25px;
}


/* Cada slide */

.photo-slide {
    position: relative;
    min-width: 0;
}


/* Área da fotografia */

.photo-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: var(--marfim);
    /*border: 1px solid rgba(84, 37, 14, .18);*/
	border: 1px solid var(--brown);
    cursor: pointer;
}

.photo-image-wrap:hover {
    border-color: var(--brown);
}

.photo-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* Fotografia principal */

.main-photo-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--brown);
    color: var(--marfim);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* =========================================================
   BANDEIRA DE APROVAÇÃO (Mantém a integridade do seu layout)
========================================================= */

/* Estilo Base das Bandeiras de Moderação */
.approved-photo-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 5px 9px;
    border-radius: 6px;
    color: var(--marfim);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    pointer-events: none; /* Bloqueia cliques por padrão */
}

/* Estado 0: Sem solicitação (Cinza Escuro - Clicável) */
.approved-photo-badge.is-none {
    background: #6c757d;
    pointer-events: auto;
    cursor: pointer;
}
.approved-photo-badge.is-none:hover {
    background: #5a6268;
}

/* Estado 1: Pedido em curso (Laranja / Amarelo - Bloqueado) */
.approved-photo-badge.is-pending {
    background: #fd7e14;
}

/* Estado 2: Aprovado (Verde - Bloqueado) */
.approved-photo-badge.is-verified {
    background: #28a745;
}

/* Estado 3: Recusado (Vermelho - Clicável) */
.approved-photo-badge.is-rejected {
    background: #dc3545; 
    pointer-events: auto;
    cursor: pointer;
    transition: background 0.2s ease;
}
.approved-photo-badge.is-rejected:hover {
    background: #c82333;
}


/* Botão remover */

.photo-remove {
    width: 100%;
    margin-top: 3px;
    padding: 4px 4px;
    /*border: 1px solid rgba(240, 68, 44, .25);*/
	border: 1px solid var(--brown);
    border-radius: 7px;
    background: transparent;
    color: var(--brown);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.photo-remove:hover {
    background: var(--red);
    color: var(--beige);
}


/* Slide vazio */

.empty-photo {
    aspect-ratio: 1 / 1;
}

.photo-upload-form {
    width: 100%;
    height: 100%;
}

.photo-upload-form input {
    display: none;
}

.photo-upload-form label {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /*border: 1px dashed rgba(84, 37, 14, .30);*/
	border: 1px dashed var(--brown);
    border-radius: 10px;
    background: var(--areia);
    color: var(--brown);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.photo-upload-form label:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(240, 68, 44, .05);
}

.upload-plus {
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
}


/* Arrastar */

.photo-slide[draggable="true"] {
    cursor: grab;
}

.photo-slide.dragging {
    opacity: .45;
}

.photo-slide.drag-over {
    transform: scale(1.03);
}


/* Mobile */

@media (max-width: 700px) {

    .profile-photo-film {
        padding: 20px;
    }

    .photo-film {
        display: flex;
        overflow-x: auto;
		grid-template-columns: repeat(2, 1fr); /* 2 colunas por linha */
        gap: 12px;
        padding-bottom: 6px;
        /*scroll-snap-type: x mandatory;*/
    }

    .photo-slide {
        flex: 0 0 145px;
        scroll-snap-align: start;
    }

}


/* =========================================================
   ZONA DE PERIGO
========================================================= */

.edit-danger-section {
    margin-top: 10px;
}


.danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 22px 25px;
}


.danger-row strong {
    display: block;
    color: var(--brown);
    font-size: var(--label_font_size);
    font-weight: 700;
}


.danger-row p {
    margin: 5px 0 0;
    color: var(--brown);
    font-size: var(--label_font_size);
    line-height: 1.5;
}


/* =========================================================
   BOTÃO REMOVER CONTA
========================================================= */

.danger-row .remove-account-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 9px 18px;
    background: transparent;
    color: #B53737;
    border: 1px solid #B53737;
    border-radius: var(--border_radius);
    text-decoration: none;
    font-size: var(--label_font_size);
    font-weight: 700;
    white-space: nowrap;
    transition:
        background .2s ease,
        color .2s ease;
}


.danger-row .remove-account-button:hover {
    background: #B53737;
    color: var(--marfim);
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 700px) {

    .profile-edit-page {

        margin: 0px auto 5px;

        padding: 0 12px;

        box-sizing: border-box;
    }


    .profile-edit-heading h1 {
        font-size: 24px;
    }


    .edit-section {
        border-radius: 14px;

        margin-bottom: 20px;
    }


    .edit-section-header {
        padding: 16px 18px;
    }


    .edit-section-header h2 {
        font-size: 17px;
    }


    .edit-list {
        padding: 0 18px;
    }


    .edit-list-row {

        grid-template-columns: 1fr;

        gap: 7px;

        padding: 5px 0;

        min-height: auto;

        align-items: stretch;
    }


    .edit-list-row > label {
        font-size: 11px;
    }


    .edit-list-row input,
    .edit-list-row select {
        min-height: 44px;
    }


    .edit-section-footer {

        padding: 15px 18px;
    }


    .edit-save-button {

        width: 100%;
    }


    .edit-textarea-list {
        padding: 0 18px;
    }


    .edit-textarea-row {

        grid-template-columns: 1fr;

        gap: 7px;

        padding: 15px 0;
    }


    .edit-textarea-row > label {
        padding-top: 0;
    }


    .edit-photo-section .photo-film {
        margin: 18px;
    }


    .danger-row {

        flex-direction: column;

        align-items: stretch;

        padding: 20px 18px;
    }


    .danger-row .remove-account-button {
        width: 100%;
    }

}