/**
 * BH All India Live Advance
 *
 * Scoped under .bh-aia so it can drop into any theme without leaking styles.
 */

.bh-aia {
	--bh-aia-red: #e01e26;
	--bh-aia-ink: #16181d;
	--bh-aia-muted: #6b7280;
	--bh-aia-line: #e5e7eb;
	--bh-aia-bg: #ffffff;
	--bh-aia-shell: #f6f7f9;
	--bh-aia-green: #16a34a;
	/* Width of the title + chip block, which is what sets how wide the movie
	   column gets. Raise both to give the chips more room, at the cost of a
	   wider column. */
	--bh-aia-movie-body-max: 185px;
	--bh-aia-tags-max: 185px;
	--bh-aia-radius: 10px;

	position: relative;
	box-sizing: border-box;

	/* The dashboard is dropped into whatever column the theme gives it, which
	   is often far narrower than the viewport. Sizing off the container keeps
	   a 700px post column on the compact layout instead of the desktop one. */
	container-type: inline-size;
	container-name: bh-aia;

	color: var(--bh-aia-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

.bh-aia *,
.bh-aia *::before,
.bh-aia *::after {
	box-sizing: inherit;
}

.bh-aia p {
	margin: 0;
}

/* The hidden attribute drives every collapse in this component, so it has to
   beat the display values set further down. */
.bh-aia [hidden] {
	display: none !important;
}

.bh-aia a {
	color: inherit;
	text-decoration: none;
}

.bh-aia-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Hero --- */

.bh-aia-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 26px 26px;
	border-radius: var(--bh-aia-radius);
	background: linear-gradient(105deg, #121316 0%, #1b1c20 52%, #4a1216 100%);
	color: #fff;
}

.bh-aia-hero__title {
	margin: 0;

	/* The vw line is the fallback for browsers without container queries; cqw
	   sizes the title off the column the dashboard actually sits in, so a
	   narrow theme column gets the phone-sized title rather than the desktop
	   one. */
	font-size: clamp(24px, 4.2vw, 40px);
	font-size: clamp(24px, 7cqw, 40px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: #fff;
}

.bh-aia-hero__updated {
	margin-top: 10px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
}

.bh-aia-hero__updated:empty {
	display: none;
}

/* ------------------------------------------------------------ Controls --- */

.bh-aia-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0;
}

/* An equal basis and equal growth, rather than letting each field size itself
   to its content: a date input reports a different intrinsic width to a search
   input, which is what left the two boxes looking like different controls. With
   this they always resolve to the same width and share the row evenly. */
.bh-aia-field {
	display: flex;
	flex: 1 1 150px;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	margin: 0;
}

.bh-aia-field__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.68);
}

/* Every control in the hero is drawn by this rule and nothing else.
 *
 * The selector carries the .bh-aia wrapper deliberately. A theme styling
 * input[type="search"] or input[type="date"] matches at the same specificity as
 * a bare .bh-aia-field input, so the winner would come down to stylesheet
 * order — and a theme that dresses the search box but not the date box leaves
 * the two looking like different controls. Adding the wrapper puts these rules
 * a class ahead of any such theme rule, so the pair always match.
 *
 * Everything a theme commonly sets on an input is restated, not just the
 * properties this dashboard cares about, so nothing bleeds through. */
.bh-aia .bh-aia-field input,
.bh-aia .bh-aia-field select {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 38px;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.96);
	background-image: none;
	color: var(--bh-aia-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.2;
	vertical-align: middle;
	box-shadow: none;
	transition: none;
}

/* The date field is the one that drifts: Chrome gives it an intrinsic width of
   its own and a picker button that carries its own margin. */
.bh-aia .bh-aia-field input[type="date"] {
	appearance: none;
	-webkit-appearance: none;
}

.bh-aia .bh-aia-field input[type="date"]::-webkit-date-and-time-value {
	margin: 0;
	text-align: left;
}

.bh-aia .bh-aia-field input[type="date"]::-webkit-calendar-picker-indicator {
	margin: 0;
	padding: 0;
	opacity: 0.55;
	cursor: pointer;
}

/* Safari rounds a search box by itself and ignores the border radius above. */
.bh-aia .bh-aia-field input[type="search"] {
	appearance: none;
	-webkit-appearance: none;
}

