/* =====================================================================
   ReviewSL plugin compatibility
   Brings the plugin's own templates (single listing body, review form,
   submit listing form, search/leaderboard shortcodes) onto theme tokens so
   they follow the brand colour and light/dark mode.
   "body.rslt" prefix = enough specificity to beat the plugin's inline CSS.
   ===================================================================== */

/* ---------- Single listing: hero (theme) ---------- */
.listing-hero { background: var(--surface); border-bottom: 1px solid var(--border); padding: 24px 0 30px; }
html[data-theme="dark"] .listing-hero { background: linear-gradient(180deg, var(--surface), var(--bg)); }
.lh-grid { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 26px; align-items: center; margin-top: 18px; }
.lh-thumb { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 22px; background: var(--thumb-bg); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow); font-size: 2.2rem; }
.lh-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.lh-thumb.is-empty { background: var(--brand-soft); color: var(--brand-text); font-weight: 800; }
.lh-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 8px; }
.lh-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 1rem; }
.lh-rating b { font-size: 1.25rem; font-weight: 800; }
.lh-rating a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.lh-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: .84rem; font-weight: 600; }
a.tag:hover { color: var(--brand-text); background: var(--brand-softer); }
.tag-rank { background: color-mix(in srgb, var(--gold) 16%, transparent); color: color-mix(in srgb, var(--gold) 70%, var(--text)); }
.tag-rank .ico { color: var(--gold); }
.lh-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lh-score { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 22px; border-radius: var(--radius-lg); background: var(--surface-2); min-width: 190px; }
.lh-score-text { display: flex; flex-direction: column; line-height: 1.35; }
.ring {
	--p: 0; --c: var(--muted);
	width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
	background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0);
}
.ring span { display: flex; align-items: center; justify-content: center; width: 82px; height: 82px; border-radius: 50%; background: var(--surface-2); font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; color: var(--c); }
.ring small { font-size: .5em; }
.tier-green .ring { --c: var(--green); }
.tier-amber .ring { --c: var(--star); }
.tier-red .ring { --c: var(--red); }

.listing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; padding-top: 28px; padding-bottom: 56px; }
.listing-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }
.dist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.dist-row { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: 10px; font-size: .85rem; font-weight: 700; }
.dist-row .bar-fill { background: var(--star); }
.dist-row .muted { text-align: right; }
.crit { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.crit-row { display: grid; grid-template-columns: 96px 1fr 32px; align-items: center; gap: 10px; font-size: .88rem; }
.crit-name { color: var(--text-2); font-weight: 600; }
.crit-row b { text-align: right; }
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: .92rem; }
.contact-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: var(--text-2); word-break: break-word; }
.contact-list .ico { color: var(--brand); margin-top: 3px; }

/* Hide plugin parts the hero/aside already show */
body.rslt-listing-v2 .rankright-listing > .listing-header,
body.rslt-listing-v2 .rankright-listing > .listing-gallery,
body.rslt-listing-v2 .rankright-listing > .listing-contact-buttons,
body.rslt-listing-v2 .rankright-listing > .listing-address,
body.rslt-listing-v2 .rankright-listing > .rating-summary-box { display: none !important; }

/* ---------- Single listing: plugin body ---------- */
body.rslt .rankright-listing-container { max-width: none; margin: 0; padding: 0; background: transparent; box-shadow: none; }
body.rslt .rankright-listing { background: transparent; box-shadow: none; padding: 0; margin: 0; color: var(--text); }
body.rslt .rankright-listing > * + * { margin-top: 20px; }
body.rslt .listing-content,
body.rslt .rsl-branches-section,
body.rslt .rsl-branch-of-section,
body.rslt .review-form-section,
body.rslt .reviews-section,
body.rslt .listing-promotion-links,
body.rslt .listing-brand-attributes {
	background: var(--surface) !important; border: 1px solid var(--border); border-radius: var(--radius-lg);
	padding: 22px !important; box-shadow: var(--shadow-sm); color: var(--text-2);
}
body.rslt .listing-content { font-size: 1rem; line-height: 1.7; }
body.rslt .listing-content > :last-child { margin-bottom: 0; }
body.rslt .review-form-section h2,
body.rslt .reviews-section h2,
body.rslt .reviews-header h2,
body.rslt .rsl-branches-title { color: var(--text); font-size: 1.25rem; font-weight: 800; margin: 0 0 14px; }

