/* ============================================================
   RESERVA MESA — Redesign do modal de Login e Cadastro
   Nort Marketing · CSS-only por cima do plugin reserva-mesa v1.0.1

   COMO APLICAR: enfileirar DEPOIS de assets/css/modal-login-cadastro.css
   (handle 'reserva-mesa-modal-login'). Nenhum id ou classe foi renomeado;
   o HTML do template modal-login-cadastro.php fica intocado. Remover este
   arquivo restaura o visual original.

   INTOCADOS (o JS do plugin depende deles):
   #rm-modal-login-cadastro · #rm-form-login · #login-email · #login-senha
   #rm-login-message · #rm-link-esqueci-senha · #rm-link-cadastro
   #rm-recover-section · #rm-form-recover · #recover-email · #rm-recover-message
   #rm-voltar-login · #rm-voltar-login-cadastro · #rm-cadastro-col
   #rm-form-cadastro · #cadastro-nome/-email/-celular/-cpf/-estado/-cidade/-senha
   #rm-cadastro-message · .rm-modal-overlay · .rm-modal-close · .rm-col-login
   .rm-form-group · .rm-error-message
   Classes de estado ligadas pelo JS: .full-width · .rm-error · .rm-success
   .rm-modal-open (no body) · select2 (estado e cidade vêm do IBGE via Select2)

   ADICIONADO (24/08/2026) — login por CPF, implementado pelo dev, sem senha
   no cadastro do checkout. Também intocados, o JS do plugin depende deles:
   .rm-login-tabs · .rm-login-tab[data-login-mode] · #rm-form-login-cpf
   #login-cpf · .rm-login-cpf-senha · #login-cpf-senha · .rm-login-cpf-email
   #login-cpf-email · .rm-login-cpf-hint · #rm-btn-login-cpf
   #rm-login-cpf-message · #rm-link-cadastro-cpf
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

#rm-modal-login-cadastro{
  --rm-bordo:#5C0407;
  --rm-bordo-deep:#420305;
  --rm-bordo-light:#7A1016;
  --rm-gold:#C8B687;
  --rm-gold-strong:#B89A5F;
  --rm-gold-soft:#E4D7B8;
  --rm-cream:#FAF7F2;
  --rm-cream-2:#F3EDE2;
  --rm-ink:#2B211C;
  --rm-ink-soft:#6B5F57;
  --rm-alert:#B3261E;
  --rm-ok:#1E7A45;
  --rm-font-display:'Archivo',sans-serif;
  --rm-font-body:'Inter',sans-serif;
  --rm-ease:cubic-bezier(.22,.8,.3,1);
}

/* ================= OVERLAY ================= */
body #rm-modal-login-cadastro.rm-modal-overlay{
  background:rgba(20,10,8,.62);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:24px 16px;
  z-index:100000;
}

/* ================= CONTAINER ================= */
body #rm-modal-login-cadastro .rm-modal-container{
  position:relative;
  background:#FFF;
  border:1px solid rgba(200,182,135,.55);
  border-radius:24px;
  box-shadow:0 34px 70px rgba(20,10,8,.4);
  max-width:960px;
  width:100%;
  overflow:hidden;
  font-family:var(--rm-font-body);
  color:var(--rm-ink);
  padding:0;
}
/* faixa da marca no topo do card */
body #rm-modal-login-cadastro .rm-modal-container::before{
  content:"";
  display:block;
  height:5px;
  background:linear-gradient(90deg,var(--rm-bordo),var(--rm-bordo-light) 45%,var(--rm-gold));
}
body #rm-modal-login-cadastro .rm-modal-content{padding:0}

