/* Importa a fonte Montserrat (Regular 400, Semibold 600) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

/* assets/css/jvs-style.css */

/* --- Variáveis CSS Globais --- */
:root {
  --font-primary: 'Montserrat', sans-serif;
  --color-primary: #007880;         /* Azul esverdeado principal (títulos) */
  --color-secondary: #00B7E6;       /* Azul claro (borda botão, gradiente) */
  --color-accent: #006FE0;           /* Azul mais escuro (gradiente) */
  --color-text-dark: #333;          /* Texto escuro */
  --color-text-medium: #666;        /* Texto médio */
  --color-text-light: #FFFFFF;         /* Texto claro (botão hover) */
  --color-text-button-initial: #102741; /* Texto inicial do botão */
  --color-bg-input: #f0f0f0;         /* Fundo de inputs/select */
  --color-bg-card: #fff;            /* Fundo dos cards */
  --color-bg-body: #f8f9fa;         /* Opcional: Cor de fundo geral */
  --color-focus-shadow: rgba(0, 120, 128, 0.3); /* Sombra de foco (baseada no primary) */
  --color-select-arrow: #007bff;     /* Cor da seta do select (azul padrão) */
  --color-nav-arrow: var(--color-primary); /* Cor das setas do carrossel (mesma do título) */

  --border-radius-small: 4px;
  --border-radius-medium: 8px;

  --gradient-button: linear-gradient(to right, var(--color-secondary), var(--color-accent));

  --transition-fast: 0.2s ease-in-out;
  --transition-medium: 0.3s ease-in-out;
  --transition-button: 0.4s ease-in-out; /* Duração da animação do botão */
}

/* Opcional: Aplicar fonte base e cor de fundo */
/*
body {
  font-family: var(--font-primary);
  background-color: var(--color-bg-body);
  color: var(--color-text-dark);
}
*/

/* --- Estilos para o formulário de busca --- */
.jvs-search {
  display: flex;
  align-items: center;
  gap: 10px; /* Espaçamento entre elementos */
  flex-wrap: wrap; /* Permite quebrar linha em telas menores */
  margin-bottom: 4em; /* Espaço abaixo da busca */
}

/* Estilos COMUNS para input e select */
.jvs-search input[type="text"],
.jvs-search select {
  border: none;
  outline: none;
  border-radius: var(--border-radius-small);
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  font-family: var(--font-primary);
  background-color: var(--color-bg-input);
  color: var(--color-text-dark);
  line-height: 1.5;
  min-height: 44.78px; /* Mantém altura mínima consistente */
  box-sizing: border-box;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Estilo para o INPUT de texto */
.jvs-search input[type="text"] {
  /* Considerar usar flex-basis ou remover min-width para melhor responsividade */
  min-width: 350px;
  flex-grow: 1; /* Permite que o input cresça para preencher espaço */
}

/* Estilo para o SELECT de cidade */
.jvs-search select {
  min-width: 200px;
  -webkit-appearance: none; /* Remove aparência padrão no WebKit */
  -moz-appearance: none;    /* Remove aparência padrão no Firefox */
  appearance: none;         /* Remove aparência padrão */
  /* Seta personalizada (Chevron Azul) - Cor definida na variável --color-select-arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23007bff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Mantido #007bff como no original */
  background-repeat: no-repeat;
  background-position: right 0.75rem center; /* Posição da seta */
  background-size: 10px 6px; /* Tamanho da seta */
  padding-right: 2.5rem; /* Espaço para a seta */
  cursor: pointer;
}

/* Estilo de foco para acessibilidade */
.jvs-search input[type="text"]:focus,
.jvs-search select:focus {
  background-color: var(--color-bg-card); /* Fundo branco no foco */
  box-shadow: 0 0 0 2px var(--color-focus-shadow);
}


/* --- Estilos para os cards --- */
.jvs-card {
  background: var(--color-bg-card);
  border-radius: var(--border-radius-medium);
  /* border: none; /* Removido border: 0px */
  overflow: hidden;
  margin: 5px; /* Considerar usar rem ou variável */
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  height: 100%; /* Para alinhamento em grid/flex container */
}

.jvs-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada no hover */
}

.jvs-card-image {
  height: 300px; /* Altura fixa da imagem */
  overflow: hidden;
  position: relative;
  width: 100%;
  flex-shrink: 0; /* Impede que a imagem encolha */
}

.jvs-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cobre a área, cortando se necessário */
  object-position: center center; /* Centraliza a imagem */
}

.jvs-card-content {
  padding: 1.25rem; /* Aumentado um pouco o padding */
  flex-grow: 1; /* Permite que o conteúdo cresça */
}

.jvs-card-content h2 {
  font-family: var(--font-primary);
  font-weight: 600; /* Semibold */
  font-size: 1.25rem; /* Convertido de pt para rem */
  color: var(--color-primary);
  margin: 0 0 0.5rem;
}

