/*
 * Shining Star family sponsorship (task 41176911).
 *
 * Hand written and served as-is rather than compiled into dist/main.css, the
 * same way ss-sponsor-confirm.css is, and enqueued only where families show:
 * the child grid's Reset button and family pop-up, and the "Children in this
 * family" row on a child's page. Every value binds to a brand token declared
 * in assets/css/tailwind.css.
 */

/* Reset all filters: a quiet text button at the foot of the filter panel. */
.cckc-ss-reset {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-primary, #192a4a);
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cckc-ss-reset:hover {
	color: var(--color-secondary, #b85c38);
}

.cckc-ss-reset--inline {
	margin-top: 12px;
	font-size: 15px;
}

/*
 * Family pop-up: a native dialog, closed until the View Family button opens it.
 * The margin restores the browser's centering, which the global reset removes.
 */
.cckc-ss-family-dialog {
	margin: auto;
	width: calc(100% - 40px);
	max-width: 560px;
	max-height: calc(100vh - 40px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--color-cream, #f7f7f5);
	color: var(--color-dark, #4a4a42);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.cckc-ss-family-dialog::backdrop {
	background: var(--color-primary-70, rgba(25, 42, 74, 0.7));
}

.cckc-ss-family-dialog__inner {
	padding: 28px;
}

.cckc-ss-family-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.cckc-ss-family-dialog__title {
	margin: 0;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.1;
}

.cckc-ss-family-dialog__close {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(25, 42, 74, 0.15);
	border-radius: 999px;
	background: #fff;
	color: var(--color-primary, #192a4a);
	cursor: pointer;
}

.cckc-ss-family-dialog__close:hover {
	background: var(--color-primary, #192a4a);
	color: #fff;
}

.cckc-ss-family-dialog__note {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.6;
}

.cckc-ss-family-dialog__list {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.cckc-ss-family-dialog__child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 14px;
	padding: 14px 16px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 14px;
	background: #fff;
}

.cckc-ss-family-dialog__child + .cckc-ss-family-dialog__child {
	margin-top: 10px;
}

.cckc-ss-family-dialog__go,
.cckc-ss-family-dialog__done {
	flex-shrink: 0;
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.cckc-ss-family-dialog__go {
	border: 2px solid var(--color-primary, #192a4a);
	background: var(--color-primary, #192a4a);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.cckc-ss-family-dialog__go:hover {
	background: #fff;
	color: var(--color-primary, #192a4a);
}

.cckc-ss-family-dialog__done {
	border: 1px solid rgba(184, 92, 56, 0.25);
	background: rgba(184, 92, 56, 0.1);
	color: var(--color-secondary, #b85c38);
}

/* Phones: the action drops under the name so neither is squeezed. */
@media (max-width: 479px) {
	.cckc-ss-family-dialog__inner {
		padding: 22px 18px;
	}

	.cckc-ss-family-dialog__go,
	.cckc-ss-family-dialog__done {
		width: 100%;
	}
}

/* Children in this family, on a child's own page. */
.cckc-ss-sibling {
	transition: border-color 0.15s, box-shadow 0.15s;
}

.cckc-ss-sibling:hover {
	border-color: var(--color-primary, #192a4a);
	box-shadow: 0 6px 18px rgba(25, 42, 74, 0.08);
}

.cckc-ss-sibling__status {
	flex-shrink: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--color-primary, #192a4a);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.cckc-ss-sibling__status.is-done {
	background: rgba(184, 92, 56, 0.1);
	color: var(--color-secondary, #b85c38);
}