/**
 * FNN × BH Advance LIVE Booking Data — front-end styles.
 *
 * Every rule is scoped under #bhal-page or #bhal-app and every class is
 * `bhal-` prefixed, so this stylesheet cannot affect another page and no theme
 * rule is redefined.
 *
 * Designed for the real Box Office content column (~590px beside the box-office
 * sidebar), not for a full-width dashboard: wide tables scroll horizontally
 * with the identity columns pinned, and the metric tiles are split into a
 * headline row plus a compact strip so eleven figures stay readable.
 *
 * Tokens follow the existing BO pages: Roboto, the #ff2b2b accent, #e6e6e6
 * borders, #f6f6f6 table headers, #fbfbfb zebra striping.
 *
 * @package BHAL
 */

/* ================================================================ Shell */

/*
 * The whole module sits in one rounded card inside the Box Office content
 * column, so it reads as a single unit rather than a stack of loose blocks.
 */
#bhal-app {
	position: relative;
	padding: 14px;
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #23262b;
	font-size: 14px;
	line-height: 1.45;
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 8px 24px rgba(16, 24, 40, .05);
}

/*
 * Defensive reset. The theme's content column carries a 30px base
 * line-height and a number of broad `.entry-content` rules; these keep our
 * own boxes from inheriting heights or floats that would clip them.
 */
#bhal-app div,
#bhal-app span,
#bhal-app ul,
#bhal-app li,
#bhal-app p,
#bhal-app h2,
#bhal-app h3,
#bhal-app table,
#bhal-app thead,
#bhal-app tbody,
#bhal-app tr,
#bhal-app th,
#bhal-app td,
#bhal-app button,
#bhal-app input {
	box-sizing: border-box;
	min-height: 0;
	max-height: none;
	float: none;
	line-height: 1.45;
}

#bhal-app .bhal-hidden {
	display: none !important;
}

/* The theme's rating strip sits directly beneath our last block. */
#bhal-page .bh-rate-fav {
	margin: 28px 0 0;
	padding-top: 18px;
	border-top: 1px solid #ececec;
}

#bhal-page .bhal-inline-ad {
	margin: 26px 0 0;
}

/* ================================================================== Hero */

#bhal-app .bhal-hero {
	position: relative;
	padding: 18px 20px 16px;
	margin: 0 0 18px;
	overflow: hidden;
	color: #fff;
	border-radius: 10px;
	background: #14161a;
	background-image: linear-gradient(115deg, #14161a 0%, #1d2026 52%, #4a1a20 100%);
}

/* Title and chain pills share one baseline row. */
#bhal-app .bhal-hero-titlerow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

#bhal-app .bhal-hero-pills {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

#bhal-app .bhal-hero-pills:empty { display: none; }

#bhal-app .bhal-pill {
	display: inline-block;
	padding: 4px 12px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .07em;
	line-height: 1.6;
	text-transform: uppercase;
	color: #fff;
	background: #3a3f47;
	border-radius: 999px;
	white-space: nowrap;
}

#bhal-app .bhal-hero-title {
	margin: 0;
	font-size: 26px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: #fff;
	text-transform: uppercase;
}

#bhal-app .bhal-hero-date {
	display: block;
	margin: 7px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

#bhal-app .bhal-hero-updated {
	display: block;
	margin: 4px 0 0;
	font-size: 11px;
	font-weight: 400;
	color: rgba(255, 255, 255, .6);
}

/* ---- Controls, inside the hero ---- */

#bhal-app .bhal-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 15px 0 0;
	padding: 0;
	background: none;
	border: 0;
}

#bhal-app .bhal-control {
	display: flex;
	flex-direction: column;
	flex: 1 1 165px;
	min-width: 0;
}

#bhal-app .bhal-control-label {
	margin: 0 0 4px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

#bhal-app .bhal-date-input,
#bhal-app .bhal-search-input {
	width: 100%;
	height: 38px;
	padding: 0 11px;
	margin: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 5px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

#bhal-app .bhal-date-input {
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

#bhal-app .bhal-search-input::-webkit-input-placeholder { color: rgba(255, 255, 255, .45); }
#bhal-app .bhal-search-input::placeholder { color: rgba(255, 255, 255, .45); }

#bhal-app .bhal-date-input:focus,
#bhal-app .bhal-search-input:focus {
	outline: 0;
	border-color: #ff5b5b;
	background: rgba(255, 255, 255, .16);
}

#bhal-app .bhal-control-hint {
	margin: 3px 0 0;
	font-size: 10px;
	color: rgba(255, 255, 255, .5);
}

/* jQuery UI shares one calendar container site-wide; these rules apply only
   while it is open for our input (class added in beforeShow, removed onClose). */
#ui-datepicker-div.bhal-datepicker {
	z-index: 100000;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-size: 13px;
}

#ui-datepicker-div.bhal-datepicker .ui-state-active,
#ui-datepicker-div.bhal-datepicker .ui-state-highlight {
	background: #ff2b2b;
	border-color: #ff2b2b;
	color: #fff;
}

/* ============================================================== Notices */

#bhal-app .bhal-notice {
	margin: 0 0 14px;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 500;
	background: #fff8e6;
	border-left: 3px solid #e0a10b;
	border-radius: 3px;
}

/* =============================================================== Tiles */

#bhal-app .bhal-tiles-primary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 10px;
}

#bhal-app .bhal-tile-lg {
	padding: 13px 14px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
}

#bhal-app .bhal-tile-lg .bhal-tile-label {
	display: block;
	margin: 0 0 5px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #7a7f87;
}

