/* =========================
   NovoSalao – CF7 Global Styles
   Aplica em qualquer pagina/section que tenha a classe: ns-form
   ========================= */
/* --- Base reset dentro do bloco --- */
.ns-form{
  /* controla o “gap” entre widgets do Elementor dentro desta secao */
  --widgets-spacing-row: 12px;
  --widgets-spacing-column: 0px;

  /* normaliza espaçamentos do próprio container/coluna/section (Elementor varia por página) */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  /* CF7 – largura/centragem (uniforme) */
  --ns-form-max-width: 760px;
  --ns-form-side-padding: clamp(16px, 3vw, 28px);
}

/* Elementor pode aplicar padding/margens via wrappers diferentes (e-con / elementor-section / column) */
.ns-form.e-con,
.ns-form.elementor-section,
.ns-form.elementor-column,
.ns-form.elementor-element{
  --widgets-spacing-row: 12px;
  --widgets-spacing-column: 0px;
}

.ns-form.e-con > .e-con-inner{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ns-form.elementor-section > .elementor-container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ns-form.elementor-column > .elementor-column-wrap,
.ns-form.elementor-column > .elementor-widget-wrap{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* CF7 costuma envolver campos em <p> e pode ter margens diferentes por página */
.ns-form .wpcf7,
.ns-form .wpcf7 form{
  margin: 0 !important;
  padding: 0 !important;
}

/* garante que o conteúdo do form começa logo a seguir ao texto da secção */
.ns-form .wpcf7 form > *:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.ns-form .wpcf7 form p:first-of-type{
  margin-top: 0 !important;
}

/* =========================
   CF7 – Centrar e limitar largura (uniforme em todo o site)
   Aplica-se a qualquer secção com .ns-form
   ========================= */

/* Garante que o widget/wrapper não “encolhe” nem cria offsets estranhos */
.ns-form :is(
  .elementor-widget-stm-contact-form-seven,
  .elementor-widget-contact-form-7,
  .stm-elementor-contact-form-seven,
  .stm-single-car-contact
){
  width: 100% !important;
}

/* Centra o formulário e mantém margens laterais iguais */
.ns-form .wpcf7,
.ns-form .wpcf7 form{
  width: 100% !important;
}

.ns-form .wpcf7 form{
  max-width: var(--ns-form-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* garante “limites” iguais mesmo em secções full-width */
  padding-left: var(--ns-form-side-padding) !important;
  padding-right: var(--ns-form-side-padding) !important;
}

/* Remove espaço extra ENTRE o texto da secção e o início do form (Elementor varia por widget/tipo) */
.ns-form :is(.elementor-widget-heading, .elementor-widget-text-editor){
  margin-bottom: 12px !important; /* ajusta aqui se quiseres mais curto */
}

/* evita que o widget do CF7 traga margem superior diferente por página */
.ns-form :is(.elementor-widget-stm-contact-form-seven, .elementor-widget-contact-form-7){
  margin-top: 0 !important;
}

/* =========================
   Campos (labels + inputs)
   ========================= */

/* Se tiveres wrappers/classes no markup (ns-field/ns-label), isto continua a funcionar */
.ns-form .ns-field{
  display: block;
  width: 100%;
  margin: 0 0 12px 0;
}

.ns-form .ns-label{
  display: block;
  font-size: 13px;
  letter-spacing: .02em;
  margin-bottom: 6px;
  opacity: .85;
  font-weight: 600;
}

/* Inputs consistentes */
.ns-form input[type="text"],
.ns-form input[type="email"],
.ns-form input[type="tel"],
.ns-form select,
.ns-form textarea{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: 10px !important;
  line-height: 1.2;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  display: block !important;
  width: 100% !important;
}

.ns-form textarea{
  min-height: 130px;
  resize: vertical;
}

.ns-form input:focus,
.ns-form select:focus,
.ns-form textarea:focus{
  border-color: rgba(0,0,0,.28) !important;
}

/* Força o wrapper e o próprio controlo do CF7 a ocupar sempre 100% */
.ns-form .wpcf7-form-control-wrap{
  width: 100% !important;
}

.ns-form .wpcf7-form-control{
  width: 100% !important;
  max-width: 100% !important;
}

/* Alguns temas colocam os inputs inline/auto; isto garante largura total */
.ns-form .wpcf7-form-control-wrap input,
.ns-form .wpcf7-form-control-wrap select,
.ns-form .wpcf7-form-control-wrap textarea{
  width: 100% !important;
  max-width: 100% !important;
}

/* Garante que cada linha (p) ocupa a largura total do formulário */
.ns-form .wpcf7 form p{
  width: 100% !important;
  max-width: 100% !important;
}

/* Overrides “teimosos” do tema/plugins que metem campos a 50% */
.ns-form .wpcf7 form p,
.ns-form .wpcf7 form .wpcf7-form-control-wrap,
.ns-form .wpcf7 form .wpcf7-form-control{
  display: block !important;
  float: none !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Motors (Bootstrap) – se o CF7 vier com colunas (col-md-*) força tudo a 100% */
.ns-form .wpcf7 :is([class*="col-"], .form-group){
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Garante que o controlo dentro dessas colunas também estica */
.ns-form .wpcf7 :is([class*="col-"], .form-group) :is(input, select, textarea){
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================
   Layout 2 colunas (quando existir a class)
   ========================= */
.ns-form .ns-form__row--2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Se a row tiver só 1 campo, faz o campo ocupar as 2 colunas (mesmo comprimento da Mensagem) */
.ns-form .ns-form__row--2 > .ns-field{
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 767px){
  .ns-form .ns-form__row--2{
    grid-template-columns: 1fr;
  }

  /* neutraliza padding lateral de alguns layouts do Elementor (quando aperta os campos) */
  .ns-form .elementor-column-gap-default > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================
   Botoes
   ========================= */
.ns-form .ns-form__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
  align-items: stretch;
}

@media (max-width: 767px){
  .ns-form .ns-form__actions{
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.ns-form .wpcf7-submit.ns-btn--submit,
.ns-form .ns-btn--whatsapp{
  width: 100% !important;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
}

.ns-form .wpcf7-submit.ns-btn--submit{
  padding: 14px 18px !important;
  border: 0 !important;
}

.ns-form .ns-btn--whatsapp{
  padding: 14px 18px !important;
  color: #ffffff !important;
  background-color: #1ca081 !important;
  border: 0 !important;
}

.ns-form .ns-btn--whatsapp i{
  font-size: 18px;
}

/* =========================
   CF7 mensagens (output/spinner)
   ========================= */
.ns-form .wpcf7-response-output{
  margin: 10px 0 0 0 !important;
  padding: 8px 10px !important;
}

.ns-form .wpcf7-spinner{
  margin-left: 10px;
}

@media (max-width: 767px){
  .ns-form .wpcf7-spinner{
    display: none !important;
  }
}

/* Compat: se uma página não tiver os wrappers (ns-field/ns-form__actions), aplica espaçamento mínimo entre controls */
.ns-form .wpcf7-form-control-wrap{
  display: block;
  margin-bottom: 12px;
}

.ns-form .wpcf7-form-control-wrap:last-of-type{
  margin-bottom: 0;
}

/* =========================
   HEADER – WhatsApp icon (fundo verde)
   ========================= */

/* HEADER – WhatsApp icon (verde correto e claro) */
.stm-layout-header-car_magazine 
#header 
.header-magazine 
.container 
.magazine-service-right 
.magazine-right-actions 
.pull-right 
.header-main-socs ul li a{
  display: flex;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;

  background-color: #1CA081; /* verde real */
  border-radius: 50%;

  opacity: 1 !important; /* REMOVE escurecimento */
  transition: background-color .2s ease, box-shadow .2s ease;
}

/* Ícone WhatsApp */
.stm-layout-header-car_magazine 
#header 
.header-magazine 
.container 
.magazine-service-right 
.magazine-right-actions 
.pull-right 
.header-main-socs ul li a i{
  color: #ffffff !important;
  font-size: 20px;
}

/* Hover — ligeiramente mais claro (sem matar a cor) */
.stm-layout-header-car_magazine 
#header 
.header-magazine 
.container 
.magazine-service-right 
.magazine-right-actions 
.pull-right 
.header-main-socs ul li a:hover{
  background-color: rgba(28,160,129,0.9);
  box-shadow: 0 0 0 4px rgba(28,160,129,0.15);
}

/* =========================
   GLOBAL – Buttons consistentes (altura + largura)
   (não muda cores; só tipografia/medidas)
   ========================= */

/* Base comum para botões/CTAs do site (exclui os do CF7 porque já têm regras próprias) */
:where(
  .elementor-button,
  .wp-element-button,
  .wp-block-button__link,
  a.button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):not(.ns-form *){
  box-sizing: border-box;

  /* altura/encaixe consistentes */
  min-height: 48px;
  padding: 14px 22px;
  border-radius: 12px;

  /* tipografia consistente (estilo Home) */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  line-height: 1;

  /* alinhamento */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  white-space: nowrap;
  text-decoration: none;
}

/* Largura consistente nos CTAs principais (desktop/tablet) */
@media (min-width: 768px){
  :where(
    .elementor-button,
    .wp-element-button,
    .wp-block-button__link
  ):not(.ns-form *){
    min-width: 220px;
  }
}

/* Mobile: botões full-width, sem rebentar linhas */
@media (max-width: 767px){
  :where(
    .elementor-button,
    .wp-element-button,
    .wp-block-button__link,
    a.button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"]
  ):not(.ns-form *){
    min-width: 0;
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* =========================
   NovoSalao – CF7
   FIX FINAL: reduzir espaço entre botões e secção seguinte (footer)
   Origem: margin/padding do wrapper stm-elementor-contact-form-seven
   ========================= */

/* Wrapper do widget CF7 (tema Motors) */
.ns-form .stm-elementor-contact-form-seven,
.stm-elementor-contact-form-seven.stm_listing_car_form{
  margin-bottom: 5% !important; /* antes ~30px */
  padding-bottom: 0 !important;
}

/* Garante que o container interno não reintroduz espaço */
.ns-form .stm-single-car-contact{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Último elemento do formulário não empurra a secção seguinte */
.ns-form .wpcf7-response-output{
  margin-bottom: 0 !important;
}


/* Filtro carro com borda verde */
.stm-template-car_dealer_two_elementor.no_margin #wrapper #main ul.stm-filter-chosen-units-list li{
  box-shadow: none;
  border: 1px solid #1ca081 !important;
}

@media (max-width: 767px){
  .sticky-mobile-filter.make-fixed{
    display: none !important;
  }
}