/* ================================================================
   MeuDLive — loja-modais.css
   CSS dos modais: produto, carrinho, auth, checkout
   ================================================================ */

/* ── Overlay base ──────────────────────────────────────────────── */
.mdl-overlay {
    position: fixed;
    inset: 0;
    background: var(--mdl-overlay-cor, rgba(0,0,0,.55));
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    animation: mdl-fade-in .2s ease;
}
@keyframes mdl-fade-in { from { opacity:0 } to { opacity:1 } }

.mdl-box {
    background: var(--mdl-bg, #fff);
    border-radius: var(--mdl-radius, 20px) var(--mdl-radius, 20px) 0 0;
    width: 100%;
    max-width: 540px;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    animation: mdl-slide-up .25s ease;
    -webkit-overflow-scrolling: touch;
}
/* Carrinho: o scroll fica so na lista, nao no box inteiro */
.mdl-carrinho-box {
    overflow: hidden;
}
@keyframes mdl-slide-up { from { transform:translateY(60px); opacity:0 } to { transform:translateY(0); opacity:1 } }

/* Desktop: caixa centralizada */
@media (min-width: 600px) {
    .mdl-overlay { align-items: center; padding: 20px; }
    .mdl-box { border-radius: var(--mdl-radius, 20px); }
}
@media (max-width: 599px) {
    .mdl-overlay { align-items: flex-end; padding: 0; }
    .mdl-produto-wrap { max-width: 100%; padding: 0; }
    .mdl-box { max-height: 94svh; border-radius: var(--mdl-radius, 20px) var(--mdl-radius, 20px) 0 0; }
    .mdl-prod-img-wrap { aspect-ratio: 4/3; border-radius: var(--mdl-radius, 20px) var(--mdl-radius, 20px) 0 0; }
}

/* ── Fechar ────────────────────────────────────────────────────── */
/* Wrapper: flex-col, alinha X acima do box */
.mdl-produto-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    max-width: 540px;
    /* Mobile: fica na base da tela */
    position: relative;
}
.mdl-fechar {
    /* Fora do box, acima e à direita — position:relative ao wrap */
    position: relative;
    align-self: flex-end;
    margin-bottom: 8px;
    margin-right: 4px;
    background: var(--mdl-fechar-bg, rgb(233,71,71));
    border: none;
    width: 36px; height: 36px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    color: var(--mdl-fechar-cor, #ffffff);
    display: flex; align-items: center; justify-content: center;
    z-index: 2010;
    transition: background .15s;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}
.mdl-fechar:hover { background: #0a0404; color: rgb(213 19 19);font-size: 23px;font-weight: bold;}

/* ── Botões globais ────────────────────────────────────────────── */
.mdl-btn-primario {
    /*background: #e8501a;*/
    background: var(--btn-add-bg, #e8501a);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: opacity .15s, transform .1s;
}
.mdl-btn-primario:hover  { opacity: .9; }
.mdl-btn-primario:active { transform: scale(.98); }
.mdl-btn-primario:disabled { opacity: .5; cursor: not-allowed; }

.mdl-btn-secundario {
    background: #f1f5f9;
    color: #1a1a2e;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.mdl-btn-secundario:hover { background: #e2e8f0; }

/* ════════════════════════════════════════════════════════════════
   MODAL PRODUTO
════════════════════════════════════════════════════════════════ */
.mdl-produto-box { padding: 0 0 20px; }

.mdl-prod-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: #f1f5f9;
}
.mdl-prod-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.mdl-prod-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.mdl-prod-badge-promo,
.mdl-prod-badge-dest {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    color: #fff;
}
.mdl-prod-badge-promo { background: var(--mdl-badge-promo-cor, #28a745); }
.mdl-prod-badge-dest  { background: var(--mdl-badge-dest-cor, #f59e0b); }

.mdl-prod-corpo { padding: 16px 20px 0; overflow-anchor: none; }

.mdl-prod-nome {
    font-size: var(--mdl-nome-tam, 20px); font-weight: 800;
    color: var(--mdl-nome-cor, #1a1a2e); margin: 0 0 6px;
    padding-right: 32px;
}
.mdl-prod-desc {
    font-size: 14px; color: var(--mdl-desc-cor, #64748b);
    margin: 0 0 10px; line-height: 1.5;
}
.mdl-prod-precos {
    display: flex; gap: 10px; align-items: baseline;
    margin-bottom: 16px;
}
.mdl-prod-preco-por {
    font-size: 22px; font-weight: 800;
    color: var(--mdl-preco-cor, #e8501a);
}
.mdl-prod-preco-de {
    font-size: 14px; color: var(--mdl-preco-de-cor, #94a3b8);
    text-decoration: line-through;
    opacity: 0.7;
}

/* Grupos de opcionais */
.mdl-grupo {
    margin-bottom: 20px;
    border: 1px solid var(--mdl-grupo-borda, #f1f5f9);
    border-radius: 14px;
    overflow: hidden;
}
.mdl-grupo-header {
    background: var(--mdl-grupo-header-bg, #f8fafc);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}
.mdl-grupo-nome {
    font-weight: 700; font-size: 14px; color: var(--mdl-grupo-nome-cor, #1a1a2e);
}
.mdl-grupo-badge {
    font-size: 11px; padding: 3px 8px;
    border-radius: 10px; font-weight: 600;
}
.mdl-grupo-badge.obrig {
    background: var(--mdl-grupo-badge-obrig-bg, #fce8e6); color: var(--mdl-grupo-badge-obrig-cor, #c5221f);
}
.mdl-grupo-badge.opc {
    background: var(--mdl-grupo-badge-opc-bg, #f1f5f9);
    color: var(--mdl-grupo-badge-opc-cor, #64748b);
}
/* Badge de limite: Escolha X / Ate N / Ilimitado */
.mdl-grupo-lim {
    font-size: 11px;
    color: var(--mdl-grupo-lim-cor, #94a3b8);
    font-weight: 500;
}
.mdl-grupo-itens { padding: 8px 0; background: var(--mdl-grupo-itens-bg, #ffffff); }

.mdl-item-opcao {
    display: flex; align-items: center;
    padding: 10px 16px; cursor: pointer;
    transition: background .1s;
    gap: 12px;
    border-bottom: 1px dashed #e2e8f0;
}
.mdl-item-opcao:last-child { border-bottom: none; }
.mdl-item-opcao:hover { background: var(--mdl-item-hover-bg, #f8fafc); }
.mdl-item-opcao:has(input:checked) { background: var(--mdl-item-hover-bg, #f8fafc); }
.mdl-item-opcao.limite-atingido {
    opacity: 0.38;
    pointer-events: none;
    filter: grayscale(0.3);
    transition: opacity .2s, filter .2s;
}
.mdl-item-opcao input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--mdl-qtd-cor, #e8501a); }
.mdl-item-opcao-nome { flex: 1; font-size: 14px; color: var(--mdl-item-nome-cor, #1a1a2e); }
.mdl-item-opcao-preco { font-size: 13px; color: var(--mdl-item-preco-cor, #28a745); font-weight: 600; }

/* Observação */
.mdl-prod-obs-wrap { margin-bottom: 16px; }
.mdl-prod-obs-label { font-size: 13px; color: #64748b; display: block; margin-bottom: 6px; }
.mdl-prod-obs {
    width: 100%; box-sizing: border-box;
    border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 10px 12px; font-size: 14px;
    resize: vertical; font-family: inherit;
    color: #1a1a2e;
}
.mdl-prod-obs:focus { outline: none; border-color: var(--mdl-obs-foco-cor, #e8501a); }

/* Rodapé quantidade + adicionar */
.mdl-prod-rodape {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px 20px;
    background: var(--mdl-rodape-bg, #ffffff);
    border-top: var(--mdl-rodape-borda-esp, 1px) solid var(--mdl-rodape-borda-cor, #f1f5f9);
    margin: 12px -20px -20px;
    position: sticky;
    bottom: -30px;
}
.mdl-qtd-wrap {
    display: flex; align-items: center;
    border: 2px solid #e2e8f0; border-radius: 12px;
    overflow: hidden; flex-shrink: 0;
}
.mdl-qtd-btn {
    background: var(--mdl-qtd-bg, #f1f5f9); border: none;
    width: 40px; height: 48px;
    font-size: 22px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--mdl-qtd-cor, #e8501a); font-weight: 700;
    transition: background .15s;
}
.mdl-qtd-btn:hover { background: var(--mdl-qtd-bg, #f1f5f9); opacity:.8; }
.mdl-qtd-num {
    width: 40px; height: 48px; text-align: center;
    font-size: 17px; font-weight: 800; color: #1a1a2e;
    background: var(--mdl-qtd-num-bg, #ffffff);
    display: flex; align-items: center; justify-content: center;
}
.mdl-btn-add {
    flex: 1;
    background: var(--btn-add-bg, #e8501a);
    color: var(--btn-add-cor, #fff);
    border: none;
    border-radius: 12px;
    padding: 0 16px;
    height: 48px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
    letter-spacing: 0.2px;
    /* box-shadow removido */
}
.mdl-btn-add:hover  { opacity: .92; }
.mdl-btn-add:active { transform: scale(.97); }
.mdl-btn-add:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ════════════════════════════════════════════════════════════════
   MODAL CARRINHO
════════════════════════════════════════════════════════════════ */
.mdl-carrinho-box {
    display: flex; flex-direction: column;
    max-height: 80vh;
}

.mdl-carrinho-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.mdl-carrinho-titulo { font-size: 18px; font-weight: 800; color: #1a1a2e; margin: 0; }


.mdl-carrinho-lista {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
    min-height: 80px;
    max-height: 50vh;
}
.mdl-carrinho-vazio { text-align: center; padding: 30px 0; color: #94a3b8; }
.mdl-carrinho-vazio p { margin: 8px 0 16px; font-size: 15px; }

/* Item do carrinho */
.mdl-carrinho-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
.mdl-carrinho-item-img {
    width: 64px; height: 64px; border-radius: 10px;
    object-fit: cover; flex-shrink: 0;
    background: #f1f5f9;
}
.mdl-carrinho-item-info { flex: 1; min-width: 0; }
.mdl-carrinho-item-nome {
    font-weight: 700; font-size: 14px; color: #1a1a2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mdl-carrinho-item-adicionais {
    font-size: 12px; color: #64748b; margin: 2px 0 6px;
    line-height: 1.4;
}
.mdl-carrinho-item-controls {
    display: flex; align-items: center; gap: 8px;
}
.mdl-carrinho-qtd-btn {
    background: #f1f5f9; border: none;
    width: 28px; height: 28px; border-radius: 8px;
    font-size: 16px; cursor: pointer; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: background .1s;
}
.mdl-carrinho-qtd-btn:hover { background: #e2e8f0; }
.mdl-carrinho-qtd-num { font-size: 14px; font-weight: 700; min-width: 20px; text-align: center; }
.mdl-carrinho-item-preco { font-weight: 800; font-size: 15px; color: #e8501a; white-space: nowrap; }
.mdl-carrinho-item-del {
    background: none; border: none; cursor: pointer;
    font-size: 18px; color: #cbd5e1; padding: 4px;
    transition: color .1s;
}
.mdl-carrinho-item-del:hover { color: #ef4444; }

/* Rodapé do carrinho */
.mdl-carrinho-rodape {
    padding: 16px 20px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
    background: #fff;
    position: sticky;
    bottom: 0;
}
.mdl-carrinho-total-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; font-size: 16px; color: #1a1a2e;
}
.mdl-carrinho-total-row strong { font-size: 20px; color: #e8501a !important; }

/* ════════════════════════════════════════════════════════════════
   MODAL AUTH
════════════════════════════════════════════════════════════════ */
.mdl-auth-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.mdl-auth-titulo { font-size: 18px; font-weight: 800; color: #1a1a2e; margin: 0; }

.mdl-auth-box { padding: 4px 24px 28px; }

.mdl-auth-tabs {
    display: flex; gap: 0;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    margin: 8px 0 20px;
}
.mdl-auth-tab {
    flex: 1;
    background: none; border: none;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px; font-weight: 700;
    cursor: pointer; color: #64748b;
    transition: all .2s;
}
.mdl-auth-tab.ativo {
    background: #fff;
    color: #1a1a2e;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.mdl-auth-sub { font-size: 14px; color: #64748b; margin: 0 0 16px; }

.mdl-auth-field { margin-bottom: 14px; }
.mdl-auth-field label { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 6px; }
.mdl-auth-field input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 12px 14px; font-size: 15px;
    color: #1a1a2e; font-family: inherit;
    transition: border-color .15s;
}
.mdl-auth-field input:focus { outline: none; border-color: #e8501a; }

.mdl-auth-erro {
    background: #fce8e6; color: #c5221f;
    padding: 10px 14px; border-radius: 10px;
    font-size: 13px; margin-bottom: 12px;
}
.mdl-auth-link { text-align: center; font-size: 13px; color: #64748b; margin: 14px 0 0; }
.mdl-auth-link a { color: #e8501a; text-decoration: none; font-weight: 700; }
.mdl-auth-link a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   MODAL CHECKOUT
════════════════════════════════════════════════════════════════ */
.mdl-checkout-box { display: flex; flex-direction: column; max-height: 92vh; }

.mdl-checkout-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.mdl-checkout-titulo { font-size: 18px; font-weight: 800; color: #1a1a2e; margin: 0; }

.mdl-checkout-corpo {
    flex: 1; overflow-y: auto; padding: 12px 20px;
}
.mdl-checkout-secao { margin-bottom: 20px; }
.mdl-checkout-secao-titulo { font-size: 13px; font-weight: 700; color: #64748b; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }

.mdl-entrega-tipo-wrap { display: flex; gap: 10px; }
.mdl-entrega-tipo-btn {
    flex: 1; text-align: center;
    padding: 12px 8px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px; font-weight: 600;
    color: #64748b;
    transition: all .2s;
}
.mdl-entrega-tipo-btn.ativo {
    border-color: #e8501a;
    color: #e8501a;
    background: #fff5f2;
}

.mdl-checkout-field { margin-bottom: 12px; }
.mdl-checkout-field label { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 5px; }
.mdl-checkout-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 11px 13px; font-size: 14px;
    color: #1a1a2e; font-family: inherit;
    transition: border-color .15s;
}
.mdl-checkout-input:focus { outline: none; border-color: #e8501a; }
select.mdl-checkout-input { background: #fff; }
textarea.mdl-checkout-input { resize: vertical; min-height: 60px; }

.mdl-checkout-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.mdl-pgto-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.mdl-pgto-btn {
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px; font-weight: 600;
    color: #64748b;
    transition: all .15s;
}
.mdl-pgto-btn:has(input:checked) {
    border-color: #e8501a;
    color: #e8501a;
    background: #fff5f2;
}

/* Resumo */
.mdl-checkout-resumo { background: #f8fafc; border-radius: 14px; padding: 14px 16px; }
.mdl-resumo-linha {
    display: flex; justify-content: space-between;
    font-size: 14px; color: #1a1a2e;
    margin-bottom: 8px;
}
.mdl-resumo-linha:last-child { margin-bottom: 0; }
.mdl-resumo-total { border-top: 1px solid #e2e8f0; padding-top: 10px; margin-top: 4px; font-size: 16px; }
.mdl-resumo-total strong { font-size: 20px; color: #e8501a; }

/* Rodapé checkout */
.mdl-checkout-rodape {
    padding: 14px 20px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.mdl-checkout-erro {
    background: #fce8e6; color: #c5221f;
    padding: 10px 14px; border-radius: 10px;
    font-size: 13px; margin-bottom: 10px;
}

/* Badge carrinho no header */
.loja-carrinho-badge {
    position: absolute;
    top: -13px;
    right: -10px;
    background: #e8501a;
    color: #fff;
    font-size: 10px; font-weight: 800;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

/* Barra fixa removida */

/* ════════════════════════════════════════════════════════════
   BADGES SVG — sempre ao lado do preco em qualquer layout
════════════════════════════════════════════════════════════ */

.produto-card { position: relative !important; }

/* Container: sempre inline, sempre ao lado do preco */
.produto-card-badges-wrap {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    position: static !important;
}

/* Badges SVG */
.produto-badge-icone-dest,
.produto-badge-icone-promo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Ocultar antigos */
.produto-badge-ribbon-dest,
.produto-badge-bolinha-promo { display: none !important; }

/* ── Badges no modal do produto (pilulas inline no corpo) ── */
#mdl-prod-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
}
.mdl-badge-ribbon-dest,
.mdl-badge-bolinha-promo {
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px; font-weight: 800;
    color: #fff;
    display: inline-flex; align-items: center;
}
.mdl-badge-ribbon-dest::after  { content: 'DESTAQUE'; margin-left: 3px; }
.mdl-badge-bolinha-promo::after { content: 'PROMO'; margin-left: 3px; }
.mdl-badge-icones-inline { display: flex; gap: 6px; }
.mdl-badge-icones-inline .mdl-badge-icone-dest,
.mdl-badge-icones-inline .mdl-badge-icone-promo {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}


/* Carrinho: previne que o .mdl-box base scrolle — a lista interna que scrolla */
#mdl-carrinho .mdl-box {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

/* Proteção contra sobrescrita do loja.css nos modais */
.mdl-overlay strong,
.mdl-overlay b {
    color: inherit;
}