/* ================================================
   DARKRIOSTA REVIEWS UI v3 — reviews.css
   Reference style: name + stars + date inline,
   variant label, review text, optional photo,
   load more button. Black stars. Drawer.
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ─── Variables ─────────────────────────────── */
:root {
  --dr-bg:       #ffffff;
  --dr-surface:  #f8f7f5;
  --dr-border:   #e6e2dc;
  --dr-ink:      #1a1a1a;
  --dr-muted:    #999590;
  --dr-star-on:  #1a1a1a;
  --dr-star-off: #dedad6;
  --dr-radius:   0px;        /* flat / editorial, matching reference */
  --dr-w:        520px;
  --dr-ease:     cubic-bezier(0.32, 0.72, 0, 1);
}

/* ================================================
   1. KILL ALL ORANGE — hard resets
   ================================================ */

/* Nuke WC's font-icon star entirely */
.woocommerce .star-rating,
.woocommerce .star-rating *,
.woocommerce .star-rating::before,
.woocommerce .star-rating span,
.woocommerce .star-rating span::before {
  display: none !important;
}

/* Kill orange on any review link text */
.woocommerce-product-rating,
.woocommerce-product-rating *,
.woocommerce a.woocommerce-review-link {
  color: var(--dr-ink) !important;
}

/* ── Our replacement inline rating ── */
.dr-inline-rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
  vertical-align: middle;
}

.dr-rating-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--dr-muted);
  font-weight: 400;
}

/* ================================================
   2. SVG STARS
   ================================================ */
.dr-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  vertical-align: middle;
}

.dr-star {
  fill: var(--dr-star-off);
  stroke: none;
  display: block;
  flex-shrink: 0;
}

.dr-star.filled {
  fill: var(--dr-star-on);
}

/* ================================================
   3. WC PRODUCT TABS — badge on Reviews tab
   ================================================ */
.woocommerce-tabs ul.tabs li a {
  font-family: 'DM Sans', sans-serif !important;
}

.dr-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--dr-ink);
  color: #fff;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  vertical-align: middle;
  margin-left: 5px;
  line-height: 1;
}

/* Hide WC placeholder panel */
#dr-tab-panel-placeholder,
.woocommerce-tabs .panel#tab-dr_reviews {
  display: none !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* ================================================
   4. OVERLAY
   ================================================ */
.dr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--dr-ease);
}
.dr-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ================================================
   5. DRAWER
   ================================================ */
.dr-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--dr-w);
  max-width: 100vw;
  background: var(--dr-bg);
  z-index: 9001;
  transform: translateX(100%);
  transition: transform 0.38s var(--dr-ease);
  box-shadow: -1px 0 40px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  font-family: 'DM Sans', sans-serif;
  z-index: 999999!important;
}

.dr-drawer.is-open {
  transform: translateX(0);
}

.dr-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Close button */
.dr-close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--dr-border);
  border-radius: 50%;
  background: var(--dr-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dr-ink);
  z-index: 2;
  transition: background 0.18s, color 0.18s, transform 0.22s;
}
.dr-close-btn:hover {
  background: var(--dr-ink);
  color: #fff;
  border-color: var(--dr-ink);
  transform: rotate(90deg);
}

/* ================================================
   6. DRAWER TABS
   ================================================ */
.dr-drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--dr-border);
  padding: 0 24px;
  padding-top: 20px;
  flex-shrink: 0;
  background: var(--dr-bg);
}

.dr-dtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  margin-bottom: -1px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--dr-muted);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: color 0.16s, border-color 0.16s;
  white-space: nowrap;
}
.dr-dtab.active {
  color: var(--dr-ink);
  border-bottom-color: var(--dr-ink);
}
.dr-dtab:hover:not(.active) {
  color: var(--dr-ink);
}

.dr-dtab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--dr-ink);
  color: #fff;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* ================================================
   7. PANELS
   ================================================ */
.dr-panel {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dr-border) transparent;
}
.dr-panel::-webkit-scrollbar { width: 3px; }
.dr-panel::-webkit-scrollbar-thumb {
  background: var(--dr-border);
  border-radius: 3px;
}

.dr-panel-hidden {
  display: none !important;
}

/* ================================================
   8. SUMMARY BAR
   ================================================ */
.dr-summary-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--dr-border);
  background: var(--dr-surface);
}

.dr-summary-score {
  font-family: 'DM Sans', sans-serif;
  font-size: 46px;
  font-weight: 300;
  color: var(--dr-ink);
  line-height: 1;
  letter-spacing: -2px;
}

.dr-summary-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dr-summary-label {
  font-size: 12px;
  color: var(--dr-muted);
  font-weight: 400;
}

/* ================================================
   9. REVIEW CARDS — Reference style
   ================================================ */
