.cpress-seat-picker {
	margin: 1.5rem 0;
	padding: 1rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fafafa;
}

.cpress-seat-picker__title {
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.cpress-session-select {
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.cpress-session-select label {
	font-weight: 600;
}

.cpress-session-select select {
	min-width: 220px;
}

.cpress-price-display {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.cpress-price-display .cpress-price-label {
	font-weight: 500;
}

.cpress-price-display .cpress-price-value {
	font-weight: 700;
	font-size: 20px;
}

.cpress-price-display .cpress-price-seats {
	opacity: 0.85;
	font-size: 14px;
}

/* Seat Legend */
.cpress-seat-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 16px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 13px;
}

.cpress-seat-legend__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cpress-seat-legend__color {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	border: 2px solid;
}

.cpress-seat-legend__color--available {
	background: #fff;
	border-color: #bbb;
}

.cpress-seat-legend__color--selected {
	background: #22c55e;
	border-color: #16a34a;
}

.cpress-seat-legend__color--reserved {
	background: #f97316;
	border-color: #ea580c;
}

.cpress-seat-legend__color--sold {
	background: #ef4444;
	border-color: #dc2626;
}

.cpress-seat-grid,
.cpress-seat-list {
	display: grid;
	gap: 0.5rem;
}

.cpress-seat-grid {
	grid-template-columns: repeat(var(--cpress-seat-cols), minmax(44px, 1fr));
}

.cpress-seat-list {
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}

.cpress-seat {
	padding: 0.5rem 0.25rem;
	border-radius: 6px;
	border: 2px solid #bbb;
	background: #fff;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 500;
	transition: all 0.2s ease;
	text-align: center;
	min-height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cpress-seat.is-available:hover {
	border-color: #22c55e;
	background: #f0fdf4;
}

.cpress-seat.is-selected {
	background: #22c55e;
	color: #fff;
	border-color: #16a34a;
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.cpress-seat.is-sold {
	background: #ef4444;
	color: #fff;
	border-color: #dc2626;
	cursor: not-allowed;
	opacity: 0.9;
}

.cpress-seat.is-reserved {
	background: #f97316;
	color: #fff;
	border-color: #ea580c;
	cursor: not-allowed;
}

.cpress-seat.is-reserved,
.cpress-seat.is-sold,
.cpress-seat.is-blocked {
	pointer-events: none;
}

.cpress-reservation-notice {
	font-size: 0.85rem;
	color: #666;
	margin-bottom: 12px;
	padding: 8px 12px;
	background: #f8f9fa;
	border-left: 3px solid #f97316;
	border-radius: 0 4px 4px 0;
}

.cpress-seat-picker__empty {
	color: #666;
	font-size: 0.9rem;
}

/* SVG Layout - Quadrados arredondados */
.cpress-seat-layout-wrap {
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	padding: 10px;
}

.cpress-seat-layout-toolbar {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.cpress-seat-layout-toolbar button {
	padding: 4px 8px;
	border: 1px solid #ccc;
	background: #f6f6f6;
	border-radius: 4px;
	cursor: pointer;
}

.cpress-seat-layout-viewport {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	min-height: 320px;
}

.cpress-seat-layout {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	background: #fff;
	transform-origin: center center;
}

.cpress-seat-layout .cpress-seat rect {
	fill: #fff;
	stroke: #888;
	stroke-width: 1.5;
	rx: 4;
	ry: 4;
}

.cpress-seat-layout .cpress-seat text {
	font-size: 9px;
	font-weight: 600;
	fill: #333;
	pointer-events: none;
}

.cpress-seat-layout .cpress-seat:hover rect {
	fill: #f0fdf4;
	stroke: #22c55e;
}

.cpress-seat-layout .cpress-seat.is-selected rect {
	fill: #22c55e;
	stroke: #16a34a;
}

.cpress-seat-layout .cpress-seat.is-selected text {
	fill: #fff;
}

.cpress-seat-layout .cpress-seat.is-sold rect {
	fill: #ef4444;
	stroke: #dc2626;
}

.cpress-seat-layout .cpress-seat.is-sold text {
	fill: #fff;
}

.cpress-seat-layout .cpress-seat.is-blocked rect {
	fill: #f97316;
	stroke: #ea580c;
}

.cpress-seat-layout .cpress-seat.is-blocked text {
	fill: #fff;
}
.cpress-seat-layout .cpress-seat.is-reserved rect {
	fill: #f97316;
	stroke: #ea580c;
}

.cpress-seat-layout .cpress-seat.is-reserved text {
	fill: #fff;
}

.cpress-seat-layout .cpress-seat.is-reserved,
.cpress-seat-layout .cpress-seat.is-sold,
.cpress-seat-layout .cpress-seat.is-blocked {
	pointer-events: none;
}

.cpress-seat-layout .cpress-object rect,
.cpress-seat-layout .cpress-object circle {
	fill: #111;
	stroke: #000;
}

.cpress-seat-layout .cpress-object text {
	fill: #fff;
	font-size: 12px;
}

.cpress-seat-layout .cpress-object--stage rect {
	fill: #111;
	stroke: #000;
}

.cpress-seat-layout .cpress-object--stage text {
	fill: #fff;
	font-size: 12px;
}

.cpress-seat-layout .cpress-object--screen rect {
	fill: #1a1a2e;
	stroke: #16213e;
}

.cpress-seat-layout .cpress-object--screen text {
	fill: #e2e2e2;
	font-size: 12px;
}

.cpress-seat-layout .cpress-stage rect {
	fill: #111;
	stroke: #000;
}

.cpress-seat-layout .cpress-stage text {
	fill: #fff;
	font-size: 12px;
}

/* Cart quantity display for tickets */
.cpress-ticket-qty {
	display: inline-block;
	font-weight: 600;
	padding: 0.25rem 0.75rem;
	background: #f5f5f5;
	border-radius: 4px;
	min-width: 40px;
	text-align: center;
}

/* Make quantity field read-only for event tickets */
.cpress-seat-picker ~ .quantity input.qty[readonly],
form.cart:has(.cpress-seat-picker) .quantity input.qty {
	background-color: #f5f5f5 !important;
	cursor: default !important;
	pointer-events: none !important;
}

/* Hide +/- buttons for event tickets */
form.cart:has(.cpress-seat-picker) .quantity button,
form.cart:has(.cpress-seat-picker) .quantity .plus,
form.cart:has(.cpress-seat-picker) .quantity .minus {
	display: none !important;
}