/* ============================================================
   JR Reviews — Styles
   ============================================================ */

:root {
    --jr-gold:       #c8a951;
    --jr-gold-dark:  #a8893a;
    --jr-dark:       #1a1a1a;
    --jr-mid:        #444;
    --jr-muted:      #888;
    --jr-border:     #e0d8cc;
    --jr-bg:         #faf9f7;
    --jr-white:      #ffffff;
    --jr-success:    #2d7a4f;
    --jr-success-bg: #edf7f2;
    --jr-error:      #c0392b;
    --jr-error-bg:   #fdf0ee;
    --jr-warn:       #7d5a00;
    --jr-warn-bg:    #fffbeb;
    --jr-radius:     10px;
    --jr-shadow:     0 4px 24px rgba(0,0,0,0.07);
}

.jr-review-form-wrap *, .jr-owner-dash * { box-sizing: border-box; }

/* ── Shared ── */
.jr-btn { display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 22px;font-size:14px;font-weight:600;border-radius:7px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:all .18s;font-family:inherit;line-height:1; }
.jr-btn--primary { background:var(--jr-dark);color:#fff;border-color:var(--jr-dark); }
.jr-btn--primary:hover { background:var(--jr-gold);border-color:var(--jr-gold);color:var(--jr-dark); }
.jr-btn--ghost { background:transparent;color:var(--jr-muted);border-color:var(--jr-border); }
.jr-btn--ghost:hover { color:var(--jr-dark);border-color:var(--jr-dark); }
.jr-btn--sm { height:34px;font-size:12px;padding:0 14px; }
.jr-btn--full { width:100%; }
.jr-btn:disabled { opacity:.5;cursor:not-allowed; }
@keyframes jr-spin { to { transform:rotate(360deg); } }
.jr-spinner { animation:jr-spin .8s linear infinite; }
.jr-messages { padding:12px 16px;border-radius:7px;font-size:13px;line-height:1.6;margin-bottom:12px; }
.jr-messages--success,.jr-messages.success { background:var(--jr-success-bg);color:var(--jr-success);border:1px solid rgba(45,122,79,.2); }
.jr-messages--error,.jr-messages.error     { background:var(--jr-error-bg);color:var(--jr-error);border:1px solid rgba(192,57,43,.2); }
.jr-messages--warn  { background:var(--jr-warn-bg);color:var(--jr-warn);border:1px solid rgba(125,90,0,.2); }
.jr-notice { padding:12px 16px;border-radius:7px;font-size:14px; }
.jr-notice--info    { background:#f0f4ff;color:#2c5282;border:1px solid rgba(44,82,130,.2); }
.jr-notice--success { background:var(--jr-success-bg);color:var(--jr-success);border:1px solid rgba(45,122,79,.2); }
.jr-notice--warn    { background:var(--jr-warn-bg);color:var(--jr-warn);border:1px solid rgba(125,90,0,.2); }
.jr-badge { display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;letter-spacing:.05em;padding:3px 9px;border-radius:20px; }
.jr-badge--verified { background:#fffbeb;color:#b7820a;border:1px solid #f0d070; }
.jr-form { display:flex;flex-direction:column;gap:18px; }
.jr-field { display:flex;flex-direction:column;gap:6px; }
.jr-label { font-size:13px!important;font-weight:600!important;color:var(--jr-mid)!important;margin:0!important; }
.jr-label-row { display:flex;justify-content:space-between;align-items:center; }
.jr-required { color:var(--jr-gold-dark); }
.jr-field-note-inline { font-size:11px;font-weight:400;color:var(--jr-muted); }
.jr-field-note { font-size:12px;color:var(--jr-muted); }
.jr-char-count { font-size:12px;color:var(--jr-muted); }
.jr-input { width:100%;height:44px;padding:0 14px;font-size:14px;color:var(--jr-dark);background:var(--jr-bg);border:1.5px solid var(--jr-border);border-radius:7px;outline:none;transition:border-color .18s,box-shadow .18s;font-family:inherit;appearance:none; }
.jr-input:focus { border-color:var(--jr-gold);box-shadow:0 0 0 3px rgba(200,169,81,.15);background:#fff; }
textarea.jr-input { height:auto;padding:10px 14px;resize:vertical; }
.jr-input--half { max-width:220px; }
.jr-checkbox-label { display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px!important;color:var(--jr-mid)!important;line-height:1.5!important; }
.jr-checkbox-label input[type="checkbox"] { position:absolute;opacity:0;width:0;height:0; }
.jr-checkbox-custom { flex-shrink:0;width:18px;height:18px;border:1.5px solid var(--jr-border);border-radius:4px;background:var(--jr-bg);margin-top:1px;display:flex;align-items:center;justify-content:center;transition:all .15s; }
.jr-checkbox-label input:checked+.jr-checkbox-custom { background:var(--jr-dark);border-color:var(--jr-dark); }
.jr-checkbox-label input:checked+.jr-checkbox-custom::after { content:'';display:block;width:5px;height:9px;border:2px solid var(--jr-gold);border-top:none;border-left:none;transform:rotate(45deg) translate(-1px,-1px); }
.jr-empty-state { text-align:center;padding:40px 16px; }
.jr-empty-state--sm { padding:20px 16px; }
.jr-empty-title { font-size:17px;font-weight:600;color:var(--jr-dark);margin:0 0 8px; }
.jr-empty-sub { font-size:14px;color:var(--jr-muted);margin:0 0 20px; }

/* ── Star picker ── */
.jr-star-picker { display:flex;align-items:center;gap:4px;flex-wrap:wrap; }
.jr-star-btn {
    background:none;border:none;cursor:pointer;font-size:36px;color:#ddd;padding:0 2px;
    line-height:1;transition:color .1s,transform .1s;
}
.jr-star-btn:hover,.jr-star-btn.hovered,.jr-star-btn.selected { color:var(--jr-gold); }
.jr-star-btn:hover { transform:scale(1.15); }
.jr-star-label { font-size:13px;font-weight:600;color:var(--jr-mid);margin-left:8px;min-width:100px; }

/* ── Photo upload ── */
.jr-photo-drop-zone {
    border:2px dashed var(--jr-border);border-radius:9px;padding:24px;text-align:center;
    cursor:pointer;transition:border-color .18s,background .18s;display:flex;flex-direction:column;align-items:center;gap:6px;
    color:var(--jr-muted);font-size:13px;
}
.jr-photo-drop-zone:hover,.jr-photo-drop-zone.dragover { border-color:var(--jr-gold);background:rgba(200,169,81,.04); }
.jr-photo-drop-zone svg { color:var(--jr-border); }
.jr-photo-label-btn { color:var(--jr-gold-dark);text-decoration:underline;cursor:pointer; }
.jr-photo-sub { font-size:11px;color:var(--jr-border); }
.jr-photo-previews { display:flex;flex-wrap:wrap;gap:10px;margin-top:10px; }
.jr-photo-preview-item { position:relative;width:80px;height:80px;border-radius:7px;overflow:hidden;border:1.5px solid var(--jr-border); }
.jr-photo-preview-item img { width:100%;height:100%;object-fit:cover; }
.jr-photo-remove-btn { position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;line-height:1; }
.jr-photo-progress { margin-top:8px; }
.jr-progress-bar { height:6px;background:var(--jr-bg);border-radius:3px;overflow:hidden;border:1px solid var(--jr-border);margin-bottom:4px; }
.jr-progress-fill { height:100%;background:var(--jr-gold);border-radius:3px;transition:width .3s; }
.jr-progress-label { font-size:12px;color:var(--jr-muted); }

/* ── Form footer ── */
.jr-form-disclaimer { font-size:11px;color:var(--jr-muted);text-align:center;line-height:1.6;margin:0; }
.jr-form-disclaimer a { color:var(--jr-gold-dark); }

/* ── Owner reply (used in both profile and dashboard) ── */
.jr-owner-reply { background:#fff;border-left:3px solid var(--jr-gold);padding:12px 14px;margin-top:12px;border-radius:0 7px 7px 0; }
.jr-owner-reply--new { animation:jr-fade-in .4s ease; }
@keyframes jr-fade-in { from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)} }
.jr-owner-reply-label { font-size:12px;font-weight:600;color:var(--jr-gold-dark);margin-bottom:6px;display:flex;align-items:center;gap:5px; }
.jr-owner-reply-body { font-size:13px;color:var(--jr-mid);line-height:1.6; }
.jr-owner-reply-date { font-size:11px;color:var(--jr-muted);margin-top:6px; }

/* ── Flag button ── */
.jr-flag-btn { background:none;border:none;cursor:pointer;font-size:12px;color:var(--jr-muted);display:flex;align-items:center;gap:5px;padding:4px 0;transition:color .15s; }
.jr-flag-btn:hover { color:var(--jr-error); }
.jr-odash-flag-row { margin-top:12px;padding-top:10px;border-top:1px solid var(--jr-bg); }

/* ── Flag modal ── */
.jr-flag-overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9998; }
.jr-flag-modal { position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;background:#fff;border-radius:var(--jr-radius);padding:28px;width:90%;max-width:420px;box-shadow:0 16px 64px rgba(0,0,0,.18); }
.jr-flag-modal-title { font-size:17px;font-weight:700;color:var(--jr-dark);margin:0 0 8px; }
.jr-flag-reasons { display:flex;flex-direction:column;gap:8px; }
.jr-flag-reason-label { display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;padding:8px 12px;border:1.5px solid var(--jr-border);border-radius:7px;transition:all .15s; }
.jr-flag-reason-label:hover { border-color:var(--jr-gold);background:rgba(200,169,81,.04); }
.jr-flag-reason-label input[type="radio"] { accent-color:var(--jr-gold); }

/* ============================================================
   OWNER DASHBOARD
   ============================================================ */
.jr-owner-dash { max-width:820px;margin:0 auto;padding:24px 16px 64px; }
.jr-odash-header { display:flex;justify-content:space-between;align-items:flex-start;gap:20px;background:#fff;border:1px solid var(--jr-border);border-radius:var(--jr-radius);padding:24px;margin-bottom:16px;box-shadow:var(--jr-shadow);flex-wrap:wrap; }
.jr-odash-title { font-size:22px!important;font-weight:800!important;color:var(--jr-dark)!important;margin:0 0 8px!important; }
.jr-odash-meta { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.jr-odash-view-link { font-size:13px;color:var(--jr-gold-dark);text-decoration:none; }
.jr-odash-view-link:hover { text-decoration:underline; }
.jr-odash-score { text-align:right;flex-shrink:0; }
.jr-odash-avg { font-size:42px;font-weight:800;color:var(--jr-dark);line-height:1; }
.jr-odash-count { font-size:13px;color:var(--jr-muted);margin-top:4px; }

.jr-odash-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px; }
@media(max-width:520px){ .jr-odash-stats { grid-template-columns:repeat(2,1fr); } }
.jr-odash-stat { background:#fff;border:1px solid var(--jr-border);border-radius:var(--jr-radius);padding:14px;text-align:center;box-shadow:var(--jr-shadow); }
.jr-odash-stat-n { font-size:24px;font-weight:700;color:var(--jr-dark); }
.jr-odash-stat-l { font-size:11px;color:var(--jr-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:4px; }

.jr-odash-section { background:#fff;border:1px solid var(--jr-border);border-radius:var(--jr-radius);padding:22px;margin-bottom:16px;box-shadow:var(--jr-shadow); }
.jr-odash-section-title { font-size:15px!important;font-weight:700!important;color:var(--jr-dark)!important;margin:0 0 16px!important;padding-bottom:12px!important;border-bottom:1.5px solid var(--jr-bg)!important; }
.jr-odash-bars { display:flex;flex-direction:column;gap:8px; }
.jr-bar-row { display:flex;align-items:center;gap:10px; }
.jr-bar-label { font-size:12px;color:var(--jr-mid);width:28px;flex-shrink:0; }
.jr-bar-track { flex:1;height:8px;background:var(--jr-bg);border-radius:4px;overflow:hidden;border:1px solid var(--jr-border); }
.jr-bar-fill  { height:100%;background:var(--jr-gold);border-radius:4px;transition:width .4s ease; }
.jr-bar-count { font-size:12px;color:var(--jr-muted);width:20px;flex-shrink:0;text-align:right; }

.jr-odash-reviews { display:flex;flex-direction:column;gap:16px; }
.jr-odash-review-card { border:1px solid var(--jr-border);border-radius:9px;padding:18px;background:var(--jr-bg); }
.jr-review-header { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px; }
.jr-review-author-name { font-size:14px;font-weight:600;color:var(--jr-dark); }
.jr-review-date { font-size:12px;color:var(--jr-muted); }
.jr-review-title { font-size:15px!important;font-weight:700!important;color:var(--jr-dark)!important;margin:0 0 6px!important; }
.jr-review-body { font-size:14px;line-height:1.6;color:var(--jr-mid); }
.jr-review-photos { display:flex;flex-wrap:wrap;gap:8px;margin-top:10px; }
.jr-review-photos img { width:70px;height:70px;object-fit:cover;border-radius:6px;border:1px solid var(--jr-border); }

.jr-odash-reply-form { margin-top:12px; }
.jr-reply-textarea-wrap { margin-top:8px;display:flex;flex-direction:column;gap:0; }
.jr-reply-textarea { min-height:80px; }
