/*
 * Spaanse Zon – Gastenboek
 * Restyled front-end for the Gwolle Guestbook plugin (shortcode [spaansezon_gastenboek]).
 * Uses the plugin's own data + form handling, wrapped in the Spaanse Zon design.
 */

.sz-gastenboek {
	--sz-gb-orange: #f09a15;
	--sz-gb-red: #c00;
	--sz-gb-text: #333;
	--sz-gb-border: #ccc;
	--sz-gb-gradient: linear-gradient(90deg, #d00 0%, #f09a15 100%);
	font-family: "Montserrat", Arial, sans-serif;
	color: var(--sz-gb-text);
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
}

.sz-gastenboek *,
.sz-gastenboek *::before,
.sz-gastenboek *::after {
	box-sizing: border-box;
}

/* ---------- Header ---------- */
.sz-gb-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

.sz-gb-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	color: var(--sz-gb-orange);
	margin: 0 0 4px;
}

.sz-gb-title-underline {
	display: block;
	width: 180px;
	max-width: 60%;
	height: auto;
	margin-bottom: 12px;
}

.sz-gb-intro {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	max-width: 586px;
	margin: 0;
}

/* ---------- Buttons ---------- */
.sz-gb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sz-gb-gradient);
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	padding: 6px 16px;
	border-radius: 5px;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.15s ease;
}

.sz-gb-btn:hover,
.sz-gb-btn:focus {
	filter: brightness(1.07);
	color: #fff;
	text-decoration: none;
}

.sz-gb-btn-write {
	flex: none;
	margin-top: 4px;
}

/* ---------- Entries (masonry) ---------- */
.sz-gb-entries {
	column-count: 2;
	column-gap: 24px;
}

/* Reviews onder elkaar (widget). */
.sz-gb-entries.is-stacked {
	column-count: 1;
}

.sz-gb-card {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	background: #fff;
	border: 1px solid var(--sz-gb-border);
	border-radius: 10px;
	padding: 32px 40px 40px;
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sz-gb-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	line-height: 1.5;
}

.sz-gb-card-name {
	font-size: 16px;
	font-weight: 700;
}

.sz-gb-card-origin {
	font-weight: 400;
}

.sz-gb-card-date {
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}

.sz-gb-card-divider {
	border: 0;
	border-top: 1px solid var(--sz-gb-border);
	margin: 0;
	width: 100%;
}

.sz-gb-card-body-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sz-gb-card-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sz-gb-red);
	margin: 0;
}

.sz-gb-card-body {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

.sz-gb-card-body p {
	margin: 0 0 8px;
}

.sz-gb-card-body p:last-child {
	margin-bottom: 0;
}

.sz-gb-empty {
	font-size: 16px;
	color: var(--sz-gb-text);
}

/* ---------- Widget (dezelfde kaarten, compacter in een smalle kolom) ---------- */
.sz-gb-widget .sz-gb-card {
	padding: 20px 24px 24px;
	gap: 12px;
	margin-bottom: 16px;
}

.sz-gb-widget .sz-gb-card:last-child {
	margin-bottom: 0;
}

.sz-gb-widget .sz-gb-card-head {
	flex-wrap: wrap;
	gap: 4px 12px;
}

.sz-gb-widget .sz-gb-card-name {
	font-size: 14px;
}

.sz-gb-widget .sz-gb-card-date {
	font-size: 12px;
}

.sz-gb-widget .sz-gb-card-body-wrap {
	gap: 8px;
}

.sz-gb-widget .sz-gb-card-title {
	font-size: 16px;
}

.sz-gb-widget .sz-gb-card-body {
	font-size: 13px;
}

.sz-gb-btn-widget {
	margin-top: 16px;
}

/* ---------- Pagination ---------- */
.sz-gb-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 32px 0;
}

.sz-gb-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 4px 8px;
	border-radius: 5px;
	border: 1px solid var(--sz-gb-border);
	background: #fff;
	color: var(--sz-gb-text);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 1;
}

.sz-gb-page-arrow{
	background-color: #eee;
}

.sz-gb-page-arrow{
	background-color: #eee;
}

a.sz-gb-page:hover,
a.sz-gb-page:focus {
	border-color: var(--sz-gb-orange);
	color: var(--sz-gb-text);
	text-decoration: none;
}

.sz-gb-page.is-current {
	background: var(--sz-gb-gradient);
	border-color: transparent;
	color: #fff;
}

.sz-gb-page-dots {
	border: 0;
	background: transparent;
	min-width: auto;
	padding: 0 4px;
}

.sz-gb-page-arrow svg {
	display: block;
	width: 14px;
	height: 14px;
}

/* ---------- Form ---------- */
.sz-gb-form {
	background: #eee;
	border: 1px solid var(--sz-gb-border);
	border-radius: 6px;
	padding: 40px;
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	scroll-margin-top: 100px;
}

/* ---------- Feedback na het indienen ---------- */
.sz-gb-notice {
	--sz-gb-notice-accent: var(--sz-gb-border);
	--sz-gb-notice-bg: #fff;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--sz-gb-notice-bg);
	border: 1px solid var(--sz-gb-notice-accent);
	border-left-width: 4px;
	border-radius: 6px;
	padding: 16px 20px;
	font-size: 14px;
	line-height: 1.5;
	scroll-margin-top: 100px;
}

