/* ==========================================================================
   Buy Tickets — filter bar and card clarity
   --------------------------------------------------------------------------
   Appended to woo.css's Buy Tickets section rather than made a new file: the
   page already loads woo.css, and a separate request for ~200 lines would cost
   more than it saves.

   Every value is an existing token. The one new custom property is --chip-accent,
   set inline per chip from the day's own colour when the committee has filled one
   in, and falling back to gold when they have not.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The filter bar
   -------------------------------------------------------------------------- */

.idc-filterbar-section {
	padding-top: 32px;
	padding-bottom: 8px;
}

.idc-filterbar {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 22px 24px;
	display: grid;
	gap: 16px;
}

/* `hidden` is set in the markup and removed by JS. Without this the attribute is
   ignored on a grid container, and the bar would flash in before JS runs. */
.idc-filterbar[hidden] {
	display: none;
}

.idc-filter-row {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 14px;
	align-items: start;
}

.idc-filter-legend {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-dim);
	padding-top: 9px;
}

.idc-filter-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.idc-chip {
	--chip-accent: var(--gold);

	appearance: none;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: .86rem;
	font-weight: 600;
	/* 40px tall: a touch target, not a decoration. */
	min-height: 40px;
	padding: 8px 16px;
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.idc-chip:hover {
	border-color: var(--border-hover);
	color: var(--text);
}

.idc-chip:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* The selected state carries a left dot as well as colour, so selection is not
   communicated by hue alone. */
.idc-chip.is-on {
	background: color-mix(in srgb, var(--chip-accent) 14%, transparent);
	border-color: var(--chip-accent);
	color: var(--text);
}

/*
 * The selected dot, in the day's true Navdurga colour.
 *
 * The colours are the committee's and are NOT lightened for display — Katyayani
 * is red, Kalaratri is royal blue, and shifting them for contrast would be
 * shifting something that carries meaning.
 *
 * But two of them are dark against a near-black page: measured against #09090F,
 * Navami's purple #6A1B9A is 2.1:1 and Saptami's blue #1565C0 is 3.5:1, so a
 * bare dot in those hues would barely register. The faint ring below gives the
 * dot an edge to read against without touching the colour inside it.
 *
 * Colour is never the only signal regardless: the chip is labelled, and the
 * selected state also carries a background fill and a border.
 */
.idc-chip.is-on::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--chip-accent);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
	vertical-align: middle;
}

/*
 * Unselected chips get a small colour marker too, so the day colours are
 * visible before you interact rather than only after. Dimmer, so the selected
 * chip still stands out.
 */
.idc-chip[data-filter="day"][data-value]:not([data-value=""])::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--chip-accent);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
	opacity: .55;
	vertical-align: middle;
}

.idc-chip[data-filter="day"].is-on::before {
	opacity: 1;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

/* color-mix is widely supported but not universally; this keeps the selected
   chip legible if it is unavailable. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.idc-chip.is-on {
		background: rgba(var(--gold-rgb), .14);
	}
}

.idc-filter-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	border-top: 1px solid var(--border);
	padding-top: 14px;
}

.idc-filter-count {
	margin: 0;
	font-size: .88rem;
	color: var(--text-muted);
	font-variant-numeric: lining-nums tabular-nums;
}

.idc-filter-clear {
	appearance: none;
	background: none;
	border: 0;
	padding: 6px 2px;
	color: var(--gold);
	font-family: var(--font-body);
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.idc-filter-clear:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Filtered-out cards, and an empty section
   -------------------------------------------------------------------------- */

.idc-filterable.is-filtered-out {
	display: none;
}

/* A section whose every card is hidden collapses, so the page does not leave a
   run of empty headings between the visible results. */
.idc-section-empty {
	display: none;
}

.idc-no-matches {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 32px 24px;
	text-align: center;
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   3. Card clarity — the facts that were missing
   -------------------------------------------------------------------------- */

.ptc-meta,
.combo-card-admits,
.parking-left {
	margin: 6px 0 10px;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--text-muted);
}

.combo-card-admits,
.parking-left {
	text-align: center;
}

/* Spaces left is a nudge, so it reads warmer than ordinary metadata. */
.parking-left {
	color: var(--gold-light);
}

.combo-card--kojagari {
	border-color: rgba(var(--gold-rgb), .35);
}

.idc-koj-date {
	font-family: var(--font-body);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--gold);
	margin: 0 0 10px;
}