.bh-aia .bh-aia-field input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

.bh-aia .bh-aia-field input::placeholder {
	color: rgba(40, 48, 61, 0.55);
	opacity: 1;
}

.bh-aia .bh-aia-field select {
	appearance: auto;
	-webkit-appearance: menulist;
}

.bh-aia .bh-aia-field input:focus,
.bh-aia .bh-aia-field select:focus {
	border-color: rgba(255, 255, 255, 0.4);
	outline: 2px solid var(--bh-aia-red);
	outline-offset: 1px;
	box-shadow: none;
}

/* Kept for no-JavaScript submits; the script hides it. */
.bh-aia .bh-aia-apply {
	box-sizing: border-box;
	flex: 0 0 auto;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 6px;
	background: var(--bh-aia-red);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.bh-aia.is-enhanced .bh-aia-apply {
	display: none;
}

/* ------------------------------------------------------------- Notices --- */

.bh-aia-notices:empty {
	display: none;
}

.bh-aia-notice {
	margin-top: 14px;
	padding: 10px 14px;
	border-left: 3px solid var(--bh-aia-red);
	border-radius: 4px;
	background: #fff5f5;
	font-size: 13px;
	color: #7a1d22;
}

.bh-aia-notice--warn {
	border-left-color: #b45309;
	background: #fffbeb;
	color: #7c4a03;
}

.bh-aia-error {
	margin-top: 22px;
	padding: 18px;
	border: 1px solid #fecaca;
	border-radius: var(--bh-aia-radius);
	background: #fff5f5;
	color: #991b1b;
}

/* ---------------------------------------------------------- Stat cards --- */

.bh-aia-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
	gap: 12px;
	margin-top: 18px;
}

/* There are eleven cards, so the column count is chosen rather than left to
   auto-fit: 6, 4 and 3 all leave a nearly full last row, while 5 or 2 strand
   a single card on a line of its own. */
@container bh-aia (min-width: 560px) {
	.bh-aia-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container bh-aia (min-width: 760px) {
	.bh-aia-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@container bh-aia (min-width: 1000px) {
	.bh-aia-stats {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.bh-aia-stat {
	padding: 14px 16px 16px;
	border: 1px solid var(--bh-aia-line);
	border-radius: 8px;
	background: var(--bh-aia-bg);
}

.bh-aia-stat__label {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bh-aia-muted);
}

.bh-aia-stat__value {
	display: block;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--bh-aia-ink);
}

/* -------------------------------------------------------------- Panel --- */

.bh-aia-panel {
	margin-top: 18px;
	border: 1px solid var(--bh-aia-line);
	border-radius: var(--bh-aia-radius);
	background: var(--bh-aia-bg);
	overflow: hidden;
}

.bh-aia-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
}

.bh-aia-panel__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--bh-aia-ink);
}

.bh-aia-panel__count {
	margin-top: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bh-aia-muted);
}

/* -------------------------------------------------------------- Table --- */

.bh-aia-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* The ranking table is wider than the column it sits in on most layouts. The
   pair of white covers scroll with the content and uncover a shadow at
   whichever edge still has figures beyond it. */
