/* ========================
   ra_custom.css
   /home/reserveagenda.com.br/public_html/assets/front/css
   ======================== */

/* ==========================
   TEMPLATE: STYLE_1
========================== */
/* ==========================================================
   Service cards
   ========================================================== */
.card .cop-bg-img.h-300{
  height: auto !important;     /* remove o height fixo 300px */
  aspect-ratio: 1 / 1;         /* força quadrado (1:1) */
}

.card .cop-bg-img{
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}
/* ===== Fim Service cards ===== */


/* ==========================================================
   Service details
   ========================================================== */
.service-banner-img{
  height: auto !important;
  aspect-ratio: 1 / 1;
  width: 100%;

  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;

  max-width: 400px;
  margin: 0 auto;
}

@media (max-width: 576px){
  .service-banner-img{ max-width: 100%; }
}

.service-banner-link{
  display: block;
  text-decoration: none;
}
.service-banner-link .service-banner-img{
  cursor: pointer;
}
/* ===== Fim Service details ===== */


/* ==========================================================
   Botões
   ========================================================== */
.btn-book-now:hover,
.btn-book-now:focus{
  background: #0066ff !important;
  border-color: #0b5ed7 !important;
  color: #fff !important;

  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(13,110,253,.33);
}

.btn-book-now:active{
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(13,110,253,.22);
}

/* Mobile: botão grande, sem estourar */
@media (max-width: 576px){
  .btn-book-now{
    width: 100%;
    max-width: 320px;
    padding: 14px 22px;
    min-width: unset;
  }
}
/* ===== Fim Botões ===== */


/* ==========================================================
   Img hero Desktop
   - 1200x400 (3:1)
   - SEM cortar
   - SEM faixas
   - Botão mais embaixo
   - Corrige título/subtítulo (não gruda no menu)
   ========================================================== */
section.bannerimg.ra-hero-1200x400{
  aspect-ratio: 3 / 1 !important;      /* 1200x400 */
  height: auto !important;
  min-height: unset !important;

  background-size: contain !important; /* SEM crop */
  background-repeat: no-repeat !important;
  background-position: center center !important;

  background-color: #000 !important;   /* sobras (se houver) ficam pretas */
  padding: 0 !important;
  margin: 0 !important;

  position: relative !important;
  overflow: hidden !important;
  display: block !important;           /* evita flex “inventar” altura */
}

/* O padding do tema NÃO pode empurrar a hero */
section.bannerimg.ra-hero-1200x400 .pt-12{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Conteúdo overlay (desktop) */
@media (min-width: 992px){

  /* container vira overlay, mas com “safe area” */
  section.bannerimg.ra-hero-1200x400 .container{
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;

    /* 👇 isso é o que corrige título/subtítulo grudando no topo */
    padding-top: 205px !important;      /* ajuste fino (menu/altura) */
    padding-bottom: 18px !important;
  }

  section.bannerimg.ra-hero-1200x400 .row{
    width: 100% !important;
    height: 100% !important;
  }

  section.bannerimg.ra-hero-1200x400 .col-md-10{
    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    text-align: center !important;

    /* 👇 mantém título “mais alto”, mas sem encostar no menu */
    justify-content: flex-start !important;
  }

  /* Título / subtítulo: tipografia mais estável */
  section.bannerimg.ra-hero-1200x400 h1,
  section.bannerimg.ra-hero-1200x400 h2,
  section.bannerimg.ra-hero-1200x400 .display-5,
  section.bannerimg.ra-hero-1200x400 .display-7{
    line-height: 1.1 !important;
    margin: 0 !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.35) !important;
  }

  /* espaço entre título e subtítulo */
  section.bannerimg.ra-hero-1200x400 .display-5{
    margin-top: 16px !important;
    font-size: clamp(2.0rem, 3.2vw, 3.2rem) !important;
  }
  section.bannerimg.ra-hero-1200x400 .display-7{
    margin-top: 10px !important;
    font-size: clamp(1.0rem, 1.4vw, 1.25rem) !important;
    opacity: .95 !important;
  }

  /* DESCE o botão sem esticar a hero */
  section.bannerimg.ra-hero-1200x400 .col-md-10 .btn{
    margin-top: 100px !important;        /* empurra pro “fundo” */
    margin-bottom: 0 !important;        /* colado no limite do padding-bottom do container */
  }
}

