/* AJ Showcasy Contact Form — CSS Premium */

.ajscf-section{
  --ajscf-text: #0b0f14;
  --ajscf-muted: #e66c2b;
  --ajscf-sub: rgba(20,24,31,.68);
  --ajscf-line: rgba(20,24,31,.14);
  --ajscf-pill: rgba(20,24,31,.16);
  --ajscf-pill-hover: rgba(20,24,31,.26);
  --ajscf-shadow: rgba(16,24,40,.08);
  --ajscf-btn: #0b0f14;

  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden;
}
.ajscf-section *{ box-sizing: border-box; }

.ajscf-section.ajscf-bg-white{ background:#fff !important; }
.ajscf-section.ajscf-bg-transparent{ background: transparent !important; }

.ajscf-inner{
  margin: 0 auto;
  max-width: 1100px;
  padding: 56px 16px 36px;
}
.ajscf-wide .ajscf-inner{ max-width: 1400px; }
.ajscf-narrow .ajscf-inner{ max-width: 1100px; }

/* HERO */
.ajscf-hero{ margin: 0 0 36px 0; }
.ajscf-h1{
  margin:0 !important;
  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 86px !important;
  line-height: 0.92 !important;
  letter-spacing: 1px !important;
  font-weight: 800 !important;
  color: var(--ajscf-text) !important;
  text-align:left !important;
}
.ajscf-muted{ color: var(--ajscf-muted) !important; margin-right: 12px; }
.ajscf-strong{ color: var(--ajscf-text) !important; }
.ajscf-sub{
  margin: 18px 0 0 0 !important;
  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 22px !important;
  line-height: 1.55 !important;
  color: var(--ajscf-sub) !important;
  text-align:left !important;
}

/* FORM */
.ajscf-form{
  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Honeypot anti-spam: invisível para visitantes, visível para bots simples. */
.ajscf-honeypot{
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ajscf-row{ margin-bottom: 22px; }

.ajscf-label{
  display:block;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(20,24,31,.70) !important;
  margin: 0 0 10px 0 !important;
}

/* ✅ Asterisco nos obrigatórios */
.ajscf-req::after{
  content:" *";
  color:#c0262d;
  font-weight:900;
}

.ajscf-input,
.ajscf-textarea{
  width: 100% !important;
  border: none !important;
  border-bottom: 1px solid var(--ajscf-line) !important;
  background: transparent !important;
  padding: 12px 0 !important;
  font-size: 14px !important;
  color: var(--ajscf-text) !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ajscf-textarea{ min-height: 90px; resize: vertical; }

.ajscf-input::placeholder,
.ajscf-textarea::placeholder{ color: rgba(20,24,31,.35) !important; }

.ajscf-input:focus,
.ajscf-textarea:focus{
  border-bottom-color: rgba(20,24,31,.85) !important;
  box-shadow: 0 6px 0 -5px rgba(20,24,31,.35) !important;
}

/* Grid 2 colunas */
.ajscf-row-2col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* PILLS */
.ajscf-pills{ display:flex; flex-wrap:wrap; gap: 10px; }
.ajscf-pill{ position:relative; display:inline-flex; }
.ajscf-pill input{ position:absolute; opacity:0; pointer-events:none; }

.ajscf-pill span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ajscf-pill) !important;
  border-radius:999px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(20,24,31,.78) !important;
  cursor:pointer !important;
  user-select:none;
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s, color .12s;
  background: transparent !important;
}
.ajscf-pill span:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px var(--ajscf-shadow);
  border-color: var(--ajscf-pill-hover) !important;
}
.ajscf-pill input:checked + span{
  background: var(--ajscf-btn) !important;
  border-color: var(--ajscf-btn) !important;
  color: #fff !important;
}

/* BOTTOM */
.ajscf-bottom{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 14px;
  margin-top: 32px;
  padding: 0 !important;
}
.ajscf-response{
  margin-right:auto;
  font-size:13px;
  color: rgba(20,24,31,.55);
}
.ajscf-response .ok{ color:#0a7a3f; font-weight:800; }
.ajscf-response .err{ color:#c0262d; font-weight:800; }

/* BOTÃO */
.ajscf-btn{
  border:none !important;
  background: var(--ajscf-btn) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding: 16px 28px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor:pointer !important;
  display:inline-flex;
  align-items:center;
  gap: 16px !important;
  box-shadow: 0 18px 50px rgba(11,15,20,.18);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.ajscf-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 58px rgba(11,15,20,.22);
}
.ajscf-btn:active{ transform: translateY(0); opacity:.96; }

.ajscf-arrow{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  padding-left: 1px;
  padding-top: 1px;
}

/* Erro */
.ajscf-error{
  border-bottom-color:#c0262d !important;
  box-shadow: 0 6px 0 -5px rgba(192,38,45,.25) !important;
}

/* =========================
   MODAL (Premium)
========================= */
.ajscf-no-scroll{ overflow:hidden; }

.ajscf-modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 99999;
}
.ajscf-modal.is-open{ display:block; }

.ajscf-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(11,15,20,.58);
  backdrop-filter: blur(8px);
}

.ajscf-modal__card{
  position: relative;
  width: min(620px, calc(100% - 28px));
  margin: 10vh auto 0;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
  padding: 26px 26px 22px;
  overflow: hidden;
}

.ajscf-modal__card::before{
  content:"";
  position:absolute;
  top:-120px;
  left:-120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at center, rgba(11,15,20,.12), transparent 60%);
  pointer-events:none;
}

