.qb-calculator-form { max-width: 900px; }
.qb-w-field { margin-bottom: 18px; }
.qb-field-label { display: block; font-weight: 600; margin-bottom: 8px; }
.qb-required { color: #c0392b; }

.qb-card-group, .qb-style-group, .qb-swatch-group { display: flex; flex-wrap: wrap; gap: 12px; }
.qb-card, .qb-style-card, .qb-swatch { position: relative; cursor: pointer; }
.qb-card input, .qb-style-card input, .qb-swatch input { position: absolute; opacity: 0; }
.qb-card-body {
	display: block; border: 2px solid #ddd; border-radius: 8px; padding: 14px; min-width: 160px;
}
.qb-card input:checked + .qb-card-body { border-color: #2271b1; background: #f0f6fc; }

.qb-style-card { display: block;  border-radius: 8px; overflow: hidden; width: 180px; }
.qb-style-card input:checked ~ .qb-style-body,
.qb-style-card:has(input:checked) { border-color: #2271b1; }
.qb-style-card img { width: 100%; display: block; }
.qb-style-body { display: block; padding: 10px; }
/* Client Req 3 — .main-qb stacks the card body (.inner-qb) above the action button. */
.qb-style-card .main-qb { display: flex; flex-direction: column; height: 100%; }
.qb-style-card .inner-qb { display: block; }

.qb-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 90px; text-align: center; }
.qb-swatch-color { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #ddd; display: block; }
.qb-swatch input:checked + .qb-swatch-color { border-color: #2271b1; box-shadow: 0 0 0 2px #2271b1; }

.qb-checkbox-group.qb-layout-horizontal, .qb-w-checkbox.qb-layout-horizontal .qb-checkbox-group { display: flex; flex-wrap: wrap; gap: 16px; }
.qb-checkbox-group.qb-layout-vertical, .qb-w-checkbox.qb-layout-vertical .qb-checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.qb-checkbox-option { display: flex; align-items: center; gap: 8px; }

.qb-card-price { display: block; font-size: 12px; color: #2271b1; margin-top: 6px; }

.qb-w-text-field input, .qb-w-text-field textarea {
	width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}

/* ---- Date field (Req 3): input paired with a calendar icon ------------ */
.qb-date-wrap {
	display: flex; align-items: center; gap: 6px;
	width: 100%; max-width: 420px; box-sizing: border-box;
	background: #fff; border: 1px solid #ccc; border-radius: 10px; padding: 2px 4px 2px 6px;
}
.qb-date-wrap:focus-within { border-color: #2271b1; }
/* The input sits flush inside the wrapper — the wrapper carries the border. */
.qb-w-text-field .qb-date-input {
	flex: 1 1 auto; width: auto; max-width: none;
	border: 0; background: transparent; padding: 8px 6px; border-radius: 8px;
}
.qb-date-input:focus { outline: none; box-shadow: none; }
.qb-date-icon {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 34px; padding: 0; border: 0; border-radius: 8px;
	background: #ecebe4; color: #8a8578; cursor: pointer;
}
.qb-date-icon:hover { background: #e2e0d6; color: #6f6a5d; }
.qb-date-icon-svg { display: block; }
.qb-date-icon-img { display: block; max-width: 20px; max-height: 20px; }

/* Hidden type="date" companion — kept in the layout (not display:none) so
 * showPicker() works, but invisible and non-interactive. */
.qb-date-native {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none;
}
/* Belt-and-braces: never show a browser-native calendar indicator inside the
 * field (the visible input is text, so this only guards the companion). */
.qb-date-wrap input::-webkit-calendar-picker-indicator { display: none; }
.qb-date-wrap input::-webkit-inner-spin-button { display: none; }

/* ---- Dropdown widget (<ul>/<li> visual layer over a hidden <select>) -- */
.qb-dropdown-wrap { position: relative; max-width: 420px; }

/* The real <select> is kept in the DOM — visually hidden but still
 * rendered — so native `required` validation and the existing
 * OPTION-based pricing / Conditions Based JS keep working unchanged. */
.qb-native-select {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	border: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.qb-dropdown { position: relative; }
.qb-dropdown-toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px;
	background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit;
	box-sizing: border-box;
}
.qb-dropdown-toggle:hover { border-color: #999; }
.qb-dropdown-toggle-content { flex: 1 1 auto; min-width: 0; }
.qb-dropdown-toggle-content h3, .qb-dropdown-toggle-content h4, .qb-dropdown-toggle-content h5 { margin: 0; }
.qb-dropdown-toggle-content p { margin: 2px 0 0; font-size: 12px; color: #666; }
.qb-dropdown-arrow {
	flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid #666; border-bottom: 2px solid #666;
	transform: rotate(45deg); margin-top: -4px;
}
.qb-dropdown-open .qb-dropdown-arrow { transform: rotate(225deg); margin-top: 4px; }
.qb-dropdown-icon { flex: 0 0 auto; display: inline-flex; align-items: center; }
.qb-dropdown-icon img { display: block; width: 20px; height: 20px; object-fit: contain; }

.qb-dropdown-menu {
	list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
	background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.12);
	max-height: 280px; overflow-y: auto; display: none;
}
.qb-dropdown-open .qb-dropdown-menu { display: block; }
.qb-dropdown-item { padding: 8px 10px; border-radius: 4px; cursor: pointer; }
.qb-dropdown-item:hover { background: #f0f6fc; }
.qb-dropdown-item.qb-dropdown-selected { background: #e5f0fa; }
.qb-dropdown-item h3, .qb-dropdown-item h4, .qb-dropdown-item h5 { margin: 0; }
.qb-dropdown-item p { margin: 2px 0 0; font-size: 12px; color: #666; }
.qb-dropdown-price { color: #2271b1; }

.qb-w-live-total { border-top: 2px solid #222; padding-top: 12px; margin: 20px 0; }
.qb-total-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 16px; }
.qb-grandtotal-row { font-weight: 700; font-size: 20px; }

.qb-submit-btn {
	background: #2271b1; color: #fff; border: none; padding: 12px 28px; font-size: 16px; border-radius: 4px; cursor: pointer;
}
.qb-submit-btn:hover { background: #135e96; }
.qb-submit-btn[disabled] { opacity: .6; cursor: not-allowed; }
.qb-form-message { margin-top: 12px; padding: 10px; border-radius: 4px; display: none; }
.qb-form-message.qb-success { display: block; background: #ecf7ed; color: #276b28; border: 1px solid #b6e0b8; }
.qb-form-message.qb-error { display: block; background: #fbeaea; color: #a52a2a; border: 1px solid #eec5c5; }
.qb-field-invalid { outline: 2px solid #c0392b; }
.qb-field-error-msg { margin-top: 6px; font-size: 13px; line-height: 1.4; color: #c0392b; }

/* ---- Req 6: Image Checkbox widget ------------------------------------ */
.qb-w-image-checkbox .qb-imgcheck-group { display: flex; flex-direction: column; gap: 10px; }
.qb-imgcheck-row {
	border-radius: 6px; cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.qb-imgcheck-row:hover { border-color: #2271b1; }
/* Client Req 3 — .main-qb stacks the selectable columns (.inner-qb) above the button. */
.qb-imgcheck-row .main-qb { display: flex; flex-direction: column; gap: 10px; width:100%; }
.qb-imgcheck-row .inner-qb { display: flex; align-items: center; gap: 14px; }
.qb-imgcheck-col { display: flex; align-items: center; box-sizing: border-box; }
.qb-imgcheck-image img { max-width: 100%; height: auto; display: block; border-radius: 4px; }
.qb-imgcheck-title { flex-direction: column; align-items: flex-start; }
.qb-imgcheck-title a { color: inherit; text-decoration: none; font-weight: 600; }
.qb-imgcheck-title a:hover { text-decoration: underline; }
.qb-imgcheck-check { justify-content: center; }
.qb-imgcheck-row input:checked { accent-color: #2271b1; }

/* Client Req 3 — per-image action button (used by Image Checkbox and Ideal Style). */
.qb-img-btn {
    display: inline-block;
    margin-top: 8px;
    color: #141b38;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: underline;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    margin: 8px 0px; 
    align-self: flex-end;
}
.qb-img-btn:hover { background: #fff; color: #A68966; }


/* ---- Req 9: Add-on Checkbox widget ----------------------------------- */
.qb-w-addon-checkbox .qb-addon-group { display: flex; flex-direction: column; gap: 8px; }
.qb-w-addon-checkbox.qb-layout-horizontal .qb-addon-group { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.qb-addon-option {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 12px; border: 1px solid #e2e2e2; border-radius: 6px; cursor: pointer;
}
.qb-addon-option:hover { border-color: #2271b1; }
.qb-addon-body { display: flex; flex-direction: column; gap: 2px; }
.qb-addon-label { font-weight: 600; }
.qb-addon-desc { font-size: 13px; color: #666; }

/* Hidden by a "Conditions Based" rule (Req 1). */
.qb-opt-hidden { display: none !important; }

/* ---- Req 4: captcha ---------------------------------------------------- */
.qb-captcha-wrap { margin: 16px 0; }

/* ---- Toggle widget --------------------------------------------------- */
.qb-w-toggle .qb-toggle-row {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 18px 22px; border: 1px solid #e2e2e2; border-radius: 10px; cursor: pointer;
}
.qb-w-toggle .qb-toggle-text { display: flex; flex-direction: column; gap: 4px; }
.qb-w-toggle .qb-toggle-label { font-weight: 700; font-size: 16px; color: #1d2327; }
.qb-w-toggle .qb-toggle-desc { font-size: 13px; color: #787c82; line-height: 1.5; }
.qb-w-toggle .qb-card-price { font-weight: 600; color: #2271b1; }

/* iOS-style switch */
.qb-toggle-switch { position: relative; flex: 0 0 auto; width: 52px; height: 30px; }
.qb-toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.qb-toggle-slider {
	position: absolute; inset: 0; background: #d5d5d5; border-radius: 999px;
	transition: background .2s ease;
}
.qb-toggle-slider::before {
	content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
	background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3);
	transition: transform .2s ease;
}
.qb-toggle-switch input:checked + .qb-toggle-slider { background: #1d9e5e; }
.qb-toggle-switch input:checked + .qb-toggle-slider::before { transform: translateX(22px); }

/* ---- Spacer widget --------------------------------------------------- */
.qb-w-spacer { width: 100%; }

/* Material Select widget */
.qb-w-material .qb-material-select { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.qb-w-material .qb-material-group { display: flex; flex-direction: column; gap: 8px; }
.qb-w-material .qb-material-option { display: flex; align-items: center; gap: 8px; }
.qb-w-material .qb-material-option .qb-card-price { margin-top: 0; }
/* Consistent checked control in both Single Select (radio) and Multi Select
 * (checkbox) modes — normalises size, alignment and the brand accent so the
 * ticked state renders the same way regardless of the Multi Select setting. */
.qb-w-material .qb-material-option input[type="radio"],
.qb-w-material .qb-material-option input[type="checkbox"] {
	width: 16px; height: 16px; margin: 0; flex: 0 0 16px; accent-color: #2271b1; cursor: pointer;
}

.qb-material-other { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.qb-material-other.qb-one-col { grid-template-columns: 1fr; }
.qb-material-other[hidden] { display: none; }
.qb-material-col { display: flex; flex-direction: column; gap: 8px; }
.qb-material-upload { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; border: 1px dashed #aaa; border-radius: 6px; background: #fafafa; width: fit-content; }
.qb-material-upload:hover { border-color: #2271b1; background: #f0f6fc; }
.qb-material-upload-icon { display: inline-flex; color: #2271b1; }
.qb-material-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.qb-material-file-name { font-size: 13px; color: #555; }
.qb-material-desc { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; resize: vertical; }

@media (max-width: 600px) { .qb-material-other { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ *
 * Shared File Upload control (File Upload widget + Material / Image
 * Checkbox / Tapware file panels).
 * ------------------------------------------------------------------ */
.qb-file-wrap { display: flex; flex-direction: column; gap: 8px; }
.qb-file-wrap[hidden] { display: none; }
.qb-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qb-file-wrap.qb-icon-right .qb-file-icon { order: 2; }
.qb-file-wrap.qb-icon-right .qb-file-upload-text { order: 1; }
.qb-file-upload { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; border: 1px dashed #aaa; border-radius: 6px; background: #fafafa; width: fit-content; }
.qb-file-upload:hover { border-color: #2271b1; background: #f0f6fc; }
.qb-file-icon { display: inline-flex; align-items: center; color: #2271b1; }
.qb-file-icon-img { width: 18px; height: 18px; object-fit: contain; display: block; }
.qb-file-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.qb-file-name { color: #221c19;
    font-size: clamp(17px, calc(18px + (20 - 18) * ((100vw - 1440px) / (1920 - 1440))), 20px); }
.qb-file-desc { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; resize: vertical; }
.qb-w-file-upload .qb-file-wrap { margin-top: 4px; }
.qb-file-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid #e5e0da; border-radius: 8px; background: #f7f4f0; }
.qb-file-box[hidden] { display: none; }
.qb-file-box-name { color: #221c19; word-break: break-word; }
.qb-file-remove { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: #e53935; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.qb-file-remove:hover { background: #c62828; }
.qb-w-tapware .qb-material-other, .qb-w-image-checkbox .qb-material-other { margin-top: 14px; }

/* ------------------------------------------------------------------ *
 * Conditional Question + Deadline widgets. The revealed follow-up /
 * date field reuses the shared .qb-material-other panel (single column).
 * ------------------------------------------------------------------ */
.qb-conditional-group, .qb-deadline-group { display: flex; flex-direction: row; gap: 40px; }
.qb-conditional-option { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.qb-conditional-option input[type="radio"] { width: 24px; height: 24px; margin: 0; flex: 0 0 24px; accent-color: #2271b1; cursor: pointer; }
.qb-followup-label { display: block; font-weight: 600; margin-bottom: 6px; }
.qb-followup-input { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
.qb-w-deadline .qb-date-wrap { width: 100%; }