/* fechar */
body #rm-modal-login-cadastro .rm-modal-close{
  position:absolute;
  top:18px;right:18px;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:var(--rm-cream);
  border:1px solid rgba(200,182,135,.6);
  border-radius:50%;
  color:var(--rm-bordo);
  font-size:1rem;
  cursor:pointer;
  z-index:3;
  transition:background .22s var(--rm-ease),transform .22s var(--rm-ease),border-color .22s var(--rm-ease);
}
body #rm-modal-login-cadastro .rm-modal-close:hover{
  background:var(--rm-bordo);
  border-color:var(--rm-bordo);
  color:#FAF7F2;
  transform:rotate(90deg);
}

/* ================= COLUNAS ================= */
body #rm-modal-login-cadastro .rm-modal-columns{
  display:flex;
  align-items:stretch;
  gap:0;
}
body #rm-modal-login-cadastro .rm-modal-col{
  flex:1 1 0;
  min-width:0;
  padding:38px 38px 34px;
}
/* login à esquerda, sobre creme, separado por um fio dourado */
body #rm-modal-login-cadastro .rm-col-login{
  background:var(--rm-cream);
  border-right:1px solid rgba(200,182,135,.55);
}
body #rm-modal-login-cadastro .rm-col-cadastro{background:#FFF}
/* Estado "só login". Duas formas, porque o plugin usa as duas: a classe
   .full-width (posta pelo JS) e o :has() de quando o cadastro está oculto
   por style inline — que é como o modal nasce no HTML. */
body #rm-modal-login-cadastro .rm-modal-columns:has(#rm-cadastro-col[style*="display: none"]) .rm-col-login,
body #rm-modal-login-cadastro .rm-col-login.full-width{
  border-right:0;
  max-width:520px;
  margin:0 auto;
  background:#FFF;
}

/* títulos */
body #rm-modal-login-cadastro .rm-modal-col h3{
  font-family:var(--rm-font-display);
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--rm-bordo);
  margin:0 0 4px;
  padding:0;
  border:0;
  text-align:left;
}
body #rm-modal-login-cadastro .rm-modal-col h3::after{
  content:"";
  display:block;
  width:44px;height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--rm-gold),var(--rm-gold-soft));
  margin:10px 0 22px;
  position:static;
  transform:none;
}

/* ================= ABAS E-MAIL / CPF ================= */
body #rm-modal-login-cadastro .rm-login-tabs{
  display:flex;
  gap:6px;
  background:var(--rm-cream-2);
  border:1px solid rgba(200,182,135,.55);
  border-radius:999px;
  padding:5px;
  margin:0 0 22px;
}
body #rm-modal-login-cadastro .rm-login-tab{
  flex:1 1 0;
  font-family:var(--rm-font-display);
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--rm-ink-soft);
  background:transparent;
  border:0;
  border-radius:999px;
  padding:11px 12px;
  cursor:pointer;
  transition:background .22s var(--rm-ease),color .22s var(--rm-ease),box-shadow .22s var(--rm-ease);
}
body #rm-modal-login-cadastro .rm-login-tab:hover{color:var(--rm-bordo)}
body #rm-modal-login-cadastro .rm-login-tab.is-active{
  background:linear-gradient(135deg,var(--rm-bordo),var(--rm-bordo-light));
  color:#FAF7F2;
  box-shadow:0 8px 18px rgba(92,4,7,.28);
}
body #rm-modal-login-cadastro .rm-login-tab.is-active:hover{color:#FAF7F2}

/* aviso "conta criada só com nome e CPF" — mesma linguagem visual do
   .rm-message, mas fica sempre visível (não é feedback de uma ação) */
body #rm-modal-login-cadastro .rm-login-cpf-hint{
  font-size:.82rem;
  line-height:1.55;
  color:var(--rm-ink-soft);
  background:var(--rm-cream-2);
  border:1px solid rgba(200,182,135,.6);
  border-radius:12px;
  padding:11px 14px 11px 40px;
  margin:0 0 13px;
  position:relative;
}
body #rm-modal-login-cadastro .rm-login-cpf-hint::before{
  content:"";
  position:absolute;
  left:14px;top:12px;
  width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B89A5F'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 5a1.3 1.3 0 1 1-1.3 1.3A1.3 1.3 0 0 1 12 7Zm1.5 11h-3a1 1 0 0 1 0-2h.5v-3h-.5a1 1 0 0 1 0-2h1.5a1 1 0 0 1 1 1v4h.5a1 1 0 0 1 0 2Z'/%3E%3C/svg%3E") center/18px no-repeat;
}

