/* =============================================================================
   REC DETAIL MODAL — v2 (the build-collection treatment), shared.
   ---------------------------------------------------------------------------
   The collection builder's rec popup, lifted out of build-collection.css so
   profile, my-recs and member-home can use the same thing. What makes it the
   v2 and not the old modal: the photo is the TOP of the card rather than a
   stripe through its middle, the name and the facts are pinned while only the
   body scrolls, the comments live behind a <details>, and the whole card is a
   centred pane that becomes a bottom sheet under 600px.

   HOOK: .rrd2 on the modal root, NOT .rec-detail-modal. That is load-bearing.
   site-chrome.css carries a large #recDetailModal block (with !important) for
   the OLD hero-chip markup; it is scoped to #recDetailModal.rec-detail-modal,
   so dropping that one class is what keeps the old rules off this markup.
   Pages still on the old modal keep the class and are untouched.

   Rules below are the builder's, in the builder's source order — the later
   passes deliberately override the earlier ones, so the order is the design.
   Every selector is scoped to .rrd2, so nothing here can reach the rest of a
   page (notably .saved-by-*, .vis-pill and .rec-comment-*, which pages also
   use outside the modal).
   ========================================================================= */

@keyframes recDetailPop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes recDetailSheet {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideUpSheet {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}

.rrd2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.rrd2.hidden {
  display: none;
}

.rrd2 .rec-detail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.rrd2 .rec-detail-panel {
  position: relative;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background: #ffffff;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease;
  overflow: hidden;
}

.rrd2 .rec-detail-header {
  padding: 24px;
  border-bottom: 2px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #ffffff;
}

.rrd2 .rec-detail-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  flex: 1;
  padding-right: 16px;
}

.rrd2 .rec-detail-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.rrd2 .rec-detail-close:hover {
  transform: rotate(90deg);

}

.rrd2 .rec-detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.rrd2 .rec-detail-image-wrap {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #0066ff, #c27aff);
}

.rrd2 .rec-detail-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rrd2 .rec-detail-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
}

.rrd2 .rec-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: #374151;
}

.rrd2 .rec-detail-row i {
  color: #6b7280;
  width: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.rrd2 .rec-detail-row a {
  color: #4b5bd5;
  text-decoration: none;
  font-weight: 500;
}

.rrd2 .rec-detail-row a:hover {
  text-decoration: underline;
}

.rrd2 .rec-detail-section {
  margin-bottom: 28px;
}

.rrd2 .rec-detail-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 12px 0;
}

.rrd2 .rec-detail-section p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}

