/* ProBook Audio Chapters - player
 *
 * Theme-proofing: themes and Elementor kits style button / h1-h6 / a / p with
 * selectors like "[type=button]:hover" or ".elementor-kit-5 button:hover".
 * The resets below use !important with :where() (low specificity), so they beat
 * any non-important theme rule while our own component rules (higher specificity,
 * also !important where needed) still win over the resets.
 */
.pba {
	--pba-bg: #12100d;
	--pba-surface: #1c1915;
	--pba-line: rgba(201, 162, 77, .18);
	--pba-gold: #c9a24d;
	--pba-gold-2: #e8cb84;
	--pba-text: #f3ece0;
	--pba-muted: #a59c8c;
	--pba-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	color: var(--pba-text);
	font-family: var(--pba-sans);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

/* ---------- resets (theme-proof) ---------- */
.pba *, .pba *::before, .pba *::after { box-sizing: border-box; }
.pba :where(p, span, a, li, dt, dd, h1, h2, h3, button, strong, em, div) { font-family: var(--pba-sans) !important; }
.pba :where(p, h1, h2, h3, ol, ul, li, dl, dt, dd) { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.pba :where(h1, h2, h3) { color: var(--pba-text) !important; text-transform: none !important; letter-spacing: -.01em !important; }
.pba :where(ol, ul, li) { list-style: none !important; }
.pba :where(li)::before, .pba :where(li)::marker { content: none !important; }
.pba :where(a, a:hover, a:focus, a:active, a:visited) { text-decoration: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background-image: none; -webkit-tap-highlight-color: transparent; }
.pba .pba-bar { -webkit-tap-highlight-color: transparent; }
.pba :where(button, button:hover, button:focus, button:active) {
	-webkit-appearance: none !important; appearance: none !important;
	display: inline-grid; place-items: center;
	margin: 0 !important; padding: 0 !important; min-height: 0 !important; width: auto; height: auto;
	border: 0 !important; border-radius: 0; outline: 0 !important;
	background: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent;
	color: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: 1 !important;
	letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important;
	white-space: nowrap; cursor: pointer; transition: none;
}
.pba :where(button:focus-visible, .pba-bar:focus-visible, a:focus-visible) { outline: 2px solid var(--pba-gold-2) !important; outline-offset: 3px !important; }
.pba :where(button:focus:not(:focus-visible), .pba-bar:focus:not(:focus-visible), a:focus:not(:focus-visible)) { outline: none !important; }
.pba :where(img) { max-width: 100%; height: auto; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.pba svg { display: block; fill: currentColor; }
.pba [hidden] { display: none !important; }

/* ---------- compact card (product page / shortcode) ---------- */
.pba.pba--card {
	position: relative;
	max-width: 880px;
	margin: 32px auto;
	padding: 28px;
	border-radius: 18px;
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(201, 162, 77, .14), transparent 55%),
		linear-gradient(160deg, #1a1712, var(--pba-bg) 60%);
	border: 1px solid var(--pba-line);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
	overflow: hidden;
	text-align: left;
}
.pba--card .pba-card { display: grid; grid-template-columns: 168px 1fr; gap: 28px; align-items: center; }

.pba .pba-test {
	position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
	padding: 4px 14px; border-radius: 0 0 10px 10px;
	background: #b4472e; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
}

/* Cover */
.pba .pba-cover {
	position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
	background: var(--pba-surface);
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.pba .pba-cover img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.pba.is-playing .pba-cover { transform: translateY(-3px) scale(1.015); }
.pba .pba-eq {
	position: absolute; right: 10px; bottom: 10px; display: flex; align-items: flex-end; gap: 3px;
	height: 22px; padding: 5px 7px; border-radius: 8px; background: rgba(18, 16, 13, .78);
	opacity: 0; transition: opacity .3s;
}
.pba .pba-eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--pba-gold-2); }
.pba.is-playing .pba-eq { opacity: 1; }
.pba.is-playing .pba-eq i { animation: pba-eq 1s ease-in-out infinite; }
.pba .pba-eq i:nth-child(2) { animation-delay: -.35s; }
.pba .pba-eq i:nth-child(3) { animation-delay: -.7s; }
.pba .pba-eq i:nth-child(4) { animation-delay: -.2s; }
@keyframes pba-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* Text */
.pba .pba-eyebrow {
	display: inline-flex !important; align-items: center; gap: 8px;
	color: var(--pba-gold-2) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.3 !important;
	letter-spacing: .2em !important; text-transform: uppercase !important;
}
.pba .pba-eyebrow svg { width: 15px; height: 15px; flex: none; }
.pba .pba-title {
	margin-top: 10px !important; font-weight: 600 !important; font-style: normal !important;
	font-size: clamp(24px, 3vw, 32px) !important; line-height: 1.1 !important; color: var(--pba-text) !important;
}
.pba .pba-meta { margin-top: 8px !important; color: var(--pba-muted) !important; font-size: 13px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.pba .pba-dot { display: inline-block; width: 3px; height: 3px; margin: 0 9px; border-radius: 50%; background: var(--pba-gold); opacity: .7; }
.pba .pba-now {
	margin-top: 18px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--pba-text) !important;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Controls */
.pba .pba-controls { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.pba .pba-play {
	position: relative; display: grid !important; place-items: center;
	width: 60px !important; height: 60px !important; border-radius: 50% !important; flex: none;
	background: linear-gradient(145deg, var(--pba-gold-2), var(--pba-gold)) !important;
	color: #17130c !important;
	box-shadow: 0 10px 24px -8px rgba(201, 162, 77, .65) !important;
	transition: transform .15s ease, box-shadow .2s ease;
}
.pba .pba-play:hover { transform: scale(1.05); box-shadow: 0 14px 30px -8px rgba(201, 162, 77, .8) !important; }
.pba .pba-play:active { transform: scale(.97); }
/* The triangle path is centred on its centroid, which is the optical centre - no extra nudge. */
.pba .pba-play svg { width: 26px; height: 26px; grid-area: 1 / 1; }
.pba .pba-i-pause, .pba.is-playing .pba-i-play { display: none !important; }
.pba.is-playing .pba-i-pause { display: block !important; }
/* Absolutely positioned: as a 64px grid item it widened the 60px button's track and pushed the icon 2px right. */
.pba .pba-spinner {
	position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
	border: 2px solid transparent; border-top-color: var(--pba-gold-2);
	opacity: 0; animation: pba-spin .8s linear infinite;
}
.pba.is-loading .pba-spinner { opacity: 1; }
@keyframes pba-spin { to { transform: rotate(360deg); } }

.pba .pba-btn {
	display: grid !important; place-items: center; width: 42px !important; height: 42px !important; border-radius: 50% !important;
	color: var(--pba-muted) !important; transition: color .15s, background .15s;
}
.pba .pba-btn:hover { color: var(--pba-text) !important; background: rgba(255, 255, 255, .06) !important; }
.pba .pba-skip svg { width: 26px; height: 26px; }
.pba .pba-skip text { font: 700 6.5px var(--pba-sans); fill: currentColor; }
.pba .pba-speed {
	width: auto !important; height: 30px !important; padding: 0 12px !important; margin-left: auto !important; border-radius: 999px !important;
	border: 1px solid var(--pba-line) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 600 !important; font-variant-numeric: tabular-nums;
}

/* Progress */
.pba .pba-progress { margin-top: 16px; }
.pba .pba-bar { position: relative; height: 18px; cursor: pointer; touch-action: none; }
.pba .pba-bar::before, .pba .pba-buffer, .pba .pba-fill {
	content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px;
}
.pba .pba-bar::before { right: 0; background: rgba(255, 255, 255, .1); }
.pba .pba-buffer { width: 0; background: rgba(255, 255, 255, .16); }
.pba .pba-fill { width: 0; background: linear-gradient(90deg, var(--pba-gold), var(--pba-gold-2)); }
.pba .pba-knob {
	position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
	background: var(--pba-gold-2); box-shadow: 0 0 0 4px rgba(232, 203, 132, .18);
	transform: scale(0); transition: transform .15s;
}
.pba .pba-bar:hover .pba-knob, .pba .pba-bar.is-drag .pba-knob, .pba .pba-bar:focus-visible .pba-knob, .pba.is-playing .pba-knob { transform: scale(1); }
.pba .pba-times {
	display: flex; justify-content: space-between; margin-top: 4px;
	color: var(--pba-muted); font-size: 12px; font-variant-numeric: tabular-nums;
}

/* Chapter list */
.pba .pba-list { margin-top: 24px !important; padding-top: 8px !important; border-top: 1px solid var(--pba-line) !important; }
.pba .pba-ch {
	display: grid !important; grid-template-columns: 28px 1fr auto; place-items: center stretch; gap: 12px; width: 100% !important;
	padding: 11px 10px !important; border-radius: 10px !important; text-align: left !important;
	font-size: 14px !important; line-height: 1.35 !important; font-weight: 500 !important; color: var(--pba-text) !important;
	white-space: normal; transition: background .15s;
}
.pba .pba-ch:hover { background: rgba(255, 255, 255, .04) !important; }
.pba .pba-ch-n { color: var(--pba-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.pba .pba-ch-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pba .pba-ch-d { color: var(--pba-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.pba .pba-ch.is-active { background: rgba(201, 162, 77, .1) !important; }
.pba .pba-ch.is-active .pba-ch-n, .pba .pba-ch.is-active .pba-ch-t { color: var(--pba-gold-2); }
.pba .pba-ch.is-done .pba-ch-n { color: var(--pba-gold); }

/* End-of-chapter CTA */
.pba .pba-end {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	margin-top: 20px; padding: 18px 20px; border-radius: 14px;
	background: linear-gradient(120deg, rgba(201, 162, 77, .16), rgba(201, 162, 77, .05));
	border: 1px solid rgba(201, 162, 77, .35);
	animation: pba-rise .5s cubic-bezier(.2, .8, .2, 1);
}
.pba .pba-end-k { font-size: 19px !important; font-weight: 600 !important; color: var(--pba-text) !important; line-height: 1.25 !important; }
.pba .pba-end-t { color: var(--pba-muted) !important; font-size: 13px !important; margin-top: 2px !important; }
.pba .pba-cta {
	display: inline-flex !important; align-items: center; gap: 10px; padding: 12px 20px !important; border-radius: 999px !important; border: 0 !important;
	background: linear-gradient(145deg, var(--pba-gold-2), var(--pba-gold)) !important; color: #17130c !important;
	font-weight: 700 !important; font-size: 14px !important; line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important;
	white-space: nowrap; transition: transform .15s, box-shadow .2s; box-shadow: 0 10px 24px -10px rgba(201, 162, 77, .7) !important;
}
.pba .pba-cta:hover { transform: translateY(-1px); color: #17130c !important; }
.pba .pba-cta svg { width: 16px; height: 16px; }
.pba .pba-cta-p { padding-left: 10px; border-left: 1px solid rgba(23, 19, 12, .3); font-weight: 600; }
@keyframes pba-rise { from { opacity: 0; transform: translateY(8px); } }

/* Mobile (card) */
@media (max-width: 640px) {
	.pba.pba--card { padding: 20px 16px; margin: 24px 0; border-radius: 16px; }
	.pba--card .pba-card { grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
	.pba--card .pba-title { font-size: 21px !important; margin-top: 6px !important; }
	.pba--card .pba-meta { font-size: 12px !important; }
	.pba--card .pba-main { display: contents; }
	.pba--card .pba-main > .pba-eyebrow, .pba--card .pba-main > .pba-title, .pba--card .pba-main > .pba-meta { grid-column: 2; }
	.pba--card .pba-cover { grid-row: 1 / span 3; }
	.pba--card .pba-now, .pba--card .pba-controls, .pba--card .pba-progress { grid-column: 1 / -1; }
	.pba--card .pba-now { margin-top: 12px !important; }
	.pba--card .pba-controls { justify-content: center; gap: 18px; margin-top: 4px; }
	.pba--card .pba-progress { margin-top: -4px; }
	.pba .pba-speed { margin-left: 0 !important; }
	.pba .pba-controls::before { content: ""; width: 48px; flex: none; }
	.pba .pba-end { flex-direction: column; align-items: stretch; text-align: center; }
	.pba .pba-cta { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.pba *, .pba *::before { animation: none !important; transition: none !important; }
}