/* ================= CAMPOS ================= */
body #rm-modal-login-cadastro .rm-form-row{display:flex;gap:14px;margin:0}
body #rm-modal-login-cadastro .rm-form-row > .rm-form-group{flex:1 1 0;min-width:0}
body #rm-modal-login-cadastro .rm-form-group{margin:0 0 15px;position:relative}
body #rm-modal-login-cadastro .rm-form-group label{
  display:block;
  font-family:var(--rm-font-body);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--rm-ink-soft);
  margin:0 0 7px;
}
body #rm-modal-login-cadastro .rm-required{color:var(--rm-bordo);font-weight:700}

body #rm-modal-login-cadastro .rm-form-group input,
body #rm-modal-login-cadastro .rm-form-group select{
  width:100%;
  font-family:var(--rm-font-body);
  font-size:.95rem;
  color:var(--rm-ink);
  background:#FFF;
  border:1.5px solid rgba(200,182,135,.7);
  border-radius:13px;
  padding:13px 15px;
  height:auto;
  box-shadow:none;
  transition:border-color .22s var(--rm-ease),box-shadow .22s var(--rm-ease),background .22s var(--rm-ease);
}
body #rm-modal-login-cadastro .rm-col-login .rm-form-group input{background:#FFF}
body #rm-modal-login-cadastro .rm-form-group input::placeholder{color:var(--rm-ink-soft);opacity:.75}
body #rm-modal-login-cadastro .rm-form-group input:focus,
body #rm-modal-login-cadastro .rm-form-group select:focus{
  outline:0;
  border-color:var(--rm-bordo);
  box-shadow:0 0 0 3px rgba(200,182,135,.38);
}
body #rm-modal-login-cadastro .rm-form-group select{
  appearance:none;-webkit-appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235C0407'%3E%3Cpath d='M7 10l5 5 5-5Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:20px 20px;
  cursor:pointer;
}
body #rm-modal-login-cadastro .rm-form-group select:disabled{
  background-color:var(--rm-cream-2);
  color:var(--rm-ink-soft);
  cursor:not-allowed;
}

/* erro por campo — o JS põe .rm-error no .rm-form-group */
body #rm-modal-login-cadastro .rm-form-group.rm-error input,
body #rm-modal-login-cadastro .rm-form-group.rm-error select{
  border-color:var(--rm-alert);
  background:#FDECEA;
}
body #rm-modal-login-cadastro .rm-form-group.rm-error input:focus,
body #rm-modal-login-cadastro .rm-form-group.rm-error select:focus{
  box-shadow:0 0 0 3px rgba(179,38,30,.22);
}
body #rm-modal-login-cadastro .rm-error-message{
  display:none;
  font-size:.78rem;
  font-weight:500;
  line-height:1.4;
  color:var(--rm-alert);
  margin-top:6px;
  padding-left:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B3261E'%3E%3Cpath d='M12 2 1 21h22Zm0 6a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1Zm0 9.5a1.2 1.2 0 1 1-1.2 1.2A1.2 1.2 0 0 1 12 17.5Z'/%3E%3C/svg%3E") left 2px/14px 14px no-repeat;
}
body #rm-modal-login-cadastro .rm-form-group.rm-error .rm-error-message{display:block}
body #rm-modal-login-cadastro .rm-error-message::before{content:none}

