/* The filter bar reuses Ajax Load More's own classes (alm-filters,
   alm-filter--group, alm-filter--select, etc.) so it inherits ALM's
   already-loaded plugin CSS on this page — most of the visual styling
   comes from there, not from here.

   What's still needed here:
   - A basic flex layout fallback, in case any of ALM's own CSS depends
     on markup/JS state this plugin doesn't fully reproduce (e.g. classes
     ALM's JS adds at runtime that aren't present here).
   - The "Deal Available?" checked/unchecked visual — it's a custom
     div[role="checkbox"] (matching ALM's own pattern), not a native
     input, and it's not certain ALM's CSS covers this exact class
     combination, so a baseline working appearance is defined here
     regardless. If ALM's CSS also styles it, both apply harmlessly.

   The rows themselves use existing theme classes (list-individual-row
   etc.) and need no CSS here at all. */

/* Simucube-only — see the comment in render.php next to where this class
   is output. Small/muted so it reads as a caveat, not a second price. */
.price-excl-vat {
	font-size: 0.7em;
	font-weight: 400;
	opacity: 0.65;
}

.srs-db-wrap {
	margin-bottom: 20px;
}

/* Safety net for the stopPropagation() fix in deals-browser.js — if ALM's
   own JS ever detects a change here some other way (not pure event
   bubbling) and applies its "filtering" dim state anyway, this forces it
   back off. Scoped to .srs-db-wrap only, so real ALM filter bars
   elsewhere on the page keep their own normal loading-dim behaviour. */
.srs-db-wrap .alm-filters-container.filtering {
	opacity: 1 !important;
}

.srs-db-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.srs-db-filter-bar .alm-filter--select select {
	cursor: pointer;
}

/* "Deal Available?" toggle — baseline visual fallback */
.srs-db-deal-only {
	width: 18px;
	height: 18px;
	border: 2px solid #8fd578;
	border-radius: 3px;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.srs-db-deal-only[aria-checked="true"] {
	background: #8fd578;
}
.srs-db-deal-only-icon {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 11px;
	color: #04090c;
}
.srs-db-deal-only[aria-checked="true"] .srs-db-deal-only-icon {
	display: block;
}
.srs-db-deal-only-label {
	margin-left: 6px;
	cursor: pointer;
	vertical-align: middle;
}
.srs-db-deal-only-sublabel {
	font-weight: 400;
	font-size: 0.85em;
	opacity: 0.65;
	margin-left: 4px;
}

.srs-db-rows-wrap {
	position: relative; /* anchors the spinner overlay */
}

.srs-db-rows {
	min-height: 60px;
	transition: opacity 0.15s ease;
}

/* Dims + locks the current rows the instant a filter/sort/checkbox
   changes, so it's obvious something is happening right away rather
   than the old rows just sitting there unchanged for ~1 second. */
.srs-db-rows-wrap.srs-db-is-loading .srs-db-rows {
	opacity: 0.4;
	pointer-events: none;
}

.srs-db-spinner {
	display: none;
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	width: 34px;
	height: 34px;
	border: 3px solid rgba(143, 213, 120, 0.25);
	border-top-color: #8fd578;
	border-radius: 50%;
	animation: srs-db-spin 0.7s linear infinite;
}

.srs-db-rows-wrap.srs-db-is-loading .srs-db-spinner {
	display: block;
}

@keyframes srs-db-spin {
	to { transform: translateX(-50%) rotate(360deg); }
}

.srs-db-load-more-wrap {
	text-align: center;
	padding: 24px 0;
}

/* Error messages only (see deals-browser.js showError/hideError) — the
   loading state itself is now the dim+spinner above, not this text. */
.srs-db-loading {
	text-align: center;
	padding: 20px 0;
	color: #d81a2a;
}

.srs-db-empty {
	text-align: center;
	padding: 40px 0;
	color: #999;
}

/* Per-row Price History toggle — lives in the retailer column's old
   spot (retailer itself is display:none for now, in render.php). */
.srs-db-history-toggle.button-outline.green {border:2px solid #8fd578!important}
.srs-db-history-toggle.button-outline.green:hover {border:2px solid #d81a2a!important; color:#FFF!important;}
.srs-db-history-toggle {
	background: none;
	border: none;
	color: #8fd578;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}


/* The panel lives inside .list-individual-row (a flex row, per the
   theme's own CSS), so it needs to force itself onto its own full-width
   line below the existing columns rather than trying to fit alongside
   them as another column. */
.srs-db-history-panel {
	flex: 1 0 100%;
	width: 100%;
	padding: 16px 0 4px;
}

/* Optional highlight while a row's history is open */
.list-individual-row.srs-db-row-expanded {
	background: rgba(143, 213, 120, 0.04);
}

/* Chart.js (maintainAspectRatio:false) fills whatever height this
   wrapper has — needs an explicit height, a max-height alone wouldn't
   give the canvas a definite box to size against. */
.srs-db-history-chart-wrap {
	position: relative;
	height: 200px;
}

.srs-db-history-status {
	color: #999;
	font-size: 13px;
	padding: 10px 0;
}

/* Same custom HTML tooltip as the single deal page's chart — duplicated
   here (rather than shared) since this plugin and that theme template
   are separate files/contexts with no shared stylesheet. Keep both in
   sync if this design ever changes. */
.srs-chart-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	transform: translate(-50%, -115%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.1s ease;
	background: rgba(20, 20, 20, 0.5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 10px 14px;
	font-family: var(--bodyfontfamily), var(--nv-fallback-ff), Inter, sans-serif;
	color: #fff;
	z-index: 9999;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	min-width: 130px;
	white-space: nowrap;
}
.srs-db-row-expanded .srs-chart-tooltip {
	background: rgba(20, 20, 20, 0.75);
}
.srs-chart-tooltip .srs-tt-date { font-size: 12px; color: #999; margin-bottom: 4px; }
.srs-chart-tooltip .srs-tt-price { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.srs-chart-tooltip .srs-tt-delta { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.srs-chart-tooltip .srs-tt-delta.up { color: #d81a2a; }
.srs-chart-tooltip .srs-tt-delta.down { color: #8fd578; }