html, body {
    height: 100%; /* Ensures the layout fills the full viewport height */
}

body {
    display: flex; 
    flex-direction: column;
    background-color: #E9ECEF; /* A cooler, slightly darker gray */
    font-family: 'Lato', sans-serif; /* Set new body font */
    color: #212529; /* Dark text for readability */
}

/* --- THEME OVERRIDE --- */
.btn-primary {
    background-color: #8A52C2 !important; /* Purple */
    border-color: #8A52C2 !important; /* Purple */
}
.text-primary {
    color: #1A5A9A !important; /* Dark Blue for high contrast */
}
/* Add teal border to all card-like elements */
.card,
.rounded-3.shadow-lg,
.rounded-3.shadow-sm {
   
    background-color: #F8F9FA !important; /* Off-white card background */
}

/* Override for primary-colored cards to ensure correct background and text color */
.bg-primary.rounded-3 {
    background-color: #1A5A9A !important; /* Dark Blue background */
    color: #fff !important; /* White text */
}


/* Improve contrast for muted text */
.text-muted {
    color: #495057 !important; /* A darker, more readable gray */
}

/* --- FONT OVERRIDE --- */
h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bold for titles */
}

/* --- FORM CONTROL OVERRIDE --- */
.form-control {
    border-width: 2px; /* Make border consistent with cards */
    border-color: #44BCAE; /* Teal */
}
.form-control:focus {
    border-color: #44BCAE; /* Teal */
    box-shadow: 0 0 0 0.25rem rgba(68, 188, 174, 0.25); /* Teal focus ring */
}


/* Simple page transition */
#content-container {
    /* KEY FIX: This property makes the container consume all available vertical space */
    flex-grow: 1; 
    
    
    transition: opacity 0.3s ease-in-out;
}

/* Simple fade-in animation for page loads */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
header.sticky-top {
    z-index: 1030; /* Standard Bootstrap z-index for fixed navbars */
}

/* Override nav link color to use our theme */
.navbar .nav-link {
    color: rgba(255, 255, 255, 0.85); /* Off-white for nav links */
    font-weight: 500;
}

/* Style the "Get a Quote" button with an accent color */
.btn-accent {
    background-color: #FF8A00; /* Orange */
    border-color: #FF8A00; /* Orange */
    color: #fff;
}

.btn-accent:hover {
    /* A slightly darker orange for hover */
    background-color: #E67C00; 
    border-color: #E67C00;
    color: #fff;
}

/* --- Knowledge Base Search Clear Button --- */

/* Style for the clear 'X' button inside the search input */
.btn-clear-search {
    position: absolute;
    right: 80px; /* Adjust this value based on the width of your search button */
    top: 50%;
    transform: translateY(-50%);
    z-index: 5; /* Ensure it's above the input field */
    border: none;
    background: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em;
    width: 2.5rem; /* Clickable area */
    height: 2.5rem;
}