.rrd2 .rec-detail-notes {
  width: 90%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.rrd2 .rec-detail-notes:focus {
  outline: none;
  border-color: #4b5bd5;
  box-shadow: 0 0 0 3px rgba(75, 91, 213, 0.1);
}

.rrd2 .rec-detail-save-btn {
  padding: 10px 18px;
  background: linear-gradient(135deg, #0066ff, #c27aff);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.rrd2 .rec-detail-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.rrd2 .vis-pill {
  flex: 1;
  padding: 10px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #6b7280;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.rrd2 .vis-pill:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.rrd2 .vis-pill.active {
  background: linear-gradient(135deg, #0066ff, #c27aff);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(194, 122, 255, 0.3);
}

.rrd2 .saved-by-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rrd2 .saved-by-row.hidden {
  display: none;
}

.rrd2 .saved-by-text {
  font-size: 0.9rem;
  color: #6b7280;
}

.rrd2 .rec-detail-actions {
  display: flex;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid #f3f4f6;
}

.rrd2 .rec-detail-action-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.rrd2 .rec-detail-action-btn.primary {
  background: linear-gradient(135deg, #0066ff, #c27aff);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(194, 122, 255, 0.3);
}

.rrd2 .rec-detail-action-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.rrd2 .rec-detail-action-btn.secondary {
  background: #f9fafb;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.rrd2 .rec-detail-action-btn.secondary:hover {
  background: #f3f4f6;
}

.rrd2 .rec-detail-content::-webkit-scrollbar {
  width: 6px;
}

.rrd2 .rec-detail-content::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.rrd2 .rec-detail-content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

.rrd2 .rec-detail-content::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

@media (max-width: 768px) {
.rrd2 {
    align-items: flex-end;
    justify-content: center;
  }
.rrd2 .rec-detail-panel {
    width: 100vw;
    height: 92vh;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
    animation: slideUpSheet 0.3s ease;
  }
.rrd2 .rec-detail-header {
    padding: 20px 16px;
  }
.rrd2 .rec-detail-header h2 {
    font-size: 1.3rem;
  }
.rrd2 .rec-detail-content {
    padding: 20px 16px;
  }
}

.rrd2 .saved-by-avatars {
  display: flex;
  margin-right: 8px;
}

.rrd2 .saved-by-avatar-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #0066ff, #c27aff);
  margin-left: -8px;
  position: relative;
}

.rrd2 .saved-by-avatar-ring:first-child {
  margin-left: 0;
}

.rrd2 .saved-by-avatar-inner {
  /* border-box, so the .monogram variant's 1px border sits inside the ring
     rather than 2px outside it: this page has no universal reset, and the
     ring only showed on the top and left as a result. */
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rrd2 .saved-by-avatar-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rrd2 .saved-by-avatar-inner.monogram {
  font-size: 13px;
  font-weight: 600;
  color: #000e33;

  background:
    radial-gradient(circle at top left, rgba(0,102,255,0.22), transparent 45%),
    radial-gradient(circle at top right, rgba(194,122,255,0.28), transparent 45%),
    linear-gradient(135deg, #eef4ff 0%, #f5efff 55%, #f8f3ff 100%);

  border: 1px solid rgba(194,122,255,0.16);
}

.rrd2 .saved-by-friends-link {
  color: #4b5bd5;
  cursor: pointer;
  font-weight: 600;
}

.rrd2 .saved-by-friends-link:hover {
  text-decoration: underline;
}

.rrd2 .rec-comments-panel {
  margin-top: 10px;
  border-radius: 22px;
  border: 1px solid rgba(107, 95, 255, 0.16);
  background: rgba(107, 95, 255, 0.04);
  box-shadow: 0 14px 30px rgba(10, 12, 30, 0.10);
  overflow: hidden;
}

.rrd2 .rec-comments-scroll {
  max-height: 220px;
  overflow-y: auto;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rrd2 .rec-comments-scroll::-webkit-scrollbar {
  width: 10px;
}

.rrd2 .rec-comments-scroll::-webkit-scrollbar-thumb {
  background: rgba(107, 95, 255, 0.18);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.rrd2 .rec-comments-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}

.rrd2 .rec-comments-loading,
.rrd2 .rec-comments-empty,
.rrd2 .rec-comments-error {
  text-align: center;
  padding: 14px 0 8px;
  color: rgba(20, 20, 30, 0.55);
  font-size: 0.92rem;
}

.rrd2 .rec-comment-row {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(107, 95, 255, 0.14);
  box-shadow: 0 10px 20px rgba(10, 12, 30, 0.08);
}

.rrd2 .rec-comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #0066ff 0%, #c27aff 100%) border-box;
}

.rrd2 .rec-comment-avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  font-size: 14px;
  color: #000e33;
  text-transform: uppercase;

  border: 1px solid transparent;

  background:
    linear-gradient(135deg, #eef4ff 0%, #f5efff 55%, #f8f3ff 100%) padding-box,
    linear-gradient(135deg, #0066ff 0%, #c27aff 100%) border-box;

  overflow: hidden;
}

.rrd2 .rec-comment-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rrd2 .rec-comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.rrd2 .rec-comment-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rrd2 .rec-comment-name {
  font-weight: 800;
  font-size: 0.92rem;
  color: #000e33;
  line-height: 1.1;
  margin: 0;
  text-decoration: none;
}

.rrd2 .rec-comment-name:hover {
  color: #4b5bd5;
}

.rrd2 .rec-comment-time {
  font-size: 11px;
  color: rgba(20, 20, 30, 0.45);
  line-height: 1;
}

.rrd2 .rec-comment-text {
  color: rgba(20, 20, 30, 0.82);
  font-size: 0.93rem;
  margin: 0;
  margin-top: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.rrd2 .rec-comment-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rrd2 .rec-comment-delete-btn,
.rrd2 .rec-comment-report-btn {
  border: 1px solid rgba(20, 20, 30, 0.10);
  background: rgba(255, 255, 255, 0.75);
  color: rgba(20, 20, 30, 0.70);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.rrd2 .rec-comment-delete-btn:hover {
  background: rgba(255, 107, 107, 0.10);
  border-color: rgba(255, 107, 107, 0.25);
  transform: translateY(-1px);
}

.rrd2 .rec-comment-report-btn {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rrd2 .rec-comment-report-btn:hover {
  background: rgba(107, 95, 255, 0.10);
  border-color: rgba(107, 95, 255, 0.22);
  transform: translateY(-1px);
}

.rrd2 .rec-comment-compose {
  display: flex;
  flex-direction: column; /* ✅ Stack vertically */
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(107, 95, 255, 0.14);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.rrd2 .rec-comment-textarea {
  width: 90%;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(107, 95, 255, 0.18);
  background: rgba(255, 255, 255, 0.9);
  color: #000e33;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  resize: none;
  min-height: 46px;
  max-height: 110px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.rrd2 .rec-comment-textarea::placeholder {
  color: rgba(20, 20, 30, 0.35);
}

.rrd2 .rec-comment-textarea:focus {
  outline: none;
  border-color: #0066ff;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.rrd2 #recCommentSubmitBtn.rec-detail-primary-btn {
  margin-top: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0066ff, #c27aff);
  color: white;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  width: 95%; /* ✅ Full width button */
  align-self: stretch; /* ✅ Stretch to full width */
}

.rrd2 #recCommentSubmitBtn.rec-detail-primary-btn:hover:not(:disabled) {
  opacity: 0.9;
  box-shadow: 0 0 12px rgba(194, 122, 255, 0.6), 0 0 6px rgba(0, 102, 255, 0.6);
}

.rrd2 #recCommentSubmitBtn.rec-detail-primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 520px) {
.rrd2 .rec-comment-compose {
    grid-template-columns: 1fr;
  }
.rrd2 #recCommentSubmitBtn.rec-detail-primary-btn {
    width: 100%;
  }
}

.rrd2 .image-placeholder-gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,#0066ff,#c27aff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.92);
  font-size: 2rem;
}

.rrd2 .rec-detail-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.rrd2 #recDetailImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rrd2 .rec-detail-panel {
  /* It met the viewport edge as a hard square with a black 0.3 shadow. */
  border-radius: 18px 0 0 18px;
  box-shadow: -18px 0 52px -14px rgba(17, 26, 77, 0.30);
}

.rrd2 .rec-detail-header {
  padding: 16px 20px;
  /* 2px of #f3f4f6 reads as a gap in the panel rather than a rule. */
  border-bottom: 1px solid #ecedf3;
  gap: 14px;
}

.rrd2 .rec-detail-header h2 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: #000e33;
}

.rrd2 .rec-detail-close {
  width: 34px;
  height: 34px;
  background: #f3f4f6;
}

.rrd2 .rec-detail-content { padding: 20px; }

.rrd2 .rec-detail-info {
  gap: 10px;
  padding: 14px 16px;
  background: #f7f8fb;
  border: 1px solid #ecedf3;
  border-radius: 14px;
  margin-bottom: 20px;
}

.rrd2 .rec-detail-row {
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: #46506d;
}

.rrd2 .rec-detail-row > i {
  width: 16px;
  text-align: center;
  color: #8b93a7;
  flex: none;
}

.rrd2 .rec-detail-panel {
  border-radius: 20px 0 0 20px;
  box-shadow: -20px 0 60px -18px rgba(17, 26, 77, 0.32);
}

.rrd2 .rec-detail-content { padding: 0 22px 22px; }

.rrd2 .rec-detail-image-wrap {
  margin: 0 -22px 18px;
  width: auto;
  aspect-ratio: 3 / 2;
  border-radius: 0;
}

.rrd2 .rec-detail-header {
  padding: 14px 22px;
  border-bottom: none;
}

.rrd2 .rec-detail-header h2 {
  font-size: 1.18rem;
  font-weight: 700;
}

.rrd2 .rec-detail-close {
  width: 32px;
  height: 32px;
  background: #f2f3f7;
  color: #6b7280;
}

.rrd2 .rec-detail-close:hover { background: #e8eaf0; }

.rrd2 .rec-detail-info {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 0;
  margin-bottom: 22px;
}

.rrd2 .rec-detail-row {
  padding: 11px 0;
  border-bottom: 1px solid #f1f2f6;
  font-size: 0.9rem;
  color: #46506d;
  gap: 12px;
}

.rrd2 .rec-detail-row:last-child { border-bottom: none; }

.rrd2 .rec-detail-row > i { width: 15px; color: #a6acbe; }

.rrd2 .rec-detail-content h3 {
  margin: 0 0 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7280;
}

.rrd2 {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.rrd2 .rec-detail-overlay {
  background: rgba(10, 14, 40, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rrd2 .rec-detail-panel {
  width: min(560px, 92vw);
  height: auto;
  /* Not 100vh: as a centred card it has to fit the viewport with the page
     visible around it, and .rec-detail-content already scrolls inside. */
  max-height: min(86vh, 760px);
  border-radius: 22px;
  box-shadow: 0 40px 100px -30px rgba(17, 26, 77, 0.55);
  /* slideInRight was written for a drawer coming off the right edge. */
  animation: recDetailPop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.rrd2 .rec-detail-image-wrap {
  border-radius: 0;
  aspect-ratio: 5 / 2;
}

@media (prefers-reduced-motion: reduce) {
.rrd2 .rec-detail-panel { animation: none; }
}

@media (max-width: 600px) {
.rrd2 { padding: 0; align-items: flex-end; }
.rrd2 .rec-detail-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    animation: recDetailSheet 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.rrd2 .rec-detail-info {
  display: flex;
  /* The base rule is a column; without this the chips stack. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-bottom: 16px;
}

.rrd2 .rec-detail-row {
  padding: 0;
  border-bottom: none;
  gap: 7px;
  font-size: 0.88rem;
}

.rrd2 .rec-detail-row:has(#recDetailAddress) {
  flex-basis: 100%;
  margin-bottom: 2px;
}

.rrd2 .rec-detail-notes {
  width: 100%;
  /* content-box read min-height as text and rendered it 26px taller. */
  box-sizing: border-box;
  min-height: 56px;
  padding: 9px 11px;
  font-size: 0.88rem;
  margin-bottom: 8px;
}

.rrd2 .rec-detail-save-btn {
  padding: 7px 14px;
  font-size: 0.84rem;
}

.rrd2 .rec-detail-section { margin-bottom: 18px; }

.rrd2 .vis-pill {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  font-size: 0.86rem;
}

.rrd2 .rec-comments-details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  border-top: 1px solid #f1f2f6;
  border-bottom: 1px solid #f1f2f6;
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7280;
}

.rrd2 .rec-comments-details > summary::-webkit-details-marker { display: none; }

.rrd2 .rec-comments-details > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid #a6acbe;
  border-bottom: 2px solid #a6acbe;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}

.rrd2 .rec-comments-details[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.rrd2 .rec-comments-details > summary:hover { color: #46506d; }

.rrd2 .rec-comments-details > summary:focus-visible {
  outline: 2px solid #4b5bd5;
  outline-offset: 2px;
}

.rrd2 .rec-comments-count {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #6b7280;
  background: #f1f2f6;
  border-radius: 999px;
  padding: 1px 7px;
}

.rrd2 .rec-comments-count:empty { display: none; }

.rrd2 .rec-comments-details .rec-comments-panel { margin-top: 12px; }

.rrd2 .rec-detail-actions {
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
}

.rrd2 .rec-detail-action-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 14px;
  font-size: 0.86rem;
}

@media (prefers-reduced-motion: reduce) {
.rrd2 .rec-comments-details > summary::after { transition: none; }
}

.rrd2 .rec-detail-image-wrap { aspect-ratio: 3 / 1; }

.rrd2 .rec-detail-section { margin-bottom: 14px; }

.rrd2 .rec-detail-section:last-child { margin-bottom: 0; }

.rrd2 .saved-by-text { font-size: 0.85rem; }

.rrd2 .rec-detail-content h3 { margin-bottom: 6px; }

.rrd2 .rec-detail-content .rec-detail-section:has(#recDetailNotesInput) {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
}

.rrd2 .rec-detail-content .rec-detail-section:has(#recDetailNotesInput) > h3 {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.rrd2 #recDetailSaveNoteButton {
  grid-column: 2;
  grid-row: 1;
}

.rrd2 #recDetailNotesInput {
  grid-column: 1 / span 2;
  grid-row: 2;
  margin: 6px 0 0;
}

.rrd2 .rec-detail-section { margin-bottom: 12px; }

.rrd2 .rec-detail-panel { max-height: min(88vh, 800px); }

.rrd2 .rec-detail-panel {
  --rdx-ink: #000e33;
  --rdx-body: #46506d;
  --rdx-muted: #6b7280;
  --rdx-line: rgba(0, 14, 51, 0.08);
  --rdx-grad: linear-gradient(103deg, #0066ff 0%, #6a5bff 48%, #c27aff 100%);
  font-family: "Plus Jakarta Sans", 'Helvetica Neue', Arial, sans-serif;
  color: var(--rdx-body);
}

.rrd2 .rec-detail-image-wrap {
  position: relative;
  flex: none;
  width: 100%;
  margin: 0;
  aspect-ratio: 5 / 2;
  border-radius: 0;
  overflow: hidden;
  background: var(--rdx-grad);
}

.rrd2 .rec-detail-image-wrap .image-placeholder-gradient {
  border-radius: 0 !important;
}

.rrd2 .rec-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--rdx-ink);
  box-shadow: 0 2px 10px rgba(0, 14, 51, 0.22);
}

.rrd2 .rec-detail-close:hover {
  background: #ffffff;
}

.rrd2 .rec-detail-panel .rec-detail-header {
  display: block;
  padding: 18px 22px 0;
  border-bottom: none;
}

.rrd2 .rec-detail-header h2 {
  font-family: "Outfit", 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--rdx-ink);
}

.rrd2 .rec-detail-content { padding: 10px 22px 22px; }

.rrd2 .rec-detail-info { margin-bottom: 18px; }

.rrd2 .rec-detail-row { color: var(--rdx-body); }

.rrd2 .rec-detail-row:has(#recDetailAddress) {
  color: var(--rdx-muted);
  font-size: 0.9rem;
}

.rrd2 .rec-detail-row > i { color: #9aa2b8; }

.rrd2 #recDetailRatingRow > i { color: #f5a623; }

.rrd2 #recDetailWebsite {
  color: #0066ff;
  font-weight: 600;
  text-decoration: none;
}

.rrd2 #recDetailWebsite:hover { text-decoration: underline; }

.rrd2 .rec-detail-content h3,
.rrd2 .rec-comments-details > summary {
  font-family: "Outfit", 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.rrd2 #recDetailDescription {
  color: var(--rdx-body);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

.rrd2 .rec-detail-notes {
  border-color: #e7e9f2;
  border-radius: 12px;
  background: #fbfcfe;
  color: var(--rdx-body);
  font-family: inherit;
}

.rrd2 .rec-detail-notes:focus {
  border-color: #6a5bff;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(106, 91, 255, 0.14);
}

.rrd2 .rec-detail-save-btn {
  background: var(--rdx-grad);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
}

.rrd2 .vis-pill {
  border-radius: 999px;
  border-color: #e7e9f2;
  font-family: inherit;
  font-weight: 600;
  color: var(--rdx-muted);
}

.rrd2 .vis-pill.active {
  background: var(--rdx-grad);
  border-color: transparent;
  color: #fff;
}

.rrd2 .rec-detail-action-btn {
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
}

.rrd2 .rec-detail-action-btn.secondary {
  border: 1px solid #e7e9f2;
  background: #fff;
  color: var(--rdx-body);
}

.rrd2 .rec-detail-action-btn.secondary:hover {
  border-color: #cdd4e8;
  background: #fafbff;
}

.rrd2 .rec-detail-action-btn.primary {
  background: var(--rdx-grad);
  border: none;
  color: #fff;
}

.rrd2 .rec-comments-details > summary {
  border-top: 1px solid var(--rdx-line);
  border-bottom: none;
  padding: 12px 2px;
}

.rrd2 .rec-detail-actions {
  border-top: 1px solid var(--rdx-line);
  padding-top: 14px;
  margin-top: 4px;
}

.rrd2 .rec-comments-count {
  font-family: inherit;
  background: #eef1fe;
  color: #3a46a8;
}

.rrd2 .rec-comments-loading,
.rrd2 .rec-comments-empty,
.rrd2 .rec-comments-error {
  color: #6b7280;
}

.rrd2 .rec-detail-panel .rec-detail-header {
  /* Deliberately NOT position:relative — that would make this the close
     button's offset parent and land it on the white, 14px below the photo it
     is supposed to sit on. A flex item takes z-index without being
     positioned, which is all this needs. */
  z-index: 1;
  flex: none;
  padding: 16px 22px 12px;
  background: #ffffff;
  border-bottom: 1px solid var(--rdx-line);
}

.rrd2 .rec-detail-header .rec-detail-info {
  margin-bottom: 0;
  margin-top: 8px;
}

.rrd2 .rec-detail-content { padding: 16px 22px 22px; }

.rrd2 .saved-by-row {
  font-size: 0.85rem;
  color: var(--rdx-muted);
}


/* =============================================================================
   Page adaptations — what the three pages need that the builder did not.
   ========================================================================= */

/* The builder's JS hid each fact row itself (#recDetailRatingRow and friends).
   profile/my-recs/member-home instead EMPTY the value and lean on an :empty
   rule, because their old layout drew these as hero chips. So the row here
   goes when its value does — otherwise a rec with no price renders a lone
   wallet icon. */
.rrd2 .rec-detail-row:has(> span:empty){ display: none; }

/* The rating value arrives as innerHTML WITH its own <i class="fa-star">, so
   this row carries no icon of its own — it would be a second star. */
.rrd2 .rec-detail-row--rating > span > i{
  color: #f5a623;
  margin-right: 4px;
}

/* "Rec by" card (profile only). Lifted from the site-chrome block, which no
   longer reaches this markup, and re-pointed at the v2 tokens. */
.rrd2 .rec-detail-recby{
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--rdx-line);
  background: linear-gradient(135deg, rgba(0,102,255,.09), rgba(194,122,255,.09));
  border-radius: 16px;
  margin-bottom: 16px;
}
.rrd2 .rd-recby-av{
  width: 40px; height: 40px; border-radius: 999px; flex: none; padding: 2px;
  background: var(--rdx-grad);
  display: flex; align-items: center; justify-content: center;
}
.rrd2 .rd-recby-av-inner{
  width: 100%; height: 100%; border-radius: 999px; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at top left, rgba(0,102,255,0.22), transparent 45%),
    radial-gradient(circle at top right, rgba(194,122,255,0.28), transparent 45%),
    linear-gradient(135deg, #eef4ff 0%, #f5efff 55%, #f8f3ff 100%);
  color: #000e33; font-weight: 700; font-size: 14px;
}
.rrd2 .rd-recby-av-inner img{ width: 100%; height: 100%; object-fit: cover; }
.rrd2 .rd-recby-who{ line-height: 1.3; min-width: 0; }
.rrd2 .rd-recby-lbl{
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--rdx-muted); font-weight: 700;
}
.rrd2 .rd-recby-nm{
  font-size: 15px; font-weight: 700; color: var(--rdx-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rrd2 .rd-recby-meta{
  margin-left: auto; text-align: right; flex: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.rrd2 .rd-recby-vis{
  display: inline-flex; align-items: center; gap: 5px;
  background: #f0ebff; color: #7a54d1; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; font-size: 11px;
}
.rrd2 .rd-recby-vis.rd-recby-vis-public{
  background: transparent; color: #9aa0b8; padding-left: 0;
}
.rrd2 .rd-recby-when{ font-size: 12px; color: #9aa0b8; }

/* The place's editorial blurb, under About (profile only). */
.rrd2 .rec-detail-editorial{
  margin: 8px 0 0;
  font-size: 0.86rem; line-height: 1.55;
  color: var(--rdx-muted);
}
.rrd2 .rec-detail-editorial:empty{ display: none; }

/* Visibility help text — the builder's toggle had no caption. */
.rrd2 .rec-detail-visibility-help{
  margin: 8px 0 0;
  font-size: 0.78rem; line-height: 1.45;
  color: var(--rdx-muted);
}

/* The pages' visibility toggle keeps its own class name. */
.rrd2 .rec-detail-visibility-toggle{
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* Guest prompt that profile.js writes into .rec-comments-section wholesale. */
.rrd2 .comments-member-prompt{
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px 0 4px;
  font-size: 0.88rem; color: var(--rdx-body);
}
.rrd2 .comments-member-actions{ display: flex; gap: 8px; }

/* The uploaded-photo strip inserts itself after #recDetailSavedByRow, so it
   lands inside the scroller with no markup of its own here. */
.rrd2 .rec-photo-strip{ margin: 4px 0 14px; }

/* An <hr> between sections would double up with the section borders the v2
   card already draws. */
.rrd2 .rec-detail-divider{ display: none; }

/* All three pages empty #recDetailDescription when there is nothing to say,
   so the heading should go with it rather than stand over a blank. */
.rrd2 #recDetailDescSection:has(#recDetailDescription:empty){ display: none; }

/* In the builder #recDetailWebsite was a link in the facts list, so it was
   styled blue. Here it is one of the action buttons and has to read as one. */
.rrd2 a#recDetailWebsite.rec-detail-action-btn{
  color: var(--rdx-body);
  font-weight: 600;
  text-decoration: none;
}

/* profile.js appends its own .rec-detail-image-ph into the image wrap when no
   photo renders (it looks for .rec-detail-image and falls back to the <img>'s
   parent, which here is .rec-detail-image-wrap). Give it the builder's
   placeholder look — site-chrome's rule is scoped to the old markup now. */
.rrd2 .rec-detail-image-wrap .rec-detail-image-ph{
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--rdx-grad, linear-gradient(103deg,#0066ff 0%,#6a5bff 48%,#c27aff 100%));
  color: rgba(255,255,255,.92);
  font-size: 2rem;
}

/* updateRecDetailSaveButtonState() flips .saved on #recDetailSaveBtn, which is
   .rec-detail-action-btn.primary here rather than the old .rec-detail-actbtn —
   so the "already saved" state needs restating against the v2 class. It has to
   outrank .primary, hence the id. */
.rrd2 #recDetailSaveBtn.rec-detail-action-btn.saved{
  background: #f4f6fa;
  color: var(--rdx-body);
  border: 1px solid var(--rdx-line);
  box-shadow: none;
}
.rrd2 #recDetailSaveBtn.rec-detail-action-btn.saved i{ color: #2fb47a; }

/* rgba(20,20,30,.45) composites to 2.95:1 at 11px. The builder has the same
   rule; this is the one place the lift is not faithful on purpose. */
.rrd2 .rec-comment-time{ color: #6b7280; }


/* =============================================================================
   Page-stylesheet overrides.
   The three pages' own stylesheets still carry #recDetailModal rules written
   for the old card, and an id outranks .rrd2, so they keep applying to this
   markup. Most of that is worth keeping — their saved-by avatars, gradient
   rings and monograms are richer than the builder's. Only the cases where the
   old spacing fights the v2 card are answered here, at id+class specificity.
   ========================================================================= */

/* The saved-by row was spaced for a card that had no section padding of its
   own (margin: 20px 0 8px; padding: 0 28px). Inside a v2 section it indents
   twice. Their padding is !important, so this has to be. */
#recDetailModal.rrd2 .saved-by-row{
  margin: 0;
  padding: 0 !important;
}

/* member-home.css sets #recDetailModal{ align-items:center }, which would hold
   the card centred at the width where v2 becomes a bottom sheet. */
@media (max-width: 600px){
  #recDetailModal.rrd2{ align-items: flex-end; }
}

/* --- Keeping the card identical across the three pages ---------------------
   profile-view.css writes its old-card rules as `body .rec-detail-x`, some
   with !important, where my-recs.css and member-home.css write plain
   `.rec-detail-x`. So the same declarations lose to this file on two pages and
   beat it on the third, which is the whole reason profile's card drifted.
   These four answer the ones that survive on profile, at a specificity (and
   where needed an !important) that holds on every page. */

/* body .rec-detail-header{ padding:0 !important } flattened the title and the
   facts against the card's left edge. */
.rrd2 .rec-detail-panel .rec-detail-header{
  padding: 16px 22px 12px !important;
}

/* .rec-detail-actions{ flex-direction:column } stacked the action row into a
   vertical list. This file never named the direction, so the page rule won by
   default rather than on specificity — naming it is the fix. `stretch` is what
   the row already computes to on my-recs, so that page does not move. */
.rrd2 .rec-detail-actions{
  flex-direction: row;
  align-items: stretch;
}

/* Both pages indent sections on top of .rec-detail-content's own 22px gutter —
   28px each side on profile, 24px on the left on my-recs — which left the
   section text out of line with the title above it. The gutter is this card's
   job, so the leftovers go. */
.rrd2 .rec-detail-content .rec-detail-section{
  padding: 0;
}