/* fallback se o navegador ignorar aspect-ratio */
@supports not (aspect-ratio: 3 / 1){
  section.bannerimg.ra-hero-1200x400{
    height: 0 !important;
    padding-top: 33.333% !important;
  }
}
/* ===== Fim Img hero Desktop ===== */


/* ==========================================================
   Img hero Mobile
   - mantém proporção 3:1 sem virar 1x1
   - evita “bloco alto” e não corta
   ========================================================== */
@media (max-width: 991.98px){

  section.bannerimg.ra-hero-1200x400{
    aspect-ratio: 3 / 1 !important;
    height: auto !important;

    background-size: contain !important;   /* não corta no mobile */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #000 !important;
  }

  /* no mobile deixa o conteúdo “normal” (sem overlay) */
  section.bannerimg.ra-hero-1200x400 .container{
    position: relative !important;
    inset: auto !important;
    height: auto !important;

    padding-top: 30px !important;
    padding-bottom: 14px !important;

    display: flex !important;
    justify-content: center !important;
  }

  section.bannerimg.ra-hero-1200x400 .col-md-10{
    text-align: center !important;
  }

  /* botão no mobile fica bonito sem “auto” */
  section.bannerimg.ra-hero-1200x400 .btn{
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  @media (max-width: 768px){
  section.bannerimg.ra-hero-1200x400 .btn{
    position: relative !important;
    margin-top: 14px !important;
  }
}

}


/*=========================
Hero CTA fora da imagem (mobile)
=========================*/
.ra-hero-cta-mobile{
  padding: 12px 0 6px;
  background: #fff; /* ou transparente se preferir */
}

.ra-hero-cta-mobile .btn{
  width: 100%;
  max-width: 340px;
}

/*=========================
Logo menor no mobile
=========================*/
@media (max-width: 768px){
  .navbar-brand img{
    max-height: 44px !important; /* ajuste fino */
    width: auto !important;
  }
}

/* ===== Fim Img hero Mobile ===== */

/* ==========================================================
   FIX DEFINITIVO: Navbar Company no mobile
   - O clique funciona (classe .show alterna), então é CSS/posição
   - Força o menu aparecer no fluxo normal (sem absolute)
   ========================================================== */
@media (max-width: 991.98px){

  /* garante que a navbar não corte o conteúdo */
  .navbar{
    position: relative !important;
    overflow: visible !important;
    z-index: 9999 !important;
  }

  /* estado fechado */
  #navbarCompanyContent{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* estado aberto (SEM absolute pra não “sumir” fora da tela) */
  #navbarCompanyContent.show{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: static !important;     /* <<< aqui está o pulo do gato */
    width: 100% !important;

    margin-top: 10px !important;
    padding: 12px 12px !important;

    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; /* alpha correto */
  }


  /* ======================================================
   NAVBAR Company (DESKTOP) - fonte maior + ativo azul
   ====================================================== */
  /* links do menu */
  #navbarCompanyContent.show .nav-link{
    color: #111 !important;
  }
}


@media (min-width: 992px){

  /* aumenta tamanho dos links do menu */
  #navbarCompanyContent .nav-link{
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  /* item ativo/selecionado (padrão azul do sistema) */
  #navbarCompanyContent .nav-item.active > .nav-link,
  #navbarCompanyContent .nav-link.active{
    color: #0d6efd !important;
  }

  /* hover (deixa com cara de produto) */
  #navbarCompanyContent .nav-link:hover{
    color: #0d6efd !important;
  }
}
/* ==========================================================
   HERO - Ocultar CTA (Reservar Agora) SOMENTE no mobile
   (mantém desktop normal)
   ========================================================== */