.bh-aia-scroll--main {
	background:
		linear-gradient(to right, var(--bh-aia-bg) 40%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat,
		linear-gradient(to left, var(--bh-aia-bg) 40%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat,
		radial-gradient(farthest-side at 0 50%, rgba(15, 18, 23, 0.16), rgba(15, 18, 23, 0)) left center / 12px 100% no-repeat,
		radial-gradient(farthest-side at 100% 50%, rgba(15, 18, 23, 0.16), rgba(15, 18, 23, 0)) right center / 12px 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

.bh-aia-table,
.bh-aia-subtable {
	width: 100%;
	min-width: 940px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: 13px;
}

.bh-aia-table thead th,
.bh-aia-subtable thead th {
	padding: 12px 12px;
	background: #111214;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
	border: 0;
}

.bh-aia-table tbody td,
.bh-aia-subtable tbody td {
	padding: 13px 12px;
	border: 0;
	border-bottom: 1px solid #f0f1f3;
	background: transparent;
	vertical-align: middle;
	white-space: nowrap;
}

.bh-aia-num {
	text-align: right;
}

.bh-aia-table tbody tr.bh-aia-row:hover > td {
	background: #fafafa;
}

.bh-aia-table tbody tr.bh-aia-row.is-open > td {
	background: #fff5f5;
}

.bh-aia-cell--rank {
	width: 56px;
	padding-left: 18px !important;
	color: #6b7280;
	font-weight: 400;
	text-align: center;
}

.bh-aia-cell--movie {
	width: 24%;
	min-width: 230px;
	white-space: normal !important;
}

/* The chevron and the movie body sit side by side as flex items, so the
   chevron centres against the whole block -- title plus chip strip -- rather
   than riding the first line, and a wrapped title and the chips below it both
   start at the same left edge. The flex box is this inner span rather than the
   cell itself: `display: flex` on a td drops it out of table layout, and this
   column is a pinned one whose width has to keep behaving. */
.bh-aia-movie-cell {
	display: flex;
	align-items: center;
}

.bh-aia-movie-body {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;

	/* Auto table layout sizes a column toward its max-content width, and an
	   unwrapped title plus the full chip row made that ~550px, so the column
	   ignored its percentage width and ate the table. Capping the body caps
	   what the column can ask for; the title wraps inside it and the chips
	   scroll. */
	max-width: var(--bh-aia-movie-body-max);
}

/* The table is wider than most theme columns, so it scrolls sideways. Pin the
   rank and the movie name to the left edge, otherwise the figures on screen
   belong to a movie whose name has already scrolled out of view. */
.bh-aia-table th.bh-aia-th--rank,
.bh-aia-table td.bh-aia-cell--rank,
.bh-aia-table th.bh-aia-th--movie,
.bh-aia-table td.bh-aia-cell--movie {
	position: sticky;
	background: var(--bh-aia-bg);
}

.bh-aia-table th.bh-aia-th--rank,
.bh-aia-table td.bh-aia-cell--rank {
	left: 0;
	width: 56px;
	min-width: 56px;
}

.bh-aia-table th.bh-aia-th--movie,
.bh-aia-table td.bh-aia-cell--movie {
	left: 56px;
}

.bh-aia-table thead th.bh-aia-th--rank,
.bh-aia-table thead th.bh-aia-th--movie {
	z-index: 3;
	background: #111214;
}

.bh-aia-table tbody td.bh-aia-cell--rank,
.bh-aia-table tbody td.bh-aia-cell--movie {
	z-index: 2;
}

/* A hairline marks where the pinned columns end. */
.bh-aia-table th.bh-aia-th--movie,
.bh-aia-table td.bh-aia-cell--movie {
	box-shadow: 1px 0 0 var(--bh-aia-line);
}

.bh-aia-movie-name {
	font-weight: 700;
	color: var(--bh-aia-ink);
}

/* The chips stay on one line and scroll sideways rather than wrapping into a
   second and third row, which was pushing the table rows out of rhythm. The
   bar itself is hidden -- the strip is only a chip tall, so a scrollbar under
   every row reads as clutter -- but the strip still scrolls by drag, wheel
   and touch. */
.bh-aia-movie-tags {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	max-width: min(100%, var(--bh-aia-tags-max));
	margin-top: 5px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	text-indent: 0;
}

.bh-aia-movie-tags::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* A flex item shrinks below its content by default; these must not. */
.bh-aia-movie-tags > .bh-aia-tag {
	flex: 0 0 auto;
}

/* --font-xs comes from the theme; the fallback keeps the chips legible when
   the dashboard renders outside it. */
.bh-aia-tag {
	display: inline-block;
	padding: 2px 7px;
	border: 1px solid #ddd;
	border-radius: 999px;
	background: #f1f1f1;
	font-size: var(--font-xs, 10.5px);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--bh-aia-muted);
}

/* A bare chevron, not a filled circle: the arrow is a hint that the row opens,
   so it sits quietly beside the title. The 24px box is still a full-size tap
   target even though nothing is painted behind it. */
.bh-aia-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-right: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bh-aia-muted);
	cursor: pointer;
	transition: transform 0.15s ease, color 0.15s ease;
}

.bh-aia-toggle:hover {
	color: var(--bh-aia-red);
}

.bh-aia-toggle[aria-expanded="true"] {
	transform: rotate(90deg);
	color: var(--bh-aia-red);
}

.bh-aia-toggle--empty {
	cursor: default;
}

