/**
 * PURIVOM — PHASE 4B: ADVANCED CONTENT INTERACTIONS & MICRO-UX
 * Toast system, testimonial/journal carousel refinements, form states,
 * like-button states, and search form clear button. Consumes existing
 * tokens only. Reduced motion is handled by the existing global rule in
 * accessibility.css; a few structural safeguards are added below where
 * a transform is used to convey state rather than pure decoration.
 */

/* ---------------------------------------------------------------------
   TOAST / NOTIFICATION SYSTEM
   --------------------------------------------------------------------- */

.pv-toast-region {
  position: fixed;
  left: 50%;
  bottom: var(--pv-space-xl);
  transform: translateX(-50%);
  z-index: var(--pv-z-toast);
  display: flex;
  justify-content: center;
  width: min(92vw, 420px);
  pointer-events: none;
}

.pv-toast {
  display: flex;
  align-items: center;
  gap: var(--pv-space-sm);
  width: 100%;
  padding: var(--pv-space-sm) var(--pv-space-md);
  border-radius: var(--pv-radius-md);
  background-color: var(--pv-color-obsidian);
  border: var(--pv-border-width) solid var(--pv-border-accent);
  box-shadow: var(--pv-shadow-lg);
  color: var(--pv-text-primary);
  font-size: var(--pv-text-small);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--pv-duration-base) var(--pv-ease-standard),
              transform var(--pv-duration-base) var(--pv-ease-standard);
  pointer-events: auto;
}

.pv-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pv-toast--success {
  border-color: var(--pv-border-accent);
}

.pv-toast--error {
  border-color: #7a3b3b;
}

.pv-toast__text {
  flex: 1;
}

.pv-toast__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: none;
  color: var(--pv-text-secondary);
  font-size: 1.1rem;
  line-height: 1;
}

.pv-toast__close:hover {
  color: var(--pv-text-primary);
}

/* Keep clear of the fixed WhatsApp float / Back-to-Top corners on
   short mobile viewports. */
@media (max-width: 480px) {
  .pv-toast-region {
    bottom: calc(var(--pv-space-md) + 64px);
  }
}

/* ---------------------------------------------------------------------
   TESTIMONIAL CAROUSEL — multi-card scroll-snap slider (Phase 4B fix)
   Uses the same native scroll-snap mechanism as the Journal carousel
   below: touch swipe, trackpad scroll, and momentum all work for free.
   The only decoration added here is a subtle glow on whichever card is
   currently centered in view (set via IntersectionObserver in JS).
   --------------------------------------------------------------------- */

.pv-testimonial-carousel__track {
  position: relative;
  touch-action: pan-y;
}

.pv-testimonial-card {
  transition: border-color var(--pv-duration-base) var(--pv-ease-standard),
              box-shadow var(--pv-duration-base) var(--pv-ease-standard);
}

.pv-testimonial-card.is-active {
  border-color: var(--pv-border-accent);
  box-shadow: var(--pv-shadow-gold-glow);
}

.pv-testimonial-carousel__btn,
.pv-testimonial-carousel__dot {
  transition: border-color var(--pv-duration-base) var(--pv-ease-standard),
              color var(--pv-duration-base) var(--pv-ease-standard),
              transform var(--pv-duration-fast) var(--pv-ease-standard);
}

.pv-testimonial-carousel__btn:active {
  transform: scale(0.94);
}

.pv-testimonial-carousel__dot[aria-selected="true"] {
  background-color: var(--pv-accent);
}

/* ---------------------------------------------------------------------
   JOURNAL CAROUSEL — horizontal scroll-snap slider
   --------------------------------------------------------------------- */

.pv-journal__grid--carousel {
  display: flex;
  gap: var(--pv-space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--pv-space-sm);
  scrollbar-width: thin;
}

.pv-journal__grid--carousel .pv-journal-card {
  flex: 0 0 min(320px, 82vw);
  scroll-snap-align: start;
}

.pv-journal__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pv-space-md);
  margin-top: var(--pv-space-md);
}

.pv-journal__controls .pv-testimonial-carousel__btn {
  /* Reuse the exact same control styling as the testimonial carousel
     for a consistent motion/interaction language across carousels. */
}

.pv-journal__dots {
  display: flex;
  align-items: center;
  gap: var(--pv-space-xs);
}

.pv-journal__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--pv-border-default);
  padding: 0;
  transition: background-color var(--pv-duration-base) var(--pv-ease-standard),
              transform var(--pv-duration-base) var(--pv-ease-standard);
}

.pv-journal__dot[aria-selected="true"] {
  background-color: var(--pv-accent);
  transform: scale(1.3);
}

/* ---------------------------------------------------------------------
   FILTER BAR — active-state transition polish (Phase 3 bar, refined)
   --------------------------------------------------------------------- */

.pv-filter-bar__link {
  position: relative;
}

.pv-filter-bar__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  background-color: var(--pv-accent);
  transform: translateX(-50%);
  transition: width var(--pv-duration-base) var(--pv-ease-standard);
}

.pv-filter-bar__link--active::after {
  width: 60%;
}

/* ---------------------------------------------------------------------
   SEARCH FORM — clear button
   --------------------------------------------------------------------- */

.pv-search-form form {
  position: relative;
}

.pv-search-form__clear {
  position: absolute;
  right: calc(var(--pv-space-sm) + 88px);
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--pv-text-secondary);
  background: none;
  font-size: 1rem;
}

.pv-search-form__clear.is-visible {
  display: inline-flex;
}

.pv-search-form__clear:hover {
  color: var(--pv-text-primary);
}

/* ---------------------------------------------------------------------
   LIKE BUTTON — loading state
   --------------------------------------------------------------------- */

.pv-like-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.pv-like-btn.is-loading .pv-like-btn__icon {
  animation: pv-spin 900ms linear infinite;
}

@keyframes pv-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pv-like-btn.is-loading .pv-like-btn__icon {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   FORM UX STATES — default / focus / invalid / submitting / success
   --------------------------------------------------------------------- */

.pv-form__field.has-error .pv-input {
  border-color: #b35b5b;
}

.pv-form__field__error {
  font-size: var(--pv-text-caption);
  color: #d99b9b;
}

.pv-input:focus-visible {
  border-color: var(--pv-border-accent);
}

.pv-form button[type="submit"] {
  position: relative;
  transition: opacity var(--pv-duration-base) var(--pv-ease-standard);
}

.pv-form.is-submitting button[type="submit"] {
  opacity: 0.75;
  pointer-events: none;
}

.pv-form.is-submitting button[type="submit"]::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--pv-space-xs);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: pv-spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pv-form.is-submitting button[type="submit"]::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   RELATED PRODUCTS / ARTICLES — CTA focus refinement
   --------------------------------------------------------------------- */

.pv-card__title a,
.pv-journal-card__title a {
  transition: color var(--pv-duration-base) var(--pv-ease-standard);
}

.pv-card--interactive:hover .pv-card__title a,
.pv-card--interactive:focus-within .pv-card__title a,
.pv-journal-card:hover .pv-journal-card__title a,
.pv-journal-card:focus-within .pv-journal-card__title a {
  color: var(--pv-text-accent);
}