/* MySP Writer — [mysp_writer_editor_picks]. Warna mengikuti theme; hanya aksen bintang dan biru yang tetap. */
.mysp-writer-ep {
	--mysp-writer-ep-cols: 4;
	--mysp-writer-ep-ratio: 3 / 4;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(var(--mysp-writer-ep-cols), minmax(0, 1fr));
	gap: 22px 16px;
	max-width: 100%;
	color: inherit;
}

.mysp-writer-ep *,
.mysp-writer-ep *::before,
.mysp-writer-ep *::after { box-sizing: border-box; }

.mysp-writer-ep--novel { --mysp-writer-ep-ratio: 2 / 3; }
.mysp-writer-ep--article { --mysp-writer-ep-ratio: 16 / 10; }

.mysp-writer-ep-card { min-width: 0; }

.mysp-writer-ep .mysp-writer-ep-cover {
	position: relative;
	display: block;
	aspect-ratio: var(--mysp-writer-ep-ratio);
	overflow: hidden;
	margin: 0 0 8px;
	border-radius: 10px;
	background: rgba(127, 127, 127, .14);
	box-shadow: 0 4px 14px rgba(15, 23, 42, .14);
	transition: transform .15s;
	text-decoration: none;
}

.mysp-writer-ep .mysp-writer-ep-cover:hover { transform: translateY(-3px); }

.mysp-writer-ep .mysp-writer-ep-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.mysp-writer-ep .mysp-writer-ep-empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	opacity: .75;
}

.mysp-writer-ep .dashicons { width: 16px; height: 16px; font-size: 16px; line-height: 1; }
.mysp-writer-ep .mysp-writer-ep-empty .dashicons { width: 32px; height: 32px; font-size: 32px; }

.mysp-writer-ep .mysp-writer-ep-flag {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 9px 2px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	color: #7a4b00;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
}

.mysp-writer-ep .mysp-writer-ep-flag .dashicons { width: 14px; height: 14px; font-size: 14px; color: #dba617; }

.mysp-writer-ep p { margin: 0; padding: 0; }

.mysp-writer-ep .mysp-writer-ep-kind {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #0872b5;
}

.mysp-writer-ep .mysp-writer-ep-title { margin: 2px 0 2px; padding: 0; font-size: 15px; line-height: 1.3; }

.mysp-writer-ep .mysp-writer-ep-title a,
.mysp-writer-ep .mysp-writer-ep-title a:visited { color: inherit; text-decoration: none; }

.mysp-writer-ep .mysp-writer-ep-title a:hover,
.mysp-writer-ep .mysp-writer-ep-title a:focus { color: #0872b5; }

.mysp-writer-ep .mysp-writer-ep-meta { font-size: 12px; opacity: .7; }

.mysp-writer-ep-note { padding: 10px 14px; border: 1px dashed rgba(127, 127, 127, .5); border-radius: 8px; font-size: 13px; opacity: .8; }

/* ---------- Tampilan daftar (widget / sidebar) ---------- */

.mysp-writer-ep.mysp-writer-ep-list { display: block; margin: 0; padding: 0; list-style: none; }

.mysp-writer-ep-list .mysp-writer-ep-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid rgba(127, 127, 127, .2);
}

.mysp-writer-ep-list .mysp-writer-ep-item:last-child { border-bottom: 0; }

.mysp-writer-ep-list .mysp-writer-ep-thumb {
	position: relative;
	flex: none;
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 8px;
	background: rgba(127, 127, 127, .14);
	text-decoration: none;
}

.mysp-writer-ep-list .mysp-writer-ep-thumb .mysp-writer-ep-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
.mysp-writer-ep-list .mysp-writer-ep-thumb .mysp-writer-ep-empty { position: absolute; inset: 0; padding: 0; }
.mysp-writer-ep-list .mysp-writer-ep-thumb .mysp-writer-ep-empty span:not(.dashicons) { display: none; }
.mysp-writer-ep-list .mysp-writer-ep-thumb .mysp-writer-ep-empty .dashicons { width: 24px; height: 24px; font-size: 24px; }

.mysp-writer-ep-list .mysp-writer-ep-item-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }

