/* ============================
   ESTRELA SOBRE A IMAGEM
=============================== */
.mf-thumb-wrapper {
    position: relative;
    display: inline-block;
}

.mf-favorite-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 10;

    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #ffffff;

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

    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

/* ============================
   ESTRELA INLINE (AO LADO DO TÍTULO)
=============================== */
.mf-inline-star {
    position: relative;
    top: 3px;
    margin-left: 10px;
}

/* Ícone */
.mf-star {
    width: 14px!important;
    height: 14px!important;
    fill: none;
    stroke: #0E0D26;
    stroke-width: 2px;
    transition: transform .2s ease, fill .2s ease, stroke .2s ease;
}

.mf-favorite-btn:hover .mf-star {
    transform: scale(1.1);
}

/* ESTADO FAVORITADO */
.mf-favorite-btn.is-favorited {
    background: #0E0D26;
    border-color: #0E0D26;
}

.mf-favorite-btn.is-favorited .mf-star {
    fill: #50F2F2;
    stroke: #50F2F2;
}

/* ============================
   GRID ESTILO STEPS
=============================== */
.steps-responsive-grid {
    display: grid;
    gap: 20px;
    width: 100%;
}

/* Desktop → 3 colunas */
@media (min-width: 1024px) {
    .steps-responsive-grid {
        grid-template-columns: repeat(3, calc((100% - 40px) / 3));
    }
}

/* Tablet → 2 colunas */
@media (min-width: 768px) and (max-width: 1023px) {
    .steps-responsive-grid {
        grid-template-columns: repeat(2, calc((100% - 20px) / 2));
    }
}

/* Mobile → 1 coluna */
@media (max-width: 767px) {
    .steps-responsive-grid {
        grid-template-columns: 100%;
    }
}

/* ============================
   CARD
=============================== */
.step-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 20px;
}

/* Título */
.step-title {
    margin: 0!important;
}

/* ============================
   PAGINAÇÃO
=============================== */
.steps-pagination {
    display: flex;
    gap: 14px;
    margin-top: 20px;
}

.steps-page-btn {
    width: 48px;
    height: 48px;
    background: #50F2F2;
    border-radius: 50%;
    color: #0E0D26;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #50F2F2;
    cursor: pointer;
    transition: .25s;
}

.steps-page-btn:hover {
    background: #ffffff;
}

.steps-page-btn.active {
    background: #ffffff;
}