/*
=============================================
 ARQUIVO DE ESTILOS: Página de Detalhes da Receita
 VERSÃO: 3.4 (Mais Cor e Destaques Visuais)
=============================================
*/

/* Container de fundo para a página, dando um contexto visual MAIS VIBRANTE */
.recipe-page-background {
    padding-top: 4rem;
    padding-bottom: 5rem;
    background: linear-gradient(to bottom right, var(--color-background), #e6ffe6); /* Gradiente suave de fundo */
}

/* O card principal que contém toda a receita */
.recipe-content-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
    border: 1px solid rgba(16, 185, 129, 0.1); /* Borda sutil com a cor primária */
}

/* Header da receita: imagem + título e meta */
.recipe-header {
    padding: 2rem;
    background-color: #f7fff7; /* Um fundo bem leve para o header */
}

.recipe-hero-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow-md); /* Sombra na imagem para destacá-la */
}

.title-container {
    text-align: center;
}

.recipe-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--color-primary-dark); /* Título principal com a cor primária escura */
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* Sombra sutil no título */
}

.recipe-meta-block {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin: 2.5rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(16, 185, 129, 0.2); /* Divisor com cor primária mais evidente */
}

.meta-item { text-align: center; }
.meta-item i { font-size: 1.5rem; color: var(--color-primary); margin-bottom: 0.5rem; display: block; }
.meta-item span { display: block; font-weight: 700; font-family: var(--font-headings); font-size: 1.1rem; color: var(--color-text); }
.meta-item small { font-size: 0.8rem; text-transform: uppercase; color: var(--color-text-light); }

.recipe-description {
    font-size: 1.2rem;
    color: var(--color-text-light);
    line-height: 1.7;
    max-width: 65ch;
    margin: 0 auto;
}

/* Divisor visual mais forte e colorido */
.recipe-divider {
    border: 0;
    height: 2px; /* Mais grossa */
    background: linear-gradient(to right, rgba(16, 185, 129, 0), var(--color-primary), rgba(16, 185, 129, 0)); /* Gradiente com a cor primária */
    margin: 0 2rem;
    opacity: 0.6;
}

/* Corpo principal da receita: ingredientes e modo de preparo */
.recipe-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.5rem; /* Mais espaço entre as seções */
    padding: 3rem; /* Mais padding */
}

.section-title {
    font-size: 2rem;
    color: var(--color-primary-dark);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 2px solid var(--color-accent); /* Borda com cor de destaque */
    padding-bottom: 0.8rem;
}
.section-title i { color: var(--color-accent); /* Ícones com cor de destaque */ }

/* Painel de Ingredientes com FUNDO COLORIDO */
.ingredient-list {
    background-color: #ecfdf5; /* Um verde muito suave para o fundo da lista */
    padding: 2.5rem; /* Mais padding */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm); /* Sombra para destacá-lo */
    border: 1px solid rgba(16, 185, 129, 0.15); /* Borda sutil */
}

.ingredient-group-title {
    font-family: var(--font-headings);
    font-size: 1.4rem;
    color: var(--color-text);
    margin-top: 1.8rem; /* Mais espaço */
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px dashed rgba(107, 114, 128, 0.2); /* Linha tracejada suave */
}
.ingredient-list ul:first-of-type .ingredient-group-title { margin-top: 0; }
.ingredient-list ul { list-style: none; padding: 0; }
.ingredient-list li { margin-bottom: 0.8rem; font-size: 1.1rem; }
.ingredient-list label { display: flex; align-items: center; cursor: pointer; padding: 0.8rem 1rem; border-radius: 6px; transition: var(--transition); }
.ingredient-list label:hover {
    background-color: #d1fae5; /* Verde mais claro no hover */
    transform: translateX(5px);
    box-shadow: 0 2px 5px rgba(16, 185, 129, 0.1);
}
/* Checkbox com borda e preenchimento primário */
.ingredient-list input[type="checkbox"] {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    width: 24px; height: 24px;
    border: 2px solid var(--color-primary); /* Borda primária */
    border-radius: 6px; margin-right: 1.2rem; display: grid; place-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.2s ease-in-out;
    background-color: var(--color-white); /* Fundo branco para contraste */
}
.ingredient-list input[type="checkbox"]::before {
    content: "\2713"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 1.3rem; color: var(--color-white);
    transform: scale(0); transition: transform 0.2s ease-in-out;
}
.ingredient-list input[type="checkbox"]:checked {
    background-color: var(--color-primary); /* Preenche com a cor primária */
    border-color: var(--color-primary);
}
.ingredient-list input[type="checkbox"]:checked::before { transform: scale(1); }
.ingredient-list input[type="checkbox"]:checked + span { text-decoration: line-through; color: var(--color-text-light); }

/* Painel de Modo de Preparo com MAIS DESTAQUE NOS PASSOS */
.instruction-steps ol { list-style: none; padding-left: 0; counter-reset: steps-counter; }
.instruction-steps li {
    counter-increment: steps-counter;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    font-size: 1.15rem;
    line-height: 1.8;
    background-color: #fffbeb; /* Fundo amarelo muito suave para cada passo */
    padding: 1.8rem; /* Mais padding */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm); /* Sombra para destacar */
    border: 1px solid rgba(245, 158, 11, 0.15); /* Borda sutil com a cor de acento */
    transition: var(--transition);
}
.instruction-steps li:hover {
    transform: translateY(-3px); /* Efeito de elevação ao passar o mouse */
    box-shadow: var(--shadow-md);
}

.instruction-steps li::before {
    content: counter(steps-counter);
    background-color: var(--color-accent); /* Números com a cor de acento */
    color: var(--color-white);
    font-family: var(--font-headings);
    font-weight: 700;
    min-width: 45px; /* Ligeiramente maior */
    height: 45px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.4rem; /* Texto do número maior */
    margin-top: 3px;
    box-shadow: var(--shadow-sm);
}

.instruction-steps .step-content { color: var(--color-text); } /* Garante cor escura para o texto principal */
.instruction-steps .step-content strong {
    color: var(--color-primary-dark); /* Destaque com a cor primária escura */
    font-weight: inherit;
}

/* Responsividade */
@media (min-width: 768px) {
    .recipe-content-card { margin: 0 1.5rem; }
    .recipe-header { padding: 3rem; }
    .recipe-hero-image { height: 400px; }
    .recipe-body { padding: 3rem; }
}

@media (min-width: 1024px) {
    .recipe-content-card { margin: 0 auto; }
    .recipe-body { grid-template-columns: 1fr 2fr; gap: 4rem; }
    .recipe-header { display: grid; grid-template-columns: 4fr 5fr; gap: 3rem; align-items: center; padding: 4rem; }
    .recipe-hero-image { height: 100%; max-height: 450px; margin-bottom: 0; }
    .title-container, .recipe-description { text-align: left; }
    .recipe-meta-block { justify-content: flex-start; }
}