/* --------------------------------------------------------------------------
   4. Day tabs — tinted per day once a colour is set
   -------------------------------------------------------------------------- */

.day-tab {
	--chip-accent: var(--gold);
}

.day-tab--active {
	border-color: var(--chip-accent);
}

/* Same ring treatment as the filter chips, for the same reason: the true colour
   inside, an edge so a dark hue still reads on a near-black tab. */
.day-tab-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--chip-accent);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
	margin-bottom: 6px;
}

.day-tab-tithi {
	display: block;
	margin-top: 2px;
	font-size: .68rem;
	letter-spacing: .06em;
	color: var(--text-dim);
}

.day-tab--active .day-tab-tithi {
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.idc-filterbar {
		padding: 18px 16px;
	}

	.idc-filter-row {
		/* The 72px label column cannot hold beside a wrapping chip set on a
		   phone; stack the label above its chips instead. */
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.idc-filter-legend {
		padding-top: 0;
	}

	.idc-filter-chips {
		/* Horizontal scroll rather than four rows of chips, keeping the bar short
		   enough that the tickets stay on screen. */
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: thin;
	}

	.idc-chip {
		flex: none;
	}
}

/* --------------------------------------------------------------------------
   6. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.idc-chip {
		transition: none;
	}
}

/* =====================================================
   CATEGORY TABS — All / Daily Puja / Combo / Donation / Car Parking
   =====================================================
   The first cut, sitting above the filter panel. Deliberately reuses the
   panel's tokens (gold accent, hairline border, pill radius) rather than
   introducing a second visual language for what is still a filter.

   Hidden until the script reveals it: with JavaScript off the tabs would be
   inert, and an inert tab row is worse than none. */
.idc-cattabs { margin: 4px 0 30px; }
.idc-cattabs[hidden] { display: none; }

.idc-cattabs-scroll {
    display: flex;
    /* Centred under the section title, as the design has it.
       `safe` matters: with plain `center`, a row wider than its container
       overflows equally in both directions and the first pill becomes
       unreachable — you cannot scroll left past the start. `safe center`
       falls back to flex-start the moment it would overflow, so the row
       centres on a laptop and scrolls properly from the first pill on a
       phone. The unprefixed `center` above it is the fallback for browsers
       that do not understand the keyword. */
    justify-content: center;
    justify-content: safe center;
    gap: 8px;
    /* Horizontal scroll rather than wrapping: five tabs wrapping to two lines
       on a phone pushes the tickets below the fold and reads as a broken grid
       rather than a tab row. */
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.idc-cattabs-scroll::-webkit-scrollbar { display: none; }

.idc-cattab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(var(--gold-rgb), 0.04);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.idc-cattab:hover { color: var(--text); border-color: rgba(var(--gold-rgb), 0.4); }

/* The selected tab has to be unmistakable at a glance — filled, not merely
   tinted, because a tinted pill among tinted pills is a puzzle. */
.idc-cattab.is-active {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1206;
    font-weight: 600;
}

.idc-cattab:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.idc-cattab-count {
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}
.idc-cattab-count:empty { display: none; }

@media (max-width: 640px) {
    .idc-cattabs { margin-bottom: 14px; }
    .idc-cattab { padding: 9px 15px; font-size: 0.82rem; }
    /* Let the row bleed to the screen edges so the last tab is visibly cut off,
       which is what tells a thumb there is more to scroll. */
    .idc-cattabs-scroll { padding-inline: 2px; }
}

/* The group axis lives in the panel only so the engine can count and clear it;
   the tabs are its interface. */
.idc-fopts--hidden { display: none !important; }

/* The filter engine's plumbing, kept in the DOM but never shown.
   tickets-filter.js ends with `bar.hidden = false`, which would otherwise
   reveal an empty bordered panel now that the rail's controls are gone. */
.idc-filterbar--headless {
    display: none !important;
}

/* The tab row lives inside #daily-tickets, so it would be hidden along with
   that section whenever the chosen category has no daily tickets in it —
   picking Car Parking would remove the control you need to get back. Higher
   specificity than the blanket `.idc-section-empty { display: none }`, so the
   section stays in the flow to carry the tabs while its own heading and grid
   go, and the page reads as "tabs, then the sections that matched". */
#daily-tickets.idc-section-empty {
    display: block;
    padding-bottom: 0;
}
#daily-tickets.idc-section-empty .idc-sechead,
#daily-tickets.idc-section-empty .idc-tgrid {
    display: none;
}