/* BrightSmile Dental - Site styles */

:root {
    --bs-primary: #0a7bbf;
    --bs-primary-rgb: 10, 123, 191;
    --brand-primary: #0a7bbf;
    --brand-primary-dark: #085a8c;
    --brand-accent: #25d0a4;
    --brand-ink: #0b2545;
    --brand-muted: #6b7b8c;
    --brand-bg: #f5f9fc;
    --brand-card: #ffffff;
}

html, body {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--brand-ink);
    background-color: var(--brand-bg);
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-dark); }

/* Bootstrap primary override */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }

/* Navbar */
.navbar { padding-top: .85rem; padding-bottom: .85rem; }
.navbar .nav-link {
    color: var(--brand-ink);
    font-weight: 500;
    padding: .5rem .9rem !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--brand-primary);
}

/* Admin navbar (dark background) — keep all links readable, not just on hover */
.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.9);
}
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: #ffffff;
}
.navbar-dark .nav-link.active {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
}
.brand-icon {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    color: #fff;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 1.1rem;
}

/* Hero */
.hero {
    background-size: cover;
    background-position: center;
}
.min-vh-80 { min-height: 80vh; }

/* Eyebrow labels */
.eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: .5rem;
}

/* Service cards */
.service-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(10,123,191,.1), rgba(37,208,164,.1));
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.service-card { transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1.25rem rgba(11,37,69,.1) !important;
}

/* Doctor cards */
.doctor-card {
    transition: transform .25s ease;
}
.doctor-card:hover { transform: translateY(-3px); }

.doctor-profile {
    transition: box-shadow .25s ease;
}
.doctor-profile:hover {
    box-shadow: 0 .5rem 1.25rem rgba(11,37,69,.1) !important;
}

/* Testimonials */
.testimonial-card {
    border-left: 4px solid var(--brand-accent);
}

/* Value cards */
.value-card .service-icon { width: 48px; height: 48px; font-size: 1.3rem; }

/* Page header */
.page-header h1 { color: var(--brand-ink); }

/* CTA banner */
.cta-banner {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}

/* Footer */
.site-footer {
    background-color: #fff;
    border-top: 1px solid #e9edf3;
    color: var(--brand-ink);
}
.site-footer a { color: var(--brand-ink); }
.site-footer a:hover { color: var(--brand-primary); }
.social-links a {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brand-bg);
    margin-right: .4rem;
    color: var(--brand-primary);
    transition: background-color .2s ease, color .2s ease;
}
.social-links a:hover {
    background: var(--brand-primary);
    color: #fff;
}

/* Pricing tables */
.pricing-table table {
    border-collapse: separate;
    border-spacing: 0;
}

/* Blog */
.blog-card { transition: transform .2s ease; }
.blog-card:hover { transform: translateY(-3px); }
.blog-body p { line-height: 1.7; }

/* Forms */
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(10,123,191,.15);
}

/* Map */
.map-wrapper iframe { display: block; }

/* ---------- CHATBOT ---------- */
.chatbot-wrapper {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1050;
}
.chatbot-toggle {
    width: 58px; height: 58px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 .5rem 1.5rem rgba(11,37,69,.25);
    cursor: pointer;
    transition: transform .2s ease;
}
.chatbot-toggle:hover { transform: scale(1.05); }

.chatbot-window {
    position: absolute;
    bottom: 72px; right: 0;
    width: 340px;
    max-width: calc(100vw - 2rem);
    height: 460px;
    max-height: calc(100vh - 6rem);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1rem 2.5rem rgba(11,37,69,.18);
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.chatbot-window.open { display: flex; }

.chatbot-header {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: #fff;
    padding: .85rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chatbot-header .btn-close { opacity: .85; filter: invert(1); }

.chatbot-messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    background: #f8fbfd;
}
.chat-msg {
    max-width: 80%;
    padding: .55rem .85rem;
    border-radius: 14px;
    margin-bottom: .45rem;
    font-size: .9rem;
    line-height: 1.4;
    word-wrap: break-word;
}
.chat-msg.bot {
    background: #fff;
    border: 1px solid #e9edf3;
    color: var(--brand-ink);
    border-bottom-left-radius: 4px;
}
.chat-msg.user {
    background: var(--brand-primary);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}
.chatbot-form {
    display: flex;
    border-top: 1px solid #e9edf3;
    padding: .5rem;
    gap: .4rem;
    background: #fff;
}
.chatbot-form input {
    flex: 1;
    border: 1px solid #e1e7ee;
    border-radius: 10px;
    padding: .5rem .75rem;
    font-size: .9rem;
    outline: none;
}
.chatbot-form input:focus { border-color: var(--brand-primary); }
.chatbot-form button {
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    width: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.chatbot-form button:hover { background: var(--brand-primary-dark); }

/* Small screens */
@media (max-width: 576px) {
    .chatbot-window { height: 70vh; }
    .display-4 { font-size: 2rem; }
    .min-vh-80 { min-height: 60vh; }
}