.bh-aia-chevron {
	width: 15px;
	height: 15px;
}

.bh-aia-pill {
	display: inline-block;
	min-width: 54px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #eef2f7;
	color: #334155;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.bh-aia-pill.is-mid {
	background: #dbeafe;
	color: #1d4ed8;
}

.bh-aia-pill.is-high {
	background: #dcfce7;
	color: #15803d;
}

.bh-aia-empty td {
	padding: 34px 18px !important;
	color: var(--bh-aia-muted);
	text-align: center;
	white-space: normal !important;
}

/* ------------------------------------------------------------ Breakup --- */

.bh-aia-breakup-row > td {
	padding: 0 !important;
	border-bottom: 1px solid var(--bh-aia-line) !important;
	background: #fbfbfc;
}

/* The panel lives in a cell as wide as the table, which is wider than the
   column it is scrolling inside. Pinning it to the left edge of the scroll
   area and sizing it to the dashboard's own width keeps the whole panel
   readable whatever the table is scrolled to. */
.bh-aia-breakup {
	position: sticky;
	left: 0;
	width: calc(100cqi - 2px);
	padding: 18px;
}

.bh-aia-breakup__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.bh-aia-breakup__eyebrow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bh-aia-muted);
}

.bh-aia-breakup__title {
	margin: 3px 0 0;
	font-size: 19px;
	font-weight: 800;
	color: var(--bh-aia-ink);
}

.bh-aia-breakup__count {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bh-aia-muted);
}

.bh-aia-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.bh-aia-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 16px;
	border: 1px solid var(--bh-aia-line);
	border-radius: 999px;
	background: #fff;
	color: var(--bh-aia-ink);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.bh-aia-tab span {
	font-weight: 500;
	color: var(--bh-aia-muted);
}

.bh-aia-tab.is-active {
	border-color: #111214;
	background: #111214;
	color: #fff;
}

.bh-aia-tab.is-active span {
	color: rgba(255, 255, 255, 0.7);
}

.bh-aia-pane {
	margin-top: 14px;
}

.bh-aia-pane__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.bh-aia-pane__label,
.bh-aia-pane__count {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bh-aia-muted);
}

.bh-aia-pane__label {
	color: var(--bh-aia-ink);
}

.bh-aia-pane .bh-aia-scroll {
	max-height: 340px;
	overflow-y: auto;
	border: 1px solid var(--bh-aia-line);
	border-radius: 8px;
	background: #fff;
}

.bh-aia-subtable {
	min-width: 760px;
}

.bh-aia-subtable thead th {
	position: sticky;
	top: 0;
	z-index: 1;
}

.bh-aia-cell--label {
	font-weight: 600;
}

.bh-aia-cell--sub {
	color: var(--bh-aia-muted);
}

/* --------------------------------------------------------- Pagination --- */

.bh-aia-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-top: 1px solid var(--bh-aia-line);
}

.bh-aia-pagination__count {
	font-size: 13px;
	color: var(--bh-aia-muted);
}

.bh-aia-pagination__nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bh-aia-page-btn {
	padding: 7px 15px;
	border: 1px solid var(--bh-aia-line);
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--bh-aia-ink);
	cursor: pointer;
}

.bh-aia-page-btn:hover {
	border-color: #c9ccd2;
	background: #f7f8fa;
}

.bh-aia-page-btn.is-disabled {
	opacity: 0.45;
	pointer-events: none;
}

.bh-aia-page-of {
	font-size: 13px;
	font-weight: 600;
	color: var(--bh-aia-ink);
}

/* ------------------------------------------------------------ Loading --- */

.bh-aia-body {
	transition: opacity 0.15s ease;
}

.bh-aia.is-loading .bh-aia-body {
	opacity: 0.45;
	pointer-events: none;
}

.bh-aia-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 220px;
	pointer-events: none;
}

.bh-aia-spinner {
	width: 30px;
	height: 30px;
	border: 3px solid rgba(224, 30, 38, 0.25);
	border-top-color: var(--bh-aia-red);
	border-radius: 50%;
	animation: bh-aia-spin 0.7s linear infinite;
}

@keyframes bh-aia-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bh-aia-spinner {
		animation-duration: 2.4s;
	}

	.bh-aia-toggle {
		transition: none;
	}
}

/* ----------------------------------------------------------- Responsive -- */

