/* House Contabilidade - Estilos Principais */

:root {
    --primary-color: #D84315;
    --bg-light: #FFFFFF;
    --bg-section: #F9F9F9;
    --text-dark: #212529;
    --text-muted: #6c757d;
    --heading-color: #212121;
    --border-color: #E0E0E0;
}

/* --- Configurações Gerais --- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 140px;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-light);
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--heading-color);
}

section {
    padding: 120px 0;
    overflow: hidden;
}

.section-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.6s ease-out;
}

.section-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Cabeçalho Fixo --- */
#header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    transition: box-shadow 0.3s ease;
}

#header-container.sticky {
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

/* --- Topbar --- */
#topbar {
    background: var(--primary-color);
    padding: 10px 0;
    font-size: 0.9rem;
}

#topbar a {
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.3s;
}

#topbar a:hover {
    opacity: 0.8;
}

#topbar .contact-info i, 
#topbar .social-links i {
    color: #FFFFFF;
}

/* --- Menu Principal --- */
.main-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    transition: padding 0.3s ease;
}

#header-container.sticky .main-header {
    padding: 5px 0;
}

.navbar-brand img {
    height: 80px;
    transition: height 0.3s ease;
}

#header-container.sticky .navbar-brand img {
    height: 50px;
}

.navbar-nav .nav-link { 
    font-weight: 500; 
    color: var(--text-dark); 
    margin: 0 15px; 
    transition: color 0.3s;
}

.navbar-nav .nav-link.active, 
.navbar-nav .nav-link:hover { 
    color: var(--primary-color); 
}

.nav-contact-btn {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
    padding: 10px 25px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
}

.nav-contact-btn:hover { 
    background-color: var(--heading-color); 
    color: #fff; 
    transform: scale(1.05); 
}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* --- Offcanvas Menu --- */
.offcanvas-header {
    border-bottom: 1px solid var(--border-color);
}

.offcanvas-body .navbar-nav .nav-link {
    padding: 10px 0;
    font-size: 1.1rem;
}

/* --- Seção Início com Slider --- */
#inicio {
    padding: 0;
    height: 100vh;
    width: 100%;
}

#heroCarousel {
    height: 100%;
}

.carousel-item {
    height: 100vh;
    position: relative;
}

.carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

#slide1 img { object-position: center 30%; }
#slide2 img { object-position: center center; }
#slide3 img { object-position: center 40%; }

.carousel-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(10, 10, 10, 0.6);
    z-index: 2;
}

.carousel-item .container {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 3;
    padding-bottom: 15vh;
}

#inicio .content h1 {
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    line-height: 1.2;
    font-weight: 800;
    color: #FFFFFF;
}

#inicio .content p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 30px auto 40px auto;
    color: #FFFFFF;
}

.carousel-indicators {
    z-index: 4;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--primary-color);
}

/* --- Seção Sobre e Serviços --- */
#sobre, #blog { 
    background-color: var(--bg-section); 
}

#servicos, #contato { 
    background-color: var(--bg-light); 
}

.service-card {
    background-color: var(--bg-light);
    padding: 35px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.service-card .icon { 
    font-size: 2rem; 
    color: var(--primary-color); 
    margin-bottom: 20px; 
}

.service-card h4 { 
    font-size: 1.2rem; 
    margin-bottom: 15px; 
}

.service-card p { 
    font-size: 0.9rem; 
    color: var(--text-muted); 
}

/* --- Agenda Tributária --- */
#agenda { 
    background-color: var(--bg-light); 
}

.calendar {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.calendar-header {
    background: var(--primary-color);
    color: #fff;
    padding: 20px;
    border-radius: 15px 15px 0 0;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-header button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: var(--border-color);
    padding: 10px;
}

.calendar-day, .calendar-weekday {
    padding: 15px;
    text-align: center;
    background-color: #fff;
}

.calendar-weekday { 
    font-weight: 700; 
    background-color: var(--bg-section); 
}

.calendar-day.empty { 
    background-color: var(--bg-section); 
}

.calendar-day.has-event {
    background-color: #FFF3E0;
    font-weight: 700;
    position: relative;
    cursor: pointer;
}

.calendar-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.agenda-list h5 { 
    color: var(--primary-color); 
}

#agenda .row.align-items-center { 
    align-items: stretch; 
}