#bhal-app .bhal-tile-lg .bhal-tile-value {
	display: block;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.15;
	color: #14161a;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * Flex, not grid: the number of supporting figures differs per report (eight
 * for All India, three for National Chains). Flex lets the final row stretch
 * to fill, so a report with fewer tiles never leaves an empty cell.
 */
#bhal-app .bhal-tiles-secondary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

#bhal-app .bhal-tile-sm {
	flex: 1 1 118px;
	min-width: 118px;
	padding: 9px 11px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
}

#bhal-app .bhal-tile-sm .bhal-tile-label {
	display: block;
	margin: 0 0 3px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8a8f97;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#bhal-app .bhal-tile-sm .bhal-tile-value {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: #23262b;
	font-variant-numeric: tabular-nums;
}

/* ========================================================= Chain cards */

#bhal-app .bhal-chain-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 11px;
	margin: 0 0 16px;
}

#bhal-app .bhal-chain-card {
	padding: 14px 14px 12px;
	color: #fff;
	background: #33373d;
	border-radius: 10px;
}

/* Brand colours keyed on a slug of the name the API returns. Any chain the
   API sends that is not listed keeps the neutral surface above. */
#bhal-app .bhal-chain-pvr { background: #2c3568; }
#bhal-app .bhal-chain-inox { background: #12693a; }
#bhal-app .bhal-chain-cinepolis { background: #a71d22; }

#bhal-app .bhal-chain-name {
	display: block;
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
}

#bhal-app .bhal-chain-total {
	display: block;
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.1;
	color: #fff;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

#bhal-app .bhal-chain-metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

#bhal-app .bhal-chain-metric {
	padding: 7px 8px;
	background: rgba(255, 255, 255, .14);
	border-radius: 6px;
}

#bhal-app .bhal-chain-metric-label {
	display: block;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

#bhal-app .bhal-chain-metric-value {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* ============================================================== Tables */

#bhal-app .bhal-table-shell {
	position: relative;
	margin: 0;
}

#bhal-app .bhal-table-wrap {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid #e2e4e8;
	border-radius: 8px;
}

/* Right-edge fade, shown only while there is more table to the right. */
#bhal-app .bhal-table-shell::after {
	content: "";
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 30px;
	pointer-events: none;
	opacity: 0;
	border-radius: 0 8px 8px 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96));
	transition: opacity .15s ease;
}

#bhal-app .bhal-table-shell.bhal-overflow-right::after {
	opacity: 1;
}

#bhal-app .bhal-scroll-hint {
	display: none;
	margin: 6px 0 0;
	font-size: 11px;
	color: #8a8f97;
}

#bhal-app .bhal-table-shell.bhal-overflow-right .bhal-scroll-hint,
#bhal-app .bhal-table-shell.bhal-overflow-left .bhal-scroll-hint {
	display: block;
}

#bhal-app .bhal-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
	font-size: 13px;
}

#bhal-app .bhal-table-movies { min-width: 860px; }
#bhal-app .bhal-table-breakup { min-width: 700px; }

#bhal-app .bhal-table .bhal-th {
	padding: 10px 11px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	background: #14161a;
	border: 0;
	white-space: nowrap;
	vertical-align: middle;
}

#bhal-app .bhal-table .bhal-td {
	padding: 10px 11px;
	border: 0;
	border-top: 1px solid #eef0f3;
	color: #23262b;
	background: #fff;
	white-space: nowrap;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
}

#bhal-app .bhal-table tbody tr:nth-child(4n+3) .bhal-td {
	background: #fbfbfc;
}

#bhal-app .bhal-align-left { text-align: left; }
#bhal-app .bhal-align-right { text-align: right; }

#bhal-app .bhal-td-rank {
	font-weight: 800;
	color: #ff2b2b;
}

#bhal-app .bhal-td-title {
	white-space: normal;
	min-width: 190px;
}

#bhal-app .bhal-movie-title {
	display: block;
	font-weight: 700;
	color: #14161a;
}

/* ---- Format / language chips, under the movie title ---- */

#bhal-app .bhal-movie-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 5px 0 0;
}

/*
 * The chips must never widen the frozen title column, and one of them can be
 * longer than the column is wide: "DOLBY CINEMA 3D" measures 95px against a
 * 118px cell whose content box is 88px on a 380px phone, so on a nowrap chip it
 * pushed a pixel of the pinned column past its own clip edge. `max-width: 100%`
 * plus `min-width: 0` lets the chip shrink to the line instead of the line
 * growing to the chip, and the ellipsis keeps the truncation legible.
 */
#bhal-app .bhal-chip {
	display: inline-block;
	max-width: 100%;
	min-width: 0;
	padding: 2px 7px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 4px;
	border: 1px solid #dfe3e9;
	background: #f4f6f8;
	color: #5c636d;
}

/* Language reads as the secondary fact, so it is quieter than the format. */
#bhal-app .bhal-chip-lang {
	background: #fff;
	color: #7a8089;
}

/* ---- Pinned identity columns, so horizontal scrolling keeps context ---- */

/*
 * NOTE ON THE CHILD COMBINATORS BELOW.
 *
 * The breakup table is rendered INSIDE a row of the movie table, so a
 * descendant selector such as `.bhal-table-movies .bhal-th:nth-child(2)`
 * also matches the breakup table's own header cells. That pinned the breakup
 * header to the movie table's rank width while leaving its body cells
 * unpinned, so the nested header and its rows drifted apart under horizontal
 * scroll. Every movie-table rule is therefore anchored with `>` so it can
 * never reach the nested table.
 */
#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(1),
#bhal-app .bhal-table-movies > tbody > tr > .bhal-td:nth-child(1) {
	position: sticky;
	left: 0;
	z-index: 3;
}

