/* ============================================================
   company-testimonials.css — Samora Ceylon · v4.0 (Emerald Royale)
   Guest Reviews page. Styles the filter panel, the cards and
   pagination generated by company-testimonials.js, the Bootstrap
   review modal and toasts. All values reference main.css tokens.
   The hero is template-company-hero.css; nothing here touches it.
   ============================================================ */


/* ── Filter panel (below the hero) ───────────────────────── */
.tst-panel {
  max-width: 64rem;
  margin: 0 auto var(--spacing-10);
  padding: var(--spacing-8);
  background: var(--er-white);
  border: 1px solid var(--coy-line);
  border-radius: var(--coy-radius-card);
  box-shadow: var(--shadow-premium);
}
.tst-panel-top { display: flex; gap: var(--spacing-4); align-items: center; }
.tst-panel-top .hero-search-inner { flex: 1; }
.tst-panel-top .btn-write-review { flex: 0 0 auto; gap: var(--spacing-2); }
.tst-panel .hero-search-input { background: var(--er-pearl); }
.tst-panel .hero-exp-select { background: var(--er-pearl); }
.tst-stats .coy-stat-num { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .tst-panel { padding: var(--spacing-5); }
  .tst-panel-top { flex-direction: column; align-items: stretch; }
}

.hero-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.hero-search-icon {
  position: absolute;
  left: var(--spacing-5);
  color: var(--color-gold);
  pointer-events: none;
}
.hero-search-input {
  width: 100%;
  padding: var(--spacing-3-5) var(--spacing-12);
  border-radius: var(--coy-radius-chip);
  border: 1px solid var(--coy-line);
  background: var(--er-white);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: var(--transition-fast);
}
.hero-search-input::placeholder { color: var(--text-muted); }
.hero-search-input:focus { outline: none; border-color: var(--er-gold-antique); box-shadow: var(--glow-gold); }
.hero-search-clear {
  position: absolute;
  right: var(--spacing-4);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.hero-search-clear:hover { color: var(--color-gold); }

.hero-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}
.hf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--coy-radius-chip);
  border: 1px solid var(--coy-line);
  background: var(--er-white);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-elegant);
}
.hf-btn i { color: var(--color-gold); }
.hf-btn:hover { border-color: var(--er-gold-antique); color: var(--color-gold-light); }
.hf-btn.active { background: var(--gradient-gold); border-color: transparent; color: var(--text-on-accent); box-shadow: var(--shadow-gold); }
.hf-btn.active i { color: var(--text-on-accent); }
.hf-btn:focus-visible,
.hero-exp-select:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

.hero-exp-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4);
  margin-top: var(--spacing-5);
}
.hero-exp-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-1-5);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}
.hero-exp-select {
  width: 100%;
  padding: var(--spacing-2-5) var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--coy-line);
  background: var(--color-navy-card);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.hero-exp-select:focus { outline: none; border-color: var(--er-gold-antique); }

/* ── Stats ───────────────────────────────────────────────── */
.tst-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 54rem; margin: 0 auto; }

/* ── Toolbar / loading / empty ───────────────────────────── */
.testimonials-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-8);
}
.filtered-count {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.filtered-count strong { color: var(--color-gold-light); }
.tst-loading,
.tst-empty { text-align: center; padding: var(--spacing-16) 0; color: var(--text-muted); }
.tst-loading .spinner-border { color: var(--color-gold); }
.tst-empty h4 { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--text-primary); }
.tst-empty .coy-card-icon { margin: 0 auto var(--spacing-5); }

/* ── Review cards ────────────────────────────────────────── */
.testimonial-item { display: flex; }
.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--spacing-8) var(--spacing-7) var(--spacing-7);
  border-radius: var(--coy-radius-card);
  background: var(--er-white);
  border: 1px solid var(--coy-line);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-elegant);
  overflow: hidden;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-6);
  font-family: var(--font-display);
  font-size: var(--text-8xl);
  line-height: var(--leading-none);
  color: rgba(var(--color-gold-rgb), 0.16);
  pointer-events: none;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  border-color: var(--er-gold-antique);
  box-shadow: var(--shadow-premium);
}
.testimonial-card-mine { border-color: var(--border-gold); }
.testimonial-content { display: flex; flex-direction: column; flex: 1; }