#agenda .card { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
}

#agenda #calendarWrap { 
    display: flex; 
    flex-direction: column; 
    flex: 1 1 auto; 
}

#agenda .grid { 
    flex: 0 0 auto; 
}

.agenda-list {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* Modern loader styles */
.loader { 
    display:inline-flex; 
    align-items:center; 
    gap:10px; 
}

.loader .spinner {
    width:20px; 
    height:20px; 
    border-radius:50%;
    border:3px solid rgba(0,0,0,0.08); 
    border-top-color:var(--primary-color);
    animation: spin 1s linear infinite;
}

@keyframes spin { 
    to { transform: rotate(360deg);} 
}

.loader .dots { 
    display:inline-flex; 
    gap:6px; 
}

.loader .dots span{ 
    width:6px; 
    height:6px; 
    background:var(--primary-color); 
    border-radius:50%; 
    opacity:0.3; 
    animation: bounce 1s infinite; 
}

.loader .dots span:nth-child(2){ 
    animation-delay:0.12s 
}

.loader .dots span:nth-child(3){ 
    animation-delay:0.24s 
}

@keyframes bounce { 
    0% { transform: translateY(0); opacity:0.3 } 
    50% { transform: translateY(-6px); opacity:1 } 
    100% { transform: translateY(0); opacity:0.3 } 
}

.loader-block{ 
    display:flex; 
    flex-direction:column; 
    gap:8px; 
    padding:12px 
}

.skeleton { 
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0.06) 75%); 
    background-size:200% 100%; 
    animation: shimmer 1.2s linear infinite; 
    border-radius:6px 
}

.skeleton.h-12{ 
    height:12px; 
    width:60% 
}

.skeleton.h-8{ 
    height:8px; 
    width:80% 
}

.skeleton.h-64{ 
    height:120px; 
    width:100% 
}

@keyframes shimmer { 
    0% { background-position:200% 0 } 
    100% { background-position:-200% 0 } 
}

.agenda-placeholder{ 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content:center; 
    height:100%; 
    text-align:center; 
    padding:24px; 
    color:var(--text-muted) 
}

.agenda-placeholder .icon { 
    width:72px; 
    height:72px; 
    border-radius:50%; 
    background:linear-gradient(135deg, rgba(216,67,21,0.12), rgba(216,67,21,0.06)); 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    margin-bottom:12px; 
}

.agenda-placeholder .icon i { 
    color:var(--primary-color); 
    font-size:32px; 
}

.agenda-placeholder .title { 
    font-size:1.15rem; 
    font-weight:700; 
    color:var(--heading-color); 
    margin-bottom:8px 
}

.agenda-placeholder .desc { 
    max-width:420px; 
    color:var(--text-muted); 
    font-size:0.97rem 
}

.agenda-placeholder .pulse { 
    display:inline-block; 
    width:10px; 
    height:10px; 
    background:var(--primary-color); 
    border-radius:50%; 
    margin-left:8px; 
    animation: pulse 1.2s infinite; 
    vertical-align:middle 
}

@keyframes pulse { 
    0% { transform:scale(1); opacity:1 } 
    50% { transform:scale(1.6); opacity:0.6 } 
    100% { transform:scale(1); opacity:1 } 
}

/* --- Chatbox Widget --- */
.whatsapp-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.chatbox {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 350px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    height: 450px;
}

.chatbox.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.chatbox-header {
    background: var(--primary-color);
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chatbox-header h5 { 
    color: #fff; 
    margin: 0; 
    font-size: 1rem; 
}

.chatbox-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    opacity: 0.8;
    cursor: pointer;
}

.chatbox-body {
    padding: 20px;
    font-size: 0.95rem;
    flex-grow: 1;
    overflow-y: auto;
}

