/*
Theme Name: MR Agenda
Description: Tema minimo para a pagina de agendamento da Meu Ritmo Runners. Sem JavaScript proprio, sem dependencia de build.
Author: Meu Ritmo Runners
Version: 1.4
*/

/* ============================================================
   VALORES DA MARCA — AJUSTE AQUI
   Estes valores foram estimados a partir de prints do site.
   Substitua pelos hex reais do tema meuRitmo e tudo se ajusta.
   ============================================================ */

:root {
  --mr-verde: #08b89d;
  --mr-verde-escuro: #068e7a;
  --mr-verde-claro: #d9fbf6;
  --mr-navy: #002c44;
  --mr-rosa: #ef4e79;

  --mr-fundo: #f5f8f9;
  --mr-cartao: #ffffff;
  --mr-texto: #002c44;
  --mr-texto-suave: #66808f;
  --mr-borda: #dfe7ea;

  --mr-raio: 16px;
  --mr-raio-pill: 999px;
  --mr-largura: 720px;

  --mr-fonte-titulo: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mr-fonte-corpo: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Para usar as fontes reais do site principal, copie os arquivos
   para /assets/fonts/ dentro desta pasta e descomente o bloco abaixo,
   ajustando nome e extensao.

@font-face {
  font-family: "MR Headline";
  src: url("assets/fonts/headline.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
*/

/* ============================================================
   BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--mr-fundo);
  color: var(--mr-texto);
  font-family: var(--mr-fonte-corpo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--mr-verde-escuro);
}

h1,
h2,
h3 {
  font-family: var(--mr-fonte-titulo);
  color: var(--mr-navy);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 {
  font-size: 30px;
  font-weight: 700;
}

h2 {
  font-size: 22px;
  font-weight: 700;
}

h3 {
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
}

/* ============================================================
   CABECALHO
   ============================================================ */

.mr-header {
  background: var(--mr-cartao);
  border-bottom: 1px solid var(--mr-borda);
}

.mr-header__inner {
  max-width: var(--mr-largura);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mr-header__logo img {
  display: block;
  height: 44px;
  width: auto;
}

.mr-header__voltar {
  font-size: 14px;
  font-weight: 600;
  color: var(--mr-texto-suave);
  text-decoration: none;
  white-space: nowrap;
}

.mr-header__voltar:hover {
  color: var(--mr-verde-escuro);
}

@media (max-width: 480px) {
  .mr-header__logo img {
    height: 36px;
  }
  .mr-header__voltar {
    font-size: 13px;
  }
}

/* ============================================================
   CONTEUDO
   ============================================================ */

.mr-main {
  max-width: var(--mr-largura);
  margin: 0 auto;
  padding: 32px 20px 56px;
  flex: 1;
  width: 100%;
}

.mr-cartao {
  background: var(--mr-cartao);
  border: 1px solid var(--mr-borda);
  border-radius: var(--mr-raio);
  padding: 28px;
}

@media (max-width: 600px) {
  .mr-main {
    padding: 20px 14px 40px;
  }
  .mr-cartao {
    padding: 20px 16px;
  }
}

.mr-main p {
  color: var(--mr-texto-suave);
}

.mr-main strong {
  color: var(--mr-texto);
}

/* ============================================================
   RODAPE
   ============================================================ */

.mr-footer {
  border-top: 1px solid var(--mr-borda);
  background: var(--mr-cartao);
  padding: 24px 20px 40px;
  text-align: center;
  font-size: 13px;
  color: var(--mr-texto-suave);
}

.mr-footer a {
  color: var(--mr-texto-suave);
  text-decoration: none;
  font-weight: 600;
}

.mr-footer a:hover {
  color: var(--mr-verde-escuro);
}

.mr-footer__contato {
  margin: 0 0 10px;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.mr-footer__legal {
  margin: 0;
  opacity: 0.8;
}

/* ============================================================
   BOTAO PADRAO DA MARCA
   ============================================================ */

.mr-botao {
  display: inline-block;
  background: var(--mr-verde);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 26px;
  border: none;
  border-radius: var(--mr-raio-pill);
  cursor: pointer;
}

.mr-botao:hover {
  background: var(--mr-verde-escuro);
  color: #fff;
}

/* ============================================================
   AJUSTES NO FORMULARIO DO BOOKLY
   O Bookly traz CSS proprio. Estas regras alinham o visual dele
   a marca. Se alguma nao pegar, o motivo costuma ser
   especificidade — nesse caso acrescente body antes do seletor.
   ============================================================ */

/* --- Campos --- */

body .bookly-form input[type="text"],
body .bookly-form input[type="email"],
body .bookly-form input[type="tel"],
body .bookly-form select,
body .bookly-form textarea {
  border: 1px solid var(--mr-borda) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  color: var(--mr-texto) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body .bookly-form input:focus,
body .bookly-form select:focus,
body .bookly-form textarea:focus {
  outline: none !important;
  border-color: var(--mr-verde) !important;
  box-shadow: 0 0 0 3px rgba(8, 184, 157, 0.16) !important;
}

body .bookly-form label,
body .bookly-form .bookly-label {
  color: var(--mr-texto) !important;
  font-weight: 600 !important;
}

/* --- Horários (clicar aqui avança a etapa) --- */

body .bookly-hour {
  border: 1px solid var(--mr-borda) !important;
  border-radius: 10px !important;
  cursor: pointer;
}

body .bookly-hour:hover {
  border-color: var(--mr-verde) !important;
  background: var(--mr-verde-claro) !important;
}

body .bookly-day-selected,
body .picker__day--selected,
body .picker__day--highlighted {
  background: var(--mr-verde) !important;
  color: #fff !important;
}

/* --- Avançar etapa (usado na tela de dados) --- */

body .bookly-js-next-step,
body .bookly-js-next-step:hover,
body .bookly-js-next-step:focus,
body .bookly-js-next-step:active {
  background: var(--mr-verde) !important;
  border: 1px solid var(--mr-verde) !important;
  border-radius: var(--mr-raio-pill) !important;
  padding: 13px 34px !important;
  min-width: 160px !important;
  box-shadow: none !important;
}

body .bookly-js-next-step:hover {
  background: var(--mr-verde-escuro) !important;
  border-color: var(--mr-verde-escuro) !important;
}

body .bookly-js-next-step .ladda-label {
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Setas de paginação das datas */

body .bookly-btn.bookly-time-next,
body .bookly-btn.bookly-time-prev,
body .bookly-btn.bookly-time-next:hover,
body .bookly-btn.bookly-time-prev:hover,
body .bookly-btn.bookly-time-next:focus,
body .bookly-btn.bookly-time-prev:focus,
body .bookly-btn.bookly-time-next:active,
body .bookly-btn.bookly-time-prev:active {
  background: transparent !important;
  border: 1px solid var(--mr-borda) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body .bookly-btn.bookly-time-next .ladda-label,
body .bookly-btn.bookly-time-prev .ladda-label {
  color: var(--mr-texto) !important;
  font-weight: 700 !important;
}

/* Voltar etapa */

body .bookly-btn.bookly-back-step,
body .bookly-btn.bookly-js-back-step,
body .bookly-btn.bookly-back-step:hover,
body .bookly-btn.bookly-js-back-step:hover,
body .bookly-btn.bookly-back-step:focus,
body .bookly-btn.bookly-js-back-step:focus {
  background: transparent !important;
  border: 1px solid var(--mr-borda) !important;
  border-radius: var(--mr-raio-pill) !important;
  padding: 11px 24px !important;
  min-width: 0 !important;
  box-shadow: none !important;
}

body .bookly-btn.bookly-back-step .ladda-label,
body .bookly-btn.bookly-js-back-step .ladda-label {
  color: var(--mr-texto-suave) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Acessibilidade: foco visivel em qualquer elemento interativo */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(18, 168, 122, 0.5);
  outline-offset: 2px;
}

/* Link Whatsapp */
.mr-ajuda {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--mr-borda);
  text-align: center;
  font-size: 15px;
}

.mr-ajuda a {
  color: var(--mr-verde-escuro);
  font-weight: 600;
  text-decoration: none;
}

.mr-ajuda a:hover {
  text-decoration: underline;
}
/* ============================================================
   PAGINA DE AGENDAMENTO — blocos de conteudo
   Cole no fim do style.css do tema mr-agenda e suba o Version.
   ============================================================ */

/* --- Acima do formulario ------------------------------------ */

.mr-intro {
  margin-bottom: 32px;
}

.mr-intro h1 {
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 12px;
}

.mr-intro h1 em {
  font-style: normal;
  color: var(--mr-verde-escuro);
}

.mr-main .mr-intro__linha {
  font-size: 17px;
  line-height: 1.55;
  color: var(--mr-texto-suave);
  margin: 0 0 20px;
  max-width: 52ch;
}

.mr-garantias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.mr-garantias li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mr-texto);
}

.mr-garantias li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--mr-verde);
  border-bottom: 2.5px solid var(--mr-verde);
  transform: rotate(-45deg);
}

@media (max-width: 600px) {
  .mr-intro h1 {
    font-size: 25px;
  }
  .mr-main .mr-intro__linha {
    font-size: 16px;
  }
  .mr-garantias {
    flex-direction: column;
    gap: 7px;
  }
}

/* --- Abaixo do formulario ----------------------------------- */

.mr-abaixo {
  margin-top: 40px;
  padding-top: 8px;
}

.mr-bloco {
  padding: 28px 0;
  border-top: 1px solid var(--mr-borda);
}

.mr-bloco > h2 {
  font-size: 21px;
  margin: 0 0 18px;
}

.mr-main .mr-bloco > p {
  margin: 0 0 18px;
  max-width: 58ch;
}

.mr-bloco > p:last-child {
  margin-bottom: 0;
}

/* --- Percurso da primeira aula (aquecer, treinar, alongar) --- */

.mr-percurso {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
}

.mr-percurso > li {
  position: relative;
  padding-bottom: 22px;
}

.mr-percurso > li:last-child {
  padding-bottom: 0;
}

.mr-percurso > li::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mr-cartao);
  border: 3px solid var(--mr-verde);
}

/* cada etapa desenha o trecho ate a proxima; a ultima nao desenha */
.mr-percurso > li::after {
  content: "";
  position: absolute;
  left: -24px;
  top: 24px;
  bottom: -7px;
  width: 2px;
  background: var(--mr-verde-claro);
}

.mr-percurso > li:last-child::after {
  content: none;
}

/* ultimo ponto solido, marcando o fim do percurso */
.mr-percurso > li:last-child::before {
  background: var(--mr-verde);
}

.mr-percurso h3 {
  font-size: 16px;
  margin: 0 0 4px;
}

.mr-main .mr-percurso p {
  margin: 0;
  font-size: 15px;
  max-width: 54ch;
}

/* --- Locais -------------------------------------------------- */

.mr-locais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.mr-local {
  background: var(--mr-fundo);
  border: 1px solid var(--mr-borda);
  border-radius: 14px;
  padding: 18px 20px;
}

.mr-local h3 {
  font-size: 17px;
  margin: 0 0 6px;
}

.mr-main .mr-local__ponto {
  margin: 0 0 2px;
  font-size: 14px;
}

.mr-main .mr-local__quando {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mr-texto);
}