/* ================= SELECT2 (estado e cidade, via IBGE) ================= */
body .select2-container--default .select2-selection--single{
  height:auto;
  background:#FFF;
  border:1.5px solid rgba(200,182,135,.7);
  border-radius:13px;
  padding:11px 15px;
  font-family:var(--rm-font-body);
}
body .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--rm-ink);
  font-size:.95rem;
  line-height:1.4;
  padding:0;
}
body .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:100%;
  top:0;right:10px;
}
body .select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--rm-bordo);
  box-shadow:0 0 0 3px rgba(200,182,135,.38);
}
body .select2-dropdown{
  border:1.5px solid rgba(200,182,135,.7);
  border-radius:13px;
  overflow:hidden;
  box-shadow:0 16px 34px rgba(28,19,16,.16);
}
body .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--rm-bordo);
  color:#FAF7F2;
}
body .select2-search--dropdown .select2-search__field{
  border:1.5px solid rgba(200,182,135,.7);
  border-radius:10px;
  padding:9px 12px;
  font-family:var(--rm-font-body);
}

/* ================= BOTÕES ================= */
body #rm-modal-login-cadastro .rm-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  font-family:var(--rm-font-display);
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.02em;
  color:#FAF7F2;
  background:linear-gradient(135deg,var(--rm-bordo),var(--rm-bordo-light));
  border:0;
  border-radius:999px;
  padding:15px 26px;
  cursor:pointer;
  text-transform:none;
  box-shadow:0 10px 24px rgba(92,4,7,.24);
  transition:transform .24s var(--rm-ease),box-shadow .24s var(--rm-ease),background .24s var(--rm-ease);
}
body #rm-modal-login-cadastro .rm-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(92,4,7,.32);
  background:linear-gradient(135deg,var(--rm-bordo-deep),var(--rm-bordo));
  color:#FAF7F2;
}
body #rm-modal-login-cadastro .rm-btn-primary:active{transform:translateY(0)}
body #rm-modal-login-cadastro .rm-btn-primary:disabled{opacity:.65;cursor:progress;transform:none}
/* o botão que leva ao cadastro é secundário: não pode competir com o de login
   nem com o de continuar/entrar/enviar senha da aba CPF */
body #rm-modal-login-cadastro #rm-link-cadastro,
body #rm-modal-login-cadastro #rm-link-cadastro-cpf{
  flex-wrap:wrap;
  gap:6px;
  font-size:.88rem;
  line-height:1.35;
  padding:13px 18px;
  background:transparent;
  color:var(--rm-bordo);
  border:1.5px solid rgba(92,4,7,.28);
  box-shadow:none;
}
body #rm-modal-login-cadastro #rm-link-cadastro:hover,
body #rm-modal-login-cadastro #rm-link-cadastro-cpf:hover{
  background:var(--rm-cream-2);
  border-color:var(--rm-bordo);
  color:var(--rm-bordo);
  transform:none;
}

/* ================= LINKS ================= */
body #rm-modal-login-cadastro .rm-link-esqueci-senha{
  margin:2px 0 18px;
  justify-content:flex-end;
  width:100%;
}
body #rm-modal-login-cadastro .rm-link-esqueci-senha,
body #rm-modal-login-cadastro .rm-link-voltar-login{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.85rem;
  font-weight:600;
  color:var(--rm-ink-soft);
  text-decoration:none;
  cursor:pointer;
  transition:color .2s var(--rm-ease);
}
body #rm-modal-login-cadastro .rm-link-esqueci-senha:hover,
body #rm-modal-login-cadastro .rm-link-voltar-login:hover{
  color:var(--rm-bordo);
  text-decoration:underline;
  text-underline-offset:3px;
}
body #rm-modal-login-cadastro .rm-link-cadastro{
  font-size:.88rem;
  color:var(--rm-ink-soft);
  text-align:center;
  margin-top:16px;
}
body #rm-modal-login-cadastro .rm-link-cadastro strong{color:var(--rm-bordo);font-weight:700}
body #rm-modal-login-cadastro .text-center{text-align:center}

