/* Core resets for the widget */
.cr-reviews { font-family: "century-gothic", CenturyGothic, AppleGothic, Arial, sans-serif; font-size: 16px; color: #111; }
.cr-reviews * { box-sizing: border-box; }

/* Header */
.cr-header { font-weight: 800; letter-spacing: 0.02em; margin: 0 0 8px; font-size: 20px; }

/* Tabs */
.cr-tabs { display: flex; gap: 24px; margin: 4px 0 14px; border-bottom: 1px solid #eee; }
.cr-tab { background: none; border: none; padding: 10px 0 10px; cursor: pointer; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; color: #666; text-transform: uppercase; }
.cr-tab:hover { color: #222; }
.cr-tab.is-active { color: #111; border-bottom: 2px solid #111; margin-bottom: -1px; }

/* Panels */
.cr-panel { display: none; }
.cr-panel.is-active { display: block; }

/* Carousel */
.cr-carousel { position: relative; display: block; }
.cr-track { overflow: hidden; width: 100%; }
.cr-track .cr-slide { width: 100%; flex: 0 0 100%; padding: 6px 2px; }
.cr-track-inner { display: flex; transition: transform 300ms ease; }

.cr-navrow { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; }
.cr-nav { background: none; border: 1px solid #ddd; border-radius: 6px; padding: 6px 12px; font-size: 18px; line-height: 1; cursor: pointer; color: #555; background-color: #fff; }
.cr-nav:hover { color: #111; }
.cr-nav.is-disabled { color: #ccc; cursor: default; }

/* Review card */
.cr-review { border-radius: 8px; padding: 14px 16px; background: #fafafa; border: 1px solid #eee; }
.cr-review-body { margin-bottom: 12px; line-height: 1.7; }
.cr-review-meta { display: flex; align-items: center; gap: 10px; }
.cr-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #e9e9e9; display: inline-flex; align-items: center; justify-content: center; }
.cr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-avatar-fallback { width: 18px; height: 18px; background: #fff; border-radius: 50%; display: inline-block; }
.cr-author { font-weight: 600; }
.cr-time { color: #666; font-size: 14px; }

/* Empty state */
.cr-empty { color: #666; font-size: 16px; }