/* Every breakpoint below keys off the width of the dashboard's own container,
   not the viewport, so the same markup adapts whether it is in a full-width
   template, a post column beside a sidebar, or a phone. */

/* -- Below 860px: the figures no longer fit at desktop density. Tighten the
      table instead of pushing more of it off the right edge. */
@container bh-aia (max-width: 860px) {
	.bh-aia-hero {
		padding: 20px 20px 22px;
	}

	.bh-aia-stats {
		gap: 10px;
	}

	.bh-aia-stat {
		padding: 12px 14px 14px;
	}

	.bh-aia-stat__value {
		font-size: 19px;
	}

	.bh-aia-table {
		min-width: 780px;
		font-size: 12.5px;
	}

	.bh-aia-table thead th {
		padding: 10px 9px;
	}

	.bh-aia-table tbody td {
		padding: 11px 9px;
	}

	.bh-aia-cell--movie {
		min-width: 190px;
	}

	.bh-aia-panel__head,
	.bh-aia-pagination {
		padding: 14px 16px;
	}
}

/* -- Below 640px: the hero controls stretch to share the line under the
      title, and everything meant for a finger grows to a thumb-sized target. */
@container bh-aia (max-width: 640px) {
	.bh-aia-hero {
		padding: 16px 16px 20px;
		gap: 16px;
	}

	.bh-aia-controls {
		width: 100%;
		gap: 10px;
	}

	.bh-aia-field {
		flex: 1 1 140px;
	}

	/* 16px is the threshold below which iOS zooms the page in on focus, and a
	   zoomed-in dashboard is one the reader has to pinch back out of. */
	.bh-aia .bh-aia-field input,
	.bh-aia .bh-aia-field select {
		width: 100%;
		min-width: 0;
		height: 42px;
		font-size: 16px;
	}

	.bh-aia .bh-aia-apply {
		flex: 1 1 100%;
		height: 42px;
	}

	.bh-aia-pagination {
		justify-content: center;
		gap: 10px;
	}

	.bh-aia-pagination__count {
		flex: 1 1 100%;
		text-align: center;
	}

	.bh-aia-pagination__nav {
		flex: 1 1 100%;
		justify-content: center;
	}

	/* Comfortable thumb targets rather than the 30px-high desktop buttons. */
	.bh-aia-page-btn {
		min-height: 40px;
		padding: 0 18px;
		display: inline-flex;
		align-items: center;
	}

	.bh-aia-overlay {
		padding-top: 160px;
	}
}

/* -- Below 560px: a 780px-wide table cannot be made to work on a phone, so
      each row becomes a card and every figure carries its own label. The
      data-label attributes come from BH_AIA_Render::rows() and its mirror in
      the script.

      Every selector here uses child combinators: the breakup panel nests a
      second table inside a cell of this one, and a descendant selector would
      strip the heading off that one too. */
