/* ================================================================
   WARTA LOKAL — assets/css/bookmark.css
   ================================================================ */

/* ════════════════════════════════════════
   PAGE WRAPPER
════════════════════════════════════════ */
.wl-bookmark-page {
  padding-bottom: 40px;
}

/* ════════════════════════════════════════
   TOOLBAR
════════════════════════════════════════ */
.wl-bookmark-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--clr-white);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-gray-100);
}

.wl-bookmark-toolbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wl-bookmark-toolbar__count {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--clr-navy);
}

.wl-bookmark-toolbar__count i {
  color: var(--clr-gold);
  font-size: 15px;
}

.wl-bookmark-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wl-bookmark-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  transition: all var(--tr-fast);
  border: 1.5px solid transparent;
}

.wl-bookmark-toolbar__btn--clear {
  color: #c0392b;
  border-color: #f5c6c2;
  background: #fff5f5;
}

.wl-bookmark-toolbar__btn--clear:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: var(--clr-white);
}

/* ════════════════════════════════════════
   BOOKMARK LIST
════════════════════════════════════════ */

.wl-bookmark-list {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* CARD */
.wl-bookmark-card {
	display: flex;
	align-items: stretch;
	gap: 24px;

	padding: 20px;

	background: var(--clr-white);

	border: 1px solid var(--clr-gray-100);

	border-radius: 18px;

	overflow: hidden;

	transition:
		transform .25s ease,
		box-shadow .25s ease,
		border-color .25s ease;
}

.wl-bookmark-card:hover {
	transform: translateY(-3px);

	border-color: rgba(0,0,0,.06);

	box-shadow:
		0 12px 34px rgba(0,0,0,.06);
}

/* THUMB */
.wl-bookmark-card__thumb {
	width: 280px;
	flex-shrink: 0;
}

.wl-bookmark-card__thumb a {
	display: block;
	height: 100%;
}

.wl-bookmark-card__thumb img {
	width: 100%;
	height: 100%;

	min-height: 190px;

	object-fit: cover;

	border-radius: 14px;

	display: block;
}

/* BODY */
.wl-bookmark-card__body {
	flex: 1;

	display: flex;
	flex-direction: column;

	min-width: 0;
}

/* META */
.wl-bookmark-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;

	margin-bottom: 16px;
}

.wl-bookmark-card__meta .wl-meta-time {
	font-size: 13px;
	color: var(--clr-text-muted);
}

/* TITLE */
.wl-bookmark-card__title {
	display: block;

	font-size: 30px;

	font-weight: var(--fw-bold);

	line-height: 1.42;

	letter-spacing: -.02em;

	color: var(--clr-navy);

	text-decoration: none;

	margin-bottom: 24px;

	transition: color .2s ease;
}

.wl-bookmark-card__title:hover {
	color: var(--clr-gold);
}

/* FOOTER */
.wl-bookmark-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-top: auto;

	padding-top: 18px;

	border-top: 1px solid var(--clr-gray-100);
}

/* READ BUTTON */
.wl-bookmark-card__read {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	font-size: 14px;
	font-weight: var(--fw-semibold);

	color: var(--clr-navy);

	text-decoration: none;

	transition:
		transform .2s ease,
		color .2s ease;
}

.wl-bookmark-card__read:hover {
	color: var(--clr-gold);

	transform: translateX(2px);
}

/* REMOVE */
.wl-bookmark-remove {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	border: 0;
	background: transparent;

	cursor: pointer;

	font-size: 13px;
	font-weight: var(--fw-medium);

	color: #dc2626;

	padding: 0;

	transition:
		opacity .2s ease,
		transform .2s ease;
}

.wl-bookmark-remove:hover {
	opacity: .75;

	transform: translateY(-1px);
}

/* MOBILE */
@media (max-width: 768px) {

	.wl-bookmark-card {
		flex-direction: column;

		padding: 16px;
	}

	.wl-bookmark-card__thumb {
		width: 100%;
	}

	.wl-bookmark-card__thumb img {
		min-height: auto;
		height: 220px;
	}

	.wl-bookmark-card__title {
		font-size: 22px;

		margin-bottom: 18px;
	}

	.wl-bookmark-card__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

}

/* ════════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════ */
.wl-bookmark-empty {
  text-align: center;
  padding: 70px 24px;
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wl-bookmark-empty__icon {
  width: 80px;
  height: 80px;
  background: var(--clr-gold-pale);
  border: 2px solid var(--clr-gold-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.wl-bookmark-empty__icon i {
  font-size: 32px;
  color: var(--clr-gold);
}

.wl-bookmark-empty__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--clr-navy);
}

.wl-bookmark-empty__desc {
  font-size: 14px;
  color: var(--clr-text-muted);
  line-height: 1.7;
  max-width: 400px;
  margin-bottom: 8px;
}