/* Robin Hood Reviews v3 — Front-end Styles */

/* ── Base ── */
.rhr-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; box-sizing: border-box; }
.rhr-wrapper *, .rhr-wrapper *::before, .rhr-wrapper *::after { box-sizing: inherit; }

/* ── Header bar ── */
.rhr-header-bar { display: flex; align-items: center; gap: 16px; padding: 16px 0 20px; flex-wrap: wrap; }
.rhr-google-logo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #555; }
.rhr-overall { display: flex; align-items: center; gap: 8px; }
.rhr-overall-score { font-size: 22px; font-weight: 700; color: #1a1a1a; }
.rhr-total { font-size: 13px; color: #777; }
.rhr-write-btn { margin-left: auto; background: #4285F4; color: #fff; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.2s; }
.rhr-write-btn:hover { background: #3367d6; color: #fff; }

/* ── Stars ── */
.rhr-stars { display: inline-flex; gap: 1px; }
.rhr-star { font-size: 16px; line-height: 1; }
.rhr-star-full, .rhr-star-half { color: #f5a623; }
.rhr-star-empty { color: #d8d8d8; }

/* ── Grid layout ── */
.rhr-grid { display: grid; gap: 16px; }
.rhr-cols-2 { grid-template-columns: repeat(2, 1fr); }
.rhr-cols-3 { grid-template-columns: repeat(3, 1fr); }
.rhr-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Card ── */
.rhr-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 18px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: box-shadow 0.25s, transform 0.25s; display: flex; flex-direction: column; gap: 10px; }
.rhr-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.12); transform: translateY(-3px); }
.rhr-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.rhr-reviewer { display: flex; align-items: center; gap: 10px; }
.rhr-avatar-wrap { flex-shrink: 0; }
.rhr-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.rhr-avatar-initials { width: 42px; height: 42px; border-radius: 50%; background: #e8f0fe; color: #4285F4; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.rhr-reviewer-name { font-weight: 600; font-size: 14px; color: #1a1a1a; }
.rhr-review-date { font-size: 12px; color: #999; margin-top: 2px; }
.rhr-google-icon { opacity: 0.7; }
.rhr-card-stars { display: flex; }
.rhr-card-comment { flex: 1; }
.rhr-comment-text { font-size: 14px; line-height: 1.6; color: #444; margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rhr-card-location { font-size: 12px; color: #888; margin-top: auto; }

/* ── List layout ── */
.rhr-list { display: flex; flex-direction: column; gap: 12px; }
.rhr-card-list { flex-direction: row; align-items: flex-start; }
.rhr-card-list .rhr-reviewer { flex-direction: column; align-items: center; min-width: 80px; }
.rhr-card-list .rhr-reviewer-name { text-align: center; font-size: 12px; }
.rhr-card-list .rhr-review-date { text-align: center; }
.rhr-card-list .rhr-card-comment { flex: 1; }
.rhr-card-list .rhr-card-top { flex: 1; }

/* ── Slider layout ── */
.rhr-slider-track { position: relative; overflow: hidden; border-radius: 12px; }
.rhr-slider-inner { display: flex; gap: 16px; transition: transform 0.4s ease; will-change: transform; }
.rhr-layout-slider .rhr-card { min-width: 300px; flex-shrink: 0; }
.rhr-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.95); border: 1px solid #ddd; border-radius: 50%; width: 38px; height: 38px; font-size: 22px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.12); color: #333; line-height: 1; }
.rhr-nav:hover { background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.rhr-prev { left: 8px; }
.rhr-next { right: 8px; }
.rhr-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.rhr-dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; cursor: pointer; transition: background 0.2s, transform 0.2s; border: none; padding: 0; }
.rhr-dot.active { background: #4285F4; transform: scale(1.3); }

/* ── Badge ── */
.rhr-badge { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 14px 16px; text-align: center; min-width: 130px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.rhr-badge-fixed { position: fixed; bottom: 80px; z-index: 9999; }
.rhr-badge-left { left: 0; border-radius: 0 12px 12px 0; }
.rhr-badge-right { right: 0; border-radius: 12px 0 0 12px; }
.rhr-badge-inline { display: inline-block; }
.rhr-badge-logo { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 6px; }
.rhr-badge-score { font-size: 28px; font-weight: 700; color: #1a1a1a; line-height: 1; }
.rhr-badge-stars { margin: 4px 0; }
.rhr-badge-count { font-size: 11px; color: #888; margin-bottom: 8px; }
.rhr-badge-write { display: block; background: #4285F4; color: #fff !important; padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; text-decoration: none !important; transition: background 0.2s; }
.rhr-badge-write:hover { background: #3367d6; }

/* ── Dark theme ── */
.rhr-theme-dark .rhr-card { background: #1e1e2e; border-color: #2d2d3f; color: #e0e0e0; }
.rhr-theme-dark .rhr-reviewer-name { color: #f0f0f0; }
.rhr-theme-dark .rhr-comment-text { color: #ccc; }
.rhr-theme-dark .rhr-overall-score { color: #f0f0f0; }
.rhr-theme-dark .rhr-header-bar { border-color: #333; }
.rhr-theme-dark .rhr-google-logo { color: #aaa; }
.rhr-theme-dark .rhr-card-location { color: #888; }
.rhr-theme-dark .rhr-review-date { color: #888; }
.rhr-theme-dark .rhr-nav { background: rgba(30,30,46,0.95); border-color: #444; color: #eee; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .rhr-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .rhr-cols-3 { grid-template-columns: repeat(2, 1fr); }
    .rhr-layout-slider .rhr-card { min-width: 260px; }
}
@media (max-width: 600px) {
    .rhr-cols-4, .rhr-cols-3, .rhr-cols-2 { grid-template-columns: 1fr; }
    .rhr-header-bar { gap: 10px; }
    .rhr-write-btn { margin-left: 0; }
    .rhr-card-list { flex-direction: column; }
    .rhr-layout-slider .rhr-card { min-width: calc(100vw - 60px); }
}

.rhr-empty { color: #999; font-style: italic; padding: 20px 0; }