/* Enhanced Style for AllissonSousa.adv.br
   Created: June 23, 2025 
   This file contains shared styles for improved legibility and visual appeal
   across all pages of the website.
*/

/* Typography Improvements */
body {
  line-height: 1.8;
  color: #444;
  font-family: 'Open Sans', sans-serif;
}

/* Hero background (justizia) using image-set for modern formats */
.hero-justizia {
  position: relative;
  overflow: hidden;
  background: center/cover no-repeat;
  /* Fallback JPEG */
  background-image: url('/img/banner/justizia.jpg');
  /* Prefer WebP when supported */
  background-image: image-set(
    url('/img/banner/justizia.jpg.webp') type('image/webp') 1x,
    url('/img/banner/justizia.jpg') type('image/jpeg') 1x
  );
}

/* Generic dark gradient overlay helper */
.overlay-dark::before {
  content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.7) 40%,rgba(0,0,0,0.75) 70%,rgba(0,0,0,0.85) 100%);z-index:1;pointer-events:none;
}
.overlay-left-fade::after {
  content:"";position:absolute;top:0;bottom:0;left:0;width:70%;background:linear-gradient(90deg,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.8) 60%,rgba(0,0,0,0.4) 85%,transparent 100%);z-index:2;pointer-events:none;
}

/* Slide 2 background (bradcam) */
.hero-bradcam {
  position:relative;overflow:hidden;background:center/cover no-repeat;
  background-image:url('/img/banner/bradcam.png');
  background-image:image-set(
    url('/img/banner/bradcam.png.webp') type('image/webp') 1x,
    url('/img/banner/bradcam.png') type('image/png') 1x
  );
}

/* Reusable fixed contact/CTA sections using bradcam background */
.bg-bradcam-fixed,
.bg-bradcam-fixed-soft {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  /* Layer gradient + responsive image */
  background-image:
    linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)),
    url('/img/banner/bradcam.png');
  background-image:
    linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)),
    image-set(
      url('/img/banner/bradcam.png.webp') type('image/webp') 1x,
      url('/img/banner/bradcam.png') type('image/png') 1x
    );
}
.bg-bradcam-fixed-soft {
  background-image:
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
    url('/img/banner/bradcam.png');
  background-image:
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
    image-set(
      url('/img/banner/bradcam.png.webp') type('image/webp') 1x,
      url('/img/banner/bradcam.png') type('image/png') 1x
    );
}

/* Subtle gold tint overlay helper (for first slide) */
.overlay-gold-tint::after { content:""; position:absolute; inset:0; background:rgba(203,161,53,0.03); z-index:3; pointer-events:none; }