.mr-local__mapa {
  font-size: 14px;
  font-weight: 600;
  color: var(--mr-verde-escuro);
  text-decoration: none;
}

.mr-local__mapa:hover {
  text-decoration: underline;
}

/* --- O que levar --------------------------------------------- */

.mr-main .mr-levar {
  margin: 0;
  background: var(--mr-verde-claro);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--mr-texto);
  max-width: none;
}

.mr-levar strong {
  color: var(--mr-navy);
}

.mr-levar span {
  font-weight: 600;
  color: var(--mr-verde-escuro);
}

.mr-main .mr-bloco > p.mr-levar {
  max-width: none;
}

/* --- Depoimentos --------------------------------------------- */

.mr-depoimento {
  margin: 0 0 16px;
  padding: 0 0 0 18px;
  border-left: 4px solid var(--mr-verde);
}

.mr-depoimento:last-child {
  margin-bottom: 0;
}

.mr-depoimento blockquote {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mr-texto);
}

.mr-depoimento blockquote::before {
  content: "\201C";
}

.mr-depoimento blockquote::after {
  content: "\201D";
}

.mr-depoimento figcaption {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mr-texto-suave);
}

/* --- Duvidas -------------------------------------------------- */

.mr-duvida {
  margin-bottom: 16px;
}