.dr-reviews-list {
  display: flex;
  flex-direction: column;
}

.dr-review-card {
  padding: 22px 24px;
  border-bottom: 1px solid var(--dr-border);
  background: var(--dr-bg);
}

/* Row 1: Author — Stars — Date (date pushed right) */
.dr-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.dr-card-author {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dr-ink);
  white-space: nowrap;
}

.dr-card-stars {
  /* sits inline between name and date */
  flex-shrink: 0;
}

.dr-card-date {
  margin-left: auto;          /* push to far right */
  font-size: 12px;
  color: var(--dr-muted);
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Row 2: Variant label (small caps, muted) */
.dr-card-variant {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--dr-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1;
}

/* Row 3: Review body text */
.dr-card-body {
  font-size: 14px;
  line-height: 1.68;
  color: #2a2a2a;
}
.dr-card-body p {
  margin: 0 0 6px;
}
.dr-card-body p:last-child {
  margin-bottom: 0;
}

/* Row 4: Images */
.dr-card-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.dr-card-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--dr-border);
  display: block;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dr-card-img:hover {
  opacity: 0.85;
}

/* Empty state */
.dr-no-reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  color: var(--dr-muted);
  font-size: 14px;
}
.dr-cta-write {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: var(--dr-ink);
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity 0.16s;
}
.dr-cta-write:hover { opacity: 0.78; }

/* ================================================
   10. LOAD MORE BUTTON — matches reference
   ================================================ */
.dr-load-more-wrap {
  padding: 20px 24px 28px;
}

.dr-load-more-btn {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background: transparent;
  border: 1px solid var(--dr-ink);
  color: var(--dr-ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background 0.18s, color 0.18s;
}
.dr-load-more-btn:hover {
  background: #e0d7c6 !important;
  color: #fff;
}
.dr-load-more-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dr-load-more-btn.loading::after {
  content: '...';
  animation: dr-dots 1s infinite;
}
@keyframes dr-dots {
  0%, 100% { content: '.'; }
  33%       { content: '..'; }
  66%       { content: '...'; }
}

/* ================================================
   11. WRITE REVIEW PANEL
   ================================================ */
#dr-panel-write {
  padding: 24px;
}

.dr-write-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dr-border);
}
.dr-write-header h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--dr-ink);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}
.dr-write-header p {
  font-size: 13px;
  color: var(--dr-muted);
  margin: 0;
}

/* Native WC form */
#commentform {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#commentform p { margin: 0 !important; }

#commentform label {
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--dr-muted) !important;
  margin-bottom: 7px !important;
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
  width: 100% !important;
  padding: 11px 13px !important;
  border: 1px solid var(--dr-border) !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: var(--dr-ink) !important;
  background: var(--dr-bg) !important;
  box-sizing: border-box !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color 0.16s !important;
  resize: vertical !important;
}
#commentform input:focus,
#commentform textarea:focus {
  border-color: var(--dr-ink) !important;
}
#commentform textarea {
  min-height: 110px !important;
}

/* Stars in form — black SVG masks */
.comment-form-rating .stars {
  display: inline-flex !important;
  gap: 6px !important;
  margin: 5px 0 0 !important;
  line-height: 1 !important;
}

.comment-form-rating .stars a {
  font-size: 0 !important;
  text-decoration: none !important;
  display: inline-block !important;
  width: 26px !important;
  height: 26px !important;
  background-color: var(--dr-star-off) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: cover !important;
  mask-size: cover !important;
  cursor: pointer !important;
  transition: background-color 0.14s !important;
}

.comment-form-rating .stars:hover a {
  background-color: var(--dr-star-on) !important;
}
.comment-form-rating .stars a:hover ~ a {
  background-color: var(--dr-star-off) !important;
}
.comment-form-rating .stars.selected a.active {
  background-color: var(--dr-star-on) !important;
}
.comment-form-rating .stars.selected a.active ~ a {
  background-color: var(--dr-star-off) !important;
}

/* Submit */
.dr-submit-btn,
#commentform input[type="submit"] {
  width: 100% !important;
  padding: 13px 22px !important;
  background: var(--dr-ink) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: opacity 0.16s !important;
  display: block !important;
}
.dr-submit-btn:hover,
#commentform input[type="submit"]:hover {
  opacity: 0.8 !important;
}

.dr-submit-wrap { margin-top: 4px; }

.dr-closed-notice {
  color: var(--dr-muted);
  font-size: 14px;
  text-align: center;
  padding: 32px 0;
}

/* ================================================
   12. BODY LOCK
   ================================================ */
body.dr-no-scroll {
  overflow: hidden !important;
}

/* ================================================
   13. RESPONSIVE
   ================================================ */
@media (max-width: 540px) {
  :root { --dr-w: 100vw; }
  .dr-summary-score { font-size: 38px; }
}