@container bh-aia (max-width: 560px) {
	.bh-aia-panel__head {
		padding: 14px 14px 10px;
	}

	/* Nothing overflows any more, so drop the sideways scroll and its hints. */
	.bh-aia-scroll--main {
		overflow-x: visible;
		background: none;
	}

	.bh-aia-table {
		display: block;
		min-width: 0;
		font-size: 13px;
	}

	.bh-aia-table > thead {
		display: none;
	}

	.bh-aia-table > tbody {
		display: block;
	}

	.bh-aia-table > tbody > tr.bh-aia-row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
		gap: 11px 12px;
		padding: 15px 14px;
		border-bottom: 1px solid var(--bh-aia-line);
	}

	.bh-aia-table > tbody > tr.bh-aia-row > td {
		display: block;
		padding: 0;
		border: 0;
		text-align: left;
		white-space: nowrap;
	}

	/* Nothing scrolls sideways in card mode, so the pinned columns come off. */
	.bh-aia-table > tbody > tr > td.bh-aia-cell--rank,
	.bh-aia-table > tbody > tr > td.bh-aia-cell--movie {
		position: static;
		box-shadow: none;
	}

	/* The rank reads as an eyebrow over the title, so it keeps its badge look
	   and drops the "Rank" label a card row would otherwise print. */
	.bh-aia-table > tbody > tr > td.bh-aia-cell--rank {
		grid-column: 1 / -1;
		width: auto;
		margin-bottom: -8px;
		padding-left: 0 !important;
		font-size: 12px;
		text-align: left;
	}

	.bh-aia-table > tbody > tr > td.bh-aia-cell--rank::before {
		content: "#";
	}

	.bh-aia-table > tbody > tr > td.bh-aia-cell--movie {
		grid-column: 1 / -1;
		width: auto;
		min-width: 0;
		font-size: 15px;
	}

	.bh-aia-table > tbody > tr > td.bh-aia-num {
		font-weight: 700;
	}

	.bh-aia-table > tbody > tr > td.bh-aia-num::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 3px;
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: var(--bh-aia-muted);
	}

	.bh-aia-table > tbody > tr.bh-aia-breakup-row,
	.bh-aia-table > tbody > tr.bh-aia-empty {
		display: block;
	}

	.bh-aia-table > tbody > tr.bh-aia-breakup-row > td,
	.bh-aia-table > tbody > tr.bh-aia-empty > td {
		display: block;
		padding: 0;
		border: 0;
		white-space: normal;
	}

	.bh-aia-table > tbody > tr.bh-aia-empty > td {
		padding: 20px 14px;
		text-align: center;
	}

	.bh-aia-breakup {
		padding: 16px 14px;
	}

	/* The breakup tables keep nine columns and their sideways scroll, so pin
	   the city / state / chain name the way the main table pins a movie. */
	.bh-aia-subtable thead th:first-child,
	.bh-aia-subtable tbody td.bh-aia-cell--label {
		position: sticky;
		left: 0;
		box-shadow: 1px 0 0 var(--bh-aia-line);
	}

	.bh-aia-subtable thead th:first-child {
		z-index: 2;
		background: #111214;
	}

	.bh-aia-subtable tbody td.bh-aia-cell--label {
		z-index: 1;
		background: #fff;
	}

	.bh-aia-pane .bh-aia-scroll {
		max-height: 280px;
	}
}

/* -- Below 450px: the width where the stat grid drops to two columns, which
      would leave the eleventh card alone on the last line. Pinning the column
      count and letting the headline card take a full line of its own puts the
      remaining ten in five even rows. */
@container bh-aia (max-width: 450px) {
	.bh-aia-hero {
		padding: 14px 14px 18px;
	}

	.bh-aia-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.bh-aia-stats > .bh-aia-stat:first-child {
		grid-column: 1 / -1;
	}

	/* Eleven cards ahead of the rankings is a lot of scrolling on a phone, so
	   the cards themselves get shorter. */
	.bh-aia-stat {
		padding: 10px 12px 12px;
	}

	.bh-aia-stat__label {
		margin-bottom: 3px;
	}

	.bh-aia-stat__value {
		font-size: 18px;
	}

	.bh-aia-stats > .bh-aia-stat:first-child .bh-aia-stat__value {
		font-size: 24px;
	}

	/* Each field takes a line of its own: a date input squeezed into half of a
	   400px screen clips its own picker button. */
	.bh-aia-field {
		flex: 1 1 100%;
	}

	.bh-aia-panel__head {
		padding: 14px 14px 12px;
	}

	/* Same reasoning one level down: three figures to a line would strand the
	   tenth and squeeze the wider rupee values, so a movie card goes to two. */
	.bh-aia-table > tbody > tr.bh-aia-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 14px 12px;
	}

	.bh-aia-breakup {
		padding: 14px 12px;
	}
}

/* Container queries are the whole layout strategy here, so a browser without
   them (Safari below 16) gets the compact treatment from the viewport instead
   of being left on the desktop layout at every size. */
@supports not (container-type: inline-size) {
	@media (max-width: 860px) {
		.bh-aia-table {
			min-width: 780px;
			font-size: 12.5px;
		}

		.bh-aia-stats {
			grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
		}
	}

	@media (max-width: 640px) {
		.bh-aia-controls {
			width: 100%;
		}

		.bh-aia-field {
			flex: 1 1 140px;
		}

		.bh-aia .bh-aia-field input,
		.bh-aia .bh-aia-field select {
			width: 100%;
			min-width: 0;
			height: 42px;
			font-size: 16px;
		}

		.bh-aia-page-btn {
			display: inline-flex;
			align-items: center;
			min-height: 40px;
		}
	}

	@media (max-width: 450px) {
		.bh-aia-hero__title {
			font-size: 26px;
		}

		.bh-aia-stats {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.bh-aia-stats > .bh-aia-stat:first-child {
			grid-column: 1 / -1;
		}

		.bh-aia-field {
			flex: 1 1 100%;
		}
	}
}

/**
 * Page shell spacing.
 *
 * Scoped to the template's own wrapper so nothing here leaks onto other Box
 * Office pages. Spacing only — the theme keeps ownership of colours.
 */

#bh-all-india-advance .bh-aia-article {
	margin: 0;
}

