/*
 * Provisual Gigs Core — frontend styling.
 * Namespace .pg- op alles (sectie 5b/5c): geen generieke classnamen die
 * kunnen botsen met het thema of andere plugins van de klant. Sane,
 * minimale defaults met CSS-variabelen die door een thema overschreven
 * kunnen worden — de plugin blijft zelfstandig werken zonder dat laagje.
 */

.pg-booking-form-wrap,
.pg-agenda,
.pg-gig-view {
	--pg-color-text: #1c1c1c;
	--pg-color-muted: #666;
	--pg-color-border: #d8d8d8;
	--pg-color-accent: #1f4b3f;
	--pg-color-accent-contrast: #fff;
	--pg-color-bg-subtle: #f7f7f7;
	--pg-color-input-bg: #fff;
	--pg-color-input-text: #1c1c1c;
	--pg-radius: 4px;
	--pg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--pg-font);
	color: var(--pg-color-text);
	box-sizing: border-box;
}

.pg-booking-form-wrap *,
.pg-agenda *,
.pg-gig-view * {
	box-sizing: inherit;
}

/* Boekingsformulier */

.pg-booking-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
}

.pg-field {
	flex: 1 1 100%;
	margin: 0 0 1rem;
}

.pg-field--half {
	flex: 1 1 calc(50% - 0.5rem);
	min-width: 220px;
}

.pg-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.pg-field input[type="text"],
.pg-field input[type="email"],
.pg-field input[type="tel"],
.pg-field input[type="date"],
.pg-field input[type="number"],
.pg-field input[type="time"],
.pg-field select,
.pg-field textarea {
	width: 100%;
	padding: 0.6em 0.75em;
	border: 1px solid var(--pg-color-border);
	border-radius: var(--pg-radius);
	font-family: inherit;
	font-size: 1rem;
	/*
	 * !important bewust: dit formulier moet leesbaar blijven ongeacht de
	 * eigen (vaak donkere) form-styling van het thema waarin het gemount
	 * wordt — zonder dit wint een generieke `input { background; color }`
	 * -regel van het thema soms van maar één van de twee (bv. wel de
	 * achtergrond, niet de tekstkleur), met onleesbare zwarte tekst op een
	 * donkere achtergrond tot gevolg.
	 */
	background: var(--pg-color-input-bg) !important;
	color: var(--pg-color-input-text) !important;
}

.pg-field--website {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pg-datum-status {
	display: block;
	margin-top: 0.35em;
	font-size: 0.9em;
}

.pg-datum-status[data-state="checking"] { color: var(--pg-color-muted); }
.pg-datum-status[data-state="conflict"] { color: #996a00; font-weight: 600; }
.pg-datum-status[data-state="ok"] { color: #1a7a1a; font-weight: 600; }

.pg-submit {
	flex-basis: 100%;
}

.pg-button {
	display: inline-block;
	padding: 0.75em 1.75em;
	background: var(--pg-color-accent);
	color: var(--pg-color-accent-contrast);
	border: 0;
	border-radius: var(--pg-radius);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.pg-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.pg-button:hover:not(:disabled) {
	filter: brightness(1.08);
}

.pg-form-message {
	flex-basis: 100%;
	margin-top: 0.5rem;
	padding: 0.75em 1em;
	border-radius: var(--pg-radius);
	display: none;
}

.pg-form-message[data-state="success"] {
	display: block;
	background: #eaf6ea;
	color: #1a5c1a;
}

.pg-form-message[data-state="error"] {
	display: block;
	background: #fbeaea;
	color: #a94442;
}

/* Agenda */

.pg-agenda {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pg-agenda-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.9em 1em;
	border: 1px solid var(--pg-color-border);
	border-radius: var(--pg-radius);
	background: var(--pg-color-bg-subtle);
}

.pg-agenda-datum {
	font-weight: 700;
	min-width: 7em;
}

.pg-agenda-info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.pg-agenda-titel {
	font-weight: 600;
}

.pg-agenda-tijd,
.pg-agenda-locatie {
	color: var(--pg-color-muted);
	font-size: 0.9em;
}

.pg-agenda-status {
	font-size: 0.85em;
	font-weight: 600;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	white-space: nowrap;
}

.pg-agenda-status--vrij { background: #e6f2ea; color: #1a7a1a; }
.pg-agenda-status--optie { background: #fff4e0; color: #996a00; }
.pg-agenda-status--bevestigd { background: #e6edf7; color: #1f4b3f; }

.pg-agenda-label {
	display: inline-block;
	align-self: flex-start;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	margin: 0.2em 0;
}

.pg-agenda-label--uitverkocht {
	background: #fbe7e7;
	color: #a32222;
}

.pg-agenda-leeg {
	color: var(--pg-color-muted);
}

.pg-agenda-meer-info {
	font-size: 0.85em;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--pg-color-border);
	border-radius: 999px;
	padding: 0.3em 0.9em;
	white-space: nowrap;
}

/* Gig-weergave (frontend detailpagina van een optreden) */

.pg-gig-view {
	margin-top: 2rem;
	padding: 1.5rem;
	border: 1px solid var(--pg-color-border);
	border-radius: var(--pg-radius);
	background: var(--pg-color-bg-subtle);
}

.pg-gig-view h2 {
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--pg-color-accent);
	font-family: inherit;
}

.pg-gig-view h3 {
	margin: 1.75rem 0 0.75rem;
	font-family: inherit;
	color: var(--pg-color-accent);
}

.pg-gig-view > p {
	line-height: 1.7;
}

.pg-view-table {
	width: 100%;
	border-collapse: collapse;
}

.pg-view-table td {
	padding: 0.5em 0.75em 0.5em 0;
	border-bottom: 1px solid var(--pg-color-border);
	vertical-align: top;
}

.pg-view-table tr:last-child td {
	border-bottom: 0;
}

.pg-belangrijk td {
	background: color-mix(in srgb, var(--pg-color-accent) 12%, transparent);
	font-weight: 600;
}