/*
 * The second frozen column must start exactly where the first one ends. That
 * offset is NOT a constant: the rank column sizes to its own header, and the
 * two reports label it differently ("Rank" vs "#"), so a hardcoded value pins
 * the title nine pixels under the rank cell on one page and not the other.
 *
 * So the offset is a custom property that bhal.js measures from the rendered
 * rank cell after every render and on resize. The fallback below is only what
 * applies before that runs (or with JS off), and is set per breakpoint.
 */
#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(2),
#bhal-app .bhal-table-movies > tbody > tr > .bhal-td-title {
	position: sticky;
	left: var(--bhal-pin-x, 54px);
	z-index: 3;
	box-shadow: 6px 0 8px -6px rgba(16, 24, 40, .16);
}

/*
 * ---- FROZEN COLUMN GEOMETRY (v1.6.0) -------------------------------------
 *
 * Both reports must freeze the same amount of screen. Left to the browser's
 * automatic table layout they do not: the two tables share one 860px floor but
 * All India spends it over nine columns and National Chains over eight, so the
 * surplus lands in the widest auto-sized cell — the movie title. Measured at
 * 1440px that produced Rank 53px / Movie 306px on All India against # 51px /
 * Film 338px on National Chains: a 32px discrepancy in the pinned pair, which
 * is exactly the horizontal space a reader loses on the Chains page before any
 * metric becomes visible.
 *
 * The fix is to take those two columns out of the auto-layout negotiation
 * entirely and state their geometry, identically for both reports. Everything
 * to their right keeps auto-sizing, so National Chains spends its spare width
 * on its own metric columns instead of on the frozen pair, and neither table
 * grows past the 860px floor.
 *
 * width + min-width + max-width together, because with `table-layout: auto` a
 * lone `width` is a preference the browser may overshoot.
 *
 * These values are also what bhal.js will measure for --bhal-pin-x, so each
 * breakpoint's fallback below is now the same number as its rank width rather
 * than an approximation of it.
 */
#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(1),
#bhal-app .bhal-table-movies > tbody > tr > .bhal-td:nth-child(1) {
	width: 54px;
	min-width: 54px;
	max-width: 54px;
}

#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(2),
#bhal-app .bhal-table-movies > tbody > tr > .bhal-td-title {
	width: 300px;
	min-width: 300px;
	max-width: 300px;
}

/*
 * The breakup layer's own identity column — City on the City tab, State on
 * State, Chain on Chain. It is column one in every dimension, so one rule
 * covers all three.
 */
#bhal-app .bhal-table-breakup > thead > tr > .bhal-th:nth-child(1),
#bhal-app .bhal-table-breakup > tbody > tr > .bhal-td:nth-child(1) {
	position: sticky;
	left: 0;
	z-index: 3;
	box-shadow: 6px 0 8px -6px rgba(16, 24, 40, .12);
}

/* ---- Sort controls. Deliberately not data-tablesaw-*: the theme bundles
     Tablesaw globally and those attributes would hand it our tables. The
     arrow glyphs reuse the theme's fontello classes for visual consistency;
     they carry no behaviour. ---- */

#bhal-app .bhal-th.bhal-sortable {
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#bhal-app .bhal-th.bhal-sortable:hover { background: #23262d; }

#bhal-app .bhal-th.bhal-sortable:focus {
	outline: 2px solid #ff5b5b;
	outline-offset: -2px;
}

#bhal-app .bhal-sort-arrows {
	display: inline-block;
	margin-left: 5px;
	line-height: 1;
	vertical-align: middle;
}

#bhal-app .bhal-sort-arrows i {
	display: block;
	font-size: 8px;
	line-height: 7px;
	font-style: normal;
	opacity: .38;
}

#bhal-app .bhal-th.is-asc .bhal-sort-up,
#bhal-app .bhal-th.is-desc .bhal-sort-down {
	opacity: 1;
	color: #ff8080;
}

/* ---- Occupancy pill ---- */

#bhal-app .bhal-occ {
	display: inline-block;
	min-width: 52px;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	border-radius: 11px;
	background: #eef1f6;
	color: #33415c;
}

#bhal-app .bhal-occ-high { background: #fde8c8; color: #8a4b00; }
#bhal-app .bhal-occ-mid { background: #fdf3d3; color: #7a5a00; }
#bhal-app .bhal-occ-low { background: #e4f0fb; color: #14507e; }
#bhal-app .bhal-occ-min { background: #f1f2f4; color: #5b6270; }

/* ==================================================== Expandable rows */

#bhal-app .bhal-row-expandable { cursor: pointer; }

#bhal-app .bhal-row-expandable:hover .bhal-td { background: #fff6f6; }

#bhal-app .bhal-row-expandable:focus {
	outline: 2px solid #ff2b2b;
	outline-offset: -2px;
}

#bhal-app .bhal-row-expandable.is-open .bhal-td {
	background: #fff1f1;
	border-top-color: #ffd9d9;
}

#bhal-app .bhal-caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 8px;
	vertical-align: middle;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid #ff2b2b;
	-webkit-transition: -webkit-transform .15s ease;
	transition: transform .15s ease;
}

#bhal-app .bhal-row-expandable.is-open .bhal-caret {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

/* ---- The breakup panel ---- */

#bhal-app .bhal-bk-cell {
	padding: 0;
	border: 0;
	background: #f4f6f9;
}

/*
 * The breakup row is a cell of the movie table, so it is as wide as that
 * table (~860px) and would slide out of view when the movie table is scrolled
 * right. Pinning it to the left edge of the scroll viewport keeps its heading,
 * chips and tabs in place while the movie columns move behind it. The script
 * sets the width to the viewport's, on expand and on resize.
 */
