/* ============================================================
   RR AUDIOCAR PRO — Quick View modal
   ============================================================ */

.rrac-qv-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--rrac-z-modal);
  background: var(--rrac-overlay-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rrac-space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rrac-dur-base) var(--rrac-ease-smooth);
}
.rrac-qv-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.rrac-qv-backdrop[hidden] { display: flex !important; }

.rrac-qv-modal {
  position: relative;
  background: var(--rrac-surface);
  border-radius: var(--rrac-radius-3xl);
  box-shadow: var(--rrac-shadow-2xl);
  max-width: 880px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--rrac-font-sans);
  transform: scale(0.96) translateY(8px);
  transition: transform var(--rrac-dur-slow) var(--rrac-ease-spring);
}
.rrac-qv-backdrop[data-open="true"] .rrac-qv-modal {
  transform: scale(1) translateY(0);
}

.rrac-qv-close {
  position: absolute;
  top: var(--rrac-space-3);
  right: var(--rrac-space-3);
  width: 36px; height: 36px;
  border-radius: var(--rrac-radius-full);
  background: var(--rrac-bg-subtle);
  color: var(--rrac-text-soft);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  z-index: 2;
  transition: background var(--rrac-dur-fast), transform var(--rrac-dur-fast);
}
.rrac-qv-close:hover { background: var(--rrac-border); transform: scale(1.05); }

.rrac-qv-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--rrac-space-6);
}

.rrac-qv-body__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--rrac-text-muted);
  font-size: var(--rrac-text-sm);
  font-weight: var(--rrac-weight-medium);
}
.rrac-qv-body__loading::before {
  content: "";
  width: 18px; height: 18px;
  border: 2px solid var(--rrac-ink-200);
  border-top-color: var(--rrac-primary);
  border-radius: 50%;
  animation: rrac-spin 0.8s linear infinite;
  margin-right: var(--rrac-space-2);
}

/* Modal content (renderizado por el endpoint AJAX) */
.rrac-qv__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rrac-space-6);
}
@media (min-width: 768px) {
  .rrac-qv__grid { grid-template-columns: 1fr 1fr; gap: var(--rrac-space-8); }
}
.rrac-qv__main {
  aspect-ratio: 1/1;
  background: var(--rrac-bg-subtle);
  border-radius: var(--rrac-radius-2xl);
  border: 1px solid var(--rrac-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--rrac-space-5);
}
.rrac-qv__main img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity var(--rrac-dur-base) var(--rrac-ease-smooth); }

.rrac-qv__thumbs {
  display: flex;
  gap: var(--rrac-space-2);
  margin-top: var(--rrac-space-3);
  flex-wrap: wrap;
}
.rrac-qv__thumb {
  width: 56px; height: 56px;
  background: var(--rrac-surface);
  border: 1.5px solid var(--rrac-border);
  border-radius: var(--rrac-radius-lg);
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rrac-qv__thumb img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.rrac-qv__thumb.is-active {
  border-color: var(--rrac-primary);
  box-shadow: 0 0 0 2px var(--rrac-brand-100);
}

.rrac-qv__info {
  display: flex;
  flex-direction: column;
  gap: var(--rrac-space-3);
}
.rrac-qv__brand {
  font-size: var(--rrac-text-xs);
  font-weight: var(--rrac-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--rrac-tracking-wider);
  color: var(--rrac-text-muted);
}
.rrac-qv__title {
  margin: 0;
  font-size: var(--rrac-text-3xl);
  font-weight: var(--rrac-weight-bold);
  letter-spacing: var(--rrac-tracking-tight);
  line-height: var(--rrac-leading-tight);
  color: var(--rrac-text);
}
.rrac-qv__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--rrac-text-sm);
  color: var(--rrac-text-muted);
  font-variant-numeric: tabular-nums;
}
.rrac-qv__rating strong { color: var(--rrac-text); font-weight: var(--rrac-weight-bold); }
.rrac-qv__price {
  font-size: var(--rrac-text-4xl);
  font-weight: var(--rrac-weight-black);
  color: var(--rrac-text);
  letter-spacing: var(--rrac-tracking-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rrac-qv__price .amount,
.rrac-qv__price bdi,
.rrac-qv__price .woocommerce-Price-amount {
  font: inherit !important;
  color: inherit !important;
}
.rrac-qv__price del { font-size: var(--rrac-text-md); color: var(--rrac-text-muted) !important; font-weight: var(--rrac-weight-medium); margin-right: var(--rrac-space-2); }
.rrac-qv__price ins { text-decoration: none; color: var(--rrac-primary) !important; }
.rrac-qv__desc {
  font-size: var(--rrac-text-sm);
  color: var(--rrac-text-soft);
  line-height: var(--rrac-leading-relaxed);
}
.rrac-qv__stock {
  display: inline-flex;
  align-items: center;
  gap: var(--rrac-space-2);
  padding: 6px 12px;
  border-radius: var(--rrac-radius-lg);
  font-size: var(--rrac-text-xs);
  font-weight: var(--rrac-weight-bold);
  align-self: flex-start;
}
.rrac-qv__stock.is-in { background: var(--rrac-success-50); color: var(--rrac-success-700); }
.rrac-qv__stock.is-out { background: var(--rrac-danger-50); color: var(--rrac-danger); }
.rrac-qv__stock-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.rrac-qv__meta {
  font-size: var(--rrac-text-xs);
  color: var(--rrac-text-muted);
}

@media (max-width: 640px) {
  .rrac-qv-backdrop { padding: 0; }
  .rrac-qv-modal { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .rrac-qv-body { padding: var(--rrac-space-4); padding-top: var(--rrac-space-12); }
  .rrac-qv__title { font-size: var(--rrac-text-2xl); }
  .rrac-qv__price { font-size: var(--rrac-text-3xl); }
}