/* =================================================================== */
/*  Plugin Minhas Receitas Reviews v1.2.1 - Estilos para Tema Existente
/* =================================================================== */

:root {
    --mrr-primary: var(--e-global-color-primary, #FFA90A);
    --mrr-secondary: var(--e-global-color-secondary, #ED7DAE);
    --mrr-accent: var(--e-global-color-accent, #DB5C93);
    --mrr-text: var(--e-global-color-text, #000000);
    --mrr-background-light: var(--e-global-color-0be4b03, #FBF7F5);
    --mrr-background-soft: var(--e-global-color-dd3f63d, #FFF4EE);
    --mrr-white: var(--e-global-color-faffca1, #FFFFFF);
    --mrr-font-primary: var(--e-global-typography-primary-font-family, "Poppins", sans-serif);
    --mrr-font-text: var(--e-global-typography-text-font-family, "Poppins", sans-serif);
}

/* --- Estilização da Lista de Reviews (baseado no HTML do tema) --- */
#approved-reviews-list .review {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    background: var(--mrr-background-light);
    border-bottom: 1px solid var(--mrr-background-soft);
}
#approved-reviews-list .review:last-child {
    border-bottom: none;
}
#approved-reviews-list .review-content > p:first-of-type {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}
#approved-reviews-list .review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
#approved-reviews-list .nome {
    font-weight: 600;
    color: var(--mrr-text);
}
#approved-reviews-list .review-content > p:nth-of-type(2) {
    margin-bottom: 15px;
}
#approved-reviews-list .review-content .fa-star {
    color: var(--mrr-primary);
}
#approved-reviews-list .review-content .fa-regular.fa-star {
    color: #ccc;
}
#approved-reviews-list .data {
    font-size: 12px;
    color: #999;
    margin-left: 10px;
}
#approved-reviews-list .review-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
#approved-reviews-list .review-photo {
    flex-shrink: 0;
}
#approved-reviews-list .review-thumbnail {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}
#approved-reviews-list .review-thumbnail:hover {
    transform: scale(1.05);
}
#approved-reviews-list .review-text-tags .badge.custom-badge {
    background-color: var(--mrr-background-soft);
    color: var(--mrr-accent);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    margin: 0 5px 10px 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#approved-reviews-list .review-excerpt {
    color: #333;
    line-height: 1.6;
}

