/* BRANDS-DIPLOMA-1 (NEHA-9, 2026-09-28)
 * Diploma ("Specialization") detail page — brandseducation.com, institute 14,
 * theme_select_id 33 (Skillora / udemy_theme).
 *
 * Loaded ONLY by resources/views/theme_page/udemy_theme/brand_diploma_detail.blade.php,
 * whose route 404s every other tenant, so nothing here can reach another institute.
 *
 * Lives in public/udemy-assets/css/ — the same home as the theme-33 header CSS.
 * NOT under resources/views: WEBROOT-DENY-2 (2026-09-23) 404s that whole tree, and
 * this server's unknown-path catch-all answers an EMPTY 200 rather than a 404, so a
 * stylesheet parked there would fail silently on every page.
 *
 * Every rule is scoped under .bd-page. No element or utility selector is styled
 * globally: this sheet shares a document with the Skillora header and footer.
 *
 * The palette mirrors public/udemy-assets/css/styles.css, redeclared locally
 * because that sheet is only loaded on the home page.
 */

.bd-page {
	--bd-purple: #a435f0;
	--bd-purple-dark: #8710d8;
	--bd-purple-tint: #f6ecfd;
	--bd-navy: #1c1d28;
	--bd-navy-deep: #14151f;
	--bd-gold: #c69a47;
	--bd-text: #2b2b3c;
	--bd-muted: #6a6f73;
	--bd-border: #e4e6ea;
	--bd-bg: #f6f7f9;
	--bd-white: #fff;
	--bd-hero-bg: var(--bd-navy);
	--bd-radius: 10px;

	color: var(--bd-text);
	background: var(--bd-white);
	font-family: 'Open Sans', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.bd-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 16px;
}

/* ------------------------------- hero ------------------------------- */

.bd-hero {
	background: var(--bd-hero-bg);
	background-image:
		radial-gradient(38% 80% at 12% 8%, rgba(164, 53, 240, .38) 0%, rgba(164, 53, 240, 0) 68%),
		radial-gradient(34% 70% at 82% 40%, rgba(56, 189, 248, .30) 0%, rgba(56, 189, 248, 0) 70%);
	color: #fff;
	padding: 56px 0;
}

.bd-hero__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .14);
	border-radius: 999px;
	padding: 5px 12px;
	margin-bottom: 14px;
}

.bd-hero__title {
	margin: 0 0 12px;
	font-size: clamp(26px, 4vw, 42px);
	line-height: 1.18;
	font-weight: 800;
	color: #fff;
}

.bd-hero__sub {
	margin: 0;
	max-width: 70ch;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .86);
}

.bd-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

.bd-hero__facts li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bd-hero__facts span {
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.bd-hero__facts b {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

/* ------------------------------ layout ------------------------------ */

.bd-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 32px;
	align-items: start;
	padding-block: 40px;
}

.bd-content {
	min-width: 0;
}

/* ---------------------------- tab nav ------------------------------- */

.bd-tabnav {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--bd-white);
	border-bottom: 1px solid var(--bd-border);
	margin-bottom: 8px;
}

.bd-tabnav::-webkit-scrollbar { display: none; }

.bd-tabnav__link {
	flex: 0 0 auto;
	padding: 13px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bd-muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}

.bd-tabnav__link:hover { color: var(--bd-text); }

.bd-tabnav__link.is-active {
	color: var(--bd-purple-dark);
	border-bottom-color: var(--bd-purple);
}

/* ---------------------------- sections ------------------------------ */

.bd-section {
	scroll-margin-top: 64px;
	padding: 26px 0;
	border-bottom: 1px solid var(--bd-border);
}

.bd-section:last-child { border-bottom: 0; }

.bd-section__title {
	margin: 0 0 12px;
	font-size: clamp(19px, 2.4vw, 24px);
	font-weight: 800;
	color: var(--bd-navy);
}

.bd-section__body {
	font-size: 15px;
	line-height: 1.75;
	color: var(--bd-text);
}

.bd-section__body :where(p, ul, ol) { margin: 0 0 12px; }
.bd-section__body :where(ul, ol) { padding-inline-start: 22px; }
.bd-section__body img { max-width: 100%; height: auto; }
.bd-section__body a { color: var(--bd-purple-dark); }

.bd-provider {
	margin-top: 14px;
	padding: 14px;
	background: var(--bd-bg);
	border-radius: var(--bd-radius);
	display: inline-block;
}

.bd-provider img { max-height: 64px; width: auto; display: block; }

.bd-pdf {
	display: block;
	width: 100%;
	height: 720px;
	margin-top: 16px;
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius);
}

.bd-learn__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.bd-learn__list li {
	position: relative;
	padding-inline-start: 26px;
	font-size: 15px;
	line-height: 1.6;
}

.bd-learn__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bd-purple);
}