#bhal-app .bhal-bk {
	position: sticky;
	left: 0;
	padding: 15px 14px 16px;
	border-top: 2px solid #ff2b2b;
}

#bhal-app .bhal-bk-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0 0 11px;
}

#bhal-app .bhal-bk-kicker {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8d97a8;
}

#bhal-app .bhal-bk-title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	color: #14161a;
	flex: 1 1 100%;
}

#bhal-app .bhal-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	margin: 0 0 12px;
	list-style: none;
}

#bhal-app .bhal-chips .bhal-chip {
	padding: 4px 10px;
	margin: 0;
	font-size: 11px;
	background: #fff;
	border: 1px solid #e0e5ec;
	border-radius: 20px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

#bhal-app .bhal-chip-label {
	color: #79818d;
	text-transform: uppercase;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .05em;
}

#bhal-app .bhal-chip-value {
	color: #14161a;
	font-weight: 800;
}

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

#bhal-app .bhal-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 11px;
	padding: 0;
}

#bhal-app .bhal-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: #4b525c;
	cursor: pointer;
	background: #fff;
	border: 1px solid #dde2e9;
	border-radius: 20px;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
}

#bhal-app .bhal-tab:hover {
	color: #14161a;
	border-color: #b9c1cc;
	background: #fff;
}

#bhal-app .bhal-tab.is-active {
	color: #fff;
	background: #14161a;
	border-color: #14161a;
}

#bhal-app .bhal-tab-count {
	display: inline-block;
	padding: 1px 6px;
	font-size: 10px;
	font-style: normal;
	font-weight: 800;
	color: #5c636d;
	background: #eef0f4;
	border-radius: 9px;
}

#bhal-app .bhal-tab.is-active .bhal-tab-count {
	color: #14161a;
	background: rgba(255, 255, 255, .88);
}

#bhal-app .bhal-pane[hidden] { display: none; }

/*
 * Inside the breakup panel the table header steps down to grey. The parent
 * movie table owns the black header, so the nested table reads as a child
 * rather than competing with it.
 */
/*
 * The breakup table scrolls inside its own panel — vertically as well as
 * horizontally — so opening a 25-row city breakup never pushes the movie list
 * and the pager off screen. The header row stays frozen while it scrolls.
 */
#bhal-app .bhal-pane .bhal-table-wrap {
	max-height: 358px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-color: #dfe3e9;
}

#bhal-app .bhal-table-breakup > thead > tr > .bhal-th {
	position: sticky;
	top: 0;
	z-index: 4;
}

/* Both frozen at once: the first column must sit above the header row it
   crosses, or the two sticky planes fight at the corner. */
#bhal-app .bhal-table-breakup > thead > tr > .bhal-th:nth-child(1) {
	z-index: 6;
}

#bhal-app .bhal-table-breakup > tbody > tr > .bhal-td:nth-child(1) {
	z-index: 3;
}

/* A frozen header needs an opaque edge, since rows pass underneath it. */
#bhal-app .bhal-table-breakup > thead > tr > .bhal-th {
	box-shadow: inset 0 -1px 0 #cfd6df;
}

#bhal-app .bhal-table-breakup > thead > tr > .bhal-th:nth-child(1) {
	box-shadow: inset 0 -1px 0 #cfd6df, 6px 0 8px -6px rgba(16, 24, 40, .12);
}

/* Slim scrollbar, so the contained scroll reads as intentional. */
#bhal-app .bhal-pane .bhal-table-wrap {
	scrollbar-width: thin;
	scrollbar-color: #c2c8d0 transparent;
}

#bhal-app .bhal-pane .bhal-table-wrap::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

#bhal-app .bhal-pane .bhal-table-wrap::-webkit-scrollbar-thumb {
	background: #c2c8d0;
	border: 2px solid #fff;
	border-radius: 6px;
}

#bhal-app .bhal-pane .bhal-table-wrap::-webkit-scrollbar-track {
	background: transparent;
}

#bhal-app .bhal-table-breakup .bhal-th {
	color: #3d434c;
	background: #e9edf2;
}

#bhal-app .bhal-table-breakup .bhal-th.bhal-sortable:hover { background: #dfe4eb; }

#bhal-app .bhal-table-breakup .bhal-sort-arrows i { opacity: .42; }

#bhal-app .bhal-table-breakup .bhal-th.is-asc .bhal-sort-up,
#bhal-app .bhal-table-breakup .bhal-th.is-desc .bhal-sort-down {
	opacity: 1;
	color: #d92626;
}

#bhal-app .bhal-table-breakup .bhal-td { font-size: 12.5px; }

#bhal-app .bhal-table-breakup tbody tr:nth-child(even) .bhal-td { background: #fafbfc; }
#bhal-app .bhal-table-breakup tbody tr:nth-child(odd) .bhal-td { background: #fff; }

/* =============================================================== Pager */

#bhal-app .bhal-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	margin: 13px 0 0;
}

#bhal-app .bhal-pager-info {
	font-size: 12px;
	color: #79818d;
	font-variant-numeric: tabular-nums;
}

#bhal-app .bhal-pager-nav {
	display: flex;
	gap: 7px;
	align-items: center;
}

#bhal-app .bhal-pager-pos {
	font-size: 12px;
	font-weight: 700;
	color: #3d434c;
	font-variant-numeric: tabular-nums;
}

#bhal-app .bhal-page-btn {
	padding: 7px 14px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: #14161a;
	cursor: pointer;
	background: #fff;
	border: 1px solid #cfd4db;
	border-radius: 5px;
	text-transform: none;
	box-shadow: none;
	letter-spacing: 0;
}