/* ================= RECUPERAR SENHA ================= */
body #rm-modal-login-cadastro .rm-recover-section{
  background:var(--rm-cream-2);
  border:1px solid rgba(200,182,135,.6);
  border-radius:16px;
  padding:22px 20px;
  margin-top:4px;
}
body #rm-modal-login-cadastro .rm-recover-section h4{
  font-family:var(--rm-font-display);
  font-size:1.05rem;
  font-weight:800;
  color:var(--rm-bordo);
  margin:0 0 8px;
}
body #rm-modal-login-cadastro .rm-recover-text{
  font-size:.86rem;
  line-height:1.55;
  color:var(--rm-ink-soft);
  margin:0 0 18px;
}

/* ================= MENSAGENS ================= */
body #rm-modal-login-cadastro .rm-message{
  font-size:.86rem;
  font-weight:500;
  line-height:1.5;
  border-radius:12px;
  padding:12px 15px 12px 42px;
  margin:14px 0 0;
  background-repeat:no-repeat;
  background-position:15px center;
  background-size:18px 18px;
}
body #rm-modal-login-cadastro .rm-message:empty{display:none;padding:0;margin:0}
body #rm-modal-login-cadastro .rm-message.rm-error{
  background-color:#FDECEA;
  border:1px solid rgba(179,38,30,.35);
  color:#8C1D18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B3261E'%3E%3Cpath d='M12 2 1 21h22Zm0 6a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1Zm0 9.5a1.2 1.2 0 1 1-1.2 1.2A1.2 1.2 0 0 1 12 17.5Z'/%3E%3C/svg%3E");
}
body #rm-modal-login-cadastro .rm-message.rm-success{
  background-color:#E8F5EC;
  border:1px solid rgba(30,122,69,.35);
  color:#155F35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%231E7A45'/%3E%3Cpath d='M7 12.4l3.2 3.1L17 8.9' fill='none' stroke='%23FFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ================= RESPONSIVO ================= */
@media (max-width:968px){
  body #rm-modal-login-cadastro .rm-modal-container{max-width:560px;max-height:90vh;overflow-y:auto}
  body #rm-modal-login-cadastro .rm-modal-columns{flex-direction:column}
  body #rm-modal-login-cadastro .rm-col-login{
    border-right:0;
    border-bottom:1px solid rgba(200,182,135,.55);
  }
  body #rm-modal-login-cadastro .rm-modal-col{padding:30px 26px 26px}
  body #rm-modal-login-cadastro .rm-col-login.full-width{max-width:none}
}
@media (max-width:575px){
  body #rm-modal-login-cadastro.rm-modal-overlay{padding:12px 10px}
  body #rm-modal-login-cadastro .rm-modal-container{border-radius:20px}
  body #rm-modal-login-cadastro .rm-modal-col{padding:26px 20px 22px}
  body #rm-modal-login-cadastro .rm-modal-col h3{font-size:1.2rem}
  body #rm-modal-login-cadastro .rm-modal-close{top:14px;right:14px;width:34px;height:34px}
  /* dois campos por linha não cabem em tela pequena */
  body #rm-modal-login-cadastro .rm-form-row-2cols{flex-direction:column;gap:0}
  body #rm-modal-login-cadastro .rm-form-group input,
  body #rm-modal-login-cadastro .rm-form-group select{
    font-size:16px; /* abaixo de 16px o iOS dá zoom ao focar o campo */
    padding:13px 14px;
  }
  body #rm-modal-login-cadastro .rm-btn-primary{padding:15px 20px}
  body #rm-modal-login-cadastro .rm-login-tab{font-size:.78rem;padding:10px 8px}
  body #rm-modal-login-cadastro .rm-login-cpf-hint{font-size:.8rem;padding:10px 12px 10px 36px}
}
@media (prefers-reduced-motion:reduce){
  body #rm-modal-login-cadastro *{transition:none !important;animation:none !important}
}