/* --- Estilos para os componentes do plugin (Form, Resumo, Galeria) --- */
/* (O CSS para os outros shortcodes permanece o mesmo da v1.5) */
.mrr-summary-container, .mrr-form-wrapper, .mrr-gallery-container {
    font-family: var(--mrr-font-text);
    box-sizing: border-box;
}
.mrr-summary-container { display: flex; flex-wrap: wrap; gap: 20px; background-color: var(--mrr-background-light); padding: 25px; border-radius: 12px; margin-bottom: 30px; border: 1px solid var(--mrr-background-soft); }
.mrr-summary-average { flex: 1; min-width: 200px; text-align: center; padding-right: 20px; border-right: 1px solid #eee; }
.mrr-summary-distribution { flex: 2; min-width: 300px; }
.mrr-avg-rating-number { font-size: 48px; font-weight: 600; color: var(--mrr-accent); font-family: var(--mrr-font-primary); }
.mrr-avg-stars { font-size: 20px; color: var(--mrr-primary); margin: 0 0 5px 0; }
.mrr-total-reviews { font-size: 14px; color: #777; }
.mrr-rating-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mrr-star-label { width: 80px; font-size: 14px; color: #555; }
.mrr-progress { flex: 1; height: 8px; background-color: #e9ecef; border-radius: 4px; overflow: hidden; }
.mrr-progress-bar { height: 100%; background-color: var(--mrr-primary); border-radius: 4px; }
.mrr-rating-count { width: 30px; text-align: right; font-size: 14px; color: #777; }
.mrr-form-wrapper { background-color: var(--mrr-background-light); padding: 25px; border-radius: 12px; margin-bottom: 40px; }
.mrr-form-wrapper h3 { text-align: center; font-family: var(--mrr-font-primary); color: var(--mrr-accent); font-size: 22px; margin-top: 0; }
.mrr-form-wrapper p { text-align: center; margin-bottom: 25px; color: #777; }
.mrr-form-group { margin-bottom: 20px; }
.mrr-form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: var(--mrr-text); }
.mrr-form-control { width: 100%; padding: 12px; border: 1px solid var(--mrr-background-soft)!important; border-radius: 8px; font-family: var(--mrr-font-text); transition: border-color 0.3s, box-shadow 0.3s; }
.mrr-form-control:focus { outline: none; border-color: var(--mrr-secondary); box-shadow: 0 0 0 3px rgba(237, 125, 174, 0.2); }
.mrr-form-row { display: flex; gap: 20px; } @media (max-width: 767px) { .mrr-form-row { display: flex; gap: 10px; flex-direction: column;}}
.mrr-form-row .mrr-form-group { flex: 1; }
.mrr-star-rating { display: flex; gap: 5px; font-size: 1.4em; color: #E2D7C6; }
.mrr-star-rating i { cursor: pointer; transition: color 0.2s, transform 0.2s; }
.mrr-star-rating i:hover { transform: scale(1.1); }
.mrr-star-rating .fas, .mrr-star-rating i:hover { color: var(--mrr-primary); }
.mrr-rating-label { font-weight: bold; color: var(--mrr-accent); margin-top: 5px; display: inline-block; min-height: 1.2em; }
.mrr-file-preview { border: 2px dashed #ddd; border-radius: 8px; padding: 20px; text-align: center; position: relative; cursor: pointer; transition: border-color 0.3s; }
.mrr-file-preview:hover { border-color: var(--mrr-secondary); }
.mrr-file-preview i { font-size: 24px; color: #ccc; margin-bottom: 8px; display: block; }
.mrr-file-preview span { display: block; color: #aaa; }
.mrr-file-preview img { max-width: 100px; max-height: 100px; display: none; margin: 0 auto; border-radius: 4px; }
#remove-preview { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 50%; width: 25px; height: 25px; cursor: pointer; display: none; line-height: 25px; font-size: 16px; }
.mrr-file-input { display: none; }
.mrr-form-footer { text-align: right; }
.mrr-btn { padding: 12px 25px; border: none; border-radius: 50px; font-weight: 600; cursor: pointer; font-family: var(--mrr-font-primary); transition: all 0.3s; }
.mrr-btn-primary { background-color: var(--mrr-accent); color: var(--mrr-white); }
.mrr-btn-primary:hover { background-color: var(--mrr-secondary); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.mrr-message { padding: 15px; border-radius: 8px; margin-top: 20px; text-align: center; }
.mrr-success { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.mrr-gallery-container { background: var(--mrr-background-light); border-radius: 12px; padding: 20px; margin-bottom: 30px; }
.mrr-gallery-container h4 { font-family: var(--mrr-font-primary); color: var(--mrr-accent); text-align: center; margin: 0 0 20px 0; }
.mrr-gallery-carousel-wrapper { position: relative; }
.mrr-gallery-carousel { display: flex; gap: 15px; overflow-x: auto; scroll-behavior: smooth; padding: 5px; scrollbar-width: none; }
.mrr-gallery-carousel::-webkit-scrollbar { display: none; }
.mrr-gallery-item { flex: 0 0 120px; height: 120px; border-radius: 8px; overflow: hidden; cursor: zoom-in; transition: transform 0.3s ease, box-shadow 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.mrr-gallery-item:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.mrr-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.mrr-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: var(--mrr-white); border: 1px solid #eee; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--mrr-accent); box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: all 0.3s ease; z-index: 10; }
.mrr-gallery-nav.hidden { opacity: 0; pointer-events: none; }
.mrr-gallery-nav:hover { background: var(--mrr-accent); color: var(--mrr-white); transform: translateY(-50%) scale(1.1); }
.mrr-gallery-nav.prev { left: 10px; }
.mrr-gallery-nav.next { right: 10px; }
.mrr-modal { position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.mrr-modal-content { max-width: 90%; max-height: 90%; border-radius: 8px; animation: scaleIn 0.3s ease; }
@keyframes scaleIn { from { transform: scale(0.9); } to { transform: scale(1); } }
.mrr-modal-close { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; transition: transform 0.3s; }
.mrr-modal-close:hover { transform: scale(1.1); }
/* --- Estilo para o Shortcode de Meta [avaliacao_media] (Versão 2.0) --- */
.recipe-rating-container {
    display: inline-block;
    vertical-align: middle;
}
.recipe-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}
.recipe-rating:hover {
    background-color: var(--mrr-background-light);
}
.rating-stars {
    color: var(--mrr-primary);
    font-size: 16px;
    line-height: 1;
}
.rating-number {
    font-size: 12px;
    color: var(--mrr-text);
    font-family: var(--mrr-font-text);
    line-height: 1;
}
/* =================================================================== */
/*  Estilo para o Botão "Fiz esta receita" [testei_receita_botao]
/* =================================================================== */

.mrr-tested-button-wrapper {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.mrr-tested-button {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center;
    text-transform: lowercase!important;
    gap: 8px;
    background-color: #FBF7F5; /* Fundo mais suave */
    color: var(--mrr-accent); /* Cor do texto */
    padding: 15px 25px;
    border-radius: 50px;
    font-family: var(--mrr-font-primary);
    font-size: 16px!important;
    font-weight: 500!important;
    text-decoration: none;
}

.mrr-tested-button:hover {
    background-color: var(--mrr-secondary);
    color: var(--mrr-white);
    border-color: var(--mrr-secondary);
}

.mrr-tested-button i {
    font-size: 14px;
}