#bhal-app .bhal-page-btn:hover:not(:disabled) {
	border-color: #ff2b2b;
	color: #ff2b2b;
	background: #fff;
}

#bhal-app .bhal-page-btn:disabled {
	color: #adb2b9;
	cursor: default;
	background: #f5f6f7;
	border-color: #e4e6e9;
}

/* ============================================================== States */

#bhal-app .bhal-state {
	padding: 30px 18px;
	text-align: center;
	background: #fff;
	border: 1px solid #e2e4e8;
	border-radius: 8px;
}

#bhal-app .bhal-state p { margin: 0 0 6px; }

#bhal-app .bhal-state-title {
	font-size: 16px;
	font-weight: 800;
	color: #14161a;
}

#bhal-app .bhal-state-body {
	font-size: 13px;
	color: #79818d;
}

#bhal-app .bhal-state-error { border-left: 3px solid #ff2b2b; }

#bhal-app .bhal-state-empty { border-left: 3px solid #cfd4db; }

/* Amber, not red: the data is coming, nothing has failed. */
#bhal-app .bhal-state-preparing { border-left: 3px solid #e0a10b; }

#bhal-app .bhal-retry {
	padding: 8px 18px;
	margin-top: 8px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	background: #ff2b2b;
	border: 0;
	border-radius: 5px;
	text-transform: none;
}

#bhal-app .bhal-no-match {
	padding: 22px 14px;
	font-size: 13px;
	text-align: center;
	color: #79818d;
}

#bhal-app .bhal-no-match[hidden] { display: none; }

#bhal-app .bhal-bk .bhal-state {
	padding: 18px 14px;
	text-align: left;
}

/* ---- Busy overlay ---- */

#bhal-app .bhal-busy {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	display: flex;
	gap: 9px;
	justify-content: center;
	align-items: flex-start;
	padding-top: 150px;
	font-size: 13px;
	font-weight: 700;
	color: #4b525c;
	background: rgba(255, 255, 255, .74);
	border-radius: 10px;
}

#bhal-app .bhal-busy[hidden] { display: none; }

#bhal-app .bhal-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #e0e2e6;
	border-top-color: #ff2b2b;
	border-radius: 50%;
	-webkit-animation: bhal-spin .8s linear infinite;
	animation: bhal-spin .8s linear infinite;
}

@-webkit-keyframes bhal-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes bhal-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {

	#bhal-app .bhal-spinner { animation: none; }
	#bhal-app .bhal-caret { transition: none; }
}

/* ========================================================== Responsive */

/*
 * MOBILE TABLE MODEL
 * ------------------
 * A wrapper that scrolls horizontally is, per CSS, also a scroll container on
 * the block axis (`overflow-x:auto` forces the other axis away from
 * `visible`). A header inside it therefore cannot stick to the viewport while
 * the page scrolls — measured on a 390px viewport, the wrap owns its own
 * scrollport.
 *
 * So on mobile each table gets a bounded scroll region and its header sticks
 * inside that region. Both axes then work together, and the header can never
 * detach from its table because it *is* the same table element: column widths
 * and alignment are shared by construction.
 *
 * The outer movie region keeps default scroll chaining, so reaching the last
 * row continues scrolling the page naturally. Only the inner breakup region
 * uses `overscroll-behavior: contain`, so a swipe inside it never yanks the
 * page.
 */

@media only screen and (max-width: 900px) {

	#bhal-app .bhal-tile-sm { flex-basis: 30%; }
}

/* ---------------- Layout: narrow viewports only ---------------- */

@media only screen and (max-width: 768px) {

	#bhal-app .bhal-hero { padding: 15px 15px 14px; }

	#bhal-app .bhal-hero-title { font-size: 21px; }

	#bhal-app .bhal-tiles-primary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#bhal-app .bhal-tiles-primary .bhal-tile-lg:first-child {
		grid-column: 1 / -1;
	}

	#bhal-app .bhal-tile-sm { flex-basis: 44%; }

	#bhal-app .bhal-chain-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 9px;
	}

	/* Four short metrics read better in one row once the card is full width. */
	#bhal-app .bhal-chain-metrics {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 5px;
	}

	#bhal-app .bhal-chain-card { padding: 12px 12px 11px; }
	#bhal-app .bhal-chain-total { margin-bottom: 10px; font-size: 19px; }

	#bhal-app .bhal-control { flex: 1 1 100%; }

	#bhal-app .bhal-bk { padding: 13px 10px 14px; }

	#bhal-app .bhal-pager { justify-content: center; }

	#bhal-app .bhal-busy { padding-top: 0; align-items: center; }
}

/* ------- Table model + touch: narrow portrait OR short landscape ------- */

