:root {
	--bi-container-width: 1240px;

	--bi-font-body: 'Jost', sans-serif;
	--bi-font-heading: 'Oswald', sans-serif;

	--bi-text-primary: #111111;
	--bi-text-secondary: #6b7280;

	--bi-green: #16a34a;
}

a:hover {
	text-decoration: none;
	color: inherit;
}

/* =================================
   NEWCOMERS DETAIL PAGE
================================= */

.bi-newcomers-detail-page {

	padding: 40px 0;

}


/* main layout */

.bi-newcomers-detail-wrapper {

	display: grid;

	grid-template-columns: 75% 25%;

	gap: 40px;

}


/* =================================
   ARTICLE LEFT
================================= */

.bi-newcomers-title {
font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 15px;
  text-decoration: underline;

}


.bi-newcomers-category {

	display: inline-block;

	background: #eee;

	padding: 6px 14px;

	border-radius: 20px;

	font-size: 13px;

	margin-bottom: 10px;

}


.bi-newcomers-meta {

	display: flex;
	gap: 15px;

	font-size: 14px;
	color: #666;

	margin-bottom: 20px;

}


/* feature image */

.bi-newcomers-feature-image img {

	width: 100%;

	border-radius: 10px;

	margin-bottom: 30px;

}


/* =================================
   SIDEBAR
================================= */

.bi-sidebar-widget {

	background: #fff;

	border: 1px solid #eee;

	padding: 20px;

	border-radius: 10px;

	margin-bottom: 20px;

}


/* =================================
   RESPONSIVE
================================= */

@media (max-width:992px) {

	.bi-newcomers-detail-wrapper {

		grid-template-columns: 1fr;

	}

}


@media (max-width:768px) {

	.bi-newcomers-title {

		font-size: 30px;

	}

	.bi-newcomers-related-grid {

		grid-template-columns: repeat(2, 1fr);

	}

}


@media (max-width:480px) {

	.bi-newcomers-related-grid {

		grid-template-columns: 1fr;

	}

}


/* =================================
   NEWCOMERS ARTICLE HEADER
================================= */

.bi-newcomers-article-header {

	margin-bottom: 25px;

}


/* category */

.bi-newcomers-category {

	display: inline-block;

	background: #e5e5e5;

	padding: 6px 14px;

	border-radius: 20px;

	font-size: 13px;

	font-weight: 600;

	margin-bottom: 12px;

}


/* title */

.bi-newcomers-title {

	font-size: 48px;

	font-weight: 800;

	line-height: 1.1;

	margin-bottom: 15px;

	text-decoration: underline;

}


/* meta row */

.bi-newcomers-meta-row {

	font-size: 14px;

	color: #555;

	margin-bottom: 20px;

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	gap: 8px 12px;

}


/* .bi-newcomers-share { ... } — merged into .bi-newcomers-meta-row (share next to time) */


/* .bi-newcomers-share a { ... } — old row; kept commented in blade */


.bi-read-time {

	font-size: 14px;

	color: #444;

}


.bi-newcomers-meta-dot {

	color: #bbb;

	margin: 0 2px;

}


.bi-newcomers-meta-time-share {

	display: inline-flex;

	align-items: center;

	gap: 10px;

	white-space: nowrap;

}


.bi-new-meta {

	display: inline-flex;

	align-items: center;

	gap: 6px;

}


/* feature image */

.bi-newcomers-feature-image img {

	width: 100%;

	border-radius: 10px;

	margin-top: 10px;

}


/* =================================
   RESPONSIVE
================================= */

@media (max-width:992px) {

	.bi-newcomers-title {

		font-size: 38px;

	}

}


@media (max-width:768px) {

	.bi-newcomers-title {

		font-size: 30px;

	}

}


@media (max-width:480px) {

	.bi-newcomers-title {

		font-size: 24px;

	}

	.bi-newcomers-meta-row {

		flex-wrap: wrap;

	}

}