.mysp-writer-ep-list a.mysp-writer-ep-item-title,
.mysp-writer-ep-list a.mysp-writer-ep-item-title:visited {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.mysp-writer-ep-list a.mysp-writer-ep-item-title:hover,
.mysp-writer-ep-list a.mysp-writer-ep-item-title:focus { color: #0872b5; }

.mysp-writer-ep-list .mysp-writer-ep-item-meta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; line-height: 1.3; opacity: .7; }
.mysp-writer-ep-list .mysp-writer-ep-item-meta .dashicons { flex: none; width: 13px; height: 13px; font-size: 13px; color: #dba617; }

@media (max-width: 900px) {
	.mysp-writer-ep { grid-template-columns: repeat(min(var(--mysp-writer-ep-cols), 3), minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.mysp-writer-ep { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
}

/* ---------- Arah widget: horizontal ---------- */
.mysp-writer-ep-dir--h .mysp-writer-ep.mysp-writer-ep-list { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mysp-writer-ep-dir--h .mysp-writer-ep-list .mysp-writer-ep-item { flex: 1 1 220px; min-width: 0; border-bottom: 0; }

/* ==========================================================================
 * Gaya datar selaras theme (AF): kotak lurus, biru solid, bayangan tipis
 * ========================================================================== */
.mysp-writer-ep { --mysp-writer-ep-accent: #1b6fc2; }

.mysp-writer-ep-card { padding: 0; border: 0; background: none; border-radius: 0; }
.mysp-writer-ep .mysp-writer-ep-cover { border-radius: 2px; box-shadow: none; }
.mysp-writer-ep .mysp-writer-ep-cover:hover { transform: none; }
.mysp-writer-ep .mysp-writer-ep-img { transition: transform .4s ease; }
.mysp-writer-ep .mysp-writer-ep-card:hover .mysp-writer-ep-img { transform: scale(1.04); }

/* Badge: kotak biru solid seperti label "POPULAR TAGS" */
.mysp-writer-ep .mysp-writer-ep-flag {
	top: 0;
	left: 0;
	right: auto;
	padding: 3px 9px 3px 6px;
	border: 0;
	border-radius: 0;
	background: var(--mysp-writer-ep-accent);
	color: #fff;
	font-size: 10px;
	letter-spacing: .03em;
	text-transform: uppercase;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.mysp-writer-ep .mysp-writer-ep-flag .dashicons { color: #ffd24a; }

.mysp-writer-ep .mysp-writer-ep-kind { display: inline; padding: 0; background: none; color: var(--mysp-writer-ep-accent); }
.mysp-writer-ep .mysp-writer-ep-title { margin: 4px 0 2px; font-weight: 600; }
.mysp-writer-ep .mysp-writer-ep-title a:hover,
.mysp-writer-ep .mysp-writer-ep-title a:focus { color: var(--mysp-writer-ep-accent); }

/* Daftar ringkas: gaya baris berita theme (thumbnail persegi, judul tebal) */
.mysp-writer-ep-list .mysp-writer-ep-item { padding: 6px 0; border: 0; border-radius: 0; background: none; }
.mysp-writer-ep-list .mysp-writer-ep-thumb { border-radius: 2px; box-shadow: none; }
.mysp-writer-ep-list a.mysp-writer-ep-item-title { font-weight: 600; }
.mysp-writer-ep-list a.mysp-writer-ep-item-title:hover,
.mysp-writer-ep-list a.mysp-writer-ep-item-title:focus { color: var(--mysp-writer-ep-accent); }

@media (prefers-reduced-motion: reduce) {
	.mysp-writer-ep .mysp-writer-ep-img { transition: none; }
	.mysp-writer-ep .mysp-writer-ep-card:hover .mysp-writer-ep-img { transform: none; }
}

/* Ikon bintang sebelum judul widget "Editor Pic" */
.mysp-bm .mysp-bm-widget.mysp-writer-ep-widget .mysp-bm-title::before,
.mysp-writer-ep-widget .widget-title::before {
	content: "\f155" !important;
	display: inline-block !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 7px 0 0 !important;
	background: none !important;
	box-shadow: none !important;
	font: normal 17px/1 dashicons !important;
	color: #ffd24a !important;
	-webkit-font-smoothing: antialiased;
}