/* =============================================
   BHP Finance — Financial Guides Stylesheet
   Covers: Insurance, Investment, Retirement,
           Tax, Mutual Funds, Stocks
   ============================================= */

/* ══ Guide Hero ══ */
.guide-hero { position:relative; min-height:420px; display:flex; align-items:center; background:linear-gradient(135deg,rgba(0,107,179,.95) 0%,rgba(0,136,204,.90) 100%); background-size:cover; background-position:center; padding:120px 0 70px; overflow:hidden; }
.guide-hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,60,120,.88) 0%,rgba(0,100,180,.75) 100%); }
.guide-hero .breadcrumb-light .breadcrumb-item a { color:rgba(255,255,255,.75); }
.guide-hero .breadcrumb-light .breadcrumb-item.active { color:rgba(255,255,255,.55); }
.guide-hero .breadcrumb-light .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.4); }

.guide-tag { display:inline-flex; align-items:center; gap:8px; background:rgba(212,168,67,.18); border:1px solid rgba(212,168,67,.45); color:#d4a843; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; padding:5px 14px; border-radius:50px; margin-bottom:18px; }
.guide-hero h1 { font-size:clamp(1.8rem,4vw,3rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:16px; }
.guide-hero p { font-size:1.05rem; color:rgba(255,255,255,.8); max-width:580px; }
.guide-hero-stats { display:flex; gap:32px; margin-top:30px; flex-wrap:wrap; }
.guide-hero-stat { text-align:center; }
.guide-hero-stat .num { font-size:1.7rem; font-weight:800; color:#fff; }
.guide-hero-stat .lbl { font-size:.75rem; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.08em; }

/* ══ Guide Navigation Sidebar ══ */
.guide-toc { background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px; position:sticky; top:90px; box-shadow:var(--shadow); }
.guide-toc h6 { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--text-muted); margin-bottom:16px; }
.guide-toc-list { list-style:none; padding:0; margin:0; }
.guide-toc-list li { margin-bottom:2px; }
.guide-toc-list a { display:flex; align-items:center; gap:10px; font-size:.87rem; color:var(--text-muted); padding:8px 12px; border-radius:8px; transition:var(--transition); }
.guide-toc-list a:hover, .guide-toc-list a.active { color:var(--primary); background:rgba(0,136,204,.08); font-weight:500; }
.guide-toc-list a .toc-num { width:20px; height:20px; border-radius:50%; background:var(--primary); color:#fff; font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.guide-cta-box { background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%); border-radius:14px; padding:24px; text-align:center; margin-top:20px; }
.guide-cta-box p { color:rgba(255,255,255,.85); font-size:.88rem; margin-bottom:16px; }

/* ══ Guide Section ══ */
.guide-section { margin-bottom:56px; scroll-margin-top:110px; }
.guide-section-header { display:flex; align-items:center; gap:14px; margin-bottom:24px; padding-bottom:16px; border-bottom:2px solid rgba(0,136,204,.12); }
.guide-section-icon { width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.guide-section-icon i { color:#fff; font-size:1.2rem; }
.guide-section-header h2 { font-size:1.55rem; font-weight:800; color:var(--primary-dark); margin:0; }

/* ══ Info Cards ══ */
.guide-info-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px; height:100%; transition:var(--transition); }
.guide-info-card:hover { border-color:var(--primary); box-shadow:var(--shadow); transform:translateY(-3px); }
.guide-info-card .card-icon { width:52px; height:52px; border-radius:12px; background:rgba(0,136,204,.08); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.guide-info-card .card-icon i { color:var(--primary); font-size:1.3rem; }
.guide-info-card h5 { font-size:1rem; font-weight:700; color:var(--primary-dark); margin-bottom:10px; }
.guide-info-card p { font-size:.9rem; color:var(--text-muted); margin:0; line-height:1.6; }

/* ══ Comparison Table ══ */
.guide-table { background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); }
.guide-table thead th { background:linear-gradient(135deg,var(--primary-dark),var(--primary)); color:#fff; font-size:.85rem; font-weight:700; padding:14px 20px; border:none; }
.guide-table tbody tr:nth-child(even) { background:#f8fafc; }
.guide-table tbody td { padding:13px 20px; font-size:.9rem; color:var(--text-muted); border-color:var(--border); vertical-align:middle; }
.guide-table tbody tr:hover td { background:rgba(0,136,204,.04); }
.guide-badge-good { background:rgba(16,185,129,.1); color:#065f46; padding:3px 10px; border-radius:20px; font-size:.78rem; font-weight:600; }
.guide-badge-bad { background:rgba(233,69,96,.1); color:#9b1c1c; padding:3px 10px; border-radius:20px; font-size:.78rem; font-weight:600; }
.guide-badge-ok { background:rgba(245,158,11,.1); color:#78350f; padding:3px 10px; border-radius:20px; font-size:.78rem; font-weight:600; }

/* ══ Highlight Box ══ */
.guide-highlight { background:linear-gradient(135deg,rgba(0,136,204,.07) 0%,rgba(0,107,179,.04) 100%); border:1px solid rgba(0,136,204,.2); border-left:4px solid var(--primary); border-radius:0 12px 12px 0; padding:20px 24px; margin:20px 0; }
.guide-highlight h6 { font-weight:700; color:var(--primary-dark); margin-bottom:8px; }
.guide-highlight p, .guide-highlight ul { font-size:.92rem; color:var(--text-muted); margin:0; }
.guide-highlight ul { padding-left:1.2rem; }
.guide-highlight ul li { margin-bottom:5px; }
.guide-warning { background:rgba(233,69,96,.06); border:1px solid rgba(233,69,96,.2); border-left:4px solid var(--accent); border-radius:0 12px 12px 0; padding:20px 24px; margin:20px 0; }
.guide-warning h6 { font-weight:700; color:#9b1c1c; margin-bottom:8px; }
.guide-warning p { font-size:.92rem; color:var(--text-muted); margin:0; }
.guide-tip { background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.2); border-left:4px solid #10b981; border-radius:0 12px 12px 0; padding:20px 24px; margin:20px 0; }
.guide-tip h6 { font-weight:700; color:#065f46; margin-bottom:8px; }
.guide-tip p, .guide-tip ul { font-size:.92rem; color:var(--text-muted); margin:0; }
.guide-tip ul { padding-left:1.2rem; }
.guide-tip ul li { margin-bottom:5px; }

/* ══ Steps / Process ══ */
.guide-steps { list-style:none; padding:0; margin:0; }
.guide-step { display:flex; gap:18px; margin-bottom:24px; align-items:flex-start; }
.guide-step-num { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; font-weight:800; font-size:.95rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 14px rgba(0,136,204,.3); }
.guide-step-body h6 { font-weight:700; color:var(--primary-dark); margin-bottom:6px; }
.guide-step-body p { font-size:.9rem; color:var(--text-muted); margin:0; }

/* ══ Key Stats Strip ══ */
.guide-stats-strip { background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%); border-radius:16px; padding:36px; display:flex; gap:0; }
.guide-stat-item { flex:1; text-align:center; padding:0 20px; border-right:1px solid rgba(255,255,255,.15); }
.guide-stat-item:last-child { border-right:none; }
.guide-stat-item .num { font-size:2rem; font-weight:800; color:#fff; }
.guide-stat-item .lbl { font-size:.82rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }

/* ══ Tax Bracket Table ══ */
.tax-slab-table { width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; }
.tax-slab-table thead th { background:var(--primary); color:#fff; padding:12px 16px; font-size:.85rem; font-weight:700; text-align:left; }
.tax-slab-table tbody td { padding:11px 16px; font-size:.88rem; border-bottom:1px solid var(--border); }
.tax-slab-table tbody tr:last-child td { border-bottom:none; }
.tax-slab-table tbody tr:nth-child(even) { background:#f8fafc; }
.tax-slab-table tbody tr:hover td { background:rgba(0,136,204,.04); }
.tax-rate { font-weight:700; color:var(--primary); }

/* ══ Asset Allocation Visual ══ */
.alloc-bar { height:16px; border-radius:8px; background:#e5e7eb; overflow:hidden; margin-bottom:8px; display:flex; }
.alloc-bar-fill { height:100%; border-radius:8px; transition:width 0.6s ease; }
.alloc-equity { background:linear-gradient(90deg,#0088cc,#33a5e6); }
.alloc-debt { background:linear-gradient(90deg,#10b981,#34d399); }
.alloc-gold { background:linear-gradient(90deg,#d4a843,#f0c060); }
.alloc-real-estate { background:linear-gradient(90deg,#8b5cf6,#a78bfa); }

/* ══ Chart Placeholder ══ */
.guide-chart-wrap { background:#f8fafc; border:1px solid var(--border); border-radius:12px; padding:20px; position:relative; height:300px; }

/* ══ Checklist ══ */
.guide-checklist { list-style:none; padding:0; margin:0; }
.guide-checklist li { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:.9rem; color:var(--text-muted); }
.guide-checklist li:last-child { border-bottom:none; }
.guide-checklist li i { color:#10b981; font-size:1.1rem; flex-shrink:0; margin-top:1px; }
.guide-checklist li strong { color:var(--primary-dark); }

/* ══ Quiz Block ══ */
.quiz-block { background:#fff; border:1px solid var(--border); border-radius:14px; padding:28px; margin-top:24px; }
.quiz-question { font-weight:700; color:var(--primary-dark); margin-bottom:18px; font-size:1rem; }
.quiz-options { display:flex; flex-direction:column; gap:10px; }
.quiz-option { display:flex; align-items:center; gap:12px; padding:12px 16px; border:2px solid var(--border); border-radius:10px; cursor:pointer; transition:var(--transition); font-size:.9rem; color:var(--text); }
.quiz-option:hover { border-color:var(--primary); color:var(--primary); background:rgba(0,136,204,.04); }
.quiz-option.correct { border-color:#10b981; background:rgba(16,185,129,.08); color:#065f46; }
.quiz-option.wrong { border-color:var(--accent); background:rgba(233,69,96,.08); color:#9b1c1c; }
.quiz-feedback { margin-top:14px; padding:14px 18px; border-radius:10px; font-size:.9rem; display:none; }
.quiz-feedback.show { display:block; }
.quiz-feedback.correct { background:rgba(16,185,129,.1); color:#065f46; border:1px solid rgba(16,185,129,.25); }
.quiz-feedback.wrong { background:rgba(233,69,96,.1); color:#9b1c1c; border:1px solid rgba(233,69,96,.25); }

/* ══ Newsletter Banner ══ */
.newsletter-banner { background:linear-gradient(135deg,var(--primary-dark) 0%,rgba(0,60,120,.95) 100%); border-radius:20px; padding:48px 40px; position:relative; overflow:hidden; }
.newsletter-banner::before { content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.05); }
.newsletter-banner::after { content:''; position:absolute; bottom:-30px; left:-30px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.04); }
.newsletter-banner h3 { font-size:1.8rem; font-weight:800; color:#fff; margin-bottom:10px; }
.newsletter-banner p { color:rgba(255,255,255,.75); margin-bottom:0; }
.newsletter-form { display:flex; gap:12px; flex-wrap:wrap; }
.newsletter-form input { flex:1; min-width:220px; padding:14px 20px; border-radius:10px; border:none; font-size:.95rem; }
.newsletter-form button { padding:14px 28px; border-radius:10px; font-weight:700; white-space:nowrap; }

/* ══ Related Guides ══ */
.related-guide-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; display:flex; gap:16px; align-items:flex-start; transition:var(--transition); height:100%; }
.related-guide-card:hover { border-color:var(--primary); box-shadow:var(--shadow); transform:translateY(-3px); }
.related-guide-card .rg-icon { width:50px; height:50px; border-radius:12px; background:linear-gradient(135deg,rgba(0,136,204,.12),rgba(0,107,179,.08)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.related-guide-card .rg-icon i { color:var(--primary); font-size:1.3rem; }
.related-guide-card h6 { font-weight:700; color:var(--primary-dark); margin-bottom:6px; font-size:.95rem; }
.related-guide-card p { font-size:.83rem; color:var(--text-muted); margin-bottom:10px; line-height:1.5; }
.related-guide-card a { font-size:.82rem; font-weight:600; color:var(--primary); }

/* ══ Chatbot Widget ══ */
#bhp-chatbot-btn { position:fixed; bottom:28px; right:28px; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border:none; box-shadow:0 6px 24px rgba(0,136,204,.45); cursor:pointer; z-index:9999; display:flex; align-items:center; justify-content:center; font-size:1.4rem; transition:var(--transition); }
#bhp-chatbot-btn:hover { transform:scale(1.08); box-shadow:0 8px 30px rgba(0,136,204,.6); }
#bhp-chatbot-btn .chat-badge { position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%; background:var(--accent); color:#fff; font-size:.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
#bhp-chatbot-window { position:fixed; bottom:98px; right:28px; width:370px; max-height:500px; background:#fff; border-radius:18px; box-shadow:0 12px 50px rgba(0,0,0,.18); z-index:9998; display:none; flex-direction:column; overflow:hidden; border:1px solid var(--border); }
#bhp-chatbot-window.open { display:flex; }
.chatbot-header { background:linear-gradient(135deg,var(--primary-dark),var(--primary)); padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
.chatbot-header .bot-info { display:flex; align-items:center; gap:12px; }
.chatbot-header .bot-avatar { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; }
.chatbot-header .bot-name { font-weight:700; color:#fff; font-size:.95rem; }
.chatbot-header .bot-status { font-size:.72rem; color:rgba(255,255,255,.7); }
.chatbot-header button { background:none; border:none; color:rgba(255,255,255,.7); font-size:1rem; cursor:pointer; padding:0; }
.chatbot-header button:hover { color:#fff; }
.chatbot-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; max-height:340px; }
.chat-msg { display:flex; gap:8px; align-items:flex-end; }
.chat-msg.bot { flex-direction:row; }
.chat-msg.user { flex-direction:row-reverse; }
.chat-msg .avatar { width:28px; height:28px; border-radius:50%; background:rgba(0,136,204,.12); display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--primary); flex-shrink:0; }
.chat-msg .bubble { max-width:78%; padding:10px 14px; border-radius:14px; font-size:.86rem; line-height:1.5; }
.chat-msg.bot .bubble { background:#f1f5f9; color:var(--text); border-bottom-left-radius:4px; }
.chat-msg.user .bubble { background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; border-bottom-right-radius:4px; }
.chatbot-input { padding:14px 16px; border-top:1px solid var(--border); display:flex; gap:10px; }
.chatbot-input input { flex:1; border:1px solid var(--border); border-radius:10px; padding:9px 14px; font-size:.87rem; outline:none; }
.chatbot-input input:focus { border-color:var(--primary); }
.chatbot-input button { width:38px; height:38px; border-radius:10px; background:var(--primary); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.chatbot-quick-btns { padding:0 16px 12px; display:flex; gap:8px; flex-wrap:wrap; }
.chatbot-quick-btn { font-size:.75rem; padding:5px 12px; border-radius:20px; border:1px solid var(--primary); color:var(--primary); background:transparent; cursor:pointer; transition:var(--transition); }
.chatbot-quick-btn:hover { background:var(--primary); color:#fff; }

/* ══ Responsive ══ */
@media (max-width:768px) {
  .guide-stats-strip { flex-direction:column; gap:20px; }
  .guide-stat-item { border-right:none; border-bottom:1px solid rgba(255,255,255,.15); padding:16px 0; }
  .guide-stat-item:last-child { border-bottom:none; }
  .newsletter-banner { padding:32px 24px; }
  .newsletter-banner h3 { font-size:1.4rem; }
  #bhp-chatbot-window { width:calc(100vw - 40px); right:20px; }
  .guide-toc { position:static; margin-bottom:28px; }
}