:root {
    --primary: #1a365d;
    --accent: #0891b2;
    --hero-bg: linear-gradient(135deg, #991b1b 0%, #b91c1c 50%, #dc2626 100%);
}

body { font-family: 'Inter', sans-serif; }

.top-bar { background: #0f2440; padding: 6px 0; }
.sticky-header-wrap { position: sticky; top: 0; z-index: 1031; }

/* Section hero — distinct from navbar */
.section-hero { background: var(--hero-bg); position: relative; }
.section-hero h1, .section-hero .lead { text-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.section-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #f87171, #fca5a5, #f87171); }

.navbar-brand img { max-height: 40px; }

.hero-slide { padding: 80px 0; min-height: 420px; display: flex; align-items: center; }
.hero-slide h1 { font-size: 2.8rem; font-weight: 800; }
.hero-slide .lead { font-size: 1.15rem; }

.product-card { transition: transform 0.2s, box-shadow 0.2s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important; }
.product-image { min-height: 180px; border-radius: 0.5rem 0.5rem 0 0; position: relative; overflow: hidden; }
.product-carousel { cursor: pointer; }
.product-carousel-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.product-carousel-img.active { opacity: 1; }
.carousel-dots { display: flex; gap: 4px; z-index: 2; }
.carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; display: inline-block; transition: background 0.3s; cursor: pointer; }
.carousel-dot.active { background: #0891b2; width: 16px; border-radius: 3px; }

.min-vh-50 { min-height: 42vh; }

/* WhatsApp Float */
.whatsapp-float { position: fixed; bottom: 20px; left: 20px; width: 55px; height: 55px; background: #25D366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(37,211,102,0.4); z-index: 1060; transition: transform 0.2s; }
.whatsapp-float:hover { transform: scale(1.1); color: white; }

/* Chatbot */
.chatbot-widget { position: fixed; bottom: 20px; right: 20px; width: 370px; max-height: 520px; background: white; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: 1050; display: none; flex-direction: column; overflow: hidden; }
.chatbot-widget.active { display: flex; }
.chatbot-header { background: linear-gradient(135deg, #1a365d, #0891b2); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.chatbot-avatar { width: 38px; height: 38px; background: white; color: #1a365d; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.chatbot-body { flex: 1; display: flex; flex-direction: column; max-height: 420px; }
.chatbot-messages { flex: 1; overflow-y: auto; padding: 16px; }
.chat-message { margin-bottom: 12px; display: flex; }
.chat-message.bot { justify-content: flex-start; }
.chat-message.user { justify-content: flex-end; }
.message-content { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; }
.chat-message.bot .message-content { background: #f1f5f9; color: #334155; border-bottom-left-radius: 4px; }
.chat-message.user .message-content { background: #0891b2; color: white; border-bottom-right-radius: 4px; }
.chatbot-input { padding: 12px; border-top: 1px solid #e2e8f0; }
.quick-actions .btn { font-size: 0.75rem; }
.chatbot-toggle-btn { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: linear-gradient(135deg, #1a365d, #0891b2); color: white; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(8,145,178,0.4); z-index: 1050; cursor: pointer; transition: transform 0.2s; }
.chatbot-toggle-btn:hover { transform: scale(1.1); }
.chatbot-toggle-btn.hidden { display: none; }

/* Article content */
.article-content { font-size: 1.05rem; line-height: 1.8; }
.article-content h1 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 0.75rem; }
.article-content h2 { font-size: 1.35rem; font-weight: 700; margin: 1.75rem 0 0.6rem; }
.article-content h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.article-content p { margin-bottom: 0.75rem; }
.article-content p:empty, .article-content p:has(br:only-child) { height: 0.5rem; margin: 0; }
.article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 0.75rem; margin-top: 0.5rem; }
.article-content li { margin-bottom: 0.3rem; }
.article-content strong { font-weight: 600; }
.article-content a { color: var(--accent); }
.article-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }
.article-content blockquote {
    border-left: 4px solid var(--accent);
    background: #f8fafc;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #475569;
}
.article-content blockquote p { margin-bottom: 0; }
.article-content pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.9rem;
}
.article-content code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Quick reply buttons */
.quick-replies { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 12px; }
.quick-reply-btn { background: #f1f5f9; border: 1px solid #cbd5e1; color: #1a365d; padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.quick-reply-btn:hover { background: #0891b2; color: white; border-color: #0891b2; }

/* Cookie Consent Banner */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 2px solid #e2e8f0; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 1060; padding: 0; animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie-banner span { font-size: 0.9rem; color: #475569; }

/* Responsive */
@media (max-width: 768px) {
    .hero-slide { padding: 40px 0; min-height: 300px; }
    .hero-slide h1 { font-size: 1.8rem; }
    .chatbot-widget { width: calc(100% - 20px); right: 10px; bottom: 10px; max-height: 70vh; }
    .whatsapp-float { bottom: 15px; left: 15px; width: 48px; height: 48px; }
}