/* Chatbot and payment extra overrides – kept separate for clarity */
/* These rules extend components.css without duplication */

/* Scrollbar in chat */
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Proof upload hover */
.upload-area.dragover { border-color: var(--green); background: var(--green-pale); }

/* Illustrated section images */
.section-hero-img {
  width: 100%; height: 320px; object-fit: cover;
  border-radius: var(--radius-lg); margin-bottom: 32px;
}
.illustrated-para { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 48px; }
.illustrated-para.reverse { direction: rtl; }
.illustrated-para.reverse > * { direction: ltr; }
.illustrated-para img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius-lg); }
.illustrated-para p { font-size: 16px; line-height: 1.8; color: var(--text-muted); }
@media (max-width: 768px) {
  .illustrated-para { grid-template-columns: 1fr; gap: 24px; }
  .illustrated-para.reverse { direction: ltr; }
  .illustrated-para img { height: 200px; }
  #chatbot-widget { bottom: 16px; right: 16px; }
}

@media (max-width: 480px) {
  .illustrated-para img { height: 160px; }
}

/* Product results inside chatbot */
.chat-products { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chat-product {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 10px;
  text-decoration: none; color: var(--text);
  transition: all var(--transition);
}
.chat-product:hover { border-color: var(--green); }
.chat-product img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.chat-product-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 6px;
  background: var(--bg-soft); color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.chat-product b { font-size: 13px; }
.chat-product small { color: var(--green-dark); font-weight: 700; font-family: var(--font-mono); }
.chat-bubble a { color: var(--green); font-weight: 600; }