.jvs-card-content p {
  font-family: var(--font-primary);
  font-weight: 400; /* Regular */
  font-size: 1rem; /* Convertido de pt para rem */
  margin: 0.25rem 0;
  color: var(--color-text-medium);
  line-height: 1.6; /* Melhorar legibilidade */
}

.jvs-card-content p strong {
    font-weight: 600; /* Semibold */
    color: var(--color-text-dark);
}

/* --- Estilos para o rodapé e botão do card --- */
.jvs-card-footer {
  padding: 0 1.25rem 1.25rem; /* Padding consistente com content */
  margin-top: auto; /* Empurra o footer para baixo */
}

.jvs-card-button {
  display: inline-block;
  background: none; /* Fundo inicial transparente */
  border: 1px solid var(--color-secondary);
  color: var(--color-text-button-initial); /* Cor inicial do texto */
  font-family: var(--font-primary);
  font-weight: 400; /* Regular */
  font-size: 1rem; /* Consistente */
  padding: 0.65rem 1rem; /* Padding */
  border-radius: var(--border-radius-small);
  text-decoration: none;
  width: 100%;
  text-align: center;
  cursor: pointer;
  position: relative; /* Contexto para o pseudo-elemento ::before */
  overflow: hidden; /* Esconde o ::before fora dos limites */
  z-index: 1; /* Conteúdo do botão acima do ::before */
  transition: color var(--transition-button), border-color var(--transition-button);
  /* A transição de background foi movida para o ::before */
}

/* Pseudo-elemento para a animação de preenchimento */
.jvs-card-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0; /* Largura inicial zero */
  background: var(--gradient-button); /* Gradiente definido nas variáveis */
  z-index: -1; /* Atrás do conteúdo do botão */
  border-radius: 3px; /* Opcional: ajusta para borda interna */
  transition: width var(--transition-button); /* Anima a propriedade width */
}

/* Estado Hover: Expande o ::before e muda o texto */
.jvs-card-button:hover::before {
  width: 100%; /* Expande para preencher o botão */
}

.jvs-card-button:hover {
  color: var(--color-text-light); /* Texto fica branco */
  border-color: transparent; /* Borda some ou se mescla ao gradiente */
  /* text-transform: lowercase; /* Removido, mas pode ser adicionado se desejado */
}

/* Estilo de Foco para acessibilidade no botão */
.jvs-card-button:focus {
  outline: 2px solid rgba(0, 183, 230, 0.5); /* Outline usando cor secundária com transparência */
  outline-offset: 2px; /* Espaço entre o botão e o outline */
}

/* Opcional: Ativar animação completa também no foco */
/*
.jvs-card-button:focus::before {
  width: 100%;
}
.jvs-card-button:focus {
  color: var(--color-text-light);
  border-color: transparent;
}
*/


/* --- Estilos de Navegação Owl Carousel --- */

.jvs-carousel.owl-carousel {
  position: relative;
  /* Opcional: Adicionar padding se os botões ficarem muito na borda */
  /* padding-left: 50px; */
  /* padding-right: 50px; */
  /* box-sizing: border-box; */
}

/* Estilos comuns para os botões PREV e NEXT */
.jvs-carousel .owl-nav button.owl-prev,
.jvs-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  width: 40px;  /* Largura da área clicável */
  height: 60px; /* Altura da área clicável */
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 12px 21px; /* Tamanho do ícone SVG */
  /* Esconde texto/ícones padrão */
  overflow: hidden;
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
}

/* Esconde spans internos */
.jvs-carousel .owl-nav button.owl-prev span,
.jvs-carousel .owl-nav button.owl-next span {
    display: none;
}

/* Botão PREV (Esquerda) */
.jvs-carousel .owl-nav button.owl-prev {
  left: -45px; /* Ajuste a posição conforme necessário */
  /* SVG Chevron Esquerdo - Cor definida em --color-nav-arrow (#007880) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M7 1L1 7L7 13' stroke='%23007880' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Botão NEXT (Direita) */
.jvs-carousel .owl-nav button.owl-next {
  right: -45px; /* Ajuste a posição conforme necessário */
  /* SVG Chevron Direito - Cor definida em --color-nav-arrow (#007880) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1L7 7L1 13' stroke='%23007880' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Estilo Hover/Focus para botões de navegação */
.jvs-carousel .owl-nav button.owl-prev:hover,
.jvs-carousel .owl-nav button.owl-next:hover,
.jvs-carousel .owl-nav button.owl-prev:focus,
.jvs-carousel .owl-nav button.owl-next:focus {
  opacity: 0.6; /* Reduz opacidade */
  outline: none; /* Remove outline padrão do foco */
}

/* --- Fim dos Estilos --- */