/* Jubaly Customer Reviews v1.0.0 — matches the Jubaly theme (navy cards, #FF6600 accent) */
.jcr, .jcr-modal { --jcr-star:#FFB400; --jcr-green:#22c55e; --jcr-line:rgba(255,255,255,.08); --jcr-muted:#8fa3b8; --jcr-txt:#e6edf5; }
.jcr [hidden], .jcr-modal[hidden], .jcr-view[hidden], .jcr-more[hidden] { display:none !important; }

/* ── Tabs: the theme hides the tab bar (style.css ~L739); show it again now that there are two tabs ── */
.jlx-sp-desc .woocommerce-tabs ul.tabs { display:flex !important; flex-wrap:wrap; }
/* ── Tabs: no flash of the hidden panel before WooCommerce's script runs (no layout jump) ── */
.jlx-sp-desc .woocommerce-tabs > .wc-tab:not(:first-of-type) { display:none; }
.jlx-sp-desc .woocommerce-tabs ul.tabs:not(:has(li.active)) li:first-child a { color:#fff !important; border-bottom-color:#FF6600 !important; }
.jcr-tab-cnt { display:inline-block; margin-left:6px; font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:20px; background:rgba(255,180,0,.12); color:#ffd27a; vertical-align:1px; }

/* ── Hero badge ── */
/* Same size as the other hero badges (sizes come from the theme's .jlx-badge rules, incl. mobile);
   colours follow the same pattern as Region / Delivery: 12% fill, 30% border, light text. */
.jlx-badge.jcr-hero-badge { background:rgba(251,191,36,.12) !important; color:#FCD34D !important; border:1px solid rgba(251,191,36,.30) !important; text-decoration:none !important; }
.jlx-badge.jcr-hero-badge svg { flex:none; }
.jlx-badge.jcr-hero-badge:hover { background:rgba(251,191,36,.20) !important; color:#FDE68A !important; }

/* ── Stars (two layered SVG backgrounds; width = rating %) ── */
.jcr-stars { --s:14px; position:relative; display:inline-block; width:calc(var(--s) * 5); height:var(--s); flex:none; vertical-align:middle;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233a4b5f' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") repeat-x 0 0 / var(--s) var(--s); }
.jcr-stars > i { position:absolute; inset:0 auto 0 0; display:block; height:100%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFB400' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") repeat-x 0 0 / var(--s) var(--s); }
.jcr-stars--lg { --s:22px; }

/* ── Section ── */
.jlx-sp-desc .jcr { color:var(--jcr-txt); line-height:1.5 !important; font-size:14px !important; }
.jcr-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.jlx-sp-desc .jcr .jcr-title { margin:0 !important; font-size:19px !important; font-weight:800 !important; color:#fff !important; line-height:1.3 !important; }
.jcr-filters { display:flex; gap:8px; flex-wrap:wrap; }
.jcr .jcr-chip, .jcr-modal .jcr-chip { appearance:none; -webkit-appearance:none; margin:0; padding:6px 12px; border-radius:20px; border:1px solid rgba(255,255,255,.14); background:transparent; color:var(--jcr-muted); font:inherit; font-size:12.5px; font-weight:600; line-height:1.3; cursor:pointer; transition:background .15s, border-color .15s, color .15s; box-shadow:none; text-transform:none; letter-spacing:0; }
.jcr .jcr-chip:hover, .jcr-modal .jcr-chip:hover { border-color:rgba(255,255,255,.3); color:#d5e0ea; }
.jcr .jcr-chip.is-on, .jcr-modal .jcr-chip.is-on { background:rgba(255,102,0,.14); border-color:rgba(255,102,0,.55); color:#ffb27a; }

.jcr-grid { display:grid; grid-template-columns:minmax(260px, 340px) minmax(0, 1fr); gap:20px; align-items:start; }
.jcr-card { background:linear-gradient(180deg, #1a2640 0%, #152035 100%); border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.30); }
.jcr-sum { padding:22px; position:sticky; top:90px; }
.jcr-sum-top { display:flex; align-items:center; gap:16px; margin-bottom:4px; }
.jcr-big { font-size:52px; font-weight:800; line-height:1; color:#fff; letter-spacing:-1px; }
.jcr-muted { color:var(--jcr-muted); font-size:13px; margin-top:4px; }
.jcr-bars { display:grid; gap:8px; margin:18px 0 4px; }
.jcr-bar { display:grid; grid-template-columns:34px minmax(0,1fr) 44px; gap:10px; align-items:center; font-size:12px; color:var(--jcr-muted); }
.jcr-bar > span:last-child { text-align:right; }
.jcr-track { display:block; height:8px; background:#22344a; border-radius:6px; overflow:hidden; }
.jcr-fill { display:block; height:100%; background:linear-gradient(90deg, #FFB400, #FF8533); border-radius:6px; min-width:2px; }
.jcr-empty-sum { text-align:center; padding:4px 0; }
.jcr-empty-title { font-size:17px; font-weight:800; color:#fff; margin-top:10px; }
.jcr-trust { display:flex; gap:8px; align-items:flex-start; margin-top:16px; padding:11px 12px; border-radius:10px; background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.25); font-size:12.5px; line-height:1.5; color:#bfe9cf; }
.jcr-trust svg { color:var(--jcr-green); flex:none; margin-top:1px; }

.jcr .jcr-btn, .jcr-modal .jcr-btn, .jcr-rate { -webkit-appearance:none; appearance:none; }
.jcr .jcr-btn, .jcr-modal .jcr-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:16px 0 0; padding:12px 18px; border:0; border-radius:10px; background:linear-gradient(135deg, #FF7A1A 0%, #FF6600 50%, #E05500 100%); color:#fff; font:inherit; font-size:14.5px; font-weight:700; line-height:1.2; cursor:pointer; box-shadow:0 4px 18px rgba(255,102,0,.35); text-transform:none; transition:filter .15s, transform .1s; }
.jcr .jcr-btn:hover, .jcr-modal .jcr-btn:hover { filter:brightness(1.07); }
.jcr .jcr-btn:active, .jcr-modal .jcr-btn:active { transform:translateY(1px); }
.jcr .jcr-btn:disabled, .jcr-modal .jcr-btn:disabled { opacity:.6; cursor:default; }
.jcr .jcr-btn--ghost { width:auto; margin:4px auto 0; background:transparent; border:1px solid rgba(255,255,255,.2); box-shadow:none; color:#e6edf5; padding:10px 22px; }
.jcr .jcr-btn--ghost:hover { border-color:rgba(255,255,255,.4); filter:none; }

.jcr-main { min-width:0; }
.jcr-list { display:grid; gap:12px; transition:opacity .15s; }
.jcr-list.is-loading { opacity:.45; pointer-events:none; }
.jcr-more { display:flex; justify-content:center; margin-top:14px; }
.jcr-none { padding:22px; color:var(--jcr-muted); text-align:center; }

/* ── Review card ── */
.jcr-rv { padding:16px 18px; }
.jcr-rv-h { display:flex; gap:12px; align-items:center; }
.jcr-av { width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff; background:hsl(var(--h, 210) 45% 32%); }
.jcr-rv-who { min-width:0; }
.jcr-nm { font-weight:700; color:#fff; font-size:14px; line-height:1.35; word-break:break-word; }
.jcr-ver { display:inline-flex; align-items:center; gap:3px; margin-left:4px; color:var(--jcr-green); font-size:11.5px; font-weight:700; white-space:nowrap; }
.jcr-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:3px; font-size:12px; color:var(--jcr-muted); }
.jcr-pkg { font-size:11.5px; padding:2px 8px; border-radius:6px; background:rgba(255,255,255,.06); color:#c7d5e3; }
.jcr-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.jcr-tag { font-size:11.5px; padding:3px 9px; border-radius:20px; background:rgba(255,102,0,.08); border:1px solid rgba(255,102,0,.25); color:#ffc69c; }
.jlx-sp-desc .jcr .jcr-text { margin:10px 0 0 !important; color:#d5e0ea !important; font-size:14px !important; line-height:1.65 !important; word-break:break-word; }
.jcr-reply { margin-top:12px; padding:10px 12px; border-left:3px solid #FF6600; background:rgba(255,102,0,.06); border-radius:0 8px 8px 0; font-size:13px; line-height:1.55; color:#d5e0ea; }
.jcr-reply b { color:#ffb27a; }

/* ── Modal ── */
html.jcr-lock { overflow:hidden; }
.jcr-modal { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:16px; color:var(--jcr-txt); font-size:14px; line-height:1.5; }
.jcr-modal-bg { position:absolute; inset:0; background:rgba(2,10,18,.72); opacity:0; transition:opacity .18s; }
.jcr-dialog { position:relative; width:100%; max-width:500px; max-height:calc(100vh - 32px); overflow:auto; padding:24px; border-radius:16px; background:linear-gradient(180deg, #1a2640 0%, #152035 100%); border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 80px rgba(0,0,0,.6); transform:translateY(10px) scale(.98); opacity:0; transition:transform .18s, opacity .18s; outline:none; overscroll-behavior:contain; }
.jcr-modal.is-open .jcr-modal-bg { opacity:1; }
.jcr-modal.is-open .jcr-dialog { transform:none; opacity:1; }
.jcr-x { position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.06); color:#cbd5e1; font-size:22px; line-height:1; cursor:pointer; padding:0; }
.jcr-x:hover { background:rgba(255,255,255,.12); color:#fff; }
.jcr-m-title { margin:0 36px 4px 0; font-size:19px; font-weight:800; color:#fff; line-height:1.3; }
.jcr-m-sub { color:var(--jcr-muted); font-size:13px; margin:0; }
.jcr-select { width:100%; margin-top:12px; padding:10px 12px; border-radius:10px; background:#071820; color:#e6edf5; border:1px solid rgba(255,255,255,.14); font:inherit; font-size:14px; }
.jcr-pick { display:flex; gap:6px; margin:16px 0 2px; }
.jcr-pick-star { width:44px; height:44px; padding:3px; border:0; background:transparent; color:#3a4b5f; cursor:pointer; border-radius:8px; transition:transform .1s, color .1s; }
.jcr-pick-star svg { width:100%; height:100%; display:block; }
.jcr-pick-star.is-on, .jcr-pick-star.is-hover { color:#FFB400; }
.jcr-pick-star:hover { transform:scale(1.08); }
.jcr-pick-star:focus-visible { outline:2px solid #FF8533; outline-offset:2px; }
.jcr-pick-txt { min-height:20px; font-size:13px; font-weight:700; color:#ffb27a; }
.jcr-qt { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.jcr-textarea { display:block; width:100%; min-height:100px; padding:12px; border-radius:10px; background:#071820; color:#e6edf5; border:1px solid rgba(255,255,255,.14); font:inherit; font-size:14px; line-height:1.55; resize:vertical; box-sizing:border-box; }
.jcr-textarea:focus, .jcr-select:focus { outline:none; border-color:rgba(255,102,0,.6); box-shadow:0 0 0 3px rgba(255,102,0,.15); }
.jcr-count { text-align:right; font-size:11.5px; color:var(--jcr-muted); margin-top:4px; }
.jcr-err { margin-top:10px; padding:9px 12px; border-radius:8px; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35); color:#fecaca; font-size:13px; }
.jcr-note { margin:10px 0 0; font-size:11.5px; color:var(--jcr-muted); text-align:center; }
.jcr-view[data-view="info"], .jcr-view[data-view="done"] { text-align:center; padding:8px 0 0; }
.jcr-view[data-view="info"] .jcr-m-title, .jcr-view[data-view="done"] .jcr-m-title { margin:10px 0 6px; }
.jcr-info-ico { width:56px; height:56px; margin:4px auto 0; border-radius:50%; display:grid; place-items:center; font-size:26px; background:rgba(255,255,255,.06); }
.jcr-info-ico.jcr-ok { background:rgba(34,197,94,.14); color:#22c55e; font-weight:800; }
.jcr-view[data-view="loading"] { display:flex; justify-content:center; padding:40px 0; }
.jcr-spin { width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.12); border-top-color:#FF6600; animation:jcr-spin .8s linear infinite; }
@keyframes jcr-spin { to { transform:rotate(360deg); } }

/* ── My Account: Rate button + order page card ── */
.jcr-rate { display:inline-flex; align-items:center; gap:4px; padding:7px 14px; border-radius:8px; border:1px solid rgba(255,180,0,.5); background:rgba(255,180,0,.08); color:#ffd27a; font:inherit; font-size:12.5px; font-weight:700; line-height:1.2; cursor:pointer; white-space:nowrap; transition:background .15s; }
.jcr-rate:hover { background:rgba(255,180,0,.16); }
.jcr-rate.is-done { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.08); color:#86efac; }
.jcr-order-card { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:18px 0; padding:16px 18px; border-radius:14px; background:linear-gradient(180deg, #1a2640 0%, #152035 100%); border:1px solid rgba(255,180,0,.28); }
.jcr-order-card b { display:block; color:#fff; font-size:15px; }
.jcr-order-card span { display:block; color:#8fa3b8; font-size:13px; }

@media (prefers-reduced-motion: reduce) { .jcr-dialog, .jcr-modal-bg, .jcr-list { transition:none; } .jcr-spin { animation-duration:2s; } }
@media (max-width: 900px) {
  .jcr-grid { grid-template-columns:minmax(0, 1fr); }
  .jcr-sum { position:static; }
}
@media (max-width: 560px) {
  .jcr-head { align-items:flex-start; flex-direction:column; }
  .jcr-big { font-size:42px; }
  .jcr-sum { padding:18px; }
  .jcr-rv { padding:14px; }
  .jcr-modal { align-items:flex-end; padding:0; }
  .jcr-dialog { max-width:none; border-radius:18px 18px 0 0; max-height:92vh; padding:22px 16px calc(18px + env(safe-area-inset-bottom)); }
  .jcr-pick-star { width:46px; height:46px; }
  .jcr-tab-cnt { margin-left:4px; padding:1px 6px; }
}

/* Hide the hero badge row when a product has no badges at all (v2.0.76) */
.jlx-hero-badges:not(:has(.jlx-badge)) { display:none !important; }