/* Use site theme variables if available; fallbacks provided */
:root{
  --om-bg: var(--bg, #ffffff);
  --om-surface: var(--card, #fbfbfd);
  --om-text: var(--text, #111827);
  --om-muted: var(--muted, #6c757d);
  --om-accent: var(--accent, #0d6efd);
  --om-accent-2: #4ea8ff;
  --om-radius: 14px;
  --om-elev: 0 10px 30px rgba(2,6,23,0.06);
  --om-glass: rgba(255,255,255,0.6);
  --om-success: var(--green, #28a745);
  --om-border: rgba(15,23,42,0.06);
}

/* Respect explicit dark theme variable if base template sets [data-theme="dark"] or .theme-dark */
[data-theme="dark"] .reviews-card,
.theme-dark .reviews-card,

[data-theme="dark"] { --om-bg: var(--bg, #0c0b1d); --om-surface: #17181a; --om-text: #e6eef8; --om-muted: #fbfdff; --om-accent: #2f9cff; --om-accent-2:#1e6fb8; --om-border: rgba(255,255,255,0.05); }
.theme-dark { --om-bg: var(--bg, #0b1220); --om-surface: #071129; --om-text: #ffffff; --om-muted: #ffffff; --om-accent: #2f9cff; --om-accent-2:#1e6fb8; --om-border: rgba(255,255,255,0.05); }
[data-theme="dark"].small-text {
  color: #e6eef8;
}
/* Container & card */
.reviews-card{
  width:100%;
  max-width: 1400px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--om-surface), rgba(59, 2, 2, 0.192));
  border-radius: var(--om-radius);
  border: 1px solid var(--om-border);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--om-elev);
  color: var(--om-text);
}

/* Header */
.section-title{
  font-weight:700;
  letter-spacing:0.2px;
  font-size:1.1rem;
  color: var(--om-text);
}
.stats { min-width:180px; text-align:right; color:var(--om-muted); }

/* Average block */
.rating-big{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0.65rem 0.95rem;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  min-width:120px;
  border:1px solid transparent;
}
.big-num{ font-size:1.7rem; font-weight:800; color:var(--om-accent); letter-spacing:0.6px; }
.rating-big .stars .star{ font-size:1.05rem; margin:0 1px; color:var(--om-accent); }
.star { color: var(--om-accent); font-size:0.95rem; margin:0 1px; }
.star.inactive { color: rgba(0,0,0,0.08); opacity:0.45; }

/* Rating bars */
.rating-bars{ width:100%; }
.bar-row{ align-items:center; }
.star-label{ width:44px; font-weight:700; color:var(--om-text); }
.bar-wrap{
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(255,255,255,0.01));
  border-radius:999px;
  height:12px;
  overflow:hidden;
  position:relative;
  border: 1px solid var(--om-border);
}
.bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--om-accent), var(--om-accent-2));
  transition: width 900ms cubic-bezier(.2,.9,.3,1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.07) inset;
}

/* Subscore donuts */
.summary-badges { gap:1rem; }
.subscore{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:92px;
  max-width:120px;
  padding:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.01));
  border-radius:12px;
  border:1px solid var(--om-border);
}
.subscore .label{ color:var(--om-muted); font-weight:600; font-size:0.82rem; text-align:center; }

/* Donut base styles - we'll generate SVG via JS */
.donut {
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.donut svg { transform: rotate(-90deg); width:72px; height:72px; display:block; }
.donut .donut-center {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:0.95rem;
  color:var(--om-text);
  pointer-events:none;
}

/* Filters */
.filters-row .btn{ border-radius:10px; padding:6px 10px; border:1px solid var(--om-border); background:transparent; color:var(--om-text); }
.filters-row .btn.active{ background:linear-gradient(180deg,var(--om-accent),var(--om-accent-2)); color:#fff; border-color:transparent; }

/* Review list */
.review-item{ align-items:flex-start; gap:1rem; padding:1.1rem 0; transition: transform 260ms ease, opacity 260ms ease; }
.review-item.hidden{ opacity:0; transform:translateY(8px) scale(0.995); pointer-events:none; height:0; margin:0; padding:0; overflow:hidden; }
hr { border:none; border-top:1px solid var(--om-border); margin:0.45rem 0; }

/* Avatar */
.avatar-col{ width:56px; flex:0 0 56px; display:flex; align-items:flex-start; justify-content:center; }
.avatar-circle{
  width:48px; height:48px; border-radius:50%;
  background: linear-gradient(135deg, rgba(0,0,0,0.06), var(--om-accent));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;
  box-shadow: 0 8px 20px rgba(2,6,23,0.06);
}

/* Thumbs */
.review-thumb{ width:76px; height:76px; object-fit:cover; cursor:pointer; border-radius:10px; box-shadow:0 8px 18px rgba(2,6,23,0.06); transition:transform .18s ease; }
.review-thumb:hover{ transform:translateY(-6px) scale(1.03); }

/* Modern form styles */
.modern-form {
  border-radius:12px;
  padding:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.01));
  border:1px solid var(--om-border);
}
.modern-label { display:block; margin-bottom:6px; font-weight:600; color:var(--om-text); font-size:0.86rem; }
.modern-input, .modern-select {
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--om-border);
  background: transparent;
  color:var(--om-text);
  transition: box-shadow .15s ease, transform .08s ease;
  box-shadow: none;
}
.modern-input:focus, .modern-select:focus, .modern-textarea:focus {
  outline: none;
  box-shadow: 0 6px 20px rgba(14, 119, 255, 0.08);
  transform: translateY(-1px);
  border-color: var(--om-accent);
}
.modern-textarea {
  min-height:120px;
  border-radius:10px;
  padding:12px;
  resize:vertical;
  background:transparent;
  border:1px solid var(--om-border);
  color:var(--om-text);
}