#bh-all-india-advance .bh-rate-fav,
#bh-all-india-advance .bh-comment-section,
#bh-all-india-advance .bh-aia-inline-ad {
	margin-top: 20px;
}

#bh-all-india-advance .bh-aia-inline-ad {
	margin-bottom: 20px;
}

/**
 * Editor content under the dashboard.
 *
 * Whatever the page itself carries — the intro copy, an FAQ, related links —
 * is drawn as a card matching the dashboard's own panels, so the column reads
 * as one page rather than a dashboard with a theme page stapled underneath.
 *
 * Deliberately not scoped to .bh-aia: this content sits outside the dashboard,
 * so it must not inherit the dashboard's 14px type scale.
 */

.bh-aia-page-content {
	box-sizing: border-box;
	margin: 20px 0 0;
	padding: 22px 24px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	color: #16181d;
	font-size: 15px;
	line-height: 1.75;
}

.bh-aia-page-content > *:first-child {
	margin-top: 0;
}

.bh-aia-page-content > *:last-child {
	margin-bottom: 0;
}

.bh-aia-page-content p,
.bh-aia-page-content ul,
.bh-aia-page-content ol {
	margin: 0 0 14px;
}

.bh-aia-page-content ul,
.bh-aia-page-content ol {
	padding-left: 22px;
}

.bh-aia-page-content li {
	margin-bottom: 6px;
}

.bh-aia-page-content h2,
.bh-aia-page-content h3,
.bh-aia-page-content h4 {
	margin: 22px 0 10px;
	color: #16181d;
	font-weight: 700;
	line-height: 1.3;
}

.bh-aia-page-content h2 {
	font-size: 21px;
}

.bh-aia-page-content h3 {
	font-size: 17px;
}

.bh-aia-page-content h4 {
	font-size: 15px;
}

.bh-aia-page-content a {
	color: #e01e26;
	text-decoration: underline;
}

.bh-aia-page-content img {
	max-width: 100%;
	height: auto;
}

/* -- FAQ ------------------------------------------------------------------
 *
 * Three ways of authoring an FAQ all land on the same card: the Yoast SEO FAQ
 * block (.schema-faq, which also publishes the FAQPage schema), core's Details
 * block, and a plain [bh_aia_faq] wrapper for hand written markup. */

.bh-aia-page-content .schema-faq,
.bh-aia-page-content .bh-aia-faq,
.bh-aia-page-content .wp-block-details {
	margin: 18px 0 0;
	padding: 18px 20px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #f6f7f9;
}

.bh-aia-page-content .schema-faq + .schema-faq,
.bh-aia-page-content .wp-block-details + .wp-block-details {
	margin-top: 10px;
}

.bh-aia-page-content .schema-faq-section {
	padding: 12px 0;
	border-bottom: 1px solid #e5e7eb;
}

.bh-aia-page-content .schema-faq-section:first-child {
	padding-top: 0;
}

.bh-aia-page-content .schema-faq-section:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.bh-aia-page-content .schema-faq-question {
	display: block;
	margin: 0 0 6px;
	color: #16181d;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.bh-aia-page-content .schema-faq-answer {
	display: block;
	margin: 0;
	color: #4b5563;
	font-size: 14.5px;
	line-height: 1.7;
}

.bh-aia-page-content .wp-block-details summary {
	color: #16181d;
	font-weight: 700;
	cursor: pointer;
}

.bh-aia-page-content .wp-block-details[open] summary {
	margin-bottom: 8px;
}

@media (max-width: 640px) {
	.bh-aia-page-content {
		padding: 16px 16px;
		font-size: 14.5px;
	}

	.bh-aia-page-content .schema-faq,
	.bh-aia-page-content .bh-aia-faq,
	.bh-aia-page-content .wp-block-details {
		padding: 14px 14px;
	}
}