@media only screen and (max-width: 768px),
       only screen and (max-height: 560px) and (orientation: landscape) {

	/* ---- Touch targets ---- */

	#bhal-app .bhal-date-input,
	#bhal-app .bhal-search-input {
		height: 44px;
		font-size: 16px; /* 16px stops iOS Safari zooming the page on focus. */
	}

	#bhal-app .bhal-page-btn { min-height: 44px; padding: 10px 18px; }
	#bhal-app .bhal-tab { min-height: 38px; padding: 8px 13px; }
	#bhal-app .bhal-retry { min-height: 44px; padding: 11px 22px; }

	#bhal-app .bhal-row-expandable,
	#bhal-app .bhal-tab,
	#bhal-app .bhal-page-btn,
	#bhal-app .bhal-th.bhal-sortable {
		-webkit-tap-highlight-color: rgba(255, 43, 43, .12);
	}

	/* ---- Breakup tabs: one scrollable line instead of wrapping ---- */

	#bhal-app .bhal-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	#bhal-app .bhal-tabs::-webkit-scrollbar { display: none; }
	#bhal-app .bhal-tab { flex: 0 0 auto; }

	/* ---- Movie table: bounded region with a sticky header ---- */

	#bhal-app .bhal-table-shell-movies .bhal-table-wrap {
		max-height: 460px;
		max-height: min(72vh, 560px);
		overflow-y: auto;
		scrollbar-width: thin;
	}

	#bhal-app .bhal-table-movies > thead > tr > .bhal-th {
		position: sticky;
		top: 0;
		z-index: 4;
	}

	/* Corner cells are frozen on both axes and must outrank the row passing
	   under them and the column passing behind them. */
	#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(1),
	#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(2) {
		z-index: 6;
	}

	#bhal-app .bhal-table-breakup > thead > tr > .bhal-th:nth-child(1) { z-index: 6; }

	/* ---- Breakup table: its own region, isolated from the page ---- */

	#bhal-app .bhal-pane .bhal-table-wrap {
		max-height: 300px;
		max-height: min(52vh, 340px);
		overscroll-behavior: contain;
	}

	/*
	 * Confine the inner table's sticky header to the panel's own stacking
	 * context, so it can never paint over the movie table's header while the
	 * outer region scrolls.
	 */
	#bhal-app .bhal-bk { z-index: 1; }
}

/*
 * 601-768px needs no column-geometry rule of its own any more. The base
 * 54px/300px pair above is already explicit and identical on both reports, so
 * the old `min-width: 150px` here would only have fought it.
 */

/*
 * Phones keep the identity columns FROZEN on the inline axis: Rank and Movie
 * on the movie list, and the breakup layer's own first column (City on the
 * City tab, State on State, Chain on Chain — it is column one in every case,
 * so one rule covers all three).
 *
 * They are narrowed rather than released. A 46px + 190px pair would eat half a
 * 375px screen, so the rank cell drops to 38px and the title cell is capped and
 * allowed to wrap onto a second line instead of widening. That leaves roughly
 * 200px of metrics visible per swipe while the identity of the row never
 * leaves the screen.
 */
@media only screen and (max-width: 600px) {

	#bhal-app .bhal-table-movies {
		/* Pre-JS fallback only; bhal.js replaces this with the measured width. */
		--bhal-pin-x: 44px;
	}

	/*
	 * Stated, not merely floored — see FROZEN COLUMN GEOMETRY above. A bare
	 * `min-width` here still let the auto layout hand this column part of the
	 * 860px surplus, and it handed a different part to each report (measured
	 * 62px on All India against 58px on National Chains at 480px wide).
	 */
	#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(1),
	#bhal-app .bhal-table-movies > tbody > tr > .bhal-td:nth-child(1) {
		width: 44px;
		min-width: 44px;
		max-width: 44px;
		padding-left: 9px;
		padding-right: 5px;
	}

	#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(2),
	#bhal-app .bhal-table-movies > tbody > tr > .bhal-td-title {
		width: 150px;
		min-width: 150px;
		max-width: 150px;
	}

	/*
	 * The chips wrap inside the frozen title column rather than widening it.
	 * Two per line at this width, which keeps the pinned pair under ~190px and
	 * still leaves room for the metrics to the right.
	 */
	#bhal-app .bhal-movie-meta { gap: 3px; margin-top: 4px; }

	#bhal-app .bhal-chip {
		padding: 1px 5px;
		font-size: 9px;
		border-radius: 3px;
	}

	/*
	 * The caret is taken out of the text flow. Left inline, a long single word
	 * ("Mahendragiri") pushes it onto a line of its own inside a 124px column.
	 * The cell is already `position: sticky`, so it is the positioned ancestor.
	 */
	#bhal-app .bhal-table-movies > tbody > tr > .bhal-td-title {
		position: sticky;
		padding-left: 24px;
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	#bhal-app .bhal-table-movies > tbody > tr > .bhal-td-title .bhal-caret {
		position: absolute;
		top: 11px;
		left: 8px;
		margin: 0;
	}

	#bhal-app .bhal-table-breakup > thead > tr > .bhal-th:nth-child(1),
	#bhal-app .bhal-table-breakup > tbody > tr > .bhal-td:nth-child(1) {
		width: 112px;
		min-width: 112px;
		max-width: 112px;
	}

	#bhal-app .bhal-table-breakup > tbody > tr > .bhal-td:nth-child(1) {
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}

/*
 * Tile labels wrap rather than ellipsise once the tiles are two-up: a truncated
 * "MOVIES TRA…" is worse than a two-line label, and flex/grid stretch keeps the
 * row heights even.
 */
