/* Invoice Genie Ratings Widget — igrat.css v1.1.2
 * Dual-theme: works on dark and light WordPress themes.
 * Cards are self-contained floating panels that create contrast
 * against any page background. Dark-mode overrides via
 * @media (prefers-color-scheme: dark).
 */

/* ── Wrapper ─────────────────────────────────────────────────── */
.igrat-wrapper {
  font-family: inherit;
  max-width: 720px;
  margin: 0 auto;
}

/* ── CSS custom properties (light defaults) ─────────────────── */
.igrat-wrapper {
  --igrat-summary-bg:      #fffbf0;
  --igrat-summary-border:  #fde68a;
  --igrat-summary-num:     #92400e;
  --igrat-summary-label:   #78716c;

  --igrat-card-bg:         #ffffff;
  --igrat-card-border:     #e2e8f0;
  --igrat-card-shadow:     0 2px 8px rgba(0, 0, 0, 0.08);

  --igrat-client-color:    #111827;
  --igrat-date-color:      #9ca3af;
  --igrat-comment-color:   #374151;
  --igrat-comment-bg:      #f8fafc;
  --igrat-comment-border:  #e2e8f0;

  --igrat-star-full:       #f59e0b;
  --igrat-star-half:       rgba(245, 158, 11, 0.55);
  --igrat-star-empty:      #d1d5db;

  --igrat-empty-color:     #6b7280;
  --igrat-error-color:     #ef4444;
}

/* Dark theme overrides — applies when OS/browser is in dark mode */
@media (prefers-color-scheme: dark) {
  .igrat-wrapper {
    --igrat-summary-bg:      #2d1f00;
    --igrat-summary-border:  #92400e;
    --igrat-summary-num:     #fbbf24;
    --igrat-summary-label:   #a8a29e;

    --igrat-card-bg:         #1e2433;
    --igrat-card-border:     #2d3748;
    --igrat-card-shadow:     0 2px 12px rgba(0, 0, 0, 0.35);

    --igrat-client-color:    #f1f5f9;
    --igrat-date-color:      #64748b;
    --igrat-comment-color:   #cbd5e1;
    --igrat-comment-bg:      #141925;
    --igrat-comment-border:  #2d3748;

    --igrat-star-empty:      #475569;

    --igrat-empty-color:     #94a3b8;
  }
}

/* ── Summary bar ─────────────────────────────────────────────── */
.igrat-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  background: var(--igrat-summary-bg);
  border: 1px solid var(--igrat-summary-border);
  border-radius: 14px;
  margin-bottom: 24px;
}

.igrat-avg-stars {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.igrat-avg-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--igrat-summary-num);
  line-height: 1;
}

.igrat-avg-label {
  font-size: 13px;
  color: var(--igrat-summary-label);
  display: block;
  margin-top: 4px;
}

/* ── Stars ──────────────────────────────────────────────────── */
.igrat-star {
  font-style: normal;
  font-size: 20px;
  line-height: 1;
}

.igrat-star-full  { color: var(--igrat-star-full)  !important; }
.igrat-star-half  { color: var(--igrat-star-half)  !important; }
.igrat-star-empty { color: var(--igrat-star-empty) !important; }

/* Summary stars slightly larger */
.igrat-summary .igrat-star { font-size: 28px; }

/* ── Card list ──────────────────────────────────────────────── */
.igrat-list {
  display: grid;
  gap: 14px;
}

.igrat-card {
  background: var(--igrat-card-bg);
  border: 1px solid var(--igrat-card-border);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: var(--igrat-card-shadow);
}

.igrat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}

.igrat-client {
  font-weight: 600;
  font-size: 15px;
  color: var(--igrat-client-color);
}

.igrat-date {
  font-size: 12px;
  color: var(--igrat-date-color);
  flex-shrink: 0;
}

.igrat-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 12px;
}

.igrat-comment {
  font-size: 14px;
  color: var(--igrat-comment-color);
  line-height: 1.65;
  margin: 0;
  padding: 10px 14px;
  background: var(--igrat-comment-bg);
  border-radius: 8px;
  border-left: 3px solid var(--igrat-comment-border);
  font-style: italic;
}

/* ── Empty / error states ──────────────────────────────────── */
.igrat-empty,
.igrat-error {
  text-align: center;
  padding: 36px 16px;
  color: var(--igrat-empty-color);
  font-size: 15px;
}

.igrat-error { color: var(--igrat-error-color); }

/* ── Owner response block ──────────────────────────────────── */
.igrat-owner-response {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(10, 132, 255, 0.07);
  border-left: 3px solid #0a84ff;
  border-radius: 0 6px 6px 0;
}

.igrat-owner-label {
  font-size: 11px;
  font-weight: 700;
  color: #0a84ff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 4px;
}

.igrat-owner-date {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
  font-size: 11px;
}

/* ── Sort bar ─────────────────────────────────────────────────── */
.igrat-wrapper .igrat-sort-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 20px !important;
  padding: 12px 16px !important;
  background: var(--igrat-card-bg) !important;
  border: 1px solid var(--igrat-card-border) !important;
  border-radius: 14px !important;
  flex-wrap: wrap !important;
  box-shadow: var(--igrat-card-shadow) !important;
}

.igrat-wrapper .igrat-sort-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--igrat-date-color) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  flex-shrink: 0 !important;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

.igrat-wrapper .igrat-sort-buttons {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hard reset of any theme button styles */
.igrat-wrapper .igrat-sort-btn,
.igrat-wrapper .igrat-sort-dir {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border-radius: 100px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  outline: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.igrat-wrapper .igrat-sort-btn {
  padding: 7px 17px !important;
  background: transparent !important;
  border: 1.5px solid var(--igrat-card-border) !important;
  color: var(--igrat-comment-color) !important;
  box-shadow: none !important;
}

.igrat-wrapper .igrat-sort-btn:hover {
  border-color: var(--igrat-star-full) !important;
  color: var(--igrat-star-full) !important;
  background: rgba(245, 158, 11, 0.09) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.igrat-wrapper .igrat-sort-btn.igrat-sort-active {
  background: var(--igrat-star-full) !important;
  border-color: var(--igrat-star-full) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.40) !important;
}

.igrat-wrapper .igrat-sort-btn.igrat-sort-active:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
  transform: translateY(-1px) !important;
}

.igrat-wrapper .igrat-sort-dir {
  padding: 7px 17px !important;
  background: transparent !important;
  border: 1.5px solid var(--igrat-card-border) !important;
  color: var(--igrat-comment-color) !important;
  box-shadow: none !important;
  margin-left: auto !important;
}

.igrat-wrapper .igrat-sort-dir:hover {
  border-color: var(--igrat-client-color) !important;
  color: var(--igrat-client-color) !important;
  background: rgba(127, 127, 127, 0.07) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

@media (prefers-color-scheme: dark) {
  .igrat-wrapper .igrat-sort-btn.igrat-sort-active {
    box-shadow: 0 3px 14px rgba(245, 158, 11, 0.50) !important;
  }
}


.igrat-owner-text {
  margin: 0;
  font-size: 14px;
  color: var(--igrat-comment-color);
  line-height: 1.55;
}