/* Breadcrumb (printed by bh_aia_breadcrumb(), off by default). Sits outside
   .bh-aia, so it carries its own values. */
.bh-aia-breadcrumb {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.4;
	color: #6b7280;
}

.bh-aia-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bh-aia-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	min-width: 0;
}

.bh-aia-breadcrumb__item a {
	color: inherit;
	text-decoration: none;
}

.bh-aia-breadcrumb__item a:hover,
.bh-aia-breadcrumb__item a:focus {
	color: #111214;
	text-decoration: underline;
}

.bh-aia-breadcrumb__item [aria-current="page"] {
	color: #111214;
	font-weight: 600;
}

.bh-aia-breadcrumb__sep {
	color: #9ca3af;
}

/**
 * SEO copy + FAQ accordion under the dashboard.
 *
 * Same card treatment as .bh-aia-page-content, so the column reads as one
 * page whether the copy comes from the plugin, from the page editor, or both.
 *
 * Deliberately not scoped to .bh-aia: this is prose, and it must not inherit
 * the dashboard's 14px type scale.
 */

.bh-aia-seo {
	box-sizing: border-box;
	margin: 20px 0 0;
	color: #16181d;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.75;
}

.bh-aia-seo *,
.bh-aia-seo *::before,
.bh-aia-seo *::after {
	box-sizing: inherit;
}

.bh-aia-seo__intro,
.bh-aia-seo__faq {
	padding: 22px 24px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
}

.bh-aia-seo__intro + .bh-aia-seo__faq {
	margin-top: 16px;
}

.bh-aia-seo__title {
	margin: 0 0 12px;
	color: #16181d;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}

.bh-aia-seo__text {
	margin: 0 0 12px;
	color: #374151;
}

.bh-aia-seo__text:last-child {
	margin-bottom: 0;
}

/* -- FAQ accordion --------------------------------------------------------
 *
 * <details>, not a scripted accordion: every answer is in the markup whether
 * the entry is open or shut, so the crawler and a reader with JavaScript off
 * both get the full text, at no script cost. */

.bh-aia-faq__list {
	border-top: 1px solid #e5e7eb;
}

.bh-aia-faq__item {
	border-bottom: 1px solid #e5e7eb;
}

/* display:block rather than flex: Safari mishandles a flex <summary>, and the
   icon is positioned anyway. */
.bh-aia-faq__q {
	display: block;
	position: relative;
	padding: 14px 34px 14px 0;
	color: #16181d;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

/* Safari / Chrome still draw their own marker without this. */
.bh-aia-faq__q::-webkit-details-marker {
	display: none;
}

.bh-aia-faq__q:hover,
.bh-aia-faq__item[open] > .bh-aia-faq__q {
	color: #e01e26;
}

.bh-aia-faq__q:focus-visible {
	outline: 2px solid #e01e26;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Chevron, drawn from two borders so the block ships no icon font or SVG. */
.bh-aia-faq__icon {
	position: absolute;
	top: 16px;
	right: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #f6f7f9;
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.bh-aia-faq__icon::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: 7px;
	height: 7px;
	border-right: 2px solid #6b7280;
	border-bottom: 2px solid #6b7280;
	transform: rotate(45deg);
}

.bh-aia-faq__item[open] > .bh-aia-faq__q .bh-aia-faq__icon {
	transform: rotate(180deg);
	background: #fdeaea;
}

.bh-aia-faq__item[open] > .bh-aia-faq__q .bh-aia-faq__icon::before {
	border-color: #e01e26;
}

.bh-aia-faq__a {
	padding: 0 34px 16px 0;
}

.bh-aia-faq__a p {
	margin: 0;
	color: #4b5563;
	font-size: 14.5px;
	line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
	.bh-aia-faq__icon {
		transition: none;
	}
}

@media (max-width: 640px) {
	.bh-aia-seo {
		font-size: 14.5px;
	}

	.bh-aia-seo__intro,
	.bh-aia-seo__faq {
		padding: 16px 16px;
	}

	.bh-aia-seo__title {
		font-size: 19px;
	}

	.bh-aia-faq__q {
		font-size: 15px;
	}

	.bh-aia-faq__a {
		padding-right: 0;
	}
}