/* Course Portal front-end styles */

.cp-notice {
	padding: 16px 20px;
	border-radius: 6px;
	background: #f1f1f1;
	margin: 16px 0;
}
.cp-notice-warning { background: #fff7e6; border: 1px solid #f5c343; }
.cp-notice-error   { background: #fdecea; border: 1px solid #f29a92; }
.cp-notice-success { background: #e9f9ee; border: 1px solid #6fcf97; }
.cp-notice ul { margin: 0; padding-left: 18px; }

/* Forms */
.cp-form { max-width: 420px; }
.cp-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.cp-field label { font-weight: 600; margin-bottom: 6px; }
.cp-field input {
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 15px;
}
.cp-button {
	background: #2563eb;
	color: #fff;
	border: none;
	padding: 11px 22px;
	border-radius: 6px;
	font-size: 15px;
	cursor: pointer;
}
.cp-button:hover { background: #1d4ed8; }
.cp-field-checkbox label { flex-direction: row; display: flex; align-items: center; gap: 8px; font-weight: 400; }

/* Accordion */
.cp-course-wrapper { max-width: 1100px; margin: 0 auto; }
.cp-module {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
}
.cp-module-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #f8f9fb;
	border: none;
	padding: 16px 18px;
	font-size: 16px;
	cursor: pointer;
	text-align: left;
	color: #1f2937 !important;
	font-family: inherit;
}
.cp-module-toggle:hover { background: #eef1f5; color: #1f2937 !important; }
.cp-module-title { font-weight: 600; flex: 1; color: #1f2937 !important; }
.cp-module-count { color: #777 !important; font-size: 13px; white-space: nowrap; }
.cp-module-icon { font-size: 20px; line-height: 1; width: 20px; text-align: center; transition: transform .2s; color: #1f2937 !important; }
.cp-module-toggle[aria-expanded="true"] .cp-module-icon { transform: rotate(45deg); }

.cp-module-content { padding: 18px; }

.cp-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.cp-video-card { cursor: pointer; }
.cp-video-thumb {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	background-color: #000;
	overflow: hidden;
}
.cp-play-icon {
	position: absolute;
	top: 50%; left: 50%;
	width: 56px; height: 56px;
	transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.65);
	border-radius: 50%;
}
.cp-play-icon::after {
	content: "";
	position: absolute;
	top: 50%; left: 56%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}
.cp-video-thumb iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border: 0;
	border-radius: 6px;
}
.cp-video-title {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

@media (max-width: 480px) {
	.cp-video-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.cp-module-toggle { padding: 14px; font-size: 15px; }
}