/* WhatsLink Custom CSS */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

/* ── Fonts ─────────────────────────────────────── */
body,p,span,div,input,select,button,label,a,li{font-family:"Poppins","Rubik",sans-serif!important;}
h1,h2,h3,h4,h5,h6{font-family:"Poppins","Rubik",sans-serif!important;font-weight:600;}

/* ── Header logo ────────────────────────────────── */
.logo-wl-link{text-decoration:none!important;display:inline-block;}
.logo-wl-text{font-family:"Poppins",sans-serif;font-weight:800;font-size:2rem;color:#fff;letter-spacing:-1px;}
.logo-wl-dot{color:#25D366;}

/* ── Hero logo (larger, on yellow bg) ──────────── */
.logo-hero-wrap{display:inline-flex;align-items:center;gap:10px;margin-bottom:8px;}
.logo-hero-text{font-family:"Poppins",sans-serif;font-weight:800;font-size:2.6rem;color:#000;letter-spacing:-1.5px;line-height:1;}
.logo-hero-dot{color:#25D366;}
.logo-hero-badge{background:#25D366;color:#fff;font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px;align-self:center;}

/* ── Footer logo ────────────────────────────────── */
.logo-wl-footer{font-family:"Poppins",sans-serif;font-weight:800;font-size:1.6rem;color:#fff;}
.logo-wl-dot-footer{color:#FEC400;}

/* ── FAQ accordion ─────────────────────────────── */
.accordion-wl{max-width:700px;margin:0 auto;text-align:left;}
.faq-item{border-bottom:2px solid rgba(0,0,0,0.12);margin-bottom:0;}
.faq-btn{
  background:none;border:none;width:100%;text-align:left;
  padding:18px 8px;font-size:1.05rem;font-weight:700;
  color:#1a1a1a;cursor:pointer;display:flex;align-items:center;
  gap:12px;font-family:"Poppins",sans-serif;transition:color .2s;
}
.faq-btn:hover{color:#000;}
.faq-arrow{transition:transform .3s;font-size:.7rem;color:#25D366;flex-shrink:0;}
.faq-btn.active .faq-arrow{transform:rotate(180deg);}
.faq-btn.active{color:#000;}
.faq-ans{
  display:none;padding:0 12px 18px 36px;
  color:rgba(0,0,0,0.72);font-size:.95rem;line-height:1.75;
}
.faq-ans.open{display:block;}
.TituloDuvidas{
  font-family:"Poppins",sans-serif!important;font-weight:700;
  font-size:2.2rem;margin-bottom:24px;color:#1a1a1a!important;
}

/* ── Footer razão social ────────────────────────── */
.razao-social{font-size:.82rem;letter-spacing:.3px;opacity:.8;}

/* ── Animated Counter Badge ─────────────────────── */
.counter-badge-wrap{margin:18px 0 6px;text-align:center;}
.counter-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,0,0,0.08);
  border:1.5px solid rgba(0,0,0,0.12);
  border-radius:50px;padding:8px 20px;
  font-size:1rem;font-weight:700;color:#1a1a1a;
}
.counter-badge .counter-icon{font-size:1.1rem;}
#linksCounter{
  font-size:1.25rem;font-weight:800;color:#25D366;
  min-width:50px;display:inline-block;text-align:right;
}
.counter-label{font-size:.85rem;font-weight:500;color:#555;}

/* ── URL availability status ────────────────────── */
.url-status{display:block;margin-top:4px;font-size:.82rem;font-weight:600;min-height:18px;}
.url-status.ok{color:#25D366;}
.url-status.error{color:#dc3545;}

/* ── Result box ─────────────────────────────────── */
.result-box{
  background:#fff;border-radius:18px;padding:28px 24px 20px;
  box-shadow:0 6px 32px rgba(0,0,0,0.10);
  border:1.5px solid #e8e8e8;
  animation:fadeSlideUp .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
.result-title{
  font-size:1.25rem;font-weight:800;color:#1a1a1a;
  margin-bottom:16px;text-align:center;
}
.result-url-wrap{
  display:flex;gap:8px;align-items:center;
  background:#f6f8fa;border-radius:12px;
  padding:10px 14px;border:1.5px solid #e0e0e0;
  margin-bottom:14px;
}
.result-url-wrap input{
  flex:1;background:transparent!important;border:none!important;
  outline:none!important;font-size:.95rem;font-weight:600;
  color:#25D366!important;padding:0!important;
  box-shadow:none!important;
}
.btn-copiar-link{
  background:#25D366;color:#fff;border:none;
  border-radius:8px;padding:7px 16px;font-size:.82rem;
  font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background .2s,transform .1s;flex-shrink:0;
}
.btn-copiar-link:hover{background:#1da851;transform:scale(1.03);}

/* ── Preview card ───────────────────────────────── */
.preview-card{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#25D36615,#25D36606);
  border:1.5px solid #25D36630;
  border-radius:12px;padding:12px 16px;margin-bottom:16px;
}
.preview-avatar{
  width:42px;height:42px;background:#25D366;
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.2rem;flex-shrink:0;
}
.preview-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.preview-empresa{
  font-size:.9rem;font-weight:700;color:#1a1a1a;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.preview-link{
  font-size:.82rem;color:#25D366!important;text-decoration:none!important;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.preview-link:hover{text-decoration:underline!important;}

/* ── QR Code section ────────────────────────────── */
.qr-section{
  text-align:center;padding:16px 0 12px;
  border-top:1px solid #f0f0f0;margin-bottom:12px;
}
.qr-label{
  font-size:.85rem;font-weight:600;color:#888;
  margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px;
}
.qr-img{
  width:160px;height:160px;border-radius:12px;
  border:3px solid #25D36640;padding:6px;background:#fff;
  box-shadow:0 4px 16px rgba(37,211,102,.15);
}
.btn-qr-download{
  display:inline-block;margin-top:10px;
  background:transparent;border:1.5px solid #25D366;
  color:#25D366!important;border-radius:8px;
  padding:6px 18px;font-size:.82rem;font-weight:700;
  text-decoration:none!important;transition:all .2s;
}
.btn-qr-download:hover{background:#25D366;color:#fff!important;}

/* ── Share buttons ──────────────────────────────── */
.share-section{
  padding-top:14px;border-top:1px solid #f0f0f0;
}
.share-label{
  font-size:.85rem;font-weight:600;color:#888;
  margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px;
  text-align:center;
}
.share-btns{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
}
.share-btn{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:8px;padding:8px 14px;font-size:.82rem;
  font-weight:700;text-decoration:none!important;
  border:none;cursor:pointer;transition:opacity .2s,transform .15s;
  white-space:nowrap;
}
.share-btn:hover{opacity:.88;transform:scale(1.04);}
.share-wa{background:#25D366;color:#fff!important;}
.share-fb{background:#1877F2;color:#fff!important;}
.share-tw{background:#000;color:#fff!important;}
.share-copy{background:#f0f0f0;color:#333!important;}

/* ── Dark header ────────────────────────────────── */
header.site-header,
nav.navbar.bg-dark,
.navbar-dark{
  background:#111 !important;
  box-shadow:0 2px 16px rgba(0,0,0,0.18);
}

/* ── Mobile improvements ────────────────────────── */
@media(max-width:767px){
  .logo-hero-text{font-size:2rem;}
  .logo-hero-badge{font-size:.6rem;}
  .counter-badge{font-size:.88rem;padding:7px 14px;}
  #linksCounter{font-size:1.05rem;}
  .result-box{padding:20px 14px 16px;border-radius:14px;}
  .result-title{font-size:1.1rem;}
  .share-btns{gap:6px;}
  .share-btn{padding:7px 10px;font-size:.78rem;}
  .qr-img{width:130px;height:130px;}
  .result-url-wrap{flex-direction:column;gap:8px;}
  .result-url-wrap input{width:100%!important;}
  .btn-copiar-link{width:100%;text-align:center;}
  .TituloDuvidas{font-size:1.7rem;}
}

/* ── Dark Header (#Topo) ────────────────────────── */
#Topo{
  background:#111 !important;
  padding:16px 20px !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.25);
  position:relative;z-index:100;
}
#Topo .col-lg-12{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
.header-cta-wrap{
  display:flex;align-items:center;gap:12px;
}
.header-tagline{
  color:rgba(255,255,255,.55);font-size:.75rem;
  display:none;
}
@media(min-width:768px){.header-tagline{display:block;}}

/* ── Mobile nav improvements ────────────────────── */
@media(max-width:767px){
  #Topo{padding:12px 16px !important;}
  .logo-wl-text{font-size:1.5rem !important;}
  .TituloDuvidas{font-size:1.45rem;}
  .faq-btn{font-size:.95rem;padding:15px 6px;}
}

/* ── Hero section text improvements ────────────── */
.hero-subtitle{
  font-size:1.1rem;color:rgba(0,0,0,.72);
  max-width:540px;margin:0 auto 20px;line-height:1.65;
}
@media(max-width:600px){
  .hero-subtitle{font-size:.95rem;}
  .counter-badge{font-size:.82rem;padding:6px 12px;}
}