@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Jost:wght@300;400;500;600&display=swap');

#kbrev-root, #kbrev-root * { box-sizing: border-box; }

/* ---------- Floating vertical tab ---------- */
#kbrev-tab {
  position: fixed !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 999998 !important;
  background: #17233D !important;
  color: #F7F3EC !important;
  font-family: 'Jost', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 16px 10px !important;
  border-radius: 8px 0 0 8px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: -2px 2px 10px rgba(0,0,0,0.15) !important;
  border: none !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
}
#kbrev-tab:hover { background: #223055 !important; }
#kbrev-tab svg { width: 16px !important; height: 16px !important; writing-mode: horizontal-tb !important; }
#kbrev-tab .kbrev-tab-star { fill: #C9A15B !important; }

/* ---------- Overlay ---------- */
#kbrev-overlay {
  position: fixed !important; inset: 0 !important;
  background: rgba(23,35,61,0.35) !important;
  z-index: 999997 !important;
  opacity: 0 !important; visibility: hidden !important;
  transition: opacity .25s ease !important;
}
#kbrev-overlay.kbrev-open { opacity: 1 !important; visibility: visible !important; }

/* ---------- Slide-out panel ---------- */
#kbrev-panel {
  position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 400px !important; max-width: 92vw !important;
  background: #FFFFFF !important;
  z-index: 999999 !important;
  box-shadow: -6px 0 24px rgba(0,0,0,0.12) !important;
  transform: translateX(100%) !important;
  transition: transform .32s ease !important;
  display: flex !important; flex-direction: column !important;
  font-family: 'Jost', Arial, sans-serif !important;
}
#kbrev-panel.kbrev-open { transform: translateX(0) !important; }

#kbrev-panel-header {
  padding: 22px 24px 18px !important;
  border-bottom: 1px solid #E9E2D2 !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  flex: 0 0 auto !important;
}
#kbrev-panel-header h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important; font-weight: 700 !important; color: #17233D !important; margin: 0 !important;
}
#kbrev-close {
  background: none !important; border: none !important; cursor: pointer !important;
  font-size: 22px !important; line-height: 1 !important; color: #6B6558 !important; padding: 4px !important;
}
#kbrev-close:hover { color: #C9A15B !important; }

#kbrev-summary {
  padding: 20px 24px !important;
  border-bottom: 1px solid #E9E2D2 !important;
  display: flex !important; align-items: center !important; gap: 16px !important;
  flex-wrap: wrap !important;
  flex: 0 0 auto !important;
}
#kbrev-score {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 40px !important; font-weight: 700 !important; color: #17233D !important; line-height: 1 !important;
}
#kbrev-stars { color: #C9A15B !important; font-size: 16px !important; letter-spacing: 2px !important; }
#kbrev-count { font-size: 12.5px !important; color: #6B6558 !important; margin-top: 2px !important; }
#kbrev-write-btn {
  margin-left: auto !important;
  background: #17233D !important; color: #F7F3EC !important;
  font-size: 12px !important; font-weight: 500 !important; letter-spacing: 1px !important;
  border: none !important; border-radius: 30px !important; padding: 10px 18px !important;
  cursor: pointer !important; text-decoration: none !important; display: inline-block !important;
}
#kbrev-write-btn:hover { background: #C9A15B !important; color: #17233D !important; }

#kbrev-tabs {
  display: flex !important; gap: 22px !important;
  padding: 0 24px !important; border-bottom: 1px solid #E9E2D2 !important;
  flex: 0 0 auto !important;
}
.kbrev-tabbtn {
  background: none !important; border: none !important; cursor: pointer !important;
  font-size: 13.5px !important; font-weight: 500 !important; color: #6B6558 !important;
  padding: 12px 0 !important; border-bottom: 2px solid transparent !important;
}
.kbrev-tabbtn.kbrev-tab-active { color: #17233D !important; border-bottom-color: #C9A15B !important; }

#kbrev-list {
  flex: 1 1 auto !important; overflow-y: auto !important; padding: 20px 24px !important;
}
.kbrev-review { padding-bottom: 22px !important; margin-bottom: 22px !important; border-bottom: 1px solid #F0E9D9 !important; }
.kbrev-review:last-child { border-bottom: none !important; margin-bottom: 0 !important; }
.kbrev-review-head { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 6px !important; }
.kbrev-avatar {
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background: #E9E2D2 !important; color: #17233D !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 13px !important; font-weight: 600 !important; flex: 0 0 auto !important;
}
.kbrev-name { font-size: 13.5px !important; font-weight: 600 !important; color: #17233D !important; }
.kbrev-verified { font-size: 11px !important; color: #8FA07C !important; display: block !important; }
.kbrev-date { margin-left: auto !important; font-size: 11.5px !important; color: #A8A196 !important; }
.kbrev-review-stars { color: #C9A15B !important; font-size: 13px !important; margin-bottom: 6px !important; }
.kbrev-review-title { font-size: 14px !important; font-weight: 600 !important; color: #22201C !important; margin-bottom: 4px !important; display: inline-block !important; }
.kbrev-review-body { font-size: 13.5px !important; line-height: 1.7 !important; color: #4A453C !important; font-weight: 300 !important; margin-bottom: 8px !important; }
.kbrev-review-photo { width: 100%; max-width: 160px !important; border-radius: 8px !important; margin-bottom: 8px !important; display: block !important; }
.kbrev-reply {
  background: #FBF9F4 !important; border-radius: 8px !important; padding: 10px 12px !important;
  font-size: 12.5px !important; line-height: 1.6 !important; color: #6B6558 !important;
}
.kbrev-reply strong { color: #17233D !important; }

@media (max-width: 480px) {
  #kbrev-panel { width: 100vw !important; }
}