/**
 * Company Reviews — front-end styles. Uses theme design tokens (--csr-*) with fallbacks.
 */

.crv {
	--_card: var( --csr-color-card, #fff );
	--_border: var( --csr-color-border, #e6e8eb );
	--_text: var( --csr-color-text, #1a1d21 );
	--_muted: var( --csr-color-muted, #6b7280 );
	--_accent: var( --csr-color-accent, #18a058 );
	--_star: var( --csr-color-star-active, #f5a623 );
	color: var( --_text );
}

.crv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.crv-head__title { margin: 0; font-size: 1.4rem; font-weight: 700; }
.crv-aggregate { display: inline-flex; align-items: baseline; gap: 8px; }
.crv-aggregate__score { font-size: 2rem; font-weight: 800; color: var( --_text ); }
.crv-aggregate__of { color: var( --_muted ); font-weight: 600; }
.crv-aggregate__count { color: var( --_muted ); font-size: 0.9rem; align-self: center; }

.crv-stars { display: inline-flex; letter-spacing: 1px; }
.crv-star { color: var( --csr-color-star, #d4d8dd ); font-size: 1.05rem; line-height: 1; }
.crv-star.is-on { color: var( --_star ); }
.crv-aggregate .crv-stars { font-size: 1.2rem; align-self: center; }

.crv-notice { padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.crv-notice--ok { background: #eafaf1; border: 1px solid #bfe9cf; color: #146c3a; }
.crv-notice--err { background: #fdecec; border: 1px solid #f3c9c9; color: #98292b; }

.crv-list { list-style: none; margin: 18px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.crv-card { border: 1px solid var( --_border ); border-radius: var( --csr-radius, 14px ); padding: 18px 20px; background: var( --_card ); box-shadow: var( --csr-shadow-sm, 0 1px 3px rgba( 0, 0, 0, 0.05 ) ); }
.crv-card__top { display: flex; align-items: center; gap: 12px; }
.crv-card__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: var( --_accent ); text-transform: uppercase; }
.crv-card__meta { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.crv-card__author { font-weight: 700; }
.crv-card__date { font-size: 0.8rem; color: var( --_muted ); }
.crv-card__body { margin: 12px 0 0; }
.crv-card__pc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-top: 12px; }
.crv-pc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 0.92rem; }
.crv-pc li { position: relative; padding-left: 22px; }
.crv-pc--pros li::before { content: "✓"; position: absolute; left: 0; color: var( --_accent ); font-weight: 800; }
.crv-pc--cons li::before { content: "✕"; position: absolute; left: 0; color: var( --csr-color-danger, #e5484d ); font-weight: 800; }

.crv-empty { color: var( --_muted ); padding: 16px 0; }

/* ---- Submission form ---- */
.crv-form-wrap { border: 1px solid var( --_border ); border-radius: var( --csr-radius, 14px ); padding: 24px; background: var( --csr-color-zebra, #f8f9fa ); }
.crv-form__title { margin: 0 0 16px; font-size: 1.2rem; font-weight: 700; }
.crv-form { display: flex; flex-direction: column; gap: 14px; }
.crv-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.crv-form__field { display: flex; flex-direction: column; gap: 6px; }
.crv-form__field > span { font-weight: 600; font-size: 0.9rem; }
.crv-form input[type="text"], .crv-form textarea {
	width: 100%; padding: 11px 13px; border: 1px solid var( --_border ); border-radius: 10px; font: inherit; background: #fff; color: var( --_text );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.crv-form input:focus, .crv-form textarea:focus { outline: none; border-color: var( --_accent ); box-shadow: var( --csr-ring, 0 0 0 3px rgba( 24, 160, 88, 0.2 ) ); }
.crv-form textarea { resize: vertical; }

/* Honeypot — hidden from humans */
.crv-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

/* No-JS star input (reverse-order trick) */
.crv-rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.crv-rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.crv-rate label { font-size: 1.9rem; line-height: 1; color: var( --csr-color-star, #d4d8dd ); cursor: pointer; transition: color 0.1s ease, transform 0.1s ease; }
.crv-rate label:hover, .crv-rate label:hover ~ label, .crv-rate input:checked ~ label { color: var( --_star ); }
.crv-rate label:hover { transform: scale( 1.1 ); }
.crv-rate input:focus-visible + label { outline: 2px solid var( --_accent ); outline-offset: 2px; border-radius: 4px; }

.crv-submit {
	align-self: flex-start;
	display: inline-flex; align-items: center;
	padding: 12px 26px; border: 0; border-radius: var( --csr-radius-btn, 10px );
	background: var( --csr-grad-cta, #f5a623 ); color: var( --csr-color-cta-text, #1a1d21 );
	font-weight: 700; font-size: 1rem; cursor: pointer;
	box-shadow: 0 6px 14px rgba( 245, 166, 35, 0.35 );
	transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.crv-submit:hover { transform: translateY( -1px ); box-shadow: 0 10px 20px rgba( 245, 166, 35, 0.45 ); }

@media ( max-width: 600px ) {
	.crv-form__row, .crv-card__pc { grid-template-columns: 1fr; }
}