.bd-empty {
	margin: 0;
	padding: 28px 0;
	font-size: 15px;
	color: var(--bd-muted);
}

/* ----------------------------- sidebar ------------------------------ */

.bd-side { position: sticky; top: 16px; }

.bd-card {
	background: var(--bd-white);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius);
	box-shadow: 0 8px 28px rgba(20, 21, 31, .08);
	padding: 16px;
}

.bd-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--bd-navy) 0%, var(--bd-purple-dark) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.bd-card__media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bd-tile {
	font-size: clamp(30px, 6vw, 46px);
	font-weight: 800;
	line-height: 1;
	color: #fff;
	opacity: .92;
	text-transform: uppercase;
}

.bd-card__title {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--bd-navy);
}

/* ------------------------------ price ------------------------------- */

.bd-price {
	border: 1px solid var(--bd-border);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 10px;
	background: var(--bd-bg);
}

.bd-price--inst { background: var(--bd-purple-tint); border-color: #e6d3fb; }

.bd-price__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 13px;
	color: var(--bd-muted);
	padding: 3px 0;
}

.bd-price__row b { color: var(--bd-text); font-weight: 700; white-space: nowrap; }

.bd-price__row--head {
	font-size: 14px;
	color: var(--bd-navy);
	font-weight: 700;
}

.bd-price__row--head b { font-size: 19px; }

.bd-price__note {
	font-size: 11px;
	color: var(--bd-muted);
	padding-bottom: 6px;
	border-bottom: 1px dashed var(--bd-border);
	margin-bottom: 4px;
}

.bd-riyal {
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
	display: inline-block;
	margin-inline-end: 2px;
}

.bd-cur { margin-inline-end: 2px; }

/* ------------------------------ offers ------------------------------ */

.bd-offers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.bd-offers__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bd-navy);
}

.bd-offers__hint { font-size: 11px; font-weight: 500; color: var(--bd-muted); }

.bd-offers__flat { display: flex; flex-direction: column; gap: 10px; }

.bd-certtabs { display: flex; flex-wrap: wrap; gap: 6px; }

.bd-certtab {
	appearance: none;
	border: 1px solid var(--bd-border);
	background: var(--bd-white);
	border-radius: 999px;
	padding: 6px 12px;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--bd-muted);
	cursor: pointer;
}