.sz-gb-notice:focus {
	outline: none;
}

.sz-gb-notice.is-success {
	--sz-gb-notice-accent: #2e7d32;
	--sz-gb-notice-bg: #f3f9f4;
}

.sz-gb-notice.is-error {
	--sz-gb-notice-accent: var(--sz-gb-red);
	--sz-gb-notice-bg: #fdf4f4;
}

.sz-gb-notice-icon {
	flex: none;
	color: var(--sz-gb-notice-accent);
	margin-top: 1px;
}

.sz-gb-notice-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.sz-gb-notice-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--sz-gb-notice-accent);
	margin-bottom: 4px;
}

.sz-gb-notice p {
	margin: 0 0 4px;
}

.sz-gb-notice p:last-child {
	margin-bottom: 0;
}

.sz-gb-form-intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sz-gb-form-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: var(--sz-gb-red);
	margin: 0;
}

.sz-gb-form-desc {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

/* Restyle the reused Gwolle form markup. */
.sz-gb-form form.gwolle-gb-write {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 24px;
	align-items: start;
	margin: 0;
}

/* Hide the plugin's own header, reveal button and clearfix helpers. */
.sz-gb-form form.gwolle-gb-write > h3,
.sz-gb-form .gwolle-gb-write-button,
.sz-gb-form .clearBoth,
.sz-gb-form .gwolle-gb-invisible {
	display: none !important;
}

.sz-gb-form form.gwolle-gb-write > div {
	margin: 0;
	min-width: 0;
}

/* Full-width rows. */
.sz-gb-form form.gwolle-gb-write > .gwolle_gb_content,
.sz-gb-form form.gwolle-gb-write > .gwolle_gb_privacy,
.sz-gb-form form.gwolle-gb-write > .gwolle-gb-messages-bottom-container,
.sz-gb-form form.gwolle-gb-write > .gwolle_gb_submit {
	grid-column: 1 / -1;
}

.sz-gb-form form.gwolle-gb-write > .gwolle-gb-messages-bottom-container:empty,
.sz-gb-form form.gwolle-gb-write > noscript {
	display: none;
}

.sz-gb-form .gwolle-gb-write .label {
	margin-bottom: 8px;
}

.sz-gb-form .gwolle-gb-write .label label {
	font-size: 14px;
	font-weight: 400;
	color: var(--sz-gb-text);
}

.sz-gb-form .gwolle-gb-write .input input[type="text"],
.sz-gb-form .gwolle-gb-write .input input[type="email"],
.sz-gb-form .gwolle-gb-write .input input[type="url"],
.sz-gb-form .gwolle-gb-write .input textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--sz-gb-border);
	border-radius: 4px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 16px;
	color: var(--sz-gb-text);
	line-height: 1.4;
}

.sz-gb-form .gwolle-gb-write .input input:focus,
.sz-gb-form .gwolle-gb-write .input textarea:focus {
	outline: none;
	border-color: var(--sz-gb-orange);
}

/* Fields the plugin marked as invalid after submitting. */
.sz-gb-form .gwolle-gb-write .input input.error,
.sz-gb-form .gwolle-gb-write .input textarea.error {
	border-color: var(--sz-gb-red);
	background: #fdf4f4;
}

.sz-gb-form .gwolle-gb-write .input textarea {
	min-height: 140px;
	resize: vertical;
}

.sz-gb-form .gwolle_gb_content .input {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sz-gb-form .gwolle_gb_content .input textarea {
	flex: 1 1 auto;
}

.sz-gb-form .gb-max-length-text {
	font-size: 12px;
	color: #777;
	margin-top: 4px;
}

.sz-gb-form .gwolle_gb_submit .input {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Preview button needs AJAX and is not part of the design. */
.sz-gb-form .gwolle_gb_preview,
.sz-gb-form .gwolle_gb_addon_preview_ajax_icon,
.sz-gb-form .gwolle_gb_submit_ajax_icon {
	display: none!important;
}

.sz-gb-form input[type="submit"] {
	background: var(--sz-gb-gradient);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.5;
	text-transform: uppercase;
	border: 0;
	border-radius: 5px;
	padding: 8px 16px;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.sz-gb-form input[type="submit"]:hover,
.sz-gb-form input[type="submit"]:focus {
	filter: brightness(1.07);
}

.sz-gb-form .gwolle-gb-messages {
	padding: 12px 16px;
	border-radius: 5px;
	background: #fff;
	border: 1px solid var(--sz-gb-border);
	font-size: 14px;
}

.sz-gb-form .gwolle-gb-messages.error {
	border-color: var(--sz-gb-red);
	color: var(--sz-gb-red);
}

.sz-gb-form .gwolle-gb-messages-top-container:empty {
	display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.sz-gb-head {
		flex-direction: column;
	}

	.sz-gb-entries {
		column-count: 1;
	}

	.sz-gb-card {
		padding: 24px;
	}

	.sz-gb-form {
		padding: 24px;
	}

	.sz-gb-form form.gwolle-gb-write {
		grid-template-columns: 1fr;
	}
}