/* =================================
   NEWCOMERS GUIDE STEPS
================================= */

.bi-newcomers-steps {

	margin-top: 40px;

}

.bi-newcomers-steps p img {
	padding-left: 10px;
	padding-right: 10px;
}


.bi-newcomer-step {

	display: flex;

	gap: 16px;

	margin-bottom: 28px;

}


/* red number box */

.bi-step-number {

	width: 28px;

	height: 28px;

	background: #e50914;

	color: #fff;

	display: flex;

	align-items: center;

	justify-content: center;

	font-weight: 700;

	border-radius: 4px;

	font-size: 14px;

	flex-shrink: 0;

}


/* step content */

.bi-step-content h3 {

	font-size: 20px;

	font-weight: 800;

	margin-bottom: 8px;

}


.bi-step-content p {

	font-size: 15px;

	color: #333;

	line-height: 1.7;

	margin-bottom: 6px;

}


.bi-step-content ul {

	padding-left: 18px;

	margin-top: 6px;

}


.bi-step-content li {

	font-size: 15px;

	line-height: 1.7;

	margin-bottom: 3px;

}


/* ================================
   RESPONSIVE
================================ */

@media (max-width:768px) {

	.bi-step-content h3 {

		font-size: 18px;

	}

}


@media (max-width:480px) {

	.bi-newcomer-step {

		gap: 12px;

	}

	.bi-step-number {

		width: 24px;
		height: 24px;
		font-size: 13px;

	}

}


/* =================================
   SIDEBAR POPULAR CATEGORIES
================================= */

.bi-newcomers-sidebar-card {

	background: #fff;

	border: 1px solid #e6e6e6;

	border-radius: 14px;

	padding: 22px;

	margin-bottom: 25px;

}


/* title */

.bi-sidebar-title {

	font-size: 18px;

	font-weight: 700;

	margin-bottom: 18px;

}


/* list */

.bi-sidebar-categories {

	list-style: none;

	padding: 0;

	margin: 0;

}


.bi-sidebar-categories li {

	display: flex;

	justify-content: space-between;

	align-items: center;

	padding: 10px 0;

	font-size: 15px;

}


/* category link */

.bi-sidebar-categories a {

	text-decoration: none;

	color: #444;

	transition: 0.2s;

}


.bi-sidebar-categories a:hover {

	color: #000;

}


/* count badge */

.bi-sidebar-categories span {

	background: #e6e6e6;

	border-radius: 12px;

	padding: 3px 10px;

	font-size: 12px;

	font-weight: 600;

}


/* ================================
   RESPONSIVE
================================ */

@media (max-width:768px) {

	.bi-newcomers-sidebar-card {

		padding: 18px;

	}

}

.bi-newcomers-detail-sidebar {
	padding-left: 60px;
}


/* =================================
   SIDEBAR SUBSCRIBE
================================= */

.bi-newcomers-subscribe {

	background: #f3f3f3;

	padding: 30px 22px;

	border-radius: 10px;

	text-align: center;

	margin-bottom: 25px;

}


/* title */

.bi-subscribe-title {

	font-size: 20px;

	font-weight: 800;

	margin-bottom: 10px;

}


/* description */

.bi-subscribe-text {

	font-size: 14px;

	color: #555;

	line-height: 1.6;

	margin-bottom: 20px;

}


/* form */

.bi-subscribe-form {

	display: flex;

	flex-direction: column;

	gap: 15px;

}


/* input */

.bi-subscribe-form input {

	width: 100%;

	padding: 12px;

	border: none;

	background: #fff;

	border-radius: 4px;

	font-size: 14px;

	outline: none;

}


/* button */

.bi-subscribe-form button {

	background: #e50914;

	color: #fff;

	border: none;

	padding: 12px;

	font-size: 15px;

	font-weight: 600;

	border-radius: 6px;

	cursor: pointer;

	transition: 0.3s;

}