.mr-duvida:last-child {
  margin-bottom: 0;
}

.mr-duvida h3 {
  font-size: 15.5px;
  margin: 0 0 3px;
}

.mr-main .mr-duvida p {
  margin: 0;
  font-size: 15px;
  max-width: 58ch;
}

/* --- Link de ajuda -------------------------------------------- */

.mr-ajuda {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--mr-borda);
  text-align: center;
  font-size: 15px;
  color: var(--mr-texto-suave);
}

.mr-ajuda a {
  color: var(--mr-verde-escuro);
  font-weight: 600;
  text-decoration: none;
}

.mr-ajuda a:hover {
  text-decoration: underline;
}
/* --- Destaque formulário de agendamento -------------------------------------------- */
body .bookly-form {
  background: #f0fbf8 !important;
  border: 1px solid #cceee5 !important;
  border-radius: 16px !important;
  padding: 24px 22px !important;
}

@media (max-width: 600px) {
  body .bookly-form {
    padding: 18px 14px !important;
  }
}
/* --- Foto capa agendamento -------------------------------------------- */
.mr-capa {
  margin: 0 0 22px;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}

.mr-capa img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  object-position: center 30%;
}

@media (min-width: 700px) {
  .mr-capa img {
    height: 190px;
  }
}
/* --- Esconde a bandeira do país no agendamento -------------------------------------------- */
/* Esconde o seletor de pais do campo de telefone */
body .iti__flag-container,
body .iti__country-container,
body .iti__selected-flag,
body .iti__selected-country,
body .iti__flag,
body .iti__arrow {
  display: none !important;
}