/* Header / gallery / buttons / address when shown (non-v2 fallback) */
body.rslt .listing-header .listing-title { color: var(--text); }
body.rslt .listing-rating-badge .rating-score, body.rslt .rating-stars { color: var(--star); }
body.rslt .gallery-main { background: var(--thumb-bg); border-radius: var(--radius-lg); }
body.rslt .btn-contact { border-radius: 12px; font-weight: 700; }
body.rslt .listing-address { background: var(--surface-2) !important; border-left-color: var(--brand) !important; color: var(--text-2); }
body.rslt .listing-address strong { color: var(--brand-text) !important; }
body.rslt .rating-summary-box { background: var(--surface) !important; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-lg); }
body.rslt .rating-summary-box * { color: inherit; }
body.rslt .criterion-fill, body.rslt .score-fill { background: var(--brand) !important; }
body.rslt .promotion-link { background: var(--brand); border-radius: 10px; }
body.rslt .listing-brand .brand-name { color: var(--brand-text); }
body.rslt .listing-attr-badge { background: var(--surface-2); border-color: var(--border); color: var(--text-2); }
body.rslt .listing-attr-badge:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Branch cards */
body.rslt .rsl-branch-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
body.rslt .rsl-branch-card:hover { border-color: var(--brand); }
body.rslt .rsl-bc-name { color: var(--text); }
body.rslt .rsl-bc-loc, body.rslt .rsl-bc-rcnt, body.rslt .rsl-bc-no-reviews { color: var(--muted); }
body.rslt .rsl-bc-stars { color: var(--star); }
body.rslt .rsl-bc-thumb { background: var(--thumb-bg); }
body.rslt .rsl-bc-placeholder { background: var(--brand-soft); color: var(--brand-text); }
body.rslt .rsl-bc-score { background: var(--brand); color: #fff; }
body.rslt .rsl-branches-badge { background: var(--brand); color: #fff; }
body.rslt .rsl-main-branch-link a { color: var(--brand-text); }

/* Review form */
body.rslt .guest-review-container,
body.rslt .login-required,
body.rslt .email-verification-container { background: var(--surface-2) !important; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); box-shadow: none; }
body.rslt .social-login-heading, body.rslt .login-message, body.rslt .form-group label, body.rslt .criterion-label { color: var(--text) !important; font-weight: 700; }
body.rslt .btn-social-login { background: var(--surface) !important; border: 1px solid var(--border-strong) !important; color: var(--text) !important; border-radius: 12px; }
body.rslt .btn-social-login:hover { border-color: var(--brand) !important; }
body.rslt .login-divider::before { background: var(--border) !important; }
body.rslt .login-divider span { background: var(--surface-2) !important; color: var(--muted) !important; }
body.rslt .verification-text { color: var(--text-2); }
body.rslt .verification-text strong, body.rslt #countdown { color: var(--brand-text); }
body.rslt .form-control,
body.rslt .rankright-listing select,
body.rslt .review-sort select {
	background: var(--surface) !important; color: var(--text) !important;
	border: 1px solid var(--border-strong) !important; border-radius: 12px !important; min-height: 44px; padding: 10px 14px;
}
body.rslt .form-control:focus, body.rslt .review-sort select:focus { border-color: var(--brand) !important; box-shadow: var(--ring) !important; outline: 0; }
body.rslt .form-hint { color: var(--muted); }
body.rslt .rankright-listing .btn-primary,
body.rslt .btn-submit-review,
body.rslt .btn-standard-login,
body.rslt .btn-submit-listing,
body.rslt .rankright-search-button,
body.rslt .btn-filter {
	background: var(--brand) !important; color: var(--on-brand) !important; border: 0 !important;
	border-radius: 12px !important; font-weight: 700; box-shadow: 0 8px 20px -10px var(--brand);
}
body.rslt .rankright-listing .btn-primary:hover,
body.rslt .btn-submit-review:hover,
body.rslt .btn-submit-listing:hover,
body.rslt .rankright-search-button:hover { background: var(--brand-strong) !important; transform: none; }
body.rslt .btn-link { color: var(--brand-text) !important; }
body.rslt .custom-review-prompt { background: var(--brand-softer) !important; border-left-color: var(--brand) !important; border-radius: 10px !important; }
body.rslt .custom-review-prompt p { color: var(--text-2) !important; }
body.rslt .custom-review-prompt .dashicons { color: var(--brand) !important; }
body.rslt .star-rating-clickable .star { color: var(--star-empty); }
body.rslt .star-rating-clickable .star.active, body.rslt .star-rating-clickable .star.hover { color: var(--star); }
body.rslt .verified-badge, body.rslt .form-message.success { background: var(--green-bg) !important; color: var(--green) !important; border-color: transparent !important; }
body.rslt .form-message.error { background: var(--red-bg) !important; color: var(--red) !important; border-color: transparent !important; }

/* Reviews list */
body.rslt .reviews-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 0; padding: 0; margin-bottom: 14px; }
body.rslt .reviews-header h2 { margin: 0; }
body.rslt .review-sort { color: var(--muted); font-size: .9rem; }
body.rslt .reviews-list { display: flex; flex-direction: column; gap: 12px; }
body.rslt .review-item {
	background: var(--surface-2) !important; border: 1px solid transparent !important; border-radius: var(--radius) !important;
	padding: 16px 18px !important; margin: 0 !important; box-shadow: none !important; color: var(--text-2);
}
body.rslt .review-item:hover { border-color: var(--border) !important; }
body.rslt .review-author, body.rslt .review-author strong, body.rslt .review-author h4, body.rslt .review-title { color: var(--text) !important; }
body.rslt .review-date { color: var(--muted) !important; }
body.rslt .review-content { color: var(--text-2) !important; line-height: 1.65; }
body.rslt .review-rating, body.rslt .review-rating .stars { color: var(--star) !important; }
body.rslt .review-rating span:not(.stars) { color: var(--text-2); }
body.rslt .criterion-badge, body.rslt .review-criteria-scores span {
	background: var(--surface) !important; color: var(--text-2) !important; border: 1px solid var(--border) !important; border-radius: 999px !important;
}
body.rslt .business-owner-reply, body.rslt .admin-reply {
	background: var(--brand-softer) !important; border-left: 3px solid var(--brand) !important; border-radius: 10px !important; color: var(--text-2) !important;
}
body.rslt .business-owner-reply strong, body.rslt .admin-reply strong { color: var(--brand-text) !important; }
body.rslt .review-item img.avatar, body.rslt .review-author img { border-radius: 999px; }
body.rslt .no-reviews { color: var(--muted); background: transparent !important; }

