/**
 * [B] Juegocito Community - Frontend styles.
 *
 * Depends on Core's tokens.css for the palette and fonts (enqueued as a
 * dependency), and reuses Core's .bdw-jc-button / .bdw-jc-input / .bdw-jc-chip
 * primitives so a review form looks like the rest of the platform instead of
 * like a bolted-on comment plugin. Only the pieces Core has no equivalent for
 * live here.
 */

.bdw-jcm {
	font-family: var(--bdw-font-body, sans-serif);
	color: var(--bdw-ink, #16241F);
}

.bdw-jcm h2 {
	font-family: var(--bdw-font-display, sans-serif);
	font-size: 24px;
	margin: 32px 0 14px;
	color: var(--bdw-green-900, #0A3B31);
}

/* ---------- Stars ---------- */

.bdw-jcm-stars {
	color: var(--bdw-yellow-500, #F5B33C);
	letter-spacing: 2px;
	font-size: 18px;
	line-height: 1;
}

.bdw-jcm-stars__value {
	font-weight: 700;
}

/* ---------- Aggregate summary ---------- */

.bdw-jcm-aggregate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--bdw-cream, #FFF6EA);
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: 16px;
	margin-bottom: 18px;
}

.bdw-jcm-aggregate__score {
	font-family: var(--bdw-font-display, sans-serif);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var(--bdw-green-800, #0E4C3F);
}

/* ---------- Review form ---------- */

.bdw-jcm-review-form {
	background: var(--bdw-paper, #FFFDF8);
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: 18px;
	padding: 18px 20px;
	margin-bottom: 24px;
}

.bdw-jcm-rating-picker {
	border: 0;
	padding: 0;
	margin: 0 0 12px;
}

.bdw-jcm-rating-picker legend {
	font-weight: 700;
	font-size: 14px;
	padding: 0;
	margin-bottom: 6px;
}

.bdw-jcm-rating-picker__star {
	display: inline-block;
	cursor: pointer;
	font-size: 30px;
	line-height: 1;
	color: var(--bdw-line, #DED4C6);
	transition: color 0.12s ease;
}

/* The radio itself is visually hidden but still focusable and still the thing
   screen readers and keyboards operate: the stars are labels for it, not a
   custom widget. */
.bdw-jcm-rating-picker__star input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.bdw-jcm-rating-picker__star:hover,
.bdw-jcm-rating-picker__star:has(input:checked) {
	color: var(--bdw-yellow-500, #F5B33C);
}

.bdw-jcm-rating-picker__star:has(input:focus-visible) {
	outline: 2px solid var(--bdw-green-600, #177C63);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Fallback for browsers without :has() - the checked star still gets colored
   through this sibling rule when the markup order allows it. */
.bdw-jcm-rating-picker__star input:checked ~ span[aria-hidden="true"] {
	color: var(--bdw-yellow-500, #F5B33C);
}

.bdw-jcm-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	max-width: 620px;
	margin: 0 0 12px;
}

.bdw-jcm-field label,
.bdw-jcm-field > span {
	font-weight: 700;
	font-size: 14px;
}

/* ---------- Review cards ---------- */

.bdw-jcm-review {
	border-top: 1px solid var(--bdw-line, #DED4C6);
	padding: 18px 0;
}

.bdw-jcm-review.is-hidden {
	opacity: 0.72;
	background: var(--bdw-coral-100, #FFE2DA);
	border-radius: 14px;
	padding: 14px 16px;
	border-top: 0;
	margin-bottom: 12px;
}

.bdw-jcm-review__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.bdw-jcm-review__head img,
.bdw-jcm-comment__head img {
	border-radius: 50%;
}

.bdw-jcm-review__head > div {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	margin-right: auto;
}

.bdw-jcm-review__title {
	font-family: var(--bdw-font-display, sans-serif);
	font-size: 18px;
	margin: 0 0 6px;
}

.bdw-jcm-review__body {
	line-height: 1.55;
	margin-bottom: 8px;
}

.bdw-jcm-review__foot,
.bdw-jcm-comment__foot {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13px;
}

.bdw-jcm-flag {
	font-size: 13px;
	font-weight: 700;
	color: var(--bdw-coral-700, #B8341F);
	margin: 0 0 8px;
}

/* ---------- Comments ---------- */

.bdw-jcm-comments--compact {
	margin-top: 14px;
	padding-left: 14px;
	border-left: 3px solid var(--bdw-line, #DED4C6);
}

.bdw-jcm-comments__title {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--bdw-muted, #68756F);
}

.bdw-jcm-comment {
	padding: 12px 0;
	border-bottom: 1px dashed var(--bdw-line, #DED4C6);
}

.bdw-jcm-comment:last-child {
	border-bottom: 0;
}

.bdw-jcm-comment--hidden,
.bdw-jcm-comment--pending {
	background: var(--bdw-yellow-100, #FFF0CF);
	border-radius: 12px;
	padding: 12px 14px;
	border-bottom: 0;
}

.bdw-jcm-comment--hidden {
	background: var(--bdw-coral-100, #FFE2DA);
}

.bdw-jcm-comment__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 6px;
	font-size: 14px;
}

.bdw-jcm-comment__body {
	line-height: 1.55;
	margin-bottom: 6px;
}

.bdw-jcm-comment__replies {
	margin: 10px 0 0 22px;
	padding-left: 14px;
	border-left: 3px solid var(--bdw-green-100, #D6F2E8);
}

.bdw-jcm-comment-form,
.bdw-jcm-reply-form,
.bdw-jcm-edit-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	max-width: 620px;
	margin-top: 12px;
}

.bdw-jcm-comment-form textarea,
.bdw-jcm-reply-form textarea,
.bdw-jcm-edit-form textarea {
	width: 100%;
}

/* ---------- Player photos ---------- */

.bdw-jcm-gallery {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}

.bdw-jcm-gallery__item {
	background: var(--bdw-paper, #FFFDF8);
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.bdw-jcm-gallery__item.is-hidden {
	border-color: var(--bdw-coral-700, #B8341F);
	opacity: 0.75;
}

.bdw-jcm-gallery__item img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.bdw-jcm-gallery__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	font-size: 12px;
}

.bdw-jcm-photo-form {
	background: var(--bdw-paper, #FFFDF8);
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: 18px;
	padding: 16px 18px;
	max-width: 620px;
}

/* ---------- Notifications inbox ---------- */

.bdw-jcm-inbox {
	background: var(--bdw-paper, #FFFDF8);
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: 22px;
	padding: 24px 26px;
	box-shadow: var(--bdw-shadow, 0 18px 55px rgba(22, 36, 31, 0.08));
}

.bdw-jcm-inbox__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.bdw-jcm-inbox__head h2 {
	margin: 0;
	margin-right: auto;
}

.bdw-jcm-inbox__prefs {
	background: var(--bdw-cream, #FFF6EA);
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: 16px;
	padding: 12px 16px;
	margin-bottom: 18px;
}

.bdw-jcm-inbox__prefs > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--bdw-green-800, #0E4C3F);
}

.bdw-jcm-prefs-form {
	margin-top: 12px;
}

.bdw-jcm-prefs-form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 12px;
}

.bdw-jcm-prefs-form legend {
	font-weight: 700;
	font-size: 14px;
	padding: 0;
	margin-bottom: 6px;
}

.bdw-jcm-prefs-form__option {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.4;
}

.bdw-jcm-prefs-form__status {
	margin-left: 10px;
	font-size: 13px;
	color: var(--bdw-green-700, #12634F);
}

.bdw-jcm-inbox__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bdw-jcm-notification {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px dashed var(--bdw-line, #DED4C6);
}

.bdw-jcm-notification:last-child {
	border-bottom: 0;
}

.bdw-jcm-notification.is-unread {
	background: var(--bdw-green-100, #D6F2E8);
	border-radius: 12px;
	border-bottom: 0;
	margin-bottom: 4px;
}

.bdw-jcm-notification img {
	border-radius: 50%;
	flex: 0 0 auto;
}

.bdw-jcm-notification__icon {
	font-size: 24px;
	line-height: 1;
	flex: 0 0 36px;
	text-align: center;
}

.bdw-jcm-notification__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-right: auto;
	line-height: 1.4;
}

.bdw-jc-nav__links a.has-badge {
	font-weight: 800;
}

@media (max-width: 720px) {
	.bdw-jcm-inbox {
		padding: 18px 16px;
	}

	.bdw-jcm-comment__replies {
		margin-left: 8px;
	}

	.bdw-jcm-aggregate {
		padding: 12px 14px;
	}
}