.bd-certtab:hover { color: var(--bd-text); border-color: #cfd0d8; }

.bd-certtab.is-active {
	background: var(--bd-purple);
	border-color: var(--bd-purple);
	color: #fff;
}

.bd-certpanel { display: none; flex-direction: column; gap: 10px; }

.bd-certpanel__desc {
	font-size: 12px;
	line-height: 1.55;
	color: var(--bd-muted);
	background: var(--bd-bg);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.bd-certpanel__empty { font-size: 12px; color: #9ca3af; padding: 8px 0; }

.bd-offer-card {
	display: block;
	border: 1px solid var(--bd-border);
	border-radius: 8px;
	padding: 12px;
	background: var(--bd-white);
	cursor: pointer;
	margin-bottom: 10px;
}

.bd-offer-card:last-child { margin-bottom: 0; }

.bd-offer-card.is-default { border-color: var(--bd-purple); }

.bd-offer-card.is-selected {
	border-color: var(--bd-purple);
	box-shadow: 0 0 0 2px rgba(164, 53, 240, .16);
}

.bd-offer-card__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bd-offer-card__main { flex: 1; min-width: 0; }
.bd-offer-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-offer-card__title { font-size: 13px; color: var(--bd-navy); }
.bd-offer-card__terms { font-size: 11px; color: var(--bd-muted); margin-top: 4px; }
.bd-offer-card__seats { font-size: 11px; color: #b45309; margin-top: 4px; }
.bd-offer-card__price { text-align: end; min-width: 100px; }
.bd-offer-card__was { font-size: 11px; color: #9ca3af; text-decoration: line-through; }
.bd-offer-card__now { font-size: 16px; font-weight: 700; color: var(--bd-navy); }

.bd-pill { font-size: 11px; padding: 2px 6px; border-radius: 999px; }
.bd-pill--save { background: #dcfce7; color: #166534; }
.bd-pill--inst { background: #e0f2fe; color: #075985; }

/* ----------------------------- buttons ------------------------------ */

.bd-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	margin-bottom: 8px;
}

.bd-btn--primary { background: var(--bd-purple); color: #fff; }
.bd-btn--primary:hover { background: var(--bd-purple-dark); color: #fff; }

.bd-btn--ghost {
	background: transparent;
	color: var(--bd-purple-dark);
	border: 1px solid var(--bd-border);
	font-weight: 600;
	font-size: 13px;
}

.bd-btn--ghost:hover { border-color: var(--bd-purple); color: var(--bd-purple-dark); }

/* ------------------------------ facts ------------------------------- */

.bd-facts { margin: 14px 0 0; padding: 0; }

.bd-facts > div {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid var(--bd-border);
	font-size: 13px;
}

.bd-facts dt { color: var(--bd-muted); margin: 0; }
.bd-facts dd { margin: 0; font-weight: 600; color: var(--bd-text); text-align: end; }

.bd-support {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding: 10px;
	border-radius: 8px;
	background: #e8f7ee;
	color: #15803d;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.bd-support:hover { background: #d7f0e1; color: #15803d; }

/* ------------------------- video / facades -------------------------- */

.bd-facade { position: absolute; inset: 0; cursor: pointer; }

.bd-facade__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }

.bd-facade__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	width: 58px;
	height: 58px;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 21, 31, .72);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.bd-page[dir="rtl"] .bd-facade__play { transform: translate(50%, -50%); }

.bd-facade:hover .bd-facade__play { background: var(--bd-purple); }

.bd-video { padding-block: 8px 44px; }

.bd-facade--wide {
	position: relative;
	inset: auto;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--bd-radius);
	overflow: hidden;
	background: var(--bd-navy);
}

.bd-facade--wide video,
.bd-facade--wide iframe { width: 100%; height: 100%; border: 0; display: block; }

.bd-facade__bar {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 14px 18px;
	background: linear-gradient(to top, rgba(20, 21, 31, .82), rgba(20, 21, 31, 0));
	color: #fff;
}

.bd-facade__bar strong { display: block; font-size: 16px; }
.bd-facade__bar small { font-size: 12px; opacity: .8; }

.bd-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(10, 11, 18, .82);
	display: grid;
	place-items: center;
	padding: 16px;
}

.bd-modal__box { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; }
.bd-modal__box video,
.bd-modal__box iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; display: block; }

.bd-modal__close {
	position: absolute;
	inset-block-start: -40px;
	inset-inline-end: 0;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* ---------------------------- carousel ------------------------------ */

.bd-carousel {
	position: relative;
	max-width: 1200px;
	margin: 0 auto 44px;
	padding-inline: 16px;
	overflow: hidden;
}

.bd-carousel__track {
	display: flex;
	transition: transform .4s ease;
}

.bd-page[dir="rtl"] .bd-carousel__track { transition: none; }

.bd-carousel__slide {
	flex: 0 0 100%;
	min-height: 320px;
	background-color: var(--bd-navy);
	background-size: cover;
	background-position: center;
	border-radius: var(--bd-radius);
	display: flex;
	align-items: flex-end;
}

.bd-carousel__inner {
	width: 100%;
	padding: 24px;
	border-radius: 0 0 var(--bd-radius) var(--bd-radius);
	background: linear-gradient(to top, rgba(20, 21, 31, .78), rgba(20, 21, 31, 0));
	color: #fff;
}

.bd-carousel__inner h2 { margin: 0 0 4px; font-size: clamp(18px, 2.6vw, 26px); color: #fff; }
.bd-carousel__inner span { font-size: 14px; opacity: .85; }

.bd-carousel__arrow {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 36px;
	height: 36px;
	border: 1px solid var(--bd-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--bd-navy);
	display: grid;
	place-items: center;
	cursor: pointer;
}

.bd-carousel__arrow--prev { inset-inline-start: 26px; }
.bd-carousel__arrow--next { inset-inline-end: 26px; }

/* ---------------------------- curriculum ---------------------------- */

.bd-courses { background: var(--bd-bg); padding-block: 44px; }

.bd-sem { margin-bottom: 26px; }

.bd-sem__title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 800;
	color: var(--bd-navy);
}

.bd-sem__title em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--bd-muted); }

.bd-sem__table {
	background: var(--bd-white);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius);
	overflow: hidden;
}

.bd-sem__row {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) 120px;
	gap: 10px;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid var(--bd-border);
	font-size: 14px;
}

.bd-sem__row:last-child { border-bottom: 0; }
.bd-sem__no { font-weight: 800; color: var(--bd-purple); }
.bd-sem__name { min-width: 0; font-weight: 600; }
.bd-sem__meta { font-size: 12px; color: var(--bd-muted); text-align: end; }

/* ---------------------------- responsive ---------------------------- */

@media (max-width: 1024px) {
	.bd-main { grid-template-columns: minmax(0, 1fr); }
	.bd-side { position: static; order: -1; }
}

@media (max-width: 640px) {
	.bd-hero { padding: 36px 0; }
	.bd-hero__facts { gap: 10px 18px; }
	.bd-pdf { height: 520px; }
	.bd-sem__row { grid-template-columns: 40px minmax(0, 1fr); }
	.bd-sem__meta { grid-column: 2; text-align: start; }
	.bd-carousel__arrow--prev { inset-inline-start: 20px; }
	.bd-carousel__arrow--next { inset-inline-end: 20px; }
	.bd-carousel__slide { min-height: 240px; }
}