/* Message modal */
body.rslt .rsl-msg-box { background: var(--surface) !important; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg) !important; }
body.rslt .rsl-msg-header, body.rslt .rsl-msg-footer { border-color: var(--border) !important; }
body.rslt .rsl-msg-field input, body.rslt .rsl-msg-field textarea { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border-strong) !important; }
body.rslt .rsl-msg-send { background: var(--brand) !important; }

/* ---------- Submit listing form ---------- */
body.rslt .rankright-submit-listing-form,
body.rslt .rankright-submit-listing-login,
body.rslt .reviewsl-submit-product-form,
body.rslt .reviewsl-submit-product-login {
	max-width: 820px; margin: 0 auto; background: var(--surface) !important; border: 1px solid var(--border);
	border-radius: var(--radius-lg) !important; box-shadow: var(--shadow) !important; padding: 32px !important; color: var(--text-2);
}
body.rslt .form-header { border-color: var(--border) !important; }
body.rslt .form-header h2 { color: var(--text) !important; font-weight: 800; }
body.rslt .form-description, body.rslt .form-footer, body.rslt .form-notice { color: var(--muted) !important; }
body.rslt .form-section { border-color: var(--border) !important; }
body.rslt .form-section h3 { color: var(--brand-text) !important; border-color: var(--border) !important; font-weight: 800; }
body.rslt .form-group.required label::after { color: var(--brand) !important; }
body.rslt .upload-placeholder { background: var(--surface-2) !important; border: 2px dashed var(--border-strong) !important; border-radius: var(--radius) !important; color: var(--muted) !important; }
body.rslt .upload-placeholder:hover { border-color: var(--brand) !important; background: var(--brand-softer) !important; }
body.rslt .upload-placeholder p { color: var(--text) !important; }
body.rslt .upload-placeholder .dashicons { color: var(--brand) !important; }
body.rslt .rsl-crop-btn--primary { background: var(--brand); border-color: var(--brand); }
/* The plugin marks required labels with "*" in markup AND via ::after — show just one. */
body.rslt .rankright-submit-listing-form .form-group.required label::after { content: none; }

