/* ══════════════════════════════════════════════════════════════
   Jabeenz -- Social Proof Toast Notifications
   BEM naming with .jbz- prefix
   z-index 9960 (below QWeb Suite consent at 99999)
   ══════════════════════════════════════════════════════════════ */

/* ── Toast Container ── */
.jbz-social-proof-toast {
  position: fixed;
  bottom: var(--jbz-space-6);
  left: var(--jbz-space-6);
  z-index: 9960;
  max-width: 350px;
  width: calc(100vw - var(--jbz-space-12));
  pointer-events: auto;
}

.jbz-social-proof-toast[hidden] {
  display: none;
}

.jbz-social-proof-toast__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--jbz-space-3);
  padding: var(--jbz-space-4);
  background: var(--jbz-white);
  border-radius: var(--jbz-radius-lg);
  box-shadow: var(--jbz-shadow-xl);
  border: 1px solid var(--jbz-grey-200);
  position: relative;
}

/* ── Thumbnail ── */
.jbz-social-proof-toast__thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--jbz-radius-md);
  overflow: hidden;
  background: var(--jbz-grey-100);
}

.jbz-social-proof-toast__thumb[hidden] {
  display: none;
}

.jbz-social-proof-toast__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Content ── */
.jbz-social-proof-toast__content {
  flex: 1;
  min-width: 0;
}

.jbz-social-proof-toast__message {
  margin: 0;
  font-size: var(--jbz-font-size-sm);
  font-weight: 500;
  color: var(--jbz-dark);
  line-height: var(--jbz-line-height-body);
}

.jbz-social-proof-toast__time {
  display: block;
  margin-top: var(--jbz-space-1);
  font-size: var(--jbz-font-size-xs);
  color: var(--jbz-grey-500);
}

/* ── Close Button ── */
.jbz-social-proof-toast__close {
  position: absolute;
  top: var(--jbz-space-2);
  right: var(--jbz-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--jbz-radius-full);
  cursor: pointer;
  color: var(--jbz-grey-500);
  transition: background var(--jbz-transition-fast), color var(--jbz-transition-fast);
}

.jbz-social-proof-toast__close:hover {
  background: var(--jbz-grey-100);
  color: var(--jbz-dark);
}

.jbz-social-proof-toast__close:focus-visible {
  outline: 2px solid var(--jbz-primary);
  outline-offset: 2px;
}

/* ── Slide Animations ── */
@keyframes jbz-toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes jbz-toast-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.jbz-social-proof-toast--slide-in {
  animation: jbz-toast-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.jbz-social-proof-toast--slide-out {
  animation: jbz-toast-slide-out 0.3s ease forwards;
}

/* ══════════════════════════════════════════════════════════════
   Viewing Count -- Single Product Pages
   ══════════════════════════════════════════════════════════════ */

.jbz-viewing-count {
  display: inline-flex;
  align-items: center;
  gap: var(--jbz-space-2);
  padding: var(--jbz-space-2) var(--jbz-space-3);
  background: var(--jbz-light);
  border-radius: var(--jbz-radius-full);
  font-size: var(--jbz-font-size-xs);
  color: var(--jbz-grey-700);
  font-weight: 500;
}

.jbz-viewing-count[hidden] {
  display: none;
}

.jbz-viewing-count svg {
  color: var(--jbz-primary);
  flex-shrink: 0;
}

.jbz-viewing-count__number {
  font-weight: 700;
  color: var(--jbz-dark);
}

/* ══════════════════════════════════════════════════════════════
   Waitlist / Back-in-Stock Form
   ══════════════════════════════════════════════════════════════ */

.jbz-waitlist-form {
  padding: var(--jbz-space-5);
  background: var(--jbz-grey-100);
  border-radius: var(--jbz-radius-lg);
  border: 1px solid var(--jbz-grey-200);
}

.jbz-waitlist-form__header {
  display: flex;
  align-items: center;
  gap: var(--jbz-space-2);
  margin-bottom: var(--jbz-space-2);
}

.jbz-waitlist-form__header svg {
  flex-shrink: 0;
  color: var(--jbz-primary);
}

.jbz-waitlist-form__title {
  font-family: var(--jbz-font-heading);
  font-size: var(--jbz-font-size-lg);
  font-weight: 700;
  color: var(--jbz-dark);
  margin: 0;
}

.jbz-waitlist-form__desc {
  font-size: var(--jbz-font-size-sm);
  color: var(--jbz-grey-500);
  line-height: var(--jbz-line-height-body);
  margin: 0 0 var(--jbz-space-4);
}

.jbz-waitlist-form__fields {
  margin: 0;
}

.jbz-waitlist-form__input-wrap {
  display: flex;
  gap: var(--jbz-space-2);
}

.jbz-waitlist-form__input {
  flex: 1;
  min-width: 0;
  padding: var(--jbz-space-3) var(--jbz-space-4);
  font-family: var(--jbz-font-body);
  font-size: var(--jbz-font-size-sm);
  color: var(--jbz-dark);
  background: var(--jbz-white);
  border: 2px solid var(--jbz-grey-200);
  border-radius: var(--jbz-radius-md);
  transition: border-color var(--jbz-transition-fast);
}

.jbz-waitlist-form__input::placeholder {
  color: var(--jbz-grey-500);
}

.jbz-waitlist-form__input:focus {
  border-color: var(--jbz-primary);
  box-shadow: 0 0 0 2px rgba(229, 45, 39, 0.15);
}

.jbz-waitlist-form__input:focus:not(:focus-visible) {
  outline: none;
}

.jbz-waitlist-form__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.jbz-waitlist-form__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--jbz-space-2);
  white-space: nowrap;
  flex-shrink: 0;
  padding: var(--jbz-space-3) var(--jbz-space-5);
}

.jbz-waitlist-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.jbz-waitlist-form__submit--loading {
  position: relative;
  color: transparent;
}

.jbz-waitlist-form__submit--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--jbz-white);
  border-radius: var(--jbz-radius-full);
  animation: jbz-waitlist-spin 0.6s linear infinite;
}

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

/* ── Status Messages ── */
.jbz-waitlist-form__status {
  margin-top: var(--jbz-space-3);
  padding: var(--jbz-space-3) var(--jbz-space-4);
  font-size: var(--jbz-font-size-sm);
  border-radius: var(--jbz-radius-md);
  line-height: var(--jbz-line-height-body);
}

.jbz-waitlist-form__status[hidden] {
  display: none;
}

.jbz-waitlist-form__status--success {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.jbz-waitlist-form__status--error {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* ══════════════════════════════════════════════════════════════
   Responsive -- Mobile (< 768px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Move toast above mobile bottom tabs */
  .jbz-social-proof-toast {
    bottom: 76px; /* 60px tabs + 16px gap */
    left: var(--jbz-space-4);
    max-width: calc(100vw - var(--jbz-space-8));
  }

  .jbz-social-proof-toast__inner {
    padding: var(--jbz-space-3);
  }

  /* Waitlist form stacks on small screens */
  .jbz-waitlist-form__input-wrap {
    flex-direction: column;
  }

  .jbz-waitlist-form__submit {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   Reduced Motion
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .jbz-social-proof-toast--slide-in,
  .jbz-social-proof-toast--slide-out {
    animation: none;
  }

  .jbz-waitlist-form__submit--loading::after {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   Print -- Hide non-essential UI
   ══════════════════════════════════════════════════════════════ */

@media print {
  .jbz-social-proof-toast {
    display: none !important;
  }

  .jbz-viewing-count {
    display: none !important;
  }
}