@media only screen and (max-width: 600px) {

	#bhal-app .bhal-tile-sm .bhal-tile-label {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}

@media only screen and (max-width: 480px) {

	#bhal-app { padding: 10px; }

	/*
	 * Stacking all eleven figures one-up buries the movie table roughly a
	 * thousand pixels down the page. The headline figure keeps the full width;
	 * everything else pairs up, so the summary stays a glanceable block.
	 */
	#bhal-app .bhal-tile-lg { padding: 11px 12px; }
	#bhal-app .bhal-tile-lg .bhal-tile-value { font-size: 17px; }

	#bhal-app .bhal-tile-sm {
		flex: 1 1 44%;
		min-width: 0;
		padding: 8px 10px;
	}

	#bhal-app .bhal-tile-sm .bhal-tile-value { font-size: 14px; }

	#bhal-app .bhal-hero-title { font-size: 19px; }

	#bhal-app .bhal-table .bhal-th,
	#bhal-app .bhal-table .bhal-td { padding: 9px 8px; }

	/* Narrower still on small phones, so two metric columns stay in view. */
	#bhal-app .bhal-table-movies { --bhal-pin-x: 42px; }

	#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(1),
	#bhal-app .bhal-table-movies > tbody > tr > .bhal-td:nth-child(1) {
		width: 42px;
		min-width: 42px;
		max-width: 42px;
		padding-left: 8px;
		padding-right: 4px;
	}

	#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(2),
	#bhal-app .bhal-table-movies > tbody > tr > .bhal-td-title {
		width: 138px;
		min-width: 138px;
		max-width: 138px;
	}

	#bhal-app .bhal-table-breakup > thead > tr > .bhal-th:nth-child(1),
	#bhal-app .bhal-table-breakup > tbody > tr > .bhal-td:nth-child(1) {
		width: 100px;
		min-width: 100px;
		max-width: 100px;
	}

	#bhal-app .bhal-bk-title { font-size: 15px; }

	#bhal-app .bhal-scroll-hint { font-size: 10.5px; }
}

/*
 * Smallest phones. The rank header ("RANK") sets that column's own width, so
 * the space for the metrics is bought back from the title column and from the
 * cell padding rather than from the chips.
 */
@media only screen and (max-width: 380px) {

	#bhal-app .bhal-table-movies { --bhal-pin-x: 40px; }

	#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(1),
	#bhal-app .bhal-table-movies > tbody > tr > .bhal-td:nth-child(1) {
		width: 40px;
		min-width: 40px;
		max-width: 40px;
		padding-left: 6px;
		padding-right: 3px;
	}

	#bhal-app .bhal-table-movies > thead > tr > .bhal-th:nth-child(2),
	#bhal-app .bhal-table-movies > tbody > tr > .bhal-td-title {
		width: 118px;
		min-width: 118px;
		max-width: 118px;
		padding-right: 6px;
	}

	#bhal-app .bhal-table .bhal-th,
	#bhal-app .bhal-table .bhal-td { padding-left: 7px; padding-right: 7px; }
}

/* Smallest phones still in use: keep the paired money figures on one line. */
@media only screen and (max-width: 360px) {

	#bhal-app .bhal-tile-lg .bhal-tile-value { font-size: 15px; }
	#bhal-app .bhal-tile-sm .bhal-tile-value { font-size: 13px; }
	#bhal-app .bhal-tile-lg { padding: 10px 10px; }
	#bhal-app .bhal-tile-sm { padding: 8px 8px; }
}

/*
 * Phone landscape and other short viewports: the vh-based regions above would
 * otherwise leave only a row or two visible.
 */
@media only screen and (max-height: 560px) and (orientation: landscape) {

	#bhal-app .bhal-table-shell-movies .bhal-table-wrap { max-height: 76vh; }
	#bhal-app .bhal-pane .bhal-table-wrap { max-height: 58vh; }

	#bhal-app .bhal-hero { padding: 12px 14px 12px; }
	#bhal-app .bhal-hero-title { font-size: 18px; }
	#bhal-app .bhal-controls { margin-top: 11px; }
	#bhal-app .bhal-busy { padding-top: 0; align-items: center; }
}

/* ====================================================== Chain identity */

/*
 * Chain colours are keyed on a slug of the name the API returns and are used
 * in three places: the hero pills, the summary cards and the dot beside each
 * chain row in a breakup table. Any chain the API sends that is not listed
 * here keeps the neutral default, so nothing is hardcoded to a fixed roster.
 */
#bhal-app .bhal-pill.bhal-chain-pvr { background: #2c3568; }
#bhal-app .bhal-pill.bhal-chain-inox { background: #12693a; }
#bhal-app .bhal-pill.bhal-chain-cinepolis { background: #a71d22; }

#bhal-app .bhal-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 8px;
	vertical-align: baseline;
	background: #9aa1ab;
	border-radius: 50%;
}

#bhal-app .bhal-dot.bhal-chain-pvr { background: #2c3568; }
#bhal-app .bhal-dot.bhal-chain-inox { background: #12693a; }
#bhal-app .bhal-dot.bhal-chain-cinepolis { background: #a71d22; }

#bhal-app .bhal-chain-label { font-weight: 700; }

/* Insurance: a tile or metric block can never collapse below its content. */
#bhal-app .bhal-tile-lg { min-height: 62px; }
#bhal-app .bhal-tile-sm { min-height: 50px; }
#bhal-app .bhal-chain-metric { min-height: 38px; }
#bhal-app .bhal-tile-label,
#bhal-app .bhal-tile-value,
#bhal-app .bhal-chain-metric-label,
#bhal-app .bhal-chain-metric-value,
#bhal-app .bhal-chain-name,
#bhal-app .bhal-chain-total { display: block; }

@media only screen and (max-width: 768px) {

	#bhal-app { padding: 11px; border-radius: 12px; }

	#bhal-app .bhal-pill { padding: 3px 9px; font-size: 9px; }
}

/* ================================================ SEO copy + FAQ (v1.6.0) */

/*
 * The approved editorial copy and the FAQ accordion sit OUTSIDE #bhal-app, so
 * that an AJAX date change or page change never replaces them and the FAQPage
 * structured data always describes markup that is actually on the page. That
 * puts them outside this stylesheet's #bhal-app scope too, so they are scoped
 * under .bhal-editorial instead — still a `bhal-` prefixed container that only
 * these two templates render, so no theme rule and no other page is touched.
 *
 * The container also carries the theme's own .entry-content .post-content
 * classes, which is what gives the paragraphs the site's body typography. The
 * rules below only add what the theme has no opinion about.
 */

