/**
 * AFOLAOLA shared feedback/testimonials widget — default styling
 * ============================================================================
 * Deliberately neutral, not any one product's specific theme. Every color
 * and radius is a CSS custom property with a sensible default — override
 * just the variables below in your own stylesheet (loaded after this one)
 * to match your product's actual brand, rather than editing this file.
 *
 * Every class is prefixed "afo-fb-" so it won't collide with anything
 * already in your product's own CSS.
 * ============================================================================
 */
:root {
  --afo-fb-bg: #ffffff;
  --afo-fb-surface: #f7f7f8;
  --afo-fb-border: #e2e2e6;
  --afo-fb-text: #1a1a1f;
  --afo-fb-text-muted: #6b6b76;
  --afo-fb-accent: #4a5cf0;
  --afo-fb-accent-text: #ffffff;
  --afo-fb-star: #d9a441;
  --afo-fb-danger: #c0392b;
  --afo-fb-radius: 12px;
  --afo-fb-font: inherit;
}

.afo-fb-scrim {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0, 0, 0, 0.55);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.afo-fb-scrim.is-open { display: flex; }

.afo-fb-modal {
  background: var(--afo-fb-bg);
  border: 1px solid var(--afo-fb-border);
  border-radius: var(--afo-fb-radius);
  padding: 28px;
  max-width: 460px; width: 100%; max-height: 85vh;
  position: relative;
  display: flex; flex-direction: column;
  font-family: var(--afo-fb-font);
  color: var(--afo-fb-text);
}
.afo-fb-body { overflow-y: auto; }
.afo-fb-close {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  background: none; border: none; color: var(--afo-fb-text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px;
}
.afo-fb-close:hover { color: var(--afo-fb-text); }

.afo-fb-title { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; }
.afo-fb-note { margin: 0 0 18px; font-size: 0.85rem; color: var(--afo-fb-text-muted); }

.afo-fb-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.afo-fb-field label { font-weight: 600; }
.afo-fb-field input[type=text],
.afo-fb-field input[type=email],
.afo-fb-field select,
.afo-fb-field textarea {
  background: var(--afo-fb-surface);
  border: 1px solid var(--afo-fb-border);
  border-radius: 8px;
  color: var(--afo-fb-text);
  padding: 9px 11px;
  font-family: var(--afo-fb-font);
  font-size: 0.9rem;
  width: 100%;
}
.afo-fb-field textarea { resize: vertical; }
.afo-fb-row { display: flex; gap: 12px; }
.afo-fb-row .afo-fb-field { flex: 1; }

.afo-fb-stars { display: flex; gap: 6px; }
.afo-fb-star { background: none; border: none; font-size: 24px; color: var(--afo-fb-border); cursor: pointer; padding: 0; line-height: 1; }
.afo-fb-star.is-filled { color: var(--afo-fb-star); }

.afo-fb-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--afo-fb-text-muted); margin: 12px 0 18px; cursor: pointer; }

.afo-fb-error { color: var(--afo-fb-danger); font-size: 0.85rem; margin: 0 0 14px; }

.afo-fb-submit {
  width: 100%; background: var(--afo-fb-accent); color: var(--afo-fb-accent-text);
  border: none; border-radius: 8px; padding: 12px; font-weight: 700; font-size: 0.95rem;
  cursor: pointer;
}
.afo-fb-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ---- testimonials display ---- */
.afo-fb-placeholder {
  background: var(--afo-fb-surface); border: 1px dashed var(--afo-fb-border); border-radius: var(--afo-fb-radius);
  padding: 36px; text-align: center; color: var(--afo-fb-text-muted); font-size: 0.9rem;
}
.afo-fb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .afo-fb-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .afo-fb-grid { grid-template-columns: 1fr; } }
.afo-fb-card { background: var(--afo-fb-surface); border: 1px solid var(--afo-fb-border); border-radius: var(--afo-fb-radius); padding: 18px; }
.afo-fb-card-stars { color: var(--afo-fb-star); font-size: 13px; margin-bottom: 8px; letter-spacing: 1px; }
.afo-fb-card-msg { font-size: 0.9rem; color: var(--afo-fb-text); line-height: 1.55; margin: 0 0 12px; }
.afo-fb-card-name { font-size: 0.8rem; font-weight: 700; color: var(--afo-fb-text-muted); }