.ajscf-modal__content{ padding: 10px 6px 6px; }

.ajscf-modal__emoji{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.22);
  margin-bottom: 12px;
  box-shadow: 0 14px 30px rgba(16,185,129,.14);
}

.ajscf-modal__title{
  margin: 0;
  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.5px;
  color:#0b0f14;
}

.ajscf-modal__sub{
  margin: 8px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(20,24,31,.68);
}

/* FECHAR (premium) */
.ajscf-modal__close{
  position:absolute;
  right: 14px;
  top: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(11,15,20,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: rgba(11,15,20,.70);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}

.ajscf-modal__close:hover{
  transform: translateY(-1px);
  background: #fff;
  color: rgba(11,15,20,.92);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

.ajscf-modal__close:active{
  transform: translateY(0);
  box-shadow: none;
}

/* BOTÃO "Receba um kit" (premium) */
.ajscf-modal__btn{
  width:100%;
  border:none;
  border-radius: 999px;
  padding: 14px 18px;
  background:#0b0f14;
  color:#fff;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: .2px;
  box-shadow: 0 18px 55px rgba(11,15,20,.22);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.ajscf-modal__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(11,15,20,.28);
}

.ajscf-modal__btn:active{
  transform: translateY(0);
  opacity: .96;
}

/* kit bottom */
.ajscf-kit-bottom{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  margin-top: 18px;
}
.ajscf-kit-response{
  margin-right:auto;
  font-size: 13px;
  color: rgba(20,24,31,.55);
}
.ajscf-kit-response .ok{ color:#0a7a3f; font-weight:800; }
.ajscf-kit-response .err{ color:#c0262d; font-weight:800; }

/* RESPONSIVE */
@media (max-width: 768px){
  .ajscf-row-2col{ grid-template-columns: 1fr; }
  .ajscf-inner{ padding: 40px 16px 28px; }
}

@media (max-width: 560px){
  .ajscf-h1{
    font-size: 52px !important;
    letter-spacing: -1.6px !important;
    line-height: 0.95 !important;
  }
  .ajscf-muted{ display:block; margin:0 0 8px 0; }
  .ajscf-sub{ font-size: 16px !important; }

  .ajscf-bottom{ flex-direction:column; align-items:stretch; }
  .ajscf-btn{ justify-content:center; }
  .ajscf-response{ margin-right:0; text-align:center; }

  .ajscf-modal__card{
    margin: 12vh auto 0;
    padding: 20px 18px 16px;
    border-radius: 18px;
  }
  .ajscf-modal__emoji{
    width: 52px; height:52px; border-radius: 16px;
  }
}

/* =========================
   FIX BOTÕES MODAL (FORÇAR)
========================= */

/* Fechar (remove estilos do tema) */
.ajscf-modal__close{
  all: unset; /* mata estilos herdados (Elementor/tema) */
  position:absolute !important;
  right: 14px !important;
  top: 14px !important;

  width: 44px !important;
  height: 44px !important;

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

  border-radius: 999px !important;
  background: rgba(11,15,20,.06) !important;
  border: 1px solid rgba(11,15,20,.10) !important;

  cursor: pointer !important;
  color: rgba(11,15,20,.85) !important;

  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease !important;
}

.ajscf-modal__close:hover{
  transform: translateY(-1px) !important;
  background: rgba(11,15,20,.10) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.16) !important;
  color: rgba(11,15,20,1) !important;
}

.ajscf-modal__close:active{
  transform: translateY(0) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.10) !important;
}

/* força svg centrado e com cor certa */
.ajscf-modal__close svg{
  display:block !important;
  width: 18px !important;
  height: 18px !important;
  color: currentColor !important;
}

.ajscf-modal__close svg path{
  stroke: currentColor !important;
}

/* Botão principal do modal: PRETO + TEXTO BRANCO + REDONDO */
.ajscf-modal__btn{
  all: unset; /* mata estilos herdados */
  width: 100% !important;

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

  padding: 14px 20px !important;
  border-radius: 999px !important;

  background: #0b0f14 !important;
  color: #fff !important;

  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: .2px !important;

  cursor: pointer !important;
  user-select: none !important;

  box-shadow: 0 18px 55px rgba(11,15,20,.22) !important;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease !important;
}

.ajscf-modal__btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 70px rgba(11,15,20,.28) !important;
}

.ajscf-modal__btn:active{
  transform: translateY(0) !important;
  opacity: .98 !important;
}

/* garantir que nenhum link dentro do modal fica rosa */
.ajscf-modal a,
.ajscf-modal button{
  text-decoration: none !important;
}

/* se o tema estiver a aplicar cor rosa em :focus */
.ajscf-modal__btn:focus,
.ajscf-modal__close:focus{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(11,15,20,.14), 0 18px 55px rgba(11,15,20,.22) !important;
}

/* FIX: tirar borda rosa do botão do modal */
.ajscf-modal .ajscf-modal__btn{
  border: none !important;
  outline: none !important;
  box-shadow: 0 18px 55px rgba(11,15,20,.22) !important; /* mantém premium */
}

/* Se QUISERES uma borda preta fininha (opcional) */
.ajscf-modal .ajscf-modal__btn{
  border: 1px solid rgba(11,15,20,.18) !important;
}

/* =========================================================
   GLASS SÓ NO FORM (NÃO mexe no MODAL)
========================================================= */

/* Reset: garante que nada de "glass" entra no modal */
.ajscf-modal .ajscf-modal__card,
.ajscf-modal .ajscf-modal__content{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* O efeito glass fica APENAS no conteúdo do formulário */
.ajscf-section > .ajscf-inner{
  position: relative;
  border-radius: 28px;
  padding: 56px 28px 40px !important;

  background: rgba(255,255,255,.68) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.20) !important;
}

/* IMPORTANTE: se tinhas isto, REMOVE/ANULA (era o que fazia ficar tudo escuro) */
.ajscf-section::before{
  content: none !important;
}

/* Mobile */
@media (max-width: 768px){
  .ajscf-section > .ajscf-inner{
    padding: 42px 18px 30px !important;
    border-radius: 22px !important;
  }
}
/* Fundo: deixa o background do site aparecer */
.ajscf-section{
  background: transparent !important;
  position: relative;
}

/* “Glass” por trás do formulário (e título) para dar contraste */
.ajscf-inner{
  position: relative;
  border-radius: 28px;
  padding: 56px 28px 40px !important;

  background: rgba(255,255,255,.68) !important; /* transparência */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 30px 90px rgba(0,0,0,.20);
}

/* Em ecrãs pequenos mantém bonito */
@media (max-width: 768px){
  .ajscf-inner{
    padding: 42px 18px 30px !important;
    border-radius: 22px;
  }
}

/* =========================================================
   GLASS SÓ NO FORM (NÃO mexe no MODAL)
========================================================= */

/* Reset: garante que nada de "glass" entra no modal */
.ajscf-modal .ajscf-modal__card,
.ajscf-modal .ajscf-modal__content{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* O efeito glass fica APENAS no conteúdo do formulário */
.ajscf-section > .ajscf-inner{
  position: relative;
  border-radius: 28px;
  padding: 56px 28px 40px !important;

  background: rgba(255,255,255,.68) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.20) !important;
}

/* IMPORTANTE: se tinhas isto, REMOVE/ANULA (era o que fazia ficar tudo escuro) */
.ajscf-section::before{
  content: none !important;
}

/* Mobile */
@media (max-width: 768px){
  .ajscf-section > .ajscf-inner{
    padding: 42px 18px 30px !important;
    border-radius: 22px !important;
  }
}


/* =========================================================
   QUANDO O MODAL ABRE: desliga o "glass card" do form
   (para o popup não parecer dentro do bloco cinzento)
========================================================= */

/* Enquanto o modal estiver aberto (classe colocada no <html>) */
html.ajscf-no-scroll .ajscf-section > .ajscf-inner{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* =========================================================
   MODAL – TEXTO CENTRADO E MAIOR (COLAR NO FIM)
========================================================= */

.ajscf-modal__content{
  text-align: center !important;
}

.ajscf-modal__emoji{
  margin: 0 auto 14px auto !important;
  font-size: 30px !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 20px !important;
}

/* Título maior e mais forte */
.ajscf-modal__title{
  text-align: center !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  margin: 0 auto !important;
}

/* Subtítulo maior e centrado */
.ajscf-modal__sub{
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 10px auto 22px auto !important;
  max-width: 520px !important;
}

/* Botão do modal: texto maior */
.ajscf-modal__btn{
  font-size: 15px !important;
  padding: 16px 22px !important;
}

/* Mobile ajustes */
@media (max-width: 560px){
  .ajscf-modal__title{ font-size: 24px !important; }
  .ajscf-modal__sub{ font-size: 14px !important; }
}



/* =========================================================
   MODAL – CENTRAR NO ECRÃ (COLAR NO FIM)
========================================================= */

/* o wrapper do modal vira um flex container */
.ajscf-modal.is-open{
  display: flex !important;
  align-items: center !important;     /* centra na vertical */
  justify-content: center !important; /* centra na horizontal */
  padding: 24px !important;           /* respiro nas bordas */
}

/* o card deixa de usar margin-top */
.ajscf-modal__card{
  margin: 0 !important;
}
/* =========================================================
   NÃO MEXER NOS CAMPOS DO KIT (RESET SÓ NO MODAL DO KIT)
   Cola no FIM do CSS
========================================================= */

/* garante que o reset só aplica ao formulário do kit */
.ajscf-modal .ajscf-kit-form{
  text-align: left !important;
}

/* labels do kit voltam ao normal */
.ajscf-modal .ajscf-kit-form .ajscf-label{
  text-align: left !important;
  display: block !important;
  margin: 0 0 10px 0 !important;
}

/* inputs/textarea do kit não ficam “mexidos” */
.ajscf-modal .ajscf-kit-form .ajscf-input,
.ajscf-modal .ajscf-kit-form .ajscf-textarea{
  width: 100% !important;
  border: none !important;
  border-bottom: 1px solid rgba(20,24,31,.14) !important;
  background: transparent !important;
  padding: 12px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* se tinhas centrado coisas com flex/grid, isto evita alterações */
.ajscf-modal .ajscf-kit-form .ajscf-row,
.ajscf-modal .ajscf-kit-form .ajscf-row-2col{
  display: block !important;
}

/* botão do kit mantém o look premium */
.ajscf-modal .ajscf-kit-form .ajscf-btn,
.ajscf-modal .ajscf-kit-form .ajscf-modal__btn{
  all: unset;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 20px !important;
  border-radius: 999px !important;
  background: #0b0f14 !important;
  color: #fff !important;
  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

/* Cor da palavra "Olá!" */
.ajscf-h1 .ajscf-muted{
  color: #e66c2b !important;
  opacity: 1 !important;
}


/* ================================
   FORÇAR COR DA MARCA NOS BOTÕES
================================ */

/* Botão principal do formulário */
.ajscf-btn,
.ajscf-btn:visited,
.ajscf-btn:hover,
.ajscf-btn:active{
  background-color: #0b0f14
  !important;
  color: #ffffff !important;
  border: none !important;
}

/* Botão do modal "Receba um kit AJNET" */
.ajscf-modal__btn,
.ajscf-modal__btn:visited,
.ajscf-modal__btn:hover,
.ajscf-modal__btn:active{
  background-color: #0b0f14 !important;
  color: #ffffff !important;
  border: none !important;
}

/* Pills selecionadas */
.ajscf-pill input:checked + span{
  background-color: #0b0f14 !important;
  border-color: #0b0f14 !important;
  color: #ffffff !important;
}


/* =========================================
   ALINHAR TODO O CONTEÚDO (DESKTOP)
   (no mobile fica como estava)
========================================= */

@media (min-width: 769px){

  /* padding igual em todo o card */
  .ajscf-section > .ajscf-inner{
    padding: 48px 48px !important;
  }

  /* remove qualquer offset estranho do hero */
  .ajscf-hero{
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
  }

  /* título alinhado ao resto */
  .ajscf-h1{
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* garante que "Olá!" não sai fora */
  .ajscf-h1 .ajscf-muted{
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
  }

  /* formulário começa exatamente no mesmo eixo */
  .ajscf-form{
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =========================================
   MOBILE: volta ao estado "original"
========================================= */
@media (max-width: 768px){
  .ajscf-section > .ajscf-inner{
    padding: 40px 16px 28px !important; /* era o teu original */
  }
  .ajscf-h1{ line-height: 0.95 !important; } /* como estava */
}


/* =========================================
   BOTÃO DO KIT (forçar premium + centrado)
   Cola no FIM do CSS
========================================= */

/* container do bottom do kit */
.ajscf-kit-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap: 14px !important;
  margin-top: 18px !important;
}

/* botão do kit (mesmo look do principal) */
.ajscf-kit-bottom .ajscf-btn,
.ajscf-kit-bottom button.ajscf-btn{
  all: unset !important;
  width: 100% !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;

  padding: 16px 22px !important;
  border-radius: 999px !important;

  background: #0b0f14 !important;
  color: #fff !important;

  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 15px !important;

  cursor: pointer !important;
  user-select: none !important;

  box-shadow: 0 18px 55px rgba(11,15,20,.22) !important;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease !important;
}

.ajscf-kit-bottom .ajscf-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 70px rgba(11,15,20,.28) !important;
}

.ajscf-kit-bottom .ajscf-btn:active{
  transform: translateY(0) !important;
  opacity: .98 !important;
}

/* seta dentro do botão do kit */
.ajscf-kit-bottom .ajscf-btn .ajscf-arrow{
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.14) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* =========================================
   COR FINAL DO BOTÃO DO KIT (OVERRIDE FINAL)
   cola no FIM ABSOLUTO do CSS
========================================= */

.ajscf-modal .ajscf-kit-form .ajscf-btn,
.ajscf-modal .ajscf-kit-form .ajscf-modal__btn{
  background-color: #0b0f14 !important;
  color: #ffffff !important;
}

/* hover */
.ajscf-modal .ajscf-kit-form .ajscf-btn:hover,
.ajscf-modal .ajscf-kit-form .ajscf-modal__btn:hover{
  background-color: #0b0f14 !important;
}

/* active */
.ajscf-modal .ajscf-kit-form .ajscf-btn:active,
.ajscf-modal .ajscf-kit-form .ajscf-modal__btn:active{
  opacity: .95 !important;
}


/* ================================
   FIX CRUZ FECHAR (MOBILE)
================================ */
@media (max-width: 560px){

  .ajscf-modal__close{
    right: 10px !important;
    top: 10px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    z-index: 5 !important;
  }

  .ajscf-modal__close svg{
    width: 14px !important;
    height: 14px !important;
  }

  /* dá espaço no topo para não colidir com o X */
  .ajscf-modal__card{
    padding-top: 44px !important;
  }
}

/* ================================
   FIX DEFINITIVO ❌ FECHAR (MOBILE)
================================ */
@media (max-width: 560px){

  .ajscf-modal__close{
    all: unset !important;

    position: absolute !important;
    top: 12px !important;
    right: 12px !important;

    width: 36px !important;
    height: 36px !important;

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

    background: rgba(0,0,0,.08) !important;
    border-radius: 999px !important;

    z-index: 999 !important;
    cursor: pointer !important;
  }

  /* força o X a aparecer */
  .ajscf-modal__close svg{
    width: 14px !important;
    height: 14px !important;
    display: block !important;
  }

  .ajscf-modal__close svg path{
    stroke: #0b0f14 !important;
    stroke-width: 2.5 !important;
  }

  /* espaço no topo para não colidir com o título */
  .ajscf-modal__card{
    padding-top: 48px !important;
  }
}

/* =========================================
   MOBILE — TEXTO MAIS PEQUENO (AJUSTE FINAL)
========================================= */
@media (max-width: 560px){

  /* TÍTULO */
  .ajscf-h1{
    font-size: 42px !important;   /* antes estava 52px */
    letter-spacing: -1.2px !important;
    line-height: 1 !important;
  }

  /* Subtítulo */
  .ajscf-sub{
    font-size: 15px !important;   /* antes 16px */
    line-height: 1.5 !important;
  }

  /* Labels */
  .ajscf-label{
    font-size: 11px !important;
  }

  /* Inputs e textarea */
  .ajscf-input,
  .ajscf-textarea{
    font-size: 13px !important;
  }

  /* Pills */
  .ajscf-pill span{
    font-size: 11px !important;
    padding: 7px 11px !important;
  }

  /* Botão principal */
  .ajscf-btn{
    font-size: 13px !important;
    padding: 14px 20px !important;
  }

  /* Texto de feedback */
  .ajscf-response{
    font-size: 12px !important;
  }
}
/* =========================================
   FIX REAL: separar texto da seta no botão
========================================= */

/* força o botão a ser flex */
.ajscf-btn{
  display: inline-flex !important;
  align-items: center !important;
}

/* separação REAL entre texto e seta */
.ajscf-btn .ajscf-arrow{
  margin-left: 8px !important; /* aqui é que separa */
}






/* =========================
   AJSCF — AJUSTES PEDIDOS
   (mantém o design original)
========================= */

/* remover qualquer risco/decoration herdado do tema */
.ajscf-section .ajscf-label{ text-decoration: none !important; }

/* bottom: contactos à esquerda, botão à direita */
.ajscf-bottom{
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 18px !important;
}
.ajscf-contactinfo{
  text-align: left !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(20,24,31,.78) !important;
}
.ajscf-contactinfo .ajscf-ci-title{
  font-weight: 900 !important;
  color: rgba(20,24,31,.92) !important;
  margin-bottom: 2px !important;
}
.ajscf-contactinfo .ajscf-ci-line{ margin: 0 !important; }
.ajscf-contactinfo a{
  color: rgba(20,24,31,.92) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.ajscf-contactinfo a:hover{ text-decoration: underline !important; }

/* a resposta (feedback) fica no meio sem empurrar tudo */
.ajscf-response{
  margin-right: 0 !important;
  margin-left: auto !important;
  order: 2;
}
.ajscf-btn{ order: 3; }
.ajscf-contactinfo{ order: 1; }

@media (max-width: 560px){
  .ajscf-bottom{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ajscf-contactinfo{
    text-align: left !important;
    order: 1;
  }
  .ajscf-response{ order: 2; text-align: center !important; margin-left:0 !important; }
  .ajscf-btn{ order: 3; justify-content: center !important; }
}

/* CONTACTOS — maior e alinhado; telemóvel/email mesmo tamanho */
.ajscf-contactinfo{
  text-align: left !important;
  font-size: 14px !important;          /* tamanho base igual */
  line-height: 1.45 !important;
  color: rgba(20,24,31,.85) !important;
}

/* Título maior (Departamento Comercial) */
.ajscf-ci-title{
  font-size: 16px !important;
  font-weight: 900 !important;
  color: rgba(20,24,31,.95) !important;
  margin-bottom: 4px !important;
}

/* linhas (Telemóvel / Email) iguais */
.ajscf-ci-line{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(20,24,31,.80) !important;
}

/* link do email SEM ficar mais forte que o resto */
.ajscf-contactinfo a{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(20,24,31,.80) !important;
  text-decoration: none !important;
}

.ajscf-contactinfo a:hover{
  text-decoration: underline !important;
}
/* =========================================================
   CAMPOS MAIORES + MOBILE RESPONSIVO (OVERRIDE FINAL)
   Cola no FIM do style.css
========================================================= */

/* Labels um pouco maiores */
.ajscf-label{
  font-size: 14px !important;
  margin-bottom: 12px !important;
}

/* Inputs/textarea maiores (altura + letra) */
.ajscf-input,
.ajscf-textarea{
  padding: 16px 0 !important;       /* mais alto */
  font-size: 16px !important;       /* texto maior */
  line-height: 1.3 !important;
}

/* Placeholder um pouco mais visível */
.ajscf-input::placeholder,
.ajscf-textarea::placeholder{
  font-size: 15px !important;
}

/* Mais espaço entre linhas/rows */
.ajscf-row{
  margin-bottom: 28px !important;
}

/* Pills um pouco maiores */
.ajscf-pill span{
  padding: 10px 16px !important;
  font-size: 13px !important;
}

/* Grid desktop mantém 2 colunas */
.ajscf-row-2col{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
}

/* =========================
   MOBILE (voltar a ajustar)
========================= */
@media (max-width: 768px){

  /* Form em 1 coluna */
  .ajscf-row-2col{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Pills quebram linha e ficam mais fáceis de tocar */
  .ajscf-pills{
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .ajscf-pill span{
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Campos ainda confortáveis no mobile */
  .ajscf-input,
  .ajscf-textarea{
    font-size: 16px !important;     /* evita zoom no iPhone */
    padding: 16px 0 !important;
  }

  /* Bottom: empilha certinho */
  .ajscf-bottom{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  /* Contactos à esquerda no mobile */
  .ajscf-contactinfo{
    text-align: left !important;
  }

  /* Botão full width no mobile */
  .ajscf-btn{
    width: 100% !important;
    justify-content: center !important;
  }
}

/* =========================================================
   MOBILE — AFASTAR BOTÃO "ENVIAR" (FORÇA TOTAL)
   Cola no FIM do CSS
========================================================= */
@media (max-width: 768px){

  /* força o bloco de baixo a ter mais espaço antes */
  .ajscf-section .ajscf-inner form#ajscf-form .ajscf-bottom{
    margin-top: 44px !important;
    padding-top: 18px !important;
    gap: 16px !important;
  }

  /* força o botão a descer (mais afastado) */
  .ajscf-section .ajscf-inner form#ajscf-form .ajscf-bottom .ajscf-btn{
    margin-top: 18px !important;
  }
}

/* ainda mais específico para ecrãs muito pequenos */
@media (max-width: 560px){
  .ajscf-section .ajscf-inner form#ajscf-form .ajscf-bottom{
    margin-top: 54px !important;
    padding-top: 22px !important;
  }
  .ajscf-section .ajscf-inner form#ajscf-form .ajscf-bottom .ajscf-btn{
    margin-top: 22px !important;
  }
}
/* Cor da palavra "Vamos" */
.ajscf-h1 .ajscf-muted{
  color: #e66c2b !important;
}
/* MOBILE: tirar espaço entre "Vamos" e a frase de baixo */
@media (max-width: 560px){
  .ajscf-h1 .ajscf-muted{
    display: inline !important;   /* deixa de ir para linha nova */
    margin: 0 !important;         /* remove margem que cria o espaço */
  }
}

/* Regra final para garantir a cor da palavra "Vamos" */
.ajscf-section .ajscf-h1 .ajscf-muted{
  color: #e66c2b !important;
}

/* =========================================================
   FIX GLOBAL — remover sobras/faixas (mobile + desktop)
========================================================= */

/* nunca deixar o layout criar overflow lateral */
html, body{
  overflow-x: hidden !important;
}

/* garante que a secção não mostra nada fora */
.ajscf-section{
  overflow: hidden !important;
}

/* o card nunca pode passar da largura do ecrã */
.ajscf-section .ajscf-inner{
  width: 100% !important;
  max-width: min(1100px, 100%) !important; /* mantém limite no desktop, mas nunca passa */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* se o “glow/sombra” estiver a criar banda visual, reduz */
.ajscf-section .ajscf-inner{
  box-shadow: 0 18px 60px rgba(0,0,0,0) !important; /* mais suave (sem banda) */
}


/* =========================================================
   SUPER COMPACT — FORM SEM SCROLL EM PORTÁTEIS
   (só mexe quando a ALTURA é baixa)
========================================================= */

/* 1366x768 / 1440x810 etc */
@media (max-height: 820px){

  /* card um pouco mais “apertado” */
  .ajscf-inner{
    padding: 40px 22px 28px !important;
  }

  /* título menor */
  .ajscf-h1{
    font-size: 54px !important;
    line-height: 0.95 !important;
    letter-spacing: 0px !important;
  }

  /* menos espaço entre linhas */
  .ajscf-row{
    margin-bottom: 12px !important;
  }

  /* labels menores */
  .ajscf-label{
    font-size: 10.5px !important;
    margin-bottom: 8px !important;
  }

  /* inputs mais baixos */
  .ajscf-input,
  .ajscf-textarea{
    padding: 10px 0 !important;
    font-size: 13.5px !important;
  }

  /* pills mais pequenas */
  .ajscf-pill span{
    padding: 7px 10px !important;
    font-size: 11px !important;
  }

  /* bottom mais compacto */
  .ajscf-bottom{
    margin-top: 16px !important;
  }

  /* botão mais compacto */
  .ajscf-btn{
    padding: 12px 18px !important;
    font-size: 13px !important;
  }

  .ajscf-arrow{
    width: 24px !important;
    height: 24px !important;
  }
}

/* ainda mais baixo (muito raro) */
@media (max-height: 740px){

  .ajscf-inner{
    padding: 34px 20px 22px !important;
  }

  .ajscf-h1{
    font-size: 48px !important;
  }

  .ajscf-row{
    margin-bottom: 10px !important;
  }

  .ajscf-input,
  .ajscf-textarea{
    padding: 9px 0 !important;
  }
}

/* =========================================================
   FORMULÁRIO DE AGENDAS — CAMPOS E GRUPOS
========================================================= */
.ajscf-row-3col{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

.ajscf-choice-group{
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ajscf-choice-group.ajscf-field-error{
  border-radius: 14px;
  box-shadow: 0 0 0 2px rgba(192,38,45,.22);
  padding: 8px;
  margin: -8px;
}

@media (max-width: 900px){
  .ajscf-row-3col{
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px){
  .ajscf-row-3col{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* =========================================================
   MIOLO + CAPA EM DUAS COLUNAS
========================================================= */
.ajscf-product-columns{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 8px 0 28px;
}

.ajscf-product-column,
.ajscf-finishing-section{
  min-width: 0;
  border: 1px solid rgba(20,24,31,.12);
  border-radius: 20px;
  padding: 24px;
  background: rgba(255,255,255,.48);
}

.ajscf-group-title{
  margin: 0 0 22px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(20,24,31,.12);
  color: var(--ajscf-text) !important;
  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.ajscf-product-column .ajscf-choice-group{
  margin-bottom: 22px;
}

.ajscf-product-column .ajscf-choice-group:last-child{
  margin-bottom: 0;
}

.ajscf-finishing-section{
  margin-bottom: 28px;
}

.ajscf-finishing-section .ajscf-row{
  margin-bottom: 0 !important;
}

.ajscf-quantity-row{
  max-width: 340px;
}

@media (max-width: 768px){
  .ajscf-product-columns{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ajscf-product-column,
  .ajscf-finishing-section{
    padding: 20px;
  }

  .ajscf-group-title{
    font-size: 21px !important;
  }

  .ajscf-quantity-row{
    max-width: none;
  }
}

/* Contactos do Departamento Comercial na mesma linha */
.ajscf-ci-details{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  column-gap: 18px !important;
  row-gap: 4px !important;
}

.ajscf-ci-details .ajscf-ci-line{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.ajscf-field-note{
  margin: 9px 0 0 !important;
  color: rgba(20,24,31,.62) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

@media (max-width: 560px){
  .ajscf-ci-details{
    column-gap: 10px !important;
  }

  .ajscf-ci-details .ajscf-ci-line,
  .ajscf-ci-details .ajscf-ci-line a{
    font-size: 12px !important;
  }
}