.bhal-editorial {
	margin: 22px 0 0;
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #23262b;
}

.bhal-editorial .bhal-seo,
.bhal-editorial .bhal-faq {
	margin: 0 0 18px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
}

.bhal-editorial .bhal-seo-heading,
.bhal-editorial .bhal-faq-heading {
	margin: 0 0 10px;
	padding: 0 0 9px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	color: #14161a;
	border-bottom: 2px solid #ff2b2b;
	/* The accent underline is the heading's own width, not the card's. */
	display: inline-block;
}

.bhal-editorial .bhal-seo-p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.72;
	color: #3d434b;
}

.bhal-editorial .bhal-seo-p:last-child { margin-bottom: 0; }

/* ---- FAQ accordion.
     <details>/<summary>, so it opens with no JavaScript at all, stays open for
     printing and for a crawler reading the DOM, and needs no ARIA of its own:
     the element already exposes the expanded state. ---- */

.bhal-editorial .bhal-faq-list {
	margin: 0;
	border-top: 1px solid #edeff2;
}

.bhal-editorial .bhal-faq-item {
	margin: 0;
	border-bottom: 1px solid #edeff2;
}

/* No rule under the last answer — the card's own border already closes it. */
.bhal-editorial .bhal-faq-item:last-child { border-bottom: 0; }

.bhal-editorial .bhal-faq-q {
	position: relative;
	display: block;
	padding: 13px 34px 13px 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	color: #1c1f24;
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Suppress the native disclosure triangle in both engines. */
.bhal-editorial .bhal-faq-q::-webkit-details-marker { display: none; }
.bhal-editorial .bhal-faq-q::marker { content: ""; }

.bhal-editorial .bhal-faq-q:hover { color: #ff2b2b; }

.bhal-editorial .bhal-faq-q:focus-visible {
	outline: 2px solid #ff5b5b;
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * The +/- indicator is drawn from two pseudo-element bars rather than a font
 * glyph, so it does not depend on the theme's fontello build being present.
 */
.bhal-editorial .bhal-faq-icon {
	position: absolute;
	top: 50%;
	right: 4px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
}

.bhal-editorial .bhal-faq-icon::before,
.bhal-editorial .bhal-faq-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 2px;
	margin-top: -1px;
	background: #ff2b2b;
	border-radius: 1px;
	transition: transform .18s ease;
}

.bhal-editorial .bhal-faq-icon::after { transform: rotate(90deg); }

/* Open: the vertical bar rotates flat, so the plus becomes a minus. */
.bhal-editorial .bhal-faq-item[open] > .bhal-faq-q { color: #ff2b2b; }
.bhal-editorial .bhal-faq-item[open] .bhal-faq-icon::after { transform: rotate(0deg); }

.bhal-editorial .bhal-faq-a {
	padding: 0 4px 15px 0;
	font-size: 14px;
	line-height: 1.72;
	color: #3d434b;
}

.bhal-editorial .bhal-faq-a p { margin: 0; }

@media (prefers-reduced-motion: reduce) {

	.bhal-editorial .bhal-faq-icon::before,
	.bhal-editorial .bhal-faq-icon::after { transition: none; }
}

@media only screen and (max-width: 768px) {

	.bhal-editorial .bhal-seo,
	.bhal-editorial .bhal-faq {
		padding: 14px 14px;
		border-radius: 10px;
	}
}

@media only screen and (max-width: 600px) {

	.bhal-editorial { margin-top: 18px; }

	.bhal-editorial .bhal-seo-heading,
	.bhal-editorial .bhal-faq-heading { font-size: 16px; }

	.bhal-editorial .bhal-seo-p,
	.bhal-editorial .bhal-faq-a { font-size: 13.5px; line-height: 1.68; }

	.bhal-editorial .bhal-faq-q {
		padding: 12px 30px 12px 0;
		font-size: 13.5px;
	}

	/* A 44px-tall target at the far right of the row, per WCAG 2.5.8. */
	.bhal-editorial .bhal-faq-icon {
		right: 2px;
		width: 13px;
		height: 13px;
		margin-top: -6.5px;
	}

	.bhal-editorial .bhal-faq-icon::before,
	.bhal-editorial .bhal-faq-icon::after { width: 13px; }
}

/* ============================== Vertical rail ads — note only (1.9.0) */

/*
 * There is deliberately NO rule for .vertical-advert here any more.
 *
 * The rails are the theme's (view/adcode/vertical-advert-left and -right),
 * placed by templates/parts/shell.php exactly as page-templates/movies-landing.php
 * places them and styled entirely by the theme, including the theme's own
 * `@media (max-width: 1024px) { .vertical-advert { display: none } }`. These two
 * pages therefore behave like every other page on the site at every width.
 *
 * Two earlier attempts to improve on that are gone:
 *
 *   1.7.0 clamped the offset so the rail stayed on canvas on narrow desktops.
 *         It stayed on canvas by sitting on top of the page — measured 30px of
 *         the content covered at 1280px and 94px at 1152px.
 *   1.8.0 replaced the clamp with a 1366px floor, which avoided the overlap but
 *         made these two pages the only ones on the site with no rails at 1280px.
 *
 * Between roughly 1025px and 1330px the theme's own rails overlap content on
 * this page and on movies-landing alike, because a 120px rail pinned 0.5rem
 * inside the window has nowhere else to go once the 69rem row stops leaving a
 * gutter. That is a site-wide characteristic of the theme, not something this
 * plugin should fix unilaterally on two pages. If the ad team decides these
 * pages should differ, this is the whole change:
 *
 *     @media only screen and (max-width: 1365px) {
 *         #bhal-page .vertical-advert { display: none; }
 *     }
 */