/* Devolve o padding normal ao campo */
body .iti {
  width: 100% !important;
}

body .iti > input,
body .iti input[type="tel"],
body .iti input[type="text"] {
  padding-left: 14px !important;
}

/* ============================================================
   PAGINA DE CONFIRMACAO
   Cole no fim do style.css e suba o Version.
   Reaproveita .mr-bloco, .mr-percurso, .mr-locais, .mr-local,
   .mr-levar, .mr-botao e .mr-ajuda, ja definidos.
   ============================================================ */

.mr-confirmado {
  margin-bottom: 8px;
}

.mr-main .mr-confirmado__selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 14px 6px 12px;
  background: var(--mr-verde-claro);
  color: var(--mr-verde-escuro);
  border-radius: var(--mr-raio-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* marca de confirmado desenhada em CSS, sem imagem extra */
.mr-confirmado__selo::before {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--mr-verde);
  border-bottom: 2.5px solid var(--mr-verde);
  transform: rotate(-45deg) translate(1px, -2px);
}

.mr-confirmado h1 {
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 12px;
}

.mr-main .mr-confirmado__linha {
  font-size: 17px;
  line-height: 1.55;
  color: var(--mr-texto-suave);
  margin: 0;
  max-width: 54ch;
}

@media (max-width: 600px) {
  .mr-confirmado h1 {
    font-size: 25px;
  }
  .mr-main .mr-confirmado__linha {
    font-size: 16px;
  }
}

/* observacao abaixo dos locais */
.mr-main .mr-bloco > p.mr-obs {
  margin: 16px 0 0;
  font-size: 14.5px;
  max-width: 58ch;
}

/* o bloco "o que levar" precisa da largura toda */
.mr-main .mr-bloco > p.mr-levar {
  max-width: none;
}

/* botao do instagram dentro de um paragrafo */
.mr-main .mr-bloco > p:last-child .mr-botao {
  margin-top: 4px;
}