/* ==========================================================================
   Macahé Burguer — Monte Seu Macahé (wizard de ingredientes)
   Depende de design-system.css. CSP do projeto: style-src 'self'.
   ========================================================================== */

.mb-builder__error {
    margin-bottom: var(--mb-space-6);
}

.mb-builder__loading {
    color: var(--mb-text-muted);
}

.mb-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: var(--mb-space-12);
    align-items: start;
}

/* --- Etapas (categorias) --------------------------------------------------- */

.mb-builder__steps {
    display: flex;
    flex-direction: column;
    gap: var(--mb-space-10);
}

.mb-builder__step .mb-h3 {
    margin-bottom: var(--mb-space-4);
}

.mb-builder__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--mb-space-3);
}

/* Chip de ingrediente: só o que é exclusivo do wizard (seleção) mora aqui —
   a base visual (mb-ingredient, __thumb, __name) está no design system,
   reaproveitada também pela página estática /ingredientes.
   O <input> real fica só para foco/teclado/leitor de tela — o visual é todo
   no <label>, marcado via classe no JS. */
.mb-builder__grid .mb-ingredient {
    cursor: pointer;
    transition: box-shadow var(--mb-dur-fast) var(--mb-ease),
                background var(--mb-dur-fast) var(--mb-ease);
}

.mb-ingredient:hover {
    box-shadow: inset 0 0 0 2px var(--mb-blue);
}

.mb-ingredient--checked {
    background: var(--mb-blue-tint);
    box-shadow: inset 0 0 0 2px var(--mb-blue);
}

.mb-ingredient__input {
    position: absolute;
    top: var(--mb-space-2);
    left: var(--mb-space-2);
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mb-blue);
    cursor: pointer;
}

/* Marca de selecionado, canto superior direito — some quando desmarcado. */
.mb-ingredient__check {
    position: absolute;
    top: var(--mb-space-2);
    right: var(--mb-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--mb-radius-pill);
    background: var(--mb-blue);
    color: var(--mb-text-inverse);
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--mb-dur-fast) var(--mb-ease),
                transform var(--mb-dur-fast) var(--mb-ease);
}

.mb-ingredient__check svg {
    width: 12px;
    height: 12px;
}

.mb-ingredient--checked .mb-ingredient__check {
    opacity: 1;
    transform: scale(1);
}

/* --- Painel de preview (sticky) --------------------------------------------- */

.mb-builder__preview {
    position: sticky;
    top: 96px;
}

.mb-builder-card {
    background: var(--mb-surface);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-lg);
    padding: var(--mb-space-8);
    box-shadow: var(--mb-shadow-2);
}

.mb-builder-card .mb-h3 {
    margin-bottom: var(--mb-space-4);
}

/* Pilha de camadas: cresce de baixo para cima, como um burger de verdade. */
.mb-builder-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
    min-height: 120px;
    margin-bottom: var(--mb-space-2);
}

.mb-builder-stack--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--mb-bg-alt);
    border-radius: var(--mb-radius-md);
    box-shadow: inset 0 0 0 1px var(--mb-border);
}

.mb-builder-stack--empty::before {
    content: "";
    width: 40px;
    height: 40px;
    background: var(--mb-border-strong);
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.6c0-3 3.6-5.2 8-5.2s8 2.2 8 5.2Z'/%3E%3Cpath d='M4.2 12.6h15.6'/%3E%3Cpath d='M4 15.6h16c0 2.6-2 4-4.6 4H8.6C6 19.6 4 18.2 4 15.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.6c0-3 3.6-5.2 8-5.2s8 2.2 8 5.2Z'/%3E%3Cpath d='M4.2 12.6h15.6'/%3E%3Cpath d='M4 15.6h16c0 2.6-2 4-4.6 4H8.6C6 19.6 4 18.2 4 15.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mb-builder-stack__layer {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--mb-space-4);
    background: var(--mb-blue-tint) center / cover no-repeat;
    border-radius: var(--mb-radius-sm);
    box-shadow: inset 0 0 0 1px var(--mb-border);
    overflow: hidden;
}

.mb-builder-stack__label {
    position: relative;
    font-size: 13px;
    font-weight: 800;
    color: var(--mb-text);
    text-shadow: 0 1px 2px rgba(255, 255, 255, .7);
}

.mb-builder__count {
    margin-bottom: var(--mb-space-6);
}

.mb-builder__save {
    margin-bottom: 0;
}

.mb-builder__share {
    margin-top: var(--mb-space-6);
}

.mb-builder__link-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 6px 8px 6px 16px;
    margin-top: var(--mb-space-3);
    background: var(--mb-surface);
    border-radius: var(--mb-radius-sm);
    box-shadow: inset 0 0 0 2px var(--mb-border-strong);
    transition: box-shadow var(--mb-dur-fast) var(--mb-ease);
}

.mb-builder__link-wrap:hover,
.mb-builder__link-wrap:focus-within {
    box-shadow: inset 0 0 0 2px var(--mb-blue);
}

.mb-builder__link {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    font-size: 13px;
    color: var(--mb-blue);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.mb-builder__link:hover {
    text-decoration: underline;
}

.mb-builder__link-wrap .mb-field__action {
    position: static;
    transform: none;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    background: var(--mb-blue-tint);
    border: 0;
    border-radius: var(--mb-radius-xs);
    font-family: var(--mb-font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--mb-blue);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--mb-dur-fast) var(--mb-ease), color var(--mb-dur-fast) var(--mb-ease);
}

.mb-builder__link-wrap .mb-field__action:hover {
    background: var(--mb-blue);
    color: var(--mb-text-inverse);
}

/* --- Responsivo -------------------------------------------------------------- */

@media (max-width: 1024px) {
    .mb-builder {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--mb-space-8);
    }

    .mb-builder__preview {
        position: static;
    }
}

@media (max-width: 599px) {
    .mb-builder__grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

/* --- Criação compartilhada (somente leitura) -------------------------------- */

.mb-shared__preview {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--mb-space-12);
    align-items: start;
    margin-bottom: var(--mb-space-8);
}

.mb-shared__photo {
    aspect-ratio: 4 / 3;
    border-radius: var(--mb-radius-xl);
    overflow: hidden;
    background: var(--mb-blue-tint);
    box-shadow: var(--mb-shadow-2);
}

.mb-shared__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mb-shared__stack {
    min-height: 220px;
}

/* --- Minhas criações -------------------------------------------------------- */

.mb-mine__alerts {
    display: flex;
    flex-direction: column;
    gap: var(--mb-space-3);
    max-width: 720px;
    margin-bottom: var(--mb-space-8);
}

.mb-shared__cta {
    margin: 0;
}

@media (max-width: 767px) {
    .mb-shared__preview {
        grid-template-columns: minmax(0, 1fr);
    }
}