/* small subscore input sizing */
.small-input { max-width:120px; }

/* Toggle button */
.review-toggle-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:10px;
  padding:8px 12px;
  background:transparent;
  color:var(--om-accent);
  border:1px solid var(--om-accent);
  transition: transform .12s ease, background .12s ease;
}
.review-toggle-btn .toggle-icon { transition: transform .18s ease; }
.review-toggle-btn[aria-expanded="true"] { background: linear-gradient(90deg,var(--om-accent),var(--om-accent-2)); color:#fff; border-color:transparent; transform:translateY(-2px); }
.review-toggle-btn[aria-expanded="true"] .toggle-icon { transform: rotate(45deg); }

/* Collapsible wrapper transitions */
.review-form-wrapper {
  max-height:0;
  overflow:hidden;
  transition: max-height 420ms cubic-bezier(.2,.9,.3,1), padding 320ms;
  padding:0 0;
  border-radius:10px;
}
.review-form-wrapper.expanded {
  padding:18px 0 6px 0;
  max-height:1200px; /* plenty */
}

/* Submit button */
.btn-submit {
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
}
/* ============================
   MOBILE OPTIMIZATION LAYER
   ============================ */

@media (max-width: 600px) {

  /* General card spacing */
  .reviews-card {
    padding: 0.85rem 1rem;
    border-radius: 10px;
  }

  .section-title {
    font-size: 0.95rem;
  }

  /* Stats (top-right numbers) */
  .stats {
    min-width: unset;
    text-align: left;
    font-size: 0.78rem;
  }

  /* BIG average rating block */
  .rating-big {
    padding: 0.5rem 0.6rem;
    min-width: 90px;
  }

  .big-num {
    font-size: 1.35rem;
  }

  .rating-big .stars .star {
    font-size: 0.9rem;
  }

  /* Rating bars */
  .star-label {
    width: 36px;
    font-size: 0.8rem;
  }

  .bar-wrap {
    height: 10px;
  }

  /* Turn donuts into a 2-column grid */
  .donut-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    width: 100%;
  }

  /* Subscore cards */
  .subscore {
    min-width: unset;
    max-width: unset;
    padding: 4px;
    border-radius: 10px;
  }

  .subscore .label {
    font-size: 0.75rem;
  }

  /* Smaller donut size */
  .donut {
    width: 58px;
    height: 58px;
  }
  .donut svg {
    width: 58px;
    height: 58px;
  }
  .donut .donut-center {
    font-size: 0.75rem;
  }

  /* Review items */
  .review-item {
    gap: 0.6rem;
    padding: 0.8rem 0;
  }

  /* Hide avatar on small screen */
  .avatar-col {
    display: none !important;
  }

  /* Review thumbnails */
  .review-thumb {
    width: 62px;
    height: 62px;
    border-radius: 8px;
  }

  /* Form adjustments */
  .modern-input, .modern-select, .modern-textarea {
    padding: 8px 10px;
    font-size: 0.85rem;
  }

  .modern-label {
    font-size: 0.78rem;
    margin-bottom: 4px;
  }

  .small-input {
    max-width: 100px;
  }

  /* Submit button */
  .btn-submit {
    padding: 8px 12px;
    font-size: 0.9rem;
  }

}