.message {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.message.bot .message-content {
    background: var(--bg-section);
    padding: 10px 15px;
    border-radius: 15px 15px 15px 0;
    align-self: flex-start;
}

.message.user .message-content {
    background: var(--primary-color);
    color: #fff;
    padding: 10px 15px;
    border-radius: 15px 15px 0 15px;
    align-self: flex-end;
}

.chatbox-footer {
    padding: 10px 20px;
    border-top: 1px solid var(--border-color);
}

.chat-input-group {
    display: flex;
}

#chat-input {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    margin-right: 10px;
}

#chat-send {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 15px;
    cursor: pointer;
}

/* --- Rodapé --- */
footer { 
    background-color: var(--heading-color); 
    color: var(--text-muted); 
    padding: 60px 0; 
}

footer .footer-brand {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
}

footer .footer-brand i { 
    color: var(--primary-color); 
}

footer p { 
    font-size: 0.9rem; 
}

footer .footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s;
}

footer .footer-links a:hover { 
    color: #fff; 
}

footer .footer-social a {
    color: var(--text-muted);
    font-size: 1.2rem;
    margin: 0 10px;
    transition: color 0.3s;
}

footer .footer-social a:hover { 
    color: var(--primary-color); 
}

.footer-bottom {
    border-top: 1px solid #444;
    padding-top: 20px;
    margin-top: 20px;
}

.developer-credit {
    font-size: 0.8rem;
    margin-top: 15px;
}

.developer-credit a {
    color: var(--text-muted);
    text-decoration: none;
}

.developer-credit a:hover {
    color: #fff;
}

footer .footer-brand img.footer-logo {
    height: 60px;
    max-height: 70px;
    display: inline-block;
    filter: invert(1) brightness(2);
    -webkit-filter: invert(1) brightness(2);
}

/* --- Estilos para calendário dinâmico --- */
.months{
    display:flex;
    flex-wrap:wrap;
    gap:8px
}

.month-btn{
    padding:6px 10px;
    border-radius:8px;
    border:1px solid #e5e7eb;
    background:#fff;
    cursor:pointer;
    font-size:0.95rem
}

.month-btn.active{
    background:var(--primary-color);
    color:#fff;
    border-color:transparent
}

.grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px;
    margin-top:8px
}

.cell{
    background:#fafafa;
    padding:10px;
    min-height:64px;
    border-radius:8px;
    border:1px solid #f0f0f0;
    display:flex;
    flex-direction:column;
    align-items:flex-start
}

.cell.other{
    background:#fff;
    color:#9ca3af;
    opacity:0.55;
    border-color:transparent;
    pointer-events:none
}

.cell.other .daynum{
    color:#9ca3af
}

.cell .daynum{
    font-weight:700;
    margin-bottom:6px
}

.cell.clickable{
    background:linear-gradient(180deg,#fff4ef,#ffeadf);
    border-color:var(--primary-color);
    box-shadow:0 4px 14px rgba(216,67,21,0.08);
    cursor:pointer;
}

.cell.clickable .daynum{
    color:var(--primary-color)
}

.legend{
    margin-top:12px;
    color:var(--text-muted);
    font-size:0.95rem
}

/* --- Form Feedback Styles --- */
.alert { 
    padding: 15px; 
    margin-bottom: 20px; 
    border-radius: 8px; 
    font-size: 0.95rem; 
}

.alert-success { 
    background-color: #d4edda; 
    border: 1px solid #c3e6cb; 
    color: #155724; 
}

.alert-danger { 
    background-color: #f8d7da; 
    border: 1px solid #f5c6cb; 
    color: #721c24; 
}

.form-control-light { 
    padding: 12px; 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    width: 100%; 
    transition: border-color 0.3s; 
}

.form-control-light:focus { 
    outline: none; 
    border-color: var(--primary-color); 
    box-shadow: 0 0 0 3px rgba(216, 67, 21, 0.1); 
}

.contact-info-item { 
    display: flex; 
    align-items: flex-start; 
    margin-bottom: 15px; 
    gap: 10px; 
}

.contact-info-item i { 
    color: var(--primary-color); 
    font-size: 1.2rem; 
    margin-top: 3px; 
}

.map-container { 
    width: 100%; 
    height: 350px; 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
}