/**
 * GF Entry Views — frontend styles (v1.2.0).
 *
 * Themeable via CSS custom properties on .gfev-view, e.g.
 *   .gfev-view { --gfev-accent: #cd4225; }
 *
 * --gfev-accent-soft uses a two-step pattern: a static fallback for old
 * browsers, upgraded to color-mix() inside @supports. Keep both steps.
 */

.gfev-view {
	--gfev-accent: #1e81ba;
	--gfev-accent-soft: #eaf3f9;
	--gfev-text: #1f2933;
	--gfev-muted: #616e7c;
	--gfev-border: #e0e6ec;
	--gfev-bg: #ffffff;
	--gfev-bg-alt: #f7f9fb;
	--gfev-radius: 8px;
	--gfev-shadow: 0 1px 3px rgba(16, 42, 67, 0.08);

	color: var(--gfev-text);
	margin: 1.25em 0;
	font-size: 15px;
	line-height: 1.5;
	scroll-margin-top: 2rem;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
	.gfev-view {
		--gfev-accent-soft: color-mix(in srgb, var(--gfev-accent) 10%, #fff);
	}
}

.gfev-view a {
	color: var(--gfev-accent);
}

/* ------------------------------------------------------------------
 * Entries count banner (v1.2.0).
 * ------------------------------------------------------------------ */

.gfev-count {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	margin: 0 0 0.9em;
	padding: 0.5em 0.95em;
	background: var(--gfev-accent-soft);
	border: 1px solid var(--gfev-border);
	border-left: 3px solid var(--gfev-accent);
	border-radius: var(--gfev-radius);
}

.gfev-count__label {
	font-weight: 600;
	color: var(--gfev-text);
}

.gfev-count__value {
	font-weight: 700;
	font-size: 1.15em;
	color: var(--gfev-accent);
}

/* ------------------------------------------------------------------
 * Search.
 * ------------------------------------------------------------------ */

.gfev-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1em;
}

.gfev-search input[type="search"] {
	flex: 1 1 220px;
	max-width: 340px;
	padding: 0.5em 0.75em;
	border: 1px solid var(--gfev-border);
	border-radius: var(--gfev-radius);
	background: var(--gfev-bg);
	color: var(--gfev-text);
	font-size: inherit;
}

.gfev-search input[type="search"]:focus {
	outline: 2px solid var(--gfev-accent);
	outline-offset: 1px;
	border-color: var(--gfev-accent);
}

.gfev-search__btn {
	padding: 0.5em 1.1em;
	border: none;
	border-radius: var(--gfev-radius);
	background: var(--gfev-accent);
	color: #fff;
	font-size: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.gfev-search__btn:hover,
.gfev-search__btn:focus {
	filter: brightness(0.92);
}

.gfev-search__clear {
	font-size: 0.9em;
	color: var(--gfev-muted);
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Empty state.
 * ------------------------------------------------------------------ */

.gfev-empty {
	padding: 1.25em;
	background: var(--gfev-bg-alt);
	border: 1px dashed var(--gfev-border);
	border-radius: var(--gfev-radius);
	color: var(--gfev-muted);
	text-align: center;
}

/* ------------------------------------------------------------------
 * Table layout.
 * ------------------------------------------------------------------ */

.gfev-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--gfev-border);
	border-radius: var(--gfev-radius);
	box-shadow: var(--gfev-shadow);
	background: var(--gfev-bg);
}

.gfev-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.gfev-table th {
	text-align: left;
	padding: 0.7em 0.9em;
	background: var(--gfev-accent-soft);
	color: var(--gfev-text);
	font-weight: 700;
	border-bottom: 2px solid var(--gfev-accent);
	white-space: nowrap;
}

.gfev-table td {
	padding: 0.65em 0.9em;
	border-bottom: 1px solid var(--gfev-border);
	vertical-align: top;
}

