/* Ecom Events — frontend styles
   Clean, professional, modern. Uses CSS custom properties so themes/
   site owners can override colours easily without touching this file. */

:root {
	--ecev-accent: #2563eb;
	--ecev-accent-hover: #1d4ed8;
	--ecev-text: #1f2937;
	--ecev-text-muted: #6b7280;
	--ecev-border: #e5e7eb;
	--ecev-bg-card: #ffffff;
	--ecev-bg-subtle: #f9fafb;
	--ecev-radius: 10px;
	--ecev-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--ecev-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* ---------- Layout ---------- */

.ecev-events-wrap {
	margin: 2rem 0;
}

.ecev-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.ecev-layout-list .ecev-events-grid {
	grid-template-columns: 1fr;
}

.ecev-no-events {
	color: var(--ecev-text-muted);
	font-style: italic;
	padding: 2rem 0;
}

/* ---------- Event card ---------- */

.ecev-event-card {
	background: var(--ecev-bg-card);
	border: 1px solid var(--ecev-border);
	border-radius: var(--ecev-radius);
	overflow: hidden;
	box-shadow: var(--ecev-shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ecev-event-card:hover {
	box-shadow: var(--ecev-shadow-hover);
	transform: translateY(-2px);
}

.ecev-event-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ecev-event-card-image img {
	display: block;
	width: 100%;
	height: 170px;
	object-fit: cover;
}

.ecev-event-card-body {
	padding: 1.25rem;
}

.ecev-event-card-date {
	margin: 0 0 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ecev-accent);
}

.ecev-event-card-title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	line-height: 1.35;
	color: var(--ecev-text);
}

.ecev-event-card-location,
.ecev-event-card-recurs {
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
	color: var(--ecev-text-muted);
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.ecev-event-card-location .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.ecev-event-card-unconfirmed {
	position: relative;
	opacity: 0.85;
}

.ecev-unconfirmed-badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 2;
	background: #b45309;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
}

/* ---------- Single event page ---------- */

.ecev-single-event {
	max-width: 780px;
	margin: 2rem auto;
}

.ecev-single-image img {
	width: 100%;
	border-radius: var(--ecev-radius);
	margin-bottom: 1.5rem;
}

.ecev-single-title {
	font-size: 2rem;
	line-height: 1.2;
	margin: 0 0 1rem;
	color: var(--ecev-text);
}

.ecev-single-meta {
	background: var(--ecev-bg-subtle);
	border: 1px solid var(--ecev-border);
	border-radius: var(--ecev-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.75rem;
}

.ecev-single-meta p {
	margin: 0.5rem 0;
	color: var(--ecev-text);
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.ecev-single-recurs {
	font-size: 0.9rem;
	color: var(--ecev-text-muted);
}

.ecev-single-address {
	color: var(--ecev-text-muted);
	font-size: 0.9rem;
}

.ecev-category-badge {
	display: inline-block;
	background: var(--ecev-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	text-decoration: none;
	margin-right: 0.4rem;
}

.ecev-single-content {
	line-height: 1.7;
	color: var(--ecev-text);
}

.ecev-single-manage-link {
	margin-top: 2rem;
}

.ecev-single-manage-link a {
	color: var(--ecev-accent);
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Forms ---------- */

.ecev-frontend-form {
	max-width: 640px;
	background: var(--ecev-bg-card);
	border: 1px solid var(--ecev-border);
	border-radius: var(--ecev-radius);
	padding: 1.75rem;
}

.ecev-field {
	margin: 0 0 1.1rem;
}

.ecev-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.ecev-field label {
	display: block;
	font-weight: 600;
	font-size: 0.85rem;
	margin-bottom: 0.35rem;
	color: var(--ecev-text);
}

.ecev-field input[type="text"],
.ecev-field input[type="date"],
.ecev-field input[type="time"],
.ecev-field input[type="number"],
.ecev-field input[type="file"],
.ecev-field select,
.ecev-field textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--ecev-border);
	border-radius: 6px;
	font-size: 0.95rem;
	background: #fff;
	color: var(--ecev-text);
}

.ecev-field textarea {
	resize: vertical;
}

.ecev-checkbox-label {
	display: inline-flex !important;
	align-items: center;
	gap: 0.35rem;
	font-weight: 400 !important;
	margin-right: 1rem;
}

.ecev-button {
	display: inline-block;
	border: none;
	border-radius: 6px;
	padding: 0.65rem 1.4rem;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.ecev-button-primary {
	background: var(--ecev-accent);
	color: #fff;
}

.ecev-button-primary:hover {
	background: var(--ecev-accent-hover);
}

/* ---------- Notices ---------- */

.ecev-notice {
	padding: 0.85rem 1.1rem;
	border-radius: 8px;
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
}

.ecev-notice-success {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
}

.ecev-notice-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

/* ---------- Manage list ---------- */

.ecev-manage-table {
	width: 100%;
	border-collapse: collapse;
}

.ecev-manage-table th,
.ecev-manage-table td {
	text-align: left;
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid var(--ecev-border);
	font-size: 0.9rem;
}

.ecev-manage-table th {
	color: var(--ecev-text-muted);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ecev-delete-link {
	color: #b91c1c;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
	.ecev-field-row {
		grid-template-columns: 1fr;
	}
}