/* -----------------------------------------------------------------------
   MadNutz Kits — Seletor de Sabores
   ----------------------------------------------------------------------- */

:root {
    --mn-red:    #C82830;
    --mn-red-hi: #FF003C;
    --mn-yellow: #FFDF00;
    --mn-black:  #131313;
    --mn-green:  #4ade80;
}

.mnk-selector-wrap { margin-top: 20px; }

/* ---- Barra de progresso por tamanho ---- */
.mnk-progress-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 13px;
    color: #555;
}

.mnk-prog-item { display: flex; align-items: center; gap: 4px; }
.mnk-prog-item strong { color: #333; }
.mnk-prog-item.mnk-prog-done strong { color: var(--mn-green); }
.mnk-prog-sep { color: #ccc; margin: 0 2px; }

/* ---- Lista de produtos ---- */
.mnk-product-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 460px;
    overflow-y: auto;
    margin-bottom: 20px;
    padding-right: 2px;
}

.mnk-loading { color: #888; font-style: italic; padding: 12px 0; }

/* ---- Grupo por tamanho ---- */
.mnk-size-group { margin-bottom: 12px; }

.mnk-size-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    padding: 4px 0 6px;
    border-bottom: 1px solid #eee;
    margin-bottom: 6px;
}

.mnk-slot-progress { font-weight: 400; color: #aaa; margin-left: 4px; }

/* ---- Linha de produto ---- */
.mnk-product-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fafafa;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.mnk-product-row.selected {
    border-color: var(--mn-red-hi);
    box-shadow: 0 0 0 2px rgba(255, 0, 60, 0.1);
    background: #fff;
}

/* Thumb */
.mnk-thumb {
    width: 48px; height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #eee;
    display: flex; align-items: center; justify-content: center;
}
.mnk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mnk-thumb-placeholder { font-size: 22px; }

/* Info */
.mnk-product-info { flex: 1; min-width: 0; }
.mnk-product-name {
    display: block;
    font-size: 13px; font-weight: 600; color: #111;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mnk-product-size { display: block; font-size: 11px; color: #999; margin-top: 1px; }

/* Contador */
.mnk-counter { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.mnk-btn-minus, .mnk-btn-plus {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #fff;
    font-size: 16px; line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    display: flex; align-items: center; justify-content: center;
    padding: 0; color: #555;
}
.mnk-btn-plus:not(:disabled):hover  { border-color: var(--mn-red);  color: var(--mn-red); }
.mnk-btn-minus:not(:disabled):hover { border-color: #555; }
.mnk-btn-minus:disabled, .mnk-btn-plus:disabled { opacity: 0.25; cursor: not-allowed; }

.mnk-qty {
    font-size: 14px; font-weight: 700; min-width: 18px;
    text-align: center; color: #222;
}

/* ---- Botão CTA ---- */
#mnk-cta-btn.mnk-cta-btn {
    display: block; width: 100%;
    padding: 14px;
    border: none; border-radius: 8px;
    font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
    background: #d0d0d0; color: rgba(255,255,255,0.5);
}
#mnk-cta-btn.mnk-cta-btn:not(:disabled),
.mnk-cta-btn.ready {
    background: var(--mn-red-hi); color: #fff;
    box-shadow: 0 4px 0 rgba(200, 0, 40, 0.35);
    cursor: pointer;
}
#mnk-cta-btn.mnk-cta-btn:not(:disabled):hover,
.mnk-cta-btn.ready:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 0 rgba(200, 0, 40, 0.35);
}
#mnk-cta-btn.mnk-cta-btn:disabled { cursor: not-allowed; }

/* ---- Kit Fixo ---- */
.mnk-fixed-kit { margin-top: 20px; }

.mnk-fixed-label {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #888; margin-bottom: 10px;
}

.mnk-fixed-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }

.mnk-fixed-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border: 1px solid #e8e8e8; border-radius: 8px;
    background: #fafafa;
}

.mnk-fixed-name { flex: 1; font-size: 13px; font-weight: 600; color: #111; }

.mnk-fixed-qty {
    font-size: 13px; font-weight: 700;
    color: var(--mn-red);
    background: rgba(200,40,48,0.08);
    padding: 2px 8px; border-radius: 4px;
}

/* ---- Botão na listagem ---- */
.mnk-loop-btn { background-color: var(--mn-red) !important; color: #fff !important; border-color: var(--mn-red) !important; }
.mnk-loop-btn:hover { background-color: #a01f25 !important; border-color: #a01f25 !important; }

/* ---- Chuva de castanhas ---- */
.mnk-cashew-particle {
    animation: mnk-cashew-fall var(--dur, 1.5s) var(--delay, 0s) ease-in forwards;
    will-change: transform, opacity;
}

@keyframes mnk-cashew-fall {
    0% {
        transform: translateY(0) translateX(0) rotate(var(--rot0, 0deg));
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) translateX(calc(var(--drift, 0px) * 0.6))
                   rotate(calc(var(--rot0, 0deg) + (var(--rot1, 360deg) - var(--rot0, 0deg)) * 0.5));
    }
    85% { opacity: 1; }
    100% {
        transform: translateY(108vh) translateX(var(--drift, 0px)) rotate(var(--rot1, 360deg));
        opacity: 0;
    }
}