/* ============================================================
   VLES Offerteformulier — full styling
   Matches the Flatsome theme used on vloerenleggenenschuren.nl.
   All selectors are scoped to .vles-quote-form so they cannot
   leak into the rest of the site.
   ============================================================ */

.vles-quote-form {
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	color: #1a1a1a;
	line-height: 1.6;
}

.vles-quote-form .vles-intro {
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 22px;
}

.vles-quote-form .vles-label {
	display: block;
	font-weight: 400;
	margin: 14px 0 6px;
	font-size: 15px;
	line-height: 1.4;
}
.vles-quote-form .vles-required { color: #dd3333; }

.vles-quote-form p { margin: 0 0 14px; }

/* ============================================================
   TEXT INPUTS, NUMBER, EMAIL, TEL, SELECT, TEXTAREA
   ============================================================ */
.vles-quote-form input[type="text"],
.vles-quote-form input[type="email"],
.vles-quote-form input[type="tel"],
.vles-quote-form input[type="number"],
.vles-quote-form select,
.vles-quote-form textarea {
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 3px !important;
	font-size: 15px !important;
	background: #f5f5f5 !important;
	color: #1a1a1a !important;
	font-family: inherit !important;
	transition: border-color 0.15s, background 0.15s;
}
.vles-quote-form input:focus,
.vles-quote-form select:focus,
.vles-quote-form textarea:focus {
	outline: none !important;
	border-color: #dd3333 !important;
	background: #fff !important;
}
.vles-quote-form textarea { min-height: 110px; resize: vertical; }

/* ============================================================
   RADIO BUTTONS as toggle buttons
   ============================================================ */
.vles-quote-form .wpcf7-radio input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}
.vles-quote-form .wpcf7-radio {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.vles-quote-form .wpcf7-radio .wpcf7-list-item {
	margin: 0 !important;
	flex: 1 1 100px;
	display: block !important;
}
.vles-quote-form .wpcf7-radio .wpcf7-list-item > label {
	display: block !important;
	cursor: pointer;
	margin: 0;
	padding: 0;
}
.vles-quote-form .wpcf7-list-item-label {
	display: block;
	border: 2px solid #e0e0e0;
	border-radius: 3px;
	padding: 10px 16px;
	text-align: center;
	background: #f5f5f5;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	transition: all 0.15s;
	color: #1a1a1a;
}
.vles-quote-form .wpcf7-list-item:hover .wpcf7-list-item-label {
	border-color: #dd3333;
	color: #dd3333;
}
.vles-quote-form .wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label {
	border-color: #dd3333;
	background: #dd3333;
	color: #fff;
}

/* Work-type variant: bigger cards in grid layout */
.vles-quote-form .vles-work-type .wpcf7-radio {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px;
}
.vles-quote-form .vles-work-type .wpcf7-list-item { flex: none; }
.vles-quote-form .vles-work-type .wpcf7-list-item-label {
	padding: 16px 12px;
	background: #fff;
	font-size: 13px;
	letter-spacing: 0.6px;
}

/* ============================================================
   TOOLTIPS — hover on desktop, tap on mobile
   ============================================================ */
.vles-quote-form .vles-tooltip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	background: #dd3333;
	color: #fff;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
	font-family: Georgia, serif;
	cursor: help;
	margin: 0 4px;
	position: relative;
	user-select: none;
	vertical-align: middle;
}
.vles-quote-form .vles-tooltip::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #1a1a1a;
	color: #fff;
	padding: 9px 12px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	font-family: 'Lato', sans-serif;
	width: max-content;
	max-width: 240px;
	text-align: center;
	line-height: 1.4;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	z-index: 10;
	white-space: normal;
}
.vles-quote-form .vles-tooltip::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 2px);
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1a1a1a;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	z-index: 10;
}
.vles-quote-form .vles-tooltip:hover::after,
.vles-quote-form .vles-tooltip:hover::before,
.vles-quote-form .vles-tooltip.is-active::after,
.vles-quote-form .vles-tooltip.is-active::before { opacity: 1; }

/* ============================================================
   MULTI-FILE UPLOAD (our own drop zone)
   ============================================================ */
.vles-quote-form .vles-dropzone {
	margin-top: 4px;
}
.vles-quote-form .vles-dropzone-area {
	border: 2px dashed #e0e0e0;
	border-radius: 3px;
	background: #f5f5f5;
	padding: 22px 18px 30px;
	text-align: center;
	cursor: pointer;
	position: relative;
	transition: all 0.15s;
}
.vles-quote-form .vles-dropzone-area:hover,
.vles-quote-form .vles-dropzone-area.is-dragover {
	border-color: #dd3333;
	background: #fff;
}
.vles-quote-form .vles-dropzone-icon {
	font-size: 28px;
	margin-bottom: 4px;
}
.vles-quote-form .vles-dropzone-text strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 2px;
}
.vles-quote-form .vles-dropzone-text span {
	display: block;
	font-size: 12px;
	color: #777;
}
.vles-quote-form .vles-dropzone-counter {
	position: absolute;
	bottom: 6px;
	right: 12px;
	font-size: 11px;
	color: #777;
}
.vles-quote-form .vles-dropzone-counter .vles-count {
	font-weight: 700;
	color: #1a1a1a;
}