@media (max-width: 991.98px){

  /* Alvo: botão dentro da hero do style_1 (não afeta outros botões do site) */
  section.bannerimg.ra-hero-1200x400 a.btn.btn-primary{
    display: none !important;
  }

}


/* ==========================
   Navbar: remover linha/divisória no MOBILE
   ========================== */

/* TESTE: matar a “linha” da navbar no MOBILE (border/shadow/gradient/pseudo) */
@media (max-width: 991.98px){

  header, nav, .navbar,
  header .container, nav .container, .navbar .container,
  header .container-fluid, nav .container-fluid, .navbar .container-fluid{
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }

  /* se a linha for criada por pseudo-elemento */
  header::before, header::after,
  nav::before, nav::after,
  .navbar::before, .navbar::after{
    content: none !important;
    display: none !important;
  }

  /* se for um hr/divider */
  nav hr, .navbar hr, .dropdown-divider{
    display: none !important;
  }
}






/* ============================
   FIX nice-select: scroll + z-index
   (Home + Services)
   ============================ */

/* cria contexto e garante que nada “corte” o dropdown */
.ra-services-filters{
  position: relative;      /* ✅ válido */
  z-index: 1000;           /* ✅ acima dos cards */
}

/* nice-select precisa estar acima quando abre */
.ra-services-filters .nice-select{
  position: relative;      /* ✅ */
  z-index: 1000;
}

.ra-services-filters .nice-select.open{
  z-index: 99999;          /* ✅ bem acima */
}

/* dropdown com rolagem real */
.ra-services-filters .nice-select .list{
  max-height: 320px;       /* aumenta pra mostrar mais itens */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 99999;          /* reforço */
}

/* segurança: nada deve “cortar” o dropdown */
.ra-services-filters,
.ra-services-filters *{
  overflow: visible;
}




/* ======================================================
   HOME (style_1) - bloco compacto + modal info
   ====================================================== */

.ra-home-company-min { padding: 18px 0; }
@media (min-width: 992px){
  .ra-home-company-min { padding: 22px 0; }
}

.ra-company-title h2 { font-weight: 800; }

.ra-company-subline{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 18px;
  line-height: 1.35;
  opacity: .92;
}

@media (min-width: 992px){
  .ra-company-subline{ font-size: 18px; }
}

.ra-company-address{
  opacity: .92;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ra-more-info-link{
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ra-modal-company-info .modal-header{
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.ra-tabs .nav-link{
  font-weight: 800;
  letter-spacing: .2px;
}

/* melhora foco/UX do tab */
.ra-tabs .nav-link:focus{
  outline: none;
  box-shadow: none;
}

.ra-info-block{ margin-bottom: 16px; }
.ra-info-title{
  font-weight: 900;
  margin-bottom: 8px;
}
.ra-info-text{ opacity: .92; }

.ra-btn-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* botões do modal mais “produto” */
.ra-btn-outline{
  
  border: 2px solid rgb(89, 0, 255);
  background: #fff;
  font-weight: 800;
}

.ra-btn-outline:hover{
  border-color: rgba(0,0,0,.30);
}

.ra-btn-outline:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

.ra-btn-primary{
  color: #fff !important;
    border: 1px solid rgb(0, 0, 0);
    background: rgb(0, 38, 252);
  font-weight: 900;
}
.ra-btn-primary:hover{
  filter: brightness(.95);
}

.ra-btn-primary:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.10);
}

/* mobile: botões mais confortáveis */
@media (max-width: 576px){
  .ra-btn-row .btn{
    width: 100%;
  }
}

.ra-hours-list{
  background: rgba(0,0,0,.04);
  border-radius: 10px;
  padding: 10px;
}

.ra-hours-row{
  display: flex;
  justify-content: space-between;
  padding: 10px 10px;
  border-radius: 8px;
}

.ra-hours-row + .ra-hours-row{ margin-top: 6px; }
.ra-hours-day{ font-weight: 700; }
.ra-hours-time{ font-weight: 800; }