/* Vertical gold accent line helper */
.gold-vertical-line { position:absolute; left:0; top:30%; width:6px; height:40%; background:linear-gradient(to bottom,#CBA135,#EBB44A,#CBA135); z-index:5; box-shadow:0 0 20px rgba(203,161,53,0.6); }

/* Banner2 generic slider background (if reused) */
.hero-banner2 {
  background:center/cover no-repeat;
  background-image:url('/img/banner/banner2.png');
  background-image:image-set(
    url('/img/banner/banner2.png.webp') type('image/webp') 1x,
    url('/img/banner/banner2.png') type('image/png') 1x
  );
}

/* Slide 3 (correspondente jurídico) - AVIF already optimized */
.hero-correspondente { position:relative;overflow:hidden;background:center/cover no-repeat; background-image:url('/img/martelo-de-madeira-com-livros-de-direito-sobre-o-tema-de-direito-e-justica-de-fundo_253401-7234.avif'); }

/* Slide 4 (tecnologia e direito) */
.hero-tecnologia { position:relative;overflow:hidden;background:center/cover no-repeat; background-image:url('/img/tecnologia-e-direito.jpg.webp'); }

/* Decorative gold bar */
.gold-bar { width:120px; height:4px; background:linear-gradient(90deg,#CBA135,#EBB44A); margin-bottom:25px; border-radius:2px; box-shadow:0 2px 15px rgba(203,161,53,0.4); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
}

p {
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.8;
  color: #444;
  text-align: justify; /* Alinha o texto dos parágrafos */
}

.section-padding {
  padding: 70px 0;
}

h3 {
  margin-bottom: 25px;
  font-size: 28px;
}

h4 {
  margin-bottom: 15px;
  color: #333;
  font-size: 20px;
}

ul {
  margin-bottom: 25px;
}

ul li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.text-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* Page Sections Styling */
.section-divider {
  height: 1px;
  background-color: #e9e9e9;
  margin: 40px 0;
}

.highlight-box {
  background-color: #f8f9fa;
  padding: 25px;
  border-left: 4px solid #CBA135;
  margin: 25px 0;
}

/* Gold Title Styling */
.gold-title {
  color: #CBA135;
  font-weight: bold;
  border-bottom: 2px solid #CBA135;
  padding-bottom: 10px;
  margin-bottom: 25px;
  display: inline-block;
}

/* Card Styling */
.content-card {
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  border-top: 3px solid #CBA135;
  margin-bottom: 20px;
}

.content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.feature-card {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.feature-card .feature-icon {
  text-align: center;
  margin-bottom: 20px;
}

.feature-card .feature-icon i {
  font-size: 48px;
  color: #CBA135;
}

.feature-card h4 {
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.feature-card p {
  color: #444;
  line-height: 1.7;
  text-align: center;
}

.feature-card .feature-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: #CBA135;
}

/* Form Styling */
.form-section {
  background-color: #f8f9fa;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  margin-top: 30px;
  border-top: 4px solid #CBA135;
}

.form-control {
  height: 50px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  border-radius: 5px;
}

textarea.form-control {
  height: 150px;
  resize: none;
}

.boxed-btn4 {
  background: #CBA135;
  color: #fff !important;
  padding: 12px 30px;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  border: 0;
  border-radius: 5px;
  margin-top: 15px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

.boxed-btn4:hover {
  background: #b08b28;
  color: #fff;
}

/* Botão Área do Cliente */
.btn-cliente {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  border: 2px solid #2c3e50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-cliente:hover {
  background: linear-gradient(135deg, #34495e, #2c3e50);
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(44, 62, 80, 0.3);
}

.btn-cliente i {
  font-size: 14px;
}

/* Botão móvel para Área do Cliente */
.btn-cliente-mobile {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: #fff !important;
  padding: 12px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  border: 2px solid #2c3e50;
  display: inline-block;
  margin-bottom: 10px;
}

.btn-cliente-mobile:hover {
  background: linear-gradient(135deg, #34495e, #2c3e50);
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(44, 62, 80, 0.3);
}

/* Botão Agende uma Consulta */
.btn-consulta {
  background: linear-gradient(135deg, #CBA135, #B8942F);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  border: 2px solid #CBA135;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-consulta:hover {
  background: linear-gradient(135deg, #B8942F, #CBA135);
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(203, 161, 53, 0.3);
}

.btn-consulta i {
  font-size: 14px;
}

/* Botão móvel para Agende uma Consulta */
.btn-consulta-mobile {
  background: linear-gradient(135deg, #CBA135, #B8942F);
  color: #fff !important;
  padding: 12px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  border: 2px solid #CBA135;
  display: inline-block;
  margin-bottom: 10px;
}

.btn-consulta-mobile:hover {
  background: linear-gradient(135deg, #B8942F, #CBA135);
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(203, 161, 53, 0.3);
}

/* Área do Cliente - Estilos do Sistema */
.client-area-container {
  background: #f8f9fa;
  min-height: 100vh;
  padding: 40px 0;
}

.login-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  padding: 40px;
  max-width: 400px;
  margin: 0 auto;
  border-top: 5px solid #CBA135;
}

.client-header {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: #fff;
  padding: 20px;
  border-radius: 10px 10px 0 0;
  margin: -40px -40px 30px -40px;
  text-align: center;
}

.client-nav {
  background: #fff;
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.client-nav .nav-link {
  color: #2c3e50;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.client-nav .nav-link:hover,
.client-nav .nav-link.active {
  background: #CBA135;
  color: #fff;
}

.process-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  border-left: 4px solid #CBA135;
  transition: all 0.3s ease;
}

.process-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.process-status {
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-andamento {
  background: #ffeeba;
  color: #856404;
}

.status-concluso {
  background: #d4edda;
  color: #155724;
}

.status-sentenca {
  background: #d1ecf1;
  color: #0c5460;
}

.status-recurso {
  background: #f8d7da;
  color: #721c24;
}

.chat-container {
  background: #fff;
  border-radius: 10px;
  height: 400px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.chat-header {
  background: #2c3e50;
  color: #fff;
  padding: 15px;
  border-radius: 10px 10px 0 0;
  font-weight: 600;
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  max-height: 300px;
}

.chat-input {
  padding: 15px;
  border-top: 1px solid #e9ecef;
  border-radius: 0 0 10px 10px;
}

.message {
  margin-bottom: 15px;
  padding: 10px 15px;
  border-radius: 15px;
  max-width: 80%;
}

.message-client {
  background: #e3f2fd;
  margin-left: auto;
  text-align: right;
}

.message-lawyer {
  background: #f5f5f5;
  margin-right: auto;
}

.document-item {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: between;
}

.document-icon {
  color: #dc3545;
  font-size: 24px;
  margin-right: 15px;
}

.calendar-event {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  border-left: 4px solid #CBA135;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.event-date {
  background: #CBA135;
  color: #fff;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Animations */
.animated-fade {
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .social-float, .consult-float {
    display: none;
  }
  
  .whatsapp-float {
  bottom: 18px;
  right: 14px; /* aproxima mais da borda e libera área lateral invisível */
  width: 54px;
  height: 54px;
  line-height: 54px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  }
  
  .form-section {
    padding: 30px 20px;
  }
  
  .feature-card, .content-card {
    margin-bottom: 30px;
  }
}

/* ==============================================
   CORREÇÃO GLOBAL PARA BOTÕES DO CABEÇALHO
   ============================================== */

/* Forçar visibilidade dos botões em TODAS as páginas */
.header_cta_area {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* ==============================================
   WHATSAPP FLOAT (global override)
   - Move para canto inferior ESQUERDO
   - Sobrepõe conteúdo sem reservar largura
   ============================================== */
.whatsapp-float {
  position: fixed !important;
  left: 14px !important; /* em vez de right */
  right: auto !important;
  bottom: 22px !important;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  z-index: 1000;
  transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow:0 8px 22px rgba(0,0,0,0.45); }

@media (max-width: 575.98px) {
  .whatsapp-float { width:54px; height:54px; font-size:26px; left:10px !important; bottom:18px !important; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .whatsapp-float { left:16px !important; bottom:24px !important; }
}

.btn-cliente,
.btn-consulta {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 999 !important;
}

.btn-cliente-mobile,
.btn-consulta-mobile {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 999 !important;
}

/* Sobrescrever qualquer CSS que possa estar ocultando os botões */
div[class*="header"] .btn-cliente,
div[class*="header"] .btn-consulta,
.header_cta_area .btn-cliente,
.header_cta_area .btn-consulta {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Garantir que os botões móveis sejam visíveis apenas no mobile */
@media (max-width: 991px) {
  .d-lg-none .btn-cliente-mobile,
  .d-lg-none .btn-consulta-mobile {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Garantir que os botões móveis sejam ocultos no desktop */
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
}

/* ====================================
   Mobile-Specific Responsive Overrides
   ==================================== */

@media (max-width: 991px) { /* Affects tablets and phones */

  /* 1. Reduce Header Height on Mobile */
  .main-header-area .logo-img img {
    max-height: 50px; /* Reduce logo size */
  }

  .main-header-area {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  /* Adjust mobile menu buttons container */
  .mobile_menu {
    margin-top: 0;
  }
}

/* ==============================================
   Logo Header - proporção correta sem esticar
   ============================================== */
.main-header-area .logo-img img {
  width: auto !important;         /* evita forçar largura fixa que deforma */
  height: auto !important;        /* mantém proporção natural do arquivo */
  max-height: 72px;               /* limite em desktops padrão */
  max-width: 220px;               /* previne expansão exagerada */
  object-fit: contain !important; /* garante não cortar */
  aspect-ratio: auto;             /* não força proporção artificial */
}
@media (max-width: 991px) {
  .main-header-area .logo-img img {
    max-height: 56px; /* menor em tablets */
    max-width: 190px;
  }
}
@media (max-width: 575.98px) {
  .main-header-area .logo-img img {
    max-height: 48px; /* ainda menor em phones */
    max-width: 170px;
  }
}

/* ==================================================
   EXTRA MOBILE REFINEMENTS (phones first < 768px)
   Goal: prevent header CTA overlap + reduce hero
   ================================================== */
@media (max-width: 575.98px) {
  /* Shrink mobile CTA buttons */
  .btn-cliente-mobile, .btn-consulta-mobile {
    font-size: 11px !important;
    padding: 8px 14px !important;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  
  /* Override inline min-height (750px) applied via style attribute on #headerCarousel slides */
  #headerCarousel .slider_area_inner { min-height: 300px !important; height: 300px !important; padding-top: 40px; padding-bottom: 40px; }
  #headerCarousel .slider_area_inner .slider_text { padding-left: 10px !important; }
  #headerCarousel .slider_area_inner .slider_text h3 { font-size: 30px !important; line-height: 1.15 !important; margin-bottom: 18px !important; }
  #headerCarousel .slider_area_inner .slider_text p { font-size: 15px !important; line-height: 1.35 !important; margin-bottom: 22px !important; }
  #headerCarousel .slider_area_inner .boxed-btn4 { padding: 10px 22px !important; font-size: 12px !important; letter-spacing: .5px; }
  /* Decorative bar narrower */
  #headerCarousel .slider_area_inner .slider_text > div[style*="height: 4px"] { width: 80px !important; margin-bottom: 15px !important; }

  /* Ensure desktop CTA wrapper stays hidden (safety) */
  .header_cta_area { display: none !important; }

  /* Reduce hero / carousel height */
  .slider_area_inner { min-height: 360px !important; height: 360px !important; }
  #headerCarousel .slider_area_inner { min-height: 360px !important; height: 360px !important; }

  /* Compress hero typography */
  .slider_area_inner .single_slider .slider_text h3 { font-size: 22px !important; line-height: 30px !important; }
  .slider_area_inner .single_slider .slider_text p { font-size: 13px !important; line-height: 20px !important; margin-bottom: 15px !important; }

  /* Indicators closer to bottom without overlapping content */
  #headerCarousel .carousel-indicators { bottom: 8px !important; }

  /* Reduce large section paddings globally when excessive */
  .practice_area, .about_area, .contact_area, .our_latest_news_area, .testimonial_area, .footer_top { 
    padding-top: 60px !important; 
    padding-bottom: 60px !important; 
  }

  /* Prevent content from sliding under sticky header */
  body { scroll-padding-top: 80px; }
}

/* Small tablets (576px - 767px): moderate reductions */
@media (min-width: 576px) and (max-width: 767.98px) {
  .slider_area_inner { min-height: 420px !important; height: 420px !important; }
  #headerCarousel .slider_area_inner { min-height: 420px !important; height: 420px !important; }
  .slider_area_inner .single_slider .slider_text h3 { font-size: 28px !important; line-height: 38px !important; }
  .slider_area_inner .single_slider .slider_text p { font-size: 14px !important; line-height: 22px !important; margin-bottom: 20px !important; }
  /* Medium devices (sm tablets) soften big hero */
  #headerCarousel .slider_area_inner { min-height: 360px !important; height: 360px !important; }
  #headerCarousel .slider_area_inner .slider_text h3 { font-size: 36px !important; line-height: 1.15 !important; }
  #headerCarousel .slider_area_inner .slider_text p { font-size: 17px !important; line-height: 1.4 !important; }
}

/* Footer logo: manter proporção e reduzir suavemente em mobile */
.footer_logo img { max-width: 200px; height: auto; width: 100%; }
@media (max-width: 575.98px) {
  .footer_logo img { max-width: 160px; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .footer_logo img { max-width: 180px; }
}
/* Acessibilidade */
.visually-hidden-focusable { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.visually-hidden-focusable:focus { position:static; width:auto; height:auto; left:auto; }
:focus-visible { outline:2px solid #CBA135; outline-offset:2px; }
a:focus-visible, button:focus-visible { box-shadow:0 0 0 2px #fff,0 0 0 4px #CBA135; }
footer a:focus-visible { outline-color:#fff; box-shadow:0 0 0 2px #CBA135; }