.bi-subscribe-form button:hover {

	background: #c80710;

}


/* =================================
   RESPONSIVE
================================ */

@media (max-width:768px) {

	.bi-newcomers-subscribe {

		padding: 25px 18px;

	}

}


/* =================================
   SIDEBAR ADVERTISEMENT
================================= */

.bi-newcomers-sidebar-ad {

	margin-bottom: 25px;

	border-radius: 12px;

	overflow: hidden;

}


.bi-newcomers-sidebar-ad img {

	width: 100%;

	display: block;

	border-radius: 12px;

}


/* =================================
   ADDITIONAL RESOURCES
================================= */

.bi-newcomers-resources {

	margin-top: 50px;
	padding-bottom: 30px;

}


.bi-resources-title {

	font-size: 32px;

	font-weight: 800;

	margin-bottom: 25px;

}


/* grid */

.bi-resources-grid {

	display: grid;

	grid-template-columns: repeat(4, 1fr);

	gap: 20px;

}


/* card */

.bi-resource-card {

	background: #fff;

	border-radius: 12px;

	border: 1px solid #e5e5e5;

	overflow: hidden;

	text-decoration: none;

	color: #000;

	transition: 0.3s;

}


.bi-resource-card:hover {

	transform: translateY(-5px);

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}


/* image */

.bi-resource-image {

	position: relative;

}


.bi-resource-image img {

	width: 100%;
	height: 230px;
	object-fit: cover;
	padding: 5px;
	border-radius: 14px;

}


/* category tag */

.bi-resource-tag {

	position: absolute;

	top: 10px;

	left: 10px;

	background: #fff;

	padding: 4px 10px;

	border-radius: 12px;

	font-size: 12px;

	font-weight: 600;

}


/* content */

.bi-resource-content {

	padding: 14px;

}


.bi-resource-meta {

	font-size: 13px;

	color: #666;

	margin-bottom: 8px;

}


.bi-resource-content h3 {

	font-size: 16px;

	font-weight: 700;

	line-height: 1.4;

}


/* =================================
   RESPONSIVE
================================= */

@media (max-width:992px) {

	.bi-resources-grid {

		grid-template-columns: repeat(2, 1fr);

	}

}


@media (max-width:480px) {

	.bi-resources-grid {

		grid-template-columns: 1fr;

	}

}


/* Share popup (news detail / homepage stories pattern) */

.bi-share-popup {

	position: fixed;

	inset: 0;

	background: rgba(0, 0, 0, 0.5);

	display: none;

	align-items: center;

	justify-content: center;

	z-index: 9999;

}

.bi-share-popup.active {

	display: flex;

}

.bi-share-box {

	background: #fff;

	padding: 24px;

	border-radius: 14px;

	width: 280px;

	text-align: center;

	animation: newcomersDetailPopupIn 0.25s ease;

}

@keyframes newcomersDetailPopupIn {

	from {

		transform: scale(0.8);

		opacity: 0;

	}

	to {

		transform: scale(1);

		opacity: 1;

	}

}

.bi-share-box h4 {

	margin-bottom: 18px;

	font-family: 'Oswald', sans-serif;

}

.bi-share-options {

	display: flex;

	justify-content: space-between;

	margin-bottom: 20px;

}

.bi-share-options a {

	width: 50px;

	height: 50px;

	border-radius: 50%;

	background: #f3f4f6;

	display: flex;

	align-items: center;

	justify-content: center;

	color: #111;

	font-size: 18px;

	transition: 0.3s;

	text-decoration: none;

}

.bi-share-options a:hover {

	background: #ff0000;

	color: #fff;

	transform: translateY(-3px);

}

.bi-share-close {

	border: none;

	background: #111;

	color: #fff;

	padding: 8px 16px;

	border-radius: 8px;

	cursor: pointer;

}

.bi-share {

	cursor: pointer;

}

.bi-newcomers-meta-time-share .newcomers-detail-share-trigger img {

	display: block;

}