/* Uploaded file rows */
.vles-quote-form .vles-file-list { margin-top: 10px; }
.vles-quote-form .vles-file-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	padding: 10px 12px;
	margin-top: 8px;
	overflow: hidden;
}
.vles-quote-form .vles-file-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.vles-quote-form .vles-file-info {
	flex: 1;
	min-width: 0;
}
.vles-quote-form .vles-file-name {
	font-size: 14px;
	color: #1a1a1a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vles-quote-form .vles-file-meta {
	font-size: 12px;
	color: #777;
}
.vles-quote-form .vles-file-remove {
	width: 26px;
	height: 26px;
	border: none;
	background: transparent;
	border-radius: 50%;
	color: #777;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
	padding: 0;
}
.vles-quote-form .vles-file-remove:hover {
	background: #dd3333;
	color: #fff;
}

/* Thin red progress bar at the bottom of the row */
.vles-quote-form .vles-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #f0f0f0;
	overflow: hidden;
}
.vles-quote-form .vles-progress-bar {
	height: 100%;
	width: 0;
	background: #dd3333;
	transition: width 0.2s;
}
.vles-quote-form .vles-file-row.is-complete .vles-progress { display: none; }

/* Error state */
.vles-quote-form .vles-file-row.is-error {
	border-color: #f5c6c6;
	background: #fff5f5;
}
.vles-quote-form .vles-file-row.is-error .vles-file-meta {
	color: #dd3333;
	font-weight: 700;
}

/* Required-field error message displayed above the dropzone */
.vles-quote-form .vles-field-error {
	background: #fff5f5;
	border-left: 4px solid #dd3333;
	color: #dd3333;
	font-size: 13px;
	padding: 8px 12px;
	border-radius: 3px;
	margin: 6px 0;
}

/* ============================================================
   PRICE DISPLAY
   ============================================================ */
.vles-quote-form .vles-price-display {
	background: #fff;
	border: 2px solid #dd3333;
	border-radius: 3px;
	padding: 16px 22px;
	margin: 22px 0;
	display: none;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.vles-quote-form .vles-price-display.is-visible { display: flex; }
.vles-quote-form .vles-price-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.vles-quote-form .vles-price-amount {
	font-size: 28px;
	font-weight: 900;
	color: #dd3333;
	line-height: 1;
}

/* ============================================================
   MANUAL QUOTE NOTICE (shown for "Vloer aanhelen")
   ============================================================ */
.vles-quote-form .vles-manual-notice {
	background: #fff8e1;
	border-left: 4px solid #ffa726;
	padding: 14px 16px;
	border-radius: 3px;
	margin: 22px 0;
	font-size: 14px;
	color: #5d4f1f;
	line-height: 1.5;
}

/* ============================================================
   SUBMIT BUTTON
   ============================================================ */
.vles-quote-form .wpcf7-submit {
	background: #dd3333 !important;
	color: #fff !important;
	border: none !important;
	padding: 14px 28px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.8px !important;
	border-radius: 3px !important;
	cursor: pointer;
	width: 100%;
	transition: background 0.2s;
	font-family: inherit !important;
}
.vles-quote-form .wpcf7-submit:hover { background: #b32626 !important; }
.vles-quote-form .wpcf7-submit:disabled,
.vles-quote-form .wpcf7-submit.is-uploading {
	background: #ccc !important;
	cursor: not-allowed;
}

/* ============================================================
   MISC
   ============================================================ */
.vles-quote-form .vles-divider {
	border: none;
	border-top: 1px solid #e0e0e0;
	margin: 28px 0 22px;
}
.vles-quote-form .vles-contact-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 14px;
}
.vles-quote-form .vles-hidden { display: none !important; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 600px) {
	.vles-quote-form .vles-work-type .wpcf7-radio {
		grid-template-columns: 1fr !important;
	}
	.vles-quote-form .vles-tooltip::after {
		max-width: 200px;
		font-size: 11px;
	}
	.vles-quote-form .vles-price-amount { font-size: 24px; }
	.vles-quote-form .vles-file-name { font-size: 13px; }
}


/* CF7 status messages */
/* Scoped: alleen voor het offerteformulier (heeft .vles-quote-form als child) */
form.wpcf7-form:has(.vles-quote-form) .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	border: 0;
	border-left: 4px solid #1a1a1a;
	background: #f5f5f5;
	color: #1a1a1a;
	border-radius: 4px;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

form.wpcf7-form.sent:has(.vles-quote-form) .wpcf7-response-output {
	border-left-color: #2e7d32;
	background: #e8f5e9;
	color: #1b5e20;
}

form.wpcf7-form.sent:has(.vles-quote-form) .wpcf7-response-output::before {
	content: "\2713";  /* ??? */
	display: inline-block;
	font-weight: 700;
	margin-right: 8px;
}

form.wpcf7-form.invalid:has(.vles-quote-form) .wpcf7-response-output,
form.wpcf7-form.unaccepted:has(.vles-quote-form) .wpcf7-response-output,
form.wpcf7-form.failed:has(.vles-quote-form) .wpcf7-response-output,
form.wpcf7-form.spam:has(.vles-quote-form) .wpcf7-response-output,
form.wpcf7-form.aborted:has(.vles-quote-form) .wpcf7-response-output {
	border-left-color: #dd3333;
	background: #fdecec;
	color: #8a1f1f;
}

form.wpcf7-form.invalid:has(.vles-quote-form) .wpcf7-response-output::before,
form.wpcf7-form.unaccepted:has(.vles-quote-form) .wpcf7-response-output::before,
form.wpcf7-form.failed:has(.vles-quote-form) .wpcf7-response-output::before,
form.wpcf7-form.spam:has(.vles-quote-form) .wpcf7-response-output::before,
form.wpcf7-form.aborted:has(.vles-quote-form) .wpcf7-response-output::before {
	content: "\2715";  /* ??? */
	display: inline-block;
	font-weight: 700;
	margin-right: 8px;
}