/**
 * Public Kids Section styling - bright, warm, playful. Deliberately the
 * opposite visual language from the dark Netflix adult theme.
 */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

body.ap-kids-page {
	margin: 0;
	background: linear-gradient( 180deg, #fff8ec 0%, #fef1da 100% );
	color: #4a3b2a;
	font-family: 'Inter', -apple-system, sans-serif;
	min-height: 100vh;
}

.ap-kids-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 2.5rem 5vw 4rem;
}

.ap-kids-back {
	display: inline-block;
	color: #d6772f;
	text-decoration: none;
	font-weight: 700;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

.ap-kids-back:hover {
	color: #b85a1f;
}

.ap-kids-story-card,
#ap-kids-activity-app {
	background: #fff;
	border-radius: 24px;
	padding: 2.5rem;
	box-shadow: 0 10px 30px -10px rgba(180, 120, 50, 0.25);
	border: 3px solid #ffe1ad;
}

.ap-kids-story-card h1,
.ap-kids-activity-title {
	font-family: 'Baloo 2', cursive;
	font-size: clamp( 1.8rem, 5vw, 2.5rem );
	color: #d6772f;
	margin: 0 0 1.25rem;
	font-weight: 700;
}

.ap-kids-story-content {
	font-size: 1.1rem;
	line-height: 1.8;
	color: #5a4632;
}

.ap-kids-story-content img {
	max-width: 100%;
	border-radius: 16px;
	margin: 1rem 0;
}

.ap-kids-login-gate {
	background: #fff;
	border-radius: 24px;
	padding: 3.5rem 2rem;
	text-align: center;
	border: 3px dashed #ffd28a;
}

.ap-kids-login-gate h2 {
	font-family: 'Baloo 2', cursive;
	color: #d6772f;
	font-size: 1.6rem;
	margin: 0 0 0.75rem;
}

.ap-kids-login-gate p {
	color: #8a7560;
	font-size: 1.05rem;
	margin-bottom: 1.5rem;
}

.ap-kids-field {
	margin-bottom: 1.75rem;
}

.ap-kids-field label {
	display: block;
	font-weight: 700;
	font-size: 1.05rem;
	color: #5a4632;
	margin-bottom: 10px;
}

.ap-kids-field input[type="text"] {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid #ffe1ad;
	border-radius: 14px;
	font-size: 1rem;
	font-family: inherit;
	background: #fffaf0;
	transition: border-color 0.2s ease;
}

.ap-kids-field input[type="text"]:focus {
	border-color: #f2a93b;
	outline: none;
	background: #fff;
}

.ap-kids-question-card {
	background: #fff9ef;
	border-radius: 16px;
	padding: 1.25rem;
	border: 2px solid #ffefd1;
}

.ap-kids-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ap-kids-option-btn {
	background: #fff;
	border: 2px solid #ffd28a;
	color: #8a5a20;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 12px 20px;
	border-radius: 14px;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s ease;
}

.ap-kids-option-btn:hover {
	background: #fff3dd;
	transform: translateY( -2px );
}

.ap-kids-option-btn.ap-kids-selected {
	background: #f2a93b;
	border-color: #f2a93b;
	color: #fff;
	transform: scale( 1.05 );
}

.ap-kids-btn {
	display: inline-block;
	background: #f2a93b;
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	padding: 16px 32px;
	border-radius: 16px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	transition: transform 0.15s ease, background 0.15s ease;
	box-shadow: 0 8px 20px -6px rgba(242, 169, 59, 0.5);
}

.ap-kids-btn:hover {
	background: #e0962a;
	transform: translateY( -2px );
}

.ap-kids-success-box {
	margin-top: 1.5rem;
	text-align: center;
	background: #eafaf0;
	border: 2px solid #b8e8c8;
	border-radius: 16px;
	padding: 1.5rem;
}

.ap-kids-success-emoji {
	font-size: 2.5rem;
	display: block;
	margin-bottom: 0.5rem;
}

.ap-kids-success-box p {
	color: #2d7a45;
	font-weight: 600;
	margin: 0;
}

.ap-kids-error-box {
	margin-top: 1.5rem;
	background: #fdeaea;
	border: 2px solid #f3b8b8;
	border-radius: 16px;
	padding: 1.25rem;
	color: #b03030;
	text-align: center;
	font-weight: 600;
}

@media ( max-width: 600px ) {
	.ap-kids-story-card, #ap-kids-activity-app { padding: 1.75rem; }
	.ap-kids-options { flex-direction: column; }
	.ap-kids-option-btn { width: 100%; text-align: center; }
}