/* ============================================================================
   Modal de endereço — estilo COMPARTILHADO entre o painel "Minha Conta" e o
   checkout (Endereço de entrega). Fonte ÚNICA para os dois modais ficarem
   idênticos por construção (sem cópia de CSS que diverge).

   Escopado nas classes .mc-modal* / .mc-campo / .mc-end-form-grid — funciona em
   qualquer página que use essa estrutura. A cor de destaque vem de --mc-cor.
   ============================================================================ */

.mc-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.mc-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.mc-modal .mc-modal-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,.2);
    padding: 22px 24px;
    box-sizing: border-box;
    margin: 0 auto;
}
.mc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -22px -24px 18px;
    padding: 14px 24px;
    border-bottom: 1px solid #ececec;
    background: #fafbfc;
    border-radius: 12px 12px 0 0;
}
.mc-modal-head-texto { display: block; }
.mc-modal-head h3 { margin: 0 !important; padding: 0; font-size: 17px; font-weight: 700; color: #3a3f49; line-height: 1.2; }
.mc-modal-sub { margin: 2px 0 0 !important; padding: 0; font-size: 12px; color: #9aa0a8; line-height: 1.2; }
.mc-modal-fechar { border: 0; background: none; font-size: 24px; line-height: 1; color: #b0b4bc; cursor: pointer; padding: 0; }
.mc-modal-fechar:hover { color: #6b7180; }

/* marcador de obrigatório / opcional nos labels */
.mc-req-mark { color: #e74c3c; font-weight: 700; }
.mc-modal-box .mc-campo .mc-opcional { color: #b0b4bc; font-weight: 400; font-size: 11px; }

/* grid de campos (2 colunas). O espaçamento ENTRE campos é controlado só pelo gap do
   grid (linha 14px / coluna 16px) — o .mc-campo NÃO usa margin-bottom dentro do grid,
   senão soma com o gap e estoura a altura. */
.mc-end-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; margin-bottom: 0; }
.mc-end-form-grid .mc-end-col-2 { grid-column: 1 / -1; }

/* campo (label + input/select) */
.mc-modal-box .mc-campo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* zera margin-bottom dentro do grid (vence o .form-group do Bootstrap) — espaçamento
   fica só no gap do grid. */
.mc-end-form-grid .mc-campo,
.mc-end-form-grid .mc-campo.form-group { margin-bottom: 0 !important; }
.mc-modal-box .mc-campo label { font-size: 12px; font-weight: 600; color: #6b7180; margin: 0; }
.mc-modal-box .mc-campo label sup { color: #e74c3c; font-weight: 700; }
/* borda COMPLETA arredondada — !important p/ vencer os style-NN.css da loja, que
   estilizam .form-control com border:0 + border-bottom (visual de underline). */
.mc-modal-box .mc-campo .form-control {
    height: 36px !important;
    border: 1px solid #e2e4e8 !important; border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 14px; color: #3a3f49; width: 100%; background: #fff !important; padding: 5px 12px !important;
    box-sizing: border-box;
}
/* select NATIVO estilizado como os inputs: seta custom à direita (remove a nativa),
   borda completa arredondada (herdada de .form-control acima). */
.mc-modal-box .mc-campo select.form-control {
    padding: 6px 36px 6px 12px !important;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%238a8f99' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px;
    cursor: pointer;
}
.mc-modal-box .mc-campo .form-control:focus { border-color: var(--mc-cor, #b9bdc5) !important; box-shadow: none !important; outline: none; }

/* CEP com botão de busca (input-group): input + botão coladinhos DENTRO da célula,
   formando um campo único arredondado (input à esquerda, botão à direita). */
.mc-modal-box .mc-campo .input-group { display: flex !important; width: 100%; }
.mc-modal-box .mc-campo .input-group .form-control {
    flex: 1 1 auto; border-radius: 8px 0 0 8px !important; border-right: 0 !important;
}
.mc-modal-box .mc-campo .input-group .input-group-btn { display: flex; flex: 0 0 auto; width: auto; }
.mc-modal-box .mc-campo .input-group .btn {
    height: 36px; border-radius: 0 8px 8px 0 !important; border: 1px solid var(--mc-cor, #e2e4e8) !important;
    margin: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px;
}

/* busca de CEP: spinner e mensagem. O spinner é posicionado relativo ao .mc-cep-wrap.
   Base = painel (CEP sem botão): spinner sobre o input à direita. No checkout, que tem
   input-group com botão de busca, uma regra em checkout-estilo.php desloca p/ right:52px
   (à esquerda do botão). Sem :has() de propósito — base legada não garante suporte. */
.mc-cep-wrap { position: relative; }
.mc-cep-wrap .mc-cep-spinner {
    position: absolute; top: 30px; right: 12px;   /* ~centro vertical do input (label acima) */
    color: var(--mc-cor, #8a8f99); display: none; z-index: 3;
}
.mc-cep-wrap.mc-cep-carregando .mc-cep-spinner { display: block; }
.mc-cep-wrap.mc-cep-carregando .form-control { padding-right: 30px; }
.mc-cep-msg { display: none; margin-top: 5px; font-size: 12px; color: #8a8f99; }
.mc-cep-msg:not(:empty) { display: block; }
.mc-cep-msg.mc-cep-erro { color: #c0392b; }

/* Nota: os campos Estado/Cidade usam <select> NATIVO (sem Chosen) tanto no checkout
   quanto no painel — por isso NÃO há CSS de .chosen-* aqui. O estilo do select nativo
   (seta custom, borda) está na regra `.mc-modal-box .mc-campo select.form-control` acima. */

/* rodapé de ações (cancelar / salvar) */
.mc-modal-acoes {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin: 20px -24px -22px;   /* estende até as bordas do modal */
    padding: 16px 24px;
    border-top: 1px solid #ececec;
    background: #fafbfc;
    border-radius: 0 0 12px 12px;
}
.mc-end-cancelar { border: 0; background: none; color: #8a8f99; font-weight: 600; font-size: 14px; cursor: pointer; padding: 8px 12px; }
.mc-end-cancelar:hover { color: #4a4f59; }
.mc-modal-box .mc-btn-salvar {
    border-radius: 8px; font-weight: 600; padding: 10px 22px; border: 0;
    box-shadow: none; text-shadow: none;
}
.mc-modal-box .mc-btn-salvar i { margin-right: 6px; }

/* ---- mobile: modal ocupa quase a tela toda; grid 1 coluna; ações empilhadas ---- */
@media (max-width: 600px) {
    .mc-end-form-grid { grid-template-columns: 1fr; }
    .mc-end-form-grid .mc-end-col-2 { grid-column: auto; }
    .mc-modal { padding: 10px; align-items: flex-start; }
    .mc-modal .mc-modal-box { max-height: calc(100vh - 20px); padding: 18px 16px; }
    .mc-modal-head { margin: -18px -16px 16px; padding: 13px 16px; }
    .mc-modal-acoes { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px;
        flex-direction: column-reverse; align-items: stretch; gap: 8px; }
    .mc-modal-acoes .mc-btn-salvar { width: 100%; justify-content: center; }
    .mc-modal-acoes .mc-end-cancelar { width: 100%; text-align: center; }
}