/**
 * Component — Quick Add
 *
 * Markup: modules/frontend/views/quick-add-modal.php. Behaviour:
 * assets/js/components/quick-add.js. Built on the shared Modal
 * (components/modal.css) — this file only styles the dialog frame
 * (header, thumbnail, close, details link) and its mobile bottom-sheet
 * presentation. The ticket-choosing body is the shared Entry Selector
 * (components/entry-selector.css, 2026-10-02).
 *
 * Desktop/tablet: a compact centred dialog (max 28rem). Mobile
 * (<640px): a bottom sheet — full width, anchored to the bottom edge,
 * thumb-reachable, respecting the home-indicator safe area.
 */

.ec-quick-add {
	z-index: calc(var(--ec-z-modal) + 1);
}

.ec-quick-add .ec-modal__backdrop {
	background-color: rgba(3, 7, 13, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ec-quick-add__panel {
	display: grid;
	gap: var(--ec-space-4);
	max-width: 28rem;
	padding: var(--ec-space-5);
	box-sizing: border-box;
	border: 1px solid var(--ec-color-border-strong);
	background-color: var(--ec-color-surface-elevated);
	overscroll-behavior: contain;
}

/* The charged top edge, shared with the card */
.ec-quick-add__panel::before {
	content: '';
	position: absolute;
	top: -1px;
	left: var(--ec-space-6);
	right: var(--ec-space-6);
	height: 1px;
	background: var(--ec-charge-line);
}

/* Header: thumbnail, competition name, unit price, close */
.ec-quick-add__header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--ec-space-3);
}

.ec-quick-add__thumb {
	width: 4.5rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--ec-radius-sm);
	border: 1px solid var(--ec-color-border);
	background: linear-gradient(160deg, var(--ec-color-navy-700), var(--ec-color-navy-950));
}

.ec-quick-add__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ec-quick-add__heading {
	min-width: 0;
}

.ec-quick-add__title {
	margin: 0.15rem 0 0;
	font-size: var(--ec-font-size-body);
	font-weight: var(--ec-font-weight-bold);
	line-height: 1.3;
	color: var(--ec-color-text-primary);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ec-quick-add__unit {
	margin: 0.15rem 0 0;
	font-size: var(--ec-font-size-body-sm);
	color: var(--ec-color-text-secondary);
}

.ec-quick-add__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid transparent;
	border-radius: var(--ec-radius-md);
	background: none;
	color: var(--ec-color-text-secondary);
	cursor: pointer;
}

.ec-quick-add__close:hover {
	background-color: rgba(237, 245, 251, 0.06);
	color: var(--ec-color-text-primary);
}

.ec-quick-add__close:focus-visible {
	outline: none;
	box-shadow: var(--ec-focus-ring);
}

.ec-quick-add__link {
	justify-self: center;
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-body-sm);
	text-underline-offset: 0.15em;
}

.ec-quick-add__link:hover {
	color: var(--ec-color-text-primary);
}

/* Mobile: bottom sheet */
@media (max-width: 639px) {
	.ec-quick-add {
		align-items: flex-end;
		padding: 0;
	}

	.ec-quick-add__panel {
		max-width: none;
		max-height: 88vh;
		max-height: 88dvh;
		border-radius: var(--ec-radius-lg) var(--ec-radius-lg) 0 0;
		border-bottom: 0;
		padding-bottom: calc(var(--ec-space-5) + env(safe-area-inset-bottom, 0px));
		transform: translateY(1.5rem);
	}

	.ec-quick-add.ec-modal--visible .ec-quick-add__panel {
		transform: none;
	}
}