/* ============================================================
   company-testimonials.css — Tarawell Travels · v3.0 (Golden Night)
   Guest Reviews page. Styles the hero 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 layers themselves are left to template-hero-section.css.
   ============================================================ */

/* ── Hero extras (inside the template hero container) ────── */
.hero-write-review-wrap { margin-top: var(--spacing-6); }

.hero-filter-panel {
  max-width: 60rem;
  margin: var(--spacing-8) auto 0;
  padding: var(--spacing-6);
  border-radius: var(--coy-radius-card);
  background: var(--coy-glass-strong);
  border: 1px solid var(--coy-border-gold);
  backdrop-filter: blur(12px);
  text-align: left;
}
.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-border-soft);
  background: var(--coy-glass);
  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(--coy-border-gold-strong); 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-border-soft);
  background: var(--coy-glass);
  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(--coy-border-gold-strong); color: var(--color-gold-light); }
.hf-btn.active { background: var(--gradient-gold); border-color: transparent; color: var(--color-navy-abyss); box-shadow: var(--shadow-gold); }
.hf-btn.active i { color: var(--color-navy-abyss); }
.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-border-soft);
  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(--coy-border-gold-strong); }

/* ── 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(--coy-surface);
  border: 1px solid var(--coy-border);
  box-shadow: var(--coy-card-shadow);
  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(--coy-border-gold-strong);
  box-shadow: var(--coy-card-shadow-hover);
}
.testimonial-card-mine { border-color: var(--coy-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(--coy-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(--coy-number-glow); }
.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-border-soft);
}
.author-image img {
  width: var(--spacing-12);
  height: var(--spacing-12);
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--coy-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(--color-navy-abyss);
}
.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-border-soft);
  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(--coy-border-gold-strong); 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-border-soft);
  background: var(--coy-glass);
  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(--coy-border-gold-strong); color: var(--color-gold-light); background: var(--coy-glass); }
.page-item.active .page-link { background: var(--gradient-gold); border-color: transparent; color: var(--color-navy-abyss); }
.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(--coy-border-gold);
  color: var(--text-primary);
}
#reviewModal .modal-header,
#reviewModal .modal-footer { border-color: var(--coy-border-soft); }
#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-border-soft);
  background: var(--coy-glass);
  color: var(--text-primary);
}
#reviewModal .form-control:focus { border-color: var(--coy-border-gold-strong); 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(--coy-number-glow); }

/* ── 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(--coy-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; }
  .hero-filter-panel { padding: var(--spacing-4); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-card:hover { transform: none; }
}