/* ---------- Search / leaderboard shortcodes ---------- */
body.rslt .rankright-search-input, body.rslt .filter-select {
	background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; border-radius: 12px !important;
}
body.rslt .search-result-card, body.rslt .leaderboard-item, body.rslt .category-card {
	background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; color: var(--text-2); box-shadow: none !important;
}
body.rslt .search-result-title a, body.rslt .listing-name a, body.rslt .leaderboard-title { color: var(--text) !important; }
body.rslt .search-result-image { background: var(--thumb-bg); }
body.rslt .search-result-score, body.rslt .rank-gold { background: var(--brand) !important; }

/* ---------- Plugin dashboards & older shortcodes: light "island" in dark mode ---------- */
/* These screens hard-code light backgrounds in many places; keeping them light in dark
   mode is safer than half-converting them. */
html[data-theme="dark"] body.rslt .rankright-user-profile,
html[data-theme="dark"] body.rslt .rankright-business-dashboard,
html[data-theme="dark"] body.rslt .reviewsl-staff-dashboard,
html[data-theme="dark"] body.rslt .reviewsl-product-catalog,
html[data-theme="dark"] body.rslt .reviewsl-brand-leaderboard,
html[data-theme="dark"] body.rslt .rankright-categories-grid,
html[data-theme="dark"] body.rslt [class^="rsl-"][class$="-wrap"],
html[data-theme="dark"] body.rslt .rsl-widget {
	color-scheme: light; background: #fff; color: #1f2937; border-radius: var(--radius-lg); padding: 20px;
}

/* User bar (only when the theme's account menu is turned off) */
body.rslt #reviewsl-user-bar { background: var(--surface) !important; border-bottom: 1px solid var(--border); color: var(--text-2); }
body.rslt #reviewsl-user-bar a { color: var(--text-2) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.listing-layout { grid-template-columns: 1fr; }
	.listing-aside { position: static; }
	.lh-grid { grid-template-columns: 100px minmax(0, 1fr); }
	.lh-thumb { width: 100px; height: 100px; }
	.lh-score { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; text-align: left; }
	.ring { width: 76px; height: 76px; }
	.ring span { width: 60px; height: 60px; font-size: 1.3rem; }
}
@media (max-width: 640px) {
	.lh-grid { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
	.lh-thumb { width: 72px; height: 72px; border-radius: 16px; }
	.lh-actions { grid-column: 1 / -1; }
	.lh-main { display: contents; }
	.lh-title { grid-column: 2; align-self: end; font-size: 1.4rem; }
	.lh-rating, .lh-tags, .lh-actions { grid-column: 1 / -1; }
	.lh-tags { margin: 0; }
	.lh-actions .tbtn { flex: 1; }
	body.rslt .listing-content, body.rslt .review-form-section, body.rslt .reviews-section,
	body.rslt .rsl-branches-section, body.rslt .rsl-branch-of-section { padding: 16px !important; border-radius: var(--radius); }
	body.rslt .rankright-submit-listing-form { padding: 18px !important; }
}

/* Long review lists: theme JS shows 10 at a time */
body.rslt .review-item.is-more { display: none; }
.reviews-more { display: flex; margin: 16px auto 0; }
/* Plugin guest box renders empty when no login method is configured */
body.rslt .guest-review-container:not(:has(*)) { display: none; }
body.rslt .form-footer, body.rslt .form-actions { border-color: var(--border) !important; }