.testimonial-tour-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  align-self: flex-start;
  max-width: 85%;
  padding: var(--spacing-1) var(--spacing-3);
  margin-bottom: var(--spacing-4);
  border-radius: var(--coy-radius-chip);
  border: 1px solid var(--border-gold);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold);
}
.testimonial-rating { margin-bottom: var(--spacing-4); color: var(--color-gold); letter-spacing: var(--ls-wider); }
.testimonial-rating i { text-shadow: var(--glow-soft); }
.testimonial-text {
  flex: 1;
  margin: 0 0 var(--spacing-6);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}

.author-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--coy-line);
}
.author-image img {
  width: var(--spacing-12);
  height: var(--spacing-12);
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--border-gold);
}
.author-name {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.author-location {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.author-location i { margin-right: var(--spacing-1-5); color: var(--color-gold); }

.testimonial-mine-badge {
  position: absolute;
  top: var(--spacing-4);
  left: var(--spacing-4);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--coy-radius-chip);
  background: var(--gradient-gold);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--text-on-accent);
}
.testimonial-mine-actions { display: flex; gap: var(--spacing-3); margin-top: var(--spacing-5); }
.btn-mine-edit,
.btn-mine-delete,
.btn-danger-text {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);
  padding: var(--spacing-1-5) var(--spacing-4);
  border-radius: var(--coy-radius-chip);
  border: 1px solid var(--coy-line);
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.btn-mine-edit:hover { border-color: var(--er-gold-antique); color: var(--color-gold-light); }
.btn-mine-delete:hover,
.btn-danger-text:hover { border-color: var(--color-error); color: var(--color-error); }

/* ── Pagination ──────────────────────────────────────────── */
.pagination-container { display: flex; justify-content: center; margin-top: var(--spacing-12); }
.pagination { display: flex; gap: var(--spacing-2); list-style: none; padding: 0; margin: 0; }
.page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-10);
  height: var(--spacing-10);
  padding: 0 var(--spacing-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--coy-line);
  background: var(--er-white);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.page-item .page-link:hover { border-color: var(--er-gold-antique); color: var(--color-gold-light); background: var(--er-white); }
.page-item.active .page-link { background: var(--gradient-gold); border-color: transparent; color: var(--text-on-accent); }
.page-item.disabled .page-link { opacity: 0.4; pointer-events: none; }

/* ── Review modal (Bootstrap) ────────────────────────────── */
#reviewModal .modal-content {
  border-radius: var(--coy-radius-card);
  background: var(--color-navy-card);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
}
#reviewModal .modal-header,
#reviewModal .modal-footer { border-color: var(--coy-line); }
#reviewModal .modal-title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--text-primary); }
#reviewModal .modal-title i { color: var(--color-gold); }
#reviewModal .form-label {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}
#reviewModal .form-label.required::after { content: ' *'; color: var(--color-gold-light); }
#reviewModal .form-control {
  border-radius: var(--radius-lg);
  border: 1px solid var(--coy-line);
  background: var(--er-white);
  color: var(--text-primary);
}
#reviewModal .form-control:focus { border-color: var(--er-gold-antique); box-shadow: var(--glow-gold); }
#reviewModal .form-control::placeholder { color: var(--text-muted); }
.review-form-note { font-size: var(--text-sm); color: var(--text-muted); }
.review-text-counter { margin-top: var(--spacing-1); text-align: right; font-size: var(--text-xs); color: var(--text-muted); }
.review-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.review-form-alert {
  margin-top: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-error);
  background: var(--color-error-light);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.star-input { display: flex; gap: var(--spacing-1); }
.star-input-btn {
  border: 0;
  background: transparent;
  font-size: var(--text-2xl);
  color: var(--color-gold);
  cursor: pointer;
  transition: var(--transition-fast);
}
.star-input-btn:hover,
.star-input-btn.active { transform: scale(1.12); text-shadow: var(--glow-soft); }

/* ── Toasts ──────────────────────────────────────────────── */
.testimonial-toast-container {
  position: fixed;
  right: var(--spacing-6);
  bottom: var(--spacing-6);
  z-index: var(--z-index-toast);
  display: grid;
  gap: var(--spacing-3);
}
.testimonial-toast {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-xl);
  background: var(--color-navy-card);
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-xl);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(var(--spacing-3));
  transition: var(--transition-elegant);
}
.testimonial-toast.show { opacity: 1; transform: none; }
.testimonial-toast-success i { color: var(--color-success); }
.testimonial-toast-error { border-color: var(--color-error); }
.testimonial-toast-error i { color: var(--color-error); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-exp-row { grid-template-columns: 1fr; }
  .tst-stats { grid-template-columns: 1fr; }
  .tst-panel .hero-filter-row { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-card:hover { transform: none; }
}