.gfev-table tbody tr:nth-child(even) {
	background: var(--gfev-bg-alt);
}

.gfev-table tbody tr:last-child td {
	border-bottom: none;
}

@media (max-width: 680px) {
	.gfev-table thead {
		display: none;
	}

	.gfev-table,
	.gfev-table tbody,
	.gfev-table tr,
	.gfev-table td {
		display: block;
		width: 100%;
	}

	.gfev-table tr {
		border-bottom: 2px solid var(--gfev-border);
		padding: 0.4em 0;
	}

	.gfev-table td {
		border-bottom: none;
		padding: 0.35em 0.9em;
	}

	.gfev-table td::before {
		content: attr(data-label);
		display: block;
		font-weight: 700;
		font-size: 0.82em;
		color: var(--gfev-muted);
		text-transform: uppercase;
		letter-spacing: 0.03em;
		margin-bottom: 0.15em;
	}

	/* "Hide if empty": the stacked mobile view skips blank cells entirely. */
	.gfev-table td.gfev-cell--empty {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Cards layout.
 * ------------------------------------------------------------------ */

.gfev-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1em;
}

.gfev-card {
	background: var(--gfev-bg);
	border: 1px solid var(--gfev-border);
	border-radius: var(--gfev-radius);
	box-shadow: var(--gfev-shadow);
	padding: 1em 1.1em;
	transition: box-shadow 0.15s ease;
}

.gfev-card:hover {
	box-shadow: 0 3px 10px rgba(16, 42, 67, 0.12);
}

.gfev-card__title {
	font-weight: 700;
	font-size: 1.05em;
	color: var(--gfev-accent);
	padding-bottom: 0.5em;
	margin-bottom: 0.6em;
	border-bottom: 1px solid var(--gfev-border);
}

.gfev-card__row {
	display: flex;
	flex-direction: column;
	margin-bottom: 0.55em;
}

.gfev-card__row:last-child {
	margin-bottom: 0;
}

.gfev-card__label {
	font-size: 0.8em;
	font-weight: 700;
	color: var(--gfev-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ------------------------------------------------------------------
 * List layout.
 * ------------------------------------------------------------------ */

.gfev-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gfev-list__item {
	background: var(--gfev-bg);
	border: 1px solid var(--gfev-border);
	border-radius: var(--gfev-radius);
	box-shadow: var(--gfev-shadow);
	padding: 0.9em 1.1em;
	margin-bottom: 0.8em;
}

.gfev-list__row {
	display: grid;
	grid-template-columns: minmax(140px, 220px) 1fr;
	gap: 0.35em 1em;
	padding: 0.3em 0;
	border-bottom: 1px dashed var(--gfev-border);
}

.gfev-list__row:last-child {
	border-bottom: none;
}

.gfev-list__label {
	font-weight: 600;
	color: var(--gfev-muted);
}

@media (max-width: 560px) {
	.gfev-list__row {
		grid-template-columns: 1fr;
		gap: 0.1em;
	}
}

/* ------------------------------------------------------------------
 * Accordion layout — native <details>/<summary>, no JavaScript.
 * Per-View styling comes from inline variables set on the wrapper; each
 * variable intentionally falls back to the global theme variables.
 * ------------------------------------------------------------------ */

.gfev-acc__item {
	border: 1px solid var(--gfev-border);
	border-radius: var(--gfev-radius);
	margin-bottom: 0.6em;
	background: var(--gfev-acc-header-bg, var(--gfev-bg));
	box-shadow: var(--gfev-shadow);
	overflow: hidden;
}

.gfev-acc__header {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.75em 1em;
	cursor: pointer;
	list-style: none;
	background: var(--gfev-acc-header-bg, var(--gfev-bg));
	color: var(--gfev-acc-header-color, var(--gfev-text));
	font-size: var(--gfev-acc-header-size, 17px);
}

.gfev-acc__header::-webkit-details-marker {
	display: none;
}

.gfev-acc__header:focus-visible {
	outline: 2px solid var(--gfev-accent);
	outline-offset: -2px;
}

.gfev-acc__title {
	flex: 1 1 auto;
	font-weight: 700;
	min-width: 0;
	overflow-wrap: anywhere;
}

.gfev-acc__chevron {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
	color: currentColor;
}

.gfev-acc__item[open] > .gfev-acc__header .gfev-acc__chevron {
	transform: rotate(180deg);
}

/* Arrow side: flex order swaps title/arrow. */
.gfev-accordion--arrow-left .gfev-acc__chevron {
	order: -1;
}

.gfev-acc__body {
	padding: 0.85em 1em;
	background: var(--gfev-acc-body-bg, var(--gfev-bg-alt));
	border-top: 1px solid var(--gfev-border);
}

.gfev-acc__row {
	display: grid;
	grid-template-columns: minmax(140px, 220px) 1fr;
	gap: 0.35em 1em;
	padding: 0.3em 0;
	border-bottom: 1px dashed var(--gfev-border);
}

.gfev-acc__row:last-child {
	border-bottom: none;
}

.gfev-acc__label {
	font-weight: 600;
	color: var(--gfev-muted);
}

@media (max-width: 560px) {
	.gfev-acc__row {
		grid-template-columns: 1fr;
		gap: 0.1em;
	}
}

/* ------------------------------------------------------------------
 * Payment badges.
 * ------------------------------------------------------------------ */

.gfev-badge {
	display: inline-block;
	padding: 0.15em 0.65em;
	border-radius: 999px;
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1.6;
	background: var(--gfev-bg-alt);
	color: var(--gfev-muted);
	border: 1px solid var(--gfev-border);
}

.gfev-badge--paid,
.gfev-badge--active,
.gfev-badge--authorized {
	background: #e7f6ec;
	color: #1d7a3e;
	border-color: #bfe6cc;
}

.gfev-badge--processing,
.gfev-badge--pending {
	background: #fdf3e1;
	color: #9a6700;
	border-color: #f2ddb0;
}

.gfev-badge--failed,
.gfev-badge--cancelled,
.gfev-badge--voided,
.gfev-badge--refunded,
.gfev-badge--expired {
	background: #fdecec;
	color: #b3261e;
	border-color: #f3c4c1;
}

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

.gfev-pagination {
	margin-top: 1.1em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
}

.gfev-pagination .page-numbers {
	display: inline-block;
	min-width: 2.1em;
	padding: 0.35em 0.6em;
	text-align: center;
	border: 1px solid var(--gfev-border);
	border-radius: var(--gfev-radius);
	background: var(--gfev-bg);
	color: var(--gfev-text);
	text-decoration: none;
	transition: background 0.15s ease;
}

.gfev-pagination a.page-numbers:hover,
.gfev-pagination a.page-numbers:focus {
	background: var(--gfev-accent-soft);
	border-color: var(--gfev-accent);
}

.gfev-pagination .page-numbers.current {
	background: var(--gfev-accent);
	border-color: var(--gfev-accent);
	color: #fff;
	font-weight: 700;
}

.gfev-pagination .page-numbers.dots {
	border: none;
	background: transparent;
}

/* ------------------------------------------------------------------
 * Preview notice (managers only).
 * ------------------------------------------------------------------ */

.gfev-preview-notice {
	margin: 0 0 1em;
	padding: 0.7em 1em;
	background: #fdf3e1;
	border-left: 4px solid #d69e2e;
	border-radius: 4px;
	color: #744e10;
	font-size: 0.92em;
}

/* ------------------------------------------------------------------
 * Motion preferences.
 * ------------------------------------------------------------------ */

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

/* v1.4.0 — View header HTML block. */
.gfev-header-html {
	margin: 0 0 16px;
}

.gfev-header-html img {
	max-width: 100%;
	height: auto;
}