/*
  Konek Terra reviews widget -- scoped styling.

  Every rule is prefixed under .kt-widget-container so nothing here can leak
  out and affect the rest of the host page, and nothing on the host page's
  existing CSS (Bootstrap or otherwise) can unexpectedly override the widget.

  Add this via a <link> to a separate .css file (recommended -- keeps it out
  of the page's HTML and easy to update independently), or inside a single
  <style> block placed anywhere on the page. Do NOT add box-sizing/font-family
  as bare `*` or `body` selectors -- that's what caused the border/layout
  issue; every selector below is scoped instead.
*/

.kt-widget-container {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  padding: 0 70px;
}
.kt-widget-container * { box-sizing: border-box; }

.kt-header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding: 0 10px; }
.kt-title-area h4 { margin: 0; font-size: 22px; font-weight: 700; }
.kt-stars-line { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 5px; }
.kt-stars { color: #fbbc04; font-size: 18px; }
.kt-btn-review { background: linear-gradient(135deg, #f97316, #dc2626); border: none; color: #ffffff; padding: 12px 26px; border-radius: 50px; font-weight: 700; cursor: pointer; font-size: 15px; text-decoration: none; display: inline-block; box-shadow: 0 3px 8px rgba(220,38,38,0.25); transition: color 0.2s; }
.kt-btn-review:hover { color: #fde047; text-decoration: none; }
.kt-slider-viewport { overflow: hidden; width: 100%; position: relative; }
.kt-slides-container { display: flex; transition: transform 0.5s ease-in-out; width: 100%; }
.kt-review-card-wrapper { flex: 0 0 33.3333%; padding: 0 10px; display: flex; }
.kt-review-card { background: #ffffff; border: 1px solid #f1eff0; border-radius: 16px; padding: 24px; flex: 1; box-shadow: 0 4px 6px rgba(0,0,0,0.02); display: flex; flex-direction: column; min-height: 380px; }
.kt-profile-section { display: flex; align-items: center; margin-bottom: 15px; position: relative; }
.kt-avatar { width: 40px; height: 40px; background: #e5e7eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #4b5563; font-size: 14px; overflow: hidden; }
.kt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kt-profile-info { margin-left: 12px; }
.kt-profile-info h6 { margin: 0; font-size: 15px; font-weight: 600; }
.kt-profile-info small { color: #6b7280; font-size: 12px; }
.kt-google-badge { width: 18px; height: 18px; background: #1a73e8; color: white; border-radius: 50%; font-size: 11px; display: flex; align-items: center; justify-content: center; position: absolute; top: 24px; left: 24px; border: 2px solid white; font-weight: bold; }
.kt-ai-icon { background: linear-gradient(135deg, #6366f1, #a855f7); color: white; }
.kt-bullet-list { margin: 15px 0 0 0; padding-left: 20px; color: #4b5563; font-size: 13px; line-height: 1.6; }
.kt-bullet-list li { margin-bottom: 10px; }
.kt-review-text { color: #4b5563; font-size: 13.5px; line-height: 1.5; margin: 10px 0; white-space: pre-line; }
.kt-nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: white; border: 1px solid #e5e7eb; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.06); font-size: 26px; display: flex; align-items: center; justify-content: center; z-index: 9999; font-weight: bold; color: #4b5563; line-height: 1; padding-bottom: 4px; }
.kt-nav-arrow:hover { background: #f9fafb; color: #111827; }
.kt-arrow-left { left: 10px; }
.kt-arrow-right { right: 10px; }
.kt-nav-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; align-items: center; position: relative; z-index: 9999; }
.kt-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; border: none; cursor: pointer; padding: 0; transition: all 0.2s; position: relative; }
.kt-dot.kt-active { background: #4b5563; width: 10px; height: 10px; }

@media (max-width: 767px) {
  .kt-widget-container { padding: 0; }
  .kt-nav-arrow { display: none; }
  .kt-review-card-wrapper { flex: 0 0 100%; }
  .kt-nav-dots { gap: 20px; }
  .kt-header-bar { flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 0 20px; }
  .kt-title-area { text-align: center; }
  .kt-stars-line { justify-content: center; }
  /* Dot stays visually small, but the actual tappable area is 44x44px
     (Apple/Google's minimum recommended touch target), centered on it. */
  .kt-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}